<commit_before>import { useMemo, useState } from 'react';

import { c, msgid } from 'ttag';

import { AlertModal, Button, Checkbox, Label, ModalProps } from '@proton/components';

import { Element } from '../../../models/element';

export interface MoveToSpamModalResolveProps {
    unsubscribe: boolean;
    remember: boolean;
}
interface Props extends ModalProps {
    isMessage: boolean;
    elements: Element[];
    onResolve: ({ unsubscribe, remember }: MoveToSpamModalResolveProps) => void;
    onReject: () => void;
}

const MoveToSpamModal = ({ isMessage, elements, onResolve, onReject, ...rest }: Props) => {
    const [remember, setRemember] = useState(false);
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => setRemember(e.target.checked);
    const text = useMemo(() => {
        const elementsCount = elements.length;

        if (isMessage) {
            return c('Info').ngettext(
                msgid`This message will be marked as spam. Would you also like to unsubscribe from future emails?`,
                `These messages will be marked as spam. Would you also like to unsubscribe from future emails?`,
                elementsCount
            );
        }

        return c('Info').ngettext(
            msgid`This conversation will be marked as spam. Would you also like to unsubscribe from future emails?`,
            `These conversations will be marked as spam. Would you also like to unsubscribe from future emails?`,
            elementsCount
        );
    }, [isMessage, elements]);

    return (
        <AlertModal
            title={c('Title').t`Move to spam`}
            buttons={[
                <Button color="norm" onClick={() => onResolve({ unsubscribe: true, remember })}>{c('Action')
                    .t`Move to spam and unsubscribe`}</Button>,
                <Button onClick={() => onResolve({ unsubscribe: false, remember })}>{c('Action')
                    .t`Move to spam`}</Button>,
                <Button onClick={() => onReject()}>{c('Action').t`Cancel`}</Button>,
            ]}
            {...rest}
        >
            <p className="mb2">{text}</p>
            <Label htmlFor="remember-me" className="flex">
                <Checkbox id="remember-me" checked={remember} onChange={handleChange} />
                {c('Label').t`Remember my choice`}
            </Label>
        </AlertModal>
    );
};

export default MoveToSpamModal;<commit_msg>Let label be only as wide as the text<commit_after>import { useMemo, useState } from 'react';

import { c, msgid } from 'ttag';

import { AlertModal, Button, Checkbox, Label, ModalProps } from '@proton/components';

import { Element } from '../../../models/element';

export interface MoveToSpamModalResolveProps {
    unsubscribe: boolean;
    remember: boolean;
}
interface Props extends ModalProps {
    isMessage: boolean;
    elements: Element[];
    onResolve: ({ unsubscribe, remember }: MoveToSpamModalResolveProps) => void;
    onReject: () => void;
}

const MoveToSpamModal = ({ isMessage, elements, onResolve, onReject, ...rest }: Props) => {
    const [remember, setRemember] = useState(false);
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => setRemember(e.target.checked);
    const text = useMemo(() => {
        const elementsCount = elements.length;

        if (isMessage) {
            return c('Info').ngettext(
                msgid`This message will be marked as spam. Would you also like to unsubscribe from future emails?`,
                `These messages will be marked as spam. Would you also like to unsubscribe from future emails?`,
                elementsCount
            );
        }

        return c('Info').ngettext(
            msgid`This conversation will be marked as spam. Would you also like to unsubscribe from future emails?`,
            `These conversations will be marked as spam. Would you also like to unsubscribe from future emails?`,
            elementsCount
        );
    }, [isMessage, elements]);

    return (
        <AlertModal
            title={c('Title').t`Move to spam`}
            buttons={[
                <Button color="norm" onClick={() => onResolve({ unsubscribe: true, remember })}>{c('Action')
                    .t`Move to spam and unsubscribe`}</Button>,
                <Button onClick={() => onResolve({ unsubscribe: false, remember })}>{c('Action')
                    .t`Move to spam`}</Button>,
                <Button onClick={() => onReject()}>{c('Action').t`Cancel`}</Button>,
            ]}
            {...rest}
        >
            <p className="mb2">{text}</p>
            <Label htmlFor="remember-me" className="inline-flex wauto">
                <Checkbox id="remember-me" checked={remember} onChange={handleChange} />
                {c('Label').t`Remember my choice`}
            </Label>
        </AlertModal>
    );
};

export default MoveToSpamModal;
{'fraction_non_alphanumeric': 0.13228378654671846, 'fraction_numerical': 0.0004089143324473523, 'mean_word_length': 2.432982456140351, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6001427', 'n_tokens_mistral': 1339, 'n_tokens_neox': 1301, 'n_words': 390}