Skip to content

Commit f9767ee

Browse files
author
chimnayajith
committed
inbox: Show empty state when there are no unreads
Figma: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=5966-176662&t=gMqARx3pF7eyMkj6-4 CZO discussion: https://chat.zulip.org/#narrow/channel/530-mobile-design/topic/InboxPage.3A.20Design/with/2082578
1 parent 0ad41a8 commit f9767ee

12 files changed

+174
-0
lines changed

‎assets/l10n/app_en.arb‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -824,5 +824,9 @@
824824
"zulipAppTitle": "Zulip",
825825
"@zulipAppTitle": {
826826
"description": "The name of Zulip. This should be either 'Zulip' or a transliteration."
827+
},
828+
"emptyInboxMessage": "There are no unread messages in your Inbox.\nCheck out the [combined feed] for recent messages.",
829+
"@emptyInboxMessage": {
830+
"description": "Message shown when inbox is empty. [combined feed] will be replaced with a clickable link to Combined Feed."
827831
}
828832
}

‎lib/generated/l10n/zulip_localizations.dart‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1208,6 +1208,12 @@ abstract class ZulipLocalizations {
12081208
/// In en, this message translates to:
12091209
/// **'Zulip'**
12101210
String get zulipAppTitle;
1211+
1212+
/// Message shown when inbox is empty. [combined feed] will be replaced with a clickable link to Combined Feed.
1213+
///
1214+
/// In en, this message translates to:
1215+
/// **'There are no unread messages in your Inbox.\nCheck out the [combined feed] for recent messages.'**
1216+
String get emptyInboxMessage;
12111217
}
12121218

12131219
class _ZulipLocalizationsDelegate extends LocalizationsDelegate<ZulipLocalizations> {

‎lib/generated/l10n/zulip_localizations_ar.dart‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -643,4 +643,7 @@ class ZulipLocalizationsAr extends ZulipLocalizations {
643643

644644
@override
645645
String get zulipAppTitle => 'Zulip';
646+
647+
@override
648+
String get emptyInboxMessage => 'There are no unread messages in your Inbox.\nCheck out the [combined feed] for recent messages.';
646649
}

‎lib/generated/l10n/zulip_localizations_en.dart‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -643,4 +643,7 @@ class ZulipLocalizationsEn extends ZulipLocalizations {
643643

644644
@override
645645
String get zulipAppTitle => 'Zulip';
646+
647+
@override
648+
String get emptyInboxMessage => 'There are no unread messages in your Inbox.\nCheck out the [combined feed] for recent messages.';
646649
}

‎lib/generated/l10n/zulip_localizations_ja.dart‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -643,4 +643,7 @@ class ZulipLocalizationsJa extends ZulipLocalizations {
643643

644644
@override
645645
String get zulipAppTitle => 'Zulip';
646+
647+
@override
648+
String get emptyInboxMessage => 'There are no unread messages in your Inbox.\nCheck out the [combined feed] for recent messages.';
646649
}

‎lib/generated/l10n/zulip_localizations_nb.dart‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -643,4 +643,7 @@ class ZulipLocalizationsNb extends ZulipLocalizations {
643643

644644
@override
645645
String get zulipAppTitle => 'Zulip';
646+
647+
@override
648+
String get emptyInboxMessage => 'There are no unread messages in your Inbox.\nCheck out the [combined feed] for recent messages.';
646649
}

‎lib/generated/l10n/zulip_localizations_pl.dart‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -643,4 +643,7 @@ class ZulipLocalizationsPl extends ZulipLocalizations {
643643

644644
@override
645645
String get zulipAppTitle => 'Zulip';
646+
647+
@override
648+
String get emptyInboxMessage => 'There are no unread messages in your Inbox.\nCheck out the [combined feed] for recent messages.';
646649
}

‎lib/generated/l10n/zulip_localizations_ru.dart‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -643,4 +643,7 @@ class ZulipLocalizationsRu extends ZulipLocalizations {
643643

644644
@override
645645
String get zulipAppTitle => 'Zulip';
646+
647+
@override
648+
String get emptyInboxMessage => 'There are no unread messages in your Inbox.\nCheck out the [combined feed] for recent messages.';
646649
}

‎lib/generated/l10n/zulip_localizations_sk.dart‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -643,4 +643,7 @@ class ZulipLocalizationsSk extends ZulipLocalizations {
643643

644644
@override
645645
String get zulipAppTitle => 'Zulip';
646+
647+
@override
648+
String get emptyInboxMessage => 'There are no unread messages in your Inbox.\nCheck out the [combined feed] for recent messages.';
646649
}

‎lib/widgets/inbox.dart‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import '../model/narrow.dart';
66
import '../model/recent_dm_conversations.dart';
77
import '../model/unreads.dart';
88
import 'action_sheet.dart';
9+
import 'color.dart';
910
import 'icons.dart';
1011
import 'message_list.dart';
1112
import 'sticky_header.dart';
@@ -160,6 +161,10 @@ class _InboxPageState extends State<InboxPageBody> with PerAccountStoreAwareStat
160161
sections.add(_StreamSectionData(streamId, countInStream, streamHasMention, topicItems));
161162
}
162163

164+
if (sections.isEmpty) {
165+
return const InboxEmptyWidget();
166+
}
167+
163168
return SafeArea(
164169
// Don't pad the bottom here; we want the list content to do that.
165170
bottom: false,
@@ -182,6 +187,92 @@ class _InboxPageState extends State<InboxPageBody> with PerAccountStoreAwareStat
182187
}
183188
}
184189

190+
class InboxEmptyWidget extends StatelessWidget {
191+
const InboxEmptyWidget({super.key});
192+
193+
// Splits a message containing text in square brackets into three parts.
194+
List<String> _splitMessage(String message) {
195+
final pattern = RegExp(r'(.*?)\[(.*?)\](.*)', dotAll: true);
196+
final match = pattern.firstMatch(message);
197+
198+
return match == null
199+
? [message, '', '']
200+
: [
201+
match.group(1) ?? '',
202+
match.group(2) ?? '',
203+
match.group(3) ?? '',
204+
];
205+
}
206+
207+
@override
208+
Widget build(BuildContext context) {
209+
final zulipLocalizations = ZulipLocalizations.of(context);
210+
final designVariables = DesignVariables.of(context);
211+
212+
final messageParts = _splitMessage(zulipLocalizations.emptyInboxMessage);
213+
214+
return Center(
215+
child: Padding(
216+
padding: const EdgeInsets.all(16),
217+
child: Column(
218+
mainAxisAlignment: MainAxisAlignment.start,
219+
children: [
220+
const SizedBox(height: 48),
221+
Icon(
222+
ZulipIcons.inbox_done,
223+
size: 80,
224+
color: designVariables.foreground.withFadedAlpha(0.3),
225+
),
226+
const SizedBox(height: 16),
227+
Text.rich(
228+
TextSpan(
229+
style: TextStyle(
230+
color: designVariables.labelSearchPrompt,
231+
fontSize: 17,
232+
fontWeight: FontWeight.w500,
233+
),
234+
children: [
235+
TextSpan(text: messageParts[0]),
236+
WidgetSpan(
237+
alignment: PlaceholderAlignment.baseline,
238+
baseline: TextBaseline.alphabetic,
239+
child: TextButton(
240+
style: TextButton.styleFrom(
241+
padding: EdgeInsets.zero,
242+
minimumSize: Size.zero,
243+
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
244+
splashFactory: NoSplash.splashFactory
245+
),
246+
onPressed: () => Navigator.push(context,
247+
MessageListPage.buildRoute(context: context,
248+
narrow: const CombinedFeedNarrow())),
249+
child: Text(
250+
messageParts[1],
251+
style: TextStyle(
252+
fontSize: 17,
253+
fontWeight: FontWeight.w500,
254+
color: designVariables.link,
255+
decoration: TextDecoration.underline,
256+
decorationStyle: TextDecorationStyle.solid,
257+
decorationThickness: 2.5,
258+
decorationColor: designVariables.link,
259+
height: 1.5,
260+
)
261+
),
262+
),
263+
),
264+
TextSpan(text: messageParts[2]),
265+
],
266+
),
267+
textAlign: TextAlign.center,
268+
),
269+
],
270+
),
271+
),
272+
);
273+
}
274+
}
275+
185276
sealed class _InboxSectionData {
186277
const _InboxSectionData();
187278
}

0 commit comments

Comments
 (0)