Add button to share room details link

output/js/constants.js

@@ -49,6 +49,8 @@ export const STAFF_ID_PASTE = "Copied staff ping to clipboard. Use it in the sel
 
 export const IDENTIFIER_PASTE = "Copied internal room identifier. Use it to identify a room, such as when contributing language labels."
 
+export const DETAILS_LINK_PASTE = "Copied link to Community details.";
+
 export const communityQRCodeURL = (communityID) => `qr-codes/${communityID}.png`
 
 export const COLUMN = {

output/main.js

@@ -17,7 +17,7 @@
 import {
 	dom, COLUMN, COLUMN_LITERAL, COMPARISON, ATTRIBUTES,
 	columnAscendingByDefault, columnIsSortable, COLUMN_TRANSFORMATION,
-	element, JOIN_URL_PASTE, communityQRCodeURL, STAFF_ID_PASTE, IDENTIFIER_PASTE
+	element, JOIN_URL_PASTE, communityQRCodeURL, STAFF_ID_PASTE, IDENTIFIER_PASTE, DETAILS_LINK_PASTE
 } from './js/constants.js';
 
 // Hidden communities for transparency.
@@ -283,6 +283,13 @@ function addQRModalHandlers() {
 		}
 	)
 
+	document.querySelector('#details-modal-copy-room-details-link')?.addEventListener(
+		'click',
+		function() {
+			copyToClipboard(location.href, DETAILS_LINK_PASTE);
+		}
+	)
+
 	for (const anchor of dom.qr_code_buttons()) {
 		// Disable QR code links
 		anchor.setAttribute("href", "#");

sites/+components/qr_modals.php

@@ -99,11 +99,20 @@
 					Copy mod ping
 				</button>
 				<button
-					id="details-modal-copy-room-id"
+				id="details-modal-copy-room-id"
+				class="themed-button"
+				data-hydrate-with="identifier:data-identifier"
+				title="Copy this room's identifier to uniquely identify this room to the sessioncommunities.online team"
+				>
+				Copy ID
+				</button>
+				<button
+					id="details-modal-copy-room-details-link"
 					class="themed-button"
-					data-hydrate-with="identifier:data-identifier"
+					title="Copy link to show details about this Community"
-					title="Copy this room's identifier to uniquely identify this room to the sessioncommunities.online team"
+				>
-				>Copy Community ID</button>
+					Share
+				</button>
 				<gap></gap>
 				<div id="details-modal-pane-selection" class="hidden">
 					<button