From d3d363e12fe8c0746aaca6e584a0a0461aaeae29 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 2 Mar 2023 10:28:31 -0600
Subject: [PATCH 01/10] Allow all permissions if unset

---
 app/soapbox/utils/permissions.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/utils/permissions.ts b/app/soapbox/utils/permissions.ts
index 607f751eb..9627074eb 100644
--- a/app/soapbox/utils/permissions.ts
+++ b/app/soapbox/utils/permissions.ts
@@ -10,7 +10,7 @@ type Permission = typeof PERMISSION_CREATE_GROUPS | typeof PERMISSION_INVITE_USE
 export const hasPermission = (state: RootState, permission: Permission) => {
   const account = state.accounts_meta.get(state.me as string)!;
 
-  if (!account?.role) return false;
+  if (!account?.role) return true;
 
   const permissions = account.getIn(['role', 'permissions']) as number;
 

From 55c8887a0882ebf9d8f51f656ce3084d92d7f6cc Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 2 Mar 2023 12:17:25 -0600
Subject: [PATCH 02/10] Small design tweaks for create group modal

---
 .../manage-group-modal/steps/details-step.tsx      | 14 +++++++-------
 .../manage-group-modal/steps/privacy-step.tsx      |  2 +-
 app/soapbox/locales/en.json                        |  2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
index c40bcf3e1..f51be0ae5 100644
--- a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
+++ b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
@@ -37,17 +37,17 @@ const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }
         className={clsx('absolute top-0 h-full w-full transition-opacity', {
           'opacity-0 hover:opacity-90 bg-primary-100 dark:bg-gray-800': src,
         })}
-        space={3}
+        space={1.5}
         alignItems='center'
         justifyContent='center'
       >
         <Icon
           src={require('@tabler/icons/photo-plus.svg')}
-          className='h-7 w-7'
+          className='h-4.5 w-4.5'
         />
 
-        <Text size='sm' theme='primary' weight='semibold' transform='uppercase'>
-          <FormattedMessage id='compose_event.upload_banner' defaultMessage='Upload photo' />
+        <Text size='md' theme='primary' weight='semibold'>
+          <FormattedMessage id='group.upload_banner' defaultMessage='Upload photo' />
         </Text>
 
         <input
@@ -65,8 +65,8 @@ const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }
 
 const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => {
   return (
-    <label className='absolute left-1/2 bottom-0 h-[72px] w-[72px] -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900'>
-      {src && <Avatar src={src} size={72} />}
+    <label className='absolute left-1/2 bottom-0 h-20 w-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900'>
+      {src && <Avatar src={src} size={80} />}
       <HStack
         alignItems='center'
         justifyContent='center'
@@ -77,7 +77,7 @@ const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }
       >
         <Icon
           src={require('@tabler/icons/camera-plus.svg')}
-          className='h-7 w-7 text-white'
+          className='h-5 w-5 text-white'
         />
       </HStack>
       <span className='sr-only'>Upload avatar</span>
diff --git a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx
index 4e6622c3c..22ad89305 100644
--- a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx
+++ b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx
@@ -19,7 +19,7 @@ const PrivacyStep = () => {
     <>
       <Stack className='mx-auto max-w-sm' space={2}>
         <Text size='3xl' weight='bold' align='center'>
-          <FormattedMessage id='manage_group.get_started' defaultMessage="Let's get started!" />
+          <FormattedMessage id='manage_group.get_started' defaultMessage='Let’s get started!' />
         </Text>
         <Text size='lg' theme='muted' align='center'>
           <FormattedMessage id='manage_group.tagline' defaultMessage='Groups connect you with others based on shared interests.' />
diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index f9b638009..dd82fa393 100644
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@@ -892,7 +892,7 @@
   "manage_group.fields.description_placeholder": "Description",
   "manage_group.fields.name_label": "Group name (required)",
   "manage_group.fields.name_placeholder": "Group Name",
-  "manage_group.get_started": "Let's get started!",
+  "manage_group.get_started": "Let’s get started!",
   "manage_group.next": "Next",
   "manage_group.pending_requests": "Pending requests",
   "manage_group.privacy.hint": "These settings cannot be changed later.",

From 65d1c66aad49ae95133d3441aee468d6f6a6e4d9 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 6 Mar 2023 12:42:13 -0600
Subject: [PATCH 03/10] Add group icon to create screen

---
 app/assets/images/group.svg                   | 26 +++++++++++++++++++
 app/soapbox/components/list.tsx               |  5 +++-
 .../manage-group-modal/steps/privacy-step.tsx |  5 ++++
 3 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/images/group.svg

diff --git a/app/assets/images/group.svg b/app/assets/images/group.svg
new file mode 100644
index 000000000..4e187999d
--- /dev/null
+++ b/app/assets/images/group.svg
@@ -0,0 +1,26 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_7_1989" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="73" y="38" width="46" height="65">
+<path d="M95.9997 38C90.3542 38 85.7775 42.1122 85.7775 47.1848V56.3696C85.7775 59.2605 87.2924 61.9828 89.8664 63.7174C90.1516 63.9096 90.0851 64.347 89.7556 64.4456L81.7371 66.8472C76.8048 68.3245 73.3901 72.3258 73.0313 76.9334C72.9897 77.4671 73.0675 78.0013 73.2009 78.5197L79.5 103C106.943 103 115.635 97.2124 118.109 94.7132C118.778 94.0378 119 93.0929 119 92.1426V77.739C119 72.7973 115.481 68.4099 110.263 66.8472L102.244 64.4455C101.914 64.3468 101.848 63.9096 102.133 63.7174C104.707 61.9828 106.222 59.2605 106.222 56.3696V47.1848C106.222 42.1122 101.645 38 95.9997 38Z" fill="#5448EE"/>
+</mask>
+<g mask="url(#mask0_7_1989)">
+<path d="M95.9997 38C90.3542 38 85.7775 42.1122 85.7775 47.1848V56.3696C85.7775 59.2605 87.2924 61.9828 89.8664 63.7174C90.1516 63.9096 90.0851 64.347 89.7556 64.4456L81.7371 66.8472C76.8048 68.3245 73.3901 72.3258 73.0313 76.9334C72.9897 77.4671 73.0675 78.0013 73.2009 78.5197L79.5 103C106.943 103 115.635 97.2124 118.109 94.7132C118.778 94.0378 119 93.0929 119 92.1426V77.739C119 72.7973 115.481 68.4099 110.263 66.8472L102.244 64.4455C101.914 64.3468 101.848 63.9096 102.133 63.7174C104.707 61.9828 106.222 59.2605 106.222 56.3696V47.1848C106.222 42.1122 101.645 38 95.9997 38Z" fill="#5448EE"/>
+<path opacity="0.34" d="M79.4229 76L112.423 107.841L109.423 111.884H70.9998V77.3607L79.4229 76Z" fill="#322B4E"/>
+</g>
+<path d="M32.0003 38C37.6458 38 42.2225 42.1122 42.2225 47.1848V56.3696C42.2225 59.2605 40.7076 61.9828 38.1336 63.7174L37.4195 64.1986L46.2629 66.8472C51.4806 68.4099 55 72.7973 55 77.739L48.5 103C13.5 103 9 93.5862 9 93.5862V77.739C9 72.7973 12.5194 68.4099 17.7371 66.8472L26.5808 64.1985L25.8669 63.7174C23.2929 61.9828 21.778 59.2605 21.778 56.3696V47.1848C21.778 42.1122 26.3547 38 32.0003 38Z" fill="url(#paint0_linear_7_1989)"/>
+<mask id="mask1_7_1989" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="38" y="54" width="52" height="50">
+<path d="M38.3857 73.7909C38.3857 67.5992 42.3053 62.1022 48.1163 60.1442L64.0011 54.792L79.8859 60.1442C85.6969 62.1022 89.6165 67.5992 89.6165 73.7909V95.0005C89.6165 99.4188 86.0348 103.001 81.6165 103.001H46.3857C41.9675 103.001 38.3857 99.4188 38.3857 95.0005V73.7909Z" fill="#B0AEB8"/>
+<path d="M38.3857 73.7909C38.3857 67.5992 42.3053 62.1022 48.1163 60.1442L64.0011 54.792L79.8859 60.1442C85.6969 62.1022 89.6165 67.5992 89.6165 73.7909V95.0005C89.6165 99.4188 86.0348 103.001 81.6165 103.001H46.3857C41.9675 103.001 38.3857 99.4188 38.3857 95.0005V73.7909Z" fill="#B0AEB8"/>
+</mask>
+<g mask="url(#mask1_7_1989)">
+<path d="M38.3857 73.7909C38.3857 67.5992 42.3053 62.1022 48.1163 60.1442L64.0011 54.792L79.8859 60.1442C85.6969 62.1022 89.6165 67.5992 89.6165 73.7909V108.055H38.3857V73.7909Z" fill="#645F76"/>
+<path d="M38.3857 73.7909C38.3857 67.5992 42.3053 62.1022 48.1163 60.1442L64.0011 54.792L79.8859 60.1442C85.6969 62.1022 89.6165 67.5992 89.6165 73.7909V108.055H38.3857V73.7909Z" fill="#645F76"/>
+<path opacity="0.34" d="M90 86.7889L57 54.9479L60 50.9046H98.4231V85.4282L90 86.7889Z" fill="#322B4E"/>
+</g>
+<path d="M52.6162 35.3846C52.6162 29.0971 57.7133 24 64.0008 24C70.2884 24 75.3854 29.0971 75.3854 35.3846V47.1141C75.3854 50.6768 73.7177 54.034 70.8786 56.1863L69.1592 57.4899C66.109 59.8023 61.8926 59.8023 58.8425 57.4899L57.123 56.1863C54.284 54.034 52.6162 50.6768 52.6162 47.1141V35.3846Z" fill="#645F76"/>
+<defs>
+<linearGradient id="paint0_linear_7_1989" x1="-49" y1="-16.2414" x2="19.0934" y2="125.345" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E4E2FC" stop-opacity="0"/>
+<stop offset="1" stop-color="#B7B2F8"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/app/soapbox/components/list.tsx b/app/soapbox/components/list.tsx
index 3dd77c34c..b48b24a87 100644
--- a/app/soapbox/components/list.tsx
+++ b/app/soapbox/components/list.tsx
@@ -84,7 +84,10 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick, onSelec
           {children}
 
           {isSelected ? (
-            <Icon src={require('@tabler/icons/check.svg')} className='ml-1 text-primary-500 dark:text-primary-400' />
+            <Icon
+              src={require('@tabler/icons/circle-check.svg')}
+              className='h-4 w-4 text-primary-600 dark:fill-white dark:text-primary-800'
+            />
           ) : null}
         </div>
       ) : null}
diff --git a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx
index 22ad89305..e26243f9a 100644
--- a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx
+++ b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx
@@ -18,6 +18,11 @@ const PrivacyStep = () => {
   return (
     <>
       <Stack className='mx-auto max-w-sm' space={2}>
+        <img
+          className='mx-auto w-32'
+          src={require('assets/images/group.svg')}
+          alt=''
+        />
         <Text size='3xl' weight='bold' align='center'>
           <FormattedMessage id='manage_group.get_started' defaultMessage='Let’s get started!' />
         </Text>

From 63df6386307d229077887c8efd44e962b0696893 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 8 Mar 2023 12:00:28 -0600
Subject: [PATCH 04/10] Create Group: enforce max limit on description and name

---
 .../modals/manage-group-modal/steps/details-step.tsx        | 6 ++++--
 app/soapbox/normalizers/instance.ts                         | 4 ++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
index f51be0ae5..2450dffea 100644
--- a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
+++ b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
@@ -9,7 +9,7 @@ import {
 } from 'soapbox/actions/groups';
 import Icon from 'soapbox/components/icon';
 import { Avatar, Form, FormGroup, HStack, Input, Text, Textarea } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks';
 import { isDefaultAvatar, isDefaultHeader } from 'soapbox/utils/accounts';
 import resizeImage from 'soapbox/utils/resize-image';
 
@@ -96,6 +96,7 @@ const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }
 const DetailsStep = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
+  const instance = useInstance();
 
   const groupId = useAppSelector((state) => state.group_editor.groupId);
   const isUploading = useAppSelector((state) => state.group_editor.isUploading);
@@ -146,7 +147,6 @@ const DetailsStep = () => {
     });
   }, [groupId]);
 
-
   return (
     <Form>
       <div className='relative mb-12 flex'>
@@ -161,6 +161,7 @@ const DetailsStep = () => {
           placeholder={intl.formatMessage(messages.groupNamePlaceholder)}
           value={name}
           onChange={onChangeName}
+          maxLength={Number(instance.configuration.getIn(['groups', 'max_characters_name']))}
         />
       </FormGroup>
       <FormGroup
@@ -171,6 +172,7 @@ const DetailsStep = () => {
           placeholder={intl.formatMessage(messages.groupDescriptionPlaceholder)}
           value={description}
           onChange={onChangeDescription}
+          maxLength={Number(instance.configuration.getIn(['groups', 'max_characters_description']))}
         />
       </FormGroup>
     </Form>
diff --git a/app/soapbox/normalizers/instance.ts b/app/soapbox/normalizers/instance.ts
index b75f99f9f..3632b9058 100644
--- a/app/soapbox/normalizers/instance.ts
+++ b/app/soapbox/normalizers/instance.ts
@@ -35,6 +35,10 @@ export const InstanceRecord = ImmutableRecord({
       max_characters: 500,
       max_media_attachments: 4,
     }),
+    groups: ImmutableMap<string, number>({
+      max_characters_name: 50,
+      max_characters_description: 100,
+    }),
   }),
   description: '',
   description_limit: 1500,

From 925509a985a6c688a01419ec462e71ccafec9cf3 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 8 Mar 2023 12:20:20 -0600
Subject: [PATCH 05/10] Fix groups modal bailing too soon

---
 app/soapbox/actions/groups.ts                 |   1 -
 .../manage-group-modal/manage-group-modal.tsx |  17 +-
 .../steps/confirmation-step.tsx               | 163 ++++++++++++++++++
 3 files changed, 176 insertions(+), 5 deletions(-)
 create mode 100644 app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx

diff --git a/app/soapbox/actions/groups.ts b/app/soapbox/actions/groups.ts
index 9715396f3..08039166f 100644
--- a/app/soapbox/actions/groups.ts
+++ b/app/soapbox/actions/groups.ts
@@ -148,7 +148,6 @@ const createGroup = (params: Record<string, any>, shouldReset?: boolean) =>
         if (shouldReset) {
           dispatch(resetGroupEditor());
         }
-        dispatch(closeModal('MANAGE_GROUP'));
       }).catch(err => dispatch(createGroupFail(err)));
   };
 
diff --git a/app/soapbox/features/ui/components/modals/manage-group-modal/manage-group-modal.tsx b/app/soapbox/features/ui/components/modals/manage-group-modal/manage-group-modal.tsx
index 77cdf5c29..22fe726b0 100644
--- a/app/soapbox/features/ui/components/modals/manage-group-modal/manage-group-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/manage-group-modal/manage-group-modal.tsx
@@ -1,10 +1,11 @@
 import React, { useMemo, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { submitGroupEditor } from 'soapbox/actions/groups';
+import { resetGroupEditor, submitGroupEditor } from 'soapbox/actions/groups';
 import { Modal, Stack } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
+import ConfirmationStep from './steps/confirmation-step';
 import DetailsStep from './steps/details-step';
 import PrivacyStep from './steps/privacy-step';
 
@@ -12,16 +13,19 @@ const messages = defineMessages({
   next: { id: 'manage_group.next', defaultMessage: 'Next' },
   create: { id: 'manage_group.create', defaultMessage: 'Create' },
   update: { id: 'manage_group.update', defaultMessage: 'Update' },
+  done: { id: 'manage_group.done', defaultMessage: 'Done' },
 });
 
 enum Steps {
   ONE = 'ONE',
   TWO = 'TWO',
+  THREE = 'THREE',
 }
 
 const manageGroupSteps = {
   ONE: PrivacyStep,
   TWO: DetailsStep,
+  THREE: ConfirmationStep,
 };
 
 interface IManageGroupModal {
@@ -38,7 +42,7 @@ const ManageGroupModal: React.FC<IManageGroupModal> = ({ onClose }) => {
 
   const [currentStep, setCurrentStep] = useState<Steps>(id ? Steps.TWO : Steps.ONE);
 
-  const onClickClose = () => {
+  const handleClose = () => {
     onClose('MANAGE_GROUP');
   };
 
@@ -48,6 +52,8 @@ const ManageGroupModal: React.FC<IManageGroupModal> = ({ onClose }) => {
 
   const confirmationText = useMemo(() => {
     switch (currentStep) {
+      case Steps.THREE:
+        return intl.formatMessage(messages.done);
       case Steps.TWO:
         return intl.formatMessage(id ? messages.update : messages.create);
       default:
@@ -62,7 +68,10 @@ const ManageGroupModal: React.FC<IManageGroupModal> = ({ onClose }) => {
         break;
       case Steps.TWO:
         handleSubmit();
-        onClose();
+        setCurrentStep(Steps.THREE);
+        break;
+      case Steps.THREE:
+        handleClose();
         break;
       default:
         break;
@@ -80,7 +89,7 @@ const ManageGroupModal: React.FC<IManageGroupModal> = ({ onClose }) => {
       confirmationText={confirmationText}
       confirmationDisabled={isSubmitting}
       confirmationFullWidth
-      onClose={onClickClose}
+      onClose={handleClose}
     >
       <Stack space={2}>
         <StepToRender />
diff --git a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
new file mode 100644
index 000000000..f0fa85cf9
--- /dev/null
+++ b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
@@ -0,0 +1,163 @@
+import clsx from 'clsx';
+import React, { useEffect, useState } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import {
+  changeGroupEditorTitle,
+  changeGroupEditorDescription,
+  changeGroupEditorMedia,
+} from 'soapbox/actions/groups';
+import Icon from 'soapbox/components/icon';
+import { Avatar, Form, FormGroup, HStack, Input, Text, Textarea } from 'soapbox/components/ui';
+import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks';
+import { isDefaultAvatar, isDefaultHeader } from 'soapbox/utils/accounts';
+import resizeImage from 'soapbox/utils/resize-image';
+
+import type { List as ImmutableList } from 'immutable';
+
+interface IMediaInput {
+  src: string | null
+  accept: string
+  onChange: React.ChangeEventHandler<HTMLInputElement>
+  disabled: boolean
+}
+
+const messages = defineMessages({
+  groupNamePlaceholder: { id: 'manage_group.fields.name_placeholder', defaultMessage: 'Group Name' },
+  groupDescriptionPlaceholder: { id: 'manage_group.fields.description_placeholder', defaultMessage: 'Description' },
+});
+
+const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => {
+  return (
+    <label
+      className='dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-accent-blue sm:h-36 sm:shadow'
+    >
+      {src && <img className='h-full w-full object-cover' src={src} alt='' />}
+      <HStack
+        className={clsx('absolute top-0 h-full w-full transition-opacity', {
+          'opacity-0 hover:opacity-90 bg-primary-100 dark:bg-gray-800': src,
+        })}
+        space={1.5}
+        alignItems='center'
+        justifyContent='center'
+      >
+        <Icon
+          src={require('@tabler/icons/photo-plus.svg')}
+          className='h-4.5 w-4.5'
+        />
+
+        <Text size='md' theme='primary' weight='semibold'>
+          <FormattedMessage id='group.upload_banner' defaultMessage='Upload photo' />
+        </Text>
+
+        <input
+          name='header'
+          type='file'
+          accept={accept}
+          onChange={onChange}
+          disabled={disabled}
+          className='hidden'
+        />
+      </HStack>
+    </label>
+  );
+};
+
+const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => {
+  return (
+    <label className='absolute left-1/2 bottom-0 h-20 w-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900'>
+      {src && <Avatar src={src} size={80} />}
+      <HStack
+        alignItems='center'
+        justifyContent='center'
+
+        className={clsx('absolute left-0 top-0 h-full w-full rounded-full transition-opacity', {
+          'opacity-0 hover:opacity-90 bg-primary-500': src,
+        })}
+      >
+        <Icon
+          src={require('@tabler/icons/camera-plus.svg')}
+          className='h-5 w-5 text-white'
+        />
+      </HStack>
+      <span className='sr-only'>Upload avatar</span>
+      <input
+        name='avatar'
+        type='file'
+        accept={accept}
+        onChange={onChange}
+        disabled={disabled}
+        className='hidden'
+      />
+    </label>
+  );
+};
+
+const ConfirmationStep = () => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+  const instance = useInstance();
+
+  const groupId = useAppSelector((state) => state.group_editor.groupId);
+  const isUploading = useAppSelector((state) => state.group_editor.isUploading);
+  const name = useAppSelector((state) => state.group_editor.displayName);
+  const description = useAppSelector((state) => state.group_editor.note);
+
+  const [avatarSrc, setAvatarSrc] = useState<string | null>(null);
+  const [headerSrc, setHeaderSrc] = useState<string | null>(null);
+
+  const attachmentTypes = useAppSelector(
+    state => state.instance.configuration.getIn(['media_attachments', 'supported_mime_types']) as ImmutableList<string>,
+  )?.filter(type => type.startsWith('image/')).toArray().join(',');
+
+  const onChangeName: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
+    dispatch(changeGroupEditorTitle(target.value));
+  };
+
+  const onChangeDescription: React.ChangeEventHandler<HTMLTextAreaElement> = ({ target }) => {
+    dispatch(changeGroupEditorDescription(target.value));
+  };
+
+  const handleFileChange: React.ChangeEventHandler<HTMLInputElement> = e => {
+    const rawFile = e.target.files?.item(0);
+
+    if (!rawFile) return;
+
+    if (e.target.name === 'avatar') {
+      resizeImage(rawFile, 400 * 400).then(file => {
+        dispatch(changeGroupEditorMedia('avatar', file));
+        setAvatarSrc(URL.createObjectURL(file));
+      }).catch(console.error);
+    } else {
+      resizeImage(rawFile, 1920 * 1080).then(file => {
+        dispatch(changeGroupEditorMedia('header', file));
+        setHeaderSrc(URL.createObjectURL(file));
+      }).catch(console.error);
+    }
+  };
+
+  useEffect(() => {
+    if (!groupId) return;
+
+    dispatch((_, getState) => {
+      const group = getState().groups.items.get(groupId);
+      if (!group) return;
+      if (group.avatar && !isDefaultAvatar(group.avatar)) setAvatarSrc(group.avatar);
+      if (group.header && !isDefaultHeader(group.header)) setHeaderSrc(group.header);
+    });
+  }, [groupId]);
+
+  return (
+    <Form>
+      <div className='relative mb-12 flex'>
+        <HeaderPicker src={headerSrc} accept={attachmentTypes} onChange={handleFileChange} disabled={isUploading} />
+        <AvatarPicker src={avatarSrc} accept={attachmentTypes} onChange={handleFileChange} disabled={isUploading} />
+      </div>
+      <div>
+        <Text size='2xl'>You're all set!</Text>
+      </div>
+    </Form>
+  );
+};
+
+export default ConfirmationStep;

From d7f5e210d89471fa48f0e428214fe7b25838aa5f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 8 Mar 2023 13:43:16 -0600
Subject: [PATCH 06/10] Groups: scaffold the confirmation step

---
 app/soapbox/actions/groups.ts                 |   6 +-
 app/soapbox/components/ui/stack/stack.tsx     |   1 +
 .../manage-group-modal/manage-group-modal.tsx |  16 +-
 .../steps/confirmation-step.tsx               | 182 +++---------------
 4 files changed, 47 insertions(+), 158 deletions(-)

diff --git a/app/soapbox/actions/groups.ts b/app/soapbox/actions/groups.ts
index 08039166f..630c7a876 100644
--- a/app/soapbox/actions/groups.ts
+++ b/app/soapbox/actions/groups.ts
@@ -148,6 +148,8 @@ const createGroup = (params: Record<string, any>, shouldReset?: boolean) =>
         if (shouldReset) {
           dispatch(resetGroupEditor());
         }
+
+        return data;
       }).catch(err => dispatch(createGroupFail(err)));
   };
 
@@ -868,9 +870,9 @@ const submitGroupEditor = (shouldReset?: boolean) => (dispatch: AppDispatch, get
   if (header) params.header = header;
 
   if (groupId === null) {
-    dispatch(createGroup(params, shouldReset));
+    return dispatch(createGroup(params, shouldReset));
   } else {
-    dispatch(updateGroup(groupId, params, shouldReset));
+    return dispatch(updateGroup(groupId, params, shouldReset));
   }
 };
 
diff --git a/app/soapbox/components/ui/stack/stack.tsx b/app/soapbox/components/ui/stack/stack.tsx
index 4795f11d3..dceaf9214 100644
--- a/app/soapbox/components/ui/stack/stack.tsx
+++ b/app/soapbox/components/ui/stack/stack.tsx
@@ -11,6 +11,7 @@ const spaces = {
   4: 'space-y-4',
   5: 'space-y-5',
   6: 'space-y-6',
+  9: 'space-y-9',
   10: 'space-y-10',
 };
 
diff --git a/app/soapbox/features/ui/components/modals/manage-group-modal/manage-group-modal.tsx b/app/soapbox/features/ui/components/modals/manage-group-modal/manage-group-modal.tsx
index 22fe726b0..2863060c5 100644
--- a/app/soapbox/features/ui/components/modals/manage-group-modal/manage-group-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/manage-group-modal/manage-group-modal.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { resetGroupEditor, submitGroupEditor } from 'soapbox/actions/groups';
+import { submitGroupEditor } from 'soapbox/actions/groups';
 import { Modal, Stack } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
@@ -37,6 +37,7 @@ const ManageGroupModal: React.FC<IManageGroupModal> = ({ onClose }) => {
   const dispatch = useAppDispatch();
 
   const id = useAppSelector((state) => state.group_editor.groupId);
+  const [group, setGroup] = useState<any | null>(null);
 
   const isSubmitting = useAppSelector((state) => state.group_editor.isSubmitting);
 
@@ -47,7 +48,7 @@ const ManageGroupModal: React.FC<IManageGroupModal> = ({ onClose }) => {
   };
 
   const handleSubmit = () => {
-    dispatch(submitGroupEditor(true));
+    return dispatch(submitGroupEditor(true));
   };
 
   const confirmationText = useMemo(() => {
@@ -67,8 +68,12 @@ const ManageGroupModal: React.FC<IManageGroupModal> = ({ onClose }) => {
         setCurrentStep(Steps.TWO);
         break;
       case Steps.TWO:
-        handleSubmit();
-        setCurrentStep(Steps.THREE);
+        handleSubmit()
+          .then((group) => {
+            setCurrentStep(Steps.THREE);
+            setGroup(group);
+          })
+          .catch(() => {});
         break;
       case Steps.THREE:
         handleClose();
@@ -92,7 +97,8 @@ const ManageGroupModal: React.FC<IManageGroupModal> = ({ onClose }) => {
       onClose={handleClose}
     >
       <Stack space={2}>
-        <StepToRender />
+        {/* @ts-ignore */}
+        <StepToRender group={group} />
       </Stack>
     </Modal>
   );
diff --git a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
index f0fa85cf9..7321734cf 100644
--- a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
+++ b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
@@ -1,162 +1,42 @@
-import clsx from 'clsx';
-import React, { useEffect, useState } from 'react';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
 
-import {
-  changeGroupEditorTitle,
-  changeGroupEditorDescription,
-  changeGroupEditorMedia,
-} from 'soapbox/actions/groups';
-import Icon from 'soapbox/components/icon';
-import { Avatar, Form, FormGroup, HStack, Input, Text, Textarea } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks';
-import { isDefaultAvatar, isDefaultHeader } from 'soapbox/utils/accounts';
-import resizeImage from 'soapbox/utils/resize-image';
+import { Avatar, Divider, Stack, Text } from 'soapbox/components/ui';
 
-import type { List as ImmutableList } from 'immutable';
-
-interface IMediaInput {
-  src: string | null
-  accept: string
-  onChange: React.ChangeEventHandler<HTMLInputElement>
-  disabled: boolean
+interface IConfirmationStep {
+  group: any
 }
 
-const messages = defineMessages({
-  groupNamePlaceholder: { id: 'manage_group.fields.name_placeholder', defaultMessage: 'Group Name' },
-  groupDescriptionPlaceholder: { id: 'manage_group.fields.description_placeholder', defaultMessage: 'Description' },
-});
-
-const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => {
+const ConfirmationStep: React.FC<IConfirmationStep> = ({ group }) => {
   return (
-    <label
-      className='dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-accent-blue sm:h-36 sm:shadow'
-    >
-      {src && <img className='h-full w-full object-cover' src={src} alt='' />}
-      <HStack
-        className={clsx('absolute top-0 h-full w-full transition-opacity', {
-          'opacity-0 hover:opacity-90 bg-primary-100 dark:bg-gray-800': src,
-        })}
-        space={1.5}
-        alignItems='center'
-        justifyContent='center'
-      >
-        <Icon
-          src={require('@tabler/icons/photo-plus.svg')}
-          className='h-4.5 w-4.5'
-        />
-
-        <Text size='md' theme='primary' weight='semibold'>
-          <FormattedMessage id='group.upload_banner' defaultMessage='Upload photo' />
-        </Text>
-
-        <input
-          name='header'
-          type='file'
-          accept={accept}
-          onChange={onChange}
-          disabled={disabled}
-          className='hidden'
-        />
-      </HStack>
-    </label>
-  );
-};
-
-const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => {
-  return (
-    <label className='absolute left-1/2 bottom-0 h-20 w-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900'>
-      {src && <Avatar src={src} size={80} />}
-      <HStack
-        alignItems='center'
-        justifyContent='center'
-
-        className={clsx('absolute left-0 top-0 h-full w-full rounded-full transition-opacity', {
-          'opacity-0 hover:opacity-90 bg-primary-500': src,
-        })}
-      >
-        <Icon
-          src={require('@tabler/icons/camera-plus.svg')}
-          className='h-5 w-5 text-white'
-        />
-      </HStack>
-      <span className='sr-only'>Upload avatar</span>
-      <input
-        name='avatar'
-        type='file'
-        accept={accept}
-        onChange={onChange}
-        disabled={disabled}
-        className='hidden'
-      />
-    </label>
-  );
-};
-
-const ConfirmationStep = () => {
-  const intl = useIntl();
-  const dispatch = useAppDispatch();
-  const instance = useInstance();
+    <Stack space={9}>
+      <Stack space={3}>
+        <Stack>
+          <label
+            className='dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-accent-blue sm:h-36 sm:shadow'
+          >
+            {group.header && <img className='h-full w-full object-cover' src={group.header} alt='' />}
+          </label>
+
+          <label className='mx-auto -mt-10 cursor-pointer rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900'>
+            {group.avatar && <Avatar src={group.avatar} size={80} />}
+          </label>
+        </Stack>
+
+        <Stack>
+          <Text size='2xl' weight='bold' align='center'>{group.display_name}</Text>
+          <Text size='md' className='mx-auto max-w-sm'>{group.note}</Text>
+        </Stack>
+      </Stack>
+
+      <Divider />
 
-  const groupId = useAppSelector((state) => state.group_editor.groupId);
-  const isUploading = useAppSelector((state) => state.group_editor.isUploading);
-  const name = useAppSelector((state) => state.group_editor.displayName);
-  const description = useAppSelector((state) => state.group_editor.note);
-
-  const [avatarSrc, setAvatarSrc] = useState<string | null>(null);
-  const [headerSrc, setHeaderSrc] = useState<string | null>(null);
-
-  const attachmentTypes = useAppSelector(
-    state => state.instance.configuration.getIn(['media_attachments', 'supported_mime_types']) as ImmutableList<string>,
-  )?.filter(type => type.startsWith('image/')).toArray().join(',');
-
-  const onChangeName: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
-    dispatch(changeGroupEditorTitle(target.value));
-  };
-
-  const onChangeDescription: React.ChangeEventHandler<HTMLTextAreaElement> = ({ target }) => {
-    dispatch(changeGroupEditorDescription(target.value));
-  };
-
-  const handleFileChange: React.ChangeEventHandler<HTMLInputElement> = e => {
-    const rawFile = e.target.files?.item(0);
-
-    if (!rawFile) return;
-
-    if (e.target.name === 'avatar') {
-      resizeImage(rawFile, 400 * 400).then(file => {
-        dispatch(changeGroupEditorMedia('avatar', file));
-        setAvatarSrc(URL.createObjectURL(file));
-      }).catch(console.error);
-    } else {
-      resizeImage(rawFile, 1920 * 1080).then(file => {
-        dispatch(changeGroupEditorMedia('header', file));
-        setHeaderSrc(URL.createObjectURL(file));
-      }).catch(console.error);
-    }
-  };
-
-  useEffect(() => {
-    if (!groupId) return;
-
-    dispatch((_, getState) => {
-      const group = getState().groups.items.get(groupId);
-      if (!group) return;
-      if (group.avatar && !isDefaultAvatar(group.avatar)) setAvatarSrc(group.avatar);
-      if (group.header && !isDefaultHeader(group.header)) setHeaderSrc(group.header);
-    });
-  }, [groupId]);
-
-  return (
-    <Form>
-      <div className='relative mb-12 flex'>
-        <HeaderPicker src={headerSrc} accept={attachmentTypes} onChange={handleFileChange} disabled={isUploading} />
-        <AvatarPicker src={avatarSrc} accept={attachmentTypes} onChange={handleFileChange} disabled={isUploading} />
-      </div>
       <div>
-        <Text size='2xl'>You're all set!</Text>
+        <Text size='3xl' weight='bold' align='center'>
+          <FormattedMessage id='manage_group.confirmation.title' defaultMessage='You’re all set!' />
+        </Text>
       </div>
-    </Form>
+    </Stack>
   );
 };
 

From 2a9f05a7655883b9d175a8c82627cc70efe26a10 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 8 Mar 2023 14:10:09 -0600
Subject: [PATCH 07/10] Create Group: add info items to confirmation step

---
 .../steps/confirmation-step.tsx               | 55 ++++++++++++++++++-
 1 file changed, 52 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
index 7321734cf..158b68ffd 100644
--- a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
+++ b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Avatar, Divider, Stack, Text } from 'soapbox/components/ui';
+import { Avatar, Divider, HStack, Stack, Text } from 'soapbox/components/ui';
 
 interface IConfirmationStep {
   group: any
@@ -31,13 +31,62 @@ const ConfirmationStep: React.FC<IConfirmationStep> = ({ group }) => {
 
       <Divider />
 
-      <div>
+      <Stack space={4}>
         <Text size='3xl' weight='bold' align='center'>
           <FormattedMessage id='manage_group.confirmation.title' defaultMessage='You’re all set!' />
         </Text>
-      </div>
+
+        <Stack space={5}>
+          <InfoListItem number={1}>
+            <FormattedMessage
+              id='manage_group.confirmation.info_1'
+              defaultMessage='As the owner of this group, you can assign staff, delete posts and much more.'
+            />
+          </InfoListItem>
+
+          <InfoListItem number={2}>
+            <FormattedMessage
+              id='manage_group.confirmation.info_2'
+              defaultMessage="Post the group's first post and get the conversation started."
+            />
+          </InfoListItem>
+
+          <InfoListItem number={3}>
+            <FormattedMessage
+              id='manage_group.confirmation.info_3'
+              defaultMessage='Share your new group with friends, family and followers to grow its membership.'
+            />
+          </InfoListItem>
+        </Stack>
+      </Stack>
     </Stack>
   );
 };
 
+interface IInfoListNumber {
+  number: number
+}
+
+const InfoListNumber: React.FC<IInfoListNumber> = ({ number }) => {
+  return (
+    <div className='flex h-7 w-7 items-center justify-center rounded-full border border-gray-200'>
+      <Text theme='primary' size='sm' weight='bold'>{number}</Text>
+    </div>
+  );
+};
+
+interface IInfoListItem {
+  number: number
+  children: React.ReactNode
+}
+
+const InfoListItem: React.FC<IInfoListItem> = ({ number, children }) => {
+  return (
+    <HStack space={3}>
+      <div><InfoListNumber number={number} /></div>
+      <div>{children}</div>
+    </HStack>
+  );
+};
+
 export default ConfirmationStep;

From 01343bbe0a93129c3037d7af0ff3a32166e50a7d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 8 Mar 2023 14:46:24 -0600
Subject: [PATCH 08/10] Add copy and share links to group confirmation step

---
 .../steps/confirmation-step.tsx               | 29 ++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
index 158b68ffd..1b71e36c9 100644
--- a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
+++ b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
@@ -1,13 +1,28 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Avatar, Divider, HStack, Stack, Text } from 'soapbox/components/ui';
+import { Avatar, Divider, HStack, Stack, Text, Button } from 'soapbox/components/ui';
 
 interface IConfirmationStep {
   group: any
 }
 
 const ConfirmationStep: React.FC<IConfirmationStep> = ({ group }) => {
+  const handleCopyLink = () => {
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(group.uri);
+    }
+  };
+
+  const handleShare = () => {
+    navigator.share({
+      text: group.display_name,
+      url: group.uri,
+    }).catch((e) => {
+      if (e.name !== 'AbortError') console.error(e);
+    });
+  };
+
   return (
     <Stack space={9}>
       <Stack space={3}>
@@ -59,6 +74,18 @@ const ConfirmationStep: React.FC<IConfirmationStep> = ({ group }) => {
           </InfoListItem>
         </Stack>
       </Stack>
+
+      <HStack space={2} justifyContent='center'>
+        {('share' in navigator) && (
+          <Button onClick={handleShare} theme='transparent' icon={require('@tabler/icons/share.svg')} className='text-primary-600'>
+            <FormattedMessage id='manage_group.confirmation.share' defaultMessage='Share this group' />
+          </Button>
+        )}
+
+        <Button onClick={handleCopyLink} theme='transparent' icon={require('@tabler/icons/link.svg')} className='text-primary-600'>
+          <FormattedMessage id='manage_group.confirmation.copy' defaultMessage='Copy link' />
+        </Button>
+      </HStack>
     </Stack>
   );
 };

From c75ce5879236be650fe0560dee028b3f28c8d79f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 8 Mar 2023 14:50:15 -0600
Subject: [PATCH 09/10] Fix instance test

---
 app/soapbox/normalizers/__tests__/instance.test.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/soapbox/normalizers/__tests__/instance.test.ts b/app/soapbox/normalizers/__tests__/instance.test.ts
index 708adb6bb..90472e7f8 100644
--- a/app/soapbox/normalizers/__tests__/instance.test.ts
+++ b/app/soapbox/normalizers/__tests__/instance.test.ts
@@ -23,6 +23,10 @@ describe('normalizeInstance()', () => {
           max_characters: 500,
           max_media_attachments: 4,
         },
+        groups: {
+          max_characters_name: 50,
+          max_characters_description: 100,
+        },
       },
       description: '',
       description_limit: 1500,

From bed26727c14e81670405f8d1306b59e788cced5b Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 9 Mar 2023 10:16:04 -0600
Subject: [PATCH 10/10] yarn i18n

---
 app/soapbox/locales/en.json | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index 84d0c7553..78f269d5a 100644
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@@ -787,6 +787,7 @@
   "group.role.moderator": "Moderator",
   "group.tabs.all": "All",
   "group.tabs.members": "Members",
+  "group.upload_banner": "Upload photo",
   "group.user_subheading": "Users",
   "groups.discover.search.no_results.subtitle": "Try searching for another group.",
   "groups.discover.search.no_results.title": "No matches found",
@@ -902,8 +903,15 @@
   "login_external.errors.network_fail": "Connection failed. Is a browser extension blocking it?",
   "login_form.header": "Sign In",
   "manage_group.blocked_members": "Blocked members",
+  "manage_group.confirmation.copy": "Copy link",
+  "manage_group.confirmation.info_1": "As the owner of this group, you can assign staff, delete posts and much more.",
+  "manage_group.confirmation.info_2": "Post the group's first post and get the conversation started.",
+  "manage_group.confirmation.info_3": "Share your new group with friends, family and followers to grow its membership.",
+  "manage_group.confirmation.share": "Share this group",
+  "manage_group.confirmation.title": "You’re all set!",
   "manage_group.create": "Create",
   "manage_group.delete_group": "Delete group",
+  "manage_group.done": "Done",
   "manage_group.edit_group": "Edit group",
   "manage_group.edit_success": "The group was edited",
   "manage_group.fields.description_label": "Description",