Improve site clickability

output/css/common.css

@@ -1,5 +1,6 @@
 :root {
 	--primary-color:					hsl(0, 0%, 100%);
+	--primary-color-50:					hsla(0, 0%, 100%, 50%);
 	--secondary-color:					hsl(0, 0%, 0%);
 	--secondary-color-heading:			hsl(0, 0%, 17%);
 	--secondary-color-shaded:			hsl(0, 0%, 9%);
@@ -10,6 +11,7 @@
 
 #toggle-theme-switch:checked ~ #theming-root {
 	--primary-color:					hsl(0, 0%, 0%);
+	--primary-color-50:					hsla(0, 0%, 0%, 50%);
 	--secondary-color:					hsl(0, 0%, 100%);
 	--secondary-color-heading:			hsl(0, 0%, 83%);
 	--secondary-color-shaded:			hsl(0, 0%, 91%);

output/index.css

@@ -177,6 +177,11 @@ html.js .noscript, .hidden {
 	color: var(--primary-color);
 }
 
+.td_name > span > .tag.clickable:is(:hover, :focus) {
+	box-shadow: 0rem 0rem 0.2rem var(--primary-color);
+	opacity: 1;
+}
+
 gap {
 	flex-grow: 1000;
 }
@@ -357,18 +362,26 @@ div.search-actions {
 
 .room-row {
 	background-color: var(--row-color);
+	transition: opacity 0.1s cubic-bezier(.19,1,.22,1);
+}
+
+.td_name, .td_qr_code, .td_description, .td_language, .td_users, .td_server_icon {
+	cursor: pointer;
 }
 
 .room-row:nth-child(even) {
-	background-color: var(--secondary-color);
 	--row-color: var(--secondary-color);
 }
 
 .room-row:nth-child(odd)  {
-	background-color: var(--secondary-color-shaded);
 	--row-color: var(--secondary-color-shaded);
 }
 
+.room-row:hover {
+	outline: 0.1rem solid var(--primary-color-50);
+}
+
+
 /* Particular columns */
 
 .td_identifier {

output/js/util.js

@@ -186,7 +186,7 @@ export const dom = {
 	btn_search: () => document.querySelector("#btn-search"),
 	btn_random_search: () => document.querySelector("#btn-random-search"),
 	search_container: () => document.querySelector("#search-container"),
-	sample_searches: () => document.querySelectorAll(".sample-search")
+	tags: () => document.querySelectorAll("#tbl_communities .tag"),
 }
 
 export const JOIN_URL_PASTE = "Copied URL to clipboard. Paste into Session app to join";

output/main.js

@@ -279,9 +279,10 @@ function addQRModalHandlers() {
 	// Ways to open the QR Modal
 
 	for (const row of rows) {
-		const communityID = row.getAttribute(ATTRIBUTES.ROW.IDENTIFIER);
+		const communityID = row.getAttribute(ATTRIBUTES.ROW.IDENTIFIER) ?? unreachable("No community ID attribute");
 		for (const cell of ['.td_qr_code', '.td_description', '.td_language', '.td_users']) {
-			row.querySelector(cell).addEventListener(
+			const cellElement = row.querySelector(cell) ?? unreachable(`Could not find ${cell}`);
+			cellElement.addEventListener(
 				'click',
 				() => displayQRModal(communityID, cell == '.td_qr_code' ? 1 : 0)
 			);
@@ -598,6 +599,16 @@ function addSearchInteractions() {
 		newLocation.hash = hash;
 		shareOrCopyToClipboard(newLocation.href, "Share link copied to clipboard");
 	});
+
+	const tags = dom.tags();
+	for (const tag of tags) {
+		tag.classList.add('clickable');
+		tag.setAttribute('tabindex', "0");
+		tag.addEventListener('click', function(event) {
+			event.stopPropagation();
+			useSearchTerm("#" + this.innerText.replace(/ /g,"-"), true);
+		});
+	}
 }
 
 /**