inbox: Add "Inbox" page!

lib/api/model/events.dart

@@ -363,7 +363,9 @@ class SubscriptionUpdateEvent extends SubscriptionEvent {
     final value = json['value'];
     switch (SubscriptionProperty.fromRawString(json['property'] as String)) {
       case SubscriptionProperty.color:
-        return value as String;
+        final str = value as String;
+        assert(RegExp(r'^#[0-9a-f]{6}$').hasMatch(str));
+        return 0xff000000 | int.parse(str.substring(1), radix: 16);
       case SubscriptionProperty.isMuted:
       case SubscriptionProperty.inHomeView:
       case SubscriptionProperty.pinToTop:
@@ -397,7 +399,10 @@ class SubscriptionUpdateEvent extends SubscriptionEvent {
 /// Used in handling of [SubscriptionUpdateEvent].
 @JsonEnum(fieldRename: FieldRename.snake, alwaysCreate: true)
 enum SubscriptionProperty {
+  /// As an int that dart:ui's Color constructor will take:
+  ///   <https://api.flutter.dev/flutter/dart-ui/Color/Color.html>
   color,
+
   isMuted,
   inHomeView,
   pinToTop,

lib/api/model/model.dart

@@ -1,5 +1,9 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/painting.dart';
+import 'package:flutter_color_models/flutter_color_models.dart';
 import 'package:json_annotation/json_annotation.dart';
 
+import '../../widgets/color.dart';
 import 'reaction.dart';
 
 export 'reaction.dart';
@@ -325,7 +329,31 @@ class Subscription extends ZulipStream {
   bool isMuted;
   // final bool? inHomeView; // deprecated; ignore
 
-  String color;
+  /// As an int that dart:ui's Color constructor will take:
+  ///   <https://api.flutter.dev/flutter/dart-ui/Color/Color.html>
+  @JsonKey(readValue: _readColor)
+  int get color => _color;
+  int _color;
+  set color(int value) {
+    _color = value;
+    _swatch = null;
+  }
+  static Object? _readColor(Map json, String key) {
+    final str = (json[key] as String);
+    assert(RegExp(r'^#[0-9a-f]{6}$').hasMatch(str));
+    return 0xff000000 | int.parse(str.substring(1), radix: 16);
+  }
+
+  StreamColorSwatch? _swatch;
+  /// A [StreamColorSwatch] for the subscription, memoized.
+  // TODO I'm not sure this is the right home for this; it seems like we might
+  //   instead have chosen to put it in more UI-centered code, like in a custom
+  //   material [ColorScheme] class or something. But it works for now.
+  StreamColorSwatch colorSwatch() => _swatch ??= StreamColorSwatch(color);
+
+  @visibleForTesting
+  @JsonKey(includeToJson: false)
+  StreamColorSwatch? get debugCachedSwatchValue => _swatch;
 
   Subscription({
     required super.streamId,
@@ -348,8 +376,8 @@ class Subscription extends ZulipStream {
     required this.audibleNotifications,
     required this.pinToTop,
     required this.isMuted,
-    required this.color,
-  });
+    required int color,
+  }) : _color = color;
 
   factory Subscription.fromJson(Map<String, dynamic> json) =>
     _$SubscriptionFromJson(json);
@@ -358,6 +386,93 @@ class Subscription extends ZulipStream {
   Map<String, dynamic> toJson() => _$SubscriptionToJson(this);
 }
 
+/// A [ColorSwatch] with colors related to a base stream color.
+///
+/// Use this in UI code for colors related to [Subscription.color],
+/// such as the background of an unread count badge.
+class StreamColorSwatch extends ColorSwatch<_StreamColorVariant> {
+  StreamColorSwatch(int base) : super(base, _compute(base));
+
+  Color get base => this[_StreamColorVariant.base]!;
+
+  Color get unreadCountBadgeBackground => this[_StreamColorVariant.unreadCountBadgeBackground]!;
+
+  /// The stream icon on a plain-colored surface, such as white.
+  ///
+  /// For the icon on a [barBackground]-colored surface,
+  /// use [iconOnBarBackground] instead.
+  Color get iconOnPlainBackground => this[_StreamColorVariant.iconOnPlainBackground]!;
+
+  /// The stream icon on a [barBackground]-colored surface.
+  ///
+  /// For the icon on a plain surface, use [iconOnPlainBackground] instead.
+  /// This color is chosen to enhance contrast with [barBackground]:
+  ///   <https://github.com/zulip/zulip/pull/27485>
+  Color get iconOnBarBackground => this[_StreamColorVariant.iconOnBarBackground]!;
+
+  /// The background color of a bar representing a stream, like a recipient bar.
+  ///
+  /// Use this in the message list, the "Inbox" view, and the "Streams" view.
+  Color get barBackground => this[_StreamColorVariant.barBackground]!;
+
+  static Map<_StreamColorVariant, Color> _compute(int base) {
+    final baseAsColor = Color(base);
+
+    final clamped20to75 = clampLchLightness(baseAsColor, 20, 75);
+    final clamped20to75AsHsl = HSLColor.fromColor(clamped20to75);
+
+    return {
+      _StreamColorVariant.base: baseAsColor,
+
+      // Follows `.unread-count` in Vlad's replit:
+      //   <https://replit.com/@VladKorobov/zulip-sidebar#script.js>
+      //   <https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/design.3A.20.23F117.20.22Inbox.22.20screen/near/1624484>
+      //
+      // TODO fix bug where our results differ from the replit's (see unit tests)
+      _StreamColorVariant.unreadCountBadgeBackground:
+        clampLchLightness(baseAsColor, 30, 70)
+          .withOpacity(0.3),
+
+      // Follows `.sidebar-row__icon` in Vlad's replit:
+      //   <https://replit.com/@VladKorobov/zulip-topic-feed-colors#script.js>
+      //
+      // TODO fix bug where our results differ from the replit's (see unit tests)
+      _StreamColorVariant.iconOnPlainBackground: clamped20to75,
+
+      // Follows `.recepeient__icon` in Vlad's replit:
+      //   <https://replit.com/@VladKorobov/zulip-topic-feed-colors#script.js>
+      //   <https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/design.3A.20.23F117.20.22Inbox.22.20screen/near/1624484>
+      //
+      // TODO fix bug where our results differ from the replit's (see unit tests)
+      _StreamColorVariant.iconOnBarBackground:
+        clamped20to75AsHsl
+          .withLightness(clamped20to75AsHsl.lightness - 0.12)
+          .toColor(),
+
+      // Follows `.recepient` in Vlad's replit:
+      //   <https://replit.com/@VladKorobov/zulip-topic-feed-colors#script.js>
+      //
+      // TODO I think [LabColor.interpolate] doesn't actually do LAB mixing;
+      //   it just calls up to the superclass method [ColorModel.interpolate]:
+      //     <https://pub.dev/documentation/flutter_color_models/latest/flutter_color_models/ColorModel/interpolate.html>
+      //   which does ordinary RGB mixing. Investigate and send a PR?
+      // TODO fix bug where our results differ from the replit's (see unit tests)
+      _StreamColorVariant.barBackground:
+        LabColor.fromColor(const Color(0xfff9f9f9))
+          .interpolate(LabColor.fromColor(clamped20to75), 0.22)
+          .toColor(),
+    };
+  }
+}
+
+enum _StreamColorVariant {
+  base,
+  unreadCountBadgeBackground,
+  iconOnPlainBackground,
+  iconOnBarBackground,
+  barBackground,
+}
+
 /// As in the get-messages response.
 ///
 /// https://zulip.com/api/get-messages#response

lib/model/store.dart

@@ -323,7 +323,7 @@ class PerAccountStore extends ChangeNotifier {
       if (subscription == null) return; // TODO(log)
       switch (event.property) {
         case SubscriptionProperty.color:
-          subscription.color                  = event.value as String;
+          subscription.color                  = event.value as int;
         case SubscriptionProperty.isMuted:
           subscription.isMuted                = event.value as bool;
         case SubscriptionProperty.inHomeView:

lib/model/unreads.dart

@@ -81,10 +81,10 @@ class Unreads extends ChangeNotifier {
   // TODO excluded for now; would need to handle nuances around muting etc.
   // int count;
 
-  /// Unread stream messages, as: stream ID → topic → message ID.
+  /// Unread stream messages, as: stream ID → topic → message IDs (sorted).
   final Map<int, Map<String, QueueList<int>>> streams;
 
-  /// Unread DM messages, as: DM narrow → message ID.
+  /// Unread DM messages, as: DM narrow → message IDs (sorted).
   final Map<DmNarrow, QueueList<int>> dms;
 
   /// Unread messages with the self-user @-mentioned, directly or by wildcard.

lib/widgets/app.dart

@@ -8,6 +8,7 @@ import 'package:flutter_gen/gen_l10n/zulip_localizations.dart';
 import '../model/localizations.dart';
 import '../model/narrow.dart';
 import 'about_zulip.dart';
+import 'inbox.dart';
 import 'login.dart';
 import 'message_list.dart';
 import 'page.dart';
@@ -254,6 +255,11 @@ class HomePage extends StatelessWidget {
                 narrow: const AllMessagesNarrow())),
             child: const Text("All messages")),
           const SizedBox(height: 16),
+          ElevatedButton(
+            onPressed: () => Navigator.push(context,
+              InboxPage.buildRoute(context: context)),
+            child: const Text("Inbox")), // TODO(i18n)
+          const SizedBox(height: 16),
           ElevatedButton(
             onPressed: () => Navigator.push(context,
               RecentDmConversationsPage.buildRoute(context: context)),

lib/widgets/color.dart

@@ -0,0 +1,18 @@
+import 'dart:ui';
+
+import 'package:flutter_color_models/flutter_color_models.dart';
+
+// This function promises to deal with "LCH" lightness, not "LAB" lightness,
+// but it's not yet true. We haven't found a Dart libary that can work with LCH:
+//   <https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/design.3A.20.23F117.20.22Inbox.22.20screen/near/1677537>
+// We use LAB because some quick reading suggests that the "L" axis
+// is the same in both representations:
+//   <https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lch>
+//
+// TODO try LCH; see linked discussion
+Color clampLchLightness(Color color, num lowerLimit, num upperLimit) {
+  final asLab = LabColor.fromColor(color);
+  return asLab
+    .copyWith(lightness: asLab.lightness.clamp(lowerLimit, upperLimit))
+    .toColor();
+}

lib/widgets/icons.dart

@@ -22,38 +22,44 @@ abstract final class ZulipIcons {
   //
   // BEGIN GENERATED ICON DATA
 
+  /// The Zulip custom icon "arrow_down".
+  static const IconData arrow_down = IconData(0xf101, fontFamily: "Zulip Icons");
+
+  /// The Zulip custom icon "arrow_right".
+  static const IconData arrow_right = IconData(0xf102, fontFamily: "Zulip Icons");
+
   /// The Zulip custom icon "bot".
-  static const IconData bot = IconData(0xf101, fontFamily: "Zulip Icons");
+  static const IconData bot = IconData(0xf103, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "globe".
-  static const IconData globe = IconData(0xf102, fontFamily: "Zulip Icons");
+  static const IconData globe = IconData(0xf104, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "group_dm".
-  static const IconData group_dm = IconData(0xf103, fontFamily: "Zulip Icons");
+  static const IconData group_dm = IconData(0xf105, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "hash_sign".
-  static const IconData hash_sign = IconData(0xf104, fontFamily: "Zulip Icons");
+  static const IconData hash_sign = IconData(0xf106, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "language".
-  static const IconData language = IconData(0xf105, fontFamily: "Zulip Icons");
+  static const IconData language = IconData(0xf107, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "lock".
-  static const IconData lock = IconData(0xf106, fontFamily: "Zulip Icons");
+  static const IconData lock = IconData(0xf108, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "mute".
-  static const IconData mute = IconData(0xf107, fontFamily: "Zulip Icons");
+  static const IconData mute = IconData(0xf109, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "read_receipts".
-  static const IconData read_receipts = IconData(0xf108, fontFamily: "Zulip Icons");
+  static const IconData read_receipts = IconData(0xf10a, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "topic".
-  static const IconData topic = IconData(0xf109, fontFamily: "Zulip Icons");
+  static const IconData topic = IconData(0xf10b, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "unmute".
-  static const IconData unmute = IconData(0xf10a, fontFamily: "Zulip Icons");
+  static const IconData unmute = IconData(0xf10c, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "user".
-  static const IconData user = IconData(0xf10b, fontFamily: "Zulip Icons");
+  static const IconData user = IconData(0xf10d, fontFamily: "Zulip Icons");
 
   // END GENERATED ICON DATA
 }