fix(web): preserve dialog state through close transitions

[tarik02]

What Changed

This supersedes #5169 and includes its Projects Search close-transition fix.

• Keep dialog payload and form state mounted while open changes to false.
• Clear retained state from onOpenChangeComplete(false), after Base UI finishes its ending styles.
• Keep the Projects Search mode in place during close, then reset to command mode on the next regular open.
• Move the expanded image viewer onto Base UI's dialog lifecycle so opening and closing use the same transition model.

Why

Several dialogs used payload presence as both their data and their open state. Closing cleared the payload or reset the form immediately, so the popup disappeared before Base UI could render its ending styles. Opening animated, but closing vanished in one frame.

The dialog's visibility and payload lifetime are now separate. Closing changes visibility first. Payload and form cleanup happen only after the close transition completes.

UI Changes

Projects Search

Before

projects-search-before.mp4

After

projects-search-after.mp4

Add provider

Before

add-provider-open-close-before.mp4

After

add-provider-open-close-after.mp4

Commit dialog

Before

commit-dialog-open-close-before.mp4

After

commit-dialog-open-close-after.mp4

Create pairing link

Before

create-pairing-link-open-close-before.mp4

After

create-pairing-link-open-close-after.mp4

Default branch confirmation

Before

default-branch-confirm-before.mp4

After

default-branch-confirm-open-close-after.mp4

Image preview

Before

image-preview-open-close-before.mp4

After

image-preview-open-close-after.mp4

Legacy project grouping

Before

legacy-project-grouping-open-close-before.mp4

After

legacy-project-grouping-open-close-after.mp4

Legacy project rename

Before

legacy-project-rename-open-close-before.mp4

After

legacy-project-rename-open-close-after.mp4

Publish repository

Before

publish-repository-open-close-before.mp4

After

publish-repository-open-close-after.mp4

Pull request dialog

Before

pull-request-dialog-open-close-before.mp4

After

pull-request-dialog-open-close-after.mp4

Right panel sheet

Before

right-panel-sheet-open-close-before.mp4

After

right-panel-sheet-open-close-after.mp4

Project settings

Before

sidebar-v2-project-settings-open-close-before.mp4

After

sidebar-v2-project-settings-open-close-after.mp4

SSH password prompt

Before

ssh-password-prompt-open-close-before.mp4

After

ssh-password-prompt-open-close-after.mp4

Tailscale setup

Before

tailscale-setup-open-close-before.mp4

After

tailscale-setup-open-close-after.mp4

WSL confirmation

Before

wsl-confirm-open-close-before.mp4

After

wsl-confirm-open-close-after.mp4

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

---

Note

Low Risk
UI-only lifecycle and animation fixes across dialogs; no auth, data, or API behavior changes beyond when local form state is cleared.

Overview
Dialogs and overlays were treating payload presence as open state, so closing immediately unmounted content or reset forms and close animations never ran.

This PR splits visibility from cleanup: open (or an open flag on retained state) drives the Base UI control, while payload and form reset happen in onOpenChangeComplete(false) after ending styles finish.

Chat & panels: expanded image preview moves to @base-ui/react/dialog with controlled open / onOpenChangeComplete; pull-request checkout and right-panel sheet stay mounted with explicit open instead of conditional render (keepMounted removed from sheet).

Command palette: reducer keeps the current mode when closing; opening still resets to command mode. Palette body stays mounted via dialogContentMounted until close completes.

Git & sidebar: commit, publish, default-branch confirm, project rename/grouping/settings dialogs use { open, …payload } state and defer wizard/form cleanup to onOpenChangeComplete.

Settings & desktop: add-provider wizard, pairing link, WSL/Tailscale confirm dialogs, and SSH password prompt follow the same pattern (SSH removes the dialog from the list only after transition).

Tests: CommandPalette.logic updated so SetOpen(false) preserves mode instead of forcing command mode.

^{Reviewed by Cursor Bugbot for commit 1f2f6a3. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Preserve dialog state through close transitions across web UI components

• Dialogs across the app now delay clearing their state until the close animation completes (onOpenChangeComplete), preventing content flicker and loss of in-progress input during transitions.
• Affected components include expanded image preview, pull request threads, commit dialogs, SSH password prompts, command palette, sidebar project actions, and settings dialogs.
• ExpandedImageDialog is rewritten as a proper @base-ui/react/dialog modal with explicit open/onOpenChange/onOpenChangeComplete props, replacing a custom div overlay.
• Command palette close now preserves the last active mode; reopening resets it to command. Toggling the same mode closes the palette without resetting the mode.
• The mobile right panel sheet is now always mounted while a thread is active and controlled via an open prop instead of conditional rendering.

^{Macroscope summarized 1f2f6a3.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 05165a9d-e8d6-4d01-8df0-8e5b8b4cae25

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 1c428ca96a

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Stop treating the closed preview sheet as visible

On narrow desktop layouts, this now keeps RightPanelSheet mounted after rightPanelOpen becomes false; because the sheet uses keepMounted and rightPanelContent still passes visible unconditionally to PreviewPanel, the hidden preview continues subscribing to preview actions and retaining its browser surface. Consequently, refresh/zoom/focus actions can target a closed panel and the preview remains active in the background after the exit animation. Retain it only through the close transition, then unmount it or mark the preview not visible.

AGENTS.md reference: AGENTS.md:L15-L17

Useful? React with 👍 / 👎.

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 1c428ca. Configure here.}

[macroscopeapp]

Approvability

Verdict: Needs human review

This PR modifies dialog lifecycle behavior across multiple components to preserve state during close animations. An unresolved review comment identifies a potential bug with the RightPanelSheet change where the preview panel may continue subscribing to actions after being closed, warranting human review.

^{You can customize Macroscope's approvability policy. Learn more.}