Option icons-as-emojis for performance (#4353)

New mode to use only emojis instead of icons.
Considerably improves performances.
Needed for 20k+ feeds scenario https://github.com/FreshRSS/FreshRSS/pull/4347

app/Models/Themes.php

@@ -70,52 +70,52 @@ class FreshRSS_Themes extends Minz_Model {
 
 	public static function alt($name) {
 		static $alts = array(
-			'add' => '✚',
+			'add' => '➕',	//✚
 			'all' => '☰',
-			'bookmark' => '★',
-			'bookmark-add' => '✚',
-			'bookmark-tag' => '🔖',
-			'category' => '☷',
+			'bookmark' => '✨',	//★
+			'bookmark-add' => '➕',	//✚
+			'bookmark-tag' => '📑',
+			'category' => '🗂️',	//☷
 			'close' => '❌',
-			'configure' => '⚙',
+			'configure' => '⚙️',
 			'debug' => '🐛',
-			'down' => '▽',
+			'down' => '🔽',	//▽
 			'error' => '❌',
-			'favorite' => '★',
+			'favorite' => '⭐',	//★
 			'FreshRSS-logo' => '⊚',
-			'help' => 'ⓘ',
+			'help' => 'ℹ️',	//ⓘ
 			'icon' => '⊚',
-			'key' => '⚿',
+			'key' => '🔑',	//⚿
 			'label' => '🏷️',
-			'link' => '↗',
-			'look' => '👁',
+			'link' => '↗️',	//↗
+			'look' => '👀',	//👁
 			'login' => '🔒',
 			'logout' => '🔓',
 			'next' => '⏩',
 			'non-starred' => '☆',
-			'notice' => 'ⓘ',
+			'notice' => 'ℹ️',	//ⓘ
 			'prev' => '⏪',
-			'read' => '☑',
-			'rss' => '☄',
-			'unread' => '☐',
+			'read' => '☑️',	//☑
+			'rss' => '📣',	//☄
+			'unread' => '🔲',	//☐
 			'refresh' => '🔃',	//↻
 			'search' => '🔍',
-			'share' => '♺',
-			'sort-down' => '↓',
-			'sort-up' => '↑',
-			'starred' => '★',
-			'stats' => '%',
-			'tag' => '⚐',
-			'up' => '△',
-			'view-normal' => '☰',
-			'view-global' => '☷',
-			'view-reader' => '☕',
-			'warning' => '△',
+			'share' => '♻️',	//♺
+			'sort-down' => '⬇️',	//↓
+			'sort-up' => '⬆️',	//↑
+			'starred' => '⭐',	//★
+			'stats' => '📈',	//%
+			'tag' => '🔖',	//⚐
+			'up' => '🔼',	//△
+			'view-normal' => '📰',	//☰
+			'view-global' => '📖',	//☷
+			'view-reader' => '📜',
+			'warning' => '⚠️',	//△
 		);
 		return isset($name) ? $alts[$name] : '';
 	}
 
-	public static function icon($name, $urlOnly = false, $altOnly = false) {
+	public static function icon($name, $urlOnly = false) {
 		$alt = self::alt($name);
 		if ($alt == '') {
 			return '';
@@ -124,6 +124,14 @@ class FreshRSS_Themes extends Minz_Model {
 		$url = $name . '.svg';
 		$url = isset(self::$themeIcons[$url]) ? (self::$themeIconsUrl . $url) : (self::$defaultIconsUrl . $url);
 
-		return $urlOnly ? Minz_Url::display($url) : '<img class="icon" src="' . Minz_Url::display($url) . '" alt="' . $alt . '" />';
+		if ($urlOnly) {
+			return Minz_Url::display($url);
+		}
+
+		if (FreshRSS_Context::$user_conf->icons_as_emojis) {
+			return '<span class="icon">' . $alt . '</span>';
+		}
+
+		return '<img class="icon" src="' . Minz_Url::display($url) . '" loading="lazy" alt="' . $alt . '" />';
 	}
 }

app/Models/UserConfiguration.php

@@ -39,6 +39,7 @@
  * @property int $since_hours_posts_per_rss
  * @property bool $show_fav_unread
  * @property bool $show_favicons
+ * @property bool $icons_as_emojis
  * @property bool $show_nav_buttons
  * @property string $sort_order
  * @property array<string,array<string>> $sharing

config-user.default.php

@@ -82,7 +82,11 @@ return array (
 		'rss_view' => '4',
 		'toggle_media' => 'v',
 	),
+
+	# Disabling favicons and using emojis instead of icons improves performance for users with many feeds
 	'show_favicons' => true,
+	'icons_as_emojis' => false,
+
 	'topline_read' => true,
 	'topline_favorite' => true,
 	'topline_thumbnail' => 'none',

p/scripts/main.js

@@ -764,7 +764,7 @@ function openCategory(category_id) {
 	category_element.querySelector('.tree-folder-items').classList.add('active');
 	const img = category_element.querySelector('a.dropdown-toggle img');
 	img.src = img.src.replace('/icons/down.', '/icons/up.');
-	img.alt = '△';
+	img.alt = '🔼';
 }
 
 function init_column_categories() {
@@ -786,15 +786,23 @@ function init_column_categories() {
 	document.getElementById('aside_feed').onclick = function (ev) {
 		let a = ev.target.closest('.tree-folder > .tree-folder-title > a.dropdown-toggle');
 		if (a) {
-			const img = a.querySelector('img');
+			const icon = a.querySelector('.icon');
 			const category_id = a.closest('.category').id;
-			if (img.alt === '▽') {
-				img.src = img.src.replace('/icons/down.', '/icons/up.');
-				img.alt = '△';
+			if (icon.alt === '🔽' || icon.innerHTML === '🔽') {
+				if (icon.src) {
+					icon.src = icon.src.replace('/icons/down.', '/icons/up.');
+					icon.alt = '🔼';
+				} else {
+					icon.innerHTML = '🔼';
+				}
 				rememberOpenCategory(category_id, true);
 			} else {
-				img.src = img.src.replace('/icons/up.', '/icons/down.');
-				img.alt = '▽';
+				if (icon.src) {
+					icon.src = icon.src.replace('/icons/up.', '/icons/down.');
+					icon.alt = '🔽';
+				} else {
+					icon.innerHTML = '🔽';
+				}
 				rememberOpenCategory(category_id, false);
 			}