refactor(web): branch toolbar and dialogs stop syncing through effects#25072

Problem

The branch toolbar re-measured its label strip in a layout effect after every render, reading getComputedStyle for every child each time, while still missing changes that happen without a toolbar render. Several dialogs also focused, scrolled or reset their state from effects or requestAnimationFrame.

Change

• BranchToolbar: the strip's ref callback owns measurement. It watches the strip, its control groups, hosted controls and labels for size changes, uses a MutationObserver for text and child changes, and listens for font loads. The label width animation runs right after the flushSync'd compact flip, not in a layout effect. Renders no longer trigger a measure.
• CommandPaletteContent: when one view replaces another, the new input takes focus from its ref callback if focus is on the body or inside the dialog. This replaces a rAF effect.
• PullRequestThreadDialog: the reference input is focused and selected through DialogPopup's initialFocus instead of a rAF effect.
• ProjectScriptEditor: each request mounts a fresh keyed form that starts from that request's values. A plain unmount effect in the form releases a pending save. This replaces the per-request layout effect and the render-time field reset.
• ProjectContentSearchDialog: the selected row scrolls itself into view from its ref callback instead of an effect that ran document.querySelector.

What this improves

• 8 effects removed, one plain unmount-cleanup effect kept. Lifetime cleanup (the form's pending save, the clipboard timer) stays in ordinary effects.
• The toolbar no longer forces layout on every render. It measures only when the strip, its groups, controls or labels resize, when text or children change, or when fonts load. Before, a label change inside a memoized child, such as the branch name, that didn't re-render the toolbar or resize the strip was never measured.
• No bug-fix claim. I did not write a regression test that fails on main for the missed-measure case, because it needs a full toolbar render harness.

Behavior changes

• Command palette: a replaced view's input no longer takes focus when focus has already moved outside the dialog. Before, it always took focus one frame after mounting.
• PR thread dialog: the input is focused and selected through the dialog's initial-focus hook, not one frame after opening.
• Project action editor: while the dialog animates closed, it keeps showing the last request's form. A new request always remounts the form, which also resets the icon picker.
• Content search: the scroll into view now also runs when a different row becomes selected because results changed, not only when the selected index changes.
• No logging changes.

Effects

• BranchToolbar.tsx: 4 -> 0
• CommandPaletteContent.tsx: 1 -> 0
• PullRequestThreadDialog.tsx: 1 -> 0
• projectScriptEditor.tsx: 1 -> 1 (the per-request layout effect becomes a plain unmount cleanup)
• search/ProjectContentSearchDialog.tsx: 1 -> 0

Verification

• vp test run src/components/PullRequestThreadDialog.test.ts src/components/BranchToolbar.logic.test.ts src/components/CommandPalette.logic.test.ts: passed (49 tests in this run, together with the next file).
• vp test run --project browser src/components/projectScriptEditor.browser.test.tsx: passed. This is the existing in-flight save and replacement test.
• vp run check:changed: format, lint, knip, graphql and typecheck passed. The test step hit a browser-session connect timeout (load average about 110). projectScriptEditor.browser.test.tsx and useCopyToClipboard.test.ts pass when run alone.

Model: Claude Opus 5.5, Claude Code harness.

🤖 Generated with Claude Code