Add copyable text

assets/js/app.js

@@ -1,6 +1,7 @@
 import './external_links';
 import './message_icons';
 import './forms';
+import './copyable_text';
 
 import '../sass/app.scss';
 

assets/js/copyable_text.js

@@ -0,0 +1,12 @@
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.copyable-text').forEach(el => {
+        const contentEl = el.querySelector('.content');
+        contentEl.addEventListener('click', () => {
+            window.getSelection().selectAllChildren(contentEl);
+        });
+        el.querySelector('.copy-button').addEventListener('click', () => {
+            window.getSelection().selectAllChildren(contentEl);
+            document.execCommand('copy');
+        });
+    });
+});

assets/sass/layout.scss

@@ -540,4 +540,36 @@ button, .button {
 			margin: 8px;
 		}
 	}
-}
+}
+
+.copyable-text {
+	display: flex;
+	flex-direction: row;
+	margin: 8px;
+
+	background-color: darken($backgroundColor, 2%);
+	border-radius: 5px;
+	overflow: hidden;
+
+	.title {
+		padding: 8px;
+	}
+
+	.content {
+		flex-grow: 1;
+		overflow: hidden;
+		white-space: nowrap;
+		padding: 8px;
+	}
+
+	.copy-button {
+		margin: 0;
+		padding: 0;
+		border-radius: 0;
+
+		.feather {
+			--icon-size: 20px;
+			margin: 8px;
+		}
+	}
+}