[zaerl]

Why

Third and last part of #558. The terminal (#612) and the logs (#613) are in the tray along the bottom of the window; the mail a site's WordPress sent was still a section at the foot of each site's page. This moves it into the tray, as the prototype has it.

What changes

A third button in the footer, "Toggle Email". The tray holds one thing at a time: the terminal, the logs or the mail.

The mail in the tray. The open site's list, newest first, filling the tray, and under it where the mail server is listening. A row opens its mail in the dialog, as before. The Mail section is gone from the page. Each site keeps its own list, as each keeps its own terminal and logs.

"Clear emails" is in the tray's heading, beside the button that closes it, and cannot be pressed while the list is empty. That is the prototype's, and it takes one thing away: the list is empty until the dev server has first run, whatever the app holds from before, so mail kept from an earlier session can be cleared only once the server has been started. Before, the button could always be pressed.

The logs take nothing's place when the app brings them up. They gave way to the terminal alone, where someone may be typing; with the mail open someone may be about to open one. They come up by themselves only in a tray that is closed or already showing them, and the page says where a failure's lines are, as it does under the terminal. The terminal still takes the tray whatever is in it.

The count on the Logs button starts at the footer's top edge and is one line tall, so that a wide one is clear of the envelope beside it, and is drawn over the buttons.

Labels follow the prototype: the tray is "Email", and an empty list says "No mail yet. WordPress transactional email will appear here once the site sends any."

Not in this pull request:

• A sign that mail has arrived while the tray is closed or showing something else. On the page the list was always in view; now such a mail shows nowhere until the tray is opened. Left out on purpose, by the maintainer's decision.
• The dialog a mail opens in. Mail HTML rendering is unchanged and tracked separately.
• The user guide and the README, which still describe a Mail panel on the page: Retake all screenshots and update guide text #561.

How to test this

Platforms: any. The journeys drive this on macOS and Windows. From the repository root, after npm ci and npm run build:once:

npx playwright test --project=journeys mail.spec tray.spec site-header.spec

• mail.spec.js: the mail is in the Email tray, named and headed for it, and with the tray put away no row is on screen; a row opens the mail that was clicked; mail that arrives joins the list for its own site only; "Clear emails" is disabled with nothing to clear, empties the list and what the app keeps, and is disabled again.
• tray.spec.js: each of the three footer buttons puts its own in the tray in the others' place; with two sites the heading has one "Clear emails"; a build that fails with its output in the logs leaves an open Email tray where it is, and the page says where the lines are.
• site-header.spec.js: two journeys used the Mail section as the end of the page and now give the page its height with the tray.

I broke seven behaviours of the mail tray one at a time and each turned a journey red, and the details' two rules (always let go, never let go) at three window sizes. tests/unit/site-mail.test.cjs and tests/unit/tray.test.cjs hold the decisions.

Worth a look by hand (any platform, the current head; I have not done this, the journeys stand in for the server): on a site that is set up, press Start development server, then press the envelope in the footer. The tray says where SMTP is listening. Make WordPress send a mail, for example Lost your password? on the site's login page: the mail is in the list. Press its row: the dialog opens. Close it and press Clear emails: the list is empty and the button cannot be pressed.

What must not have happened: a site's mail in another site's tray; the list losing mail when the tray is closed, shows something else, or another site is opened; the logs coming up over an open mail list; anything on the page ending up under the tray.

What cannot be tested by hand here: I had no real server to send a mail through. The journeys say what the main process says when one is caught, on the channels it says it on.

Risks and limitations

• Review: 2 passes; 10 findings fixed here, 2 settled by the maintainer's decisions (below), 4 left as follow-ups. Details below.
• Mail that arrives unseen shows nowhere until the tray is opened. See "Not in this pull request".
• Mail kept from an earlier session cannot be cleared until the server has run once. See "What changes".
• Focus drops to the page when the app itself puts the terminal in place of the mail while the focus is in the mail's tray. The logs and the terminal already behave this way when one replaces the other.
• A row's hover is faint on the list's ground, the same weak surface the logs are on.
• A clear that fails says nothing, as before.
• toasts.spec.js:52 failed once in a full local run with "Cannot fast-forward to the past" and passes on its own; it is the third time I have seen it, it is not from this change, and it is flagged separately.

Related

Part of #558, and the last of its three. Follows #614. Mail HTML rendering is unchanged and tracked separately.

---

Design decisions and alternatives considered

• What the prototype lacks is kept and redrawn. Its tray has a title, "Clear emails" and a placeholder text: no list, no line for the mail server, no dialog. The app has all three and keeps them, in the tray.
• A slot in the tray's heading, filled by the open site while the mail is what the tray shows, for what is done to the whole of what the tray holds. The tray's heading is the window's, and the list is a site's.
• The dialog is left exactly as it is, old components and all, so that this change and the one that redraws how a mail is shown do not meet in the same file.
• The logs give way to everything, not only to the terminal. One rule for "the app asks for the logs" that does not have to know what each tray is for: they never take a tray from under someone.
• The count stays the design system's badge, one line tall by losing its vertical padding, and not a smaller drawing of my own.

Review outcome (required — see AGENTS.md)

Pass 1: 7 [fix here] · 5 [follow-up]. Pass 2 (on the fix-up): 3 [fix here] · 1 [follow-up]. 10 fixed here (7 and 3, one of pass 1's being a follow-up applied here), 2 settled by the maintainer's decisions, 4 left as follow-ups.

• Review: completed — a separate agent context, read-only; head b9b7daa / base 351d34b; lint and the two unit files run, the journeys read and not run; 7 [fix here], 5 [follow-up].
  • Fixed: the check that the mail is nowhere but the tray ran before the list had loaded and could not fail; the details journey guarded on a margin of my own and not on the app's boundary, and read it before the page was at its top; the count on the Logs button was drawn under the next button when that was pressed, and its comment was wrong; the step that leaves an open mail list where it is did not read that the page says where the lines are; one journey needed a page longer than the room above a tray at its first height; the check that the tray covers nothing read the last card and not what ends the page.
  • Applied here though marked follow-up: who a mail is from now gives way before its subject in a narrow window.
  • Decided by the maintainer: "Clear emails" stays disabled on an empty list, as the prototype has it (one [fix here], recorded above as what it takes away); no sign for mail that arrives unseen (one [follow-up], not wanted).
  • Follow-ups left: focus when the app swaps the tray from under it; the row's faint hover; a failed clear that says nothing.
• Review: completed — a second separate agent context, read-only; b9b7daa plus the fix-up as staged, before it could be committed (it is 09ab94d), base 351d34b; lint and the two unit files run, each fix-up traced, every journey that depends on the page's length listed; 3 [fix here], 1 [follow-up].
  • Fixed: a rule and its comment left from the heading the mail had on the page; a comment that said who a mail is from gives way first, which the rules did not do (they do now); a comment in the details journey that did not say what its loop does.
  • Follow-up left: a comment in the mail dialog's file still says the list is under "Mail". The dialog is not touched here.
  • Nothing found: the seven fix-ups, the journeys' absences, the other journeys against a shorter page, the screenshot script.
• Since review: b9b7daa → 09ab94d is the two passes' fixes; the second pass's three are not reviewed again, and are a deleted rule, one flex value and comments. Lint, npm test, npm run test:electron, all 113 journeys, the affected journeys at three smaller window heights and with a slowed status read, and the packaged smoke were run on the tree that became 09ab94d, the journey suite before the second pass's three fixes and the affected journeys after them.

Implementation notes

• New: src/renderer/site-mail.cjs (smtpNote, noMailNote, mailRow), src/renderer/components/mail-panel.jsx (MailPanel, MailTrayActions), tests/unit/site-mail.test.cjs.
• src/renderer/components/bottom-tray.jsx: SiteTrayActionsFill and its slot in the heading. src/renderer/tray.cjs: the third tray and trayAfterReveal's rule.
• A mail's row is a native button in a list item, where it was a div with a role and key handlers. Who a mail is from now gives way before its subject does in a narrow window.
• scripts/screenshots/shots.cjs: the mail's shot is taken of the tray. I ran that one shot to check the script and did not commit the image; Retake all screenshots and update guide text #561 retakes them all.
• The details journey reads both of its halves part of the way down the page, where a column that is held is not yet pushed by the end of the cards, and guards on the app's own boundary: the details fit until they are taller than the page, which is 24px less than nothing to spare under them.
• Local checks on macOS: npm run lint clean, npm test and npm run test:electron pass (1948 tests), npm run test:e2e 113 pass, npm run test:e2e:packaged 15 pass.

Screenshots or recording

Not attached: I have no way to upload images from the command line. The steps under "Worth a look by hand" show everything that changed.

🤖 Generated with Claude Code

[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: WordPress/contributor-toolkit/.coderabbit.yaml
• Review profile: CHILL
• Plan: Advanced
• Run ID: 9eae2c24-69c8-49a3-8fa5-6825e0f9e867

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

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

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.}