packages/components/containers/desktop/InboxDesktopAppSwitcher.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button, ButtonLike } from '@proton/atoms';
   4 import SimpleDropdown from '@proton/components/components/dropdown/SimpleDropdown';
   5 import Icon from '@proton/components/components/icon/Icon';
   6 import useConfig from '@proton/components/hooks/useConfig';
   7 import type { APP_NAMES } from '@proton/shared/lib/constants';
   8 import { APPS, BRAND_NAME, CALENDAR_APP_NAME, MAIL_APP_NAME } from '@proton/shared/lib/constants';
   9 import type { CHANGE_VIEW_TARGET } from '@proton/shared/lib/desktop/desktopTypes';
  10 import { invokeInboxDesktopIPC } from '@proton/shared/lib/desktop/ipcHelpers';
  11 import { isElectronOnMac } from '@proton/shared/lib/helpers/desktop';
  12 import clsx from '@proton/utils/clsx';
  13
  14 import ProductIcon from '../app/ProductIcon';
  15
  16 interface Props {
  17     appToLinkTo?: APP_NAMES;
  18 }
  19
  20 const INBOX_DESKTOP_APPS = [APPS.PROTONMAIL, APPS.PROTONCALENDAR] as const satisfies APP_NAMES[];
  21
  22 const APP_TO_VIEW_TARGET: { [key in (typeof INBOX_DESKTOP_APPS)[number]]: CHANGE_VIEW_TARGET } = {
  23     'proton-mail': 'mail',
  24     'proton-calendar': 'calendar',
  25 };
  26
  27 function InboxDesktopDefaultAppSwitcher({ appToLinkTo: currentApp }: Props) {
  28     const handleClick = (target: CHANGE_VIEW_TARGET) => {
  29         void invokeInboxDesktopIPC({ type: 'changeView', payload: target });
  30     };
  31
  32     return (
  33         <SimpleDropdown
  34             type="button"
  35             hasCaret={false}
  36             content={<Icon name="app-switch" size={6} className="apps-dropdown-button-icon shrink-0 no-print" />}
  37             className="apps-dropdown-button shrink-0"
  38             dropdownClassName="apps-dropdown rounded-lg"
  39             originalPlacement="bottom-start"
  40             title={c('Apps dropdown').t`${BRAND_NAME} applications`}
  41             disableDefaultArrowNavigation
  42             as="button"
  43         >
  44             <ul className="unstyled my-0 p-4" style={{ '--apps-dropdown-repeat': '2' }}>
  45                 {INBOX_DESKTOP_APPS.map((app) => {
  46                     const current = app === currentApp;
  47
  48                     return (
  49                         <li className="dropdown-item apps-dropdown-item" data-testid="apps-dropdown-item" key={app}>
  50                             <Button
  51                                 onClick={() => handleClick(APP_TO_VIEW_TARGET[app])}
  52                                 className="text-center text-no-decoration outline-none--at-all apps-dropdown-link p-0"
  53                                 aria-current={current}
  54                                 shape="ghost"
  55                             >
  56                                 <ProductIcon appToLinkTo={app} current={current} />
  57                             </Button>
  58                         </li>
  59                     );
  60                 })}
  61             </ul>
  62         </SimpleDropdown>
  63     );
  64 }
  65
  66 function InboxDesktopMacAppSwitcher({ appToLinkTo }: Props) {
  67     const { APP_NAME } = useConfig();
  68     const isAppMail = APP_NAME === APPS.PROTONMAIL || APPS.PROTONMAIL === appToLinkTo;
  69     const isAppCalendar = APP_NAME === APPS.PROTONCALENDAR || APPS.PROTONCALENDAR === appToLinkTo;
  70
  71     const handleClick = (target: CHANGE_VIEW_TARGET) => {
  72         void invokeInboxDesktopIPC({ type: 'changeView', payload: target });
  73     };
  74
  75     return (
  76         <div className="flex flex-col gap-0.5">
  77             <ButtonLike
  78                 onClick={() => handleClick('mail')}
  79                 className="flex items-center"
  80                 shape={isAppMail ? 'solid' : 'ghost'}
  81                 aria-current={isAppMail}
  82             >
  83                 <Icon name="inbox" alt={MAIL_APP_NAME} className={clsx(isAppMail ? 'color-norm' : 'color-weak')} />
  84             </ButtonLike>
  85             <ButtonLike
  86                 onClick={() => handleClick('calendar')}
  87                 className="flex items-center"
  88                 shape={isAppCalendar ? 'solid' : 'ghost'}
  89                 aria-current={isAppCalendar}
  90             >
  91                 <Icon
  92                     name="calendar-grid"
  93                     alt={CALENDAR_APP_NAME}
  94                     className={clsx(isAppCalendar ? 'color-norm' : 'color-weak')}
  95                 />
  96             </ButtonLike>
  97         </div>
  98     );
  99 }
 100
 101 export function InboxDesktopAppSwitcher(props: Props) {
 102     if (isElectronOnMac) {
 103         return <InboxDesktopMacAppSwitcher {...props} />;
 104     }
 105
 106     return <InboxDesktopDefaultAppSwitcher {...props} />;
 107 }