From aa77d35258b6fbc2eff95f0258d67e7dca4d59c3 Mon Sep 17 00:00:00 2001
From: Ethan Graf <ethan@Beacon.local>
Date: Sun, 28 Jun 2026 11:42:22 -0400
Subject: [PATCH] Move split controls to the title bar + title-bar/sidebar
 polish
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Split Right / Split Down move from the bottom bar to the top bar as
  icon buttons (SplitRightIcon / SplitDownIcon) with hover tooltips, left
  of the workspace selector, shown only in tiling mode. Wired through the
  tiling handle (App.handleSplitRight/Down).
- Title bar: compact fixed-height buttons (size-5) with header padding so
  hover highlights no longer reach the screen edge; tooltip + pointer
  cursor on the sidebar toggle, split buttons, and workspace menu.
- Sidebar: fix asymmetric collapse animation — the open state now also
  transitions width, so re-opening animates instead of snapping.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/App.tsx                      | 11 +++++++++
 src/components/AppSidebar.tsx    |  8 ++++---
 src/components/AppTitleBar.tsx   | 34 ++++++++++++++++++++++++++--
 src/components/WorkspaceMenu.tsx |  2 +-
 src/icons/index.tsx              | 38 ++++++++++++++++++++++++++++++++
 src/workspaces/tiling/tiling.tsx | 22 ++----------------
 6 files changed, 89 insertions(+), 26 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index c3933e8..24b8511 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -320,6 +320,15 @@ function AppShell() {
     [handleOpenEntry],
   );
 
+  const handleSplitRight = useCallback(
+    () => tilingHandleRef.current?.splitRight(),
+    [],
+  );
+  const handleSplitDown = useCallback(
+    () => tilingHandleRef.current?.splitDown(),
+    [],
+  );
+
   const handleNewFile = useCallback(async () => {
     const provider = resolveProvider(selectedProviderId);
     if (!provider) return;
@@ -402,6 +411,8 @@ function AppShell() {
           onToggleSidebar={() => setSidebarOpen((o) => !o)}
           workspaceKind={workspaceKind}
           onWorkspaceKindChange={setWorkspaceKind}
+          onSplitRight={handleSplitRight}
+          onSplitDown={handleSplitDown}
         />
         <AppBottomBar>
           <div
diff --git a/src/components/AppSidebar.tsx b/src/components/AppSidebar.tsx
index 85907f1..483c015 100644
--- a/src/components/AppSidebar.tsx
+++ b/src/components/AppSidebar.tsx
@@ -570,9 +570,11 @@ export function AppSidebar({
         open
           ? {
               width: sidebarWidth,
-              transitionProperty: 'background-color, border-color, color',
-              transitionDuration: '320ms, 320ms, 320ms',
-              transitionTimingFunction: 'ease-in-out, ease-in-out, ease-in-out',
+              transitionProperty:
+                'width, background-color, border-color, color',
+              transitionDuration: '200ms, 320ms, 320ms, 320ms',
+              transitionTimingFunction:
+                'ease-out, ease-in-out, ease-in-out, ease-in-out',
             }
           : {
               transitionProperty:
diff --git a/src/components/AppTitleBar.tsx b/src/components/AppTitleBar.tsx
index f32c3d8..5b3a60d 100644
--- a/src/components/AppTitleBar.tsx
+++ b/src/components/AppTitleBar.tsx
@@ -1,5 +1,6 @@
 import type { CSSProperties } from 'react';
 import type { WorkspaceKind } from '../workspaces/workspace';
+import { SplitDownIcon, SplitRightIcon } from '../icons';
 import { WorkspaceMenu } from './WorkspaceMenu';
 
 type AppTitleBarProps = {
@@ -7,6 +8,8 @@ type AppTitleBarProps = {
   onToggleSidebar: () => void;
   workspaceKind: WorkspaceKind;
   onWorkspaceKindChange: (kind: WorkspaceKind) => void;
+  onSplitRight: () => void;
+  onSplitDown: () => void;
 };
 
 function SidebarToggleIcon({ className }: { className?: string }) {
@@ -44,12 +47,14 @@ export function AppTitleBar({
   onToggleSidebar,
   workspaceKind,
   onWorkspaceKindChange,
+  onSplitRight,
+  onSplitDown,
 }: AppTitleBarProps) {
   const noDrag = { WebkitAppRegion: 'no-drag' as const };
 
   return (
     <header
-      className="bg-background/95 text-foreground flex items-center gap-2 px-1"
+      className="bg-background/95 text-foreground flex items-center gap-2 px-1 py-1"
       style={macTitleBarStyle}
     >
       <div className="flex h-full min-w-0 flex-1 items-center gap-2">
@@ -57,15 +62,40 @@ export function AppTitleBar({
           type="button"
           aria-controls="app-sidebar"
           aria-label={sidebarOpen ? 'Hide sidebar' : 'Show sidebar'}
+          title={sidebarOpen ? 'Hide sidebar' : 'Show sidebar'}
           aria-pressed={sidebarOpen}
           onClick={onToggleSidebar}
-          className="text-foreground hover:bg-border/40 rounded p-1.5"
+          className="text-foreground hover:bg-border/40 flex size-5 cursor-pointer items-center justify-center rounded"
           style={noDrag}
         >
           <SidebarToggleIcon className="size-4" />
         </button>
       </div>
       <div className="flex h-full shrink-0 items-center gap-1 pr-1">
+        {workspaceKind === 'tiling' ? (
+          <>
+            <button
+              type="button"
+              aria-label="Split right"
+              title="Split right"
+              onClick={onSplitRight}
+              className="text-foreground hover:bg-border/40 flex size-5 cursor-pointer items-center justify-center rounded"
+              style={noDrag}
+            >
+              <SplitRightIcon className="size-4" />
+            </button>
+            <button
+              type="button"
+              aria-label="Split down"
+              title="Split down"
+              onClick={onSplitDown}
+              className="text-foreground hover:bg-border/40 flex size-5 cursor-pointer items-center justify-center rounded"
+              style={noDrag}
+            >
+              <SplitDownIcon className="size-4" />
+            </button>
+          </>
+        ) : null}
         <WorkspaceMenu value={workspaceKind} onChange={onWorkspaceKindChange} />
       </div>
     </header>
diff --git a/src/components/WorkspaceMenu.tsx b/src/components/WorkspaceMenu.tsx
index 9016692..0f102bd 100644
--- a/src/components/WorkspaceMenu.tsx
+++ b/src/components/WorkspaceMenu.tsx
@@ -45,7 +45,7 @@ export function WorkspaceMenu({ value, onChange }: WorkspaceMenuProps) {
         aria-expanded={open}
         aria-label="Workspace"
         onClick={() => setOpen((o) => !o)}
-        className="text-foreground/90 hover:bg-border/40 focus-visible:ring-accent/50 inline-flex items-center gap-1 rounded px-2 py-1 text-xs outline-none focus-visible:ring-2"
+        className="text-foreground/90 hover:bg-border/40 focus-visible:ring-accent/50 inline-flex h-5 cursor-pointer items-center gap-1 rounded px-2 text-xs outline-none focus-visible:ring-2"
       >
         <span className="text-foreground/60">Workspace:</span>
         <span className="font-medium">{current?.label ?? value}</span>
diff --git a/src/icons/index.tsx b/src/icons/index.tsx
index 3922c4e..99fa644 100644
--- a/src/icons/index.tsx
+++ b/src/icons/index.tsx
@@ -217,3 +217,41 @@ export function NewDirectoryIcon({ className }: IconProps) {
     </svg>
   );
 }
+
+/** Split the pane to the right: a frame divided by a vertical line. */
+export function SplitRightIcon({ className }: IconProps) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden
+    >
+      <rect x="3" y="4" width="18" height="16" rx="2" />
+      <line x1="12" y1="4" x2="12" y2="20" />
+    </svg>
+  );
+}
+
+/** Split the pane downward: a frame divided by a horizontal line. */
+export function SplitDownIcon({ className }: IconProps) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden
+    >
+      <rect x="3" y="4" width="18" height="16" rx="2" />
+      <line x1="3" y1="12" x2="21" y2="12" />
+    </svg>
+  );
+}
diff --git a/src/workspaces/tiling/tiling.tsx b/src/workspaces/tiling/tiling.tsx
index a462254..6dcec75 100644
--- a/src/workspaces/tiling/tiling.tsx
+++ b/src/workspaces/tiling/tiling.tsx
@@ -544,26 +544,8 @@ export function TilingWorkspace({
         {renderNode(tree)}
       </div>
       <WorkspaceBarSlot>
-        <div className="flex min-w-0 flex-1 items-center gap-2">
-          <button
-            type="button"
-            onClick={() => applySplit('row')}
-            data-command-id="tiling:split-right"
-            className="border-border bg-background text-foreground hover:bg-border/30 focus-visible:ring-accent/50 shrink-0 rounded border px-2 py-1 text-xs outline-none focus-visible:ring-2"
-          >
-            Split Right
-          </button>
-          <button
-            type="button"
-            onClick={() => applySplit('column')}
-            data-command-id="tiling:split-down"
-            className="border-border bg-background text-foreground hover:bg-border/30 focus-visible:ring-accent/50 shrink-0 rounded border px-2 py-1 text-xs outline-none focus-visible:ring-2"
-          >
-            Split Down
-          </button>
-          <div className="text-foreground/60 ml-2 truncate text-xs">
-            Active: {activeTileId}
-          </div>
+        <div className="text-foreground/60 min-w-0 flex-1 truncate text-xs">
+          Active: {activeTileId}
         </div>
       </WorkspaceBarSlot>
     </>
-- 
2.51.2