subscription_list: Add new SubscriptionListPage

Fixes: zulip#187

lib/widgets/app.dart

@@ -14,6 +14,7 @@ import 'message_list.dart';
 import 'page.dart';
 import 'recent_dm_conversations.dart';
 import 'store.dart';
+import 'subscription_list.dart';
 
 class ZulipApp extends StatelessWidget {
   const ZulipApp({super.key, this.navigatorObservers});
@@ -260,6 +261,11 @@ class HomePage extends StatelessWidget {
               InboxPage.buildRoute(context: context)),
             child: const Text("Inbox")), // TODO(i18n)
           const SizedBox(height: 16),
+          ElevatedButton(
+            onPressed: () => Navigator.push(context,
+              SubscriptionListPage.buildRoute(context: context)),
+            child: const Text("Subscribed streams")),
+          const SizedBox(height: 16),
           ElevatedButton(
             onPressed: () => Navigator.push(context,
               RecentDmConversationsPage.buildRoute(context: context)),

lib/widgets/subscription_list.dart

@@ -0,0 +1,239 @@
+
+import 'package:collection/collection.dart';
+import 'package:flutter/material.dart';
+
+import '../api/model/model.dart';
+import '../model/narrow.dart';
+import '../model/unreads.dart';
+import 'icons.dart';
+import 'message_list.dart';
+import 'page.dart';
+import 'store.dart';
+import 'text.dart';
+import 'unread_count_badge.dart';
+
+/// Scrollable listing of subscribed streams.
+class SubscriptionListPage extends StatefulWidget {
+  const SubscriptionListPage({super.key});
+
+  static Route<void> buildRoute({required BuildContext context}) {
+    return MaterialAccountWidgetRoute(context: context,
+      page: const SubscriptionListPage());
+  }
+
+  @override
+  State<SubscriptionListPage> createState() => _SubscriptionListPageState();
+}
+
+class _SubscriptionListPageState extends State<SubscriptionListPage> with PerAccountStoreAwareStateMixin<SubscriptionListPage> {
+  Map<int, Subscription>? subscriptions;
+  Unreads? unreadsModel;
+
+  @override
+  void onNewStore() {
+    final store = PerAccountStoreWidget.of(context);
+    subscriptions = store.subscriptions;
+
+    unreadsModel?.removeListener(_modelChanged);
+    unreadsModel = store.unreads
+      ..addListener(_modelChanged);
+  }
+
+  @override
+  void dispose() {
+    unreadsModel?.removeListener(_modelChanged);
+    super.dispose();
+  }
+
+  void _modelChanged() {
+    setState(() {
+      // The actual state lives in [subscriptions] and [unreadsModel].
+      // This method was called because one of those just changed.
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    // Design referenced from:
+    //   https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?type=design&node-id=171-12359&mode=design&t=4d0vykoYQ0KGpFuu-0
+
+    // This is an initial version with "Pinned" and "Unpinned"
+    // sections following behavior in mobile. Recalculating
+    // groups and sorting on every `build` here: it performs well
+    // enough and not worth optimizing as it will be replaced
+    // with a different behavior:
+    // TODO: Implement new grouping behavior and design, see discussion at:
+    //   https://chat.zulip.org/#narrow/stream/101-design/topic/UI.20redesign.3A.20left.20sidebar/near/1540147
+
+    // TODO: Implement collapsible topics
+
+    // TODO(i18n): localize strings on page
+    //   Strings here left unlocalized as they likely will not
+    //   exist in the settled design.
+    final List<Subscription> pinned = [];
+    final List<Subscription> unpinned = [];
+    for (final subscription in subscriptions!.values) {
+      if (subscription.pinToTop) {
+        pinned.add(subscription);
+      } else {
+        unpinned.add(subscription);
+      }
+    }
+    // TODO(i18n): add locale-aware sorting
+    pinned.sortBy((subscription) => subscription.name);
+    unpinned.sortBy((subscription) => subscription.name);
+
+    return Scaffold(
+      appBar: AppBar(title: const Text("Streams")),
+      body: Builder(
+        builder: (BuildContext context) => Center(
+          child: CustomScrollView(
+            slivers: [
+              if (pinned.isEmpty && unpinned.isEmpty)
+                const _NoSubscriptionsItem(),
+              if (pinned.isNotEmpty) ...[
+                _SubscriptionListHeader(context: context, label: "Pinned"),
+                _SubscriptionList(unreadsModel: unreadsModel, subscriptions: pinned),
+              ],
+              if (unpinned.isNotEmpty) ...[
+                _SubscriptionListHeader(context: context, label: "Unpinned"),
+                _SubscriptionList(unreadsModel: unreadsModel, subscriptions: unpinned),
+              ],
+
+              // TODO(#188): add button to "All Streams" page with ability to subscribe
+
+              // This ensures last item in scrollable can settle in an unobstructed area.
+              const SliverSafeArea(sliver: SliverToBoxAdapter(child: SizedBox.shrink())),
+            ]))));
+  }
+}
+
+class _NoSubscriptionsItem extends StatelessWidget {
+  const _NoSubscriptionsItem();
+
+  @override
+  Widget build(BuildContext context) {
+    return SliverToBoxAdapter(
+      child: Padding(
+        padding: const EdgeInsets.all(10),
+        child: Text("No streams found",
+          textAlign: TextAlign.center,
+          style: TextStyle(
+          color: const HSLColor.fromAHSL(1.0, 240, 0.1, 0.5).toColor(),
+          fontFamily: 'Source Sans 3',
+          fontSize: 18,
+          height: (20 / 18),
+        ).merge(weightVariableTextStyle(context)))));
+  }
+}
+
+class _SubscriptionListHeader extends StatelessWidget {
+  const _SubscriptionListHeader({
+    required this.context,
+    required this.label,
+  });
+
+  final BuildContext context;
+  final String label;
+
+  @override
+  Widget build(BuildContext context) {
+    return SliverToBoxAdapter(
+      child: ColoredBox(
+        color: Colors.white,
+        child: SizedBox(
+          height: 30,
+          child: Row(
+            children: [
+              const SizedBox(width: 16),
+              Expanded(child: Divider(
+                color: const HSLColor.fromAHSL(0.2, 240, 0.1, 0.5).toColor())),
+              const SizedBox(width: 8),
+              Text(label,
+                textAlign: TextAlign.center,
+                style: TextStyle(
+                  color: const HSLColor.fromAHSL(1.0, 240, 0.1, 0.5).toColor(),
+                  fontFamily: 'Source Sans 3',
+                  fontSize: 14,
+                  letterSpacing: 0.56,
+                  height: (16 / 14),
+                ).merge(weightVariableTextStyle(context))),
+              const SizedBox(width: 8),
+              Expanded(child: Divider(
+                color: const HSLColor.fromAHSL(0.2, 240, 0.1, 0.5).toColor())),
+              const SizedBox(width: 16),
+            ]))));
+  }
+}
+
+class _SubscriptionList extends StatelessWidget {
+  const _SubscriptionList({
+    required this.unreadsModel,
+    required this.subscriptions,
+  });
+
+  final Unreads? unreadsModel;
+  final List<Subscription> subscriptions;
+
+  @override
+  Widget build(BuildContext context) {
+    return SliverList.builder(
+      itemCount: subscriptions.length,
+      itemBuilder: (BuildContext context, int index) {
+        final subscription = subscriptions[index];
+        final unreadCount = unreadsModel!.countInStreamNarrow(subscription.streamId);
+        return SubscriptionItem(subscription: subscription, unreadCount: unreadCount);
+    });
+  }
+}
+
+@visibleForTesting
+class SubscriptionItem extends StatelessWidget {
+  const SubscriptionItem({
+    super.key,
+    required this.subscription,
+    required this.unreadCount,
+  });
+
+  final Subscription subscription;
+  final int unreadCount;
+
+  @override
+  Widget build(BuildContext context) {
+    final swatch = subscription.colorSwatch();
+    final hasUnreads = (unreadCount > 0);
+    return Material(
+      color: Colors.white,
+      child: InkWell(
+        onTap: () {
+          Navigator.push(context,
+            MessageListPage.buildRoute(context: context, narrow: StreamNarrow(subscription.streamId)));
+        },
+        child: SizedBox(height: 40,
+          child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
+            const SizedBox(width: 16),
+            Icon(size: 18, color: swatch.iconOnPlainBackground,
+              iconDataFromStream(subscription)),
+            const SizedBox(width: 5),
+            Expanded(
+              child: Text(
+                style: const TextStyle(
+                  fontFamily: 'Source Sans 3',
+                  fontSize: 18,
+                  height: (20 / 18),
+                  color: Color(0xFF262626),
+                ).merge(hasUnreads
+                  ? weightVariableTextStyle(context, wght: 600, wghtIfPlatformRequestsBold: 900)
+                  : weightVariableTextStyle(context)),
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+                subscription.name)),
+            if (unreadCount > 0) ...[
+              const SizedBox(width: 12),
+              // TODO(#384) show @-mention indicator when it applies
+              UnreadCountBadge(count: unreadCount, backgroundColor: swatch, bold: true),
+            ],
+            const SizedBox(width: 16),
+          ]))));
+  }
+}