Add related chats to group profile

deltachat · Sep 7, 2023 · e6901eb · e6901eb
1 parent 8e3ecd3
commit e6901eb
Showing 1 changed file with 49 additions and 0 deletions.
diff --git a/src/renderer/components/dialogs/ViewGroup.tsx b/src/renderer/components/dialogs/ViewGroup.tsx
@@ -6,9 +6,13 @@ import {
   DeltaDialogBody,
   DeltaDialogOkCancelFooter,
 } from './DeltaDialog'
+import ChatListItem from '../chat/ChatListItem'
 import { useContactSearch, AddMemberInnerDialog } from './CreateChat'
 import { QrCodeShowQrInner } from './QrCode'
+import { selectChat } from '../helpers/ChatMethods'
+import { useThemeCssVar } from '../../ThemeManager'
 import { ContactList2, useContactsMap } from '../contact/ContactList'
+import { useLogicVirtualChatList, ChatListPart } from '../chat/ChatList'
 import {
   PseudoListItemShowQrCode,
   PseudoListItemAddMember,
@@ -136,6 +140,17 @@ function ViewGroupInner(props: {
   const { onClose, chat, isBroadcast } = props
   const tx = useTranslationFunction()
 
+  const [chatListIds, setChatListIds] = useState<[number, number][]>([])
+
+  useEffect(() => {
+    BackendRemote.rpc
+      .getSimilarChatlistEntries(selectedAccountId(), chat.id)
+      .then(setChatListIds)
+  }, [chat.id])
+
+  const { isChatLoaded, loadChats, chatCache } =
+    useLogicVirtualChatList(chatListIds)
+
   const chatDisabled = !chat.canSend
 
   const {
@@ -207,6 +222,14 @@ function ViewGroupInner(props: {
     null
   )
 
+  const onChatClick = (chatId: number) => {
+    selectChat(chatId)
+    onClose()
+  }
+
+  const CHATLISTITEM_CHAT_HEIGHT =
+    Number(useThemeCssVar('--SPECIAL-chatlist-item-chat-height')) || 64
+
   return (
     <>
       {!profileContact && (
@@ -238,6 +261,32 @@ function ViewGroupInner(props: {
                   {groupName} {chat.isProtected && <InlineVerifiedIcon />}
                 </p>
               </div>
+              <div className='group-separator'>
+                {tx('profile_shared_chats')}
+              </div>
+              <div style={{ marginLeft: '-20px' }}>
+                <ChatListPart
+                  isRowLoaded={isChatLoaded}
+                  loadMoreRows={loadChats}
+                  rowCount={chatListIds.length}
+                  width={'400px'}
+                  height={CHATLISTITEM_CHAT_HEIGHT * chatListIds.length}
+                  itemKey={index => 'key' + chatListIds[index]}
+                  itemHeight={CHATLISTITEM_CHAT_HEIGHT}
+                >
+                  {({ index, style }) => {
+                    const [chatId] = chatListIds[index]
+                    return (
+                      <div style={style}>
+                        <ChatListItem
+                          chatListItem={chatCache[chatId] || undefined}
+                          onClick={onChatClick.bind(null, chatId)}
+                        />
+                      </div>
+                    )
+                  }}
+                </ChatListPart>
+              </div>
               <div className='group-separator'>
                 {!isBroadcast
                   ? tx(