Style and preload server icons

output/index.css

@@ -462,6 +462,19 @@ label[for=toggle-show-room-ids]::after {
 	justify-content: center;
 }
 
+#details-modal-community-icon[src=""] {
+	display: none;
+}
+
+#details-modal-community-icon {
+	position: relative;
+	top: 0.15em;
+	width: 1em;
+	height: 1em;
+	margin-right: 0.1em;
+	border-radius: 100%;
+}
+
 #details-modal-start #details-modal-description {
 	max-height: 50vh;
 	overflow: auto;

output/js/constants.js

@@ -20,7 +20,8 @@ export const dom = {
 			hostname: row.getAttribute(ATTRIBUTES.ROW.HOSTNAME),
 			public_key: row.getAttribute(ATTRIBUTES.ROW.PUBLIC_KEY),
 			staff: row.getAttribute(ATTRIBUTES.ROW.STAFF_DATA),
-			tags: row.getAttribute(ATTRIBUTES.ROW.TAGS)
+			tags: row.getAttribute(ATTRIBUTES.ROW.TAGS),
+			icon: row.getAttribute(ATTRIBUTES.ROW.ROOM_ICON)
 		};
 	},
 	meta_timestamp: () => document.querySelector('meta[name=timestamp]'),
@@ -62,7 +63,8 @@ export const ATTRIBUTES = {
 		IDENTIFIER: 'data-identifier',
 		PUBLIC_KEY: 'data-pubkey',
 		HOSTNAME: 'data-hostname',
-		STAFF_DATA: 'data-staff'
+		STAFF_DATA: 'data-staff',
+		ROOM_ICON: 'data-icon'
 	},
 	SORTING: {
 		ACTIVE: 'data-sort',

output/main.js

@@ -76,7 +76,7 @@ function onLoad() {
 	markSortableColumns();
 	addQRModalHandlers();
 	addServerIconInteractions();
-	preloadQRCodes();
+	preloadImages();
 }
 
 const tagBody = ({text, type, description}) => element.span({
@@ -209,14 +209,23 @@ function addQRModalHandlers() {
 
 }
 
-function preloadQRCodes() {
+function preloadImages() {
 	const rows = dom.tbl_communities_content_rows();
 	const identifiers = rows.map(
 		rowElement => rowElement.getAttribute(ATTRIBUTES.ROW.IDENTIFIER)
 	);
+	const icons = rows.map(
+		rowElement => rowElement.getAttribute(ATTRIBUTES.ROW.ROOM_ICON)
+	)
 	for (const identifier of identifiers) {
 		(new Image()).src = communityQRCodeURL(identifier);
 	}
+	for (const icon of icons) {
+		if (!icon) {
+			continue;
+		}
+		(new Image()).src = icon;
+	}
 }
 
 function createJoinLinkButtons() {

sites/+components/qr_modals.php

@@ -11,6 +11,11 @@
 			
 			<div id="details-modal-start">
 				<h1 id="details-modal-title">
+					<img
+						id="details-modal-community-icon"
+						data-hydrate-with="icon:src"
+						title="Community icon"
+					/>
 					<a 
 						id="details-modal-community-name"
 						data-hydrate-with="name;preview_link:href"

sites/+components/tbl_communities.php

@@ -76,7 +76,7 @@
 		data-hostname="<?=$hostname?>"
 		data-staff='<?=$staff_json?>'
 		data-tags='<?=$tags_json?>'
-		<?php /* data-icon='<?=room_icon($room)?>'  Can pass absence of icon */ ?>
+		data-icon='<?=room_icon($room, '64x64')?>' <?php /* Can pass absence of icon */ ?>
 	>
 		<td class="td_identifier" itemprop="identifier"><?=$id?></td>
 		<td class="td_language" title="Language flag for '<?=$name?>'"><?=$language?></td>
@@ -103,7 +103,6 @@
 				?></span>
 <?php endif; endforeach; ?>
 			</span>
-			<img src="<?=room_icon($room, "64x64")?>"></img>
 		</td>
 		<td
 			class="td_description"