copy payto addresses

assets/bootstrap.js

@@ -1,6 +1,7 @@
 import { startStimulusApp } from '@symfony/stimulus-bundle';
 import ArticleCommentsController from './controllers/article_comments_controller.js';
 import CommentReplyController from './controllers/comment_reply_controller.js';
+import CopyTextController from './controllers/copy_text_controller.js';
 
 const app = startStimulusApp();
 
@@ -15,3 +16,8 @@ try {
 } catch {
     /* already registered by the bundle */
 }
+try {
+    app.register('copy-text', CopyTextController);
+} catch {
+    /* already registered by the bundle */
+}

assets/controllers/copy_text_controller.js

@@ -0,0 +1,30 @@
+import { Controller } from '@hotwired/stimulus';
+
+/**
+ * Copies data-copy-text-text-value to the clipboard (e.g. full payment URI for wallets).
+ */
+export default class extends Controller {
+    static values = { text: String };
+
+    static targets = ['button'];
+
+    async copy() {
+        const t = this.textValue ?? '';
+        if (t === '') {
+            return;
+        }
+        try {
+            await navigator.clipboard.writeText(t);
+            const btn = this.hasButtonTarget ? this.buttonTarget : this.element.querySelector('button');
+            if (btn) {
+                const prev = btn.textContent;
+                btn.textContent = 'Copied';
+                window.setTimeout(() => {
+                    btn.textContent = prev;
+                }, 2000);
+            }
+        } catch (e) {
+            console.warn('Copy failed', e);
+        }
+    }
+}

assets/styles/app.css

@@ -614,13 +614,34 @@ footer a {
 
 .author-profile__meta-value,
 .author-profile__identity-link,
-.author-profile__payment-link {
+.author-profile__payment-addr {
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
+.author-profile__payment-value {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    min-width: 0;
+    max-width: 100%;
+}
+
+.author-profile__payment-addr {
+    flex: 1 1 auto;
+    color: inherit;
+    text-decoration: none;
+}
+
+.author-profile__copy-btn {
+    flex-shrink: 0;
+    font-size: 0.75rem;
+    padding: 0.2rem 0.5rem;
+    line-height: 1.2;
+}
+
 /* NIP-05: ellipsis long addresses; keep ✓ immediately after the (truncated) text, not at the column edge. */
 .author-profile__nip05-value {
     display: flex;

templates/partial/author_profile_header.html.twig

@@ -51,7 +51,20 @@
                     {% for row in profile_payment_links %}
                         <li class="author-profile__payment author-profile__meta-line">
                             <span class="author-profile__payment-type"{% if row.display_type_label|default('')|trim == '' %} aria-hidden="true"{% endif %}>{{ row.display_type_label|default('')|e }}</span>
-                            <a class="author-profile__payment-link author-profile__meta-value" href="{{ row.href|e('html_attr') }}" target="_blank" rel="nofollow noopener noreferrer">{{ row.label|e }}</a>
+                            <div
+                                class="author-profile__payment-value"
+                                data-controller="copy-text"
+                                data-copy-text-text-value="{{ row.href|e('html_attr') }}"
+                            >
+                                <span class="author-profile__payment-addr author-profile__meta-value" title="{{ row.href|e('html_attr') }}">{{ row.label|e }}</span>
+                                <button
+                                    type="button"
+                                    class="author-profile__copy-btn btn btn-secondary btn-sm"
+                                    data-copy-text-target="button"
+                                    data-action="click->copy-text#copy"
+                                    title="Copy full payment address / URI for your wallet"
+                                >Copy</button>
+                            </div>
                         </li>
                     {% endfor %}
                 </ul>