From 880e63f2ec06bb10d5c9f9c41bd2031f0adf8201 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 4 Apr 2023 13:42:15 -0500
Subject: [PATCH 1/8] Streamfield: remove plus icon from button, adjust X icon
 color

---
 app/soapbox/components/ui/streamfield/streamfield.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/soapbox/components/ui/streamfield/streamfield.tsx b/app/soapbox/components/ui/streamfield/streamfield.tsx
index 5c436e70b..fadcce46b 100644
--- a/app/soapbox/components/ui/streamfield/streamfield.tsx
+++ b/app/soapbox/components/ui/streamfield/streamfield.tsx
@@ -76,7 +76,7 @@ const Streamfield: React.FC<IStreamfield> = ({
               {values.length > minItems && onRemoveItem && (
                 <IconButton
                   iconClassName='h-4 w-4'
-                  className='bg-transparent text-gray-400 hover:text-gray-600'
+                  className='bg-transparent text-gray-600 hover:text-gray-600'
                   src={require('@tabler/icons/x.svg')}
                   onClick={() => onRemoveItem(i)}
                   title={intl.formatMessage(messages.remove)}
@@ -89,7 +89,6 @@ const Streamfield: React.FC<IStreamfield> = ({
 
       {onAddItem && (
         <Button
-          icon={require('@tabler/icons/plus.svg')}
           onClick={onAddItem}
           disabled={values.length >= maxItems}
           theme='secondary'

From 914ed6fe9c1ebbd48bafb7cca9caa953a16d6e00 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 4 Apr 2023 14:10:20 -0500
Subject: [PATCH 2/8] CreateGroupModal: allow adding topics

---
 .../manage-group-modal/steps/details-step.tsx | 63 ++++++++++++++++++-
 1 file changed, 62 insertions(+), 1 deletion(-)

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 66b7b4b1d..cb7dfb492 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
@@ -1,7 +1,7 @@
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { Form, FormGroup, Input, Textarea } from 'soapbox/components/ui';
+import { Form, FormGroup, Input, Streamfield, Textarea } from 'soapbox/components/ui';
 import AvatarPicker from 'soapbox/features/group/components/group-avatar-picker';
 import HeaderPicker from 'soapbox/features/group/components/group-header-picker';
 import { useAppSelector, useDebounce, useInstance } from 'soapbox/hooks';
@@ -14,6 +14,7 @@ import type { List as ImmutableList } from 'immutable';
 const messages = defineMessages({
   groupNamePlaceholder: { id: 'manage_group.fields.name_placeholder', defaultMessage: 'Group Name' },
   groupDescriptionPlaceholder: { id: 'manage_group.fields.description_placeholder', defaultMessage: 'Description' },
+  hashtagPlaceholder: { id: 'manage_group.fields.hashtag_placeholder', defaultMessage: 'Add a topic' },
 });
 
 interface IDetailsStep {
@@ -29,6 +30,7 @@ const DetailsStep: React.FC<IDetailsStep> = ({ params, onChange }) => {
   const {
     display_name: displayName = '',
     note = '',
+    tags = [''],
   } = params;
 
   const debouncedName = debounce(displayName, 300);
@@ -63,6 +65,29 @@ const DetailsStep: React.FC<IDetailsStep> = ({ params, onChange }) => {
     };
   };
 
+  const handleTagsChange = (tags: string[]) => {
+    onChange({
+      ...params,
+      tags,
+    });
+  };
+
+  const handleAddTag = () => {
+    onChange({
+      ...params,
+      tags: [...tags, ''],
+    });
+  };
+
+  const handleRemoveTag = (i: number) => {
+    const newTags = [...tags];
+    newTags.splice(i, 1);
+    onChange({
+      ...params,
+      tags: newTags,
+    });
+  };
+
   return (
     <Form>
       <div className='relative mb-12 flex'>
@@ -95,8 +120,44 @@ const DetailsStep: React.FC<IDetailsStep> = ({ params, onChange }) => {
           maxLength={Number(instance.configuration.getIn(['groups', 'max_characters_description']))}
         />
       </FormGroup>
+
+      <div className='pb-6'>
+        <Streamfield
+          label='Topics'
+          hint='Add up to 3 keywords that will serve as core topics of discussion in the group.'
+          component={HashtagField}
+          values={tags.map((t) => [t])}
+          onChange={handleTagsChange}
+          onAddItem={handleAddTag}
+          onRemoveItem={handleRemoveTag}
+          maxItems={3}
+        />
+      </div>
     </Form>
   );
 };
 
+interface IHashtagField {
+  value: string
+  onChange: (value: string) => void
+}
+
+const HashtagField: React.FC<IHashtagField> = ({ value, onChange }) => {
+  const intl = useIntl();
+
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
+    onChange(target.value);
+  };
+
+  return (
+    <Input
+      outerClassName='w-full'
+      type='text'
+      value={value}
+      onChange={handleChange}
+      placeholder={intl.formatMessage(messages.hashtagPlaceholder)}
+    />
+  );
+};
+
 export default DetailsStep;

From ae4430b9ebe6b0a3df886655e590bc6915beea8b Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 4 Apr 2023 14:54:32 -0500
Subject: [PATCH 3/8] EditGroup: allow managing topics

---
 .../group/components/group-tags-field.tsx     | 56 +++++++++++++++++++
 app/soapbox/features/group/edit-group.tsx     | 36 +++++++++++-
 .../manage-group-modal/steps/details-step.tsx | 34 ++---------
 app/soapbox/normalizers/group.ts              |  1 +
 app/soapbox/schemas/group-tag.ts              |  9 +++
 app/soapbox/schemas/group.ts                  |  4 +-
 6 files changed, 106 insertions(+), 34 deletions(-)
 create mode 100644 app/soapbox/features/group/components/group-tags-field.tsx
 create mode 100644 app/soapbox/schemas/group-tag.ts

diff --git a/app/soapbox/features/group/components/group-tags-field.tsx b/app/soapbox/features/group/components/group-tags-field.tsx
new file mode 100644
index 000000000..326fbfd8b
--- /dev/null
+++ b/app/soapbox/features/group/components/group-tags-field.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { Input, Streamfield } from 'soapbox/components/ui';
+
+const messages = defineMessages({
+  hashtagPlaceholder: { id: 'manage_group.fields.hashtag_placeholder', defaultMessage: 'Add a topic' },
+});
+
+interface IGroupTagsField {
+  tags: string[]
+  onChange(tags: string[]): void
+  onAddItem(): void
+  onRemoveItem(i: number): void
+  maxItems?: number
+}
+
+const GroupTagsField: React.FC<IGroupTagsField> = ({ tags, onChange, onAddItem, onRemoveItem, maxItems = 3 }) => {
+  return (
+    <Streamfield
+      label='Topics'
+      hint='Add up to 3 keywords that will serve as core topics of discussion in the group.'
+      component={HashtagField}
+      values={tags}
+      onChange={onChange}
+      onAddItem={onAddItem}
+      onRemoveItem={onRemoveItem}
+      maxItems={maxItems}
+    />
+  );
+};
+
+interface IHashtagField {
+  value: string
+  onChange: (value: string) => void
+}
+
+const HashtagField: React.FC<IHashtagField> = ({ value, onChange }) => {
+  const intl = useIntl();
+
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
+    onChange(target.value);
+  };
+
+  return (
+    <Input
+      outerClassName='w-full'
+      type='text'
+      value={value}
+      onChange={handleChange}
+      placeholder={intl.formatMessage(messages.hashtagPlaceholder)}
+    />
+  );
+};
+
+export default GroupTagsField;
\ No newline at end of file
diff --git a/app/soapbox/features/group/edit-group.tsx b/app/soapbox/features/group/edit-group.tsx
index 23ff9ed98..bb8c622c9 100644
--- a/app/soapbox/features/group/edit-group.tsx
+++ b/app/soapbox/features/group/edit-group.tsx
@@ -1,15 +1,16 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import Icon from 'soapbox/components/icon';
-import { Button, Column, Form, FormActions, FormGroup, Input, Spinner, Textarea } from 'soapbox/components/ui';
+import { Button, Column, Form, FormActions, FormGroup, Icon, Input, Spinner, Textarea } from 'soapbox/components/ui';
 import { useAppSelector, useInstance } from 'soapbox/hooks';
 import { useGroup, useUpdateGroup } from 'soapbox/hooks/api';
 import { useImageField, useTextField } from 'soapbox/hooks/forms';
+import toast from 'soapbox/toast';
 import { isDefaultAvatar, isDefaultHeader } from 'soapbox/utils/accounts';
 
 import AvatarPicker from './components/group-avatar-picker';
 import HeaderPicker from './components/group-header-picker';
+import GroupTagsField from './components/group-tags-field';
 
 import type { List as ImmutableList } from 'immutable';
 
@@ -20,6 +21,7 @@ const messages = defineMessages({
   heading: { id: 'navigation_bar.edit_group', defaultMessage: 'Edit Group' },
   groupNamePlaceholder: { id: 'manage_group.fields.name_placeholder', defaultMessage: 'Group Name' },
   groupDescriptionPlaceholder: { id: 'manage_group.fields.description_placeholder', defaultMessage: 'Description' },
+  success: { id: 'manage_group.success', defaultMessage: 'Group saved!' },
 });
 
 interface IEditGroup {
@@ -36,6 +38,7 @@ const EditGroup: React.FC<IEditGroup> = ({ params: { id: groupId } }) => {
   const { updateGroup } = useUpdateGroup(groupId);
 
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [tags, setTags] = useState<string[]>(['']);
 
   const avatar = useImageField({ maxPixels: 400 * 400, preview: nonDefaultAvatar(group?.avatar) });
   const header = useImageField({ maxPixels: 1920 * 1080, preview: nonDefaultHeader(group?.header) });
@@ -58,11 +61,29 @@ const EditGroup: React.FC<IEditGroup> = ({ params: { id: groupId } }) => {
       note: note.value,
       avatar: avatar.file,
       header: header.file,
+      tags,
     });
 
+    toast.success(intl.formatMessage(messages.success));
     setIsSubmitting(false);
   }
 
+  const handleAddTag = () => {
+    setTags([...tags, '']);
+  };
+
+  const handleRemoveTag = (i: number) => {
+    const newTags = [...tags];
+    newTags.splice(i, 1);
+    setTags(newTags);
+  };
+
+  useEffect(() => {
+    if (group) {
+      setTags(group.tags.map((t) => t.name));
+    }
+  }, [group?.id]);
+
   if (isLoading) {
     return <Spinner />;
   }
@@ -98,6 +119,15 @@ const EditGroup: React.FC<IEditGroup> = ({ params: { id: groupId } }) => {
           />
         </FormGroup>
 
+        <div className='pb-6'>
+          <GroupTagsField
+            tags={tags}
+            onChange={setTags}
+            onAddItem={handleAddTag}
+            onRemoveItem={handleRemoveTag}
+          />
+        </div>
+
         <FormActions>
           <Button theme='primary' type='submit' disabled={isSubmitting} block>
             <FormattedMessage id='edit_profile.save' defaultMessage='Save' />
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 cb7dfb492..d5e59e575 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
@@ -1,9 +1,10 @@
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { Form, FormGroup, Input, Streamfield, Textarea } from 'soapbox/components/ui';
+import { Form, FormGroup, Input, Textarea } from 'soapbox/components/ui';
 import AvatarPicker from 'soapbox/features/group/components/group-avatar-picker';
 import HeaderPicker from 'soapbox/features/group/components/group-header-picker';
+import GroupTagsField from 'soapbox/features/group/components/group-tags-field';
 import { useAppSelector, useDebounce, useInstance } from 'soapbox/hooks';
 import { CreateGroupParams, useGroupValidation } from 'soapbox/hooks/api';
 import { usePreview } from 'soapbox/hooks/forms';
@@ -122,42 +123,15 @@ const DetailsStep: React.FC<IDetailsStep> = ({ params, onChange }) => {
       </FormGroup>
 
       <div className='pb-6'>
-        <Streamfield
-          label='Topics'
-          hint='Add up to 3 keywords that will serve as core topics of discussion in the group.'
-          component={HashtagField}
-          values={tags.map((t) => [t])}
+        <GroupTagsField
+          tags={tags}
           onChange={handleTagsChange}
           onAddItem={handleAddTag}
           onRemoveItem={handleRemoveTag}
-          maxItems={3}
         />
       </div>
     </Form>
   );
 };
 
-interface IHashtagField {
-  value: string
-  onChange: (value: string) => void
-}
-
-const HashtagField: React.FC<IHashtagField> = ({ value, onChange }) => {
-  const intl = useIntl();
-
-  const handleChange: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
-    onChange(target.value);
-  };
-
-  return (
-    <Input
-      outerClassName='w-full'
-      type='text'
-      value={value}
-      onChange={handleChange}
-      placeholder={intl.formatMessage(messages.hashtagPlaceholder)}
-    />
-  );
-};
-
 export default DetailsStep;
diff --git a/app/soapbox/normalizers/group.ts b/app/soapbox/normalizers/group.ts
index e50cc9af3..44b2a48d2 100644
--- a/app/soapbox/normalizers/group.ts
+++ b/app/soapbox/normalizers/group.ts
@@ -33,6 +33,7 @@ export const GroupRecord = ImmutableRecord({
   members_count: 0,
   note: '',
   statuses_visibility: 'public',
+  tags: [],
   uri: '',
   url: '',
 
diff --git a/app/soapbox/schemas/group-tag.ts b/app/soapbox/schemas/group-tag.ts
new file mode 100644
index 000000000..cc64deec6
--- /dev/null
+++ b/app/soapbox/schemas/group-tag.ts
@@ -0,0 +1,9 @@
+import { z } from 'zod';
+
+const groupTagSchema = z.object({
+  name: z.string(),
+});
+
+type GroupTag = z.infer<typeof groupTagSchema>;
+
+export { groupTagSchema, type GroupTag };
diff --git a/app/soapbox/schemas/group.ts b/app/soapbox/schemas/group.ts
index 48e3e77af..cd62f5860 100644
--- a/app/soapbox/schemas/group.ts
+++ b/app/soapbox/schemas/group.ts
@@ -6,6 +6,7 @@ import { unescapeHTML } from 'soapbox/utils/html';
 
 import { customEmojiSchema } from './custom-emoji';
 import { groupRelationshipSchema } from './group-relationship';
+import { groupTagSchema } from './group-tag';
 import { filteredArray, makeCustomEmojiMap } from './utils';
 
 const avatarMissing = require('assets/images/avatar-missing.png');
@@ -28,6 +29,7 @@ const groupSchema = z.object({
   note: z.string().transform(note => note === '<p></p>' ? '' : note).catch(''),
   relationship: groupRelationshipSchema.nullable().catch(null), // Dummy field to be overwritten later
   statuses_visibility: z.string().catch('public'),
+  tags: z.array(groupTagSchema).catch([]),
   uri: z.string().catch(''),
   url: z.string().catch(''),
 }).transform(group => {
@@ -46,4 +48,4 @@ const groupSchema = z.object({
 
 type Group = z.infer<typeof groupSchema>;
 
-export { groupSchema, Group };
\ No newline at end of file
+export { groupSchema, type Group };
\ No newline at end of file

From 456ed852c4d86d5f29896b95225056c31bb5c09e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 4 Apr 2023 14:59:52 -0500
Subject: [PATCH 4/8] yarn i18n

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

diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index af5a058c6..e9a259771 100644
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@@ -948,6 +948,7 @@
   "manage_group.fields.cannot_change_hint": "This cannot be changed after the group is created.",
   "manage_group.fields.description_label": "Description",
   "manage_group.fields.description_placeholder": "Description",
+  "manage_group.fields.hashtag_placeholder": "Add a topic",
   "manage_group.fields.name_help": "This cannot be changed after the group is created.",
   "manage_group.fields.name_label": "Group name (required)",
   "manage_group.fields.name_label_optional": "Group name",
@@ -961,6 +962,7 @@
   "manage_group.privacy.private.label": "Private (Owner approval required)",
   "manage_group.privacy.public.hint": "Discoverable. Anyone can join.",
   "manage_group.privacy.public.label": "Public",
+  "manage_group.success": "Group saved!",
   "manage_group.tagline": "Groups connect you with others based on shared interests.",
   "media_panel.empty_message": "No media found.",
   "media_panel.title": "Media",

From 088f7e0b0ec647de4d1bb07347683b3c9ffc5698 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 5 Apr 2023 15:55:29 -0500
Subject: [PATCH 5/8] GroupTagsField: i18n

---
 app/soapbox/features/group/components/group-tags-field.tsx | 6 +++---
 app/soapbox/locales/en.json                                | 2 ++
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/group/components/group-tags-field.tsx b/app/soapbox/features/group/components/group-tags-field.tsx
index 326fbfd8b..e4592a6e4 100644
--- a/app/soapbox/features/group/components/group-tags-field.tsx
+++ b/app/soapbox/features/group/components/group-tags-field.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { Input, Streamfield } from 'soapbox/components/ui';
 
@@ -18,8 +18,8 @@ interface IGroupTagsField {
 const GroupTagsField: React.FC<IGroupTagsField> = ({ tags, onChange, onAddItem, onRemoveItem, maxItems = 3 }) => {
   return (
     <Streamfield
-      label='Topics'
-      hint='Add up to 3 keywords that will serve as core topics of discussion in the group.'
+      label={<FormattedMessage id='group.tags.label' defaultMessage='Tags' />}
+      hint={<FormattedMessage id='group.tags.hint' defaultMessage='Add up to 3 keywords that will serve as core topics of discussion in the group.' />}
       component={HashtagField}
       values={tags}
       onChange={onChange}
diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index e9a259771..bc3423213 100644
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@@ -806,6 +806,8 @@
   "group.role.owner": "Owner",
   "group.tabs.all": "All",
   "group.tabs.members": "Members",
+  "group.tags.hint": "Add up to 3 keywords that will serve as core topics of discussion in the group.",
+  "group.tags.label": "Tags",
   "group.upload_banner": "Upload photo",
   "groups.discover.popular.empty": "Unable to fetch popular groups at this time. Please check back later.",
   "groups.discover.popular.show_more": "Show More",

From a875163ed90b53ba7d53463bccb13a9a8f698c65 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 5 Apr 2023 15:56:42 -0500
Subject: [PATCH 6/8] Streamfield: remove "Add" button when maxItems is reached

---
 app/soapbox/components/ui/streamfield/streamfield.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/soapbox/components/ui/streamfield/streamfield.tsx b/app/soapbox/components/ui/streamfield/streamfield.tsx
index fadcce46b..5d560bf78 100644
--- a/app/soapbox/components/ui/streamfield/streamfield.tsx
+++ b/app/soapbox/components/ui/streamfield/streamfield.tsx
@@ -87,10 +87,9 @@ const Streamfield: React.FC<IStreamfield> = ({
         </Stack>
       )}
 
-      {onAddItem && (
+      {(onAddItem && (values.length < maxItems)) && (
         <Button
           onClick={onAddItem}
-          disabled={values.length >= maxItems}
           theme='secondary'
           block
         >

From 7a3f98ca64d85c805055af29658ee10650e04bd2 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 5 Apr 2023 15:57:33 -0500
Subject: [PATCH 7/8] EditGroup: remove toast

---
 app/soapbox/features/group/edit-group.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/soapbox/features/group/edit-group.tsx b/app/soapbox/features/group/edit-group.tsx
index bb8c622c9..1e8024f6f 100644
--- a/app/soapbox/features/group/edit-group.tsx
+++ b/app/soapbox/features/group/edit-group.tsx
@@ -5,7 +5,6 @@ import { Button, Column, Form, FormActions, FormGroup, Icon, Input, Spinner, Tex
 import { useAppSelector, useInstance } from 'soapbox/hooks';
 import { useGroup, useUpdateGroup } from 'soapbox/hooks/api';
 import { useImageField, useTextField } from 'soapbox/hooks/forms';
-import toast from 'soapbox/toast';
 import { isDefaultAvatar, isDefaultHeader } from 'soapbox/utils/accounts';
 
 import AvatarPicker from './components/group-avatar-picker';
@@ -64,7 +63,6 @@ const EditGroup: React.FC<IEditGroup> = ({ params: { id: groupId } }) => {
       tags,
     });
 
-    toast.success(intl.formatMessage(messages.success));
     setIsSubmitting(false);
   }
 

From 749d6f0889bb8328c7f5b5e9d52a5ce099f317eb Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 5 Apr 2023 15:58:13 -0500
Subject: [PATCH 8/8] Streamfield: add space between inputs

---
 app/soapbox/components/ui/streamfield/streamfield.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/components/ui/streamfield/streamfield.tsx b/app/soapbox/components/ui/streamfield/streamfield.tsx
index 5d560bf78..bb2ca0ba5 100644
--- a/app/soapbox/components/ui/streamfield/streamfield.tsx
+++ b/app/soapbox/components/ui/streamfield/streamfield.tsx
@@ -69,7 +69,7 @@ const Streamfield: React.FC<IStreamfield> = ({
       </Stack>
 
       {(values.length > 0) && (
-        <Stack>
+        <Stack space={1}>
           {values.map((value, i) => value?._destroy ? null : (
             <HStack space={2} alignItems='center'>
               <Component key={i} onChange={handleChange(i)} value={value} />