new-dm: Support unselecting a user by tapping chip in input

This isn't specifically mentioned in the Figma, but I think it's
really helpful. Without this, the only way to deselect a user is to
find them again in the list of results. That could be annoying
because the user will often go offscreen in the results list as soon
as you tap it, because we reset the query and scroll state when you
tap it.

Discussion about adding an "x" to the chip, to make this behavior
more visible:
  https://chat.zulip.org/#narrow/channel/516-mobile-dev-help/topic/Follow.20up.20on.20comments.20.20on.20new.20Dm.20Sheet/near/2185229

Author: chrisbobbe

lib/widgets/new_dm_sheet.dart

@@ -133,7 +133,8 @@ class _NewDmPickerState extends State<NewDmPicker> with PerAccountStoreAwareStat
       _NewDmHeader(selectedUserIds: selectedUserIds),
       _NewDmSearchBar(
         controller: searchController,
-        selectedUserIds: selectedUserIds),
+        selectedUserIds: selectedUserIds,
+        unselectUser: _unselectUser),
       Expanded(
         child: _NewDmUserList(
           filteredUsers: filteredUsers,
@@ -215,10 +216,12 @@ class _NewDmSearchBar extends StatelessWidget {
   const _NewDmSearchBar({
     required this.controller,
     required this.selectedUserIds,
+    required this.unselectUser,
   });
 
   final TextEditingController controller;
   final Set<int> selectedUserIds;
+  final void Function(int) unselectUser;
 
   // void _removeUser
 
@@ -266,7 +269,7 @@ class _NewDmSearchBar extends StatelessWidget {
             crossAxisAlignment: WrapCrossAlignment.center,
             children: [
               for (final userId in selectedUserIds)
-                _SelectedUserChip(userId: userId),
+                _SelectedUserChip(userId: userId, unselectUser: unselectUser),
               // The IntrinsicWidth lets the text field participate in the Wrap
               // when its content fits on the same line with a user chip,
               // by preventing it from expanding to fill the available width.  See:
@@ -277,9 +280,13 @@ class _NewDmSearchBar extends StatelessWidget {
 }
 
 class _SelectedUserChip extends StatelessWidget {
-  const _SelectedUserChip({required this.userId});
+  const _SelectedUserChip({
+    required this.userId,
+    required this.unselectUser,
+  });
 
   final int userId;
+  final void Function(int) unselectUser;
 
   @override
   Widget build(BuildContext context) {
@@ -288,24 +295,26 @@ class _SelectedUserChip extends StatelessWidget {
     final clampedTextScaler = MediaQuery.textScalerOf(context)
       .clamp(maxScaleFactor: 1.5);
 
-    return DecoratedBox(
-      decoration: BoxDecoration(
-        color: designVariables.bgMenuButtonSelected,
-        borderRadius: BorderRadius.circular(3)),
-      child: Row(mainAxisSize: MainAxisSize.min, children: [
-        Avatar(userId: userId, size: clampedTextScaler.scale(22), borderRadius: 3),
-        Flexible(
-          child: Padding(
-            padding: const EdgeInsetsDirectional.fromSTEB(5, 3, 4, 3),
-            child: Text(store.userDisplayName(userId),
-              textScaler: clampedTextScaler,
-              maxLines: 1,
-              overflow: TextOverflow.ellipsis,
-              style: TextStyle(
-                fontSize: 16,
-                height: 16 / 16,
-                color: designVariables.labelMenuButton)))),
-      ]));
+    return GestureDetector(
+      onTap: () => unselectUser(userId),
+      child: DecoratedBox(
+        decoration: BoxDecoration(
+          color: designVariables.bgMenuButtonSelected,
+          borderRadius: BorderRadius.circular(3)),
+        child: Row(mainAxisSize: MainAxisSize.min, children: [
+          Avatar(userId: userId, size: clampedTextScaler.scale(22), borderRadius: 3),
+          Flexible(
+            child: Padding(
+              padding: const EdgeInsetsDirectional.fromSTEB(5, 3, 4, 3),
+              child: Text(store.userDisplayName(userId),
+                textScaler: clampedTextScaler,
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+                style: TextStyle(
+                  fontSize: 16,
+                  height: 16 / 16,
+                  color: designVariables.labelMenuButton)))),
+        ])));
   }
 }
 

test/widgets/new_dm_sheet_test.dart

@@ -63,12 +63,15 @@ void main() {
   Finder findUserTile(User user) =>
     find.widgetWithText(InkWell, user.fullName).first;
 
-  Finder findUserChip(User user) =>
-    find.byWidgetPredicate((widget) =>
+  Finder findUserChip(User user) {
+    final findAvatar = find.byWidgetPredicate((widget) =>
       widget is Avatar
       && widget.userId == user.userId
       && widget.size == 22);
 
+    return find.ancestor(of: findAvatar, matching: find.byType(GestureDetector));
+  }
+
   testWidgets('shows header with correct buttons', (tester) async {
     await setupSheet(tester, users: []);
 
@@ -201,6 +204,18 @@ void main() {
       }
     }
 
+
+    testWidgets('tapping user chip deselects the user', (tester) async {
+      await setupSheet(tester, users: [eg.selfUser, eg.otherUser, eg.thirdUser]);
+
+      await tester.tap(findUserTile(eg.otherUser));
+      await tester.pump();
+      checkUserSelected(tester, eg.otherUser, true);
+      await tester.tap(findUserChip(eg.otherUser));
+      await tester.pump();
+      checkUserSelected(tester, eg.otherUser, false);
+    });
+
     testWidgets('selecting and deselecting a user', (tester) async {
       final user = eg.user(fullName: 'Test User');
       await setupSheet(tester, users: [eg.selfUser, user]);