feat: add "related chats" to group profile

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Added
 - mark webxdc app context as secure #3413
+- Experimental: Related Chats
 
 ### Changed
 - update deltachat-node and deltachat/jsonrpc-client to `v1.123.0`
@@ -18,6 +19,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.

_locales/_untranslated_en.json

@@ -73,5 +73,8 @@
   },
   "desktop_offer_copy_non_web_link_to_clipboard": {
     "message": "The link \"%1$d\" can not be opened in the web browser. Do you want to copy the link to the clipboard instead?"
+  },
+  "group_related_chats": {
+    "message": "Related Chats"
   }
 }

scss/dialogs/_group-styles.scss

@@ -46,6 +46,11 @@ div.group-member-contact-list-wrapper {
   margin-right: -20px;
 }
 
+div.group-related-chats-list-wrapper {
+  margin-left: -20px;
+  margin-bottom: -20px;
+}
+
 div.group-image-wrapper {
   position: relative;
   div.group-image-edit-button {

src/renderer/components/dialogs/Settings-ExperimentalFeatures.tsx

@@ -72,6 +72,10 @@ export function SettingsExperimentalFeatures({
         key: 'enableChatAuditLog',
         label: tx('menu_chat_audit_log'),
       })}
+      {renderDTSettingSwitch({
+        key: 'EnableRelatedChats',
+        label: tx('group_related_chats'),
+      })}
       {renderDTSettingSwitch({
         key: 'experimentalEnableMarkdownInMessages',
         label: 'Render Markdown in Messages',

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,
@@ -31,6 +35,7 @@ import { selectedAccountId } from '../../ScreenController'
 import { modifyGroup } from '../helpers/ChatMethods'
 import { DcEventType } from '@deltachat/jsonrpc-client'
 import { InlineVerifiedIcon } from '../VerifiedIcon'
+import { useSettingsStore } from '../../stores/settings'
 
 const log = getLogger('renderer/ViewGroup')
 
@@ -135,6 +140,23 @@ function ViewGroupInner(props: {
   const { openDialog } = useContext(ScreenContext)
   const { onClose, chat, isBroadcast } = props
   const tx = useTranslationFunction()
+  const [settings] = useSettingsStore()
+  const isRelatedChatsEnabled =
+    settings?.desktopSettings.EnableRelatedChats || false
+
+  const [chatListIds, setChatListIds] = useState<number[]>([])
+
+  useEffect(() => {
+    if (isRelatedChatsEnabled)
+      BackendRemote.rpc
+        .getSimilarChatIds(selectedAccountId(), chat.id)
+        .then(chatIds => setChatListIds(chatIds))
+  }, [chat.id, isRelatedChatsEnabled])
+
+  const { isChatLoaded, loadChats, chatCache } = useLogicVirtualChatList(
+    chatListIds,
+    null
+  )
 
   const chatDisabled = !chat.canSend
 
@@ -207,6 +229,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 +268,36 @@ function ViewGroupInner(props: {
                   {groupName} {chat.isProtected && <InlineVerifiedIcon />}
                 </p>
               </div>
+              {isRelatedChatsEnabled && (
+                <>
+                  <div className='group-separator'>
+                    {tx('group_related_chats')}
+                  </div>
+                  <div className='group-related-chats-list-wrapper'>
+                    <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(

src/shared/shared-types.d.ts

@@ -69,6 +69,7 @@ export interface DesktopSettingsType {
   HTMLEmailAskForRemoteLoadingConfirmation: boolean
   /** always loads remote content without asking, for non contact requests  */
   HTMLEmailAlwaysLoadRemoteContent: boolean
+  EnableRelatedChats: boolean
 }
 
 export interface RC_Config {

src/shared/state.ts

@@ -29,5 +29,6 @@ export function getDefaultState(): DesktopSettingsType {
     enableWebxdcDevTools: false,
     HTMLEmailAskForRemoteLoadingConfirmation: true,
     HTMLEmailAlwaysLoadRemoteContent: false,
+    EnableRelatedChats: false,
   }
 }