From 26d3afeafd30a9d2f26bab18e6c54b905627ca56 Mon Sep 17 00:00:00 2001
From: gravel <gravel@noreply.codeberg.org>
Date: Mon, 1 Jan 2024 20:49:16 +0000
Subject: [PATCH] Shrink HTML size II

---
 output/index.css                      | 55 +++++++++++++++++----------
 output/js/util.js                     |  2 +-
 output/main.js                        | 17 +++++----
 php/servers/servers-rooms.php         |  3 ++
 sites/+components/tbl-communities.php | 50 +++++++++++-------------
 5 files changed, 72 insertions(+), 55 deletions(-)

diff --git a/output/index.css b/output/index.css
index 8f90fe8..1cf0ffb 100644
--- a/output/index.css
+++ b/output/index.css
@@ -39,6 +39,11 @@
 	--dynamic-columns-width: var(--expanded-dynamic-columns-width);
 }
 
+html:not(.js) {
+	/** No more Join URL preview without JS */
+	--dynamic-columns-width: var(--collapsed-dynamic-columns-width);
+}
+
 :root {
 	--cell-padding-h: 0.5em;
 	--cell-padding-v: 0.5em;
@@ -128,7 +133,7 @@ html.js .noscript, .hidden {
 	color: black;
 }
 
-.tag-view-main {
+.td_name > span > .tag {
 	opacity: 0.75;
 }
 
@@ -152,7 +157,7 @@ html.js .noscript, .hidden {
 	background-color: whitesmoke;
 }
 
-.tag-view-main:not(.tag-highlighted) {
+.td_name > span > .tag:not(.tag-highlighted) {
 	background-color: transparent;
 	color: var(--primary-color);
 }
@@ -259,7 +264,7 @@ header {
 	white-space: nowrap;
 }
 
-.tbl_communities__th, .tbl_cell {
+.tbl_communities__th, #tbl_communities > tbody > tr > td {
 	padding: var(--cell-padding-v) var(--cell-padding-h);
 }
 
@@ -333,12 +338,12 @@ header {
 	text-overflow: ellipsis;
 }
 
-.td_name-inner {
+.td_name > a {
 	/* Block padding for inline element does not change flow, only clickbox */
 	padding-block: calc( var(--cell-padding-v) );
 }
 
-.room-row-stickied > .td_name > .td_name-inner {
+.room-row-stickied > .td_name > a {
 	font-weight: bold;
 }
 
@@ -394,7 +399,7 @@ html.js .td_description  {
 	text-align: center;
 }
 
-.protocol-indicator {
+.td_preview > a > span {
 	display: inline-block;
 	font-family: monospace;
 	border-radius: 4px;
@@ -404,19 +409,21 @@ html.js .td_description  {
 	text-shadow: 0 0 0.5em #0003;
 }
 
-a.protocol-indicator__parent[href^="http:"] > .protocol-indicator {
+/** protocol-indicator__parent > .protocol-indicator **/
+
+.td_preview > a[href^="http:"] > span {
 	background-color: var(--color-http);
 }
 
-a.protocol-indicator__parent[href^="https:"] > .protocol-indicator {
+.td_preview > a[href^="https:"] > span {
 	background-color: var(--color-https);
 }
 
-a.protocol-indicator__parent[href^="http:"] > .protocol-indicator::after {
+.td_preview > a[href^="http:"] > span::after {
 	content: "HTTP";
 }
 
-a.protocol-indicator__parent[href^="https:"] > .protocol-indicator::after {
+.td_preview > a[href^="https:"] > span::after {
 	content: "HTTPS";
 }
 
@@ -424,7 +431,7 @@ a.protocol-indicator__parent[href^="https:"] > .protocol-indicator::after {
 	padding: var(--cell-padding-small) !important;
 }
 
-.qr-code-icon {
+/*.qr-code-icon*/ .td_qr_code > a > div {
 	width: 36px;
 	height: 41px;
 	background-image: url('qrcode-solid.svg')
@@ -462,7 +469,7 @@ a.protocol-indicator__parent[href^="https:"] > .protocol-indicator::after {
 	font-size: .8em;
 }
 
-.join_url {
+/*.join_url*/ .td_join_url > div > span {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	max-width: 20vw;
@@ -471,7 +478,15 @@ a.protocol-indicator__parent[href^="https:"] > .protocol-indicator::after {
 	margin-right: 1em;
 }
 
-.join_url_container {
+.td_join_url > div > span:empty {
+	margin-right: 0;
+}
+
+html.js .td_join_url > div > span:empty::after {
+	content: "https://sogs.example.com/room?pu";
+}
+
+/*.join_url_container*/ .td_join_url > div {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
@@ -707,42 +722,42 @@ aside > details[open] > summary:after{
 }
 
 /* Responsive properties */
-.tag-view-main:nth-of-type(5) ~ .tag {
+.td_name > span > .tag:nth-of-type(5) ~ .tag {
 	display: none;
 }
 
 @media (max-width: 1600px) {
-	.tag-view-main:nth-of-type(4) ~ .tag {
+	.td_name > span > .tag:nth-of-type(4) ~ .tag {
 		display: none;
 	}
 }
 
 @media (max-width: 1500px) {
-	.tag-view-main:nth-of-type(3) ~ .tag {
+	.td_name > span > .tag:nth-of-type(3) ~ .tag {
 		display: none;
 	}
 }
 
 @media (max-width: 1400px) {
-	.tag-view-main:nth-of-type(2) ~ .tag {
+	.td_name > span > .tag:nth-of-type(2) ~ .tag {
 		display: none;
 	}
 }
 
 @media (max-width: 1200px) {
-	.tag-view-main:nth-of-type(1) ~ .tag {
+	.td_name > span > .tag:nth-of-type(1) ~ .tag {
 		display: none;
 	}
 }
 
-.tag-view-main:not(.tag-showcased) {
+.td_name > span > .tag:not(.tag-showcased) {
 	display: none;
 }
 
 @media (max-width: 1050px) {
 	/* Only current width breakpoint; */
 	/* Would follow w4 and precede w6. */
-	.show-from-w5 {
+	/*.show-from-w5*/ .td_join_url > div > span {
 		display: none;
 	}
 
diff --git a/output/js/util.js b/output/js/util.js
index 29847db..f8b4de2 100644
--- a/output/js/util.js
+++ b/output/js/util.js
@@ -171,7 +171,7 @@ export const dom = {
 	details_modal_room_icon: () => document.getElementById('details-modal-community-icon'),
 	servers_hidden: () => document.getElementById("servers_hidden"),
 	snackbar: () => document.getElementById("copy-snackbar"),
-	qr_code_buttons: () => document.querySelectorAll('.qr-code-button'),
+	qr_code_buttons: () => document.querySelectorAll('.td_qr_code > a'),
 	/** @return {HTMLInputElement | null} */
 	btn_toggle_search: () => document.querySelector('#btn-toggle-search'),
 	/** @return {HTMLInputElement | null} */
diff --git a/output/main.js b/output/main.js
index ff5c914..bf009ee 100644
--- a/output/main.js
+++ b/output/main.js
@@ -158,7 +158,7 @@ async function onLoad() {
 	}
 	hideBadCommunities();
 	initializeSearch();
-	createJoinLinkButtons();
+	createJoinLinkUI();
 	markSortableColumns();
 	addQRModalHandlers();
 	preloadImages();
@@ -186,12 +186,11 @@ async function onLoad() {
  * @param {string} param0.text Tag name
  * @param {"user"|"reserved"} param0.type Tag classification
  * @param {string} param0.description Tag details
- * @param {boolean} [inMainView] Whether to apply styles for tags in outside view.
  * @returns HTMLElement
  */
-const tagBody = ({text, type, description = ""}, inMainView = false) => element.span({
+const tagBody = ({text, type, description = ""}) => element.span({
 	textContent: text.slice(0, 16),
-	className: `tag tag-view-${inMainView ? 'main' : 'secondary'} tag-${type} badge`,
+	className: `tag tag-${type} badge`,
 	title: description || `Tag: ${text}`
 });
 
@@ -408,12 +407,16 @@ function preloadImages() {
 }
 
 /**
- * Places join link buttons in the Community rows.
+ * Places join link buttons and preview in the Community rows.
  */
-function createJoinLinkButtons() {
+function createJoinLinkUI() {
 	communityFullRowCache.forEach(({row, identifier}) => {
 		// Data attributes are more idiomatic and harder to change by accident in the DOM.
-		const container = row.querySelector('.join_url_container') ?? unreachable();
+		const container = row.querySelector('.td_join_url > div') ?? unreachable("Join URL cell empty");
+		const joinURLPreview = container.querySelector('span') ?? unreachable("Join URL preview missing");
+		// Do not wait on RoomInfo for layout rendering
+		joinURLPreview.textContent =
+			container.querySelector('a')?.getAttribute('href')?.slice(0, 29) + "...";
 		container.append(
 			transformJoinURL()
 		); // add interactive content
diff --git a/php/servers/servers-rooms.php b/php/servers/servers-rooms.php
index 788ef59..f36ceef 100644
--- a/php/servers/servers-rooms.php
+++ b/php/servers/servers-rooms.php
@@ -705,6 +705,9 @@
 			return [...$this->get_derived_tags(), ...$this->get_user_tags()];
 		}
 
+		/**
+		 * @return CommunityTag[] Array of tags.
+		 */
 		function get_showcased_room_tags(): array {
 			$tags = array_values(array_filter(
 				$this->get_room_tags(),
diff --git a/sites/+components/tbl-communities.php b/sites/+components/tbl-communities.php
index e07cf12..f49bbbe 100644
--- a/sites/+components/tbl-communities.php
+++ b/sites/+components/tbl-communities.php
@@ -66,7 +66,8 @@
 		$id = html_sanitize($room->get_room_identifier());
 		$language = html_sanitize($room->get_language_flag());
 		$name = html_sanitize($room->name);
-		$name_trunc = truncate($name, 16);
+		// $name_trunc = truncate($name, 16);
+		$name_trunc = "Community";
 		$desc = html_sanitize($room->description);
 		$users = html_sanitize($room->active_users);
 		$users_cutoff = html_sanitize($room->format_user_cutoff_period());
@@ -96,13 +97,12 @@
 		data-id="<?=$id?>"
 		data-icon='<?=room_icon($room, '64x64')?>:<?=$room->icon_safety()?>'
 	>
-		<td class="td_language tbl_cell" title="Language flag for '<?=$name_trunc?>'"><?=$language?></td>
-		<td class="td_name tbl_cell">
+		<td class="td_language" title="Language flag for '<?=$name_trunc?>'"><?=$language?></td>
+		<td class="td_name">
 			<a
 				href="<?=$preview_link?>"
-				class="td_name-inner"
 				target="_blank"
-				title="Click here to preview '<?=$name_trunc?>'"
+				title="Click here to preview <?=$name_trunc?>"
 				rel="noopener noreferrer external nofollow"
 				itemprop="name"
 			><?=
@@ -111,7 +111,7 @@
 			<span><?php /* class="tags-container" */ ?>
 <?php foreach ($room->get_showcased_room_tags() as $tag): ?>
 				<span
-					class="tag tag-view-main <?=$tag->get_tag_classname()?> badge"
+					class="tag <?=$tag->get_tag_classname()?> badge"
 					title="<?=$tag->get_description_sanitized()?>"
 				><?=
 					truncate($tag->get_text_sanitized(), 16)
@@ -119,39 +119,36 @@
 <?php endforeach; ?>
 			</span>
 		</td>
-		<!--noindex--><td
-			class="td_description tbl_cell noindex robots-noindex robots-nocontent"
-			title="Description for '<?=$name_trunc?>'"
+		<td
+			class="td_description"
+			title="Description"
 			itemprop="description"
-		><?=$desc?></td><!--/noindex-->
+		><?=$desc?></td>
 		<td
-			class="td_users tbl_cell"
-			title="'<?=$name_trunc?>' has had <?=$users?> active users in the last <?=$users_cutoff?>."
+			class="td_users"
+			title="<?=$users?> active users in the last <?=$users_cutoff?>."
 		><?=$users?></td>
-		<td class="td_preview tbl_cell">
+		<td class="td_preview">
 			<a
 				href="<?=$preview_link?>"
-				class="protocol-indicator__parent"
-				title="Click here to preview '<?=$name_trunc?>'"
+				title="Preview <?=$name_trunc?>"
 				target="_blank"
 				rel="noopener noreferrer external nofollow"
 			>
-				<span class="protocol-indicator"></span>
+				<span></span>
 			</a>
 		</td>
-		<td class="td_qr_code tbl_cell">
+		<td class="td_qr_code">
 			<a
-				class="qr-code-button"
 				href="<?=room_qr_code($room)?>"
 				target="_blank"
 			>
 				<div
-					class="qr-code-icon"
-					title="Click here to view details for '<?=$name_trunc?>'"
+					title="Click here to view details for <?=$name_trunc?>"
 				></div>
 			</a>
 		</td>
-		<td class="td_server_icon tbl_cell"
+		<td class="td_server_icon"
 			title="Host: <?=$hostname?>"
 		>
 <?php if (empty($server_icon)): ?>
@@ -162,16 +159,15 @@
 			<div class="td_server_icon-circle" style="background-image: url('<?=$server_icon?>')"></div>
 <?php endif; ?>
 		</td>
-		<td class="td_join_url tbl_cell">
-			<div class="join_url_container">
-				<span class="join_url show-from-w5"
-					><?=truncate($join_link, 32)?></span>
+		<td class="td_join_url">
+			<div>
+				<span></span><?php /* Join URL preview */ ?>
 				<a
 					class="noscript"
 					href="<?=$join_link?>"
-					title="Right click and copy this link to join '<?=$name_trunc?>'."
+					title="Right click -> Copy link"
 					rel="external nofollow"
-				>Copy this<span class="hidden">link to join '<?=$name_trunc?>'.</span></a>
+				>Copy this</a>
 			</div>
 		</td>
 	</tr>