Fix: global view does not show "no articles to show" alert (#4042)

* fix

* phpcs fixed

* fix JS

app/views/index/global.phtml

@@ -20,11 +20,14 @@
 		'params' => $params,
 	);
 
+	$unreadArticles = 0;
+
 	foreach ($this->categories as $cat) {
 		$feeds = $cat->feeds();
 		$url_base['params']['get'] = 'c_' . $cat->id();
 
 		if (!empty($feeds)) {
+			$unreadArticles += $cat->nbNotRead();
 ?>
 	<div class="box category" data-unread="<?= $cat->nbNotRead() ?>">
 		<div class="box-title"><a class="title" data-unread="<?= format_number($cat->nbNotRead()) ?>"
@@ -49,7 +52,14 @@
 <?php
 		}
 	}
-?>
+
+	if ($unreadArticles < 1) {
+		?>
+	<div id="noArticlesToShow" class="prompt alert alert-warn">
+		<h2 class="alert-head"><?= _t('index.feed.empty') ?></h2>
+		<p><a href="<?= _url('subscription', 'add') ?>"><?= _t('index.feed.add') ?></a></p>
+	</div>
+	<?php } ?>
 </main>
 
 <div id="overlay">

p/scripts/main.js

@@ -1481,9 +1481,11 @@ function refreshUnreads() {
 		}
 		const isAll = document.querySelector('.category.all.active');
 		let new_articles = false;
+		let nbUnreadFeeds = 0;
 
 		Object.keys(json.feeds).forEach(function (feed_id) {
 			const nbUnreads = json.feeds[feed_id];
+			nbUnreadFeeds += nbUnreads;
 			feed_id = 'f_' + feed_id;
 			const elem = document.getElementById(feed_id);
 			const feed_unreads = elem ? str2int(elem.getAttribute('data-unread')) : 0;
@@ -1497,6 +1499,11 @@ function refreshUnreads() {
 			}
 		});
 
+		const noArticlesToShow_div = document.getElementById('noArticlesToShow');
+		if (nbUnreadFeeds > 0 && noArticlesToShow_div) {
+			noArticlesToShow_div.classList.add('hide');
+		}
+
 		let nbUnreadTags = 0;
 
 		Object.keys(json.tags).forEach(function (tag_id) {

p/themes/base-theme/template.css

@@ -434,6 +434,10 @@ a.btn {
 	margin: 5px 20px;
 }
 
+.alert.hide {
+	display: none;
+}
+
 /*=== Icons */
 .icon {
 	display: inline-block;

p/themes/base-theme/template.rtl.css

@@ -434,6 +434,10 @@ a.btn {
 	margin: 5px 20px;
 }
 
+.alert.hide {
+	display: none;
+}
+
 /*=== Icons */
 .icon {
 	display: inline-block;