Add copy to clipboard action to user's handle (#82)

2 files changed, 29 insertions, 1 deletions

diff --git a/static/css/style.css b/static/css/style.css
index 5803e0a..9df9c59 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1050,3 +1050,19 @@ table.metadata td.name {
         display: none;
     }
 }
+
+/* Copy to clipboard action */
+
+.copy {
+    transition: 0.2s;
+}
+
+.copy:hover {
+    color: var(--color-text-main);
+    cursor: pointer;
+}
+
+.copied, .copied:hover {
+    color: var(--color-highlight);
+    transition: 0.2s;
+}
diff --git a/templates/identity/view.html b/templates/identity/view.html
index ff42db6..f664736 100644
--- a/templates/identity/view.html
+++ b/templates/identity/view.html
@@ -34,7 +34,19 @@
             {% endif %}
         {% endif %}
 
-        {{ identity.name_or_handle }} <small>@{{ identity.handle }}</small>
+        {{ identity.name_or_handle }}
+        <small>
+            @{{ identity.handle }}
+            <a title="Copy handle"
+               class="copy"
+               _="on click
+                    writeText('@{{ identity.handle }}') into the navigator's clipboard
+                    then add .copied
+                    wait 2s
+                    then remove .copied">
+                <i class="fa-solid fa-copy"></i>
+            </a>
+        </small>
     </h1>
 
     {% if identity.summary %}