Automation UX improvements

[peterzimon]

ref https://linear.app/ghost/issue/NY-1318/small-automation-ui-delights

This PR collects a set of small UX improvements for the Automations editor canvas and step settings experience. The changes are intentionally scoped to the React automation editor UI in apps/posts and focus on making canvas navigation, step insertion, node actions, and email-step editing feel more direct and polished.

What changed

Canvas zoom controls

• Added compact custom zoom controls to the bottom-left of the React Flow canvas.
• The controls are horizontal: zoom out, current zoom percentage, zoom in.
• Clicking the zoom percentage opens a centered drop-up menu with preset zoom levels and Fit to view.
• Zoom actions use React Flow viewport helpers with animation for smoother transitions.
• Disabled the default React Flow double-click zoom because it conflicts with node interactions.

Add-step connectors and picker behavior

• Restyled the in-between-node add-step affordance so it matches the larger tail add button more closely.
• Kept connector lines visible and stable on hover, while showing the + button only when the pointer is over the connector hit area.
• Adjusted connector color and hidden handle sizing to remove visual gaps between nodes and connector lines.
• Changed the in-between-node step picker to open above the + button, with wider menu sizing and stronger shadow.
• Tweaked picker menu hover styling to a lighter gray.

New-step feedback

• Added a more visible pop/fade animation when a new automation step is created.
• Newly inserted steps are automatically selected so their settings sidebar opens immediately after insertion.

Wait-step settings control

• Replaced the wait-days input/select pair with a Shade InputGroup.
• The input group now shows the number and fixed days label on the left, with compact - and + steppers on the right.
• Stepper buttons clamp values between 1 and 30 days and respect invalid manual input.
• Kept manual input validation intact.

Node context menus

• Added right-click context menus to automation nodes using the new Shade ContextMenu components from main.
• The trigger node has Edit settings only.
• Action nodes have Edit settings and Delete.
• Email action nodes additionally have Edit email body and Preview, separated from Delete with a menu separator.
• Edit settings opens the existing right settings sidebar.
• Delete uses the existing action deletion path, preserving chain reconnection behavior.
• Edit email body opens the email editor modal directly without opening or flashing the sidebar.
• Preview opens the same email editor modal with the Preview tab active by default.

Email node shortcuts

• Double-clicking a send-email node now opens the email editor modal directly.
• Double-clicking trigger, wait, or tail nodes does nothing special.
• Canvas double-click zoom is disabled so this interaction is no longer hijacked by React Flow.

Sidebar typography

• Changed the automation settings sidebar heading from semibold to medium weight to better match the surrounding hierarchy.

Implementation notes for reviewers

• Most changes are contained in apps/posts/src/views/Automations/components/automation-canvas.tsx.
• Connector/add-step styling lives in add-step-edge.tsx and step-picker.tsx.
• The email modal now accepts initialMode?: 'edit' | 'preview' so callers can open directly into Preview without duplicating modal behavior.
• Context menu entries are built from a local menu-entry model so future node types can add node-specific actions without changing the node shell rendering.
• Menu click/pointer events are stopped at the context-menu content to avoid React Flow treating menu-item clicks as node clicks.
• Right-click opening and email-menu actions avoid selecting the node, which prevents the sidebar from flashing open behind the modal.

Files touched

• apps/posts/src/views/Automations/components/automation-canvas.tsx
• apps/posts/src/views/Automations/components/add-step-edge.tsx
• apps/posts/src/views/Automations/components/step-picker.tsx
• apps/posts/src/views/Automations/components/email-modal/email-content-modal.tsx
• apps/posts/test/unit/views/automations/automation-editor.test.tsx

Validation

• pnpm --filter @tryghost/posts test:unit -- test/unit/views/automations/automation-editor.test.tsx
• pnpm --filter @tryghost/posts lint
  • Passes with the existing unrelated warning in apps/posts/src/hooks/use-post-success-modal.ts about site?.icon in a useMemo dependency array.

Out of scope

• No API, model, database, or migration changes.
• No automation schema changes.
• No changes to public apps.
• No new shared Shade components beyond consuming the new ContextMenu component that was merged into main.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 519b1bce-be46-4011-a5f2-7c4db05c356c

📥 Commits

Reviewing files that changed from the base of the PR and between 806f51a and 55132ea.

📒 Files selected for processing (3)

• apps/posts/src/views/Automations/components/automation-canvas.tsx
• apps/posts/src/views/Automations/components/email-modal/email-content-modal.tsx
• apps/posts/src/views/Automations/components/types.ts

🚧 Files skipped from review as they are similar to previous changes (2)

• apps/posts/src/views/Automations/components/email-modal/email-content-modal.tsx
• apps/posts/src/views/Automations/components/automation-canvas.tsx

---

Walkthrough

This PR refactors the automations canvas editor: adds React Flow zoom controls (presets + fit), node context menus (edit/preview/delete), and NodeShell rendering; introduces EmailContentModal optional initialMode with preview-on-mount; replaces wait-step days input with an InputGroup (increment/decrement); separates edge/label hover zones for insertion buttons; decouples email modal state from selection; and extends unit tests to cover zoom, context menus, double-click email editing, wait-day controls, insertions, and hover behavior.

Possibly related PRs

• TryGhost/Ghost#27904: Further updates to automations step-insertion UI and AddStepEdge/automation-canvas overlaps.
• TryGhost/Ghost#28051: Related wait-step sidebar/input changes and corresponding test updates.
• TryGhost/Ghost#27973: Overlapping automation-canvas refactor affecting step selection and editor interactions.

Suggested labels

ok to merge for me

Suggested reviewers

• troyciesco
• EvanHahn

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Automation UX improvements' is directly related to the changeset, which focuses on multiple UI/UX enhancements to the automation editor.
Description check	✅ Passed	The description is comprehensive and clearly related to the changeset, detailing all major changes including canvas controls, connectors, animations, settings, context menus, and email shortcuts.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch NY-1318/automations-ux-improvements

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/posts/src/views/Automations/components/automation-canvas.tsx`:
- Around line 19-20: The node entrance animation timing is mismatched: CSS uses
the class duration-300 but the JS constant NODE_ENTER_ANIMATION_DURATION is 250
and the timeout that clears newStepId removes animation classes early; fix by
aligning these timings—either update NODE_ENTER_ANIMATION_DURATION to 300 or
change the CSS class from duration-300 to duration-250, and ensure the code that
clears newStepId uses NODE_ENTER_ANIMATION_DURATION (or the chosen 300ms) so the
new node's animation classes are removed only after the animation completes.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: c302dca3-db4f-46f9-9d7d-15a942bf2268

📥 Commits

Reviewing files that changed from the base of the PR and between c0e3821 and 0c8abfc.

📒 Files selected for processing (5)

• apps/posts/src/views/Automations/components/add-step-edge.tsx
• apps/posts/src/views/Automations/components/automation-canvas.tsx
• apps/posts/src/views/Automations/components/email-modal/email-content-modal.tsx
• apps/posts/src/views/Automations/components/step-picker.tsx
• apps/posts/test/unit/views/automations/automation-editor.test.tsx