From 8d461cd682e3db0afc0569f2700a437c03c50f42 Mon Sep 17 00:00:00 2001
From: link2xt <link2xt@testrun.org>
Date: Sat, 7 Jan 2023 18:56:01 +0000
Subject: [PATCH] Add related chats to group profile

---
 CHANGELOG.md                                  |  1 +
 src/renderer/components/dialogs/ViewGroup.tsx | 53 +++++++++++++++++++
 2 files changed, 54 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1735f6b511..5beee24755 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@
 
 ### Added
 - Show video chat instance URLs as subtitles #3369
+- Add similar chats to group profile #3379
 
 ### Changed
 - Offer to copy non-HTTP links to the clipboard instead of trying to open them in webxdc source code link and inside of html emails.
diff --git a/src/renderer/components/dialogs/ViewGroup.tsx b/src/renderer/components/dialogs/ViewGroup.tsx
index 4a87c83aa4..29d6823b06 100644
--- 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,21 @@ function ViewGroupInner(props: {
   const { onClose, chat, isBroadcast } = props
   const tx = useTranslationFunction()
 
+  const [chatListIds, setChatListIds] = useState<number[]>([])
+
+  useEffect(() => {
+    BackendRemote.rpc
+      .getSimilarChatlistEntries(selectedAccountId(), chat.id)
+      .then(entries => {
+        setChatListIds(entries.map(item => item[0]))
+      })
+  }, [chat.id])
+
+  const { isChatLoaded, loadChats, chatCache } = useLogicVirtualChatList(
+    chatListIds,
+    null
+  )
+
   const chatDisabled = !chat.canSend
 
   const {
@@ -207,6 +226,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 +265,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={400}
+                  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(