[MT-23017] Match attachment disclosure behavior to Mailtrap

[kyrylo-yevdokymov]

What & why

Implements MT-23017, a sub-task of MT-22849.

Attachments now use the Mailtrap-style disclosure list with readable filenames/sizes and full-row download links. The interaction lifecycle closes on outside click, focus leaving, or Escape; Escape restores trigger focus and is consumed before the message view's global navigation handler.

Impact

Attachment downloads are clearer and the disclosure works predictably with mouse and keyboard navigation.

Screenshots

Before	After

Verification

• npm test — 62 tests passed
• focused attachment/message tests — 13 passed
• npm run lint — 0 errors; 4 existing warnings
• npm run build — passed
• git diff --check main...fix/mt-23017-attachments — passed

Summary by CodeRabbit

• New Features

  • Added a compact attachments dropdown to message headers.
  • Attachment entries now show file names and formatted sizes with direct download links.
  • The dropdown closes when clicking outside, pressing Escape, or moving focus away.

• Accessibility

  • Improved keyboard navigation and focus restoration when closing the attachments menu.

• Tests

  • Added coverage for keyboard interaction, focus behavior, dropdown state, and message-view visibility.

[coderabbitai]

📝 Walkthrough

Walkthrough

Attachments are now rendered as a dropdown in the message header. The component handles Escape, blur, outside clicks, and focus restoration, with new fixture and integration tests covering these interactions.

Changes

Attachments dropdown

Layer / File(s)	Summary
Dropdown behavior frontend/src/components/message/Attachments.tsx	Replaces the static attachment panel with a toggleable menu containing file names, sizes, and download links, plus keyboard and focus handling.
Header wiring and view cleanup frontend/src/components/message/MessageHeader.tsx, frontend/src/pages/MessageView.tsx	Renders attachments from MessageHeader and removes the previous MessageView attachment rendering.
Interaction fixtures and tests frontend/src/test/fixtures.ts, frontend/src/components/message/Attachments.test.tsx, frontend/src/pages/MessageView.test.tsx	Adds attachment fixture data and verifies Escape dismissal, focus restoration, focus departure, and retained message-view visibility.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant MessageHeader
  participant Attachments
  User->>MessageHeader: Opens the attachment control
  MessageHeader->>Attachments: Displays the attachment menu
  User->>Attachments: Presses Escape
  Attachments->>Attachments: Closes the menu
  Attachments->>User: Restores focus to the trigger

Loading

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
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.
Title check	✅ Passed	The title clearly summarizes the main change: attachment disclosure behavior matching Mailtrap.
Description check	✅ Passed	The description covers motivation, changes, testing, and before/after screenshots, though the headings differ from the template.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

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

[kyrylo-yevdokymov]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[roman-adamchik]

lgtm. could've been used some base-ui component for popup.