feat: display past chat members

deltachat · Jan 21, 2025 · 29da587 · 29da587
1 parent 0124a79
commit 29da587
Showing 1 changed file with 36 additions and 0 deletions.
diff --git a/packages/frontend/src/components/dialogs/ViewGroup.tsx b/packages/frontend/src/components/dialogs/ViewGroup.tsx
@@ -123,6 +123,7 @@ function ViewGroupInner(
   const chatDisabled = !chat.canSend
 
   const groupMemberContactListWrapperRef = useRef<HTMLDivElement>(null)
+  const groupPastMemberContactListWrapperRef = useRef<HTMLDivElement>(null)
   const relatedChatsListWrapperRef = useRef<HTMLDivElement>(null)
 
   const {
@@ -136,6 +137,14 @@ function ViewGroupInner(
     setGroupImage,
   } = useGroup(accountId, chat)
 
+  const [pastContacts, setPastContacts] = useState([])
+
+  BackendRemote.rpc
+    .getContactsByIds(accountId, group.pastContactIds)
+    .then(pastContacts => {
+      setPastContacts(Object.values(pastContacts))
+    })
+
   useEffect(() => {
     return onDCEvent(accountId, 'ContactsChanged', () => {
       BackendRemote.rpc
@@ -316,6 +325,33 @@ function ViewGroupInner(
                 />
               </RovingTabindexProvider>
             </div>
+            {pastContacts.length > 0 && (
+              <>
+                <div className='group-separator'>
+                  {pastContacts.length} Past Members
+                </div>
+                <div
+                  className='group-member-contact-list-wrapper'
+                  ref={groupPastMemberContactListWrapperRef}
+                >
+                  <RovingTabindexProvider
+                    wrapperElementRef={groupPastMemberContactListWrapperRef}
+                  >
+                    <ContactList
+                      contacts={pastContacts}
+                      showRemove={false}
+                      onClick={contact => {
+                        if (contact.id === C.DC_CONTACT_ID_SELF) {
+                          return
+                        }
+                        setProfileContact(contact)
+                      }}
+                      onRemoveClick={showRemoveGroupMemberConfirmationDialog}
+                    />
+                  </RovingTabindexProvider>
+                </div>
+              </>
+            )}
           </DialogBody>
         </>
       )}