Implement custom feed favicons (#7646)

Closes #3789, #6503

Icon setting when no custom icon is set yet:

![image](https://github.com/user-attachments/assets/28b07dd0-7dac-4c76-b1d7-77035f91a87a)

- `Change...` button opens a file dialog, and after selecting a file shows the chosen icon in the preview on the left. `Submit` must be clicked after selecting the icon.
- `Reset to default` changes the preview icon to the default one, and also requires `Submit` to be clicked to apply the changes.

Full list of changes:
- CSP now includes `blob:` in `img-src` for
   - `indexAction()` and `feedAction()` in `subscriptionController.php`
   - all of the view actions in `indexController.php`
- Introduce new attribute `customFavicon (boolean)` for feeds that indicates if the feed has a custom favicon
   - `hashFavicon()` in `Feed.php` is dependent on this attribute
      - `hashFavicon()` has a new parameter called `skipCache (boolean)` that allows the reset of the favicon hash for the Feed object
      - `resetFaviconHash()` just calls `hashFavicon(skipCache: true)`
- `f.php` URLs now have the format of `/f.php?h=XXXXX&t=cachebuster`, where the `t` parameter is only used for serving custom favicons
   - if `t` parameter is set, `f.php` returns a `Cache-Control: immutable` header
- `stripos` and `strpos` were changed to `str_contains` in various places (refactor)
- JS for handling the custom favicon configuration logic is in `extra.js` inside `init_update_feed()` which is called when feed configuration is opened from the aside or when the subscription management page with the feed is loaded
   - Server-side code for uploading the icon in `subscriptionController.php` under `feedAction()`
   - Errors that may occur during the setting of a custom favicon:
      - Unsupported image file type (handled only server-side with `isImgMime()`)
      - When the file is bigger than 1 MiB (default), handled both client-side and server-side
      - Standard feed error when `updateFeed()` fails
- JS vars `javascript_vars.phtml` are no longer escaped with `htmlspecialchars()`, instead with json encoding,
- CSS for disabled buttons was added
- Max favicon file size is configurable with the `max_favicon_upload_size` option in `config.php` (not exposed via UI)
- Custom favicons are currently deleted only when they are either reset to the default icon, or the feed gets deleted. They do not get deleted when the user deletes their account without removing their feeds first.
- ` faviconPrepare()` and `faviconRebuild()` are not allowed to be called when the `customFavicon` attribute is `true`
- New i18n strings:
   - `'sub.feed.icon' => 'Icon'`
   - `'sub.feed.change_favicon' => 'Change…'`
   - `'sub.feed.reset_favicon' => 'Reset to default'`
   - `'sub.feed.favicon_changed_by_ext' => 'The icon has been set by the <b>%s</b> extension.'`
   - `'feedback.sub.feed.favicon.too_large' => 'Uploaded icon is too large. The maximum file size is <em>%s</em>.'`
   - `'feedback.sub.feed.favicon.unsupported_format' => 'Unsupported image file format!'`
- Extension hook `custom_favicon_hash`
   - `setCustomFavicon()` method
   - `resetCustomFavicon()` method
   - `customFaviconExt` and `customFaviconDisallowDel` attributes
   - example of usage: https://github.com/FreshRSS/Extensions/pull/337
- Extension hook `custom_favicon_btn_url`
   - Allows extensions to implement a button for setting a custom favicon for individual feeds by providing an URL. The URL will be sent a POST request with the `extAction` field set to either `query_icon_info` or `update_icon`, along with an `id` field which describes the feed's ID.

2 files changed, 147 insertions, 6 deletions

diff --git a/p/scripts/extra.js b/p/scripts/extra.js
index e19e1e899..2a8bb61a3 100644
--- a/p/scripts/extra.js
+++ b/p/scripts/extra.js
@@ -144,6 +144,150 @@ function init_archiving(parent) {
 	});
 }
 
+function init_update_feed() {
+	const feed_update = document.querySelector('div.post#feed_update');
+	if (!feed_update) {
+		return;
+	}
+
+	const faviconUpload = feed_update.querySelector('#favicon-upload');
+	const resetFavicon = feed_update.querySelector('#reset-favicon');
+	const faviconError = feed_update.querySelector('#favicon-error');
+	const faviconExt = feed_update.querySelector('#favicon-ext');
+	const extension = faviconExt.querySelector('b');
+	const faviconExtBtn = feed_update.querySelector('#favicon-ext-btn');
+	const favicon = feed_update.querySelector('.favicon');
+
+	function clearUploadedIcon() {
+		faviconUpload.value = '';
+	}
+	function discardIconChange() {
+		const resetField = feed_update.querySelector('input[name="resetFavicon"]');
+		if (resetField) {
+			resetField.remove();
+		}
+		if (faviconExtBtn) {
+			faviconExtBtn.disabled = false;
+			extension.innerText = extension.dataset.initialExt ?? extension.innerText;
+		}
+		if (extension.innerText == '') {
+			faviconExt.classList.add('hidden');
+		}
+		clearUploadedIcon();
+		favicon.src = favicon.dataset.initialSrc;
+
+		const isCustomFavicon = favicon.getAttribute('src') !== favicon.dataset.originalIcon;
+		resetFavicon.disabled = !isCustomFavicon;
+	}
+
+	faviconUpload.onchange = function () {
+		if (faviconUpload.files.length === 0) {
+			return;
+		}
+
+		faviconExt.classList.add('hidden');
+		if (faviconUpload.files[0].size > context.max_favicon_upload_size) {
+			faviconError.innerHTML = context.i18n.favicon_size_exceeded;
+			discardIconChange();
+			return;
+		}
+		if (faviconExtBtn) {
+			faviconExtBtn.disabled = false;
+			extension.innerText = extension.dataset.initialExt ?? extension.innerText;
+		}
+		faviconError.innerHTML = '';
+
+		const resetField = feed_update.querySelector('input[name="resetFavicon"]');
+		if (resetField) {
+			resetField.remove();
+		}
+		resetFavicon.disabled = false;
+		favicon.src = URL.createObjectURL(faviconUpload.files[0]);
+	};
+
+	resetFavicon.onclick = function (e) {
+		e.preventDefault();
+		if (resetFavicon.disabled) {
+			return;
+		}
+		if (faviconExtBtn) {
+			faviconExtBtn.disabled = false;
+			extension.innerText = extension.dataset.initialExt ?? extension.innerText;
+		}
+
+		faviconExt.classList.add('hidden');
+		faviconError.innerHTML = '';
+		clearUploadedIcon();
+		resetFavicon.insertAdjacentHTML('afterend', '<input type="hidden" name="resetFavicon" value="1" />');
+		resetFavicon.disabled = true;
+
+		favicon.src = favicon.dataset.originalIcon;
+	};
+
+	// Discard the icon change when the "Cancel" button is clicked
+	feed_update.querySelectorAll('[type="reset"]').forEach(cancelBtn => {
+		cancelBtn.addEventListener('click', () => {
+			faviconExt.classList.remove('hidden');
+			faviconError.innerHTML = '';
+			discardIconChange();
+		});
+	});
+
+	if (faviconExtBtn) {
+		faviconExtBtn.onclick = function (e) {
+			e.preventDefault();
+			faviconExtBtn.disabled = true;
+			fetch(faviconExtBtn.dataset.extensionUrl, {
+				method: "POST",
+				body: new URLSearchParams({
+					'_csrf': context.csrf,
+					'extAction': 'query_icon_info',
+					'id': feed_update.dataset.feedId
+				}),
+			}).then(resp => {
+				if (!resp.ok) {
+					faviconExtBtn.disabled = false;
+					return Promise.reject(resp);
+				}
+				return resp.json();
+			}).then(json => {
+				clearUploadedIcon();
+				const resetField = feed_update.querySelector('input[name="resetFavicon"]');
+				if (resetField) {
+					resetField.remove();
+				}
+				resetFavicon.disabled = false;
+				faviconError.innerHTML = '';
+				faviconExt.classList.remove('hidden');
+				extension.dataset.initialExt = extension.innerText;
+				extension.innerText = json.extName;
+				favicon.src = json.iconUrl;
+			});
+		};
+		faviconExtBtn.form.onsubmit = async function (e) {
+			const extChanged = faviconExtBtn.disabled;
+			const isSubmit = !e.submitter.hasAttribute('formaction');
+
+			if (extChanged && isSubmit) {
+				e.preventDefault();
+				faviconExtBtn.form.querySelectorAll('[type="submit"]').forEach(el => {
+					el.disabled = true;
+				});
+				await fetch(faviconExtBtn.dataset.extensionUrl, {
+					method: "POST",
+					body: new URLSearchParams({
+						'_csrf': context.csrf,
+						'extAction': 'update_icon',
+						'id': feed_update.dataset.feedId
+					}),
+				});
+				faviconExtBtn.form.onsubmit = null;
+				faviconExtBtn.form.submit();
+			}
+		};
+	}
+}
+
 // <slider>
 const freshrssSliderLoadEvent = new Event('freshrss:slider-load');
 
@@ -169,6 +313,7 @@ function open_slider_listener(ev) {
 				slider.classList.add('active');
 				slider.scrollTop = 0;
 				slider_content.innerHTML = this.response.body.innerHTML;
+				init_update_feed();
 				slider_content.querySelectorAll('form').forEach(function (f) {
 					f.insertAdjacentHTML('afterbegin', '<input type="hidden" name="slider" value="1" />');
 				});
@@ -308,6 +453,7 @@ function init_extra_afterDOM() {
 		init_select_observers();
 		init_configuration_alert();
 		init_2stateButton();
+		init_update_feed();
 
 		const slider = document.getElementById('slider');
 		if (slider) {
diff --git a/p/scripts/main.js b/p/scripts/main.js
index 3e825ff96..4566a1141 100644
--- a/p/scripts/main.js
+++ b/p/scripts/main.js
@@ -1033,11 +1033,6 @@ function init_column_categories() {
 function init_shortcuts() {
 	Object.keys(context.shortcuts).forEach(function (k) {
 		context.shortcuts[k] = (context.shortcuts[k] || '').toUpperCase();
-		if (context.shortcuts[k].indexOf('&') >= 0) {
-			// Decode potential HTML entities <'&">
-			const parser = new DOMParser();
-			context.shortcuts[k] = parser.parseFromString(context.shortcuts[k], 'text/html').documentElement.textContent;
-		}
 	});
 
 	document.addEventListener('keydown', ev => {
@@ -1156,7 +1151,7 @@ function init_shortcuts() {
 			return;
 		}
 		if (ev.key === '?') {
-			window.location.href = context.urls.shortcuts.replace(/&amp;/g, '&');
+			window.location.href = context.urls.shortcuts;
 			return;
 		}