-
-
-
-
{
- event.preventDefault()
- event.currentTarget.setPointerCapture(event.pointerId)
- dragRef.current = { startY: event.clientY, startHeight: state.bottomHeight }
- setDragging(true)
- }}
- onPointerMove={(event) => {
- if (!event.currentTarget.hasPointerCapture(event.pointerId)) return
- const { startY, startHeight } = dragRef.current
- const box = dividerRef.current?.parentElement?.getBoundingClientRect()
- const bodyHeight = box === undefined || box.height === 0 ? window.innerHeight : box.height
- const next = Math.min(
- Math.max(BOTTOM_MIN, startHeight + (event.clientY - startY)),
- Math.max(BOTTOM_MIN, bodyHeight - BOTTOM_MIN),
- )
- scheduleHeight(next)
- }}
- onPointerUp={(event) => {
- if (!event.currentTarget.hasPointerCapture(event.pointerId)) return
- event.currentTarget.releasePointerCapture(event.pointerId)
- if (dragFrame.current !== null) {
- cancelAnimationFrame(dragFrame.current)
- dragFrame.current = null
- }
- const final = pending.current
- pending.current = null
- setDragging(false)
- if (final !== null) onBottomHeightCommit(final)
- }}
- />
-
-
-
-
- )
-}
diff --git a/src/client/state.ts b/src/client/state.ts
index 3a6dd7b..f822596 100644
--- a/src/client/state.ts
+++ b/src/client/state.ts
@@ -206,6 +206,44 @@ export function firstLeaf(node: SplitNode): SidebarLeaf {
return firstLeaf(node.children[0]!)
}
+/** Empty every leaf of a tree (the bottom tree after its tabs migrate out). */
+function clearAllTabs(node: SplitNode): SplitNode {
+ if (node.kind === 'leaf') return { ...node, tabs: [], active: null }
+ return { ...node, children: node.children.map(clearAllTabs) }
+}
+
+/**
+ * Narrow-viewport migration: the bottom panel's tabs are thrown INTO the
+ * right sidebar — the "merged display" on mobile is the right panel alone,
+ * whose tab strips now carry the bottom tree's tabs (depth-first order,
+ * appended to the right tree's FIRST leaf). The bottom tree is emptied (its
+ * structure stays — the desktop bottom panel re-renders its welcome cards)
+ * and the panel closes. The active pane moves to the right tree's first
+ * leaf so every new tab lands in the visible panel.
+ *
+ * Idempotent: a bottom tree with no tabs and a closed panel returns the
+ * same reference. Runs when the viewport enters narrow (see the Sidebar
+ * shell); migrating is permanent for the session — the tabs now live in the
+ * right tree, exactly like the user "threw them in".
+ */
+export function migrateBottomTabs(state: SidebarState): SidebarState {
+ const bottomTabs = allLeaves(state.bottomSplits).flatMap(leaf => leaf.tabs)
+ const activeInBottom = state.activePane !== null && treeHasId(state.bottomSplits, state.activePane)
+ if (bottomTabs.length === 0 && !state.bottomOpen && !activeInBottom) return state
+ const target = firstLeaf(state.splits)
+ return {
+ ...state,
+ activePane: target.id,
+ bottomOpen: false,
+ splits: bottomTabs.length > 0
+ ? mapLeaf(state.splits, target.id, leaf => {
+ leaf.tabs = [...leaf.tabs, ...bottomTabs]
+ })
+ : state.splits,
+ bottomSplits: bottomTabs.length > 0 ? clearAllTabs(state.bottomSplits) : state.bottomSplits,
+ }
+}
+
/** Find the leaf containing a tab id, if any. */
export function leafWithTab(node: SplitNode, tabId: string): SidebarLeaf | undefined {
if (node.kind === 'leaf') {
diff --git a/tests/breakpoints.spec.ts b/tests/breakpoints.spec.ts
index 827caeb..c576c90 100644
--- a/tests/breakpoints.spec.ts
+++ b/tests/breakpoints.spec.ts
@@ -1,21 +1,24 @@
/**
* Narrow-viewport breakpoint tests: the boundary the mobile sidebar layout
- * keys off (paired with the CSS @media (max-width: 1023px) gates in
- * sidebar.module.css — 1023px ≡ widths strictly below NARROW_MAX_WIDTH).
+ * keys off (paired with the CSS @media (max-width: 767px) gates in
+ * sidebar.module.css — 767px ≡ widths strictly below NARROW_MAX_WIDTH).
+ * Deliberately NOT aligned to the DSH app shell's 1024px breakpoint: the
+ * mobile layout is for real narrow screens (phones / portrait tablets).
*/
import { describe, expect, it } from 'vitest'
import { isNarrowWidth, NARROW_MAX_WIDTH } from '../src/client/breakpoints.ts'
describe('narrow-viewport breakpoint', () => {
it('treats widths below NARROW_MAX_WIDTH as narrow (mobile)', () => {
- expect(NARROW_MAX_WIDTH).toBe(1024)
+ expect(NARROW_MAX_WIDTH).toBe(768)
expect(isNarrowWidth(320)).toBe(true)
expect(isNarrowWidth(390)).toBe(true)
- expect(isNarrowWidth(768)).toBe(true)
- expect(isNarrowWidth(1023)).toBe(true)
+ expect(isNarrowWidth(600)).toBe(true)
+ expect(isNarrowWidth(767)).toBe(true)
})
it('treats NARROW_MAX_WIDTH and above as wide (desktop)', () => {
+ expect(isNarrowWidth(768)).toBe(false)
expect(isNarrowWidth(1024)).toBe(false)
expect(isNarrowWidth(1280)).toBe(false)
expect(isNarrowWidth(1920)).toBe(false)
diff --git a/tests/mobile-workbench.spec.tsx b/tests/mobile-workbench.spec.tsx
deleted file mode 100644
index 517ff0a..0000000
--- a/tests/mobile-workbench.spec.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * MobileWorkbench tests: the narrow-viewport merged workbench — BOTH trees
- * (right + bottom) stacked in one panel with a draggable divider between
- * them, the bottom tree at the shared state.bottomHeight. Structure
- * assertions via renderToString (the repo's component-test pattern). The
- * divider drag itself is pointer-capture logic — exercised manually, like
- * the desktop panel drags; the store clamp it commits through
- * (setBottomHeight) is unit-tested in unit.spec.ts.
- */
-import { describe, expect, it } from 'vitest'
-import { renderToString } from 'react-dom/server'
-import { MobileWorkbench, type WorkbenchActions } from '../src/client/split-pane.tsx'
-import { makeDefaultState } from '../src/client/state.ts'
-
-const noopActions: WorkbenchActions = {
- closeTab: () => {},
- activateTab: () => {},
- focusPane: () => {},
- moveTabToEdge: () => {},
- moveTabBefore: () => {},
- resizeSplit: () => {},
-}
-
-describe('MobileWorkbench (narrow merged layout)', () => {
- it('renders BOTH trees stacked, with the divider and the shared bottom height', () => {
- const state = makeDefaultState()
- // A terminal tab in the bottom tree (a desktop bottom-panel session).
- const bottomPane = state.bottomSplits as { tabs: Array<{ id: string; type: string; title: string }> }
- bottomPane.tabs = [{ id: 'tab:b1', type: 'terminal', title: 'Terminal' }]
- const html = renderToString((
-
{}}
- renderTab={(tab) => {tab.title}
}
- onBottomHeightCommit={() => {}}
- />
- ))
- // The right tree's default explorer tab renders (tab strip).
- expect(html).toContain('Explorer')
- // The bottom tree's terminal tab renders — the merge shows both trees.
- expect(html).toContain('Terminal')
- // The divider sits between the two workbenches.
- expect(html).toContain('divider')
- // The bottom pane carries the shared bottomHeight (the desktop bottom
- // panel's height field drives the mobile bottom tree's height).
- expect(html).toContain(`height:${state.bottomHeight}px`)
- })
-
- it('renders an empty bottom tree with its welcome cards (both workbenches always visible)', () => {
- const state = makeDefaultState()
- const html = renderToString((
- {}}
- renderTab={() => null}
- onBottomHeightCommit={() => {}}
- />
- ))
- // The top tree's explorer TAB and the empty bottom pane's welcome cards
- // both render (each option card carries its label).
- expect(html).toContain('Explorer')
- expect(html).toContain('Terminal')
- })
-})
diff --git a/tests/unit.spec.ts b/tests/unit.spec.ts
index f6ca3e5..e77be73 100644
--- a/tests/unit.spec.ts
+++ b/tests/unit.spec.ts
@@ -4,7 +4,7 @@ import { parseLogLines, parsePorcelainZ } from '../src/git.ts'
import { parseUnifiedDiff } from '../src/client/DiffView.tsx'
import {
activateTab, allLeaves, BOTTOM_DEFAULT, BOTTOM_MIN, closeTab, createSidebarStore, defaultWidthFor, insertLeafAt, makeDefaultState,
- moveTab, moveTabToEdge, openDiffTab, openTabInActivePane, patchTab, reconcileAgentTerminals, resizeSplit, resizeSplitIn, sanitizeState, setBottomHeight, splitPane, tabOpenIn, toggleBottomPanel, toggleExpanded, togglePanel,
+ migrateBottomTabs, moveTab, moveTabToEdge, openDiffTab, openTabInActivePane, patchTab, reconcileAgentTerminals, resizeSplit, resizeSplitIn, sanitizeState, setBottomHeight, splitPane, tabOpenIn, toggleBottomPanel, toggleExpanded, togglePanel,
type SidebarState, type SidebarTab, type SplitNode,
} from '../src/client/state.ts'
import { loadPrefs, type SidebarSettingsClient } from '../src/client/prefs.ts'
@@ -550,6 +550,66 @@ describe('sidebar state', () => {
}
})
+ // ── Narrow-viewport merge (bottom tabs thrown into the right sidebar) ──
+
+ it('migrateBottomTabs throws the bottom tree tabs into the right tree’s FIRST leaf', () => {
+ let s = state()
+ s = toggleBottomPanel(s)
+ const bottomPane = (s.bottomSplits as { id: string }).id
+ // Two bottom tabs in their own pane; the right pane holds explorer.
+ s = openTabInActivePane({ ...s, activePane: bottomPane }, { id: 'terminal:1', type: 'terminal', title: 'T1' })
+ s = openTabInActivePane(s, { id: 'terminal:2', type: 'terminal', title: 'T2' })
+ const migrated = migrateBottomTabs(s)
+ // All tabs now live in the right tree's first leaf, bottom tabs appended.
+ expect((migrated.splits as { tabs: SidebarTab[] }).tabs.map(t => t.id))
+ .toEqual([expect.stringMatching(/^tab:/), 'terminal:1', 'terminal:2'])
+ // The bottom tree is emptied (structure stays), the panel closes, and
+ // new tabs land in the right tree.
+ expect((migrated.bottomSplits as { tabs: SidebarTab[] }).tabs).toHaveLength(0)
+ expect(migrated.bottomOpen).toBe(false)
+ expect(migrated.activePane).toBe((migrated.splits as { id: string }).id)
+ // The migrated tabs are fully functional: closing one works through the
+ // right tree.
+ expect(tabOpenIn(migrated, 'terminal:1')).toBe(true)
+ expect(tabOpenIn(closeTab(migrated, migrated.activePane!, 'terminal:1'), 'terminal:1')).toBe(false)
+ })
+
+ it('migrateBottomTabs appends into the FIRST leaf when the right tree is a split', () => {
+ let s = state()
+ s = splitPane(s, 'row') // splits the active pane into two leaves
+ s = toggleBottomPanel(s)
+ const bottomPane = (s.bottomSplits as { id: string }).id
+ s = openTabInActivePane({ ...s, activePane: bottomPane }, { id: 'terminal:9', type: 'terminal', title: 'T9' })
+ const migrated = migrateBottomTabs(s)
+ // The first (leftmost) leaf carries the bottom tab; the second leaf
+ // keeps its own tabs untouched.
+ const leaves = allLeaves(migrated.splits)
+ expect(leaves[0]!.tabs.map(t => t.id)).toContain('terminal:9')
+ expect(allLeaves(migrated.bottomSplits).flatMap(l => l.tabs)).toHaveLength(0)
+ })
+
+ it('migrateBottomTabs is idempotent (same reference) once the bottom tree is empty and closed', () => {
+ const s = state()
+ expect(migrateBottomTabs(s)).toBe(s)
+ // With the panel open but no tabs, the migration only closes the panel.
+ const open = toggleBottomPanel(s)
+ const migrated = migrateBottomTabs(open)
+ expect(migrated).not.toBe(open)
+ expect(migrated.bottomOpen).toBe(false)
+ expect(migrateBottomTabs(migrated)).toBe(migrated)
+ })
+
+ it('migrateBottomTabs repoints an active pane that lives in the bottom tree', () => {
+ let s = state()
+ const bottomPane = (s.bottomSplits as { id: string }).id
+ s = { ...s, activePane: bottomPane } // empty bottom pane, panel closed
+ const migrated = migrateBottomTabs(s)
+ expect(migrated.activePane).toBe((migrated.splits as { id: string }).id)
+ // A tab opened after the migration lands in the VISIBLE right tree.
+ const landed = openTabInActivePane(migrated, { id: 'git', type: 'git' as const, title: 'Git' })
+ expect((landed.splits as { tabs: SidebarTab[] }).tabs.map(t => t.type)).toContain('git')
+ })
+
it('openTabInActivePane lands in the bottom tree when the active pane lives there', () => {
let s = state()
s = toggleBottomPanel(s)