Repository navigation
SidebarSplitView: native content-list column + fix divider-drag tearing - #1
Open
sethwebster wants to merge 2 commits into
Open
sethwebster wants to merge 2 commits into
sethwebster wants to merge 2 commits into
Conversation
Collaborator
Author
|
CI note: the failing check, Source and package gates (ubuntu-latest), is pre-existing and not caused by this PR.
The Linux test failures will be fixed in a separate PR. |
Collaborator
Author
…earing - Add optional `list` pane (AppKit contentList item) between sidebar and content, with listWidth/listMinWidth and list metrics on onResize. Replaces nesting a second SidebarSplitView, whose frame lags a React commit behind the outer split and tears on every divider drag. - Seed divider positions from preferred widths only on first layout or when those props change; layout no longer snaps a dragged divider back. - Publish one resize event per native layout pass instead of transient mid-layout widths; drop the proportional adjustSubviews call. - Paint list/content panes opaque (windowBackgroundColor) and draw the divider with separatorColor, so a one-commit content lag and the divider no longer show the window's white background (bright stripe in dark mode).
sethwebster
force-pushed
the
seth/split-view-content-list
branch
from
October 9, 2026 19:21
ae8124d to
7298bba
Compare
- Claim hit testing while a divider is tracked so panes sliding under a still cursor don't flicker hover states (and start hover animations) every frame of the drag. - Pin the content pane's React content to the window edge while a divider drags (bounds offset, re-applied after React commits) so right-aligned content no longer shakes while React layout catches up; window resizes keep it pinned left. - Clip the content pane's React wrapper.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Dragging a
SidebarSplitViewdivider janks badly when an app needs three panes (mailboxes | messages | message). The only option today is nesting a secondSidebarSplitViewincontent, and that tears on every drag:paneMetricsafteronSplitViewDidResizeround-trips through React. A nested split only learns its own frame after the outer split's round trip, then starts its own, so its panes lag twice. Result: gaps of window material between panes and a list pane that intermittently balloons to full width.layoutSplitView→applyDividerPositionForBounds) re-applies the preferred width, so a user-dragged width is lost on the next layout (e.g. window resize).adjustSubviewsscales panes proportionally mid-layout and postsNSSplitViewDidResizeSubviewsNotification, publishing sizes that are immediately corrected.Changes
listpane (optional): AppKit'scontentListsplit item between sidebar and content, withlistWidth/listMinWidth.onResizegainslistWidth,listHeight,listX(zero without a list). The list mounts as child index 2, so existing two-pane mounts (0 sidebar, 1 content) are unchanged.sidebarWidth,listWidth, list presence orsidebarCollapsedchange.adjustSubviewscall is removed.windowBackgroundColor(resolved per appearance viaupdateLayer), and the divider paintsseparatorColorover it. The sidebar container stays clear so its material shows.docs/ui.mdcovers the list pane and divider behavior.Verification
bun install --frozen-lockfile,bun run typecheck,bun run test(Node 24.21): 724 passed, 1 skipped. New test covers list props, mount order and list metrics.list): 0 of 476 frames showed a seam between list and content. The list holds its width and the divider stays dark.Not addressed
paneMetrics, which is a larger change.RNSidebarSplitViewStartupView) still draws two panes; with alist, the middle column appears once React mounts.listrenders in the existing non-native fallback row only.