'init'

app/components/ReplyHeader/ReplyHeader.module.css

@@ -0,0 +1,19 @@
+.short_text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block!important;
+    height: unset!important;
+}
+
+.button_inner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+@media (max-width: 800px) {
+    .short_text {
+        max-width: 60px;
+    }
+}

app/components/ReplyHeader/ReplyHeader.tsx

@@ -0,0 +1,133 @@
+import { useRosettaColors } from "@/app/hooks/useRosettaColors";
+import { useReplyMessages } from "@/app/providers/DialogProvider/useReplyMessages";
+import { Button, Flex, Modal, Text } from "@mantine/core";
+import { useDisclosure, useHotkeys } from "@mantine/hooks";
+import { IconCornerUpLeft, IconCornerUpRightDouble, IconTrash, IconX } from "@tabler/icons-react";
+import classes from "./ReplyHeader.module.css";
+import { DialogsList } from "../DialogsList/DialogsList";
+import { useNavigate } from "react-router-dom";
+import { useDialog } from "@/app/providers/DialogProvider/useDialog";
+import { modals } from "@mantine/modals";
+
+export function ReplyHeader() {
+    const colors = useRosettaColors();
+    const {replyMessages, 
+        deselectAllMessages, 
+        translateMessagesToDialogInput, 
+        dialog,
+        isSelectionInCurrentDialog} = useReplyMessages();
+    const [opened, { open, close }] = useDisclosure(false);
+    const navigate = useNavigate();
+    const {deleteSelectedMessages} = useDialog();
+    
+    useHotkeys([
+        ['Esc', deselectAllMessages]
+    ], [], true);
+
+    const onClickForward = () => {
+        open();
+    }
+
+    const selectDialogToForward = (publicKey: string) => {
+        translateMessagesToDialogInput(publicKey);
+        close();
+        navigate(`/main/chat/${publicKey}`);
+    }
+
+    const onClickReply = () => {
+        translateMessagesToDialogInput(dialog);
+    }
+
+    const onClickDelete = async () => {
+        modals.openConfirmModal({
+            title: 'Delete messages',
+            children: (
+                <Text size="sm">
+                    Are you sure you want to delete {replyMessages.messages.length} message{replyMessages.messages.length > 1 && 's'}? This action cannot be undone.
+                </Text>
+            ),
+            labels: { confirm: 'Delete', cancel: 'Cancel' },
+            confirmProps: { color: 'red' },
+            centered: true,
+            onConfirm: async () => {
+                const messageIds = replyMessages.messages.map(m => m.message_id);
+                await deleteSelectedMessages(messageIds);
+                deselectAllMessages();                
+            },
+        });
+    }
+
+    const onCancel = () => {
+        deselectAllMessages();
+        close();
+    }
+
+    return (
+        <>
+            <Modal styles={{
+                root: {
+                    padding: 0
+                },
+                inner: {
+                    padding: 0
+                },
+                content: {
+                    padding: 0
+                },
+                body: {
+                    padding: 0
+                }
+            }} size={'xs'} closeOnEscape withCloseButton={false} closeOnClickOutside opened={opened} onClose={close} centered>
+                <Modal.Header>
+                    <Text fw={600} c={'blue'} fz={14}>Select to forward</Text>
+                    <Button onClick={onCancel} leftSection={
+                        <IconX size={16}></IconX>
+                    } variant={'transparent'} c={'red'}>Cancel</Button>
+                </Modal.Header>
+                <Modal.Body>
+                    <DialogsList mode={'all'} onSelectDialog={selectDialogToForward}></DialogsList>
+                </Modal.Body>
+            </Modal>
+            <Flex p={'sm'} h={'100%'} justify={'space-between'} align={'center'} gap={'xs'}>
+                <Flex gap={'xs'} align={'center'}>
+                    <Text size={'sm'} fw={500} className={classes.short_text}>
+                        {replyMessages.messages.length} message{replyMessages.messages.length > 1 ? "s" : ""} selected
+                    </Text>
+                    <IconX onClick={deselectAllMessages} stroke={1.3} style={{
+                        cursor: 'pointer'
+                    }} size={20} color={colors.chevrons.active}></IconX>
+                </Flex>
+                <Flex gap={'sm'}>
+                    {isSelectionInCurrentDialog() &&
+                        <Button classNames={{
+                            label: classes.short_text,
+                            inner: classes.button_inner
+                        }} p={0} onClick={onClickDelete} color="red" variant={'transparent'} leftSection={
+                            <IconTrash stroke={2} size={16} ></IconTrash>
+                        }>
+                            Delete
+                        </Button>
+                    }
+                    {isSelectionInCurrentDialog() && 
+                        <Button classNames={{
+                            label: classes.short_text,
+                            inner: classes.button_inner
+                        }} p={0} onClick={onClickReply} variant={'transparent'} leftSection={
+                            <IconCornerUpLeft stroke={3} size={16} ></IconCornerUpLeft>
+                        }>
+                            Reply
+                        </Button>
+                    }
+                    <Button classNames={{
+                            label: classes.short_text,
+                            inner: classes.button_inner
+                        }} p={0} onClick={onClickForward} variant={'transparent'} leftSection={
+                        <IconCornerUpRightDouble stroke={2} size={16} ></IconCornerUpRightDouble>
+                    }>
+                        Forward
+                    </Button>
+                </Flex>
+            </Flex>
+        </>
+    );
+}