From 2b3094a4ef5409ca8174b18e5400b5d6309b74cc Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Mon, 18 May 2026 19:39:57 +0200
Subject: [PATCH] feat: pro: unify split panes under a single tab bar

---
 app/[locale]/pro/page.tsx      | 205 ++++++++++++++++++++-------------
 components/pro/pro-tab-bar.tsx |  41 +++----
 2 files changed, 142 insertions(+), 104 deletions(-)

diff --git a/app/[locale]/pro/page.tsx b/app/[locale]/pro/page.tsx
index b8a9aa95..eebb7288 100644
--- a/app/[locale]/pro/page.tsx
+++ b/app/[locale]/pro/page.tsx
@@ -49,47 +49,30 @@ interface PaneProps {
   tabs: ProTab[];
   activeTabId: string | null;
   loadedTabIds: string[];
-  allTabs: ProTab[];
-  onActivate: (id: string) => void;
-  onClose: (id: string) => void;
-  onDragStateChange: (dragging: boolean) => void;
   onPaneFocus: (paneId: ProPaneId) => void;
   isFocused: boolean;
 }
 
-function Pane({
-  paneId, tabs, activeTabId, loadedTabIds, allTabs,
-  onActivate, onClose, onDragStateChange, onPaneFocus, isFocused,
-}: PaneProps) {
+function Pane({ paneId, tabs, activeTabId, loadedTabIds, onPaneFocus, isFocused }: PaneProps) {
   return (
     <div
-      className="flex flex-1 flex-col overflow-hidden min-w-0 min-h-0"
+      className="relative flex flex-1 flex-col overflow-hidden min-w-0 min-h-0"
       onMouseDownCapture={() => { if (!isFocused) onPaneFocus(paneId); }}
     >
-      <ProTabBar
-        tabs={tabs}
-        activeTabId={activeTabId}
-        paneId={paneId}
-        onActivate={onActivate}
-        onClose={onClose}
-        onDragStateChange={onDragStateChange}
-      />
-      <div className="relative flex-1 min-h-0">
-        {allTabs
-          .filter((tab) => tab.paneId === paneId && loadedTabIds.includes(tab.id))
-          .map((tab) => {
-            const isActive = tab.id === activeTabId;
-            return (
-              <div
-                key={tab.id}
-                className={cn("absolute inset-0 overflow-hidden", !isActive && "hidden")}
-                aria-hidden={!isActive}
-              >
-                {renderTabBody(tab)}
-              </div>
-            );
-          })}
-      </div>
+      {tabs
+        .filter((tab) => loadedTabIds.includes(tab.id))
+        .map((tab) => {
+          const isActive = tab.id === activeTabId;
+          return (
+            <div
+              key={tab.id}
+              className={cn("absolute inset-0 overflow-hidden", !isActive && "hidden")}
+              aria-hidden={!isActive}
+            >
+              {renderTabBody(tab)}
+            </div>
+          );
+        })}
     </div>
   );
 }
@@ -134,6 +117,8 @@ export default function ProHome() {
 
   const [isTabDragging, setIsTabDragging] = useState(false);
   const [splitDropTarget, setSplitDropTarget] = useState<DropTarget>(null);
+  /** Whether the split pane visually renders before (true) or after (false) main. */
+  const [splitLeading, setSplitLeading] = useState(false);
 
   // Auth bootstrap (mirrors standard page)
   useEffect(() => {
@@ -153,7 +138,6 @@ export default function ProHome() {
     }
   }, [initialCheckDone, isAuthenticated, authLoading]);
 
-  // Pro is desktop-only — fall back to standard on mobile/tablet
   useEffect(() => {
     if (initialCheckDone && (isMobile || isTablet) && typeof window !== "undefined") {
       window.location.replace("/");
@@ -180,7 +164,9 @@ export default function ProHome() {
       || focusedActiveTab.kind === 'settings'
     ) ? focusedActiveTab.kind : null;
 
-  // ---- Split drop zones ----
+  const isSplit = splitOrientation !== null && splitTabs.length > 0;
+
+  // ---- Body-level drop targets ----
 
   const isProTabDrag = (e: DragEvent) => e.dataTransfer.types.includes(PRO_TAB_DRAG_MIME);
 
@@ -190,8 +176,15 @@ export default function ProHome() {
     const y = e.clientY - rect.top;
     const xFrac = x / rect.width;
     const yFrac = y / rect.height;
-    // Edges: outer 22% of the body becomes a split drop target. The cursor's
-    // dominant axis decides which side activates.
+
+    if (isSplit) {
+      // When split: each pane gets half the body as its drop zone.
+      if (splitOrientation === 'vertical') {
+        return xFrac < 0.5 ? 'left' : 'right';
+      }
+      return yFrac < 0.5 ? 'top' : 'bottom';
+    }
+    // No split: only the outer 22% of each edge creates a split.
     const fromLeft = xFrac;
     const fromRight = 1 - xFrac;
     const fromTop = yFrac;
@@ -204,11 +197,25 @@ export default function ProHome() {
     return 'top';
   };
 
+  const targetPaneFromDrop = (target: DropTarget): ProPaneId | null => {
+    if (!target || !isSplit) return null;
+    if (splitOrientation === 'vertical') {
+      const leftIsSplit = splitLeading;
+      if (target === 'left') return leftIsSplit ? 'split' : 'main';
+      if (target === 'right') return leftIsSplit ? 'main' : 'split';
+    }
+    if (splitOrientation === 'horizontal') {
+      const topIsSplit = splitLeading;
+      if (target === 'top') return topIsSplit ? 'split' : 'main';
+      if (target === 'bottom') return topIsSplit ? 'main' : 'split';
+    }
+    return null;
+  };
+
   const handleBodyDragOver = (e: DragEvent<HTMLDivElement>) => {
     if (!isProTabDrag(e)) return;
-    if (splitOrientation !== null) return; // already split — body drops disabled
     e.preventDefault();
-    e.dataTransfer.dropEffect = 'move';
+    e.dataTransfer.dropEffect = "move";
     const next = computeDropTarget(e);
     if (next !== splitDropTarget) setSplitDropTarget(next);
   };
@@ -221,7 +228,6 @@ export default function ProHome() {
 
   const handleBodyDrop = (e: DragEvent<HTMLDivElement>) => {
     if (!isProTabDrag(e)) return;
-    if (splitOrientation !== null) return;
     const target = computeDropTarget(e);
     setSplitDropTarget(null);
     setIsTabDragging(false);
@@ -229,19 +235,19 @@ export default function ProHome() {
     e.preventDefault();
     const draggedId = e.dataTransfer.getData(PRO_TAB_DRAG_MIME);
     if (!draggedId) return;
-    // The dragged tab must currently be in 'main' (the only pane right now).
-    // Moving it to 'split' creates the split.
+
+    if (isSplit) {
+      // Move tab to whichever pane occupies the dropped side.
+      const destPane = targetPaneFromDrop(target);
+      if (destPane) moveTabToPane(draggedId, destPane);
+      return;
+    }
+    // Create a new split.
     const orientation = (target === 'left' || target === 'right') ? 'vertical' : 'horizontal';
     moveTabToPane(draggedId, 'split', orientation);
-    // 'left'/'top' targets put the split pane on the leading edge — flipped
-    // visually by swapping the rendered order below. We track it via the
-    // splitLeading flag derived from the last drop.
     setSplitLeading(target === 'left' || target === 'top');
   };
 
-  // Whether the split pane renders before (true) or after (false) the main pane.
-  const [splitLeading, setSplitLeading] = useState(false);
-
   // Loading state (matches standard page exactly)
   if (!initialCheckDone || authLoading || !isAuthenticated || !client) {
     return (
@@ -256,18 +262,12 @@ export default function ProHome() {
 
   if (!isDesktop) return null;
 
-  const isSplit = splitOrientation !== null && splitTabs.length > 0;
-
   const mainPane = (
     <Pane
       paneId="main"
       tabs={mainTabs}
       activeTabId={activeMainTabId}
       loadedTabIds={loadedTabIds}
-      allTabs={tabs}
-      onActivate={setActiveTab}
-      onClose={closeTab}
-      onDragStateChange={setIsTabDragging}
       onPaneFocus={setFocusedPane}
       isFocused={focusedPaneId === 'main'}
     />
@@ -279,10 +279,6 @@ export default function ProHome() {
       tabs={splitTabs}
       activeTabId={activeSplitTabId}
       loadedTabIds={loadedTabIds}
-      allTabs={tabs}
-      onActivate={setActiveTab}
-      onClose={closeTab}
-      onDragStateChange={setIsTabDragging}
       onPaneFocus={setFocusedPane}
       isFocused={focusedPaneId === 'split'}
     />
@@ -303,6 +299,32 @@ export default function ProHome() {
     />
   ) : null;
 
+  // Drop-zone overlays: 4 edges when not split, 2 panes when split.
+  const dropZones = isTabDragging ? (
+    <>
+      {!isSplit && (
+        <>
+          <DropZone active={splitDropTarget === 'left'} side="left" />
+          <DropZone active={splitDropTarget === 'right'} side="right" />
+          <DropZone active={splitDropTarget === 'top'} side="top" />
+          <DropZone active={splitDropTarget === 'bottom'} side="bottom" />
+        </>
+      )}
+      {isSplit && splitOrientation === 'vertical' && (
+        <>
+          <DropZoneHalf active={splitDropTarget === 'left'} axis="x" side="leading" />
+          <DropZoneHalf active={splitDropTarget === 'right'} axis="x" side="trailing" />
+        </>
+      )}
+      {isSplit && splitOrientation === 'horizontal' && (
+        <>
+          <DropZoneHalf active={splitDropTarget === 'top'} axis="y" side="leading" />
+          <DropZoneHalf active={splitDropTarget === 'bottom'} axis="y" side="trailing" />
+        </>
+      )}
+    </>
+  ) : null;
+
   return (
     <EmbeddedContext.Provider value={true}>
       <div className="flex flex-col h-dvh bg-background overflow-hidden pt-[env(safe-area-inset-top)]">
@@ -337,31 +359,35 @@ export default function ProHome() {
           )}
 
           {!inlineApp && (
-            <div
-              className={cn(
-                "relative flex flex-1 overflow-hidden min-w-0",
-                isSplit && splitOrientation === 'horizontal' ? "flex-col" : "flex-row",
-              )}
-              onDragOver={handleBodyDragOver}
-              onDragLeave={handleBodyDragLeave}
-              onDrop={handleBodyDrop}
-            >
-              {isSplit
-                ? (splitLeading
-                    ? <>{splitPane}{splitDivider}{mainPane}</>
-                    : <>{mainPane}{splitDivider}{splitPane}</>)
-                : mainPane}
+            <div className="flex flex-1 flex-col overflow-hidden min-w-0">
+              {/* Single, unified tab bar above both panes. */}
+              <ProTabBar
+                tabs={tabs}
+                activeMainTabId={activeMainTabId}
+                activeSplitTabId={activeSplitTabId}
+                onActivate={setActiveTab}
+                onClose={closeTab}
+                onDragStateChange={setIsTabDragging}
+              />
 
-              {/* Split-creation drop zones — shown only while a tab is being
-                  dragged and the body isn't already split. */}
-              {isTabDragging && !isSplit && (
-                <>
-                  <DropZone active={splitDropTarget === 'left'} side="left" />
-                  <DropZone active={splitDropTarget === 'right'} side="right" />
-                  <DropZone active={splitDropTarget === 'top'} side="top" />
-                  <DropZone active={splitDropTarget === 'bottom'} side="bottom" />
-                </>
-              )}
+              {/* Panes container — accepts body drops for split/move. */}
+              <div
+                className={cn(
+                  "relative flex flex-1 overflow-hidden min-w-0",
+                  isSplit && splitOrientation === 'horizontal' ? "flex-col" : "flex-row",
+                )}
+                onDragOver={handleBodyDragOver}
+                onDragLeave={handleBodyDragLeave}
+                onDrop={handleBodyDrop}
+              >
+                {isSplit
+                  ? (splitLeading
+                      ? <>{splitPane}{splitDivider}{mainPane}</>
+                      : <>{mainPane}{splitDivider}{splitPane}</>)
+                  : mainPane}
+
+                {dropZones}
+              </div>
             </div>
           )}
         </div>
@@ -395,3 +421,18 @@ function DropZone({ active, side }: { active: boolean; side: 'left' | 'right' |
     />
   );
 }
+
+function DropZoneHalf({ active, axis, side }: { active: boolean; axis: 'x' | 'y'; side: 'leading' | 'trailing' }) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn(
+        "pointer-events-none absolute z-10 transition-colors duration-100",
+        axis === 'x'
+          ? cn("top-0 bottom-0 w-1/2", side === 'leading' ? "left-0" : "right-0")
+          : cn("left-0 right-0 h-1/2", side === 'leading' ? "top-0" : "bottom-0"),
+        active ? "bg-primary/10 ring-2 ring-primary/40 ring-inset" : "bg-transparent",
+      )}
+    />
+  );
+}
diff --git a/components/pro/pro-tab-bar.tsx b/components/pro/pro-tab-bar.tsx
index 61f5edf6..5b367fa6 100644
--- a/components/pro/pro-tab-bar.tsx
+++ b/components/pro/pro-tab-bar.tsx
@@ -4,16 +4,16 @@ import { useRef, useState, type DragEvent } from "react";
 import { useTranslations } from "next-intl";
 import { Mail, Calendar, BookUser, HardDrive, Settings, PenSquare, MailOpen, X, type LucideIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { useProTabStore, type ProTab, type ProTabKind, type ProPaneId } from "@/stores/pro-tab-store";
+import { useProTabStore, type ProTab, type ProTabKind } from "@/stores/pro-tab-store";
 
 /** Custom MIME type used to carry the dragged Pro tab id between handlers. */
 export const PRO_TAB_DRAG_MIME = "application/x-pro-tab-id";
 
 interface ProTabBarProps {
-  /** Tabs belonging to this bar's pane, already filtered + ordered. */
+  /** All tabs (both panes). Order in the array is the order in the bar. */
   tabs: ProTab[];
-  activeTabId: string | null;
-  paneId: ProPaneId;
+  activeMainTabId: string | null;
+  activeSplitTabId: string | null;
   onActivate: (id: string) => void;
   onClose: (id: string) => void;
   onDragStateChange?: (dragging: boolean) => void;
@@ -34,8 +34,8 @@ type DropIndicator = { targetId: string; edge: "before" | "after" } | null;
 
 export function ProTabBar({
   tabs,
-  activeTabId,
-  paneId,
+  activeMainTabId,
+  activeSplitTabId,
   onActivate,
   onClose,
   onDragStateChange,
@@ -43,8 +43,7 @@ export function ProTabBar({
 }: ProTabBarProps) {
   const tSidebar = useTranslations("sidebar");
   const reorderTab = useProTabStore((s) => s.reorderTab);
-  const moveTabToPane = useProTabStore((s) => s.moveTabToPane);
-  const splitOrientation = useProTabStore((s) => s.splitOrientation);
+  const focusedPaneId = useProTabStore((s) => s.focusedPaneId);
 
   const [dropIndicator, setDropIndicator] = useState<DropIndicator>(null);
   const dragLeaveTimer = useRef<number | null>(null);
@@ -82,9 +81,6 @@ export function ProTabBar({
   };
 
   const handleStripDragLeave = (e: DragEvent<HTMLDivElement>) => {
-    // Clear the indicator only when the cursor truly leaves the strip; the
-    // intermediate dragleave events that fire as the cursor crosses tab
-    // boundaries would otherwise flicker the indicator off.
     const next = e.relatedTarget as Node | null;
     if (next && e.currentTarget.contains(next)) return;
     if (dragLeaveTimer.current !== null) window.clearTimeout(dragLeaveTimer.current);
@@ -107,8 +103,6 @@ export function ProTabBar({
     handleDragEnd();
   };
 
-  // Dropping on the empty trailing area moves the tab to the end of this bar's
-  // pane. If the dragged tab was in the other pane, that also moves it here.
   const handleStripEndDrop = (e: DragEvent<HTMLDivElement>) => {
     if (!isProTabDrag(e)) return;
     e.preventDefault();
@@ -118,10 +112,7 @@ export function ProTabBar({
       return;
     }
     const last = tabs[tabs.length - 1];
-    if (!last) {
-      // Bar is empty — move into this pane.
-      moveTabToPane(draggedId, paneId, splitOrientation ?? "vertical");
-    } else if (last.id !== draggedId) {
+    if (last && last.id !== draggedId) {
       reorderTab(draggedId, last.id, "after");
     }
     handleDragEnd();
@@ -149,7 +140,12 @@ export function ProTabBar({
     >
       {tabs.map((tab) => {
         const Icon = TAB_ICONS[tab.kind];
-        const isActive = tab.id === activeTabId;
+        const isActiveMain = tab.id === activeMainTabId && tab.paneId === 'main';
+        const isActiveSplit = tab.id === activeSplitTabId && tab.paneId === 'split';
+        const isActive = isActiveMain || isActiveSplit;
+        const isFocusedActive =
+          (isActiveMain && focusedPaneId === 'main')
+          || (isActiveSplit && focusedPaneId === 'split');
         const label = tab.title ?? tSidebar(tab.labelKey);
         const showBefore = dropIndicator?.targetId === tab.id && dropIndicator.edge === "before";
         const showAfter = dropIndicator?.targetId === tab.id && dropIndicator.edge === "after";
@@ -159,6 +155,7 @@ export function ProTabBar({
             role="tab"
             aria-selected={isActive}
             data-tab-id={tab.id}
+            data-pane-id={tab.paneId}
             draggable
             onClick={() => onActivate(tab.id)}
             onMouseDown={(e) => {
@@ -176,8 +173,9 @@ export function ProTabBar({
               "min-w-0 flex-1 basis-0 max-w-[200px] [min-width:80px]",
               "border-r border-border first:border-l",
               isActive
-                ? "bg-background text-foreground font-medium"
+                ? "bg-background text-foreground"
                 : "text-muted-foreground hover:bg-muted hover:text-foreground",
+              isFocusedActive && "font-medium",
             )}
             style={
               isActive
@@ -185,7 +183,7 @@ export function ProTabBar({
                 : undefined
             }
           >
-            <Icon className={cn("w-4 h-4 flex-shrink-0", isActive && "text-primary")} />
+            <Icon className={cn("w-4 h-4 flex-shrink-0", isFocusedActive && "text-primary")} />
             <span className="truncate flex-1 min-w-0" title={label}>{label}</span>
 
             {tab.closeable && (
@@ -229,8 +227,7 @@ export function ProTabBar({
         );
       })}
 
-      {/* Trailing area soaks up drops past the last tab and lets cross-pane
-          moves drop onto an empty bar. */}
+      {/* Trailing area soaks up drops past the last tab. */}
       <div
         className="flex-1 min-w-[8px]"
         onDragOver={handleStripEndDragOver}