Port to react-resizable-panels 4.12.2

[jozef2svrcek]

Supersedes #241, which could not be merged as-is: v4 renames the public API, so AnalysisPage and GamesPage both failed to compile.

The API move

v2	v4
PanelGroup direction=	Group orientation=
PanelResizeHandle	Separator
autoSaveId	useDefaultLayout({ id, storage }) → defaultLayout + onLayoutChanged
onLayout(number[])	onLayoutChange(Layout), keyed by panel id
Panel order=	gone — ids alone identify conditional panels

Sizes changed meaning: a number is now pixels and a string is a percentage, so every size prop becomes a string.

What the port cost, beyond renames

Three defects, each found only by testing in the real app rather than a browser harness:

1. Dividers that highlighted but would not drag. The neighbour-only rule constrains panels a divider does not touch, and it did so on pointer-down — changing a constraint mid-drag aborts that drag. Hence "click it first, then click and drag works". Constraints are now applied on hover, before the pointer goes down. It also locked min == max; a spill can only ever shrink a far panel, so a floor is enough, and locking the last panel made v4 refuse to resize at all.

2. The Analysis move text could not be resized. Its "board" panel was really two things — a board area that absorbed every width change and a move list pinned to a fixed pixel width. The move text is now a panel in its own right: rail | board | move text | tabs. GameBoard keeps all state and portals the move list into a host the view owns, so the PGNs viewer keeps its inline sidebar unchanged.

3. PGNs and Prep had no panels at all, and PGNs used a different collapse idiom. Both are panelled now, with the « header button and » strip used elsewhere. PGNs needed two special cases: its panels stay mounted while collapsed (the browser would forget its directory; the game list reports the file's game count), and because that view is always mounted and merely hidden, its group measures zero at mount and needs an explicit starting layout — otherwise every defaultSize is ignored and it comes up at an equal split. The same trap applied to the Games group via panelIds, now dropped.

Verification

Divider rule re-measured under v4 on every multi-panel group, each divider in both directions — the pair trades, the third panel reports 0, and a drag that would overrun a neighbour's minimum stops there:

Analysis   rail|board  →   rail +121   board −121   moves 0      side 0
           board|moves →   rail 0      board +179   moves −179   side 0
           moves|intel ←   rail 0      board 0      moves −179   side +179
Games      filters|board → filters +91 left −91                  right 0
           board|right ←   filters 0   left −549    right +549
Prep       tournaments|prep →  tournaments +277     prep −277

With the floors disabled at runtime, the same Games drag spills 254px out of the far right panel — so the rule is doing real work.

PGNs: starts 16/84, collapses to a 32px strip with its separator gone, expands back; the file browser is not remounted across a collapse (verified by tagging a node and finding it again).

Also exercised end-to-end in the packaged app across drafts 0.15.9–0.15.12.

Known rough edges

• Expanding a collapsed rail restores it to its minimum width, not the width it had before collapsing.
• The PGNs games panel appears only for a multi-game file and was not exercised at runtime; its code path mirrors the files panel.
• v4 persists layouts in a new format, so saved panel sizes reset once. The old react-resizable-panels:* keys are left as dead data.

🤖 Generated with Claude Code

https://claude.ai/code/session_01Hx8hR7hu2hrMGhZr3HxRko