From a01202247453dd14a2a8d9e9f9da374aa7bce6d7 Mon Sep 17 00:00:00 2001
From: gravel <qsj4di+aybgdjbxur7e8@sharklasers.com>
Date: Sat, 4 Mar 2023 13:48:47 +0100
Subject: [PATCH] Add toggle to show room identifier

---
 output/styles2.css | 31 +++++++++++++++++++++++++++----
 sites/index.php    |  8 +++++++-
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/output/styles2.css b/output/styles2.css
index 432dfee..bf4613d 100644
--- a/output/styles2.css
+++ b/output/styles2.css
@@ -2,10 +2,19 @@ html {
 	font-size: clamp(10px, 2vw, 18px);
 }
 
-html.js .noscript {
+html.js .noscript, .hidden {
 	display: none;
 }
 
+.clickable {
+	cursor: pointer;
+}
+
+.anchorstyle {
+	color: rgb(0, 102, 204);
+	text-decoration: underline;
+}
+
 /* Dead style */
 html:not(.js) .js-only {
 	display: none;
@@ -25,9 +34,14 @@ header {
 
 #tbl_communities { width:100%; }
 
-/* Hide the identifier column before removal. */
-#th_identifier { display: none; }
-.td_identifier { display: none; font-family: monospace; }
+#toggle-show-room-ids:not(:checked) 
+~ #tbl_communities :is(#th_identifier, .td_identifier) { 
+	display: none;
+}
+
+.td_identifier {
+	font-family: monospace;
+}
 
 .td_language:empty::after {
 	content: "\2753";
@@ -95,6 +109,15 @@ 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)"
+}
+
 /* <Colors> */
 :root {
 	/*--session-classic-dark-green:      #31f196;*/
diff --git a/sites/index.php b/sites/index.php
index a994ceb..8d51d44 100644
--- a/sites/index.php
+++ b/sites/index.php
@@ -31,6 +31,8 @@
 			<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>
@@ -62,6 +64,11 @@
 				However, some interactive features are
 				only available with JS enabled.
 			</p>
+			<p>
+				<label for="toggle-show-room-ids" class="clickable anchorstyle">
+					Toggle room identifier display
+				</label>
+			</p>
 			<nav>
 				<a
 					href="https://lokilocker.com/Mods/Session-Groups/wiki/Session-Closed-Groups"
@@ -89,7 +96,6 @@
 				>Source Code & Contact</a>
 			</nav>
 		</footer>
-
 		<div id="copy-snackbar">
 			Copied URL to clipboard. Paste into Session app to join
 		</div>