poll: Support read-only poll widget UI.

The UI is temporary until we get an actual design.

Fixes #165.

Signed-off-by: Zixuan James Li <[email protected]>

Author: PIG208

assets/l10n/app_en.arb

@@ -483,5 +483,24 @@
   "notifSelfUser": "You",
   "@notifSelfUser": {
     "description": "Display name for the user themself, to show after replying in an Android notification"
+  },
+  "pollWidgetQuestionMissing": "Untitled Poll",
+  "@pollWidgetQuestionMissing": {
+    "description": "Text to display for a poll when the question is missing"
+  },
+  "pollWidgetOptionsMissing": "Empty poll",
+  "@pollWidgetOptionsMissing": {
+    "description": "Text to display for a poll when it has no options"
+  },
+  "pollWidgetVoteCountZero": "no votes",
+  "@pollWidgetVoteCountZero": {
+    "description": "Label when the number of votes on a poll option is zero"
+  },
+  "pollWidgetVoteCount": "{numVotes, plural, =1{1 vote} other{{numVotes} votes}}",
+  "@pollWidgetVoteCount": {
+    "description": "Label for the number of votes on a poll option",
+    "placeholders": {
+      "numVotes": {"type": "int", "example": "3"}
+    }
   }
 }

lib/api/model/widget.dart

@@ -1,3 +1,4 @@
+import '../../model/store.dart';
 import 'submessage.dart';
 
 /// States of a poll Zulip widget.
@@ -88,6 +89,9 @@ class Option {
   final String text;
   final Set<int> voters = {};
 
+  Iterable<String> getVoterNames(PerAccountStore store) =>
+    voters.map((userId) => store.users[userId]?.fullName).whereType<String>();
+
   @override
   bool operator ==(Object other) {
     if (other is! Option) return false;

lib/model/content.dart

@@ -72,13 +72,17 @@ mixin UnimplementedNode on ContentNode {
   }
 }
 
+sealed class ZulipMessageContent {}
+
+class PollContent implements ZulipMessageContent {}
+
 /// A complete parse tree for a Zulip message's content,
 /// or other complete piece of Zulip HTML content.
 ///
 /// This is a parsed representation for an entire value of [Message.content],
 /// [Stream.renderedDescription], or other text from a Zulip server that comes
 /// in the same Zulip HTML format.
-class ZulipContent extends ContentNode {
+class ZulipContent extends ContentNode implements ZulipMessageContent {
   const ZulipContent({super.debugHtmlNode, required this.nodes});
 
   final List<BlockContentNode> nodes;

lib/model/message_list.dart

@@ -34,7 +34,7 @@ class MessageListDateSeparatorItem extends MessageListItem {
 /// A message to show in the message list.
 class MessageListMessageItem extends MessageListItem {
   final Message message;
-  ZulipContent content;
+  ZulipMessageContent content;
   bool showSender;
   bool isLastInBlock;
 
@@ -94,7 +94,7 @@ mixin _MessageSequence {
   ///
   /// This information is completely derived from [messages].
   /// It exists as an optimization, to memoize the work of parsing.
-  final List<ZulipContent> contents = [];
+  final List<ZulipMessageContent> contents = [];
 
   /// The messages and their siblings in the UI, in order.
   ///
@@ -130,10 +130,18 @@ mixin _MessageSequence {
     }
   }
 
+  ZulipMessageContent _parseMessage(Message message) {
+    if (message.poll != null) {
+      return PollContent();
+    } else {
+      return parseContent(message.content);
+    }
+  }
+
   /// Update data derived from the content of the index-th message.
   void _reparseContent(int index) {
     final message = messages[index];
-    final content = parseContent(message.content);
+    final content = _parseMessage(message);
     contents[index] = content;
 
     final itemIndex = findItemWithMessageId(message.id);
@@ -150,7 +158,7 @@ mixin _MessageSequence {
   void _addMessage(Message message) {
     assert(contents.length == messages.length);
     messages.add(message);
-    contents.add(parseContent(message.content));
+    contents.add(_parseMessage(message));
     assert(contents.length == messages.length);
     _processMessage(messages.length - 1);
   }
@@ -161,7 +169,7 @@ mixin _MessageSequence {
   /// If none of [messageIds] are found, this is a no-op.
   bool _removeMessagesById(Iterable<int> messageIds) {
     final messagesToRemoveById = <int>{};
-    final contentToRemove = Set<ZulipContent>.identity();
+    final contentToRemove = Set<ZulipMessageContent>.identity();
     for (final messageId in messageIds) {
       final index = _findMessageWithId(messageId);
       if (index == -1) continue;
@@ -187,7 +195,7 @@ mixin _MessageSequence {
     assert(contents.length == messages.length);
     messages.insertAll(index, toInsert);
     contents.insertAll(index, toInsert.map(
-      (message) => parseContent(message.content)));
+      (message) => _parseMessage(message)));
     assert(contents.length == messages.length);
     _reprocessAll();
   }
@@ -196,7 +204,7 @@ mixin _MessageSequence {
   void _recompute() {
     assert(contents.length == messages.length);
     contents.clear();
-    contents.addAll(messages.map((message) => parseContent(message.content)));
+    contents.addAll(messages.map((message) => _parseMessage(message)));
     assert(contents.length == messages.length);
     _reprocessAll();
   }

lib/widgets/content.dart

@@ -18,6 +18,7 @@ import 'dialog.dart';
 import 'icons.dart';
 import 'lightbox.dart';
 import 'message_list.dart';
+import 'poll.dart';
 import 'store.dart';
 import 'text.dart';
 
@@ -222,17 +223,20 @@ const double kBaseFontSize = 17;
 /// This does not include metadata like the sender's name and avatar, the time,
 /// or the message's status as starred or edited.
 class MessageContent extends StatelessWidget {
-  const MessageContent({super.key, required this.message, required this.content});
+  const MessageContent({super.key, required this.message, required ZulipMessageContent content}) : _content = content;
 
   final Message message;
-  final ZulipContent content;
+  final ZulipMessageContent _content;
 
   @override
   Widget build(BuildContext context) {
     return InheritedMessage(message: message,
       child: DefaultTextStyle(
         style: ContentTheme.of(context).textStylePlainParagraph,
-        child: BlockContentList(nodes: content.nodes)));
+        child: switch(_content) {
+          ZulipContent() => BlockContentList(nodes: _content.nodes),
+          PollContent() => PollWidget(poll: message.poll!),
+        }));
   }
 }
 

lib/widgets/poll.dart

@@ -0,0 +1,85 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/zulip_localizations.dart';
+
+import '../api/model/widget.dart';
+import 'content.dart';
+import 'store.dart';
+import 'text.dart';
+
+class PollWidget extends StatelessWidget {
+  const PollWidget({super.key, required this.poll});
+
+  final Poll poll;
+
+  @override
+  Widget build(BuildContext context) {
+    final zulipLocalizations = ZulipLocalizations.of(context);
+    final store = PerAccountStoreWidget.of(context);
+
+    final optionTiles = [
+      for (final option in poll.options)
+        ListTile(
+          titleAlignment: ListTileTitleAlignment.top,
+          enabled: false,
+          leading: Checkbox(
+            value: option.voters.contains(store.selfUserId),
+            onChanged: (bool? value) {},
+          ),
+          contentPadding: EdgeInsets.zero,
+          title: Row(children: [
+            Flexible(
+              fit: FlexFit.tight,
+              child: Text(option.text,
+                textAlign: TextAlign.start,
+                overflow: TextOverflow.ellipsis,
+                style: const TextStyle(fontSize: 17)),
+            ),
+            Text(
+              (option.voters.isEmpty)
+                ? zulipLocalizations.pollWidgetVoteCountZero
+                : zulipLocalizations.pollWidgetVoteCount(option.voters.length),
+              textAlign: TextAlign.end)
+          ]),
+          subtitle: Wrap(
+            alignment: WrapAlignment.end,
+            spacing: -5,
+            children: [
+              for (final voterId in option.voters.take(20))
+                Avatar(size: 17, borderRadius: 17, userId: voterId),
+          ]),
+        )
+    ];
+
+    final effectiveQuestion = (poll.question.isNotEmpty)
+      ? poll.question
+      : zulipLocalizations.pollWidgetQuestionMissing;
+
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(0, 15, 0, 15),
+      child: DecoratedBox(
+        decoration: BoxDecoration(
+          // Web has the same color in light and dark mode.
+          border: Border.all(color: const Color(0xff808080)),
+          borderRadius: BorderRadius.circular(10),
+        ),
+        child: Padding(padding: const EdgeInsetsDirectional.fromSTEB(10, 2, 8, 2),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Padding(
+                padding: const EdgeInsets.all(5.0),
+                child: DefaultTextStyle.merge(
+                  style: weightVariableTextStyle(context, wght: 700),
+                  child: Text(effectiveQuestion, textAlign: TextAlign.start)),
+              ),
+              const Divider(color: Color(0xff808080), height: 1),
+              if (optionTiles.isEmpty)
+                Padding(
+                  padding: const EdgeInsets.all(5.0),
+                  child: Text(zulipLocalizations.pollWidgetOptionsMissing),
+                ),
+              ...ListTile.divideTiles(context: context, tiles: optionTiles),
+            ],
+          ))));
+  }
+}

test/model/message_list_test.dart

@@ -584,12 +584,12 @@ void main() {
     model.contents[0] = const ZulipContent(nodes: [
       ParagraphNode(links: null, nodes: [TextNode('something outdated')])
     ]);
-    check(model.contents[0]).not((it) => it.equalsNode(correctContent));
+    check(model.contents[0]).isA<ZulipContent>().not((it) => it.equalsNode(correctContent));
 
     model.reassemble();
     checkNotifiedOnce();
     check(model).messages.length.equals(31);
-    check(model.contents[0]).equalsNode(correctContent);
+    check(model.contents[0]).isA<ZulipContent>().equalsNode(correctContent);
   });
 
   group('stream/topic muting', () {
@@ -987,7 +987,7 @@ void checkInvariants(MessageListView model) {
 
   check(model).contents.length.equals(model.messages.length);
   for (int i = 0; i < model.contents.length; i++) {
-    check(model.contents[i])
+    check(model.contents[i]).isA<ZulipContent>()
       .equalsNode(parseContent(model.messages[i].content));
   }
 
@@ -1012,7 +1012,7 @@ void checkInvariants(MessageListView model) {
     }
     check(model.items[i++]).isA<MessageListMessageItem>()
       ..message.identicalTo(model.messages[j])
-      ..content.identicalTo(model.contents[j])
+      ..content.identicalTo(model.contents[j] as ZulipContent)
       ..showSender.equals(
         forcedShowSender || model.messages[j].senderId != model.messages[j-1].senderId)
       ..isLastInBlock.equals(
@@ -1037,7 +1037,7 @@ extension MessageListDateSeparatorItemChecks on Subject<MessageListDateSeparator
 
 extension MessageListMessageItemChecks on Subject<MessageListMessageItem> {
   Subject<Message> get message => has((x) => x.message, 'message');
-  Subject<ZulipContent> get content => has((x) => x.content, 'content');
+  Subject<ZulipMessageContent> get content => has((x) => x.content, 'content');
   Subject<bool> get showSender => has((x) => x.showSender, 'showSender');
   Subject<bool> get isLastInBlock => has((x) => x.isLastInBlock, 'isLastInBlock');
 }
@@ -1046,7 +1046,7 @@ extension MessageListViewChecks on Subject<MessageListView> {
   Subject<PerAccountStore> get store => has((x) => x.store, 'store');
   Subject<Narrow> get narrow => has((x) => x.narrow, 'narrow');
   Subject<List<Message>> get messages => has((x) => x.messages, 'messages');
-  Subject<List<ZulipContent>> get contents => has((x) => x.contents, 'contents');
+  Subject<List<ZulipMessageContent>> get contents => has((x) => x.contents, 'contents');
   Subject<List<MessageListItem>> get items => has((x) => x.items, 'items');
   Subject<bool> get fetched => has((x) => x.fetched, 'fetched');
   Subject<bool> get haveOldest => has((x) => x.haveOldest, 'haveOldest');