Added empty screen for pages.meet (when there is no data to show)

web/src/app/css/app.css

@@ -23,6 +23,7 @@ img.avatar {
 
 a.button {
 	text-decoration: none;
+	user-select: none;
 	color: initial;
 }
 header .component.button .fa {
@@ -80,6 +81,27 @@ main {
 	background: #000;
 }
 
+#page-meet #empty {
+	color: #fff;
+	text-align: center;
+	font-size: 1.3em;
+}
+#page-meet #empty > .center {
+	max-width: 30em;
+	padding: 2em;
+}
+#page-meet #empty .fa.fa-times {
+	font-size: 2em;
+}
+#page-meet #empty #be-first {
+	text-decoration: none;
+	padding: .5em 1em;
+	background: #893ad9;
+	color: #fff;
+	border-radius: 8px;
+	border: 1px solid #ffffff1c;
+}
+
 #page-meet #actions {
 	height: var(--meet_actions_height);
 	max-width: var(--meet_max_width);

web/src/app/js/pages/meet.js

@@ -12,13 +12,19 @@ app.pages.meet = {
 		http.get('/api/v1/feed/meet', {}, function(json) {
 			if (json === undefined) return;
 			app.pages.meet.data = json;
-			app.template.loadMany(['meet.item','meet.actions'], async function(_) {
-				await waitUntil(function() {
-					return http.cache.get('instance_emojis') !== undefined;
-				}, 3);
-				app.pages.meet.paint(json);
-				app.pages.meet.paintInterval();
-			});
+			if (json.length > 0) {
+				app.template.loadMany(['meet.item','meet.actions'], async function(_) {
+					await waitUntil(function() {
+						return http.cache.get('instance_emojis') !== undefined;
+					}, 3);
+					app.pages.meet.paint(json);
+					app.pages.meet.paintInterval();
+				});
+			} else {
+				app.template.load('meet.empty', function(tpl) {
+					dom.innerHTML = app.template.fill({}, tpl);
+				});
+			}
 		});
 	},
 	loadMore: function() {
@@ -155,8 +161,8 @@ app.pages.meet = {
 		crush: function() {
 			document.activeElement.blur();
 			const current = app.pages.meet.dataCurrent();
-			if (current === null)
-				return app.toast.error(s('error.unknown_error'));
+			if (current === undefined || current === null)
+				return app.toast.error(s('app.error.unknown_error'));
 			http.post(`/api/v1/accounts/follow?url=${current.account.url}`, {}, function(json) {
 				if (json === undefined) return;
 				if (json.error !== undefined)
@@ -170,8 +176,8 @@ app.pages.meet = {
 		discard: function() {
 			document.activeElement.blur();
 			const current = app.pages.meet.dataCurrent();
-			if (current === null)
-				return app.toast.error(s('error.unknown_error'));
+			if (current === undefined || current === null)
+				return app.toast.error(s('app.error.unknown_error'));
 			http.post(`/api/v1/accounts/block?url=${current.account.url}`, {}, function(json) {
 				if (json === undefined) return;
 				if (json.error !== undefined)

web/src/app/js/templates/meet/empty.html

@@ -0,0 +1,11 @@
+<div id="empty" onclick="app.pages.meet.exit()"
+	class="flex size-max">
+	<div class="center">
+		<i class="fa fa-times fa-fw"></i>
+		<p>{s:app.meet_empty_p}</p>
+		<br>
+		<a id="be-first" href="#compose"
+			class="button light rounder"
+			>{s:app.be_the_first}</a>
+	</div>
+</div>

web/src/config/lang/en.php

@@ -15,6 +15,8 @@ $strings = [
 		'the_fediverse' => 'The Fediverse',
 		'yes' => 'Yes',
 		'no' => 'No',
+		'meet_empty_p' => 'We are sorry, this FediLove ❤️ instance doesn\'t have enough network and there is noone to meet yet.',
+		'be_the_first' => 'Be the first one!',
 		'ok' => [
 			'crush_success_0' => 'Your new Crush!',
 			'crush_success_1' => 'Love is in the air!',

web/src/config/lang/es.php

@@ -15,6 +15,8 @@ $strings = [
 		'the_fediverse' => 'El Fediverso',
 		'yes' => 'Sí',
 		'no' => 'No',
+		'meet_empty_p' => 'Lo sentimos, esta instancia de FediLove ❤️ no tiene suficiente red y todavía no hay nadie para conocer.',
+		'be_the_first' => '¡Se la primera persona!',
 		'ok' => [
 			'crush_success_0' => '¡Tu nuevo Crush!',
 			'crush_success_1' => '¡El amor está en el aire!',