Add basic 'Server' column

output/js/constants.js

@@ -14,7 +14,7 @@ export const dom = {
 export const COLUMN = {
 	IDENTIFIER:   0,  LANGUAGE:     1,  NAME:         2,
 	DESCRIPTION:  3,  USERS:        4,  PREVIEW:      5,
-	QR_CODE:      6,  JOIN_URL:     7
+	QR_CODE:      6,  SERVER_ICON:  7,  JOIN_URL:     8
 };
 
 // Reverse enum.
@@ -43,18 +43,24 @@ export function columnAscendingByDefault(column) {
 
 export function columnIsSortable(column) { return column != COLUMN.QR_CODE; }
 
-export function columnNeedsCasefold(column) {
-	return [
-		COLUMN.IDENTIFIER,
-		COLUMN.NAME,
-		COLUMN.DESCRIPTION
-	].includes(column);
+/**
+ * @type {Record<string, (el: HTMLTableCellElement) => any>}
+ */
+const TRANSFORMATION = {
+	numeric: (el) => parseInt(el.innerText),
+	casefold: (el) => el.innerText.toLowerCase().trim(),
+	tokenData: (el) => el.getAttribute("data-token")
 }
 
-export function columnIsNumeric(column) {
-	return [
-		COLUMN.USERS
-	].includes(column);
+/**
+ * @type {Dictionary<number, (el: HTMLTableCellElement) => any>}
+ */
+export const COLUMN_TRANSFORMATION = {
+	[COLUMN.USERS]: TRANSFORMATION.numeric,
+	[COLUMN.IDENTIFIER]: TRANSFORMATION.casefold,
+	[COLUMN.NAME]: TRANSFORMATION.casefold,
+	[COLUMN.DESCRIPTION]: TRANSFORMATION.casefold,
+	[COLUMN.SERVER_ICON]: TRANSFORMATION.tokenData
 }
 
 /**

output/main.js

@@ -16,8 +16,7 @@
 // Import magic numbers and data
 import {
 	dom, COLUMN, COLUMN_LITERAL, COMPARISON, ATTRIBUTES,
-	columnAscendingByDefault, columnIsSortable, columnNeedsCasefold,
-	columnIsNumeric, element
+	columnAscendingByDefault, columnIsSortable, COLUMN_TRANSFORMATION, element
 } from './js/constants.js';
 
 // Hidden communities for transparency.
@@ -193,21 +192,12 @@ function makeRowComparer(column, ascending) {
 	}
 
 	// Callback to obtain sortable content from cell text.
-	let contentToSortable = (text) => text.trim();
-
-	if (columnNeedsCasefold(column)) {
-		// Make certain columns sort regardless of casing.
-		contentToSortable = (text) => text.toLowerCase().trim();
-	}
-	else if (columnIsNumeric(column)) {
-		// Make certain columns sort on parsed numeric value instead of text.
-		contentToSortable = (text) => parseInt(text);
-	}
+	const columnToSortable = COLUMN_TRANSFORMATION[column] ?? ((el) => el.innerText.trim());
 
 	// Construct comparer using derived property to determine sort order.
 	const rowComparer = compareProp(
 		ascending ? compareAscending : compareDescending,
-		row => contentToSortable(row.children[column].innerText)
+		row => columnToSortable(row.children[column])
 	);
 
 	return rowComparer;

output/styles2.css

@@ -45,6 +45,27 @@ header {
 
 .td_users        { text-align: right; }
 .td_preview      { text-align: center; }
+.td_server_icon { text-align: center; }
+
+.td_server_icon-circle {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 2em;
+	height: 2em;
+	border-radius: 2em;
+	font-family: sans-serif;
+	margin: 0 auto;
+	color: white;
+	text-shadow: 0 0 0.5em #000;
+	box-shadow: 0 0 0.05em #777;
+}
+
+.td_server_icon-circle span {
+	position: relative;
+	top: 0.05em;
+}
+
 .td_join_url     {
 	font-family: monospace;
 	white-space: nowrap;

sites/+components/tbl_communities.php

@@ -21,6 +21,7 @@
 		['id' => "users", 'name' => "Users"],
 		['id' => "preview", 'name' => "Preview"],
 		['id' => "qr", 'name' => "QR"],
+		['id' => "server_icon", 'name' => "Server"],
 		['id' => "join_url", 'name' => "Join URL"],
 	];
 ?>
@@ -35,6 +36,22 @@
 <?php endforeach; ?>
 	</tr>
 <?php foreach ($rooms as $id => $room): ?>
+	<?php
+		// Get the server public key.
+
+		// FIXME:
+		// ! This is bad practice.
+		// However, the fetching code hides component data
+		// and this is a low risk use case.
+
+		$token = explode("=", $room->join_link)[1];
+		$icon_hue = hexdec($token[2] . $token[2]);
+		$icon_color = "hsl($icon_hue, 80%, 50%)";
+
+		$hostname = explode("//", $room->join_link)[1];
+		$hostname = explode("/", $hostname)[0];
+	?>
+
 	<tr id="<?=$id?>">
 		<td class="td_identifier"><?=$id?></td>
 		<td class="td_language"><?=$room->language?></td>
@@ -60,6 +77,14 @@
 				alt="Pictogram of a QR code"
 			>
 		</td>
+		<td class="td_server_icon" 
+			data-token="<?=$token?>"
+			title="<?=$hostname?> (<?=$token?>)"
+		>
+			<div class="td_server_icon-circle" style="background-color: <?=$icon_color?>">
+				<span><?=strtoupper($token[0] . $token[1])?></span>
+			</div>
+		</td>
 		<td class="td_join_url">
 			<div class="join_url_container" data-url="<?=$room->join_link?>">
 				<a class="join_url show-from-w5" title="<?=$room->join_link?>"