Select multiple messages in chat for forwarding & deletion

CHANGELOG.md

@@ -17,6 +17,7 @@
 - Prefer light theme for the help and webxdc loading pages
 - Helper method to easily use confirmation dialogs #3601
 - Refactor using new `useConfirmationDialog` hook #3602
+- Add multi selecting messages for forwarding and deleting #3602
 
 <a id="1_42_2"></a>
 

scss/manifest.scss

@@ -64,6 +64,7 @@
 @import 'message/_status-icon';
 @import 'message/_message-calls';
 @import 'message/_message-markdown';
+@import 'message/_selected-messages-action.scss';
 
 // misc
 @import 'misc/_avatar.scss';

scss/message/_selected-messages-action.scss

@@ -0,0 +1,16 @@
+.selected-messages-action {
+  display: flex;
+  flex-direction: row;
+  background-color: var(--navBarBackground);
+  justify-content: flex-start;
+  align-items: center;
+  & > p {
+    width: 100%;
+    text-align: right;
+    margin: 8px;
+  }
+  & > button {
+    margin: 4px;
+    margin-bottom: 6px !important;
+  }
+}

scss/misc/_delta-buttons.scss

@@ -16,7 +16,7 @@ button.delta-button-round {
     border-color: rgba(206, 217, 224, 0.5);
     background-image: none;
     cursor: not-allowed;
-    color: rgba(0, 0, 0, 0.2);
+    color: var(--globalText);
     &:hover {
       background-color: rgba(206, 217, 224, 0.5);
     }
@@ -35,6 +35,56 @@ button.delta-button-round {
   }
 }
 
+button.delta-button {
+  color: var(--colorNone);
+  background-color: rgba(0, 0, 0, 0);
+  padding: 0 2px;
+  margin-bottom: 0px;
+  letter-spacing: 0px;
+  font-size: initial;
+  font-weight: 'initial';
+  text-align: center;
+  text-transform: uppercase;
+  padding: 5px;
+  border-style: solid;
+  border-color: transparent;
+  border-radius: 2px;
+  &:hover {
+    cursor: pointer;
+    background-color: #f1f1f1;
+  }
+
+  &.no-padding {
+    padding: 0px;
+  }
+
+  &.bold {
+    letter-spacing: 2px;
+    font-weight: bold;
+  }
+
+  &.light-bold {
+    letter-spacing: 1px;
+    font-weight: 100;
+  }
+
+  &.primary {
+    color: var(--colorPrimary);
+  }
+
+  &.danger {
+    color: var(--colorDanger);
+  }
+
+  &:disabled {
+    color: grey;
+    cursor: default;
+    &:hover {
+      cursor: default;
+      background-color: none;
+    }
+  }
+}
 button.delta-button-tab {
   padding: 8px;
   margin: 5px;

src/renderer/components/attachment/messageAttachment.tsx

@@ -27,13 +27,15 @@ type AttachmentProps = {
   conversationType: ConversationType
   message: Type.Message
   hasQuote: boolean
+  isSelectMode: boolean
 }
 
 export default function Attachment({
   text,
   conversationType,
   message,
   hasQuote,
+  isSelectMode,
 }: AttachmentProps) {
   const tx = useTranslationFunction()
   const { openDialog } = useDialog()
@@ -42,6 +44,7 @@ export default function Attachment({
   }
   const direction = getDirection(message)
   const onClickAttachment = (ev: any) => {
+    if (isSelectMode) return
     if (message.viewType === 'Sticker') return
     ev.stopPropagation()
     if (isDisplayableByFullscreenMedia(message.fileMime)) {

src/renderer/components/composer/EmojiAndStickerPicker.tsx

@@ -16,6 +16,7 @@ import { useThemeCssVar } from '../../ThemeManager'
 
 import type { EmojiData } from 'emoji-mart/index'
 import useTranslationFunction from '../../hooks/useTranslationFunction'
+import Button from '../ui/Button'
 
 const DisplayedStickerPack = ({
   stickerPackName,
@@ -89,24 +90,18 @@ export const StickerPicker = ({
             ))}
           </div>
           <div className='sticker-actions-container'>
-            <button
-              className='delta-button-round secondary'
-              onClick={onOpenStickerFolder}
-            >
+            <Button round type='secondary' onClick={onOpenStickerFolder}>
               {tx('open_sticker_folder')}
-            </button>
+            </Button>
           </div>
         </>
       ) : (
         <div className='sticker-container'>
           <div className='no-stickers'>
             <p className='description'>{tx('add_stickers_instructions')}</p>
-            <button
-              className='delta-button-round'
-              onClick={onOpenStickerFolder}
-            >
+            <Button round onClick={onOpenStickerFolder}>
               {tx('open_sticker_folder')}
-            </button>
+            </Button>
           </div>
         </div>
       )}

src/renderer/components/dialogs/About.tsx

@@ -11,6 +11,7 @@ import { DialogBody, DialogContent, DialogWithHeader } from '../Dialog'
 import useTranslationFunction from '../../hooks/useTranslationFunction'
 
 import type { DialogProps } from '../../contexts/DialogContext'
+import Button from '../ui/Button'
 
 const log = getLogger('renderer/dialogs/About')
 
@@ -56,9 +57,9 @@ export function DCInfo(_props: any) {
         </table>
       </div>
       <div style={{ display: 'flex', justifyContent: 'center' }}>
-        <button className='delta-button-round' onClick={copy2Clipboard}>
+        <Button round onClick={copy2Clipboard}>
           {tx('copy_json')}
-        </button>
+        </Button>
       </div>
     </>
   )

src/renderer/components/dialogs/ConfirmSendingFiles.tsx

@@ -8,6 +8,7 @@ import {
 } from './DeltaDialog'
 
 import type { DialogProps } from '../../contexts/DialogContext'
+import Button from '../ui/Button'
 
 type Props = {
   onClick: (isConfirmed: boolean) => void
@@ -56,12 +57,12 @@ export default function ConfirmSendingFiles({
       </div>
       <DeltaDialogFooter style={{ padding: '0px 20px 10px' }}>
         <DeltaDialogFooterActions>
-          <p className='delta-button bold primary' onClick={handleCancel}>
+          <Button type='primary' onClick={handleCancel}>
             {tx('cancel')}
-          </p>
-          <p className={`delta-button bold primary`} onClick={handleConfirm}>
+          </Button>
+          <Button type='primary' onClick={handleConfirm}>
             {tx('menu_send')}
-          </p>
+          </Button>
         </DeltaDialogFooterActions>
       </DeltaDialogFooter>
     </SmallDialog>

src/renderer/components/dialogs/DeltaDialog.tsx

@@ -3,6 +3,7 @@ import { Dialog, Classes, RadioGroup, Radio } from '@blueprintjs/core'
 import classNames from 'classnames'
 
 import type { DialogProps } from '../../contexts/DialogContext'
+import Button from '../ui/Button'
 
 export const DeltaDialogBase = React.memo<
   React.PropsWithChildren<
@@ -311,18 +312,18 @@ export function SmallSelectDialog({
       </DeltaDialogBody>
       <DeltaDialogFooter style={{ marginTop: '0px', padding: '20px' }}>
         <DeltaDialogFooterActions>
-          <p
-            className='delta-button primary bold'
+          <Button
+            type='primary'
             onClick={() => {
               onCancel && onCancel()
               onClose()
             }}
           >
             {tx('cancel')}
-          </p>
-          <p className='delta-button primary bold' onClick={saveAndClose}>
+          </Button>
+          <Button type='primary' onClick={saveAndClose}>
             {tx('save_desktop')}
-          </p>
+          </Button>
         </DeltaDialogFooterActions>
       </DeltaDialogFooter>
     </SmallDialog>
@@ -368,25 +369,19 @@ export function DeltaDialogOkCancelFooter({
   return (
     <DeltaDialogFooter>
       <DeltaDialogFooterActions>
-        <p
-          className='delta-button primary bold'
-          style={{ marginRight: '10px' }}
-          onClick={onCancel}
-        >
-          {cancelLabel}
-        </p>
-        <p
+        <span style={{ marginRight: '10px' }}>
+          <Button type='primary' onClick={onCancel}>
+            {cancelLabel}
+          </Button>
+        </span>
+        <Button
           //className={ 'delta-button bold primary' + disableOK ? " disabled" : "" }
-          className={classNames(
-            'delta-button bold primary test-selector-confirm',
-            {
-              disabled: disableOK,
-            }
-          )}
+          className='test-selector-confirm'
+          disabled={disableOK}
           onClick={onOk}
         >
           {confirmLabel}
-        </p>
+        </Button>
       </DeltaDialogFooterActions>
     </DeltaDialogFooter>
   )
@@ -398,9 +393,9 @@ export function DeltaDialogCloseFooter({ onClose }: { onClose: () => any }) {
   return (
     <DeltaDialogFooter>
       <DeltaDialogFooterActions>
-        <p className={'delta-button bold primary'} onClick={onClose}>
+        <Button type='primary' onClick={onClose}>
           {tx('close')}
-        </p>
+        </Button>
       </DeltaDialogFooterActions>
     </DeltaDialogFooter>
   )

src/renderer/components/dialogs/EditProfileDialog/ProfileImageSelector.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { runtime } from '../../../runtime'
 import { avatarInitial } from '../../Avatar'
 import useTranslationFunction from '../../../hooks/useTranslationFunction'
+import Button from '../../ui/Button'
 
 export default function ProfileImageSelector({
   displayName,
@@ -48,21 +49,21 @@ export default function ProfileImageSelector({
         <span style={{ backgroundColor: color }}>{initial}</span>
       )}
       <>
-        <button
+        <Button
           aria-label={tx('profile_image_select')}
           onClick={onClickSelectPicture}
-          className={'delta-button-round'}
+          round
         >
           {tx('profile_image_select')}
-        </button>
-        <button
+        </Button>
+        <Button
           aria-label={tx('profile_image_delete')}
           onClick={onClickRemovePicture}
-          className={'delta-button-round'}
+          round
           disabled={!profilePicture}
         >
           {tx('profile_image_delete')}
-        </button>
+        </Button>
       </>
     </div>
   )

src/renderer/components/dialogs/EditVideochatInstanceDialog.tsx

@@ -2,8 +2,8 @@ import React, { useState } from 'react'
 
 import { DeltaInput } from '../Login-Styles'
 import { SettingsStoreState } from '../../stores/settings'
-import RadioGroup from '../RadioGroup'
-import Radio from '../Radio'
+import RadioGroup from '../ui/RadioGroup'
+import Radio from '../ui/Radio'
 import {
   VIDEO_CHAT_INSTANCE_AUTISTICI,
   VIDEO_CHAT_INSTANCE_SYSTEMLI,

src/renderer/components/dialogs/ForwardMessage/index.tsx

@@ -22,14 +22,15 @@ import styles from './styles.module.scss'
 const LIST_FLAGS = C.DC_GCL_FOR_FORWARDING | C.DC_GCL_NO_SPECIALS
 
 export default function ForwardMessage(props: {
-  message: T.Message
+  message: T.Message | number[]
   onClose: DialogProps['onClose']
+  onForward?: () => void
 }) {
   const accountId = selectedAccountId()
   const tx = useTranslationFunction()
   const { openDialog } = useDialog()
 
-  const { message, onClose } = props
+  const { message, onClose, onForward } = props
   const { chatListIds, queryStr, setQueryStr } = useChatList(LIST_FLAGS)
   const { isChatLoaded, loadChats, chatCache } = useLogicVirtualChatList(
     chatListIds,
@@ -38,6 +39,7 @@ export default function ForwardMessage(props: {
 
   const onChatClick = async (chatId: number) => {
     const chat = await BackendRemote.rpc.getFullChatById(accountId, chatId)
+    const isMany = Array.isArray(message)
     onClose()
     if (!chat.isSelfTalk) {
       selectChat(chat.id)
@@ -48,10 +50,30 @@ export default function ForwardMessage(props: {
         chat
       )
       if (!yes) {
-        selectChat(message.chatId)
+        if (isMany) {
+          const message_ = await BackendRemote.rpc.getMessage(
+            accountId,
+            message[0]
+          )
+          selectChat(message_.chatId)
+        } else {
+          selectChat(message.chatId)
+        }
       }
     } else {
-      await forwardMessage(accountId, message.id, chat.id)
+      if (isMany) {
+        const messageObjects: T.Message[] = await Promise.all(
+          message.map(id => BackendRemote.rpc.getMessage(accountId, id))
+        )
+        messageObjects.sort((msgA, msgB) => msgA.timestamp - msgB.timestamp)
+        const messageIds = messageObjects.map(msg => msg.id)
+        for (const messageId of messageIds) {
+          await forwardMessage(accountId, messageId, chat.id)
+        }
+      } else {
+        await forwardMessage(accountId, message.id, chat.id)
+      }
+      onForward && onForward()
     }
   }
   const onSearchChange = (e: React.ChangeEvent<HTMLInputElement>) =>