feat: Nativize "No distraction" theme as "Focus Mode" (#758)

Co-authored-by: Mo Bitar <me@bitar.io>
2021-12-02 22:34:57 +05:30
parent fbafc136e8
commit 9730006cba
17 changed files with 488 additions and 141 deletions
--- a/app/assets/javascripts/components/Icon.tsx
+++ b/app/assets/javascripts/components/Icon.tsx
@@ -1,3 +1,4 @@
+import PremiumFeatureIcon from '../../icons/ic-premium-feature.svg';
 import PencilOffIcon from '../../icons/ic-pencil-off.svg';
 import PlainTextIcon from '../../icons/ic-text-paragraph.svg';
 import RichTextIcon from '../../icons/ic-text-rich.svg';
@@ -15,6 +16,7 @@ import TrashSweepIcon from '../../icons/ic-trash-sweep.svg';
 import MoreIcon from '../../icons/ic-more.svg';
 import TuneIcon from '../../icons/ic-tune.svg';
 import MenuArrowDownIcon from '../../icons/ic-menu-arrow-down.svg';
+import MenuCloseIcon from '../../icons/ic-menu-close.svg';
 import AuthenticatorIcon from '../../icons/ic-authenticator.svg';
 import SpreadsheetsIcon from '../../icons/ic-spreadsheets.svg';
 import TasksIcon from '../../icons/ic-tasks.svg';
@@ -107,7 +109,9 @@ const ICONS = {
  'check-bold': CheckBoldIcon,
  'account-circle': AccountCircleIcon,
  'menu-arrow-down': MenuArrowDownIcon,
-  window: WindowIcon
+  'menu-close': MenuCloseIcon,
+  window: WindowIcon,
+  'premium-feature': PremiumFeatureIcon
 };

 export type IconType = keyof typeof ICONS;
--- a/app/assets/javascripts/components/PremiumFeaturesModal.tsx
+++ b/app/assets/javascripts/components/PremiumFeaturesModal.tsx
@@ -0,0 +1,75 @@
+import {
+  AlertDialog,
+  AlertDialogDescription,
+  AlertDialogLabel,
+} from '@reach/alert-dialog';
+import { FunctionalComponent } from 'preact';
+import { Icon } from './Icon';
+import PremiumIllustration from '../../svg/il-premium.svg';
+import { useRef } from 'preact/hooks';
+
+type Props = {
+  featureName: string;
+  onClose: () => void;
+  showModal: boolean;
+};
+
+export const PremiumFeaturesModal: FunctionalComponent<Props> = ({
+  featureName,
+  onClose,
+  showModal,
+}) => {
+  const plansButtonRef = useRef<HTMLButtonElement>(null);
+
+  const onClickPlans = () => {
+    if (window._plans_url) {
+      window.location.assign(window._plans_url);
+    }
+  };
+
+  return showModal ? (
+    <AlertDialog leastDestructiveRef={plansButtonRef}>
+      <div tabIndex={-1} className="sn-component">
+        <div
+          tabIndex={0}
+          className="max-w-89 bg-default rounded shadow-overlay p-4"
+        >
+          <AlertDialogLabel>
+            <div className="flex justify-end p-1">
+              <button
+                className="flex p-0 cursor-pointer bg-transparent border-0"
+                onClick={onClose}
+                aria-label="Close modal"
+              >
+                <Icon className="color-neutral" type="close" />
+              </button>
+            </div>
+            <div
+              className="flex items-center justify-center p-1"
+              aria-hidden={true}
+            >
+              <PremiumIllustration className="mb-2" />
+            </div>
+            <div className="text-lg text-center font-bold mb-1">
+              Enable premium features
+            </div>
+          </AlertDialogLabel>
+          <AlertDialogDescription className="text-sm text-center color-grey-1 px-4.5 mb-2">
+            In order to use <span className="font-semibold">{featureName}</span>{' '}
+            and other premium features, please purchase a subscription or
+            upgrade your current plan.
+          </AlertDialogDescription>
+          <div className="p-4">
+            <button
+              onClick={onClickPlans}
+              className="w-full rounded no-border py-2 font-bold bg-info color-info-contrast hover:brightness-130 focus:brightness-130 cursor-pointer"
+              ref={plansButtonRef}
+            >
+              See our plans
+            </button>
+          </div>
+        </div>
+      </div>
+    </AlertDialog>
+  ) : null;
+};
--- a/app/assets/javascripts/components/QuickSettingsMenu/FocusModeSwitch.tsx
+++ b/app/assets/javascripts/components/QuickSettingsMenu/FocusModeSwitch.tsx
@@ -0,0 +1,66 @@
+import { WebApplication } from '@/ui_models/application';
+import { FeatureIdentifier } from '@standardnotes/features';
+import { FeatureStatus } from '@standardnotes/snjs';
+import { FunctionComponent } from 'preact';
+import { useState } from 'preact/hooks';
+import { JSXInternal } from 'preact/src/jsx';
+import { Icon } from '../Icon';
+import { PremiumFeaturesModal } from '../PremiumFeaturesModal';
+import { Switch } from '../Switch';
+
+type Props = {
+  application: WebApplication;
+  closeQuickSettingsMenu: () => void;
+  focusModeEnabled: boolean;
+  setFocusModeEnabled: (enabled: boolean) => void;
+};
+
+export const FocusModeSwitch: FunctionComponent<Props> = ({
+  application,
+  closeQuickSettingsMenu,
+  focusModeEnabled,
+  setFocusModeEnabled,
+}) => {
+  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
+  const isEntitledToFocusMode =
+    application.getFeatureStatus(FeatureIdentifier.FocusMode) ===
+    FeatureStatus.Entitled;
+
+  const toggleFocusMode = (
+    e: JSXInternal.TargetedMouseEvent<HTMLButtonElement>
+  ) => {
+    e.preventDefault();
+    if (isEntitledToFocusMode) {
+      setFocusModeEnabled(!focusModeEnabled);
+      closeQuickSettingsMenu();
+    } else {
+      setShowUpgradeModal(true);
+    }
+  };
+
+  return (
+    <>
+      <button
+        className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none justify-between"
+        onClick={toggleFocusMode}
+      >
+        <div className="flex items-center">
+          <Icon type="menu-close" className="color-neutral mr-2" />
+          Focused Writing
+        </div>
+        {isEntitledToFocusMode ? (
+          <Switch className="px-0" checked={focusModeEnabled} />
+        ) : (
+          <div title="Premium feature">
+            <Icon type="premium-feature" />
+          </div>
+        )}
+      </button>
+      <PremiumFeaturesModal
+        showModal={showUpgradeModal}
+        featureName="Focus Mode"
+        onClose={() => setShowUpgradeModal(false)}
+      />
+    </>
+  );
+};
--- a/app/assets/javascripts/components/QuickSettingsMenu/QuickSettingsMenu.tsx
+++ b/app/assets/javascripts/components/QuickSettingsMenu/QuickSettingsMenu.tsx
@@ -15,81 +15,46 @@ import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { JSXInternal } from 'preact/src/jsx';
-import { Icon } from './Icon';
-import { Switch } from './Switch';
-import { toDirective, useCloseOnBlur } from './utils';
+import { Icon } from '../Icon';
+import { Switch } from '../Switch';
+import { toDirective, useCloseOnBlur } from '../utils';
+import {
+  quickSettingsKeyDownHandler,
+  themesMenuKeyDownHandler,
+} from './eventHandlers';
+import { FocusModeSwitch } from './FocusModeSwitch';
+import { ThemesMenuButton } from './ThemesMenuButton';

 const MENU_CLASSNAME =
  'sn-menu-border sn-dropdown min-w-80 max-h-120 max-w-xs flex flex-col py-2 overflow-y-auto';

-type ThemeButtonProps = {
-  theme: SNTheme;
-  application: WebApplication;
-  onBlur: (event: { relatedTarget: EventTarget | null }) => void;
-};
-
 type MenuProps = {
  appState: AppState;
  application: WebApplication;
 };

-const ThemeButton: FunctionComponent<ThemeButtonProps> = ({
-  application,
-  theme,
-  onBlur,
-}) => {
-  const toggleTheme = (e: any) => {
-    e.preventDefault();
-    if (theme.isLayerable() || !theme.active) {
-      application.toggleComponent(theme);
+const toggleFocusMode = (enabled: boolean) => {
+  if (enabled) {
+    document.body.classList.add('focus-mode');
+  } else {
+    if (document.body.classList.contains('focus-mode')) {
+      document.body.classList.add('disable-focus-mode');
+      document.body.classList.remove('focus-mode');
+      setTimeout(() => {
+        document.body.classList.remove('disable-focus-mode');
+      }, 315);
    }
-  };
-
-  return (
-    <button
-      className={`sn-dropdown-item focus:bg-info-backdrop focus:shadow-none ${
-        theme.isLayerable() ? `justify-start` : `justify-between`
-      }`}
-      onClick={toggleTheme}
-      onBlur={onBlur}
-    >
-      {theme.isLayerable() ? (
-        <>
-          <Switch
-            className="px-0 mr-2"
-            checked={theme.active}
-            onChange={toggleTheme}
-          />
-          {theme.package_info.name}
-        </>
-      ) : (
-        <>
-          <div className="flex items-center">
-            <div
-              className={`pseudo-radio-btn ${
-                theme.active ? 'pseudo-radio-btn--checked' : ''
-              } mr-2`}
-            ></div>
-            <span className={theme.active ? 'font-semibold' : undefined}>
-              {theme.package_info.name}
-            </span>
-          </div>
-          <div
-            className="w-5 h-5 rounded-full"
-            style={{
-              backgroundColor: theme.package_info?.dock_icon?.background_color,
-            }}
-          ></div>
-        </>
-      )}
-    </button>
-  );
+  }
 };

 const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
  ({ application, appState }) => {
-    const { closeQuickSettingsMenu, shouldAnimateCloseMenu } =
-      appState.quickSettingsMenu;
+    const {
+      closeQuickSettingsMenu,
+      shouldAnimateCloseMenu,
+      focusModeEnabled,
+      setFocusModeEnabled,
+    } = appState.quickSettingsMenu;
    const [themes, setThemes] = useState<SNTheme[]>([]);
    const [toggleableComponents, setToggleableComponents] = useState<
      SNComponent[]
@@ -104,6 +69,10 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
    const quickSettingsMenuRef = useRef<HTMLDivElement>(null);
    const defaultThemeButtonRef = useRef<HTMLButtonElement>(null);

+    useEffect(() => {
+      toggleFocusMode(focusModeEnabled);
+    }, [focusModeEnabled]);
+
    const reloadThemes = useCallback(() => {
      application.streamItems(ContentType.Theme, () => {
        const themes = application.getDisplayableItems(
@@ -157,12 +126,12 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(

    useEffect(() => {
      if (themesMenuOpen) {
-        defaultThemeButtonRef.current!.focus();
+        defaultThemeButtonRef.current?.focus();
      }
    }, [themesMenuOpen]);

    useEffect(() => {
-      prefsButtonRef.current!.focus();
+      prefsButtonRef.current?.focus();
    }, []);

    const [closeOnBlur] = useCloseOnBlur(
@@ -171,9 +140,9 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
    );

    const toggleThemesMenu = () => {
-      if (!themesMenuOpen) {
+      if (!themesMenuOpen && themesButtonRef.current) {
        const themesButtonRect =
-          themesButtonRef.current!.getBoundingClientRect();
+          themesButtonRef.current.getBoundingClientRect();
        setThemesMenuPosition({
          left: themesButtonRect.right,
          bottom:
@@ -200,7 +169,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
      switch (event.key) {
        case 'Escape':
          setThemesMenuOpen(false);
-          themesButtonRef.current!.focus();
+          themesButtonRef.current?.focus();
          break;
        case 'ArrowRight':
          if (!themesMenuOpen) {
@@ -211,65 +180,23 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(

    const handleQuickSettingsKeyDown: JSXInternal.KeyboardEventHandler<HTMLDivElement> =
      (event) => {
-        const items: NodeListOf<HTMLButtonElement> =
-          quickSettingsMenuRef.current!.querySelectorAll(':scope > button');
-        const currentFocusedIndex = Array.from(items).findIndex(
-          (btn) => btn === document.activeElement
+        quickSettingsKeyDownHandler(
+          closeQuickSettingsMenu,
+          event,
+          quickSettingsMenuRef,
+          themesMenuOpen
        );
-
-        if (!themesMenuOpen) {
-          switch (event.key) {
-            case 'Escape':
-              closeQuickSettingsMenu();
-              break;
-            case 'ArrowDown':
-              if (items[currentFocusedIndex + 1]) {
-                items[currentFocusedIndex + 1].focus();
-              } else {
-                items[0].focus();
-              }
-              break;
-            case 'ArrowUp':
-              if (items[currentFocusedIndex - 1]) {
-                items[currentFocusedIndex - 1].focus();
-              } else {
-                items[items.length - 1].focus();
-              }
-              break;
-          }
-        }
      };

    const handlePanelKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (
      event
    ) => {
-      const themes = themesMenuRef.current!.querySelectorAll('button');
-      const currentFocusedIndex = Array.from(themes).findIndex(
-        (themeBtn) => themeBtn === document.activeElement
+      themesMenuKeyDownHandler(
+        event,
+        themesMenuRef,
+        setThemesMenuOpen,
+        themesButtonRef
      );
-
-      switch (event.key) {
-        case 'Escape':
-        case 'ArrowLeft':
-          event.stopPropagation();
-          setThemesMenuOpen(false);
-          themesButtonRef.current!.focus();
-          break;
-        case 'ArrowDown':
-          if (themes[currentFocusedIndex + 1]) {
-            themes[currentFocusedIndex + 1].focus();
-          } else {
-            themes[0].focus();
-          }
-          break;
-        case 'ArrowUp':
-          if (themes[currentFocusedIndex - 1]) {
-            themes[currentFocusedIndex - 1].focus();
-          } else {
-            themes[themes.length - 1].focus();
-          }
-          break;
-      }
    };

    const toggleDefaultTheme = () => {
@@ -332,7 +259,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
                Default
              </button>
              {themes.map((theme) => (
-                <ThemeButton
+                <ThemesMenuButton
                  theme={theme}
                  application={application}
                  key={theme.uuid}
@@ -341,7 +268,6 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
              ))}
            </DisclosurePanel>
          </Disclosure>
-
          {toggleableComponents.map((component) => (
            <Switch
              className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
@@ -356,10 +282,15 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
              </div>
            </Switch>
          ))}
-
+          <FocusModeSwitch
+            application={application}
+            closeQuickSettingsMenu={closeQuickSettingsMenu}
+            focusModeEnabled={focusModeEnabled}
+            setFocusModeEnabled={setFocusModeEnabled}
+          />
          <div className="h-1px my-2 bg-border"></div>
          <button
-            class="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
+            className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
            onClick={openPreferences}
            ref={prefsButtonRef}
          >
--- a/app/assets/javascripts/components/QuickSettingsMenu/ThemesMenuButton.tsx
+++ b/app/assets/javascripts/components/QuickSettingsMenu/ThemesMenuButton.tsx
@@ -0,0 +1,60 @@
+import { WebApplication } from '@/ui_models/application';
+import { SNTheme } from '@standardnotes/snjs';
+import { FunctionComponent } from 'preact';
+import { JSXInternal } from 'preact/src/jsx';
+import { Switch } from '../Switch';
+
+type Props = {
+  theme: SNTheme;
+  application: WebApplication;
+  onBlur: (event: { relatedTarget: EventTarget | null }) => void;
+};
+
+export const ThemesMenuButton: FunctionComponent<Props> = ({
+  application,
+  theme,
+  onBlur,
+}) => {
+  const toggleTheme: JSXInternal.MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.preventDefault();
+    if (theme.isLayerable() || !theme.active) {
+      application.toggleComponent(theme);
+    }
+  };
+
+  return (
+    <button
+      className={`sn-dropdown-item focus:bg-info-backdrop focus:shadow-none ${
+        theme.isLayerable() ? `justify-start` : `justify-between`
+      }`}
+      onClick={toggleTheme}
+      onBlur={onBlur}
+    >
+      {theme.isLayerable() ? (
+        <>
+          <Switch className="px-0 mr-2" checked={theme.active} />
+          {theme.package_info.name}
+        </>
+      ) : (
+        <>
+          <div className="flex items-center">
+            <div
+              className={`pseudo-radio-btn ${
+                theme.active ? 'pseudo-radio-btn--checked' : ''
+              } mr-2`}
+            ></div>
+            <span className={theme.active ? 'font-semibold' : undefined}>
+              {theme.package_info.name}
+            </span>
+          </div>
+          <div
+            className="w-5 h-5 rounded-full"
+            style={{
+              backgroundColor: theme.package_info?.dock_icon?.background_color,
+            }}
+          ></div>
+        </>
+      )}
+    </button>
+  );
+};
--- a/app/assets/javascripts/components/QuickSettingsMenu/eventHandlers.ts
+++ b/app/assets/javascripts/components/QuickSettingsMenu/eventHandlers.ts
@@ -0,0 +1,77 @@
+import { RefObject } from 'preact';
+import { StateUpdater } from 'preact/hooks';
+import { JSXInternal } from 'preact/src/jsx';
+
+export const quickSettingsKeyDownHandler = (
+  closeQuickSettingsMenu: () => void,
+  event: JSXInternal.TargetedKeyboardEvent<HTMLDivElement>,
+  quickSettingsMenuRef: RefObject<HTMLDivElement>,
+  themesMenuOpen: boolean
+) => {
+  if (quickSettingsMenuRef?.current) {
+    const items: NodeListOf<HTMLButtonElement> =
+      quickSettingsMenuRef.current.querySelectorAll(':scope > button');
+    const currentFocusedIndex = Array.from(items).findIndex(
+      (btn) => btn === document.activeElement
+    );
+
+    if (!themesMenuOpen) {
+      switch (event.key) {
+        case 'Escape':
+          closeQuickSettingsMenu();
+          break;
+        case 'ArrowDown':
+          if (items[currentFocusedIndex + 1]) {
+            items[currentFocusedIndex + 1].focus();
+          } else {
+            items[0].focus();
+          }
+          break;
+        case 'ArrowUp':
+          if (items[currentFocusedIndex - 1]) {
+            items[currentFocusedIndex - 1].focus();
+          } else {
+            items[items.length - 1].focus();
+          }
+          break;
+      }
+    }
+  }
+};
+
+export const themesMenuKeyDownHandler = (
+  event: React.KeyboardEvent<HTMLDivElement>,
+  themesMenuRef: RefObject<HTMLDivElement>,
+  setThemesMenuOpen: StateUpdater<boolean>,
+  themesButtonRef: RefObject<HTMLButtonElement>
+) => {
+  if (themesMenuRef?.current) {
+    const themes = themesMenuRef.current.querySelectorAll('button');
+    const currentFocusedIndex = Array.from(themes).findIndex(
+      (themeBtn) => themeBtn === document.activeElement
+    );
+
+    switch (event.key) {
+      case 'Escape':
+      case 'ArrowLeft':
+        event.stopPropagation();
+        setThemesMenuOpen(false);
+        themesButtonRef.current?.focus();
+        break;
+      case 'ArrowDown':
+        if (themes[currentFocusedIndex + 1]) {
+          themes[currentFocusedIndex + 1].focus();
+        } else {
+          themes[0].focus();
+        }
+        break;
+      case 'ArrowUp':
+        if (themes[currentFocusedIndex - 1]) {
+          themes[currentFocusedIndex - 1].focus();
+        } else {
+          themes[themes.length - 1].focus();
+        }
+        break;
+    }
+  }
+};
--- a/app/assets/javascripts/components/Switch.tsx
+++ b/app/assets/javascripts/components/Switch.tsx
@@ -10,7 +10,8 @@ import '@reach/checkbox/styles.css';

 export type SwitchProps = HTMLProps<HTMLInputElement> & {
  checked?: boolean;
-  onChange: (checked: boolean) => void;
+  // Optional in case it is wrapped in a button (e.g. a menu item)
+  onChange?: (checked: boolean) => void;
  className?: string;
  children?: ComponentChildren;
  role?: string;
@@ -32,7 +33,7 @@ export const Switch: FunctionalComponent<SwitchProps> = (
        checked={checked}
        onChange={(event) => {
          setChecked(event.target.checked);
-          props.onChange(event.target.checked);
+          props.onChange?.(event.target.checked);
        }}
        className={`sn-switch ${checked ? 'bg-info' : 'bg-neutral'}`}
      >