packages/components/containers/layouts/LayoutsSection.tsx

   1 import { c } from 'ttag';
   2
   3 import { useUserSettings } from '@proton/account/userSettings/hooks';
   4 import Info from '@proton/components/components/link/Info';
   5 import Loader from '@proton/components/components/loader/Loader';
   6 import SettingsSectionWide from '@proton/components/containers/account/SettingsSectionWide';
   7 import useApi from '@proton/components/hooks/useApi';
   8 import useEventManager from '@proton/components/hooks/useEventManager';
   9 import useNotifications from '@proton/components/hooks/useNotifications';
  10 import { useLoading } from '@proton/hooks';
  11 import { useMailSettings } from '@proton/mail/mailSettings/hooks';
  12 import { updateComposerMode, updateViewLayout } from '@proton/shared/lib/api/mailSettings';
  13 import { updateDensity } from '@proton/shared/lib/api/settings';
  14 import type { DENSITY } from '@proton/shared/lib/constants';
  15 import { getKnowledgeBaseUrl } from '@proton/shared/lib/helpers/url';
  16 import type { COMPOSER_MODE, VIEW_LAYOUT } from '@proton/shared/lib/mail/mailSettings';
  17 import { DEFAULT_MAILSETTINGS } from '@proton/shared/lib/mail/mailSettings';
  18
  19 import ComposerModeCards from './ComposerModeCards';
  20 import DensityRadiosCards from './DensityRadiosCards';
  21 import ViewLayoutCards from './ViewLayoutCards';
  22
  23 const LayoutsSection = () => {
  24     const [{ ComposerMode, ViewLayout } = DEFAULT_MAILSETTINGS, loadingMailSettings] = useMailSettings();
  25     const [{ Density }, loadingUserSettings] = useUserSettings();
  26     const { call } = useEventManager();
  27     const { createNotification } = useNotifications();
  28     const api = useApi();
  29     const [loadingComposerMode, withLoadingComposerMode] = useLoading();
  30     const [loadingViewLayout, withLoadingViewLayout] = useLoading();
  31     const [loadingDensity, withLoadingDensity] = useLoading();
  32
  33     const notifyPreferenceSaved = () => createNotification({ text: c('Success').t`Preference saved` });
  34
  35     const handleChangeComposerMode = async (mode: COMPOSER_MODE) => {
  36         await api(updateComposerMode(mode));
  37         await call();
  38         notifyPreferenceSaved();
  39     };
  40
  41     const handleChangeViewLayout = async (layout: VIEW_LAYOUT) => {
  42         await api(updateViewLayout(layout));
  43         await call();
  44         notifyPreferenceSaved();
  45     };
  46
  47     const handleChangeDensity = async (density: DENSITY) => {
  48         await api(updateDensity(density));
  49         await call();
  50         notifyPreferenceSaved();
  51     };
  52
  53     return (
  54         <SettingsSectionWide className="flex flex-wrap">
  55             {loadingMailSettings || loadingUserSettings ? (
  56                 <Loader />
  57             ) : (
  58                 <>
  59                     <div className="flex flex-column flex-nowrap mb-4">
  60                         <span className="mb-4 text-semibold">
  61                             <span className="mr-2" id="layoutMode_desc">{c('Label').t`Inbox`}</span>
  62                             <Info
  63                                 url={getKnowledgeBaseUrl('/change-inbox-layout')}
  64                                 title={c('Tooltip').t`Set the default layout for your Inbox.`}
  65                             />
  66                         </span>
  67                         <ViewLayoutCards
  68                             describedByID="layoutMode_desc"
  69                             viewLayout={ViewLayout}
  70                             onChange={(value) => withLoadingViewLayout(handleChangeViewLayout(value))}
  71                             loading={loadingViewLayout}
  72                         />
  73                     </div>
  74
  75                     <div className="flex flex-column flex-nowrap mb-4">
  76                         <span className="mb-4 text-semibold">
  77                             <span className="mr-2" id="composerMode_desc">{c('Label').t`Composer`}</span>
  78                             <Info
  79                                 url={getKnowledgeBaseUrl('/composer')}
  80                                 title={c('Tooltip').t`Set the default Composer popup size as small or full screen.`}
  81                             />
  82                         </span>
  83
  84                         <ComposerModeCards
  85                             describedByID="composerMode_desc"
  86                             composerMode={ComposerMode}
  87                             onChange={(value) => withLoadingComposerMode(handleChangeComposerMode(value))}
  88                             loading={loadingComposerMode}
  89                         />
  90                     </div>
  91
  92                     <div className="flex flex-column flex-nowrap mb-4">
  93                         <span className="mb-4 text-semibold">
  94                             <span className="mr-2" id="densityMode_desc">{c('Label').t`Density`}</span>
  95                             <Info
  96                                 url={getKnowledgeBaseUrl('/change-inbox-layout')}
  97                                 title={c('Tooltip').t`Set how your list of messages looks like by default.`}
  98                             />
  99                         </span>
 100                         <DensityRadiosCards
 101                             density={Density}
 102                             describedByID="densityMode_desc"
 103                             onChange={(value) => withLoadingDensity(handleChangeDensity(value))}
 104                             loading={loadingDensity}
 105                         />
 106                     </div>
 107                 </>
 108             )}
 109         </SettingsSectionWide>
 110     );
 111 };
 112
 113 export default LayoutsSection;