Remove identifier column & add identifier to modal

output/index.css

@@ -205,11 +205,6 @@ header {
 	font-size: 1em;
 }
 
-#toggle-show-room-ids:not(:checked)
-~ #tbl_communities :is(#th_identifier, .td_identifier) {
-	display: none;
-}
-
 #tbl_communities th {
 	background-color: var(--secondary-color-heading);
 }
@@ -412,15 +407,6 @@ footer nav a {
 	white-space: nowrap;
 }
 
-label[for=toggle-show-room-ids]::after {
-	content: " (Off)";
-}
-
-#toggle-show-room-ids:checked
-~ footer label[for=toggle-show-room-ids]::after {
-	content: " (On)";
-}
-
 /* --- QR code modals --- */
 #details-modal {
 	padding: 0;

output/js/constants.js

@@ -17,6 +17,7 @@ export const dom = {
 			users: parseFloat(row.querySelector('.td_users').textContent.trim()),
 			preview_link: row.querySelector('.td_preview a[href]').getAttribute('href'),
 			join_link: row.querySelector('.td_join_url a[href]').getAttribute('href'),
+			identifier: row.getAttribute(ATTRIBUTES.ROW.IDENTIFIER),
 			hostname: row.getAttribute(ATTRIBUTES.ROW.HOSTNAME),
 			public_key: row.getAttribute(ATTRIBUTES.ROW.PUBLIC_KEY),
 			staff: row.getAttribute(ATTRIBUTES.ROW.STAFF_DATA),
@@ -42,12 +43,14 @@ export const JOIN_URL_PASTE = "Copied URL to clipboard. Paste into Session app t
 
 export const STAFF_ID_PASTE = "Copied staff ping to clipboard. Use it in the selected Community to alert a random moderator.";
 
+export const IDENTIFIER_PASTE = "Copied internal room identifier. Use it to identify a room, such as when contributing language labels."
+
 export const communityQRCodeURL = (communityID) => `qr-codes/${communityID}.png`
 
 export const COLUMN = {
-	IDENTIFIER:   0,  LANGUAGE:     1,  NAME:         2,
-	DESCRIPTION:  3,  USERS:        4,  PREVIEW:      5,
-	QR_CODE:      6,  SERVER_ICON:  7,  JOIN_URL:     8
+	LANGUAGE:     0,  NAME:         1,
+	DESCRIPTION:  2,  USERS:        3,  PREVIEW:      4,
+	QR_CODE:      5,  SERVER_ICON:  6,  JOIN_URL:     7
 };
 
 // Reverse enum.

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
+	element, JOIN_URL_PASTE, communityQRCodeURL, STAFF_ID_PASTE, IDENTIFIER_PASTE
 } from './js/constants.js';
 
 // Hidden communities for transparency.
@@ -200,6 +200,14 @@ function addQRModalHandlers() {
 		}
 	)
 
+	document.querySelector('#details-modal-copy-room-id')?.addEventListener(
+		'click',
+		function () {
+			const identifier = this.getAttribute(ATTRIBUTES.ROW.IDENTIFIER);
+			copyToClipboard(identifier, IDENTIFIER_PASTE);
+		}
+	)
+
 	for (const anchor of dom.qr_code_buttons()) {
 		// Disable QR code links
 		anchor.setAttribute("href", "#");

sites/+components/qr_modals.php

@@ -87,6 +87,13 @@
 			>
 				Copy mod ping
 			</button>
+
+			<button
+				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 Community ID</button>
 		</p>
 	</div>
 </dialog>

sites/+components/tbl_communities.php

@@ -27,7 +27,6 @@
 	// the --expanded-static-column-width and --collapsed-static-column-width CSS variables.
 
 	$TABLE_COLUMNS = [
-		['id' => "identifier", 'name' => "Identifier", 'name_long' => "Room identifier"],
 		['id' => "language", 'name' => "L", 'name_long' => "Language"],
 		['id' => "name", 'name' => "Name"],
 		['id' => "description", 'name' => "About", 'name_long' => "Description"],
@@ -81,7 +80,6 @@
 		data-icon='<?=room_icon($room, '64x64')?>'
 		data-icon-safe='<?=room_icon_safety($room)?>'
 	>
-		<td class="td_identifier" itemprop="identifier"><?=$id?></td>
 		<td class="td_language" title="Language flag for '<?=$name?>'"><?=$language?></td>
 		<td class="td_name"
 			data-sort-by="<?=strtolower($name)?>"

sites/index.php

@@ -75,8 +75,6 @@
 			<h1 id="headline">Session Communities</h1>
 			<?php include "+components/qr_modals.php" ?>
 
-			<input type="checkbox" id="toggle-show-room-ids" class="hidden">
-
 			<?php include "+components/tbl_communities.php" ?>
 
 			<hr>
@@ -120,16 +118,6 @@
 					However, some interactive features are
 					only available with JS enabled.
 				</p>
-				<p>
-					<label
-						for="toggle-show-room-ids"
-						class="clickable anchorstyle"
-						tabindex="0"
-						title="Shows a column with community identifiers
-						for developers or language data contributors.">
-							Toggle room identifier display
-					</label>
-				</p>
 				<nav>
 					<a
 						href="https://lokilocker.com/Mods/Session-Groups/wiki/Session-Closed-Groups"