✨(print) add "Print" button in messages context menu

[sylvinus]

Summary by CodeRabbit

• New Features
  • Messages can now be printed via a new Print action in message threads.
  • Print output includes message headers and body formatted for printing and opens a print dialog automatically.
  • Print functionality is localized with new translations added for English, French and Dutch.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds "Print" translations to en-US, fr-FR, and nl-NL and implements a new printing flow: a usePrint hook that formats message metadata and body into a printable HTML document, plus a UI action that invokes print from thread message actions.

Changes

Cohort / File(s)	Summary
Localization Entries src/frontend/public/locales/common/en-US.json, src/frontend/public/locales/common/fr-FR.json, src/frontend/public/locales/common/nl-NL.json	Added the Print translation key: English "Print", French "Imprimer", Dutch "Afdrukken".
Thread Message Print Action src/frontend/src/features/layouts/components/thread-view/components/thread-message/thread-message-actions.tsx	Imported and wired usePrint hook; added a "Print" dropdown action with icon that calls print(message).
Print Hook Implementation src/frontend/src/features/message/use-print.tsx	New default-exported usePrint hook that: reads message HTML from the message iframe, escapes content, formats headers (From, To, Cc, Bcc, Date, Subject), builds a printable HTML document, opens a window, writes and prints the document, and closes the window.

Sequence Diagram

sequenceDiagram
    actor User
    participant ThreadMessageActions as Thread Message Actions
    participant UsePrint as usePrint Hook
    participant DOM as Document DOM
    participant PrintWindow as Print Window
    participant Browser as Browser Print

    User->>ThreadMessageActions: Click "Print" action
    ThreadMessageActions->>UsePrint: print(message)
    UsePrint->>DOM: Query iframe `#thread-message-{id} .thread-message__body`
    DOM-->>UsePrint: Return iframe / innerHTML
    UsePrint->>UsePrint: Build header (From, To, Cc, Bcc, Date, Subject) and sanitize HTML
    UsePrint->>PrintWindow: window.open()
    UsePrint->>PrintWindow: write HTML document (styles + content) and close()
    PrintWindow->>Browser: onload -> window.print()
    Browser->>PrintWindow: Print completed
    PrintWindow->>UsePrint: Window closed

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I found a new key to show,
A tiny "Print" to make things go,
Headers neat and body bright,
Three tongues sing it just right,
Hop—now your messages take flight! 🥕📄

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding a Print button to the messages context menu, which is reflected in the code additions across locale files and the thread-message-actions component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch print_button

---

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

🤖 Fix all issues with AI agents

In `@src/frontend/src/features/message/use-print.tsx`:
- Around line 34-36: The headerRows construction currently interpolates
unescaped h.value (and message.subject is interpolated into the <title>) which
can lead to XSS; add an HTML-escape utility (e.g., escapeHtml) and use it when
rendering header values in the map for headerRows (replace h.value with
escapeHtml(h.value ?? '')) and when inserting message.subject into the title
(use escapeHtml(message.subject ?? '')). Also ensure formatContact continues to
be safe or apply escapeHtml to its output as well so all user-controlled strings
are escaped before being placed into the template.

🧹 Nitpick comments (3)

src/frontend/src/features/message/use-print.tsx (3)

61-62: Silent failure when popup is blocked.

If the browser blocks the popup, window.open('') returns null and the function silently returns. Consider providing user feedback (e.g., a toast notification) so users know why printing didn't work.

---

66-67: Print window may not close on all browsers/user actions.

The afterprint event listener closes the window, but this event may not fire if the user cancels the print dialog in some browsers. Additionally, relying on onload to trigger print() is generally reliable, but the ordering with addEventListener for afterprint could be cleaner.

Consider a small timeout fallback or accept the current behavior as acceptable for this use case.

---

14-17: DOM coupling via hardcoded selector.

The hook relies on a specific DOM structure (#thread-message-${message.id} .thread-message__body) to find the iframe. This creates tight coupling between this hook and the thread-message component's internal structure. If the class name or structure changes, this will silently fail (returning empty body).

Consider documenting this dependency or passing the body content as a parameter to make the contract explicit.