Implemented ability to quickly add a user to a group

ts/components/conversationList/BaseConversationListItem.tsx

@@ -51,6 +51,7 @@ type PropsType = {
   onClick?: () => void;
   shouldShowSpinner?: boolean;
   unreadCount?: number;
+  avatarSize?: AvatarSize;
 } & Pick<
   ConversationType,
   | 'acceptedMessageRequest'
@@ -75,6 +76,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> =
     const {
       acceptedMessageRequest,
       avatarPath,
+      avatarSize,
       checked,
       color,
       conversationType,
@@ -168,7 +170,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> =
             profileName={profileName}
             title={title}
             sharedGroupNames={sharedGroupNames}
-            size={AvatarSize.FORTY_EIGHT}
+            size={avatarSize ?? AvatarSize.FORTY_EIGHT}
             unblurredAvatarPath={unblurredAvatarPath}
             // This is here to appease the type checker.
             {...(props.badge

ts/components/conversationList/GroupListItem.tsx

@@ -0,0 +1,69 @@
+// Copyright 2022 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+import type { ConversationType } from '../../state/ducks/conversations';
+import type { LocalizerType } from '../../types/Util';
+import type { UUIDStringType } from '../../types/UUID';
+import { AvatarSize } from '../Avatar';
+import { BaseConversationListItem } from './BaseConversationListItem';
+
+export enum DisabledReason {
+  AlreadyMember = 'already-member',
+  Pending = 'pending',
+}
+
+export type GroupListItemConversationType = Pick<
+  ConversationType,
+  'id' | 'title' | 'avatarPath'
+> & {
+  disabledReason: DisabledReason | undefined;
+  membersCount: number;
+  memberships: Array<{
+    uuid: UUIDStringType;
+    isAdmin: boolean;
+  }>;
+};
+
+export type Props = {
+  i18n: LocalizerType;
+  onSelectGroup: (id: string) => void;
+  group: GroupListItemConversationType;
+};
+
+export const GroupListItem = ({
+  group,
+  i18n,
+  onSelectGroup,
+}: Props): JSX.Element => {
+  let messageText: string;
+  switch (group.disabledReason) {
+    case DisabledReason.AlreadyMember:
+      messageText = i18n('GroupListItem__message-already-member');
+      break;
+    case DisabledReason.Pending:
+      messageText = i18n('GroupListItem__message-pending');
+      break;
+    default:
+      messageText = i18n('GroupListItem__message-default', {
+        count: group.membersCount,
+      });
+  }
+  return (
+    <BaseConversationListItem
+      disabled={group.disabledReason !== undefined}
+      conversationType="group"
+      title={group.title}
+      avatarSize={AvatarSize.THIRTY_SIX}
+      avatarPath={group.avatarPath}
+      acceptedMessageRequest
+      isMe={false}
+      sharedGroupNames={[]}
+      headerName={group.title}
+      i18n={i18n}
+      isSelected={false}
+      onClick={() => onSelectGroup(group.id)}
+      messageText={messageText}
+    />
+  );
+};