Revert "feat: handle unprotected session expiration (#747)"

This reverts commit 8db549f6f6.

app/assets/javascripts/components/AccountMenu/DataBackup.tsx

@@ -0,0 +1,180 @@
+import { isDesktopApplication } from '@/utils';
+import { alertDialog } from '@Services/alertService';
+import {
+  STRING_IMPORT_SUCCESS,
+  STRING_INVALID_IMPORT_FILE,
+  STRING_UNSUPPORTED_BACKUP_FILE_VERSION,
+  StringImportError
+} from '@/strings';
+import { BackupFile } from '@standardnotes/snjs';
+import { useRef, useState } from 'preact/hooks';
+import { WebApplication } from '@/ui_models/application';
+import { JSXInternal } from 'preact/src/jsx';
+import TargetedEvent = JSXInternal.TargetedEvent;
+import { AppState } from '@/ui_models/app_state';
+import { observer } from 'mobx-react-lite';
+
+type Props = {
+  application: WebApplication;
+  appState: AppState;
+}
+
+const DataBackup = observer(({
+                               application,
+                               appState
+                             }: Props) => {
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [isImportDataLoading, setIsImportDataLoading] = useState(false);
+
+  const { isBackupEncrypted, isEncryptionEnabled, setIsBackupEncrypted } = appState.accountMenu;
+
+  const downloadDataArchive = () => {
+    application.getArchiveService().downloadBackup(isBackupEncrypted);
+  };
+
+  const readFile = async (file: File): Promise<any> => {
+    return new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        try {
+          const data = JSON.parse(e.target!.result as string);
+          resolve(data);
+        } catch (e) {
+          application.alertService.alert(STRING_INVALID_IMPORT_FILE);
+        }
+      };
+      reader.readAsText(file);
+    });
+  };
+
+  const performImport = async (data: BackupFile) => {
+    setIsImportDataLoading(true);
+
+    const result = await application.importData(data);
+
+    setIsImportDataLoading(false);
+
+    if (!result) {
+      return;
+    }
+
+    let statusText = STRING_IMPORT_SUCCESS;
+    if ('error' in result) {
+      statusText = result.error;
+    } else if (result.errorCount) {
+      statusText = StringImportError(result.errorCount);
+    }
+    void alertDialog({
+      text: statusText
+    });
+  };
+
+  const importFileSelected = async (event: TargetedEvent<HTMLInputElement, Event>) => {
+    const { files } = (event.target as HTMLInputElement);
+
+    if (!files) {
+      return;
+    }
+    const file = files[0];
+    const data = await readFile(file);
+    if (!data) {
+      return;
+    }
+
+    const version = data.version || data.keyParams?.version || data.auth_params?.version;
+    if (!version) {
+      await performImport(data);
+      return;
+    }
+
+    if (
+      application.protocolService.supportedVersions().includes(version)
+    ) {
+      await performImport(data);
+    } else {
+      setIsImportDataLoading(false);
+      void alertDialog({ text: STRING_UNSUPPORTED_BACKUP_FILE_VERSION });
+    }
+  };
+
+  // Whenever "Import Backup" is either clicked or key-pressed, proceed the import
+  const handleImportFile = (event: TargetedEvent<HTMLSpanElement, Event> | KeyboardEvent) => {
+    if (event instanceof KeyboardEvent) {
+      const { code } = event;
+
+      // Process only when "Enter" or "Space" keys are pressed
+      if (code !== 'Enter' && code !== 'Space') {
+        return;
+      }
+      // Don't proceed the event's default action
+      // (like scrolling in case the "space" key is pressed)
+      event.preventDefault();
+    }
+
+    (fileInputRef.current as HTMLInputElement).click();
+  };
+
+  return (
+    <>
+      {isImportDataLoading ? (
+        <div className="sk-spinner small info" />
+      ) : (
+        <div className="sk-panel-section">
+          <div className="sk-panel-section-title">Data Backups</div>
+          <div className="sk-p">Download a backup of all your data.</div>
+          {isEncryptionEnabled && (
+            <form className="sk-panel-form sk-panel-row">
+              <div className="sk-input-group">
+                <label className="sk-horizontal-group tight">
+                  <input
+                    type="radio"
+                    onChange={() => setIsBackupEncrypted(true)}
+                    checked={isBackupEncrypted}
+                  />
+                  <p className="sk-p">Encrypted</p>
+                </label>
+                <label className="sk-horizontal-group tight">
+                  <input
+                    type="radio"
+                    onChange={() => setIsBackupEncrypted(false)}
+                    checked={!isBackupEncrypted}
+                  />
+                  <p className="sk-p">Decrypted</p>
+                </label>
+              </div>
+            </form>
+          )}
+          <div className="sk-panel-row" />
+          <div className="flex">
+            <button className="sn-button small info" onClick={downloadDataArchive}>Download Backup</button>
+            <button
+              type="button"
+              className="sn-button small flex items-center info ml-2"
+              tabIndex={0}
+              onClick={handleImportFile}
+              onKeyDown={handleImportFile}
+            >
+              <input
+                type="file"
+                ref={fileInputRef}
+                onChange={importFileSelected}
+                className="hidden"
+              />
+              Import Backup
+            </button>
+          </div>
+          {isDesktopApplication() && (
+            <p className="mt-5">
+              Backups are automatically created on desktop and can be managed
+              via the "Backups" top-level menu.
+            </p>
+          )}
+          <div className="sk-panel-row" />
+        </div>
+      )}
+    </>
+  );
+});
+
+export default DataBackup;

app/assets/javascripts/components/AccountMenu/Encryption.tsx

@@ -0,0 +1,33 @@
+import { AppState } from '@/ui_models/app_state';
+import { observer } from 'mobx-react-lite';
+
+type Props = {
+  appState: AppState;
+}
+
+const Encryption = observer(({ appState }: Props) => {
+  const { isEncryptionEnabled, encryptionStatusString, notesAndTagsCount } = appState.accountMenu;
+
+  const getEncryptionStatusForNotes = () => {
+    const length = notesAndTagsCount;
+    return `${length}/${length} notes and tags encrypted`;
+  };
+
+  return (
+    <div className="sk-panel-section">
+      <div className="sk-panel-section-title">
+        Encryption
+      </div>
+      {isEncryptionEnabled && (
+        <div className="sk-panel-section-subtitle info">
+          {getEncryptionStatusForNotes()}
+        </div>
+      )}
+      <p className="sk-p">
+        {encryptionStatusString}
+      </p>
+    </div>
+  );
+});
+
+export default Encryption;

app/assets/javascripts/components/AccountMenu/ErrorReporting.tsx

@@ -0,0 +1,80 @@
+import { useState } from 'preact/hooks';
+import { storage, StorageKey } from '@Services/localStorage';
+import { disableErrorReporting, enableErrorReporting, errorReportingId } from '@Services/errorReporting';
+import { alertDialog } from '@Services/alertService';
+import { observer } from 'mobx-react-lite';
+import { AppState } from '@/ui_models/app_state';
+
+type Props = {
+  appState: AppState;
+}
+
+const ErrorReporting = observer(({ appState }: Props) => {
+  const [isErrorReportingEnabled] = useState(() => storage.get(StorageKey.DisableErrorReporting) === false);
+  const [errorReportingIdValue] = useState(() => errorReportingId());
+
+  const toggleErrorReportingEnabled = () => {
+    if (isErrorReportingEnabled) {
+      disableErrorReporting();
+    } else {
+      enableErrorReporting();
+    }
+    if (!appState.sync.inProgress) {
+      window.location.reload();
+    }
+  };
+
+  const openErrorReportingDialog = () => {
+    alertDialog({
+      title: 'Data sent during automatic error reporting',
+      text: `
+        We use <a target="_blank" rel="noreferrer" href="https://www.bugsnag.com/">Bugsnag</a>
+        to automatically report errors that occur while the app is running. See
+        <a target="_blank" rel="noreferrer" href="https://docs.bugsnag.com/platforms/javascript/#sending-diagnostic-data">
+          this article, paragraph 'Browser' under 'Sending diagnostic data',
+        </a>
+        to see what data is included in error reports.
+        <br><br>
+        Error reports never include IP addresses and are fully
+        anonymized. We use error reports to be alerted when something in our
+        code is causing unexpected errors and crashes in your application
+        experience.
+      `
+    });
+  };
+
+  return (
+    <div className="sk-panel-section">
+      <div className="sk-panel-section-title">Error Reporting</div>
+      <div className="sk-panel-section-subtitle info">
+        Automatic error reporting is {isErrorReportingEnabled ? 'enabled' : 'disabled'}
+      </div>
+      <p className="sk-p">
+        Help us improve Standard Notes by automatically submitting
+        anonymized error reports.
+      </p>
+      {errorReportingIdValue && (
+        <>
+          <p className="sk-p selectable">
+            Your random identifier is <span className="font-bold">{errorReportingIdValue}</span>
+          </p>
+          <p className="sk-p">
+            Disabling error reporting will remove that identifier from your
+            local storage, and a new identifier will be created should you
+            decide to enable error reporting again in the future.
+          </p>
+        </>
+      )}
+      <div className="sk-panel-row">
+        <button className="sn-button small info" onClick={toggleErrorReportingEnabled}>
+          {isErrorReportingEnabled ? 'Disable' : 'Enable'} Error Reporting
+        </button>
+      </div>
+      <div className="sk-panel-row">
+        <a className="sk-a" onClick={openErrorReportingDialog}>What data is being sent?</a>
+      </div>
+    </div>
+  );
+});
+
+export default ErrorReporting;

app/assets/javascripts/components/AccountMenu/PasscodeLock.tsx

@@ -0,0 +1,272 @@
+import {
+  STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_CHANGE,
+  STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_REMOVAL, STRING_E2E_ENABLED, STRING_ENC_NOT_ENABLED, STRING_LOCAL_ENC_ENABLED,
+  STRING_NON_MATCHING_PASSCODES,
+  StringUtils,
+  Strings
+} from '@/strings';
+import { WebApplication } from '@/ui_models/application';
+import { preventRefreshing } from '@/utils';
+import { JSXInternal } from 'preact/src/jsx';
+import TargetedEvent = JSXInternal.TargetedEvent;
+import { alertDialog } from '@Services/alertService';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { ApplicationEvent } from '@standardnotes/snjs';
+import TargetedMouseEvent = JSXInternal.TargetedMouseEvent;
+import { observer } from 'mobx-react-lite';
+import { AppState } from '@/ui_models/app_state';
+
+type Props = {
+  application: WebApplication;
+  appState: AppState;
+};
+
+const PasscodeLock = observer(({
+                                 application,
+                                 appState,
+                               }: Props) => {
+  const keyStorageInfo = StringUtils.keyStorageInfo(application);
+  const passcodeAutoLockOptions = application.getAutolockService().getAutoLockIntervalOptions();
+
+  const { setIsEncryptionEnabled, setIsBackupEncrypted, setEncryptionStatusString } = appState.accountMenu;
+
+  const passcodeInputRef = useRef<HTMLInputElement>(null);
+
+  const [passcode, setPasscode] = useState<string | undefined>(undefined);
+  const [passcodeConfirmation, setPasscodeConfirmation] = useState<string | undefined>(undefined);
+  const [selectedAutoLockInterval, setSelectedAutoLockInterval] = useState<unknown>(null);
+  const [isPasscodeFocused, setIsPasscodeFocused] = useState(false);
+  const [showPasscodeForm, setShowPasscodeForm] = useState(false);
+  const [canAddPasscode, setCanAddPasscode] = useState(!application.isEphemeralSession());
+  const [hasPasscode, setHasPasscode] = useState(application.hasPasscode());
+
+  const handleAddPassCode = () => {
+    setShowPasscodeForm(true);
+    setIsPasscodeFocused(true);
+  };
+
+  const changePasscodePressed = () => {
+    handleAddPassCode();
+  };
+
+  const reloadAutoLockInterval = useCallback(async () => {
+    const interval = await application.getAutolockService().getAutoLockInterval();
+    setSelectedAutoLockInterval(interval);
+  }, [application]);
+
+  const refreshEncryptionStatus = useCallback(() => {
+    const hasUser = application.hasAccount();
+    const hasPasscode = application.hasPasscode();
+
+    setHasPasscode(hasPasscode);
+
+    const encryptionEnabled = hasUser || hasPasscode;
+
+    const encryptionStatusString = hasUser
+      ? STRING_E2E_ENABLED
+      : hasPasscode
+        ? STRING_LOCAL_ENC_ENABLED
+        : STRING_ENC_NOT_ENABLED;
+
+    setEncryptionStatusString(encryptionStatusString);
+    setIsEncryptionEnabled(encryptionEnabled);
+    setIsBackupEncrypted(encryptionEnabled);
+  }, [application, setEncryptionStatusString, setIsBackupEncrypted, setIsEncryptionEnabled]);
+
+  const selectAutoLockInterval = async (interval: number) => {
+    if (!(await application.authorizeAutolockIntervalChange())) {
+      return;
+    }
+    await application.getAutolockService().setAutoLockInterval(interval);
+    reloadAutoLockInterval();
+  };
+
+  const removePasscodePressed = async () => {
+    await preventRefreshing(
+      STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_REMOVAL,
+      async () => {
+        if (await application.removePasscode()) {
+          await application
+            .getAutolockService()
+            .deleteAutolockPreference();
+          await reloadAutoLockInterval();
+          refreshEncryptionStatus();
+        }
+      }
+    );
+  };
+
+  const handlePasscodeChange = (event: TargetedEvent<HTMLInputElement>) => {
+    const { value } = event.target as HTMLInputElement;
+    setPasscode(value);
+  };
+
+  const handleConfirmPasscodeChange = (event: TargetedEvent<HTMLInputElement>) => {
+    const { value } = event.target as HTMLInputElement;
+    setPasscodeConfirmation(value);
+  };
+
+  const submitPasscodeForm = async (event: TargetedEvent<HTMLFormElement> | TargetedMouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+
+    if (!passcode || passcode.length === 0) {
+      await alertDialog({
+        text: Strings.enterPasscode,
+      });
+    }
+
+    if (passcode !== passcodeConfirmation) {
+      await alertDialog({
+        text: STRING_NON_MATCHING_PASSCODES
+      });
+      setIsPasscodeFocused(true);
+      return;
+    }
+
+    await preventRefreshing(
+      STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_CHANGE,
+      async () => {
+        const successful = application.hasPasscode()
+          ? await application.changePasscode(passcode as string)
+          : await application.addPasscode(passcode as string);
+
+        if (!successful) {
+          setIsPasscodeFocused(true);
+        }
+      }
+    );
+
+    setPasscode(undefined);
+    setPasscodeConfirmation(undefined);
+    setShowPasscodeForm(false);
+
+    refreshEncryptionStatus();
+  };
+
+  useEffect(() => {
+    refreshEncryptionStatus();
+  }, [refreshEncryptionStatus]);
+
+  // `reloadAutoLockInterval` gets interval asynchronously, therefore we call `useEffect` to set initial
+  // value of `selectedAutoLockInterval`
+  useEffect(() => {
+    reloadAutoLockInterval();
+  }, [reloadAutoLockInterval]);
+
+  useEffect(() => {
+    if (isPasscodeFocused) {
+      passcodeInputRef.current!.focus();
+      setIsPasscodeFocused(false);
+    }
+  }, [isPasscodeFocused]);
+
+  // Add the required event observers
+  useEffect(() => {
+    const removeKeyStatusChangedObserver = application.addEventObserver(
+      async () => {
+        setCanAddPasscode(!application.isEphemeralSession());
+        setHasPasscode(application.hasPasscode());
+        setShowPasscodeForm(false);
+      },
+      ApplicationEvent.KeyStatusChanged
+    );
+
+    return () => {
+      removeKeyStatusChangedObserver();
+    };
+  }, [application]);
+
+  return (
+    <div className="sk-panel-section">
+      <div className="sk-panel-section-title">Passcode Lock</div>
+      {!hasPasscode && (
+        <div>
+          {canAddPasscode && (
+            <>
+              {!showPasscodeForm && (
+                <div className="sk-panel-row">
+                  <button className="sn-button small info" onClick={handleAddPassCode}>
+                    Add Passcode
+                  </button>
+                </div>
+              )}
+              <p className="sk-p">
+                Add a passcode to lock the application and
+                encrypt on-device key storage.
+              </p>
+              {keyStorageInfo && (
+                <p>{keyStorageInfo}</p>
+              )}
+            </>
+          )}
+          {!canAddPasscode && (
+            <p className="sk-p">
+              Adding a passcode is not supported in temporary sessions. Please sign
+              out, then sign back in with the "Stay signed in" option checked.
+            </p>
+          )}
+        </div>
+      )}
+      {showPasscodeForm && (
+        <form className="sk-panel-form" onSubmit={submitPasscodeForm}>
+          <div className="sk-panel-row" />
+          <input
+            className="sk-input contrast"
+            type="password"
+            ref={passcodeInputRef}
+            value={passcode}
+            onChange={handlePasscodeChange}
+            placeholder="Passcode"
+          />
+          <input
+            className="sk-input contrast"
+            type="password"
+            value={passcodeConfirmation}
+            onChange={handleConfirmPasscodeChange}
+            placeholder="Confirm Passcode"
+          />
+          <button className="sn-button small info mt-2" onClick={submitPasscodeForm}>
+            Set Passcode
+          </button>
+          <button className="sn-button small outlined ml-2" onClick={() => setShowPasscodeForm(false)}>
+            Cancel
+          </button>
+        </form>
+      )}
+      {hasPasscode && !showPasscodeForm && (
+        <>
+          <div className="sk-panel-section-subtitle info">Passcode lock is enabled</div>
+          <div className="sk-notification contrast">
+            <div className="sk-notification-title">Options</div>
+            <div className="sk-notification-text">
+              <div className="sk-panel-row">
+                <div className="sk-horizontal-group">
+                  <div className="sk-h4 sk-bold">Autolock</div>
+                  {passcodeAutoLockOptions.map(option => {
+                    return (
+                      <a
+                        className={`sk-a info ${option.value === selectedAutoLockInterval ? 'boxed' : ''}`}
+                        onClick={() => selectAutoLockInterval(option.value)}>
+                        {option.label}
+                      </a>
+                    );
+                  })}
+                </div>
+              </div>
+              <div className="sk-p">The autolock timer begins when the window or tab loses focus.</div>
+              <div className="sk-panel-row" />
+              <a className="sk-a info sk-panel-row condensed" onClick={changePasscodePressed}>
+                Change Passcode
+              </a>
+              <a className="sk-a danger sk-panel-row condensed" onClick={removePasscodePressed}>
+                Remove Passcode
+              </a>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+});
+
+export default PasscodeLock;

app/assets/javascripts/components/AccountMenu/Protections.tsx

@@ -0,0 +1,100 @@
+import { WebApplication } from '@/ui_models/application';
+import { FunctionalComponent } from 'preact';
+import { useCallback, useState } from 'preact/hooks';
+import { useEffect } from 'preact/hooks';
+import { ApplicationEvent } from '@standardnotes/snjs';
+import { isSameDay } from '@/utils';
+
+type Props = {
+  application: WebApplication;
+};
+
+const Protections: FunctionalComponent<Props> = ({ application }) => {
+  const enableProtections = () => {
+    application.clearProtectionSession();
+  };
+
+  const [hasProtections, setHasProtections] = useState(() => application.hasProtectionSources());
+
+  const getProtectionsDisabledUntil = useCallback((): string | null => {
+    const protectionExpiry = application.getProtectionSessionExpiryDate();
+    const now = new Date();
+    if (protectionExpiry > now) {
+      let f: Intl.DateTimeFormat;
+      if (isSameDay(protectionExpiry, now)) {
+        f = new Intl.DateTimeFormat(undefined, {
+          hour: 'numeric',
+          minute: 'numeric'
+        });
+      } else {
+        f = new Intl.DateTimeFormat(undefined, {
+          weekday: 'long',
+          day: 'numeric',
+          month: 'short',
+          hour: 'numeric',
+          minute: 'numeric'
+        });
+      }
+
+      return f.format(protectionExpiry);
+    }
+    return null;
+  }, [application]);
+
+  const [protectionsDisabledUntil, setProtectionsDisabledUntil] = useState(getProtectionsDisabledUntil());
+
+  useEffect(() => {
+    const removeProtectionSessionExpiryDateChangedObserver = application.addEventObserver(
+      async () => {
+        setProtectionsDisabledUntil(getProtectionsDisabledUntil());
+      },
+      ApplicationEvent.ProtectionSessionExpiryDateChanged
+    );
+
+    const removeKeyStatusChangedObserver = application.addEventObserver(
+      async () => {
+        setHasProtections(application.hasProtectionSources());
+      },
+      ApplicationEvent.KeyStatusChanged
+    );
+
+    return () => {
+      removeProtectionSessionExpiryDateChangedObserver();
+      removeKeyStatusChangedObserver();
+    };
+  }, [application, getProtectionsDisabledUntil]);
+
+  if (!hasProtections) {
+    return null;
+  }
+
+  return (
+    <div className="sk-panel-section">
+      <div className="sk-panel-section-title">Protections</div>
+      {protectionsDisabledUntil && (
+        <div className="sk-panel-section-subtitle info">
+          Protections are disabled until {protectionsDisabledUntil}
+        </div>
+      )}
+      {!protectionsDisabledUntil && (
+        <div className="sk-panel-section-subtitle info">
+          Protections are enabled
+        </div>
+      )}
+      <p className="sk-p">
+        Actions like viewing protected notes, exporting decrypted backups,
+        or revoking an active session, require additional authentication
+        like entering your account password or application passcode.
+      </p>
+      {protectionsDisabledUntil && (
+        <div className="sk-panel-row">
+          <button className="sn-button small info" onClick={enableProtections}>
+            Enable protections
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Protections;

app/assets/javascripts/components/NoProtectionsNoteWarning.tsx

@@ -1,41 +1,27 @@
 import { AppState } from '@/ui_models/app_state';
 import { toDirective } from './utils';
 
-type Props = {
-  appState: AppState;
-  onViewNote: () => void;
-  requireAuthenticationForProtectedNote: boolean;
-};
-
-function NoProtectionsNoteWarning({
-  appState,
-  onViewNote,
-  requireAuthenticationForProtectedNote,
-}: Props) {
-  const instructionText = requireAuthenticationForProtectedNote
-    ? 'Authenticate to view this note.'
-    : 'Add a passcode or create an account to require authentication to view this note.';
+type Props = { appState: AppState; onViewNote: () => void };
 
+function NoProtectionsNoteWarning({ appState, onViewNote }: Props) {
   return (
     <div className="flex flex-col items-center justify-center text-center max-w-md">
       <h1 className="text-2xl m-0 w-full">This note is protected</h1>
-      <p className="text-lg mt-2 w-full">{instructionText}</p>
+      <p className="text-lg mt-2 w-full">
+        Add a passcode or create an account to require authentication to view
+        this note.
+      </p>
       <div className="mt-4 flex gap-3">
-        {!requireAuthenticationForProtectedNote && (
-          <button
-            className="sn-button small info"
-            onClick={() => {
-              appState.accountMenu.setShow(true);
-            }}
-          >
-            Open account menu
-          </button>
-        )}
         <button
-          className="sn-button small outlined normal-focus-brightness"
-          onClick={onViewNote}
+          className="sn-button small info"
+          onClick={() => {
+            appState.accountMenu.setShow(true);
+          }}
         >
-          {requireAuthenticationForProtectedNote ? 'Authenticate' : 'View Note'}
+          Open account menu
+        </button>
+        <button className="sn-button small outlined" onClick={onViewNote}>
+          View note
         </button>
       </div>
     </div>
@@ -46,6 +32,5 @@ export const NoProtectionsdNoteWarningDirective = toDirective<Props>(
   NoProtectionsNoteWarning,
   {
     onViewNote: '&',
-    requireAuthenticationForProtectedNote: '=',
   }
 );

app/assets/javascripts/components/SearchOptions.tsx

@@ -1,7 +1,7 @@
 import { AppState } from '@/ui_models/app_state';
 import { Icon } from './Icon';
 import { toDirective, useCloseOnBlur } from './utils';
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useRef, useState } from 'preact/hooks';
 import { WebApplication } from '@/ui_models/application';
 import VisuallyHidden from '@reach/visually-hidden';
 import {
@@ -11,6 +11,7 @@ import {
 } from '@reach/disclosure';
 import { Switch } from './Switch';
 import { observer } from 'mobx-react-lite';
+import { useEffect } from 'react';
 
 type Props = {
   appState: AppState;

app/assets/javascripts/components/utils.ts

@@ -1,6 +1,7 @@
 import { FunctionComponent, h, render } from 'preact';
 import { unmountComponentAtNode } from 'preact/compat';
-import { StateUpdater, useCallback, useState, useEffect } from 'preact/hooks';
+import { StateUpdater, useCallback, useState } from 'preact/hooks';
+import { useEffect } from 'react';
 
 /**
  * @returns a callback that will close a dropdown if none of its children has