feat: Add UI button to copy direct message links

[SoleroTG]

This PR provides the frontend UI implementation for message-id deep links, completing the foundational work established in #12632 and the CSRF fix in #12959.

It adds a new action button to the MenuEnvelope component (the "More actions" menu on a message) to easily copy the generated link.

Key implementations:

• Wording: Implements the exact phrasing suggested by @ChristophWurst in Deep links for message IDs #2269: "Copy direct link for other user. This only works if they have received the same email."
• Clipboard API: Uses navigator.clipboard.writeText() for a seamless user experience in secure contexts.
• Visual Feedback: Added visual confirmation. Upon successful copy, a toast notification (showSuccess) is triggered, and the menu icon temporarily changes to a checkmark before the menu closes.
• Standardized Fallback: If the modern Clipboard API is unavailable (e.g., local development over HTTP without secure context) or permission is denied, it safely falls back to window.prompt. This directly mirrors the fallback behavior established in @nextcloud/vue's useCopy composable.

Resolves #2269

To Test:

1. Open the Mail app.
2. Click the three dots (...) on any message to open the actions menu.
3. Click "Copy direct link for other user..."
4. Verify the link is copied to your clipboard and test opening it in a new tab.

[coderabbitai]

📝 Walkthrough

Walkthrough

The MenuEnvelope component gains a "Copy direct link" entry in its "More actions" submenu. A new ContentCopyIcon is imported and registered. A reactive copied data field (initialized to false) drives conditional icon and label rendering on the new ActionButton. The onCopyMessageLink method trims the envelope messageId, constructs a deep-link URL, attempts to write it to the clipboard via navigator.clipboard.writeText, sets copied to true on success, or falls back to window.prompt on failure. After 2 seconds, copied is reset and localMoreActionsOpen is set to false.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: adding a UI button to copy direct message links in the MenuEnvelope component.
Description check	✅ Passed	The description is comprehensive and directly related to the changeset, providing context, implementation details, and testing instructions for the new copy link feature.
Linked Issues check	✅ Passed	The PR implements the core requirement from #2269 by adding UI functionality to copy permanent deep links to messages using message IDs, as requested in the feature.
Out of Scope Changes check	✅ Passed	All changes are focused on the MenuEnvelope component and directly support the objective of implementing a copy link button feature; no out-of-scope modifications detected.
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.}

---

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

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/components/MenuEnvelope.vue (1)

1-4: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Update SPDX header to the required repository format

This .vue file header does not match the mandated SPDX header template for touched JS/Vue files.

As per coding guidelines, "**/*.{php,js,ts,tsx,vue}: Every file must include an SPDX license header. ... Header format: /* SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors * SPDX-License-Identifier: AGPL-3.0-or-later */".

Source: Coding guidelines

🧹 Nitpick comments (1)

src/components/MenuEnvelope.vue (1)

667-670: ⚡ Quick win

De-duplicate/reset the copy-state timeout

Repeated clicks enqueue multiple timers, which can cause stale state flips and inconsistent menu-close timing.

Proposed refactor

 data() {
 	return {
+		copyResetTimer: null,
 		copied: false,
 	}
 },
 ...
 finally {
+	if (this.copyResetTimer) {
+		clearTimeout(this.copyResetTimer)
+	}
-	setTimeout(() => {
+	this.copyResetTimer = setTimeout(() => {
 		this.copied = false
 		this.localMoreActionsOpen = false
+		this.copyResetTimer = null
 	}, 2000)
 }

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 779cf0e3-cfcd-478f-938a-ca84d05cee6e

📥 Commits

Reviewing files that changed from the base of the PR and between 5b435b9 and ed6ac73.

📒 Files selected for processing (1)

• src/components/MenuEnvelope.vue

[nimishavijay]

Just had a chance to take a look at this, and it looks great! Design wise only 2 small changes:

• I would change the wording to

Copy direct link
Only for message recipients 

It is shorter and conveys the same meaning, IMO.

• We can also change the position to just below "Forward" as they are all ways of sharing the message with other people :)

[SoleroTG]

Just had a chance to take a look at this, and it looks great! Design wise only 2 small changes:

* [x]  I would change the wording to

Copy direct link
Only for message recipients 

It is shorter and conveys the same meaning, IMO.

* [ ]  We can also change the position to just below "Forward" as they are all ways of sharing the message with other people :)

Hi @nimishavijay,

sure, I like that and can change it right away.
Just to be sure, as I don't want to skip the right flow of approval at nextcloud:

Do you suggest to apply these changes and want to start a discussion about it or do you already give me the permission to change it? 🙂

[nimishavijay]

You can change it now :) I can't speak for the code but @ChristophWurst had pinged me for design in the issue and I am just posting the feedback here :)

[SoleroTG]

@nimishavijay, should be changed now

[github-actions]

Hello there,
Thank you so much for taking the time and effort to create a pull request to our Nextcloud project.

We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process.

Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6

Thank you for contributing to Nextcloud and we hope to hear from you soon!

(If you believe you should not receive this message, you can add yourself to the blocklist.)