msglist: Friendlier placeholder text when narrow has no messages

chrisbobbe · chrisbobbe · commit d526799086eb · 2025-07-02T18:31:08.000-07:00
Fixes zulip#1555. For now, the text simply says "There are no messages here." We'll add per-narrow logic later, but this is an improvement over the current appearance which just says "No earlier messages." (Earlier than what?) To support being used in the message-list page (in addition to Inbox, etc.), the placeholder widget only needs small changes, it turns out.
diff --git a/assets/l10n/app_en.arb b/assets/l10n/app_en.arb
@@ -530,6 +530,10 @@
       "others": {"type": "String", "example": "Alice, Bob"}
     }
   },
+  "emptyMessageList": "There are no messages here.",
+  "@emptyMessageList": {
+    "description": "Placeholder for some message-list pages when there are no messages."
+  },
   "messageListGroupYouWithYourself": "Messages with yourself",
   "@messageListGroupYouWithYourself": {
     "description": "Message list recipient header for a DM group that only includes yourself."
diff --git a/lib/generated/l10n/zulip_localizations.dart b/lib/generated/l10n/zulip_localizations.dart
@@ -845,6 +845,12 @@ abstract class ZulipLocalizations {
   /// **'DMs with {others}'**
   String dmsWithOthersPageTitle(String others);
 
+  /// Placeholder for some message-list pages when there are no messages.
+  ///
+  /// In en, this message translates to:
+  /// **'There are no messages here.'**
+  String get emptyMessageList;
+
   /// Message list recipient header for a DM group that only includes yourself.
   ///
   /// In en, this message translates to:
diff --git a/lib/generated/l10n/zulip_localizations_ar.dart b/lib/generated/l10n/zulip_localizations_ar.dart
@@ -434,6 +434,9 @@ class ZulipLocalizationsAr extends ZulipLocalizations {
     return 'DMs with $others';
   }
 
+  @override
+  String get emptyMessageList => 'There are no messages here.';
+
   @override
   String get messageListGroupYouWithYourself => 'Messages with yourself';
 
diff --git a/lib/generated/l10n/zulip_localizations_de.dart b/lib/generated/l10n/zulip_localizations_de.dart
@@ -449,6 +449,9 @@ class ZulipLocalizationsDe extends ZulipLocalizations {
     return 'DNs mit $others';
   }
 
+  @override
+  String get emptyMessageList => 'There are no messages here.';
+
   @override
   String get messageListGroupYouWithYourself => 'Nachrichten mit dir selbst';
 
diff --git a/lib/generated/l10n/zulip_localizations_en.dart b/lib/generated/l10n/zulip_localizations_en.dart
@@ -434,6 +434,9 @@ class ZulipLocalizationsEn extends ZulipLocalizations {
     return 'DMs with $others';
   }
 
+  @override
+  String get emptyMessageList => 'There are no messages here.';
+
   @override
   String get messageListGroupYouWithYourself => 'Messages with yourself';
 
diff --git a/lib/generated/l10n/zulip_localizations_it.dart b/lib/generated/l10n/zulip_localizations_it.dart
@@ -445,6 +445,9 @@ class ZulipLocalizationsIt extends ZulipLocalizations {
     return 'MD con $others';
   }
 
+  @override
+  String get emptyMessageList => 'There are no messages here.';
+
   @override
   String get messageListGroupYouWithYourself => 'Messaggi con te stesso';
 
diff --git a/lib/generated/l10n/zulip_localizations_ja.dart b/lib/generated/l10n/zulip_localizations_ja.dart
@@ -434,6 +434,9 @@ class ZulipLocalizationsJa extends ZulipLocalizations {
     return 'DMs with $others';
   }
 
+  @override
+  String get emptyMessageList => 'There are no messages here.';
+
   @override
   String get messageListGroupYouWithYourself => 'Messages with yourself';
 
diff --git a/lib/generated/l10n/zulip_localizations_nb.dart b/lib/generated/l10n/zulip_localizations_nb.dart
@@ -434,6 +434,9 @@ class ZulipLocalizationsNb extends ZulipLocalizations {
     return 'DMs with $others';
   }
 
+  @override
+  String get emptyMessageList => 'There are no messages here.';
+
   @override
   String get messageListGroupYouWithYourself => 'Messages with yourself';
 
diff --git a/lib/generated/l10n/zulip_localizations_pl.dart b/lib/generated/l10n/zulip_localizations_pl.dart
@@ -443,6 +443,9 @@ class ZulipLocalizationsPl extends ZulipLocalizations {
     return 'DM z $others';
   }
 
+  @override
+  String get emptyMessageList => 'There are no messages here.';
+
   @override
   String get messageListGroupYouWithYourself => 'Zapiski na własne konto';
 
diff --git a/lib/generated/l10n/zulip_localizations_ru.dart b/lib/generated/l10n/zulip_localizations_ru.dart
@@ -443,6 +443,9 @@ class ZulipLocalizationsRu extends ZulipLocalizations {
     return 'ЛС с $others';
   }
 
+  @override
+  String get emptyMessageList => 'There are no messages here.';
+
   @override
   String get messageListGroupYouWithYourself => 'Сообщения с собой';
 
diff --git a/lib/generated/l10n/zulip_localizations_sk.dart b/lib/generated/l10n/zulip_localizations_sk.dart
@@ -434,6 +434,9 @@ class ZulipLocalizationsSk extends ZulipLocalizations {
     return 'DMs with $others';
   }
 
+  @override
+  String get emptyMessageList => 'There are no messages here.';
+
   @override
   String get messageListGroupYouWithYourself => 'Messages with yourself';
 
diff --git a/lib/generated/l10n/zulip_localizations_sl.dart b/lib/generated/l10n/zulip_localizations_sl.dart
@@ -455,6 +455,9 @@ class ZulipLocalizationsSl extends ZulipLocalizations {
     return 'Neposredna sporočila z $others';
   }
 
+  @override
+  String get emptyMessageList => 'There are no messages here.';
+
   @override
   String get messageListGroupYouWithYourself => 'Sporočila sebi';
 
diff --git a/lib/generated/l10n/zulip_localizations_uk.dart b/lib/generated/l10n/zulip_localizations_uk.dart
@@ -445,6 +445,9 @@ class ZulipLocalizationsUk extends ZulipLocalizations {
     return 'Особисті повідомлення з $others';
   }
 
+  @override
+  String get emptyMessageList => 'There are no messages here.';
+
   @override
   String get messageListGroupYouWithYourself => 'Повідомлення з собою';
 
diff --git a/lib/generated/l10n/zulip_localizations_zh.dart b/lib/generated/l10n/zulip_localizations_zh.dart
@@ -434,6 +434,9 @@ class ZulipLocalizationsZh extends ZulipLocalizations {
     return 'DMs with $others';
   }
 
+  @override
+  String get emptyMessageList => 'There are no messages here.';
+
   @override
   String get messageListGroupYouWithYourself => 'Messages with yourself';
 
diff --git a/lib/widgets/message_list.dart b/lib/widgets/message_list.dart
@@ -788,8 +788,15 @@ class _MessageListState extends State<MessageList> with PerAccountStoreAwareStat
 
   @override
   Widget build(BuildContext context) {
+    final zulipLocalizations = ZulipLocalizations.of(context);
+
     if (!model.fetched) return const Center(child: CircularProgressIndicator());
 
+    if (model.items.isEmpty && model.haveNewest && model.haveOldest) {
+      return PageBodyEmptyContentPlaceholder(
+        message: zulipLocalizations.emptyMessageList);
+    }
+
     // Pad the left and right insets, for small devices in landscape.
     return SafeArea(
       // Don't let this be the place we pad the bottom inset. When there's
diff --git a/lib/widgets/page.dart b/lib/widgets/page.dart
@@ -213,11 +213,15 @@ class LoadingPlaceholderPage extends StatelessWidget {
   }
 }
 
-/// A "no content here" message, for the Inbox, Subscriptions, and DMs pages.
+/// A "no content here" message for when a page has no content to show.
 ///
-/// This should go near the root of the "page body"'s widget subtree.
-/// In particular, it handles the horizontal device insets.
-/// (The vertical insets are handled externally, by the app bar and bottom nav.)
+/// Suitable for the inbox, the message-list page, etc.
+///
+/// This handles the horizontal device insets
+/// and the bottom inset when needed (in a message list with no compose box).
+/// The top inset is handled externally by the app bar.
+// TODO(#311) If the message list gets a bottom nav, the bottom inset will
+//   always be handled externally too; simplify implementation and dartdoc.
 class PageBodyEmptyContentPlaceholder extends StatelessWidget {
   const PageBodyEmptyContentPlaceholder({super.key, required this.message});
 
@@ -228,9 +232,9 @@ class PageBodyEmptyContentPlaceholder extends StatelessWidget {
     final designVariables = DesignVariables.of(context);
 
     return SafeArea(
-      minimum: EdgeInsets.symmetric(horizontal: 24),
+      minimum: EdgeInsets.fromLTRB(24, 0, 24, 16),
       child: Padding(
-        padding: EdgeInsets.only(top: 48, bottom: 16),
+        padding: EdgeInsets.only(top: 48),
         child: Align(
           alignment: Alignment.topCenter,
           // TODO leading and trailing elements, like in Figma (given as SVGs):
diff --git a/test/widgets/message_list_test.dart b/test/widgets/message_list_test.dart
@@ -329,6 +329,36 @@ void main() {
     });
   });
 
+  group('no-messages placeholder', () {
+    final findPlaceholder = find.byType(PageBodyEmptyContentPlaceholder);
+
+    testWidgets('Combined feed', (tester) async {
+      await setupMessageListPage(tester, narrow: CombinedFeedNarrow(), messages: []);
+      check(
+        find.descendant(
+          of: findPlaceholder,
+          matching: find.textContaining('There are no messages here.')),
+      ).findsOne();
+    });
+
+    testWidgets('when `messages` empty but `outboxMessages` not empty, show outboxes, not placeholder', (tester) async {
+      final channel = eg.stream();
+      await setupMessageListPage(tester,
+        narrow: TopicNarrow(channel.streamId, eg.t('topic')),
+        streams: [channel],
+        messages: []);
+      check(findPlaceholder).findsOne();
+
+      connection.prepare(json: SendMessageResult(id: 1).toJson());
+      await tester.enterText(contentInputFinder, 'asdfjkl;');
+      await tester.tap(find.byIcon(ZulipIcons.send));
+      await tester.pump(kLocalEchoDebounceDuration);
+
+      check(findPlaceholder).findsNothing();
+      check(find.text('asdfjkl;')).findsOne();
+    });
+  });
+
   group('presents message content appropriately', () {
     testWidgets('content not asked to consume insets (including bottom), even without compose box', (tester) async {
       // Regression test for: https://github.com/zulip/zulip-flutter/issues/736

Original file line number	Diff line number	Diff line change
`@@ -434,6 +434,9 @@ class ZulipLocalizationsAr extends ZulipLocalizations {`
`434`	`434`	`return 'DMs with $others';`
`435`	`435`	`}`
`436`	`436`
	`437`	`+ @override`
	`438`	`+ String get emptyMessageList => 'There are no messages here.';`
	`439`	`+`
`437`	`440`	`@override`
`438`	`441`	`String get messageListGroupYouWithYourself => 'Messages with yourself';`
`439`	`442`
Original file line number	Diff line number	Diff line change
`@@ -449,6 +449,9 @@ class ZulipLocalizationsDe extends ZulipLocalizations {`
`449`	`449`	`return 'DNs mit $others';`
`450`	`450`	`}`
`451`	`451`
	`452`	`+ @override`
	`453`	`+ String get emptyMessageList => 'There are no messages here.';`
	`454`	`+`
`452`	`455`	`@override`
`453`	`456`	`String get messageListGroupYouWithYourself => 'Nachrichten mit dir selbst';`
`454`	`457`
Original file line number	Diff line number	Diff line change
`@@ -445,6 +445,9 @@ class ZulipLocalizationsIt extends ZulipLocalizations {`
`445`	`445`	`return 'MD con $others';`
`446`	`446`	`}`
`447`	`447`
	`448`	`+ @override`
	`449`	`+ String get emptyMessageList => 'There are no messages here.';`
	`450`	`+`
`448`	`451`	`@override`
`449`	`452`	`String get messageListGroupYouWithYourself => 'Messaggi con te stesso';`
`450`	`453`
Original file line number	Diff line number	Diff line change
`@@ -443,6 +443,9 @@ class ZulipLocalizationsPl extends ZulipLocalizations {`
`443`	`443`	`return 'DM z $others';`
`444`	`444`	`}`
`445`	`445`
	`446`	`+ @override`
	`447`	`+ String get emptyMessageList => 'There are no messages here.';`
	`448`	`+`
`446`	`449`	`@override`
`447`	`450`	`String get messageListGroupYouWithYourself => 'Zapiski na własne konto';`
`448`	`451`