From aed41989f53543ce5079f02a1040f426045bd673 Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Mon, 3 Apr 2023 15:57:12 -0400
Subject: [PATCH 1/9] Remove 'Pending requests' from Group Manage

---
 app/soapbox/features/group/manage-group.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/group/manage-group.tsx b/app/soapbox/features/group/manage-group.tsx
index 012f762f5..723bbb5ad 100644
--- a/app/soapbox/features/group/manage-group.tsx
+++ b/app/soapbox/features/group/manage-group.tsx
@@ -7,8 +7,10 @@ import List, { ListItem } from 'soapbox/components/list';
 import { CardBody, CardHeader, CardTitle, Column, Spinner, Text } from 'soapbox/components/ui';
 import { useAppDispatch, useGroupsPath } from 'soapbox/hooks';
 import { useDeleteGroup, useGroup } from 'soapbox/hooks/api';
+import { useBackend } from 'soapbox/hooks/useBackend';
 import { GroupRoles } from 'soapbox/schemas/group-member';
 import toast from 'soapbox/toast';
+import { TRUTHSOCIAL } from 'soapbox/utils/features';
 
 import ColumnForbidden from '../ui/components/column-forbidden';
 
@@ -34,10 +36,12 @@ interface IManageGroup {
 
 const ManageGroup: React.FC<IManageGroup> = ({ params }) => {
   const { id } = params;
-  const intl = useIntl();
-  const history = useHistory();
+
+  const backend = useBackend();
   const dispatch = useAppDispatch();
   const groupsPath = useGroupsPath();
+  const history = useHistory();
+  const intl = useIntl();
 
   const { group } = useGroup(id);
 
@@ -99,7 +103,10 @@ const ManageGroup: React.FC<IManageGroup> = ({ params }) => {
         </CardHeader>
 
         <List>
-          <ListItem label={intl.formatMessage(messages.pendingRequests)} onClick={navigateToPending} />
+          {backend.software !== TRUTHSOCIAL && (
+            <ListItem label={intl.formatMessage(messages.pendingRequests)} onClick={navigateToPending} />
+          )}
+
           <ListItem label={intl.formatMessage(messages.blockedMembers)} onClick={navigateToBlocks} />
         </List>
 

From fd9fc8bb598bc8415aad6c135449fdcfd8c4501a Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Mon, 3 Apr 2023 17:01:34 -0400
Subject: [PATCH 2/9] Update icon color for Group statuses

---
 app/soapbox/components/status.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx
index 3ec072394..65291a420 100644
--- a/app/soapbox/components/status.tsx
+++ b/app/soapbox/components/status.tsx
@@ -8,7 +8,6 @@ import { mentionCompose, replyCompose } from 'soapbox/actions/compose';
 import { toggleFavourite, toggleReblog } from 'soapbox/actions/interactions';
 import { openModal } from 'soapbox/actions/modals';
 import { toggleStatusHidden, unfilterStatus } from 'soapbox/actions/statuses';
-import Icon from 'soapbox/components/icon';
 import TranslateButton from 'soapbox/components/translate-button';
 import AccountContainer from 'soapbox/containers/account-container';
 import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container';
@@ -22,7 +21,7 @@ import StatusMedia from './status-media';
 import StatusReplyMentions from './status-reply-mentions';
 import SensitiveContentOverlay from './statuses/sensitive-content-overlay';
 import StatusInfo from './statuses/status-info';
-import { Card, Stack, Text } from './ui';
+import { Card, Icon, Stack, Text } from './ui';
 
 import type {
   Account as AccountEntity,
@@ -217,7 +216,7 @@ const Status: React.FC<IStatus> = (props) => {
         <StatusInfo
           avatarSize={avatarSize}
           to={`/@${status.getIn(['account', 'acct'])}`}
-          icon={<Icon src={require('@tabler/icons/repeat.svg')} className='text-green-600' />}
+          icon={<Icon src={require('@tabler/icons/repeat.svg')} className='h-4 w-4 text-green-600' />}
           text={
             <FormattedMessage
               id='status.reblogged_by'
@@ -242,7 +241,7 @@ const Status: React.FC<IStatus> = (props) => {
       return (
         <StatusInfo
           avatarSize={avatarSize}
-          icon={<Icon src={require('@tabler/icons/pinned.svg')} className='text-gray-600 dark:text-gray-400' />}
+          icon={<Icon src={require('@tabler/icons/pinned.svg')} className='h-4 w-4 text-gray-600 dark:text-gray-400' />}
           text={
             <Text size='xs' theme='muted' weight='medium'>
               <FormattedMessage id='status.pinned' defaultMessage='Pinned post' />
@@ -255,7 +254,7 @@ const Status: React.FC<IStatus> = (props) => {
         <StatusInfo
           avatarSize={avatarSize}
           to={`/groups/${group.id}`}
-          icon={<Icon src={require('@tabler/icons/circles.svg')} className='text-gray-600 dark:text-gray-400' />}
+          icon={<Icon src={require('@tabler/icons/circles.svg')} className='h-4 w-4 text-primary-600 dark:text-accent-blue' />}
           text={
             <Text size='xs' theme='muted' weight='medium'>
               <FormattedMessage

From b959b147466a3691dec7a7b3b2bf54d7dbe9d8de Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Mon, 3 Apr 2023 17:17:03 -0400
Subject: [PATCH 3/9] Update icon color in Group timeline

---
 app/soapbox/features/group/group-timeline.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/features/group/group-timeline.tsx b/app/soapbox/features/group/group-timeline.tsx
index f718b9c87..8ab33e910 100644
--- a/app/soapbox/features/group/group-timeline.tsx
+++ b/app/soapbox/features/group/group-timeline.tsx
@@ -93,7 +93,7 @@ const GroupTimeline: React.FC<IGroupTimeline> = (props) => {
         onLoadMore={handleLoadMore}
         emptyMessage={
           <Stack space={4} className='py-6' justifyContent='center' alignItems='center'>
-            <div className='rounded-full bg-gray-200 p-4'>
+            <div className='rounded-full bg-gray-200 p-4 dark:bg-gray-800'>
               <Icon
                 src={require('@tabler/icons/message-2.svg')}
                 className='h-6 w-6 text-gray-600'

From c2902b16ec66647363898455ccbab4b56f5e6f35 Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Tue, 4 Apr 2023 06:55:33 -0400
Subject: [PATCH 4/9] Fix dark mode animation

---
 app/soapbox/components/authorize-reject-buttons.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/components/authorize-reject-buttons.tsx b/app/soapbox/components/authorize-reject-buttons.tsx
index a785c31ea..a5fddc61a 100644
--- a/app/soapbox/components/authorize-reject-buttons.tsx
+++ b/app/soapbox/components/authorize-reject-buttons.tsx
@@ -165,7 +165,7 @@ const AuthorizeRejectButton: React.FC<IAuthorizeRejectButton> = ({ theme, icon,
           src={isLoading ? require('@tabler/icons/player-stop-filled.svg') : icon}
           onClick={action}
           theme='seamless'
-          className='h-10 w-10 items-center justify-center bg-gray-900'
+          className='h-10 w-10 items-center justify-center bg-white focus:!ring-0 dark:!bg-gray-900'
           iconClassName={clsx('h-6 w-6', {
             'text-primary-500': theme === 'primary',
             'text-danger-600': theme === 'danger',

From 11b86ecad6475ba6cb9dcd407cd3ffda8fa26578 Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Tue, 4 Apr 2023 06:57:32 -0400
Subject: [PATCH 5/9] Fix theme selector icon placement

Closes https://gitlab.com/soapbox-pub/soapbox/-/issues/1406
---
 app/soapbox/features/ui/components/theme-selector.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/features/ui/components/theme-selector.tsx b/app/soapbox/features/ui/components/theme-selector.tsx
index 6f35c9673..2532b49b7 100644
--- a/app/soapbox/features/ui/components/theme-selector.tsx
+++ b/app/soapbox/features/ui/components/theme-selector.tsx
@@ -45,7 +45,7 @@ const ThemeSelector: React.FC<IThemeSelector> = ({ value, onChange }) => {
         <Select
           onChange={handleChange}
           defaultValue={value}
-          className='pl-10'
+          className='!pl-10'
         >
           <option value='system'>{intl.formatMessage(messages.system)}</option>
           <option value='light'>{intl.formatMessage(messages.light)}</option>

From a486b317d453da5e88175e780c773b8122946a38 Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Tue, 4 Apr 2023 08:11:03 -0400
Subject: [PATCH 6/9] Fetch account and relationship with entity store

---
 app/soapbox/entity-store/entities.ts          |  1 +
 app/soapbox/entity-store/hooks/useEntity.ts   |  2 +-
 .../components/group-member-list-item.tsx     | 35 +++++++++++--------
 app/soapbox/features/group/group-members.tsx  |  4 +--
 .../components/placeholder-account.tsx        |  2 +-
 .../components/placeholder-display-name.tsx   |  2 +-
 app/soapbox/hooks/api/index.ts                | 12 ++++++-
 app/soapbox/hooks/api/useAccount.ts           | 26 ++++++++++++++
 app/soapbox/hooks/api/useRelationships.ts     | 22 ++++++++++++
 app/soapbox/hooks/useLoading.ts               |  4 +--
 10 files changed, 87 insertions(+), 23 deletions(-)
 create mode 100644 app/soapbox/hooks/api/useAccount.ts
 create mode 100644 app/soapbox/hooks/api/useRelationships.ts

diff --git a/app/soapbox/entity-store/entities.ts b/app/soapbox/entity-store/entities.ts
index 44f2db3c9..7f9f84e2a 100644
--- a/app/soapbox/entity-store/entities.ts
+++ b/app/soapbox/entity-store/entities.ts
@@ -3,4 +3,5 @@ export enum Entities {
   GROUPS = 'Groups',
   GROUP_RELATIONSHIPS = 'GroupRelationships',
   GROUP_MEMBERSHIPS = 'GroupMemberships',
+  RELATIONSHIPS = 'Relationships'
 }
\ No newline at end of file
diff --git a/app/soapbox/entity-store/hooks/useEntity.ts b/app/soapbox/entity-store/hooks/useEntity.ts
index f30c9a18a..37027f73f 100644
--- a/app/soapbox/entity-store/hooks/useEntity.ts
+++ b/app/soapbox/entity-store/hooks/useEntity.ts
@@ -21,7 +21,7 @@ function useEntity<TEntity extends Entity>(
   entityFn: EntityFn<void>,
   opts: UseEntityOpts<TEntity> = {},
 ) {
-  const [isFetching, setPromise] = useLoading();
+  const [isFetching, setPromise] = useLoading(true);
   const dispatch = useAppDispatch();
 
   const [entityType, entityId] = path;
diff --git a/app/soapbox/features/group/components/group-member-list-item.tsx b/app/soapbox/features/group/components/group-member-list-item.tsx
index 10ad4e0cb..4fa3ccb7a 100644
--- a/app/soapbox/features/group/components/group-member-list-item.tsx
+++ b/app/soapbox/features/group/components/group-member-list-item.tsx
@@ -9,13 +9,14 @@ import DropdownMenu from 'soapbox/components/dropdown-menu/dropdown-menu';
 import { HStack } from 'soapbox/components/ui';
 import { deleteEntities } from 'soapbox/entity-store/actions';
 import { Entities } from 'soapbox/entity-store/entities';
-import { useAccount, useAppDispatch, useFeatures } from 'soapbox/hooks';
-import { useBlockGroupMember, useDemoteGroupMember, usePromoteGroupMember } from 'soapbox/hooks/api';
+import PlaceholderAccount from 'soapbox/features/placeholder/components/placeholder-account';
+import { useAppDispatch, useFeatures } from 'soapbox/hooks';
+import { useAccount, useBlockGroupMember, useDemoteGroupMember, usePromoteGroupMember } from 'soapbox/hooks/api';
 import { GroupRoles } from 'soapbox/schemas/group-member';
 import toast from 'soapbox/toast';
 
 import type { Menu as IMenu } from 'soapbox/components/dropdown-menu';
-import type { Account as AccountEntity, Group, GroupMember } from 'soapbox/types/entities';
+import type { Group, GroupMember } from 'soapbox/types/entities';
 
 const messages = defineMessages({
   blockConfirm: { id: 'confirmations.block_from_group.confirm', defaultMessage: 'Ban' },
@@ -51,7 +52,7 @@ const GroupMemberListItem = (props: IGroupMemberListItem) => {
   const promoteGroupMember = usePromoteGroupMember(group, member);
   const demoteGroupMember = useDemoteGroupMember(group, member);
 
-  const account = useAccount(member.account.id) as AccountEntity;
+  const { account, isLoading } = useAccount(member.account.id);
 
   // Current user role
   const isCurrentUserOwner = group.relationship?.role === GroupRoles.OWNER;
@@ -64,10 +65,10 @@ const GroupMemberListItem = (props: IGroupMemberListItem) => {
 
   const handleKickFromGroup = () => {
     dispatch(openModal('CONFIRM', {
-      message: intl.formatMessage(messages.kickFromGroupMessage, { name: account.username }),
+      message: intl.formatMessage(messages.kickFromGroupMessage, { name: account?.username }),
       confirm: intl.formatMessage(messages.kickConfirm),
-      onConfirm: () => dispatch(groupKick(group.id, account.id)).then(() =>
-        toast.success(intl.formatMessage(messages.kicked, { name: account.acct })),
+      onConfirm: () => dispatch(groupKick(group.id, account?.id as string)).then(() =>
+        toast.success(intl.formatMessage(messages.kicked, { name: account?.acct })),
       ),
     }));
   };
@@ -75,13 +76,13 @@ const GroupMemberListItem = (props: IGroupMemberListItem) => {
   const handleBlockFromGroup = () => {
     dispatch(openModal('CONFIRM', {
       heading: intl.formatMessage(messages.blockFromGroupHeading),
-      message: intl.formatMessage(messages.blockFromGroupMessage, { name: account.username }),
+      message: intl.formatMessage(messages.blockFromGroupMessage, { name: account?.username }),
       confirm: intl.formatMessage(messages.blockConfirm),
       onConfirm: () => {
         blockGroupMember({ account_ids: [member.account.id] }, {
           onSuccess() {
             dispatch(deleteEntities([member.id], Entities.GROUP_MEMBERSHIPS));
-            toast.success(intl.formatMessage(messages.blocked, { name: account.acct }));
+            toast.success(intl.formatMessage(messages.blocked, { name: account?.acct }));
           },
         });
       },
@@ -91,14 +92,14 @@ const GroupMemberListItem = (props: IGroupMemberListItem) => {
   const handleAdminAssignment = () => {
     dispatch(openModal('CONFIRM', {
       heading: intl.formatMessage(messages.promoteConfirm),
-      message: intl.formatMessage(messages.promoteConfirmMessage, { name: account.username }),
+      message: intl.formatMessage(messages.promoteConfirmMessage, { name: account?.username }),
       confirm: intl.formatMessage(messages.promoteConfirm),
       confirmationTheme: 'primary',
       onConfirm: () => {
-        promoteGroupMember({ role: GroupRoles.ADMIN, account_ids: [account.id] }, {
+        promoteGroupMember({ role: GroupRoles.ADMIN, account_ids: [account?.id] }, {
           onSuccess() {
             toast.success(
-              intl.formatMessage(messages.promotedToAdmin, { name: account.acct }),
+              intl.formatMessage(messages.promotedToAdmin, { name: account?.acct }),
             );
           },
         });
@@ -107,9 +108,9 @@ const GroupMemberListItem = (props: IGroupMemberListItem) => {
   };
 
   const handleUserAssignment = () => {
-    demoteGroupMember({ role: GroupRoles.USER, account_ids: [account.id] }, {
+    demoteGroupMember({ role: GroupRoles.USER, account_ids: [account?.id] }, {
       onSuccess() {
-        toast.success(intl.formatMessage(messages.demotedToUser, { name: account.acct }));
+        toast.success(intl.formatMessage(messages.demotedToUser, { name: account?.acct }));
       },
     });
   };
@@ -160,7 +161,11 @@ const GroupMemberListItem = (props: IGroupMemberListItem) => {
     }
 
     return items;
-  }, [group, account]);
+  }, [group, account?.id]);
+
+  if (isLoading) {
+    return <PlaceholderAccount />;
+  }
 
   return (
     <HStack alignItems='center' justifyContent='between'>
diff --git a/app/soapbox/features/group/group-members.tsx b/app/soapbox/features/group/group-members.tsx
index 2facf912f..be4185d2b 100644
--- a/app/soapbox/features/group/group-members.tsx
+++ b/app/soapbox/features/group/group-members.tsx
@@ -53,11 +53,11 @@ const GroupMembers: React.FC<IGroupMembers> = (props) => {
           </div>
         )}
       >
-        {members.map((member) => (
+        {members.map((member, idx) => (
           <GroupMemberListItem
             group={group as Group}
             member={member}
-            key={member.account.id}
+            key={idx}
           />
         ))}
       </ScrollableList>
diff --git a/app/soapbox/features/placeholder/components/placeholder-account.tsx b/app/soapbox/features/placeholder/components/placeholder-account.tsx
index 28f04adb4..c887903fd 100644
--- a/app/soapbox/features/placeholder/components/placeholder-account.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-account.tsx
@@ -18,4 +18,4 @@ const PlaceholderAccount: React.FC = () => (
   </HStack>
 );
 
-export default PlaceholderAccount;
+export default React.memo(PlaceholderAccount);
diff --git a/app/soapbox/features/placeholder/components/placeholder-display-name.tsx b/app/soapbox/features/placeholder/components/placeholder-display-name.tsx
index e09e73439..3a2e0e641 100644
--- a/app/soapbox/features/placeholder/components/placeholder-display-name.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-display-name.tsx
@@ -21,4 +21,4 @@ const PlaceholderDisplayName: React.FC<IPlaceholderDisplayName> = ({ minLength,
   );
 };
 
-export default PlaceholderDisplayName;
+export default React.memo(PlaceholderDisplayName);
diff --git a/app/soapbox/hooks/api/index.ts b/app/soapbox/hooks/api/index.ts
index f3bd400e1..f3addf56b 100644
--- a/app/soapbox/hooks/api/index.ts
+++ b/app/soapbox/hooks/api/index.ts
@@ -1,3 +1,8 @@
+/**
+ * Accounts
+ */
+export { useAccount } from './useAccount';
+
 /**
  * Groups
  */
@@ -11,4 +16,9 @@ export { useGroupValidation } from './groups/useGroupValidation';
 export { useJoinGroup } from './groups/useJoinGroup';
 export { useLeaveGroup } from './groups/useLeaveGroup';
 export { usePromoteGroupMember } from './groups/usePromoteGroupMember';
-export { useUpdateGroup } from './groups/useUpdateGroup';
\ No newline at end of file
+export { useUpdateGroup } from './groups/useUpdateGroup';
+
+/**
+ * Relationships
+ */
+export { useRelationships } from './useRelationships';
\ No newline at end of file
diff --git a/app/soapbox/hooks/api/useAccount.ts b/app/soapbox/hooks/api/useAccount.ts
new file mode 100644
index 000000000..a222d8de4
--- /dev/null
+++ b/app/soapbox/hooks/api/useAccount.ts
@@ -0,0 +1,26 @@
+import { Entities } from 'soapbox/entity-store/entities';
+import { useEntity } from 'soapbox/entity-store/hooks';
+import { type Account, accountSchema } from 'soapbox/schemas';
+
+import { useApi } from '../useApi';
+
+import { useRelationships } from './useRelationships';
+
+function useAccount(id: string) {
+  const api = useApi();
+
+  const { entity: account, ...result } = useEntity<Account>(
+    [Entities.ACCOUNTS, id],
+    () => api.get(`/api/v1/accounts/${id}`),
+    { schema: accountSchema },
+  );
+  const { relationships, isLoading } = useRelationships([account?.id as string]);
+
+  return {
+    ...result,
+    isLoading: result.isLoading || isLoading,
+    account: account ? { ...account, relationship: relationships[0] || null } : undefined,
+  };
+}
+
+export { useAccount };
\ No newline at end of file
diff --git a/app/soapbox/hooks/api/useRelationships.ts b/app/soapbox/hooks/api/useRelationships.ts
new file mode 100644
index 000000000..fde5f1017
--- /dev/null
+++ b/app/soapbox/hooks/api/useRelationships.ts
@@ -0,0 +1,22 @@
+import { Entities } from 'soapbox/entity-store/entities';
+import { useEntities } from 'soapbox/entity-store/hooks';
+import { type Relationship, relationshipSchema } from 'soapbox/schemas';
+
+import { useApi } from '../useApi';
+
+function useRelationships(ids: string[]) {
+  const api = useApi();
+
+  const { entities: relationships, ...result } = useEntities<Relationship>(
+    [Entities.RELATIONSHIPS],
+    () => api.get(`/api/v1/accounts/relationships?${ids.map(id => `id[]=${id}`).join('&')}`),
+    { schema: relationshipSchema, enabled: ids.filter(Boolean).length > 0 },
+  );
+
+  return {
+    ...result,
+    relationships,
+  };
+}
+
+export { useRelationships };
\ No newline at end of file
diff --git a/app/soapbox/hooks/useLoading.ts b/app/soapbox/hooks/useLoading.ts
index 51f15e521..a8c56c0f6 100644
--- a/app/soapbox/hooks/useLoading.ts
+++ b/app/soapbox/hooks/useLoading.ts
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
-function useLoading() {
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+function useLoading(initialState: boolean = false) {
+  const [isLoading, setIsLoading] = useState<boolean>(initialState);
 
   function setPromise<T>(promise: Promise<T>) {
     setIsLoading(true);

From 7ef2220405603f637491d9297f30fceec248fdd3 Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Tue, 4 Apr 2023 08:13:23 -0400
Subject: [PATCH 7/9] Revert change to key

---
 app/soapbox/features/group/group-members.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/group/group-members.tsx b/app/soapbox/features/group/group-members.tsx
index be4185d2b..2facf912f 100644
--- a/app/soapbox/features/group/group-members.tsx
+++ b/app/soapbox/features/group/group-members.tsx
@@ -53,11 +53,11 @@ const GroupMembers: React.FC<IGroupMembers> = (props) => {
           </div>
         )}
       >
-        {members.map((member, idx) => (
+        {members.map((member) => (
           <GroupMemberListItem
             group={group as Group}
             member={member}
-            key={idx}
+            key={member.account.id}
           />
         ))}
       </ScrollableList>

From e78bbf4e19cf4041340f8c63eedf398686285be6 Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Tue, 4 Apr 2023 06:29:09 -0400
Subject: [PATCH 8/9] Allow Admins to manage/leave Group

---
 .../components/ui/icon-button/icon-button.tsx |  8 ++-
 app/soapbox/components/ui/tag-input/tag.tsx   |  1 -
 .../__tests__/group-options-button.test.tsx   |  5 +-
 .../group/components/group-action-button.tsx  |  3 +-
 .../group/components/group-options-button.tsx | 53 ++++++++++++++++---
 app/soapbox/features/group/manage-group.tsx   |  4 +-
 .../public-layout/components/header.tsx       |  1 -
 app/soapbox/locales/en.json                   |  5 +-
 8 files changed, 58 insertions(+), 22 deletions(-)

diff --git a/app/soapbox/components/ui/icon-button/icon-button.tsx b/app/soapbox/components/ui/icon-button/icon-button.tsx
index ad9d6a517..1ece137df 100644
--- a/app/soapbox/components/ui/icon-button/icon-button.tsx
+++ b/app/soapbox/components/ui/icon-button/icon-button.tsx
@@ -11,24 +11,22 @@ interface IIconButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   src: string
   /** Text to display next ot the button. */
   text?: string
-  /** Don't render a background behind the icon. */
-  transparent?: boolean
   /** Predefined styles to display for the button. */
-  theme?: 'seamless' | 'outlined' | 'secondary'
+  theme?: 'seamless' | 'outlined' | 'secondary' | 'transparent'
   /** Override the data-testid */
   'data-testid'?: string
 }
 
 /** A clickable icon. */
 const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef<HTMLButtonElement>): JSX.Element => {
-  const { src, className, iconClassName, text, transparent = false, theme = 'seamless', ...filteredProps } = props;
+  const { src, className, iconClassName, text, theme = 'seamless', ...filteredProps } = props;
 
   return (
     <button
       ref={ref}
       type='button'
       className={clsx('flex items-center space-x-2 rounded-full p-1 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-offset-0', {
-        'bg-white dark:bg-transparent': !transparent,
+        'bg-white dark:bg-transparent': theme === 'seamless',
         'border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500': theme === 'outlined',
         'border-transparent bg-primary-100 dark:bg-primary-800 hover:bg-primary-50 dark:hover:bg-primary-700 focus:bg-primary-100 dark:focus:bg-primary-800 text-primary-500 dark:text-primary-200': theme === 'secondary',
         'opacity-50': filteredProps.disabled,
diff --git a/app/soapbox/components/ui/tag-input/tag.tsx b/app/soapbox/components/ui/tag-input/tag.tsx
index 5587d3927..e18c2af58 100644
--- a/app/soapbox/components/ui/tag-input/tag.tsx
+++ b/app/soapbox/components/ui/tag-input/tag.tsx
@@ -20,7 +20,6 @@ const Tag: React.FC<ITag> = ({ tag, onDelete }) => {
         iconClassName='h-4 w-4'
         src={require('@tabler/icons/x.svg')}
         onClick={() => onDelete(tag)}
-        transparent
       />
     </div>
   );
diff --git a/app/soapbox/features/group/components/__tests__/group-options-button.test.tsx b/app/soapbox/features/group/components/__tests__/group-options-button.test.tsx
index 4d7779799..8704b9351 100644
--- a/app/soapbox/features/group/components/__tests__/group-options-button.test.tsx
+++ b/app/soapbox/features/group/components/__tests__/group-options-button.test.tsx
@@ -40,10 +40,11 @@ describe('<GroupOptionsButton />', () => {
       });
     });
 
-    it('should render null', () => {
+    it('should render one option for leaving the group', () => {
       render(<GroupOptionsButton group={group} />);
 
-      expect(screen.queryAllByTestId('dropdown-menu-button')).toHaveLength(0);
+      // Leave group option only
+      expect(screen.queryAllByTestId('dropdown-menu-button')).toHaveLength(1);
     });
   });
 
diff --git a/app/soapbox/features/group/components/group-action-button.tsx b/app/soapbox/features/group/components/group-action-button.tsx
index 3874d4ae9..f7bf14110 100644
--- a/app/soapbox/features/group/components/group-action-button.tsx
+++ b/app/soapbox/features/group/components/group-action-button.tsx
@@ -36,6 +36,7 @@ const GroupActionButton = ({ group }: IGroupActionButton) => {
   const isRequested = group.relationship?.requested;
   const isNonMember = !group.relationship?.member && !isRequested;
   const isOwner = group.relationship?.role === GroupRoles.OWNER;
+  const isAdmin = group.relationship?.role === GroupRoles.ADMIN;
   const isBlocked = group.relationship?.blocked_by;
 
   const onJoinGroup = () => joinGroup.mutate({}, {
@@ -73,7 +74,7 @@ const GroupActionButton = ({ group }: IGroupActionButton) => {
     return null;
   }
 
-  if (isOwner) {
+  if (isOwner || isAdmin) {
     return (
       <Button
         theme='secondary'
diff --git a/app/soapbox/features/group/components/group-options-button.tsx b/app/soapbox/features/group/components/group-options-button.tsx
index b6e83ae06..d3f877292 100644
--- a/app/soapbox/features/group/components/group-options-button.tsx
+++ b/app/soapbox/features/group/components/group-options-button.tsx
@@ -1,15 +1,23 @@
 import React, { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
+import { openModal } from 'soapbox/actions/modals';
 import { initReport, ReportableEntities } from 'soapbox/actions/reports';
 import DropdownMenu, { Menu } from 'soapbox/components/dropdown-menu';
 import { IconButton } from 'soapbox/components/ui';
 import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
+import { useLeaveGroup } from 'soapbox/hooks/api';
 import { GroupRoles } from 'soapbox/schemas/group-member';
+import toast from 'soapbox/toast';
 
 import type { Account, Group } from 'soapbox/types/entities';
 
 const messages = defineMessages({
+  confirmationConfirm: { id: 'confirmations.leave_group.confirm', defaultMessage: 'Leave' },
+  confirmationHeading: { id: 'confirmations.leave_group.heading', defaultMessage: 'Leave group' },
+  confirmationMessage: { id: 'confirmations.leave_group.message', defaultMessage: 'You are about to leave the group. Do you want to continue?' },
+  leave: { id: 'group.leave.label', defaultMessage: 'Leave' },
+  leaveSuccess: { id: 'group.leave.success', defaultMessage: 'Left the group' },
   report: { id: 'group.report.label', defaultMessage: 'Report' },
 });
 
@@ -21,19 +29,48 @@ const GroupOptionsButton = ({ group }: IGroupActionButton) => {
   const account = useOwnAccount();
   const dispatch = useAppDispatch();
   const intl = useIntl();
+  const leaveGroup = useLeaveGroup(group);
 
   const isMember = group.relationship?.role === GroupRoles.USER;
+  const isAdmin = group.relationship?.role === GroupRoles.ADMIN;
   const isBlocked = group.relationship?.blocked_by;
 
-  const menu: Menu = useMemo(() => ([
-    {
-      text: intl.formatMessage(messages.report),
-      icon: require('@tabler/icons/flag.svg'),
-      action: () => dispatch(initReport(ReportableEntities.GROUP, account as Account, { group })),
-    },
-  ]), []);
+  const onLeaveGroup = () =>
+    dispatch(openModal('CONFIRM', {
+      heading: intl.formatMessage(messages.confirmationHeading),
+      message: intl.formatMessage(messages.confirmationMessage),
+      confirm: intl.formatMessage(messages.confirmationConfirm),
+      onConfirm: () => leaveGroup.mutate(group.relationship?.id as string, {
+        onSuccess() {
+          leaveGroup.invalidate();
+          toast.success(intl.formatMessage(messages.leaveSuccess));
+        },
+      }),
+    }));
 
-  if (isBlocked || !isMember || menu.length === 0) {
+  const menu: Menu = useMemo(() => {
+    const items = [];
+
+    if (isMember) {
+      items.push({
+        text: intl.formatMessage(messages.report),
+        icon: require('@tabler/icons/flag.svg'),
+        action: () => dispatch(initReport(ReportableEntities.GROUP, account as Account, { group })),
+      });
+    }
+
+    if (isAdmin) {
+      items.push({
+        text: intl.formatMessage(messages.leave),
+        icon: require('@tabler/icons/logout.svg'),
+        action: onLeaveGroup,
+      });
+    }
+
+    return items;
+  }, [isMember, isAdmin]);
+
+  if (isBlocked || menu.length === 0) {
     return null;
   }
 
diff --git a/app/soapbox/features/group/manage-group.tsx b/app/soapbox/features/group/manage-group.tsx
index 723bbb5ad..12dc0b11b 100644
--- a/app/soapbox/features/group/manage-group.tsx
+++ b/app/soapbox/features/group/manage-group.tsx
@@ -19,8 +19,8 @@ type RouteParams = { id: string };
 const messages = defineMessages({
   heading: { id: 'column.manage_group', defaultMessage: 'Manage group' },
   editGroup: { id: 'manage_group.edit_group', defaultMessage: 'Edit group' },
-  pendingRequests: { id: 'manage_group.pending_requests', defaultMessage: 'Pending requests' },
-  blockedMembers: { id: 'manage_group.blocked_members', defaultMessage: 'Banned members' },
+  pendingRequests: { id: 'manage_group.pending_requests', defaultMessage: 'Pending Requests' },
+  blockedMembers: { id: 'manage_group.blocked_members', defaultMessage: 'Banned Members' },
   deleteGroup: { id: 'manage_group.delete_group', defaultMessage: 'Delete group' },
   deleteConfirm: { id: 'confirmations.delete_group.confirm', defaultMessage: 'Delete' },
   deleteHeading: { id: 'confirmations.delete_group.heading', defaultMessage: 'Delete group' },
diff --git a/app/soapbox/features/public-layout/components/header.tsx b/app/soapbox/features/public-layout/components/header.tsx
index 64e273e26..caa5a3fa3 100644
--- a/app/soapbox/features/public-layout/components/header.tsx
+++ b/app/soapbox/features/public-layout/components/header.tsx
@@ -147,7 +147,6 @@ const Header = () => {
                     src={require('@tabler/icons/help.svg')}
                     className='cursor-pointer bg-transparent text-gray-700 hover:text-gray-800 dark:text-gray-600 dark:hover:text-gray-500'
                     iconClassName='h-5 w-5'
-                    transparent
                   />
                 </Tooltip>
               </Link>
diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index 2991449aa..35d157dbb 100644
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@@ -786,6 +786,7 @@
   "group.join.request_success": "Request sent to group owner",
   "group.join.success": "Group joined successfully!",
   "group.leave": "Leave Group",
+  "group.leave.label": "Leave",
   "group.leave.success": "Left the group",
   "group.manage": "Manage Group",
   "group.popover.action": "View Group",
@@ -933,7 +934,7 @@
   "login_external.errors.instance_fail": "The instance returned an error.",
   "login_external.errors.network_fail": "Connection failed. Is a browser extension blocking it?",
   "login_form.header": "Sign In",
-  "manage_group.blocked_members": "Banned members",
+  "manage_group.blocked_members": "Banned 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.",
@@ -954,7 +955,7 @@
   "manage_group.fields.name_placeholder": "Group Name",
   "manage_group.get_started": "Let’s get started!",
   "manage_group.next": "Next",
-  "manage_group.pending_requests": "Pending requests",
+  "manage_group.pending_requests": "Pending Requests",
   "manage_group.privacy.hint": "These settings cannot be changed later.",
   "manage_group.privacy.label": "Privacy settings",
   "manage_group.privacy.private.hint": "Discoverable. Users can join after their request is approved.",

From f20dade50be8bc133d7f303787a3992b565c431c Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Tue, 4 Apr 2023 06:39:49 -0400
Subject: [PATCH 9/9] Update entity in store after canceling request

---
 .../group/components/group-action-button.tsx        | 10 +++++++---
 .../hooks/api/groups/useCancelMembershipRequest.ts  | 13 +++++++------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/app/soapbox/features/group/components/group-action-button.tsx b/app/soapbox/features/group/components/group-action-button.tsx
index f7bf14110..45e8534b9 100644
--- a/app/soapbox/features/group/components/group-action-button.tsx
+++ b/app/soapbox/features/group/components/group-action-button.tsx
@@ -3,14 +3,14 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
 import { Button } from 'soapbox/components/ui';
-import { deleteEntities } from 'soapbox/entity-store/actions';
+import { importEntities } from 'soapbox/entity-store/actions';
 import { Entities } from 'soapbox/entity-store/entities';
 import { useAppDispatch } from 'soapbox/hooks';
 import { useCancelMembershipRequest, useJoinGroup, useLeaveGroup } from 'soapbox/hooks/api';
 import { GroupRoles } from 'soapbox/schemas/group-member';
 import toast from 'soapbox/toast';
 
-import type { Group } from 'soapbox/types/entities';
+import type { Group, GroupRelationship } from 'soapbox/types/entities';
 
 interface IGroupActionButton {
   group: Group
@@ -66,7 +66,11 @@ const GroupActionButton = ({ group }: IGroupActionButton) => {
 
   const onCancelRequest = () => cancelRequest.mutate({}, {
     onSuccess() {
-      dispatch(deleteEntities([group.id], Entities.GROUP_RELATIONSHIPS));
+      const entity = {
+        ...group.relationship as GroupRelationship,
+        requested: false,
+      };
+      dispatch(importEntities([entity], Entities.GROUP_RELATIONSHIPS));
     },
   });
 
diff --git a/app/soapbox/hooks/api/groups/useCancelMembershipRequest.ts b/app/soapbox/hooks/api/groups/useCancelMembershipRequest.ts
index 3aad33f9c..c8b650dee 100644
--- a/app/soapbox/hooks/api/groups/useCancelMembershipRequest.ts
+++ b/app/soapbox/hooks/api/groups/useCancelMembershipRequest.ts
@@ -1,15 +1,16 @@
 import { Entities } from 'soapbox/entity-store/entities';
-import { useEntityActions } from 'soapbox/entity-store/hooks';
-import { useOwnAccount } from 'soapbox/hooks';
+import { useCreateEntity } from 'soapbox/entity-store/hooks';
+import { useApi, useOwnAccount } from 'soapbox/hooks';
 
-import type { Group, GroupRelationship } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas';
 
 function useCancelMembershipRequest(group: Group) {
+  const api = useApi();
   const me = useOwnAccount();
 
-  const { createEntity, isLoading } = useEntityActions<GroupRelationship>(
-    [Entities.GROUP_RELATIONSHIPS, group.id],
-    { post: `/api/v1/groups/${group.id}/membership_requests/${me?.id}/reject` },
+  const { createEntity, isLoading } = useCreateEntity(
+    [Entities.GROUP_RELATIONSHIPS],
+    () => api.post(`/api/v1/groups/${group.id}/membership_requests/${me?.id}/reject`),
   );
 
   return {