home: Add empty-state illustrations and org icon

Use null-aware element in placeholder children

Add leading and trailing support to empty content placeholder

Add workflow to fix iOS build files

Author: karanbhatt16

assets/images/dm-arrow.svg.vec

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:vector_graphics/vector_graphics.dart';
 
 import '../api/model/model.dart';
 import '../generated/l10n/zulip_localizations.dart';
@@ -192,6 +193,19 @@ class _InboxPageState extends State<InboxPageBody> with PerAccountStoreAwareStat
 
     if (items.isEmpty) {
       return PageBodyEmptyContentPlaceholder(
+        illustration: VectorGraphic(
+          loader: const AssetBytesLoader(
+            'assets/images/empty-inbox.svg.vec',
+          ),
+          width: 150,
+          height: 150,
+          colorFilter: ColorFilter.mode(
+            DesignVariables.of(context)
+                .labelSearchPrompt
+                .withValues(alpha: 0.8),
+            BlendMode.srcIn,
+          ),
+        ),
         // TODO(#315) add e.g. "You might be interested in recent conversations."
         header: zulipLocalizations.inboxEmptyPlaceholderHeader,
         message: zulipLocalizations.inboxEmptyPlaceholderMessage);

assets/images/empty-channel.svg.vec

@@ -252,22 +252,26 @@ class LoadingPlaceholderPage extends StatelessWidget {
 class PageBodyEmptyContentPlaceholder extends StatelessWidget {
   const PageBodyEmptyContentPlaceholder({
     super.key,
+    this.illustration,
     this.header,
     this.headerWithLinkMarkup,
     this.onTapHeaderLink,
     this.message,
     this.messageWithLinkMarkup,
     this.onTapMessageLink,
+    this.trailing,
   }) : assert(
          (header != null)
          ^ (headerWithLinkMarkup != null && onTapHeaderLink != null));
 
+  final Widget? illustration;
   final String? header;
   final String? headerWithLinkMarkup;
   final VoidCallback? onTapHeaderLink;
   final String? message;
   final String? messageWithLinkMarkup;
   final VoidCallback? onTapMessageLink;
+  final Widget? trailing;
 
   TextStyle _headerStyle(BuildContext context) {
     final designVariables = DesignVariables.of(context);
@@ -335,10 +339,18 @@ class PageBodyEmptyContentPlaceholder extends StatelessWidget {
             spacing: 16,
             crossAxisAlignment: CrossAxisAlignment.center,
             children: [
-              // TODO leading and trailing elements, like in Figma (given as SVGs):
-              //   https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=5957-167736&m=dev
+              ?illustration,
+              // TODO leading and trailing elements...
               header,
               ?message,
-            ]))));
+              ...[
+                const SizedBox(height: 8),
+                ?trailing,
+              ],
+            ]
+          ),
+        ),
+      ),
+    );
   }
 }

assets/images/empty-dm.svg.vec

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:vector_graphics/vector_graphics.dart';
 
 import '../generated/l10n/zulip_localizations.dart';
 import '../model/narrow.dart';
@@ -108,8 +109,35 @@ class _RecentDmConversationsPageBodyState extends State<RecentDmConversationsPag
       children: [
         if (sorted.isEmpty)
           PageBodyEmptyContentPlaceholder(
+            illustration: VectorGraphic(
+              loader: const AssetBytesLoader(
+                'assets/images/empty-dm.svg.vec',
+              ),
+              width: 150,
+              height: 150,
+              colorFilter: ColorFilter.mode(
+                DesignVariables.of(context)
+                    .labelSearchPrompt
+                    .withValues(alpha: 0.8),
+                BlendMode.srcIn,
+              ),
+            ),
             header: zulipLocalizations.recentDmConversationsEmptyPlaceholderHeader,
-            message: zulipLocalizations.recentDmConversationsEmptyPlaceholderMessage)
+            message: zulipLocalizations.recentDmConversationsEmptyPlaceholderMessage,
+            trailing: VectorGraphic(
+              loader: const AssetBytesLoader(
+                'assets/images/dm-arrow.svg.vec',
+              ),
+              width: 150,
+              height: 150,
+              colorFilter: ColorFilter.mode(
+                DesignVariables.of(context)
+                    .labelSearchPrompt
+                    .withValues(alpha: 0.8),
+                BlendMode.srcIn,
+              ),
+            ),
+          )
         else
           SafeArea(
             // Don't pad the bottom here; we want the list content to do that.

assets/images/empty-inbox.svg.vec

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:vector_graphics/vector_graphics.dart';
 
 import '../api/model/model.dart';
 import '../generated/l10n/zulip_localizations.dart';
@@ -137,6 +138,19 @@ class _SubscriptionListPageBodyState extends State<SubscriptionListPageBody> wit
     if (pinned.isEmpty && unpinned.isEmpty) {
       if (includeAllChannelsButton) {
         return PageBodyEmptyContentPlaceholder(
+          illustration: VectorGraphic(
+            loader: const AssetBytesLoader(
+              'assets/images/empty-channel.svg.vec',
+            ),
+            width: 150,
+            height: 150,
+            colorFilter: ColorFilter.mode(
+              DesignVariables.of(context)
+                  .labelSearchPrompt
+                  .withValues(alpha: 0.8),
+              BlendMode.srcIn,
+            ),
+          ),
           header: zulipLocalizations.channelsEmptyPlaceholderHeader,
           messageWithLinkMarkup:
             zulipLocalizations.channelsEmptyPlaceholderMessage(

lib/widgets/inbox.dart

@@ -1275,6 +1275,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "4.5.3"
+  vector_graphics:
+    dependency: "direct main"
+    description:
+      name: vector_graphics
+      sha256: "2306c03da2ba81724afeb589c351ebbc0aa7d86005925be8f8735856dbe5e42d"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.2.2"
+  vector_graphics_codec:
+    dependency: transitive
+    description:
+      name: vector_graphics_codec
+      sha256: "99fd9fbd34d9f9a32efd7b6a6aae14125d8237b10403b422a6a6dfeac2806146"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.13"
   vector_math:
     dependency: transitive
     description:

lib/widgets/page.dart

@@ -63,6 +63,7 @@ dependencies:
   unorm_dart: ^0.3.1+1
   url_launcher: ^6.1.11
   url_launcher_android: ">=6.1.0"
+  vector_graphics: 1.2.2
   video_player: ^2.10.0
   wakelock_plus: ^1.2.8
   zulip_plugin:
@@ -121,6 +122,7 @@ flutter:
   uses-material-design: true
 
   assets:
+    - assets/images/
     - assets/KaTeX/LICENSE
     - assets/Noto_Color_Emoji/LICENSE
     - assets/Pygments/AUTHORS.txt