packages/components/containers/mail/MailShortcutsModal.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import Alert from '@proton/components/components/alert/Alert';
   5 import Field from '@proton/components/components/container/Field';
   6 import Row from '@proton/components/components/container/Row';
   7 import Label from '@proton/components/components/label/Label';
   8 import type { ModalProps } from '@proton/components/components/modalTwo/Modal';
   9 import ModalTwo from '@proton/components/components/modalTwo/Modal';
  10 import ModalTwoContent from '@proton/components/components/modalTwo/ModalContent';
  11 import ModalTwoFooter from '@proton/components/components/modalTwo/ModalFooter';
  12 import ModalTwoHeader from '@proton/components/components/modalTwo/ModalHeader';
  13 import ShortcutsSectionView from '@proton/components/components/shortcuts/ShortcutsSectionView';
  14 import { useMailSettings } from '@proton/mail/mailSettings/hooks';
  15 import { MAIL_APP_NAME } from '@proton/shared/lib/constants';
  16 import { DEFAULT_MAILSETTINGS } from '@proton/shared/lib/mail/mailSettings';
  17 import { getShortcuts } from '@proton/shared/lib/shortcuts/mail';
  18 import clsx from '@proton/utils/clsx';
  19
  20 import ShortcutsToggle from '../general/ShortcutsToggle';
  21
  22 import './MailShortcutsModal.scss';
  23
  24 const MailShortCutsModal = (props: ModalProps) => {
  25     const title = c('Title').t`${MAIL_APP_NAME} Keyboard Shortcuts`;
  26     const [{ Shortcuts } = DEFAULT_MAILSETTINGS] = useMailSettings();
  27     const mailShortcuts = getShortcuts();
  28     const alwaysOnSections = mailShortcuts.filter((section) => section.alwaysActive);
  29     const shortcutEnabledSections = mailShortcuts.filter((section) => !section.alwaysActive);
  30
  31     const { onClose } = props;
  32
  33     return (
  34         <ModalTwo className="shortcut-modal" {...props}>
  35             <ModalTwoHeader title={title} />
  36             <ModalTwoContent>
  37                 <Alert className="mb-4">
  38                     {c('Info')
  39                         .t`Basic navigation and actions remain available regardless of keyboard shortcuts being active or not in the settings.`}
  40                 </Alert>
  41                 <div className="columns-1 md:columns-2 gap-8">
  42                     {alwaysOnSections.map((section) => {
  43                         return <ShortcutsSectionView key={section.name} {...section} />;
  44                     })}
  45                 </div>
  46
  47                 <hr className="my-8 border-bottom" />
  48                 <Row className="mb-8">
  49                     <Label htmlFor="toggle-shortcuts" className="mr-4">{c('Label').t`Keyboard shortcuts`}</Label>
  50                     <Field className="pt-2">
  51                         <ShortcutsToggle id="toggle-shortcuts" />
  52                     </Field>
  53                 </Row>
  54                 <div className={clsx('columns-1 md:columns-2 gap-8', !Shortcuts && 'opacity-50')}>
  55                     {shortcutEnabledSections.map((section) => {
  56                         return <ShortcutsSectionView key={section.name} {...section} />;
  57                     })}
  58                 </div>
  59             </ModalTwoContent>
  60             <ModalTwoFooter>
  61                 <Button className="ml-auto" onClick={onClose}>{c('Action').t`Close`}</Button>
  62             </ModalTwoFooter>
  63         </ModalTwo>
  64     );
  65 };
  66
  67 export default MailShortCutsModal;