Add 'icon safety'

output/index.css

@@ -87,6 +87,9 @@ body {
 a, .anchorstyle {
 	color: var(--anchor-color);
 	text-decoration: underline;
+}
+
+.clickable {
 	cursor: pointer;
 }
 
@@ -424,6 +427,7 @@ label[for=toggle-show-room-ids]::after {
 	max-height: 80vh;
 	color: var(--primary-color);
 	background-color: var(--secondary-color);
+	--icon-size: 4rem;
 }
 
 #details-modal-contents {
@@ -462,19 +466,82 @@ label[for=toggle-show-room-ids]::after {
 	justify-content: center;
 }
 
-#details-modal-community-icon[src=""] {
-	display: none;
+#details-modal-title > * {
+	display: inline-block;
 }
 
-#details-modal-community-icon {
+#details-modal-title {
+	margin-bottom: calc( var(--icon-size) * 0.1 );
+}
+
+#details-modal-community-icon-wrapper {
 	position: relative;
-	top: 0.15em;
-	width: 1em;
-	height: 1em;
-	margin-right: 0.1em;
+	box-sizing: border-box;
+	--strip: calc( var(--icon-size) / 25 );
+	--padding-size: calc( var(--icon-size) - 1 * var(--strip) );
+	top: calc(var(--icon-size) * 0.5 - 0.6rem);
+	width: var(--icon-size);
+	height: var(--icon-size);
+	margin-right: calc( var(--icon-size) * 0.3 );
+	/* box-shadow: var(--primary-color) 0 0 calc( var(--icon-size) / 10 ); */
+	border: var(--primary-color) var(--strip) solid;
+	padding: var(--strip);
 	border-radius: 100%;
 }
 
+/* Too janky */
+
+/*
+#details-modal-community-icon-wrapper::after {
+	position: absolute;
+	line-height: var(--icon-size);
+	text-align: center;
+	font-size: calc(var(--icon-size) / 3);
+	width: 100%;
+	opacity: 1;
+	z-index: 10;
+	filter: grayscale();
+}
+
+#details-modal-community-icon-wrapper[data-has-icon="false"]::after {
+	content: "\2753";
+}
+
+#details-modal-community-icon-wrapper[data-icon-safety="-1"]::after {
+	opacity: 0.5;
+	content: "\26A0";
+}
+*/
+
+#details-modal-community-icon-wrapper[data-has-icon="false"] {
+	display: none;
+}
+
+#details-modal-community-icon-wrapper[data-icon-safety="-1"] {
+	display: none;
+}
+
+
+#details-modal-community-icon-wrapper:is([data-has-icon="false"], [data-icon-safety="-1"]) #details-modal-community-icon {
+	display: none;
+}
+
+#details-modal-community-icon {
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 100%;
+	height: 100%;
+	border-radius: inherit;
+	transition: filter 0.15s, opacity 0.15s;
+}
+
+#details-modal-community-icon:not([data-icon-safety="1"], #details-modal-community-icon-wrapper:hover > *) {
+	opacity: 0.5;
+	filter: blur(3px);
+}
+
+
 #details-modal-start #details-modal-description {
 	max-height: 50vh;
 	overflow: auto;

output/js/constants.js

@@ -21,7 +21,9 @@ export const dom = {
 			public_key: row.getAttribute(ATTRIBUTES.ROW.PUBLIC_KEY),
 			staff: row.getAttribute(ATTRIBUTES.ROW.STAFF_DATA),
 			tags: row.getAttribute(ATTRIBUTES.ROW.TAGS),
-			icon: row.getAttribute(ATTRIBUTES.ROW.ROOM_ICON)
+			icon: row.getAttribute(ATTRIBUTES.ROW.ROOM_ICON),
+			has_icon: row.getAttribute(ATTRIBUTES.ROW.ROOM_ICON).trim() != "",
+			icon_safety: row.getAttribute(ATTRIBUTES.ROW.ROOM_ICON_SAFETY)
 		};
 	},
 	meta_timestamp: () => document.querySelector('meta[name=timestamp]'),
@@ -64,7 +66,8 @@ export const ATTRIBUTES = {
 		PUBLIC_KEY: 'data-pubkey',
 		HOSTNAME: 'data-hostname',
 		STAFF_DATA: 'data-staff',
-		ROOM_ICON: 'data-icon'
+		ROOM_ICON: 'data-icon',
+		ROOM_ICON_SAFETY: 'data-icon-safe'
 	},
 	SORTING: {
 		ACTIVE: 'data-sort',

php/servers/known-servers.php

@@ -55,8 +55,21 @@
 		"sogs.k9net.org"              => "fdcb047eb78520e925fda512a45ae74c6e2de9e0df206b3c0471bf1509919559",
 	);
 
-	/** These hostnames are considered to have safe room icons. */
+	/** 
+	 * @var string[] $ICON_ALLOWLIST
+	 * These hostnames are considered to have safe room icons.
+	 */
 	$ICON_ALLOWLIST = [
-		"open.getsession.org"
+		"open.getsession.org",
+		"sog.caliban.org",
+		"sog.zcyph.cc"
+	];
+
+	/** 
+	 * @var string[] $ICON_BLOCKLIST
+	 * These hostnames are considered to have unsafe room icons.
+	 */
+	$ICON_BLOCKLIST = [
+		"gaohuangse.work"
 	];
 ?>

php/utils/room-icons.php

@@ -42,10 +42,7 @@
         $width = intval($width);
         $height = intval($height);
         assert(!empty($width) && !empty($height));
-        if (!in_array($room->server->get_hostname(), $ICON_ALLOWLIST)) {
-            return null;
-        }
-        if ($room->has_nsfw_keywords()) {
+        if (room_icon_safety($room) < 0) {
             return null;
         }
         $room_id = $room->get_room_identifier();
@@ -81,6 +78,20 @@
         return room_icon_path_relative($room_id, $size);
     }
 
+    function room_icon_safety(\CommunityRoom $room): int {
+        global $ICON_ALLOWLIST, $ICON_BLOCKLIST;
+        if (in_array($room->server->get_hostname(), $ICON_ALLOWLIST)) {
+            return 1;
+        }
+        if (in_array($room->server->get_hostname(), $ICON_BLOCKLIST)) {
+            return -1;
+        }
+        if ($room->has_nsfw_keywords()) {
+            return -1;
+        }
+        return 0;
+    }
+    
     file_exists($ROOM_ICONS_CACHE) or mkdir($ROOM_ICONS_CACHE, 0755, true);
     file_exists($ROOM_ICONS) or mkdir($ROOM_ICONS, 0755, true);
 ?>

sites/+components/qr_modals.php

@@ -10,18 +10,21 @@
 		<div id="details-modal-pane">
 			
 			<div id="details-modal-start">
-				<h1 id="details-modal-title">
-					<img
-						id="details-modal-community-icon"
-						data-hydrate-with="icon:src"
+				<div id="details-modal-title">
+					<div
+						id="details-modal-community-icon-wrapper"
+						class="clickable"
+						data-hydrate-with="has_icon:data-has-icon;icon_safety:data-icon-safety"
 						title="Community icon"
-					/>
-					<a 
+					><img
+						id="details-modal-community-icon"
+						data-hydrate-with="icon:src;icon_safety:data-icon-safety"
+					/></div><h1><a 
 						id="details-modal-community-name"
 						data-hydrate-with="name;preview_link:href"
 						title="Open preview in new tab"
-					></a>
-				</h1>
+					></a></h1>
+				</div>
 				<p id="details-modal-description">
 					<span id="details-modal-description-inner" data-hydrate-with="description"></span>
 				</p>

sites/+components/tbl_communities.php

@@ -76,7 +76,8 @@
 		data-hostname="<?=$hostname?>"
 		data-staff='<?=$staff_json?>'
 		data-tags='<?=$tags_json?>'
-		data-icon='<?=room_icon($room, '64x64')?>' <?php /* Can pass absence of icon */ ?>
+		data-icon='<?=room_icon($room, '64x64')?>'
+		data-icon-safe='<?=room_icon_safety($room)?>'
 	>
 		<td class="td_identifier" itemprop="identifier"><?=$id?></td>
 		<td class="td_language" title="Language flag for '<?=$name?>'"><?=$language?></td>