@brimveyn/aimux 1.20.3 → 1.21.0

package/src/ui/root.tsx

@@ -6,6 +6,7 @@ import type { MeasuredPaneRect } from '../app-runtime/use-pane-size-report'
 import type { WorktreeTemplate } from '../config'
 import type { TerminalContentOrigin } from '../input/raw-input-handler'
 import type {
+  BarSide,
   FocusMode,
   ModalState,
   SessionRecord,
@@ -16,13 +17,10 @@ import type { ThemeId } from './themes'
 
 import { useWorktreeBranchPolling } from '../git/worktree-branch-poller'
 import { useAppStore } from '../state/app-store'
-import { dispatchGlobal } from '../state/dispatch-ref'
-import { getGitPaneWidthFromRatio } from '../state/git-pane-sizing'
+import { getBarWidth } from '../state/bars'
 import { getTreeForTab, PANE_BORDER, type SplitDirection } from '../state/layout-tree'
 import { GitView } from './components/git/git-view'
-import { buildGitPaneContextMenu } from './components/git/pane/git-pane-context-menu'
-import { GitPaneWidget } from './components/git/pane/git-pane-widget'
-import { Sidebar } from './components/layout/sidebar/sidebar'
+import { Bar, type BarBoundaryResizeInfo } from './components/layout/bar'
 import { SplitLayout } from './components/layout/split-layout'
 import { StatusBar } from './components/layout/status-bar'
 import { TerminalPane } from './components/layout/terminal-pane'
@@ -41,7 +39,6 @@ import { NewTabModal } from './components/modals/tabs/new-tab-modal'
 import { ThemePickerModal } from './components/modals/themes/theme-picker-modal'
 import { WorktreeMoveConfirmModal } from './components/modals/worktree/worktree-move-confirm-modal'
 import { WorktreeMoveModal } from './components/modals/worktree/worktree-move-modal'
-import { ContextMenuBox } from './components/overlays/context-menu/context-menu-box'
 import { ContextMenuOverlay } from './components/overlays/context-menu/context-menu-overlay'
 import { PendingChordOverlay } from './components/overlays/pending-chord-overlay'
 import { ToastViewport } from './components/overlays/toast/toast-viewport'
@@ -289,17 +286,8 @@ interface RootViewProps {
   onTerminalMouseUp?: (event: MouseEvent) => boolean
   onPaneActivate?: (tabId: string) => void
   onSplitResize?: (tabId: string, ratio: number, axis: SplitDirection) => void
-  onSidebarResizeStart?: (info: { initialWidth: number; screenStart: number }) => void
-  onGitPaneResizeStart?: (info: {
-    initialWidth: number
-    screenStart: number
-    side: 'left' | 'right'
-  }) => void
-  onEmbeddedGitResizeStart?: (info: {
-    containerStart: number
-    position: 'top' | 'bottom'
-    totalSize: number
-  }) => void
+  onBarResizeStart?: (info: { initialWidth: number; screenStart: number; side: BarSide }) => void
+  onBarBoundaryResizeStart?: (info: BarBoundaryResizeInfo) => void
   onSeparatorDragStart?: (info: {
     tabId: string
     direction: SplitDirection
@@ -317,14 +305,13 @@ export function RootView({
   contentOrigin,
   localScrollbackEnabled,
   mouseForwardingEnabled,
-  onEmbeddedGitResizeStart,
-  onGitPaneResizeStart,
+  onBarBoundaryResizeStart,
+  onBarResizeStart,
   onMeasure,
   onPaneActivate,
   onSeparatorDrag,
   onSeparatorDragEnd,
   onSeparatorDragStart,
-  onSidebarResizeStart,
   onSplitResize,
   onTerminalClick,
   onTerminalDrag,
@@ -349,31 +336,25 @@ export function RootView({
   const currentSessionId = useAppStore((s) => s.currentSessionId)
   const worktreeDivergence = useAppStore((s) => s.worktreeDivergence)
   const worktreeTemplates = useAppStore((s) => s.worktreeTemplates)
-  const gitPaneMode = useAppStore((s) => s.gitPane.mode)
-  const gitPaneVisible = useAppStore((s) => s.gitPane.visible)
-  const gitPanePosition = useAppStore((s) => s.gitPane.position)
-  const gitPaneRatio = useAppStore((s) => s.gitPane.paneRatio)
-  const sidebarWidth = useAppStore((s) => s.sidebar.width)
-  const sidebarVisible = useAppStore((s) => s.sidebar.visible)
+  const leftBarWidth = useAppStore((s) => getBarWidth(s.bars.left))
 
-  const gitPaneInPaneOnLeft = gitPaneMode === 'pane' && gitPaneVisible && gitPanePosition === 'left'
   const splitChrome = PANE_BORDER * 2
 
   // Keep every worktree's `branch` in state synchronized with the on-disk
   // HEAD so the sidebar (and divergence calc) never reads a stale value.
   useWorktreeBranchPolling(true)
 
-  const handleSidebarEdgeResize = useCallback(
+  // The terminal's own left edge stays a drag target for the left bar, so the
+  // resize gesture works from either side of the seam.
+  const handleLeftBarEdgeResize = useCallback(
     (event: MouseEvent): boolean => {
-      onSidebarResizeStart?.({ initialWidth: sidebarWidth, screenStart: event.x })
+      onBarResizeStart?.({ initialWidth: leftBarWidth, screenStart: event.x, side: 'left' })
       return true
     },
-    [onSidebarResizeStart, sidebarWidth]
+    [leftBarWidth, onBarResizeStart]
   )
   const handleTerminalLeftEdgeMouseDown =
-    sidebarVisible && !gitPaneInPaneOnLeft && onSidebarResizeStart
-      ? handleSidebarEdgeResize
-      : undefined
+    leftBarWidth > 0 && onBarResizeStart ? handleLeftBarEdgeResize : undefined
 
   const handleRootMouseDrag = useCallback(
     (event: MouseEvent) => {
@@ -460,21 +441,16 @@ export function RootView({
       onMouseUp={handleRootMouseUp}
     >
       <box flexDirection="row" gap={0} padding={0} flexGrow={1}>
-        <Sidebar
-          onEmbeddedGitResizeStart={onEmbeddedGitResizeStart}
+        <Bar
+          side="left"
+          onBoundaryResizeStart={onBarBoundaryResizeStart}
+          onEdgeResizeStart={onBarResizeStart}
           onResizeDrag={onSeparatorDrag}
           onResizeDragEnd={onSeparatorDragEnd}
         />
         <box flexDirection="column" flexGrow={1}>
           <TopTabBar />
           <box flexDirection="row" gap={0} padding={0} flexGrow={1}>
-            {gitPaneMode === 'pane' && gitPaneVisible && gitPanePosition === 'left' ? (
-              <GitPaneInPaneMode
-                position="left"
-                ratio={gitPaneRatio}
-                onGitPaneResizeStart={onGitPaneResizeStart}
-              />
-            ) : null}
             {activeTree && activeTree.type === 'split' ? (
               <SplitLayout
                 node={activeTree}
@@ -517,15 +493,15 @@ export function RootView({
                 onMeasure={onMeasure}
               />
             )}
-            {gitPaneMode === 'pane' && gitPaneVisible && gitPanePosition === 'right' ? (
-              <GitPaneInPaneMode
-                position="right"
-                ratio={gitPaneRatio}
-                onGitPaneResizeStart={onGitPaneResizeStart}
-              />
-            ) : null}
           </box>
         </box>
+        <Bar
+          side="right"
+          onBoundaryResizeStart={onBarBoundaryResizeStart}
+          onEdgeResizeStart={onBarResizeStart}
+          onResizeDrag={onSeparatorDrag}
+          onResizeDragEnd={onSeparatorDragEnd}
+        />
       </box>
       <StatusBar />
       <PendingChordOverlay />
@@ -547,63 +523,3 @@ export function RootView({
     </box>
   )
 }
-
-function GitPaneInPaneMode({
-  onGitPaneResizeStart,
-  position,
-  ratio,
-}: {
-  ratio: number
-  position: 'left' | 'right'
-  onGitPaneResizeStart?: (info: {
-    initialWidth: number
-    screenStart: number
-    side: 'left' | 'right'
-  }) => void
-}) {
-  const tokens = useTheme()
-  const bg = tokens.backgroundPanel
-  const gitPane = useAppStore((s) => s.gitPane)
-  const width = getGitPaneWidthFromRatio(ratio)
-  const contentWidth = Math.max(1, width - 1)
-  const gitPaneMenu = buildGitPaneContextMenu(
-    gitPane,
-    () => dispatchGlobal({ type: 'toggle-git-pane' }),
-    (mode, nextPosition) => {
-      dispatchGlobal({ mode, type: 'set-git-pane-mode' })
-      dispatchGlobal({ position: nextPosition, type: 'set-git-pane-position' })
-    }
-  )
-  const handleResizeMouseDown = useCallback(
-    (event: MouseEvent) => {
-      event.preventDefault()
-      event.stopPropagation()
-      onGitPaneResizeStart?.({ initialWidth: width, screenStart: event.x, side: position })
-    },
-    [onGitPaneResizeStart, position, width]
-  )
-  const handle = (
-    <box
-      width={1}
-      flexShrink={0}
-      backgroundColor={tokens.border}
-      onMouseDown={handleResizeMouseDown}
-    />
-  )
-  return (
-    <box flexDirection="column" width={width} flexShrink={0} backgroundColor={bg} overflow="hidden">
-      <box flexDirection="row" flexGrow={1} overflow="hidden">
-        {position === 'right' ? handle : null}
-        <ContextMenuBox
-          width={contentWidth}
-          flexGrow={1}
-          overflow="hidden"
-          rightClickMenu={gitPaneMenu}
-        >
-          <GitPaneWidget pollingEnabled />
-        </ContextMenuBox>
-        {position === 'left' ? handle : null}
-      </box>
-    </box>
-  )
-}

package/src/ui/widgets/registry.tsx

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react'
+
+import { GitPaneWidget } from '../components/git/pane/git-pane-widget'
+import { WorkspaceList } from '../components/layout/sidebar/workspace-list'
+
+/**
+ * Everything a bar can host. Adding a widget = one entry here plus its id in
+ * `KNOWN_WIDGET_IDS` (src/state/bars.ts) and in the default layout.
+ */
+export const WIDGET_RENDERERS: Record<string, (contentWidth: number) => ReactNode> = {
+  git: (contentWidth) => <GitPaneWidget contentWidth={contentWidth} pollingEnabled />,
+  workspaces: (contentWidth) => <WorkspaceList contentWidth={contentWidth} />,
+}
+
+export const WIDGET_LABELS: Record<string, string> = {
+  git: 'Git',
+  workspaces: 'Workspaces',
+}

package/src/ui/widgets/widget-context-menu.ts

@@ -0,0 +1,69 @@
+import type { BarSide, BarsState } from '../../state/types'
+import type { ContextMenuItem } from '../context-menu/controller'
+
+import { visibleWidgets } from '../../state/bars'
+import { dispatchGlobal } from '../../state/dispatch-ref'
+import { WIDGET_LABELS } from './registry'
+
+/**
+ * Right-click menu for a widget hosted in a bar: move it across, reorder it
+ * within its bar, or hide it. Generic — a new widget gets this for free.
+ */
+export function buildWidgetContextMenu(
+  bars: BarsState,
+  side: BarSide,
+  widgetId: string
+): ContextMenuItem[] {
+  const widgets = bars[side].widgets
+  const index = widgets.findIndex((widget) => widget.id === widgetId)
+  if (index === -1) return []
+
+  const other: BarSide = side === 'left' ? 'right' : 'left'
+  const items: ContextMenuItem[] = [
+    [
+      `Move to ${other} bar`,
+      () =>
+        dispatchGlobal({
+          index: bars[other].widgets.length,
+          side: other,
+          type: 'move-widget',
+          widgetId,
+        }),
+    ],
+  ]
+
+  if (index > 0) {
+    items.push([
+      'Move up',
+      () => dispatchGlobal({ index: index - 1, side, type: 'move-widget', widgetId }),
+    ])
+  }
+  if (index < widgets.length - 1) {
+    items.push([
+      'Move down',
+      () => dispatchGlobal({ index: index + 1, side, type: 'move-widget', widgetId }),
+    ])
+  }
+
+  // Hiding the last visible widget would collapse the bar to zero width and
+  // take its own context menu with it — leaving no way back.
+  if (visibleWidgets(bars[side]).length > 1) {
+    items.push(['Hide', () => dispatchGlobal({ type: 'toggle-widget', widgetId })])
+  }
+  return items
+}
+
+/** Menu for the bar itself. Offers a way back for every hidden widget. */
+export function buildBarContextMenu(bars: BarsState, side: BarSide): ContextMenuItem[] {
+  const items: ContextMenuItem[] = [
+    [`Hide ${side} bar`, () => dispatchGlobal({ side, type: 'toggle-bar' })],
+  ]
+  for (const widget of bars[side].widgets) {
+    if (widget.visible) continue
+    items.push([
+      `Show ${WIDGET_LABELS[widget.id] ?? widget.id}`,
+      () => dispatchGlobal({ type: 'toggle-widget', widgetId: widget.id }),
+    ])
+  }
+  return items
+}

package/src/ui/components/git/pane/git-pane-context-menu.ts

@@ -1,26 +0,0 @@
-import type { GitPaneMode, GitPanePosition, GitPaneState } from '../../../../state/types'
-import type { ContextMenuItem } from '../../../context-menu/controller'
-
-const GIT_PANE_MENU_OPTIONS: {
-  label: string
-  mode: GitPaneMode
-  position: GitPanePosition
-}[] = [
-  { label: 'Move to top', mode: 'embedded', position: 'top' },
-  { label: 'Move to bottom', mode: 'embedded', position: 'bottom' },
-  { label: 'Move to left', mode: 'pane', position: 'left' },
-  { label: 'Move to right', mode: 'pane', position: 'right' },
-]
-
-export function buildGitPaneContextMenu(
-  gitPane: Pick<GitPaneState, 'mode' | 'position'>,
-  onToggle: () => void,
-  onMove: (mode: GitPaneMode, position: GitPanePosition) => void
-): ContextMenuItem[] {
-  return [
-    ['Toggle', onToggle],
-    ...GIT_PANE_MENU_OPTIONS.filter(
-      ({ mode, position }) => !(gitPane.mode === mode && gitPane.position === position)
-    ).map(({ label, mode, position }) => [label, () => onMove(mode, position)] as ContextMenuItem),
-  ]
-}

package/src/ui/components/layout/sidebar/sidebar.tsx

@@ -1,163 +0,0 @@
-import type { BoxRenderable, MouseEvent as OtuiMouseEvent } from '@opentui/core'
-
-import { useCallback, useMemo, useRef } from 'react'
-
-import { useAppStore } from '../../../../state/app-store'
-import { dispatchGlobal } from '../../../../state/dispatch-ref'
-import { useTheme } from '../../../theme'
-import { buildGitPaneContextMenu } from '../../git/pane/git-pane-context-menu'
-import { GitPaneWidget } from '../../git/pane/git-pane-widget'
-import { ContextMenuBox } from '../../overlays/context-menu/context-menu-box'
-import { WorkspaceList } from './workspace-list'
-
-interface SidebarProps {
-  onResizeDrag?: (event: OtuiMouseEvent) => boolean
-  onResizeDragEnd?: () => void
-  onEmbeddedGitResizeStart?: (info: {
-    containerStart: number
-    position: 'top' | 'bottom'
-    totalSize: number
-  }) => void
-}
-
-const RESIZE_HANDLE = '─'
-
-export function Sidebar({ onEmbeddedGitResizeStart, onResizeDrag, onResizeDragEnd }: SidebarProps) {
-  const t = useTheme()
-  const sidebarBg = t.background
-  const sidebarVisible = useAppStore((s) => s.sidebar.visible)
-  const sidebarWidth = useAppStore((s) => s.sidebar.width)
-  const gitPane = useAppStore((s) => s.gitPane)
-  const focusMode = useAppStore((s) => s.focusMode)
-  const bodyRef = useRef<BoxRenderable | null>(null)
-
-  const handleSidebarMouseDown = useCallback(() => {
-    if (focusMode === 'terminal-input') {
-      dispatchGlobal({ focusMode: 'navigation', type: 'set-focus-mode' })
-    }
-  }, [focusMode])
-  const handleSidebarMouseDrag = useCallback(
-    (event: OtuiMouseEvent) => {
-      if (onResizeDrag?.(event) === true) {
-        event.preventDefault()
-        event.stopPropagation()
-      }
-    },
-    [onResizeDrag]
-  )
-  const handleSidebarMouseUp = useCallback(() => {
-    onResizeDragEnd?.()
-  }, [onResizeDragEnd])
-  const handleEmbeddedHandleMouseDown = useCallback(
-    (event: OtuiMouseEvent) => {
-      const body = bodyRef.current
-      if (!body) return
-      event.preventDefault()
-      event.stopPropagation()
-      onEmbeddedGitResizeStart?.({
-        containerStart: body.y,
-        position: gitPane.position === 'top' ? 'top' : 'bottom',
-        totalSize: Math.max(1, body.height),
-      })
-    },
-    [gitPane.position, onEmbeddedGitResizeStart]
-  )
-  const sidebarMenu = useMemo<[string, () => void][]>(
-    () => [
-      ['Hide sidebar', () => dispatchGlobal({ type: 'toggle-sidebar' })],
-      ['Toggle git pane', () => dispatchGlobal({ type: 'toggle-git-pane' })],
-      [
-        'Toggle diff mode',
-        () => {
-          dispatchGlobal({ type: 'enter-git-mode' })
-          dispatchGlobal({ type: 'git-mode-toggle-diff-view' })
-        },
-      ],
-    ],
-    []
-  )
-
-  if (!sidebarVisible) {
-    return null
-  }
-
-  const gitEmbedded = gitPane.mode === 'embedded' && gitPane.visible
-  const gitOnTop = gitEmbedded && gitPane.position === 'top'
-  const gitOnBottom = gitEmbedded && gitPane.position === 'bottom'
-  const contentWidth = Math.max(1, sidebarWidth - 1)
-  const gitPaneMenu = buildGitPaneContextMenu(
-    gitPane,
-    () => dispatchGlobal({ type: 'toggle-git-pane' }),
-    (mode, position) => {
-      dispatchGlobal({ mode, type: 'set-git-pane-mode' })
-      dispatchGlobal({ position, type: 'set-git-pane-position' })
-    }
-  )
-
-  // flex-grow scaled by 100 (integer preferred); workspace list gets (1-ratio), git gets ratio.
-  const listGrow = gitEmbedded ? Math.max(1, Math.round((1 - gitPane.embeddedRatio) * 100)) : 1
-  const gitGrow = gitEmbedded ? Math.max(1, Math.round(gitPane.embeddedRatio * 100)) : 0
-
-  const gitBody = gitEmbedded ? (
-    <ContextMenuBox
-      flexDirection="column"
-      flexGrow={gitGrow}
-      flexShrink={1}
-      flexBasis={0}
-      overflow="hidden"
-      rightClickMenu={gitPaneMenu}
-    >
-      <GitPaneWidget pollingEnabled={gitPane.visible} />
-    </ContextMenuBox>
-  ) : null
-  const embeddedHandle = gitEmbedded ? (
-    <box minHeight={1} flexShrink={0} onMouseDown={handleEmbeddedHandleMouseDown}>
-      <text fg={t.border} selectable={false}>
-        {RESIZE_HANDLE.repeat(Math.max(1, contentWidth))}
-      </text>
-    </box>
-  ) : null
-
-  return (
-    <ContextMenuBox
-      width={sidebarWidth}
-      padding={0}
-      flexDirection="column"
-      backgroundColor={sidebarBg}
-      gap={0}
-      overflow="hidden"
-      rightClickMenu={sidebarMenu}
-      onMouseDown={handleSidebarMouseDown}
-      onMouseDrag={handleSidebarMouseDrag}
-      onMouseUp={handleSidebarMouseUp}
-    >
-      <box flexDirection="row" width={sidebarWidth} flexGrow={1} overflow="hidden">
-        <box width={contentWidth} flexGrow={1} flexDirection="column" overflow="hidden">
-          <box ref={bodyRef} flexDirection="column" flexGrow={1} overflow="hidden">
-            {gitOnTop ? (
-              <>
-                {gitBody}
-                {embeddedHandle}
-              </>
-            ) : null}
-            <box
-              flexDirection="column"
-              flexGrow={listGrow}
-              flexShrink={1}
-              flexBasis={0}
-              overflow="hidden"
-            >
-              <WorkspaceList contentWidth={contentWidth} />
-            </box>
-            {gitOnBottom ? (
-              <>
-                {embeddedHandle}
-                {gitBody}
-              </>
-            ) : null}
-          </box>
-        </box>
-      </box>
-    </ContextMenuBox>
-  )
-}