From 609a25fd8d132b12d719bee8ddc5019c1b8bcd13 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 29 Mar 2023 12:21:43 -0500
Subject: [PATCH] Groups: add dot to group with pending membership requests

---
 app/soapbox/components/group-card.tsx         | 8 +++++++-
 app/soapbox/features/groups/index.tsx         | 4 +---
 app/soapbox/normalizers/group-relationship.ts | 1 +
 app/soapbox/schemas/group-relationship.ts     | 1 +
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/components/group-card.tsx b/app/soapbox/components/group-card.tsx
index 6d616acba..7b9fa6458 100644
--- a/app/soapbox/components/group-card.tsx
+++ b/app/soapbox/components/group-card.tsx
@@ -43,7 +43,13 @@ const GroupCard: React.FC<IGroupCard> = ({ group }) => {
 
       {/* Group Info */}
       <Stack alignItems='center' justifyContent='end' grow className='basis-1/2 py-4' space={0.5}>
-        <Text size='lg' weight='bold' dangerouslySetInnerHTML={{ __html: group.display_name_html }} />
+        <HStack alignItems='center' space={1.5}>
+          <Text size='lg' weight='bold' dangerouslySetInnerHTML={{ __html: group.display_name_html }} />
+
+          {group.relationship?.pending_requests && (
+            <div className='h-2 w-2 rounded-full bg-secondary-500' />
+          )}
+        </HStack>
 
         <HStack className='text-gray-700 dark:text-gray-600' space={2} wrap>
           <GroupRelationship group={group} />
diff --git a/app/soapbox/features/groups/index.tsx b/app/soapbox/features/groups/index.tsx
index 335588794..7c392d28d 100644
--- a/app/soapbox/features/groups/index.tsx
+++ b/app/soapbox/features/groups/index.tsx
@@ -15,8 +15,6 @@ import PlaceholderGroupCard from '../placeholder/components/placeholder-group-ca
 import PendingGroupsRow from './components/pending-groups-row';
 import TabBar, { TabItems } from './components/tab-bar';
 
-import type { Group as GroupEntity } from 'soapbox/types/entities';
-
 const messages = defineMessages({
   placeholder: { id: 'groups.search.placeholder', defaultMessage: 'Search My Groups' },
 });
@@ -109,7 +107,7 @@ const Groups: React.FC = () => {
       >
         {groups.map((group) => (
           <Link key={group.id} to={`/groups/${group.id}`}>
-            <GroupCard group={group as GroupEntity} />
+            <GroupCard group={group} />
           </Link>
         ))}
       </ScrollableList>
diff --git a/app/soapbox/normalizers/group-relationship.ts b/app/soapbox/normalizers/group-relationship.ts
index 4ac579e6d..786295fe3 100644
--- a/app/soapbox/normalizers/group-relationship.ts
+++ b/app/soapbox/normalizers/group-relationship.ts
@@ -17,6 +17,7 @@ export const GroupRelationshipRecord = ImmutableRecord({
   notifying: null,
   requested: false,
   role: 'user' as GroupRoles,
+  pending_requests: false,
 });
 
 export const normalizeGroupRelationship = (relationship: Record<string, any>) => {
diff --git a/app/soapbox/schemas/group-relationship.ts b/app/soapbox/schemas/group-relationship.ts
index 75584955e..5bf4cae31 100644
--- a/app/soapbox/schemas/group-relationship.ts
+++ b/app/soapbox/schemas/group-relationship.ts
@@ -9,6 +9,7 @@ const groupRelationshipSchema = z.object({
   role: z.nativeEnum(GroupRoles).catch(GroupRoles.USER),
   blocked_by: z.boolean().catch(false),
   notifying: z.boolean().nullable().catch(null),
+  pending_requests: z.boolean().catch(false),
 });
 
 type GroupRelationship = z.infer<typeof groupRelationshipSchema>;