From dc3dcfba2b6c3ee4b61dd174f6023d0d80ef2b60 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Sat, 26 Mar 2022 15:26:36 +0530
Subject: [PATCH 001/102] refactor: DecoratedInput and add
 DecoratedPasswordInput (#953)

---
 .../AccountMenu/AdvancedOptions.tsx           |  42 +++---
 .../AccountMenu/ConfirmPassword.tsx           |  29 ++--
 .../components/AccountMenu/CreateAccount.tsx  |  44 ++----
 .../components/AccountMenu/SignIn.tsx         |  40 ++---
 .../javascripts/components/DecoratedInput.tsx | 140 +++++++++++-------
 .../components/DecoratedPasswordInput.tsx     |  42 ++++++
 .../javascripts/components/InputWithIcon.tsx  |  91 ------------
 .../Preferences/panes/Extensions.tsx          |   2 +-
 .../panes/account/offlineSubscription.tsx     |   2 +-
 .../panes/security-segments/Encryption.tsx    |  47 +++---
 .../panes/two-factor-auth/SaveSecretKey.tsx   |   2 +-
 .../panes/two-factor-auth/ScanQRCode.tsx      |   2 +-
 .../panes/two-factor-auth/Verification.tsx    |   3 +-
 app/assets/stylesheets/_sn.scss               |   4 +
 14 files changed, 210 insertions(+), 280 deletions(-)
 create mode 100644 app/assets/javascripts/components/DecoratedPasswordInput.tsx
 delete mode 100644 app/assets/javascripts/components/InputWithIcon.tsx

diff --git a/app/assets/javascripts/components/AccountMenu/AdvancedOptions.tsx b/app/assets/javascripts/components/AccountMenu/AdvancedOptions.tsx
index a09335b36..ec67e0ed3 100644
--- a/app/assets/javascripts/components/AccountMenu/AdvancedOptions.tsx
+++ b/app/assets/javascripts/components/AccountMenu/AdvancedOptions.tsx
@@ -4,8 +4,8 @@ import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
 import { Checkbox } from '../Checkbox';
+import { DecoratedInput } from '../DecoratedInput';
 import { Icon } from '../Icon';
-import { InputWithIcon } from '../InputWithIcon';
 
 type Props = {
   application: WebApplication;
@@ -63,16 +63,12 @@ export const AdvancedOptions: FunctionComponent<Props> = observer(
       setIsVault(!isVault);
     };
 
-    const handleVaultNameChange = (e: Event) => {
-      if (e.target instanceof HTMLInputElement) {
-        setVaultName(e.target.value);
-      }
+    const handleVaultNameChange = (name: string) => {
+      setVaultName(name);
     };
 
-    const handleVaultUserphraseChange = (e: Event) => {
-      if (e.target instanceof HTMLInputElement) {
-        setVaultUserphrase(e.target.value);
-      }
+    const handleVaultUserphraseChange = (userphrase: string) => {
+      setVaultUserphrase(userphrase);
     };
 
     const handleServerOptionChange = (e: Event) => {
@@ -81,11 +77,9 @@ export const AdvancedOptions: FunctionComponent<Props> = observer(
       }
     };
 
-    const handleSyncServerChange = (e: Event) => {
-      if (e.target instanceof HTMLInputElement) {
-        setServer(e.target.value);
-        application.setCustomHost(e.target.value);
-      }
+    const handleSyncServerChange = (server: string) => {
+      setServer(server);
+      application.setCustomHost(server);
     };
 
     const handleStrictSigninChange = () => {
@@ -135,19 +129,19 @@ export const AdvancedOptions: FunctionComponent<Props> = observer(
 
             {appState.enableUnfinishedFeatures && isVault && (
               <>
-                <InputWithIcon
+                <DecoratedInput
                   className={`mb-2`}
-                  icon="folder"
-                  inputType="text"
+                  left={[<Icon type="folder" className="color-neutral" />]}
+                  type="text"
                   placeholder="Vault name"
                   value={vaultName}
                   onChange={handleVaultNameChange}
                   disabled={disabled}
                 />
-                <InputWithIcon
-                  className={`mb-2 `}
-                  icon="server"
-                  inputType={'text'}
+                <DecoratedInput
+                  className={`mb-2`}
+                  left={[<Icon type="server" className="color-neutral" />]}
+                  type="text"
                   placeholder="Vault userphrase"
                   value={vaultUserphrase}
                   onChange={handleVaultUserphraseChange}
@@ -183,9 +177,9 @@ export const AdvancedOptions: FunctionComponent<Props> = observer(
               onChange={handleServerOptionChange}
               disabled={disabled}
             />
-            <InputWithIcon
-              inputType="text"
-              icon="server"
+            <DecoratedInput
+              type="text"
+              left={[<Icon type="server" className="color-neutral" />]}
               placeholder="https://api.standardnotes.com"
               value={server}
               onChange={handleSyncServerChange}
diff --git a/app/assets/javascripts/components/AccountMenu/ConfirmPassword.tsx b/app/assets/javascripts/components/AccountMenu/ConfirmPassword.tsx
index 0a5575cb6..2aad0c0b1 100644
--- a/app/assets/javascripts/components/AccountMenu/ConfirmPassword.tsx
+++ b/app/assets/javascripts/components/AccountMenu/ConfirmPassword.tsx
@@ -7,9 +7,9 @@ import { useEffect, useRef, useState } from 'preact/hooks';
 import { AccountMenuPane } from '.';
 import { Button } from '../Button';
 import { Checkbox } from '../Checkbox';
+import { DecoratedPasswordInput } from '../DecoratedPasswordInput';
+import { Icon } from '../Icon';
 import { IconButton } from '../IconButton';
-import { InputWithIcon } from '../InputWithIcon';
-import { AdvancedOptions } from './AdvancedOptions';
 
 type Props = {
   appState: AppState;
@@ -23,7 +23,6 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
   ({ application, appState, setMenuPane, email, password }) => {
     const { notesAndTagsCount } = appState.accountMenu;
     const [confirmPassword, setConfirmPassword] = useState('');
-    const [showPassword, setShowPassword] = useState(false);
     const [isRegistering, setIsRegistering] = useState(false);
     const [isEphemeral, setIsEphemeral] = useState(false);
     const [shouldMergeLocal, setShouldMergeLocal] = useState(true);
@@ -35,10 +34,8 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
       passwordInputRef.current?.focus();
     }, []);
 
-    const handlePasswordChange = (e: Event) => {
-      if (e.target instanceof HTMLInputElement) {
-        setConfirmPassword(e.target.value);
-      }
+    const handlePasswordChange = (text: string) => {
+      setConfirmPassword(text);
     };
 
     const handleEphemeralChange = () => {
@@ -117,23 +114,15 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
           your data.
         </div>
         <form onSubmit={handleConfirmFormSubmit} className="px-3 mb-1">
-          <InputWithIcon
+          <DecoratedPasswordInput
             className="mb-2"
-            icon="password"
-            inputType={showPassword ? 'text' : 'password'}
-            placeholder="Confirm password"
-            value={confirmPassword}
+            disabled={isRegistering}
+            left={[<Icon type="password" className="color-neutral" />]}
             onChange={handlePasswordChange}
             onKeyDown={handleKeyDown}
-            toggle={{
-              toggleOnIcon: 'eye-off',
-              toggleOffIcon: 'eye',
-              title: 'Show password',
-              toggled: showPassword,
-              onClick: setShowPassword,
-            }}
+            placeholder="Confirm password"
             ref={passwordInputRef}
-            disabled={isRegistering}
+            value={confirmPassword}
           />
           {error ? <div className="color-dark-red my-2">{error}</div> : null}
           <Button
diff --git a/app/assets/javascripts/components/AccountMenu/CreateAccount.tsx b/app/assets/javascripts/components/AccountMenu/CreateAccount.tsx
index 46d2f0621..002e28e51 100644
--- a/app/assets/javascripts/components/AccountMenu/CreateAccount.tsx
+++ b/app/assets/javascripts/components/AccountMenu/CreateAccount.tsx
@@ -5,8 +5,10 @@ import { FunctionComponent } from 'preact';
 import { StateUpdater, useEffect, useRef, useState } from 'preact/hooks';
 import { AccountMenuPane } from '.';
 import { Button } from '../Button';
+import { DecoratedInput } from '../DecoratedInput';
+import { DecoratedPasswordInput } from '../DecoratedPasswordInput';
+import { Icon } from '../Icon';
 import { IconButton } from '../IconButton';
-import { InputWithIcon } from '../InputWithIcon';
 import { AdvancedOptions } from './AdvancedOptions';
 
 type Props = {
@@ -29,8 +31,6 @@ export const CreateAccount: FunctionComponent<Props> = observer(
     password,
     setPassword,
   }) => {
-    const [showPassword, setShowPassword] = useState(false);
-
     const emailInputRef = useRef<HTMLInputElement>(null);
     const passwordInputRef = useRef<HTMLInputElement>(null);
     const [isVault, setIsVault] = useState(false);
@@ -41,16 +41,12 @@ export const CreateAccount: FunctionComponent<Props> = observer(
       }
     }, []);
 
-    const handleEmailChange = (e: Event) => {
-      if (e.target instanceof HTMLInputElement) {
-        setEmail(e.target.value);
-      }
+    const handleEmailChange = (text: string) => {
+      setEmail(text);
     };
 
-    const handlePasswordChange = (e: Event) => {
-      if (e.target instanceof HTMLInputElement) {
-        setPassword(e.target.value);
-      }
+    const handlePasswordChange = (text: string) => {
+      setPassword(text);
     };
 
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -103,33 +99,25 @@ export const CreateAccount: FunctionComponent<Props> = observer(
           <div className="sn-account-menu-headline">Create account</div>
         </div>
         <form onSubmit={handleRegisterFormSubmit} className="px-3 mb-1">
-          <InputWithIcon
+          <DecoratedInput
             className="mb-2"
-            icon="email"
-            inputType="email"
-            placeholder="Email"
-            value={email}
             disabled={isVault}
+            left={[<Icon type="email" className="color-neutral" />]}
             onChange={handleEmailChange}
             onKeyDown={handleKeyDown}
+            placeholder="Email"
             ref={emailInputRef}
+            type="email"
+            value={email}
           />
-          <InputWithIcon
+          <DecoratedPasswordInput
             className="mb-2"
-            icon="password"
-            inputType={showPassword ? 'text' : 'password'}
-            placeholder="Password"
-            value={password}
+            left={[<Icon type="password" className="color-neutral" />]}
             onChange={handlePasswordChange}
             onKeyDown={handleKeyDown}
-            toggle={{
-              toggleOnIcon: 'eye-off',
-              toggleOffIcon: 'eye',
-              title: 'Show password',
-              toggled: showPassword,
-              onClick: setShowPassword,
-            }}
+            placeholder="Password"
             ref={passwordInputRef}
+            value={password}
           />
           <Button
             className="btn-w-full mt-1"
diff --git a/app/assets/javascripts/components/AccountMenu/SignIn.tsx b/app/assets/javascripts/components/AccountMenu/SignIn.tsx
index 74578be4f..6e3365684 100644
--- a/app/assets/javascripts/components/AccountMenu/SignIn.tsx
+++ b/app/assets/javascripts/components/AccountMenu/SignIn.tsx
@@ -7,9 +7,10 @@ import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { AccountMenuPane } from '.';
 import { Button } from '../Button';
 import { Checkbox } from '../Checkbox';
+import { DecoratedInput } from '../DecoratedInput';
+import { DecoratedPasswordInput } from '../DecoratedPasswordInput';
 import { Icon } from '../Icon';
 import { IconButton } from '../IconButton';
-import { InputWithIcon } from '../InputWithIcon';
 import { AdvancedOptions } from './AdvancedOptions';
 
 type Props = {
@@ -28,7 +29,6 @@ export const SignInPane: FunctionComponent<Props> = observer(
 
     const [isStrictSignin, setIsStrictSignin] = useState(false);
     const [isSigningIn, setIsSigningIn] = useState(false);
-    const [showPassword, setShowPassword] = useState(false);
     const [shouldMergeLocal, setShouldMergeLocal] = useState(true);
     const [isVault, setIsVault] = useState(false);
 
@@ -51,19 +51,15 @@ export const SignInPane: FunctionComponent<Props> = observer(
       }
     };
 
-    const handleEmailChange = (e: Event) => {
-      if (e.target instanceof HTMLInputElement) {
-        setEmail(e.target.value);
-      }
+    const handleEmailChange = (text: string) => {
+      setEmail(text);
     };
 
-    const handlePasswordChange = (e: Event) => {
+    const handlePasswordChange = (text: string) => {
       if (error.length) {
         setError('');
       }
-      if (e.target instanceof HTMLInputElement) {
-        setPassword(e.target.value);
-      }
+      setPassword(text);
     };
 
     const handleEphemeralChange = () => {
@@ -148,10 +144,10 @@ export const SignInPane: FunctionComponent<Props> = observer(
           <div className="sn-account-menu-headline">Sign in</div>
         </div>
         <div className="px-3 mb-1">
-          <InputWithIcon
+          <DecoratedInput
             className={`mb-2 ${error ? 'border-dark-red' : null}`}
-            icon="email"
-            inputType="email"
+            left={[<Icon type="email" className="color-neutral" />]}
+            type="email"
             placeholder="Email"
             value={email}
             onChange={handleEmailChange}
@@ -160,24 +156,16 @@ export const SignInPane: FunctionComponent<Props> = observer(
             disabled={isSigningIn || isVault}
             ref={emailInputRef}
           />
-          <InputWithIcon
+          <DecoratedPasswordInput
             className={`mb-2 ${error ? 'border-dark-red' : null}`}
-            icon="password"
-            inputType={showPassword ? 'text' : 'password'}
-            placeholder="Password"
-            value={password}
+            disabled={isSigningIn}
+            left={[<Icon type="password" className="color-neutral" />]}
             onChange={handlePasswordChange}
             onFocus={resetInvalid}
             onKeyDown={handleKeyDown}
-            disabled={isSigningIn}
-            toggle={{
-              toggleOnIcon: 'eye-off',
-              toggleOffIcon: 'eye',
-              title: 'Show password',
-              toggled: showPassword,
-              onClick: setShowPassword,
-            }}
+            placeholder="Password"
             ref={passwordInputRef}
+            value={password}
           />
           {error ? <div className="color-dark-red my-2">{error}</div> : null}
           <Button
diff --git a/app/assets/javascripts/components/DecoratedInput.tsx b/app/assets/javascripts/components/DecoratedInput.tsx
index 4008f60d5..5307106c7 100644
--- a/app/assets/javascripts/components/DecoratedInput.tsx
+++ b/app/assets/javascripts/components/DecoratedInput.tsx
@@ -1,70 +1,98 @@
-import { FunctionalComponent, ComponentChild } from 'preact';
-import { HtmlInputTypes } from '@/enums';
+import { FunctionalComponent, ComponentChild, Ref } from 'preact';
+import { forwardRef } from 'preact/compat';
 
-interface Props {
-  type?: HtmlInputTypes;
+export type DecoratedInputProps = {
+  type?: 'text' | 'email' | 'password';
   className?: string;
   disabled?: boolean;
   left?: ComponentChild[];
   right?: ComponentChild[];
-  text?: string;
+  value?: string;
   placeholder?: string;
   onChange?: (text: string) => void;
+  onFocus?: (event: FocusEvent) => void;
+  onKeyDown?: (event: KeyboardEvent) => void;
   autocomplete?: boolean;
-}
+};
+
+const getClassNames = (
+  hasLeftDecorations: boolean,
+  hasRightDecorations: boolean
+) => {
+  return {
+    container: `flex items-stretch position-relative bg-default border-1 border-solid border-main rounded focus-within:ring-info overflow-hidden ${
+      !hasLeftDecorations && !hasRightDecorations ? 'px-2 py-1.5' : ''
+    }`,
+    input: `w-full border-0 focus:shadow-none ${
+      !hasLeftDecorations && hasRightDecorations ? 'pl-2' : ''
+    } ${hasRightDecorations ? 'pr-2' : ''}`,
+    disabled: 'bg-grey-5 cursor-not-allowed',
+  };
+};
 
 /**
  * Input that can be decorated on the left and right side
  */
-export const DecoratedInput: FunctionalComponent<Props> = ({
-  type = 'text',
-  className = '',
-  disabled = false,
-  left,
-  right,
-  text,
-  placeholder = '',
-  onChange,
-  autocomplete = false,
-}) => {
-  const baseClasses =
-    'rounded py-1.5 px-3 text-input my-1 h-8 flex flex-row items-center bg-contrast';
-  const stateClasses = disabled
-    ? 'no-border'
-    : 'border-solid border-1 border-main';
-  const classes = `${baseClasses} ${stateClasses} ${className}`;
+export const DecoratedInput: FunctionalComponent<DecoratedInputProps> =
+  forwardRef(
+    (
+      {
+        type = 'text',
+        className = '',
+        disabled = false,
+        left,
+        right,
+        value,
+        placeholder = '',
+        onChange,
+        onFocus,
+        onKeyDown,
+        autocomplete = false,
+      }: DecoratedInputProps,
+      ref: Ref<HTMLInputElement>
+    ) => {
+      const hasLeftDecorations = Boolean(left?.length);
+      const hasRightDecorations = Boolean(right?.length);
+      const classNames = getClassNames(hasLeftDecorations, hasRightDecorations);
 
-  const inputBaseClasses =
-    'w-full no-border color-text focus:shadow-none bg-contrast';
-  const inputStateClasses = disabled ? 'overflow-ellipsis' : '';
-  return (
-    <div className={`${classes} focus-within:ring-info`}>
-      {left?.map((leftChild) => (
-        <>
-          {leftChild}
-          <div className="min-w-2 min-h-1" />
-        </>
-      ))}
-      <div className="flex-grow">
-        <input
-          type={type}
-          className={`${inputBaseClasses} ${inputStateClasses}`}
-          disabled={disabled}
-          value={text}
-          placeholder={placeholder}
-          onChange={(e) =>
-            onChange && onChange((e.target as HTMLInputElement).value)
-          }
-          data-lpignore={type !== 'password' ? true : false}
-          autocomplete={autocomplete ? 'on' : 'off'}
-        />
-      </div>
-      {right?.map((rightChild) => (
-        <>
-          <div className="min-w-3 min-h-1" />
-          {rightChild}
-        </>
-      ))}
-    </div>
+      return (
+        <div
+          className={`${classNames.container} ${
+            disabled ? classNames.disabled : ''
+          } ${className}`}
+        >
+          {left && (
+            <div className="flex items-center px-2 py-1.5">
+              {left.map((leftChild) => (
+                <>{leftChild}</>
+              ))}
+            </div>
+          )}
+          <input
+            type={type}
+            className={`${classNames.input} ${
+              disabled ? classNames.disabled : ''
+            }`}
+            disabled={disabled}
+            value={value}
+            placeholder={placeholder}
+            onChange={(e) =>
+              onChange && onChange((e.target as HTMLInputElement).value)
+            }
+            onFocus={onFocus}
+            onKeyDown={onKeyDown}
+            data-lpignore={type !== 'password' ? true : false}
+            autocomplete={autocomplete ? 'on' : 'off'}
+            ref={ref}
+          />
+          {right && (
+            <div className="flex items-center px-2 py-1.5">
+              {right.map((rightChild, index) => (
+                <div className={index > 0 ? 'ml-3' : ''}>{rightChild}</div>
+              ))}
+            </div>
+          )}
+        </div>
+      );
+    }
   );
-};
diff --git a/app/assets/javascripts/components/DecoratedPasswordInput.tsx b/app/assets/javascripts/components/DecoratedPasswordInput.tsx
new file mode 100644
index 000000000..32e21a56a
--- /dev/null
+++ b/app/assets/javascripts/components/DecoratedPasswordInput.tsx
@@ -0,0 +1,42 @@
+import { FunctionComponent, Ref } from 'preact';
+import { forwardRef } from 'preact/compat';
+import { StateUpdater, useState } from 'preact/hooks';
+import { DecoratedInput, DecoratedInputProps } from './DecoratedInput';
+import { IconButton } from './IconButton';
+
+const Toggle: FunctionComponent<{
+  isToggled: boolean;
+  setIsToggled: StateUpdater<boolean>;
+}> = ({ isToggled, setIsToggled }) => (
+  <IconButton
+    className="w-5 h-5 justify-center sk-circle hover:bg-grey-4"
+    icon={isToggled ? 'eye-off' : 'eye'}
+    iconClassName="sn-icon--small"
+    title="Show/hide password"
+    onClick={() => setIsToggled((isToggled) => !isToggled)}
+    focusable={true}
+  />
+);
+
+/**
+ * Password input that has a toggle to show/hide password and can be decorated on the left and right side
+ */
+export const DecoratedPasswordInput: FunctionComponent<
+  Omit<DecoratedInputProps, 'type'>
+> = forwardRef((props, ref: Ref<HTMLInputElement>) => {
+  const [isToggled, setIsToggled] = useState(false);
+
+  const rightSideDecorations = props.right ? [...props.right] : [];
+
+  return (
+    <DecoratedInput
+      {...props}
+      ref={ref}
+      type={isToggled ? 'text' : 'password'}
+      right={[
+        ...rightSideDecorations,
+        <Toggle isToggled={isToggled} setIsToggled={setIsToggled} />,
+      ]}
+    />
+  );
+});
diff --git a/app/assets/javascripts/components/InputWithIcon.tsx b/app/assets/javascripts/components/InputWithIcon.tsx
deleted file mode 100644
index 1f517c69f..000000000
--- a/app/assets/javascripts/components/InputWithIcon.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { FunctionComponent, Ref } from 'preact';
-import { JSXInternal } from 'preact/src/jsx';
-import { forwardRef } from 'preact/compat';
-import { Icon } from './Icon';
-import { IconButton } from './IconButton';
-import { IconType } from '@standardnotes/snjs';
-
-type ToggleProps = {
-  toggleOnIcon: IconType;
-  toggleOffIcon: IconType;
-  title: string;
-  toggled: boolean;
-  onClick: (toggled: boolean) => void;
-};
-
-type Props = {
-  icon: IconType;
-  inputType: 'text' | 'email' | 'password';
-  className?: string;
-  iconClassName?: string;
-  value: string | undefined;
-  onChange: JSXInternal.GenericEventHandler<HTMLInputElement>;
-  onFocus?: JSXInternal.GenericEventHandler<HTMLInputElement>;
-  onKeyDown?: JSXInternal.KeyboardEventHandler<HTMLInputElement>;
-  disabled?: boolean;
-  placeholder: string;
-  toggle?: ToggleProps;
-};
-
-const DISABLED_CLASSNAME = 'bg-grey-5 cursor-not-allowed';
-
-export const InputWithIcon: FunctionComponent<Props> = forwardRef(
-  (
-    {
-      icon,
-      inputType,
-      className,
-      iconClassName,
-      value,
-      onChange,
-      onFocus,
-      onKeyDown,
-      disabled,
-      toggle,
-      placeholder,
-    }: Props,
-    ref: Ref<HTMLInputElement>
-  ) => {
-    const handleToggle = () => {
-      if (toggle) toggle.onClick(!toggle?.toggled);
-    };
-
-    return (
-      <div
-        className={`flex items-stretch position-relative bg-default border-1 border-solid border-main rounded focus-within:ring-info overflow-hidden ${
-          disabled ? DISABLED_CLASSNAME : ''
-        } ${className}`}
-      >
-        <div className="flex px-2 py-1.5">
-          <Icon type={icon} className={`color-grey-1 ${iconClassName}`} />
-        </div>
-        <input
-          type={inputType}
-          onFocus={onFocus}
-          onChange={onChange}
-          onKeyDown={onKeyDown}
-          value={value}
-          className={`pr-2 w-full border-0 focus:shadow-none ${
-            disabled ? DISABLED_CLASSNAME : ''
-          }`}
-          spellcheck={false}
-          disabled={disabled}
-          placeholder={placeholder}
-          ref={ref}
-        />
-        {toggle ? (
-          <div className="flex items-center justify-center px-2">
-            <IconButton
-              className="w-5 h-5 justify-center sk-circle hover:bg-grey-4"
-              icon={toggle.toggled ? toggle.toggleOnIcon : toggle.toggleOffIcon}
-              iconClassName="sn-icon--small"
-              title={toggle.title}
-              onClick={handleToggle}
-              focusable={true}
-            />
-          </div>
-        ) : null}
-      </div>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/Preferences/panes/Extensions.tsx b/app/assets/javascripts/components/Preferences/panes/Extensions.tsx
index 391fcb359..09f90fc9a 100644
--- a/app/assets/javascripts/components/Preferences/panes/Extensions.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/Extensions.tsx
@@ -112,7 +112,7 @@ export const Extensions: FunctionComponent<{
             <Title>Install Custom Extension</Title>
             <DecoratedInput
               placeholder={'Enter Extension URL'}
-              text={customUrl}
+              value={customUrl}
               onChange={(value) => {
                 setCustomUrl(value);
               }}
diff --git a/app/assets/javascripts/components/Preferences/panes/account/offlineSubscription.tsx b/app/assets/javascripts/components/Preferences/panes/account/offlineSubscription.tsx
index 2856be4e5..7b6ec8fb5 100644
--- a/app/assets/javascripts/components/Preferences/panes/account/offlineSubscription.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/account/offlineSubscription.tsx
@@ -103,7 +103,7 @@ export const OfflineSubscription: FunctionalComponent<IProps> = observer(
                   <DecoratedInput
                     onChange={(code) => setActivationCode(code)}
                     placeholder={'Offline Subscription Code'}
-                    text={activationCode}
+                    value={activationCode}
                     disabled={isSuccessfullyActivated}
                     className={'mb-3'}
                   />
diff --git a/app/assets/javascripts/components/Preferences/panes/security-segments/Encryption.tsx b/app/assets/javascripts/components/Preferences/panes/security-segments/Encryption.tsx
index aff3e5c8c..20604bb1c 100644
--- a/app/assets/javascripts/components/Preferences/panes/security-segments/Encryption.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/security-segments/Encryption.tsx
@@ -1,4 +1,3 @@
-import { DecoratedInput } from '@/components/DecoratedInput';
 import { Icon } from '@/components/Icon';
 import {
   STRING_E2E_ENABLED,
@@ -7,7 +6,7 @@ import {
 } from '@/strings';
 import { AppState } from '@/ui_models/app_state';
 import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
+import { ComponentChild, FunctionComponent } from 'preact';
 import {
   PreferencesGroup,
   PreferencesSegment,
@@ -18,6 +17,19 @@ import {
 const formatCount = (count: number, itemType: string) =>
   `${count} / ${count} ${itemType}`;
 
+const EncryptionStatusItem: FunctionComponent<{
+  icon: ComponentChild;
+  status: string;
+}> = ({ icon, status }) => (
+  <div className="w-full rounded py-1.5 px-3 text-input my-1 h-8 flex flex-row items-center bg-contrast no-border focus-within:ring-info">
+    {icon}
+    <div className="min-w-3 min-h-1" />
+    <div className="flex-grow color-text text-sm">{status}</div>
+    <div className="min-w-3 min-h-1" />
+    <Icon className="success min-w-4 min-h-4" type="check-bold" />
+  </div>
+);
+
 const EncryptionEnabled: FunctionComponent<{ appState: AppState }> = observer(
   ({ appState }) => {
     const count = appState.accountMenu.structuredNotesAndTagsCount;
@@ -26,9 +38,6 @@ const EncryptionEnabled: FunctionComponent<{ appState: AppState }> = observer(
     const archived = formatCount(count.archived, 'archived notes');
     const deleted = formatCount(count.deleted, 'trashed notes');
 
-    const checkIcon = (
-      <Icon className="success min-w-4 min-h-4" type="check-bold" />
-    );
     const noteIcon = <Icon type="rich-text" className="min-w-5 min-h-5" />;
     const tagIcon = <Icon type="hashtag" className="min-w-5 min-h-5" />;
     const archiveIcon = <Icon type="archive" className="min-w-5 min-h-5" />;
@@ -36,34 +45,14 @@ const EncryptionEnabled: FunctionComponent<{ appState: AppState }> = observer(
     return (
       <>
         <div className="flex flex-row pb-1 pt-1.5">
-          <DecoratedInput
-            disabled={true}
-            text={notes}
-            right={[checkIcon]}
-            left={[noteIcon]}
-          />
+          <EncryptionStatusItem status={notes} icon={[noteIcon]} />
           <div className="min-w-3" />
-          <DecoratedInput
-            disabled={true}
-            text={tags}
-            right={[checkIcon]}
-            left={[tagIcon]}
-          />
+          <EncryptionStatusItem status={tags} icon={[tagIcon]} />
         </div>
         <div className="flex flex-row">
-          <DecoratedInput
-            disabled={true}
-            text={archived}
-            right={[checkIcon]}
-            left={[archiveIcon]}
-          />
+          <EncryptionStatusItem status={archived} icon={[archiveIcon]} />
           <div className="min-w-3" />
-          <DecoratedInput
-            disabled={true}
-            text={deleted}
-            right={[checkIcon]}
-            left={[trashIcon]}
-          />
+          <EncryptionStatusItem status={deleted} icon={[trashIcon]} />
         </div>
       </>
     );
diff --git a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/SaveSecretKey.tsx b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/SaveSecretKey.tsx
index decf179b4..68fc98c1b 100644
--- a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/SaveSecretKey.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/SaveSecretKey.tsx
@@ -55,7 +55,7 @@ export const SaveSecretKey: FunctionComponent<{
             <DecoratedInput
               disabled={true}
               right={[<CopyButton copyValue={act.secretKey} />, download]}
-              text={act.secretKey}
+              value={act.secretKey}
             />
           </div>
           <div className="h-2" />
diff --git a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/ScanQRCode.tsx b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/ScanQRCode.tsx
index e9e953da9..bf248d418 100644
--- a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/ScanQRCode.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/ScanQRCode.tsx
@@ -55,7 +55,7 @@ export const ScanQRCode: FunctionComponent<{
           <DecoratedInput
             className="ml-4 w-92"
             disabled={true}
-            text={act.secretKey}
+            value={act.secretKey}
             right={[<CopyButton copyValue={act.secretKey} />]}
           />
         </div>
diff --git a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/Verification.tsx b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/Verification.tsx
index 0c48d12dc..199358090 100644
--- a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/Verification.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/Verification.tsx
@@ -25,7 +25,7 @@ export const Verification: FunctionComponent<{
       </ModalDialogLabel>
       <ModalDialogDescription className="h-33">
         <div className="flex-grow flex flex-col">
-          <div className="flex flex-row items-center">
+          <div className="flex flex-row items-center mb-4">
             <Bullet />
             <div className="min-w-1" />
             <div className="text-sm">
@@ -37,7 +37,6 @@ export const Verification: FunctionComponent<{
               onChange={act.setInputSecretKey}
             />
           </div>
-          <div className="min-h-1" />
           <div className="flex flex-row items-center">
             <Bullet />
             <div className="min-w-1" />
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 6d7d92666..4a1cbf0c8 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -602,6 +602,10 @@
   padding-bottom: 2.25rem;
 }
 
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
 .placeholder-dark-red::placeholder {
   @extend .color-dark-red;
 }

From 3ca7102fd0c0d73567cd2afa86a00112dd0fd27f Mon Sep 17 00:00:00 2001
From: Vardan Hakobyan <vardan_live@live.com>
Date: Mon, 28 Mar 2022 11:09:03 +0400
Subject: [PATCH 002/102] fix: actually disable backup buttons if the user is
 not entitled (#955)

---
 .../panes/backups-segments/EmailBackups.tsx      | 16 +++++++++++++---
 .../cloud-backups/CloudBackupProvider.tsx        |  4 ++++
 .../backups-segments/cloud-backups/index.tsx     |  4 ++++
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/components/Preferences/panes/backups-segments/EmailBackups.tsx b/app/assets/javascripts/components/Preferences/panes/backups-segments/EmailBackups.tsx
index 58f58e082..b3286718c 100644
--- a/app/assets/javascripts/components/Preferences/panes/backups-segments/EmailBackups.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/backups-segments/EmailBackups.tsx
@@ -122,6 +122,9 @@ export const EmailBackups = observer(({ application }: Props) => {
   };
 
   const toggleMuteFailedBackupEmails = async () => {
+    if (!isEntitledToEmailBackups) {
+      return;
+    }
     const previousValue = isFailedBackupEmailMuted;
     setIsFailedBackupEmailMuted(!isFailedBackupEmailMuted);
 
@@ -134,6 +137,13 @@ export const EmailBackups = observer(({ application }: Props) => {
     }
   };
 
+  const handleEmailFrequencyChange = (item: string) => {
+    if (!isEntitledToEmailBackups) {
+      return;
+    }
+    updateEmailFrequency(item as EmailBackupFrequency);
+  };
+
   return (
     <PreferencesGroup>
       <PreferencesSegment>
@@ -176,9 +186,8 @@ export const EmailBackups = observer(({ application }: Props) => {
                 label="Select email frequency"
                 items={emailFrequencyOptions}
                 value={emailFrequency}
-                onChange={(item) => {
-                  updateEmailFrequency(item as EmailBackupFrequency);
-                }}
+                onChange={handleEmailFrequencyChange}
+                disabled={!isEntitledToEmailBackups}
               />
             )}
           </div>
@@ -196,6 +205,7 @@ export const EmailBackups = observer(({ application }: Props) => {
               <Switch
                 onChange={toggleMuteFailedBackupEmails}
                 checked={!isFailedBackupEmailMuted}
+                disabled={!isEntitledToEmailBackups}
               />
             )}
           </div>
diff --git a/app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/CloudBackupProvider.tsx b/app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/CloudBackupProvider.tsx
index b44f521e4..286a7df5d 100644
--- a/app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/CloudBackupProvider.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/CloudBackupProvider.tsx
@@ -54,6 +54,9 @@ export const CloudBackupProvider: FunctionComponent<Props> = ({
   };
 
   const installIntegration = (event: Event) => {
+    if (!isEntitledToCloudBackups) {
+      return;
+    }
     event.stopPropagation();
 
     const authUrl = application.getCloudProviderIntegrationUrl(
@@ -223,6 +226,7 @@ export const CloudBackupProvider: FunctionComponent<Props> = ({
             label="Enable"
             className={`px-1 text-xs min-w-40 ${additionalClass}`}
             onClick={installIntegration}
+            disabled={!isEntitledToCloudBackups}
           />
         </div>
       )}
diff --git a/app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/index.tsx b/app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/index.tsx
index 77106a07b..1ce07b1cb 100644
--- a/app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/index.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/index.tsx
@@ -98,6 +98,9 @@ export const CloudLink: FunctionComponent<Props> = ({ application }) => {
   };
 
   const toggleMuteFailedCloudBackupEmails = async () => {
+    if (!isEntitledToCloudBackups) {
+      return;
+    }
     const previousValue = isFailedCloudBackupEmailMuted;
     setIsFailedCloudBackupEmailMuted(!isFailedCloudBackupEmailMuted);
 
@@ -165,6 +168,7 @@ export const CloudLink: FunctionComponent<Props> = ({ application }) => {
                 <Switch
                   onChange={toggleMuteFailedCloudBackupEmails}
                   checked={!isFailedCloudBackupEmailMuted}
+                  disabled={!isEntitledToCloudBackups}
                 />
               )}
             </div>

From aba1e35a1d3ef8303da2aadd0fb6017c3b9b71f7 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 28 Mar 2022 17:41:54 +0530
Subject: [PATCH 003/102] refactor: button to allow html attributes & refactor
 class names (#956)

---
 .../AccountMenu/ConfirmPassword.tsx           |  2 +-
 .../components/AccountMenu/CreateAccount.tsx  |  2 +-
 .../components/AccountMenu/SignIn.tsx         |  2 +-
 .../AttachedFilesPopover.tsx                  |  2 +-
 app/assets/javascripts/components/Button.tsx  | 77 ++++++++++++-------
 .../components/Files/FilePreviewModal.tsx     |  8 +-
 .../Preferences/panes/Extensions.tsx          |  2 +-
 .../components/Preferences/panes/Listed.tsx   |  2 +-
 .../panes/account/Authentication.tsx          |  2 +-
 .../Preferences/panes/account/Credentials.tsx |  4 +-
 .../Preferences/panes/account/SignOutView.tsx |  8 +-
 .../Preferences/panes/account/Sync.tsx        |  2 +-
 .../panes/account/changeEmail/index.tsx       |  2 +-
 .../panes/account/offlineSubscription.tsx     | 16 +---
 .../account/subscription/NoSubscription.tsx   |  2 +-
 .../subscription/SubscriptionInformation.tsx  |  2 +-
 .../panes/backups-segments/DataBackups.tsx    |  4 +-
 .../cloud-backups/CloudBackupProvider.tsx     |  6 +-
 .../ConfirmCustomExtension.tsx                |  4 +-
 .../extensions-segments/ExtensionItem.tsx     |  2 +-
 .../panes/security-segments/PasscodeLock.tsx  | 10 +--
 .../panes/security-segments/Protections.tsx   |  2 +-
 .../panes/two-factor-auth/SaveSecretKey.tsx   |  4 +-
 .../panes/two-factor-auth/ScanQRCode.tsx      |  4 +-
 .../two-factor-auth/TwoFactorSuccess.tsx      |  2 +-
 .../panes/two-factor-auth/Verification.tsx    |  4 +-
 .../PurchaseFlow/panes/CreateAccount.tsx      |  2 +-
 .../components/PurchaseFlow/panes/SignIn.tsx  |  2 +-
 .../RevisionContentLocked.tsx                 |  2 +-
 .../RevisionHistoryModalWrapper.tsx           |  8 +-
 app/assets/stylesheets/_sn.scss               | 16 ++++
 31 files changed, 117 insertions(+), 90 deletions(-)

diff --git a/app/assets/javascripts/components/AccountMenu/ConfirmPassword.tsx b/app/assets/javascripts/components/AccountMenu/ConfirmPassword.tsx
index 2aad0c0b1..cbb981c8c 100644
--- a/app/assets/javascripts/components/AccountMenu/ConfirmPassword.tsx
+++ b/app/assets/javascripts/components/AccountMenu/ConfirmPassword.tsx
@@ -130,7 +130,7 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
             label={
               isRegistering ? 'Creating account...' : 'Create account & sign in'
             }
-            type="primary"
+            variant="primary"
             onClick={handleConfirmFormSubmit}
             disabled={isRegistering}
           />
diff --git a/app/assets/javascripts/components/AccountMenu/CreateAccount.tsx b/app/assets/javascripts/components/AccountMenu/CreateAccount.tsx
index 002e28e51..fb6c8ffa7 100644
--- a/app/assets/javascripts/components/AccountMenu/CreateAccount.tsx
+++ b/app/assets/javascripts/components/AccountMenu/CreateAccount.tsx
@@ -122,7 +122,7 @@ export const CreateAccount: FunctionComponent<Props> = observer(
           <Button
             className="btn-w-full mt-1"
             label="Next"
-            type="primary"
+            variant="primary"
             onClick={handleRegisterFormSubmit}
           />
         </form>
diff --git a/app/assets/javascripts/components/AccountMenu/SignIn.tsx b/app/assets/javascripts/components/AccountMenu/SignIn.tsx
index 6e3365684..0d4deacaa 100644
--- a/app/assets/javascripts/components/AccountMenu/SignIn.tsx
+++ b/app/assets/javascripts/components/AccountMenu/SignIn.tsx
@@ -171,7 +171,7 @@ export const SignInPane: FunctionComponent<Props> = observer(
           <Button
             className="btn-w-full mt-1 mb-3"
             label={isSigningIn ? 'Signing in...' : 'Sign in'}
-            type="primary"
+            variant="primary"
             onClick={handleSignInFormSubmit}
             disabled={isSigningIn}
           />
diff --git a/app/assets/javascripts/components/AttachedFilesPopover/AttachedFilesPopover.tsx b/app/assets/javascripts/components/AttachedFilesPopover/AttachedFilesPopover.tsx
index 203509dc5..82c1f2c14 100644
--- a/app/assets/javascripts/components/AttachedFilesPopover/AttachedFilesPopover.tsx
+++ b/app/assets/javascripts/components/AttachedFilesPopover/AttachedFilesPopover.tsx
@@ -196,7 +196,7 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
                   : 'No files found in this account'}
               </div>
               <Button
-                type="normal"
+                variant="normal"
                 onClick={handleAttachFilesClick}
                 onBlur={closeOnBlur}
               >
diff --git a/app/assets/javascripts/components/Button.tsx b/app/assets/javascripts/components/Button.tsx
index 8ac16a5be..f91177d0b 100644
--- a/app/assets/javascripts/components/Button.tsx
+++ b/app/assets/javascripts/components/Button.tsx
@@ -1,60 +1,79 @@
 import { JSXInternal } from 'preact/src/jsx';
-import TargetedEvent = JSXInternal.TargetedEvent;
-import TargetedMouseEvent = JSXInternal.TargetedMouseEvent;
-
 import { ComponentChildren, FunctionComponent, Ref } from 'preact';
 import { forwardRef } from 'preact/compat';
 
 const baseClass = `rounded px-4 py-1.75 font-bold text-sm fit-content`;
 
-type ButtonType = 'normal' | 'primary' | 'danger';
+type ButtonVariant = 'normal' | 'primary';
 
-const buttonClasses: { [type in ButtonType]: string } = {
-  normal: `${baseClass} bg-default color-text border-solid border-main border-1 focus:bg-contrast hover:bg-contrast`,
-  primary: `${baseClass} no-border bg-info color-info-contrast hover:brightness-130 focus:brightness-130`,
-  danger: `${baseClass} bg-default color-danger border-solid border-main border-1 focus:bg-contrast hover:bg-contrast`,
+const getClassName = (
+  variant: ButtonVariant,
+  danger: boolean,
+  disabled: boolean
+) => {
+  const borders =
+    variant === 'normal' ? 'border-solid border-main border-1' : 'no-border';
+  const cursor = disabled ? 'cursor-not-allowed' : 'cursor-pointer';
+
+  let colors =
+    variant === 'normal'
+      ? 'bg-default color-text'
+      : 'bg-info color-info-contrast';
+
+  let focusHoverStates =
+    variant === 'normal'
+      ? 'focus:bg-contrast hover:bg-contrast'
+      : 'hover:brightness-130 focus:brightness-130';
+
+  if (danger) {
+    colors =
+      variant === 'normal'
+        ? 'bg-default color-danger'
+        : 'bg-danger color-info-contrast';
+  }
+
+  if (disabled) {
+    colors =
+      variant === 'normal'
+        ? 'bg-default color-grey-2'
+        : 'bg-grey-2 color-info-contrast';
+    focusHoverStates =
+      variant === 'normal'
+        ? 'focus:bg-default hover:bg-default'
+        : 'focus:brightness-default hover:brightness-default';
+  }
+
+  return `${baseClass} ${colors} ${borders} ${focusHoverStates} ${cursor}`;
 };
 
-type ButtonProps = {
+type ButtonProps = JSXInternal.HTMLAttributes<HTMLButtonElement> & {
   children?: ComponentChildren;
   className?: string;
-  type: ButtonType;
+  variant?: ButtonVariant;
+  dangerStyle?: boolean;
   label?: string;
-  onClick: (
-    event:
-      | TargetedEvent<HTMLFormElement>
-      | TargetedMouseEvent<HTMLButtonElement>
-  ) => void;
-  onBlur?: (event: FocusEvent) => void;
-  disabled?: boolean;
 };
 
 export const Button: FunctionComponent<ButtonProps> = forwardRef(
   (
     {
-      type,
+      variant = 'normal',
       label,
       className = '',
-      onBlur,
-      onClick,
+      dangerStyle: danger = false,
       disabled = false,
       children,
+      ...props
     }: ButtonProps,
     ref: Ref<HTMLButtonElement>
   ) => {
-    const buttonClass = buttonClasses[type];
-    const cursorClass = disabled ? 'cursor-default' : 'cursor-pointer';
-
     return (
       <button
-        className={`${buttonClass} ${cursorClass} ${className}`}
-        onBlur={onBlur}
-        onClick={(e) => {
-          onClick(e);
-          e.preventDefault();
-        }}
+        type="button"
+        className={`${getClassName(variant, danger, disabled)} ${className}`}
         disabled={disabled}
         ref={ref}
+        {...props}
       >
         {label ?? children}
       </button>
diff --git a/app/assets/javascripts/components/Files/FilePreviewModal.tsx b/app/assets/javascripts/components/Files/FilePreviewModal.tsx
index 92e1128d5..e1d0b4b0b 100644
--- a/app/assets/javascripts/components/Files/FilePreviewModal.tsx
+++ b/app/assets/javascripts/components/Files/FilePreviewModal.tsx
@@ -111,7 +111,7 @@ export const FilePreviewModal: FunctionComponent<Props> = ({
           <div className="flex items-center">
             {objectUrl && (
               <Button
-                type="primary"
+                variant="primary"
                 className="mr-4"
                 onClick={() => {
                   application
@@ -151,7 +151,7 @@ export const FilePreviewModal: FunctionComponent<Props> = ({
                   </div>
                   <div className="flex items-center">
                     <Button
-                      type="primary"
+                      variant="primary"
                       className="mr-3"
                       onClick={() => {
                         getObjectUrl();
@@ -160,7 +160,7 @@ export const FilePreviewModal: FunctionComponent<Props> = ({
                       Try again
                     </Button>
                     <Button
-                      type="normal"
+                      variant="normal"
                       onClick={() => {
                         application.getAppState().files.downloadFile(file);
                       }}
@@ -176,7 +176,7 @@ export const FilePreviewModal: FunctionComponent<Props> = ({
                     application.
                   </div>
                   <Button
-                    type="primary"
+                    variant="primary"
                     onClick={() => {
                       application.getAppState().files.downloadFile(file);
                     }}
diff --git a/app/assets/javascripts/components/Preferences/panes/Extensions.tsx b/app/assets/javascripts/components/Preferences/panes/Extensions.tsx
index 09f90fc9a..8c7c9a8e0 100644
--- a/app/assets/javascripts/components/Preferences/panes/Extensions.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/Extensions.tsx
@@ -120,7 +120,7 @@ export const Extensions: FunctionComponent<{
             <div className="min-h-2" />
             <Button
               className="min-w-20"
-              type="normal"
+              variant="normal"
               label="Install"
               onClick={() => submitExtensionUrl(customUrl)}
             />
diff --git a/app/assets/javascripts/components/Preferences/panes/Listed.tsx b/app/assets/javascripts/components/Preferences/panes/Listed.tsx
index 8e4bf55df..5e9c8be48 100644
--- a/app/assets/javascripts/components/Preferences/panes/Listed.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/Listed.tsx
@@ -102,7 +102,7 @@ export const Listed = observer(({ application }: Props) => {
           <Text>Create a free Listed author account to get started.</Text>
           <Button
             className="mt-3"
-            type="normal"
+            variant="normal"
             disabled={requestingAccount}
             label={
               requestingAccount ? 'Creating account...' : 'Create new author'
diff --git a/app/assets/javascripts/components/Preferences/panes/account/Authentication.tsx b/app/assets/javascripts/components/Preferences/panes/account/Authentication.tsx
index cdb1068d8..fd04395d4 100644
--- a/app/assets/javascripts/components/Preferences/panes/account/Authentication.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/account/Authentication.tsx
@@ -39,7 +39,7 @@ export const Authentication: FunctionComponent<{
             and enable end-to-end encryption.
           </Text>
           <Button
-            type="primary"
+            variant="primary"
             label="Create free account"
             onClick={clickRegister}
             className="mb-3"
diff --git a/app/assets/javascripts/components/Preferences/panes/account/Credentials.tsx b/app/assets/javascripts/components/Preferences/panes/account/Credentials.tsx
index b15e863f9..397c57c28 100644
--- a/app/assets/javascripts/components/Preferences/panes/account/Credentials.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/account/Credentials.tsx
@@ -50,7 +50,7 @@ export const Credentials: FunctionComponent<Props> = observer(
           </Text>
           <Button
             className="min-w-20 mt-3"
-            type="normal"
+            variant="normal"
             label="Change email"
             onClick={() => {
               setIsChangeEmailDialogOpen(true);
@@ -64,7 +64,7 @@ export const Credentials: FunctionComponent<Props> = observer(
           </Text>
           <Button
             className="min-w-20 mt-3"
-            type="normal"
+            variant="normal"
             label="Change password"
             onClick={presentPasswordWizard}
           />
diff --git a/app/assets/javascripts/components/Preferences/panes/account/SignOutView.tsx b/app/assets/javascripts/components/Preferences/panes/account/SignOutView.tsx
index f32db9fa6..0fe84cbba 100644
--- a/app/assets/javascripts/components/Preferences/panes/account/SignOutView.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/account/SignOutView.tsx
@@ -27,14 +27,14 @@ const SignOutView: FunctionComponent<{
           <div className="flex flex-row">
             <Button
               className="mr-3"
-              type="normal"
+              variant="normal"
               label="Sign out other sessions"
               onClick={() => {
                 appState.accountMenu.setOtherSessionsSignOut(true);
               }}
             />
             <Button
-              type="normal"
+              variant="normal"
               label="Manage sessions"
               onClick={() => appState.openSessionsModal()}
             />
@@ -48,7 +48,7 @@ const SignOutView: FunctionComponent<{
           </Text>
           <div className="min-h-3" />
           <Button
-            type="danger"
+            dangerStyle={true}
             label="Sign out workspace"
             onClick={() => {
               appState.accountMenu.setSigningOut(true);
@@ -76,7 +76,7 @@ const ClearSessionDataView: FunctionComponent<{
         </Text>
         <div className="min-h-3" />
         <Button
-          type="danger"
+          dangerStyle={true}
           label="Clear workspace"
           onClick={() => {
             appState.accountMenu.setSigningOut(true);
diff --git a/app/assets/javascripts/components/Preferences/panes/account/Sync.tsx b/app/assets/javascripts/components/Preferences/panes/account/Sync.tsx
index bd2340de1..6b29553ac 100644
--- a/app/assets/javascripts/components/Preferences/panes/account/Sync.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/account/Sync.tsx
@@ -55,7 +55,7 @@ export const Sync: FunctionComponent<Props> = observer(
               </Text>
               <Button
                 className="min-w-20 mt-3"
-                type="normal"
+                variant="normal"
                 label="Sync now"
                 disabled={isSyncingInProgress}
                 onClick={doSynchronization}
diff --git a/app/assets/javascripts/components/Preferences/panes/account/changeEmail/index.tsx b/app/assets/javascripts/components/Preferences/panes/account/changeEmail/index.tsx
index cc98e92e0..9dc0e45ae 100644
--- a/app/assets/javascripts/components/Preferences/panes/account/changeEmail/index.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/account/changeEmail/index.tsx
@@ -169,7 +169,7 @@ export const ChangeEmail: FunctionalComponent<Props> = ({
         <ModalDialogButtons className="px-4.5">
           <Button
             className="min-w-20"
-            type="primary"
+            variant="primary"
             label={submitButtonTitle}
             onClick={handleSubmit}
           />
diff --git a/app/assets/javascripts/components/Preferences/panes/account/offlineSubscription.tsx b/app/assets/javascripts/components/Preferences/panes/account/offlineSubscription.tsx
index 7b6ec8fb5..eac3c9e9b 100644
--- a/app/assets/javascripts/components/Preferences/panes/account/offlineSubscription.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/account/offlineSubscription.tsx
@@ -2,8 +2,6 @@ import { FunctionalComponent } from 'preact';
 import { Subtitle } from '@/components/Preferences/components';
 import { DecoratedInput } from '@/components/DecoratedInput';
 import { Button } from '@/components/Button';
-import { JSXInternal } from '@node_modules/preact/src/jsx';
-import TargetedEvent = JSXInternal.TargetedEvent;
 import { useEffect, useState } from 'preact/hooks';
 import { WebApplication } from '@/ui_models/application';
 import { AppState } from '@/ui_models/app_state';
@@ -40,9 +38,7 @@ export const OfflineSubscription: FunctionalComponent<IProps> = observer(
       );
     };
 
-    const handleSubscriptionCodeSubmit = async (
-      event: TargetedEvent<HTMLFormElement, Event>
-    ) => {
+    const handleSubscriptionCodeSubmit = async (event: Event) => {
       event.preventDefault();
 
       const result = await application.features.setOfflineFeaturesCode(
@@ -117,7 +113,7 @@ export const OfflineSubscription: FunctionalComponent<IProps> = observer(
               )}
               {hasUserPreviouslyStoredCode && (
                 <Button
-                  type="danger"
+                  dangerStyle={true}
                   label="Remove offline key"
                   onClick={() => {
                     handleRemoveClick();
@@ -127,13 +123,9 @@ export const OfflineSubscription: FunctionalComponent<IProps> = observer(
               {!hasUserPreviouslyStoredCode && !isSuccessfullyActivated && (
                 <Button
                   label={'Submit'}
-                  type="primary"
+                  variant="primary"
                   disabled={activationCode === ''}
-                  onClick={(event) =>
-                    handleSubscriptionCodeSubmit(
-                      event as TargetedEvent<HTMLFormElement>
-                    )
-                  }
+                  onClick={(event) => handleSubscriptionCodeSubmit(event)}
                 />
               )}
             </form>
diff --git a/app/assets/javascripts/components/Preferences/panes/account/subscription/NoSubscription.tsx b/app/assets/javascripts/components/Preferences/panes/account/subscription/NoSubscription.tsx
index 65aa4f41c..b10834f69 100644
--- a/app/assets/javascripts/components/Preferences/panes/account/subscription/NoSubscription.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/account/subscription/NoSubscription.tsx
@@ -46,7 +46,7 @@ export const NoSubscription: FunctionalComponent<{
         {application.hasAccount() && (
           <Button
             className="min-w-20 mt-3"
-            type="primary"
+            variant="primary"
             label="Subscribe"
             onClick={onPurchaseClick}
           />
diff --git a/app/assets/javascripts/components/Preferences/panes/account/subscription/SubscriptionInformation.tsx b/app/assets/javascripts/components/Preferences/panes/account/subscription/SubscriptionInformation.tsx
index 8bce383bf..fab42d9a0 100644
--- a/app/assets/javascripts/components/Preferences/panes/account/subscription/SubscriptionInformation.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/account/subscription/SubscriptionInformation.tsx
@@ -81,7 +81,7 @@ export const SubscriptionInformation = observer(
         <StatusText subscriptionState={subscriptionState} />
         <Button
           className="min-w-20 mt-3 mr-3"
-          type="normal"
+          variant="normal"
           label="Manage subscription"
           onClick={manageSubscription}
         />
diff --git a/app/assets/javascripts/components/Preferences/panes/backups-segments/DataBackups.tsx b/app/assets/javascripts/components/Preferences/panes/backups-segments/DataBackups.tsx
index df9040979..9218952df 100644
--- a/app/assets/javascripts/components/Preferences/panes/backups-segments/DataBackups.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/backups-segments/DataBackups.tsx
@@ -201,7 +201,7 @@ export const DataBackups = observer(({ application, appState }: Props) => {
           )}
 
           <Button
-            type="normal"
+            variant="normal"
             onClick={downloadDataArchive}
             label="Download backup"
             className="mt-2"
@@ -212,7 +212,7 @@ export const DataBackups = observer(({ application, appState }: Props) => {
 
           <div class="flex flex-row items-center mt-3">
             <Button
-              type="normal"
+              variant="normal"
               label="Import backup"
               onClick={handleImportFile}
             />
diff --git a/app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/CloudBackupProvider.tsx b/app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/CloudBackupProvider.tsx
index 286a7df5d..64806d0ec 100644
--- a/app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/CloudBackupProvider.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/CloudBackupProvider.tsx
@@ -222,7 +222,7 @@ export const CloudBackupProvider: FunctionComponent<Props> = ({
       {shouldShowEnableButton && (
         <div>
           <Button
-            type="normal"
+            variant="normal"
             label="Enable"
             className={`px-1 text-xs min-w-40 ${additionalClass}`}
             onClick={installIntegration}
@@ -235,13 +235,13 @@ export const CloudBackupProvider: FunctionComponent<Props> = ({
         <div className={'flex flex-col items-end'}>
           <Button
             className={`min-w-40 mb-2 ${additionalClass}`}
-            type="normal"
+            variant="normal"
             label="Perform Backup"
             onClick={performBackupNow}
           />
           <Button
             className="min-w-40"
-            type="normal"
+            variant="normal"
             label="Disable"
             onClick={disable}
           />
diff --git a/app/assets/javascripts/components/Preferences/panes/extensions-segments/ConfirmCustomExtension.tsx b/app/assets/javascripts/components/Preferences/panes/extensions-segments/ConfirmCustomExtension.tsx
index 4191e6e39..362d3d24c 100644
--- a/app/assets/javascripts/components/Preferences/panes/extensions-segments/ConfirmCustomExtension.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/extensions-segments/ConfirmCustomExtension.tsx
@@ -56,7 +56,7 @@ export const ConfirmCustomExtension: FunctionComponent<{
       <div className="flex flex-row">
         <Button
           className="min-w-20"
-          type="normal"
+          variant="normal"
           label="Cancel"
           onClick={() => callback(false)}
         />
@@ -65,7 +65,7 @@ export const ConfirmCustomExtension: FunctionComponent<{
 
         <Button
           className="min-w-20"
-          type="normal"
+          variant="normal"
           label="Install"
           onClick={() => callback(true)}
         />
diff --git a/app/assets/javascripts/components/Preferences/panes/extensions-segments/ExtensionItem.tsx b/app/assets/javascripts/components/Preferences/panes/extensions-segments/ExtensionItem.tsx
index 5118fbede..4dab16adb 100644
--- a/app/assets/javascripts/components/Preferences/panes/extensions-segments/ExtensionItem.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/extensions-segments/ExtensionItem.tsx
@@ -104,7 +104,7 @@ export const ExtensionItem: FunctionComponent<ExtensionItemProps> = ({
         <div className="flex flex-row">
           <Button
             className="min-w-20"
-            type="normal"
+            variant="normal"
             label="Uninstall"
             onClick={() => uninstall(extension)}
           />
diff --git a/app/assets/javascripts/components/Preferences/panes/security-segments/PasscodeLock.tsx b/app/assets/javascripts/components/Preferences/panes/security-segments/PasscodeLock.tsx
index 9d2e61483..e44f411ba 100644
--- a/app/assets/javascripts/components/Preferences/panes/security-segments/PasscodeLock.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/security-segments/PasscodeLock.tsx
@@ -224,7 +224,7 @@ export const PasscodeLock = observer(({ application, appState }: Props) => {
                 <Button
                   label="Add passcode"
                   onClick={handleAddPassCode}
-                  type="primary"
+                  variant="primary"
                 />
               )}
             </>
@@ -258,13 +258,13 @@ export const PasscodeLock = observer(({ application, appState }: Props) => {
               />
               <div className="min-h-2" />
               <Button
-                type="primary"
+                variant="primary"
                 onClick={submitPasscodeForm}
                 label="Set Passcode"
                 className="mr-3"
               />
               <Button
-                type="normal"
+                variant="normal"
                 onClick={() => setShowPasscodeForm(false)}
                 label="Cancel"
               />
@@ -276,13 +276,13 @@ export const PasscodeLock = observer(({ application, appState }: Props) => {
               <Text>Passcode lock is enabled.</Text>
               <div className="flex flex-row mt-3">
                 <Button
-                  type="normal"
+                  variant="normal"
                   label="Change Passcode"
                   onClick={changePasscodePressed}
                   className="mr-3"
                 />
                 <Button
-                  type="danger"
+                  dangerStyle={true}
                   label="Remove Passcode"
                   onClick={removePasscodePressed}
                 />
diff --git a/app/assets/javascripts/components/Preferences/panes/security-segments/Protections.tsx b/app/assets/javascripts/components/Preferences/panes/security-segments/Protections.tsx
index 02358ca47..c0a7a93be 100644
--- a/app/assets/javascripts/components/Preferences/panes/security-segments/Protections.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/security-segments/Protections.tsx
@@ -107,7 +107,7 @@ export const Protections: FunctionalComponent<Props> = ({ application }) => {
         {protectionsDisabledUntil && (
           <Button
             className="mt-3"
-            type="primary"
+            variant="primary"
             label="End Unprotected Access"
             onClick={enableProtections}
           />
diff --git a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/SaveSecretKey.tsx b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/SaveSecretKey.tsx
index 68fc98c1b..a52c746dc 100644
--- a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/SaveSecretKey.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/SaveSecretKey.tsx
@@ -78,13 +78,13 @@ export const SaveSecretKey: FunctionComponent<{
       <ModalDialogButtons>
         <Button
           className="min-w-20"
-          type="normal"
+          variant="normal"
           label="Back"
           onClick={() => act.openScanQRCode()}
         />
         <Button
           className="min-w-20"
-          type="primary"
+          variant="primary"
           label="Next"
           onClick={() => act.openVerification()}
         />
diff --git a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/ScanQRCode.tsx b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/ScanQRCode.tsx
index bf248d418..73906a545 100644
--- a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/ScanQRCode.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/ScanQRCode.tsx
@@ -63,13 +63,13 @@ export const ScanQRCode: FunctionComponent<{
       <ModalDialogButtons>
         <Button
           className="min-w-20"
-          type="normal"
+          variant="normal"
           label="Cancel"
           onClick={() => act.cancelActivation()}
         />
         <Button
           className="min-w-20"
-          type="primary"
+          variant="primary"
           label="Next"
           onClick={() => act.openSaveSecretKey()}
         />
diff --git a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorSuccess.tsx b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorSuccess.tsx
index 83eac38c3..956940153 100644
--- a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorSuccess.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorSuccess.tsx
@@ -27,7 +27,7 @@ export const TwoFactorSuccess: FunctionComponent<{
     <ModalDialogButtons>
       <Button
         className="min-w-20"
-        type="primary"
+        variant="primary"
         label="Finish"
         onClick={act.finishActivation}
       />
diff --git a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/Verification.tsx b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/Verification.tsx
index 199358090..39f4f33d4 100644
--- a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/Verification.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/Verification.tsx
@@ -65,13 +65,13 @@ export const Verification: FunctionComponent<{
         )}
         <Button
           className="min-w-20"
-          type="normal"
+          variant="normal"
           label="Back"
           onClick={act.openSaveSecretKey}
         />
         <Button
           className="min-w-20"
-          type="primary"
+          variant="primary"
           label="Next"
           onClick={act.enable2FA}
         />
diff --git a/app/assets/javascripts/components/PurchaseFlow/panes/CreateAccount.tsx b/app/assets/javascripts/components/PurchaseFlow/panes/CreateAccount.tsx
index a02d9c315..649996905 100644
--- a/app/assets/javascripts/components/PurchaseFlow/panes/CreateAccount.tsx
+++ b/app/assets/javascripts/components/PurchaseFlow/panes/CreateAccount.tsx
@@ -204,7 +204,7 @@ export const CreateAccount: FunctionComponent<Props> = observer(
             </div>
             <Button
               className="py-2.5 xs:mb-4"
-              type="primary"
+              variant="primary"
               label={
                 isCreatingAccount ? 'Creating account...' : 'Create account'
               }
diff --git a/app/assets/javascripts/components/PurchaseFlow/panes/SignIn.tsx b/app/assets/javascripts/components/PurchaseFlow/panes/SignIn.tsx
index 99557ad70..5c6e3e885 100644
--- a/app/assets/javascripts/components/PurchaseFlow/panes/SignIn.tsx
+++ b/app/assets/javascripts/components/PurchaseFlow/panes/SignIn.tsx
@@ -151,7 +151,7 @@ export const SignIn: FunctionComponent<Props> = observer(
             </div>
             <Button
               className={`${isSigningIn ? 'min-w-30' : 'min-w-24'} py-2.5 mb-5`}
-              type="primary"
+              variant="primary"
               label={isSigningIn ? 'Signing in...' : 'Sign in'}
               onClick={handleSignIn}
               disabled={isSigningIn}
diff --git a/app/assets/javascripts/components/RevisionHistoryModal/RevisionContentLocked.tsx b/app/assets/javascripts/components/RevisionHistoryModal/RevisionContentLocked.tsx
index 3f73c3f23..afc4a54d6 100644
--- a/app/assets/javascripts/components/RevisionHistoryModal/RevisionContentLocked.tsx
+++ b/app/assets/javascripts/components/RevisionHistoryModal/RevisionContentLocked.tsx
@@ -46,7 +46,7 @@ export const RevisionContentLocked: FunctionComponent<{
           . Learn more about our other plans to upgrade your history capacity.
         </div>
         <Button
-          type="primary"
+          variant="primary"
           label="Discover plans"
           onClick={() => {
             if (window.plansUrl) {
diff --git a/app/assets/javascripts/components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx b/app/assets/javascripts/components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
index 3c866cc51..2ec440528 100644
--- a/app/assets/javascripts/components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
+++ b/app/assets/javascripts/components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
@@ -292,7 +292,7 @@ export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps>
                   label="Close"
                   onClick={dismissModal}
                   ref={closeButtonRef}
-                  type="normal"
+                  variant="normal"
                 />
               </div>
               {selectedRevision && (
@@ -301,7 +301,7 @@ export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps>
                     <Button
                       className="py-1.35 mr-2.5"
                       onClick={deleteSelectedRevision}
-                      type="normal"
+                      variant="normal"
                     >
                       {isDeletingRevision ? (
                         <div className="sk-spinner my-1 w-3 h-3 spinner-info" />
@@ -314,13 +314,13 @@ export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps>
                     className="py-1.35 mr-2.5"
                     label="Restore as a copy"
                     onClick={restoreAsCopy}
-                    type="normal"
+                    variant="normal"
                   />
                   <Button
                     className="py-1.35"
                     label="Restore version"
                     onClick={restore}
-                    type="primary"
+                    variant="primary"
                   />
                 </div>
               )}
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 4a1cbf0c8..f2e8bdcbd 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -1045,3 +1045,19 @@
 .vertical-middle {
   vertical-align: middle;
 }
+
+.sn-component .focus\:brightness-default:focus {
+  filter: brightness(100%);
+}
+
+.sn-component .hover\:brightness-default:hover {
+  filter: brightness(100%);
+}
+
+.sn-component .focus\:bg-default:focus {
+  background-color: var(--sn-stylekit-background-color);
+}
+
+.sn-component .hover\:bg-default:hover {
+  background-color: var(--sn-stylekit-background-color);
+}

From df54c3701c05e7e87da96ef76b65146a1d0c7240 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 29 Mar 2022 18:04:40 +0530
Subject: [PATCH 004/102] fix: progress bar color on firefox (#958)

---
 app/assets/stylesheets/_notes.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/_notes.scss b/app/assets/stylesheets/_notes.scss
index 3e8cf1cd1..995e29e84 100644
--- a/app/assets/stylesheets/_notes.scss
+++ b/app/assets/stylesheets/_notes.scss
@@ -315,7 +315,7 @@
         }
 
         &::-moz-progress-bar {
-          background-color: var(--sn-stylekit-secondary-background-color);
+          background-color: var(--sn-stylekit-info-color);
         }
       }
     }

From 9cf2ebaf8839b988ccf1635b882175219c6abfb4 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 29 Mar 2022 22:18:23 +0530
Subject: [PATCH 005/102] chore: upgrade snjs (#959)

---
 app/assets/javascripts/components/Footer.tsx | 14 ++-----
 package.json                                 |  2 +-
 yarn.lock                                    | 44 ++++++++++++++------
 3 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/app/assets/javascripts/components/Footer.tsx b/app/assets/javascripts/components/Footer.tsx
index add25fd55..5965843c4 100644
--- a/app/assets/javascripts/components/Footer.tsx
+++ b/app/assets/javascripts/components/Footer.tsx
@@ -5,9 +5,9 @@ import { preventRefreshing } from '@/utils';
 import {
   ApplicationEvent,
   ContentType,
-  SNTheme,
   CollectionSort,
   ApplicationDescriptor,
+  ItemInterface,
 } from '@standardnotes/snjs';
 import {
   STRING_NEW_UPDATE_READY,
@@ -22,15 +22,7 @@ import { AppStateEvent, EventSource } from '@/ui_models/app_state';
 import { Icon } from './Icon';
 import { QuickSettingsMenu } from './QuickSettingsMenu/QuickSettingsMenu';
 import { SyncResolutionMenu } from './SyncResolutionMenu';
-import { Fragment, render } from 'preact';
-
-/**
- * Disable before production release.
- * Anyone who used the beta will still have access to
- * the account switcher in production via local storage flag
- */
-const ACCOUNT_SWITCHER_ENABLED = false;
-const ACCOUNT_SWITCHER_FEATURE_KEY = 'account_switcher';
+import { Fragment } from 'preact';
 
 type Props = {
   application: WebApplication;
@@ -235,7 +227,7 @@ export class Footer extends PureComponent<Props, State> {
       ContentType.Theme,
       CollectionSort.Title,
       'asc',
-      (theme: SNTheme) => {
+      (theme: ItemInterface) => {
         return !theme.errorDecrypting;
       }
     );
diff --git a/package.json b/package.json
index da4943c44..8384db4a5 100644
--- a/package.json
+++ b/package.json
@@ -76,7 +76,7 @@
     "@standardnotes/filepicker": "1.10.3",
     "@standardnotes/settings": "1.13.1",
     "@standardnotes/sncrypto-web": "1.8.0",
-    "@standardnotes/snjs": "2.92.1",
+    "@standardnotes/snjs": "2.92.8",
     "@zip.js/zip.js": "^2.4.7",
     "mobx": "^6.5.0",
     "mobx-react-lite": "^3.3.0",
diff --git a/yarn.lock b/yarn.lock
index 282b0357a..971519079 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2414,10 +2414,10 @@
   resolved "https://registry.yarnpkg.com/@standardnotes/components/-/components-1.7.13.tgz#55c0bad3afd36788b45bf1e67950d84ee5358dd3"
   integrity sha512-Gy1PsibeTjcNNLUvHtfgPFNvEf+BdaYF9QA/RimEsPd9NWZL/kDJSVqj7J33gGoxpdv7l8Y/lMOMt6Az+FqKKw==
 
-"@standardnotes/domain-events@^2.25.6":
-  version "2.25.6"
-  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.25.6.tgz#025f2377f7eada61e0d6f5e9c68d6a860f26dbd7"
-  integrity sha512-TAEzhtoyPdEep94jyb8PZxH2cmEY9gdEUsKnWLpQrxrUrXRZ7+fqc1M01PtX4f6/bEnkkonBaxrs8XIVoKKZzA==
+"@standardnotes/domain-events@^2.26.2":
+  version "2.26.2"
+  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.26.2.tgz#4f39bdb5048ad64bd528e544c54512d4387a43dd"
+  integrity sha512-cnyr954d0DIUFLZafy2k359DhHqyq1b7ylZG4ZHYiqpiG30cfQyQ2r2HBWQiFHNVRvIYrFxnSl3k0cm+H3JoXQ==
   dependencies:
     "@standardnotes/auth" "^3.18.0"
     "@standardnotes/features" "^1.35.6"
@@ -2455,7 +2455,17 @@
     "@standardnotes/features" "^1.35.6"
     "@standardnotes/payloads" "^1.4.20"
 
-"@standardnotes/services@1.6.11", "@standardnotes/services@^1.6.11":
+"@standardnotes/responses@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.4.1.tgz#b03ecf5836d98ce0f9ce91f698411c7694126680"
+  integrity sha512-u7r46NIRh6M/a4UF1O+dbBn60D2/u1ENb2I3rXhMu+Ddrji9T3Kcrs1CzlH1ZwgnN32P3vT4Vjw1K5G0VZMBPw==
+  dependencies:
+    "@standardnotes/auth" "^3.18.0"
+    "@standardnotes/common" "^1.17.0"
+    "@standardnotes/features" "^1.35.6"
+    "@standardnotes/payloads" "^1.4.20"
+
+"@standardnotes/services@1.6.11":
   version "1.6.11"
   resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.6.11.tgz#a1ac0e28128a720e1c4f85220b0e4ed122ea4573"
   integrity sha512-iGVobfAavRALJOvnhF24HHcule7jaUGx4xVH9Kr8g+9a2vVWRM3Fyp3EqE4LZjlS5u8Qz1i8BADzQtzajb1VmQ==
@@ -2465,6 +2475,16 @@
     "@standardnotes/responses" "^1.4.0"
     "@standardnotes/utils" "^1.4.3"
 
+"@standardnotes/services@^1.6.12":
+  version "1.6.12"
+  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.6.12.tgz#9a1800761a8e07b8cb7fe5938f86b282c5336f28"
+  integrity sha512-GNEirn+v3GuL6KvpKUDUv9jLzEacYmrrRJ4EzgauZD63hZA6L1nX0iHPLudDrxBB101p597BQXWzt94Rwk5Jfw==
+  dependencies:
+    "@standardnotes/applications" "^1.2.6"
+    "@standardnotes/common" "^1.17.0"
+    "@standardnotes/responses" "^1.4.1"
+    "@standardnotes/utils" "^1.4.3"
+
 "@standardnotes/settings@1.13.1", "@standardnotes/settings@^1.13.1":
   version "1.13.1"
   resolved "https://registry.yarnpkg.com/@standardnotes/settings/-/settings-1.13.1.tgz#c0f8558079da178667e7addd569b6953cd5e6bc2"
@@ -2484,19 +2504,19 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.92.1":
-  version "2.92.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.92.1.tgz#2a28dbff01b4982de0e6b2eb52c3438546e643b5"
-  integrity sha512-dJrVl71jecn64iKcfLTwtgCquZGPx+L96EMAp0v1xGYpNREB9qySJW1kWGQukiMrjXbcJYnB7TKNXoerdD6fOg==
+"@standardnotes/snjs@2.92.8":
+  version "2.92.8"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.92.8.tgz#148b454a87893a4625b643d47e8d8d9018e02b19"
+  integrity sha512-Ru/C0zsx2s9HEgEQO3QyvNP4q124c6hlc1gDuQOtuLk9PC0hA/Pq6FdVPsmzRifSTpage+3zq1RgFOMdqbpZFw==
   dependencies:
     "@standardnotes/applications" "^1.2.6"
     "@standardnotes/auth" "^3.18.0"
     "@standardnotes/common" "^1.17.0"
-    "@standardnotes/domain-events" "^2.25.6"
+    "@standardnotes/domain-events" "^2.26.2"
     "@standardnotes/features" "^1.35.6"
     "@standardnotes/payloads" "^1.4.20"
-    "@standardnotes/responses" "^1.4.0"
-    "@standardnotes/services" "^1.6.11"
+    "@standardnotes/responses" "^1.4.1"
+    "@standardnotes/services" "^1.6.12"
     "@standardnotes/settings" "^1.13.1"
     "@standardnotes/sncrypto-common" "^1.7.3"
     "@standardnotes/utils" "^1.4.3"

From ba0d00c32d82db8aad994dcc04a2aaa4894f7338 Mon Sep 17 00:00:00 2001
From: Johnny A <5891646+johnny243@users.noreply.github.com>
Date: Thu, 31 Mar 2022 06:30:29 -0700
Subject: [PATCH 006/102] chore(deps): update markdown-visual (#961)

Co-authored-by: Johnny Almonte <johnny243@users.noreply.github.com>
---
 package.json                                  |   6 +-
 public/components/checksums.json              |   6 +-
 .../build/asset-manifest.json                 |   6 +-
 .../build/index.html                          |   2 +-
 .../build/static/css/main.904cd38b.css        |   2 +
 .../build/static/css/main.904cd38b.css.map    |   1 +
 .../package.json                              |   2 +-
 yarn.lock                                     | 128 ++++++++++++------
 8 files changed, 102 insertions(+), 51 deletions(-)
 create mode 100644 public/components/org.standardnotes.markdown-visual-editor/build/static/css/main.904cd38b.css
 create mode 100644 public/components/org.standardnotes.markdown-visual-editor/build/static/css/main.904cd38b.css.map

diff --git a/package.json b/package.json
index 8384db4a5..53530aafa 100644
--- a/package.json
+++ b/package.json
@@ -71,12 +71,12 @@
     "@reach/dialog": "^0.16.2",
     "@reach/listbox": "^0.16.2",
     "@reach/tooltip": "^0.16.2",
-    "@standardnotes/components": "1.7.13",
-    "@standardnotes/features": "1.35.6",
+    "@standardnotes/components": "1.7.14",
+    "@standardnotes/features": "1.36.1",
     "@standardnotes/filepicker": "1.10.3",
     "@standardnotes/settings": "1.13.1",
     "@standardnotes/sncrypto-web": "1.8.0",
-    "@standardnotes/snjs": "2.92.8",
+    "@standardnotes/snjs": "2.92.10",
     "@zip.js/zip.js": "^2.4.7",
     "mobx": "^6.5.0",
     "mobx-react-lite": "^3.3.0",
diff --git a/public/components/checksums.json b/public/components/checksums.json
index d3cd949f7..70531221c 100644
--- a/public/components/checksums.json
+++ b/public/components/checksums.json
@@ -95,8 +95,8 @@
     "binary": "88d4b9a6ff94b1f6cba884787e051cda3cd8073022984b63f7d3b13157aa6e2a"
   },
   "org.standardnotes.markdown-visual-editor": {
-    "version": "1.0.5",
-    "base64": "fe7795f2e181094324aff345b7375d5fb54545928e61d5bee21be9f65b4cc4cc",
-    "binary": "a68422a270271fc8a6f16e8761195aa339d4e160853cf48ae3b921cd65a20e0d"
+    "version": "1.0.6",
+    "base64": "0d79d9e8ca471973f93f405933600769efe5a149d14a39124bcb2a034bdb3b18",
+    "binary": "d8e59dc53473df006eff1f8fcf12d96ab6b919d422e3fdfede8638314868da4f"
   }
 }
\ No newline at end of file
diff --git a/public/components/org.standardnotes.markdown-visual-editor/build/asset-manifest.json b/public/components/org.standardnotes.markdown-visual-editor/build/asset-manifest.json
index 485337c48..fb2e8cb99 100644
--- a/public/components/org.standardnotes.markdown-visual-editor/build/asset-manifest.json
+++ b/public/components/org.standardnotes.markdown-visual-editor/build/asset-manifest.json
@@ -1,6 +1,6 @@
 {
   "files": {
-    "main.css": "./static/css/main.75ca5ad7.css",
+    "main.css": "./static/css/main.904cd38b.css",
     "main.js": "./static/js/main.330241d2.js",
     "static/media/material-icons-two-tone.woff": "./static/media/material-icons-two-tone.ee71463e28071436d096.woff",
     "static/media/material-icons-two-tone.woff2": "./static/media/material-icons-two-tone.7e94e72135150c6b387c.woff2",
@@ -73,11 +73,11 @@
     "static/media/KaTeX_Size3-Regular.woff": "./static/media/KaTeX_Size3-Regular.7947224e8a9914fa332b.woff",
     "static/media/KaTeX_Size3-Regular.woff2": "./static/media/KaTeX_Size3-Regular.e1951519f6f0596f7356.woff2",
     "index.html": "./index.html",
-    "main.75ca5ad7.css.map": "./static/css/main.75ca5ad7.css.map",
+    "main.904cd38b.css.map": "./static/css/main.904cd38b.css.map",
     "main.330241d2.js.map": "./static/js/main.330241d2.js.map"
   },
   "entrypoints": [
-    "static/css/main.75ca5ad7.css",
+    "static/css/main.904cd38b.css",
     "static/js/main.330241d2.js"
   ]
 }
\ No newline at end of file
diff --git a/public/components/org.standardnotes.markdown-visual-editor/build/index.html b/public/components/org.standardnotes.markdown-visual-editor/build/index.html
index fe7b383ce..46283b976 100644
--- a/public/components/org.standardnotes.markdown-visual-editor/build/index.html
+++ b/public/components/org.standardnotes.markdown-visual-editor/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="A lightweight WYSIWYG markdown editor, derivated from Milkdown editor"/><link rel="apple-touch-icon" href="./logo192.png"/><link rel="manifest" href="./manifest.json"/><title>Markdown Visual</title><script defer="defer" src="./static/js/main.330241d2.js"></script><link href="./static/css/main.75ca5ad7.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
\ No newline at end of file
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="A lightweight WYSIWYG markdown editor, derivated from Milkdown editor"/><link rel="apple-touch-icon" href="./logo192.png"/><link rel="manifest" href="./manifest.json"/><title>Markdown Visual</title><script defer="defer" src="./static/js/main.330241d2.js"></script><link href="./static/css/main.904cd38b.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
\ No newline at end of file
diff --git a/public/components/org.standardnotes.markdown-visual-editor/build/static/css/main.904cd38b.css b/public/components/org.standardnotes.markdown-visual-editor/build/static/css/main.904cd38b.css
new file mode 100644
index 000000000..0655025a1
--- /dev/null
+++ b/public/components/org.standardnotes.markdown-visual-editor/build/static/css/main.904cd38b.css
@@ -0,0 +1,2 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--sn-stylekit-base-font-size:0.8125rem;--sn-stylekit-font-size-p:0.8125rem;--sn-stylekit-font-size-editor:0.983125rem;--sn-stylekit-font-size-h6:0.65rem;--sn-stylekit-font-size-h5:0.73125rem;--sn-stylekit-font-size-h4:0.8125rem;--sn-stylekit-font-size-h3:0.89375rem;--sn-stylekit-font-size-h2:0.975rem;--sn-stylekit-font-size-h1:1.05625rem;--sn-stylekit-white:#fff;--sn-stylekit-black:#19191c;--sn-stylekit-grey-1:#72767e;--sn-stylekit-grey-2:#bbbec4;--sn-stylekit-grey-3:#dfe1e4;--sn-stylekit-grey-4:#eeeff1;--sn-stylekit-grey-4-opacity-variant:#bbbec43d;--sn-stylekit-grey-5:#f4f5f7;--sn-stylekit-grey-6:#e5e5e5;--sn-stylekit-grey-super-light:#f9f9f9;--sn-stylekit-dark-red:#cc2128;--sn-stylekit-neutral-color:#989898;--sn-stylekit-neutral-contrast-color:#fff;--sn-stylekit-info-color:#086dd6;--sn-stylekit-info-color-darkened:#065cb5;--sn-stylekit-info-contrast-color:#fff;--sn-stylekit-info-backdrop-color:#2b6fcf0f;--sn-stylekit-success-color:#2b9612;--sn-stylekit-success-contrast-color:#fff;--sn-stylekit-warning-color:#f6a200;--sn-stylekit-warning-contrast-color:#fff;--sn-stylekit-danger-color:#f80324;--sn-stylekit-danger-contrast-color:#fff;--sn-stylekit-shadow-color:#c8c8c8;--sn-stylekit-background-color:#fff;--sn-stylekit-border-color:#dfe1e4;--sn-stylekit-foreground-color:#000;--sn-stylekit-contrast-background-color:#f6f6f6;--sn-stylekit-contrast-foreground-color:#2e2e2e;--sn-stylekit-contrast-border-color:#e3e3e3;--sn-stylekit-secondary-background-color:#f6f6f6;--sn-stylekit-secondary-foreground-color:#2e2e2e;--sn-stylekit-secondary-border-color:#e3e3e3;--sn-stylekit-secondary-contrast-background-color:#e3e3e3;--sn-stylekit-secondary-contrast-foreground-color:#2e2e2e;--sn-stylekit-secondary-contrast-border-color:#a2a2a2;--sn-stylekit-editor-background-color:var(--sn-stylekit-background-color);--sn-stylekit-editor-foreground-color:var(--sn-stylekit-foreground-color);--sn-stylekit-paragraph-text-color:#454545;--sn-stylekit-input-placeholder-color:#a8a8a8;--sn-stylekit-input-border-color:#e3e3e3;--sn-stylekit-scrollbar-thumb-color:#dfdfdf;--sn-stylekit-scrollbar-track-border-color:#e7e7e7;--sn-stylekit-menu-border:none;--sn-stylekit-general-border-radius:2px;--sn-stylekit-list-item-highlight-color:var(--sn-stylekit-grey-5);--sn-stylekit-simplified-chinese-font:"Microsoft Yahei","微软雅黑体";--sn-stylekit-monospace-font:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,"Ubuntu Mono","Courier New",monospace;--sn-stylekit-sans-serif-font:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",var(--sn-stylekit-simplified-chinese-font),sans-serif;--sn-stylekit-editor-font-family:var(--sn-stylekit-sans-serif-font);--sn-stylekit-theme-type:light;--sn-stylekit-theme-name:sn-light;--sn-stylekit-accessory-tint-color-1:#086dd6;--sn-stylekit-accessory-tint-color-2:#ea6595;--sn-stylekit-accessory-tint-color-3:#ebad00;--sn-stylekit-accessory-tint-color-4:#7049cf;--sn-stylekit-accessory-tint-color-5:#1aa772;--sn-stylekit-accessory-tint-color-6:#f28c52}.sn-component{-webkit-font-smoothing:antialiased;color:#000;color:var(--sn-stylekit-foreground-color);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Microsoft Yahei,微软雅黑体,sans-serif;font-family:var(--sn-stylekit-sans-serif-font)}.sn-component .sk-panel{background-color:#fff;background-color:var(--sn-stylekit-background-color);border:1px solid #dfe1e4;border:1px solid var(--sn-stylekit-border-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);box-shadow:0 2px 5px #c8c8c8;box-shadow:0 2px 5px var(--sn-stylekit-shadow-color);display:flex;flex-direction:column;flex-grow:1;overflow:auto}.sn-component .sk-panel a:hover{text-decoration:underline}.sn-component .sk-panel.static{border:none;border-radius:0;box-shadow:none}.sn-component .sk-panel .sk-panel-header{align-items:center;background-color:#f6f6f6;background-color:var(--sn-stylekit-contrast-background-color);border-bottom:1px solid #e3e3e3;border-bottom:1px solid var(--sn-stylekit-contrast-border-color);color:#2e2e2e;color:var(--sn-stylekit-contrast-foreground-color);display:flex;flex-shrink:0;justify-content:space-between;padding:.89375rem 1.625rem}.sn-component .sk-panel .sk-panel-header .sk-panel-header-title{font-size:1.05625rem;font-size:var(--sn-stylekit-font-size-h1);font-weight:500}.sn-component .sk-panel .sk-panel-header .close-button{font-weight:700}.sn-component .sk-panel .sk-footer,.sn-component .sk-panel .sk-panel-footer{border-top:1px solid #dfe1e4;border-top:1px solid var(--sn-stylekit-border-color);box-sizing:border-box;padding:.8125rem 1.625rem}.sn-component .sk-panel .sk-footer.extra-padding,.sn-component .sk-panel .sk-panel-footer.extra-padding{padding:1.625rem}.sn-component .sk-panel .sk-footer .left,.sn-component .sk-panel .sk-panel-footer .left{display:block;text-align:left}.sn-component .sk-panel .sk-footer .right,.sn-component .sk-panel .sk-panel-footer .right{display:block;text-align:right}.sn-component .sk-panel .sk-panel-content{flex-grow:1;height:100%;overflow:scroll;overflow-x:auto!important;overflow-y:auto!important;padding:1.3rem 1.625rem 0}.sn-component .sk-panel .sk-panel-content .sk-li,.sn-component .sk-panel .sk-panel-content .sk-p{color:#454545;color:var(--sn-stylekit-paragraph-text-color);line-height:1.3}.sn-component .sk-panel-section{display:flex;flex-direction:column;padding-bottom:1.3rem}.sn-component .sk-panel-section.sk-panel-hero{text-align:center}.sn-component .sk-panel-section .sk-p:last-child{margin-bottom:0}.sn-component .sk-panel-section:not(:last-child){border-bottom:1px solid #dfe1e4;border-bottom:1px solid var(--sn-stylekit-border-color);margin-bottom:1.21875rem}.sn-component .sk-panel-section:not(:last-child).no-border{border-bottom:none}.sn-component .sk-panel-section:last-child{margin-bottom:.5rem}.sn-component .sk-panel-section.no-bottom-pad{margin-bottom:0;padding-bottom:0}.sn-component .sk-panel-section .sk-panel-section-title{font-size:.89375rem;font-size:var(--sn-stylekit-font-size-h3);font-weight:700;margin-bottom:.40625rem}.sn-component .sk-panel-section .sk-panel-section-outer-title{border-bottom:1px solid #dfe1e4;border-bottom:1px solid var(--sn-stylekit-border-color);font-size:.89375rem;font-size:var(--sn-stylekit-font-size-h3);margin-bottom:15px;margin-top:1.70625rem;padding-bottom:.73125rem}.sn-component .sk-panel-section .sk-panel-section-subtitle{font-size:.73125rem;font-size:var(--sn-stylekit-font-size-h5);margin-bottom:2px}.sn-component .sk-panel-section .sk-panel-section-subtitle.subtle{font-weight:400;opacity:.6}.sn-component .sk-panel-section .text-content .sk-p{margin-bottom:.8175rem}.sn-component .sk-panel-section .text-content p:first-child{margin-top:.24375rem}.sn-component .sk-panel-row{align-items:center;display:flex;justify-content:space-between;padding-top:.325rem}.sn-component .sk-panel-row.centered{justify-content:center}.sn-component .sk-panel-row.justify-right{justify-content:flex-end}.sn-component .sk-panel-row.justify-left{justify-content:flex-start}.sn-component .sk-panel-row.align-top{align-items:flex-start}.sn-component .sk-panel-row .sk-panel-column.stretch{width:100%}.sn-component .sk-panel-row.default-padding,.sn-component .sk-panel-row:not(:last-child){padding-bottom:.325rem}.sn-component .sk-panel-row.condensed{padding-bottom:.1625rem;padding-top:.1625rem}.sn-component .sk-panel-row .sk-p{margin:0;padding:0}.sn-component .vertical-rule{background-color:#dfe1e4;background-color:var(--sn-stylekit-border-color);height:1.21875rem;width:1px}.sn-component .sk-panel-form{width:100%}.sn-component .sk-panel-form.half{width:50%}.sn-component .sk-panel-form .form-submit{margin-top:.121875rem}.sn-component .right-aligned{justify-content:flex-end;text-align:right}.sn-component .sk-menu-panel{background-color:#fff;background-color:var(--sn-stylekit-background-color);border:1px solid #e3e3e3;border:1px solid var(--sn-stylekit-contrast-border-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);overflow:scroll;overflow-x:auto!important;overflow-y:auto!important;-webkit-user-select:none;-ms-user-select:none;user-select:none}.sn-component .sk-menu-panel .sk-menu-panel-header{align-items:center;background-color:#f6f6f6;background-color:var(--sn-stylekit-contrast-background-color);border-bottom:1px solid #e3e3e3;border-bottom:1px solid var(--sn-stylekit-contrast-border-color);color:#2e2e2e;color:var(--sn-stylekit-contrast-foreground-color);display:flex;justify-content:space-between;padding:.65rem .8125rem}.sn-component .sk-menu-panel .sk-menu-panel-header-title{font-size:.8125rem;font-size:var(--sn-stylekit-font-size-h4);font-weight:700}.sn-component .sk-menu-panel .sk-menu-panel-header-subtitle{margin-top:.1625rem;opacity:.6}.sn-component .sk-menu-panel .sk-menu-panel-row{border-bottom:1px solid #dfe1e4;border-bottom:1px solid var(--sn-stylekit-border-color);cursor:pointer;display:flex;flex-direction:row;justify-content:space-between;padding:.8125rem}.sn-component .sk-menu-panel .sk-menu-panel-row:hover{background-color:#f6f6f6;background-color:var(--sn-stylekit-contrast-background-color);border-color:#e3e3e3;border-color:var(--sn-stylekit-contrast-border-color);color:#2e2e2e;color:var(--sn-stylekit-contrast-foreground-color)}.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column{display:flex;flex-direction:column;justify-content:center}.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column:not(:first-child){padding-left:1rem;padding-right:.121875rem}.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column.stretch{width:100%}.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .sk-menu-panel-subrows{margin-top:.8125rem}.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .sk-menu-panel-row,.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .sk-menu-panel-subrow{border:1px solid #e3e3e3;border:1px solid var(--sn-stylekit-contrast-border-color);margin-top:-1px}.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .sk-menu-panel-row:hover,.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .sk-menu-panel-subrow:hover{background-color:#fff;background-color:var(--sn-stylekit-background-color)}.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .left{display:flex}.sn-component .sk-menu-panel .sk-menu-panel-row .sk-box .sk-label,.sn-component .sk-menu-panel .sk-menu-panel-row .sk-box .sk-panel-section .sk-panel-section-subtitle,.sn-component .sk-menu-panel .sk-menu-panel-row .sk-button .sk-label,.sn-component .sk-menu-panel .sk-menu-panel-row .sk-button .sk-panel-section .sk-panel-section-subtitle,.sn-component .sk-panel-section .sk-menu-panel .sk-menu-panel-row .sk-box .sk-panel-section-subtitle,.sn-component .sk-panel-section .sk-menu-panel .sk-menu-panel-row .sk-button .sk-panel-section-subtitle{font-size:.65rem;font-size:var(--sn-stylekit-font-size-h6);font-weight:400}.sn-component .sk-menu-panel .sk-menu-panel-row .sk-label,.sn-component .sk-menu-panel .sk-menu-panel-row .sk-panel-section .sk-panel-section-subtitle,.sn-component .sk-panel-section .sk-menu-panel .sk-menu-panel-row .sk-panel-section-subtitle{font-size:.8125rem;font-size:var(--sn-stylekit-font-size-p);font-weight:700}.sn-component .sk-menu-panel .sk-menu-panel-row .sk-sublabel{font-size:.73125rem;font-size:var(--sn-stylekit-font-size-h5);margin-top:.1625rem;opacity:.6}.sn-component .red{color:#f80324;color:var(--sn-stylekit-danger-color)}.sn-component .tinted{color:#086dd6;color:var(--sn-stylekit-info-color)}.sn-component .selectable{user-select:text!important;-ms-user-select:text!important;-moz-user-select:text!important;-webkit-user-select:text!important}.sn-component .sk-h1,.sn-component .sk-h2,.sn-component .sk-h3,.sn-component .sk-h4,.sn-component .sk-h5{font-weight:400;margin:0;padding:0}.sn-component .sk-h1{font-size:1.05625rem;font-size:var(--sn-stylekit-font-size-h1);font-weight:500;line-height:1.54375rem}.sn-component .sk-h2{font-size:.975rem;font-size:var(--sn-stylekit-font-size-h2);line-height:1.4625rem}.sn-component .sk-h3{font-size:.89375rem;font-size:var(--sn-stylekit-font-size-h3);line-height:1.38125rem}.sn-component .sk-h4{font-size:.8125rem;font-size:var(--sn-stylekit-font-size-p);line-height:1.1375rem}.sn-component .sk-h5{font-size:.73125rem;font-size:var(--sn-stylekit-font-size-h5)}.sn-component .sk-bold{font-weight:700}.sn-component .sk-font-small{font-size:.73125rem;font-size:var(--sn-stylekit-font-size-h5)}.sn-component .sk-font-normal{font-size:.8125rem;font-size:var(--sn-stylekit-font-size-p)}.sn-component .sk-font-large{font-size:.89375rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component a.sk-a{cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none}.sn-component a.sk-a.disabled{color:#989898;color:var(--sn-stylekit-neutral-color);opacity:.6}.sn-component a.sk-a.boxed{border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);padding:.24375rem .325rem}.sn-component a.sk-a.boxed:hover{text-decoration:none}.sn-component a.sk-a.boxed.neutral{background-color:#989898;background-color:var(--sn-stylekit-neutral-color);color:#fff;color:var(--sn-stylekit-neutral-contrast-color)}.sn-component a.sk-a.boxed.info{background-color:#086dd6;background-color:var(--sn-stylekit-info-color);color:#fff;color:var(--sn-stylekit-info-contrast-color)}.sn-component a.sk-a.boxed.warning{background-color:#f6a200;background-color:var(--sn-stylekit-warning-color);color:#fff;color:var(--sn-stylekit-warning-contrast-color)}.sn-component a.sk-a.boxed.danger{background-color:#f80324;background-color:var(--sn-stylekit-danger-color);color:#fff;color:var(--sn-stylekit-danger-contrast-color)}.sn-component a.sk-a.boxed.success{background-color:#2b9612;background-color:var(--sn-stylekit-success-color);color:#fff;color:var(--sn-stylekit-success-contrast-color)}.sn-component .wrap{word-wrap:break-word}.sn-component .sk-base{color:#000;color:var(--sn-stylekit-foreground-color)}.sn-component .contrast{color:#2e2e2e;color:var(--sn-stylekit-contrast-foreground-color)}.sn-component .neutral{color:#989898;color:var(--sn-stylekit-neutral-color)}.sn-component .info{color:#086dd6;color:var(--sn-stylekit-info-color)}.sn-component .info-contrast{color:#fff;color:var(--sn-stylekit-info-contrast-color)}.sn-component .warning{color:#f6a200;color:var(--sn-stylekit-warning-color)}.sn-component .danger{color:#f80324;color:var(--sn-stylekit-danger-color)}.sn-component .success{color:#2b9612;color:var(--sn-stylekit-success-color)}.sn-component .info-i{color:#086dd6!important;color:var(--sn-stylekit-info-color)!important}.sn-component .warning-i{color:#f6a200!important;color:var(--sn-stylekit-warning-color)!important}.sn-component .danger-i{color:#f80324!important;color:var(--sn-stylekit-danger-color)!important}.sn-component .success-i{color:#2b9612!important;color:var(--sn-stylekit-success-color)!important}.sn-component .clear{background-color:transparent;border:none}.sn-component .center-text{justify-content:center!important;text-align:center!important}.sn-component p.sk-p{margin:.40625rem 0}.sn-component input.sk-input{border:none;box-sizing:border-box;font-size:.89375rem;font-size:var(--sn-stylekit-font-size-h3);margin:.24375rem 0;outline:0;padding:.56875rem .65rem;resize:none;width:100%}.sn-component input.sk-input.clear{background-color:transparent;border:none;color:#000;color:var(--sn-stylekit-foreground-color)}.sn-component input.sk-input.no-border{border:none}.sn-component .sk-label,.sn-component .sk-panel-section .sk-panel-section-subtitle{font-weight:700}.sn-component .sk-label.no-bold,.sn-component .sk-panel-section .no-bold.sk-panel-section-subtitle{font-weight:400}.sn-component .sk-panel-section label.sk-panel-section-subtitle,.sn-component label.sk-label{display:block;margin:.56875rem 0}.sn-component .sk-panel-section label.sk-panel-section-subtitle input[type=checkbox],.sn-component input[type=radio],.sn-component label.sk-label input[type=checkbox]{margin-right:.365625rem;vertical-align:middle;width:auto}.sn-component .sk-horizontal-group>*,.sn-component .sk-input-group>*{display:inline-block;vertical-align:middle}.sn-component .sk-horizontal-group>:not(:first-child),.sn-component .sk-input-group>:not(:first-child){margin-left:.73125rem}.sn-component .sk-border-bottom{border-bottom:1px solid #dfe1e4;border-bottom:1px solid var(--sn-stylekit-border-color)}.sn-component .sk-checkbox-group{padding-bottom:.24375rem;padding-top:.40625rem}.sn-component ::-webkit-input-placeholder{color:#a8a8a8;color:var(--sn-stylekit-input-placeholder-color)}.sn-component ::placeholder{color:#a8a8a8;color:var(--sn-stylekit-input-placeholder-color)}.sn-component :-ms-input-placeholder{color:#a8a8a8;color:var(--sn-stylekit-input-placeholder-color)}.sn-component ::-ms-input-placeholder{color:#a8a8a8;color:var(--sn-stylekit-input-placeholder-color)}.sn-component .sk-button-group.stretch{display:flex;width:100%}.sn-component .sk-button-group.stretch .sk-box,.sn-component .sk-button-group.stretch .sk-button{display:block;flex-grow:1;text-align:center}.sn-component .sk-button-group .sk-box,.sn-component .sk-button-group .sk-button{display:inline-block;vertical-align:middle}.sn-component .sk-button-group .sk-box:not(:last-child),.sn-component .sk-button-group .sk-button:not(:last-child){margin-right:5px}.sn-component .sk-button-group .sk-box:not(:last-child).featured,.sn-component .sk-button-group .sk-button:not(:last-child).featured{margin-right:8px}.sn-component .sk-segmented-buttons{display:flex;flex-direction:row}.sn-component .sk-segmented-buttons .sk-box,.sn-component .sk-segmented-buttons .sk-button{border-radius:0;margin:0;margin-left:0!important;margin-right:0!important;white-space:nowrap}.sn-component .sk-segmented-buttons .sk-box:not(:last-child),.sn-component .sk-segmented-buttons .sk-button:not(:last-child){border-radius:0;border-right:none}.sn-component .sk-segmented-buttons .sk-box:first-child,.sn-component .sk-segmented-buttons .sk-button:first-child{border-bottom-left-radius:2px;border-bottom-left-radius:var(--sn-stylekit-general-border-radius);border-bottom-right-radius:0;border-right:none;border-top-left-radius:2px;border-top-left-radius:var(--sn-stylekit-general-border-radius);border-top-right-radius:0}.sn-component .sk-segmented-buttons .sk-box:last-child,.sn-component .sk-segmented-buttons .sk-button:last-child{border-bottom-left-radius:0;border-bottom-right-radius:2px;border-bottom-right-radius:var(--sn-stylekit-general-border-radius);border-left:none;border-top-left-radius:0;border-top-right-radius:2px;border-top-right-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-box-group .sk-box{display:inline-block}.sn-component .sk-box-group .sk-box:not(:last-child){margin-right:5px}.sn-component .sk-a.button{text-decoration:none}.sn-component .sk-box,.sn-component .sk-button{cursor:pointer;display:table;font-size:.73125rem;font-size:var(--sn-stylekit-font-size-h5);padding:.40625rem .56875rem;text-align:center;-webkit-user-select:none;-ms-user-select:none;user-select:none}.sn-component .no-hover-border.sk-box:after,.sn-component .sk-button.no-hover-border:after{color:transparent!important}.sn-component .sk-button.wide,.sn-component .wide.sk-box{padding:.24375rem 1.38125rem}.sn-component .sk-box>.sk-label,.sn-component .sk-button>.sk-label,.sn-component .sk-panel-section .sk-box>.sk-panel-section-subtitle,.sn-component .sk-panel-section .sk-button>.sk-panel-section-subtitle{display:block;font-weight:700;text-align:center}.sn-component .big.sk-box,.sn-component .sk-button.big{font-size:.89375rem;font-size:var(--sn-stylekit-font-size-h3);padding:.56875rem 2.03125rem}.sn-component .sk-box{padding:2.03125rem 1.21875rem}.sn-component .sk-base.sk-box,.sn-component .sk-box.sk-base,.sn-component .sk-button.sk-base,.sn-component .sk-circle.sk-base{background-color:#fff;background-color:var(--sn-stylekit-background-color);border-color:#fff;border-color:var(--sn-stylekit-background-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);color:#000;color:var(--sn-stylekit-foreground-color);overflow:hidden;position:relative}.sn-component .sk-base.sk-box *,.sn-component .sk-box.sk-base *,.sn-component .sk-button.sk-base *,.sn-component .sk-circle.sk-base *{position:relative}.sn-component .sk-base.sk-box:before,.sn-component .sk-box.sk-base:before,.sn-component .sk-button.sk-base:before,.sn-component .sk-circle.sk-base:before{background-color:#fff;background-color:var(--sn-stylekit-background-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);content:"";height:100%;left:0;opacity:1;position:absolute;top:0;width:100%}.sn-component .sk-base.sk-box:after,.sn-component .sk-box.sk-base:after,.sn-component .sk-button.sk-base:after,.sn-component .sk-circle.sk-base:after{border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);box-shadow:inset 0 0 0 1px;color:#fff;color:var(--sn-stylekit-background-color);content:"";display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.sn-component .sk-base.sk-box:hover:before,.sn-component .sk-box.sk-base:hover:before,.sn-component .sk-button.sk-base:hover:before,.sn-component .sk-circle.sk-base:hover:before{-webkit-filter:brightness(130%);filter:brightness(130%)}.sn-component .sk-base.no-bg.sk-box,.sn-component .sk-box.sk-base.no-bg,.sn-component .sk-button.sk-base.no-bg,.sn-component .sk-circle.sk-base.no-bg{background-color:transparent}.sn-component .sk-base.no-bg.sk-box:before,.sn-component .sk-box.sk-base.no-bg:before,.sn-component .sk-button.sk-base.no-bg:before,.sn-component .sk-circle.sk-base.no-bg:before{content:none}.sn-component .sk-base.featured.sk-box,.sn-component .sk-box.sk-base.featured,.sn-component .sk-button.sk-base.featured,.sn-component .sk-circle.sk-base.featured{border:none;font-size:.89375rem;font-size:var(--sn-stylekit-font-size-h3);padding:.609375rem 1.015625rem}.sn-component .sk-base.featured.sk-box:before,.sn-component .sk-box.sk-base.featured:before,.sn-component .sk-button.sk-base.featured:before,.sn-component .sk-circle.sk-base.featured:before{opacity:1}.sn-component .contrast.sk-box,.sn-component .sk-box.contrast,.sn-component .sk-button.contrast,.sn-component .sk-circle.contrast{background-color:#f6f6f6;background-color:var(--sn-stylekit-contrast-background-color);border-color:#f6f6f6;border-color:var(--sn-stylekit-contrast-background-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);color:#2e2e2e;color:var(--sn-stylekit-contrast-foreground-color);overflow:hidden;position:relative}.sn-component .contrast.sk-box *,.sn-component .sk-box.contrast *,.sn-component .sk-button.contrast *,.sn-component .sk-circle.contrast *{position:relative}.sn-component .contrast.sk-box:before,.sn-component .sk-box.contrast:before,.sn-component .sk-button.contrast:before,.sn-component .sk-circle.contrast:before{background-color:#f6f6f6;background-color:var(--sn-stylekit-contrast-background-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);content:"";height:100%;left:0;opacity:1;position:absolute;top:0;width:100%}.sn-component .contrast.sk-box:after,.sn-component .sk-box.contrast:after,.sn-component .sk-button.contrast:after,.sn-component .sk-circle.contrast:after{border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);box-shadow:inset 0 0 0 1px;color:#f6f6f6;color:var(--sn-stylekit-contrast-background-color);content:"";display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.sn-component .contrast.sk-box:hover:before,.sn-component .sk-box.contrast:hover:before,.sn-component .sk-button.contrast:hover:before,.sn-component .sk-circle.contrast:hover:before{-webkit-filter:brightness(130%);filter:brightness(130%)}.sn-component .contrast.no-bg.sk-box,.sn-component .sk-box.contrast.no-bg,.sn-component .sk-button.contrast.no-bg,.sn-component .sk-circle.contrast.no-bg{background-color:transparent}.sn-component .contrast.no-bg.sk-box:before,.sn-component .sk-box.contrast.no-bg:before,.sn-component .sk-button.contrast.no-bg:before,.sn-component .sk-circle.contrast.no-bg:before{content:none}.sn-component .contrast.featured.sk-box,.sn-component .sk-box.contrast.featured,.sn-component .sk-button.contrast.featured,.sn-component .sk-circle.contrast.featured{border:none;font-size:.89375rem;font-size:var(--sn-stylekit-font-size-h3);padding:.609375rem 1.015625rem}.sn-component .contrast.featured.sk-box:before,.sn-component .sk-box.contrast.featured:before,.sn-component .sk-button.contrast.featured:before,.sn-component .sk-circle.contrast.featured:before{opacity:1}.sn-component .sk-box.sk-secondary,.sn-component .sk-button.sk-secondary,.sn-component .sk-circle.sk-secondary,.sn-component .sk-secondary.sk-box{background-color:#f6f6f6;background-color:var(--sn-stylekit-secondary-background-color);border-color:#f6f6f6;border-color:var(--sn-stylekit-secondary-background-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);color:#2e2e2e;color:var(--sn-stylekit-secondary-foreground-color);overflow:hidden;position:relative}.sn-component .sk-box.sk-secondary *,.sn-component .sk-button.sk-secondary *,.sn-component .sk-circle.sk-secondary *,.sn-component .sk-secondary.sk-box *{position:relative}.sn-component .sk-box.sk-secondary:before,.sn-component .sk-button.sk-secondary:before,.sn-component .sk-circle.sk-secondary:before,.sn-component .sk-secondary.sk-box:before{background-color:#f6f6f6;background-color:var(--sn-stylekit-secondary-background-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);content:"";height:100%;left:0;opacity:1;position:absolute;top:0;width:100%}.sn-component .sk-box.sk-secondary:after,.sn-component .sk-button.sk-secondary:after,.sn-component .sk-circle.sk-secondary:after,.sn-component .sk-secondary.sk-box:after{border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);box-shadow:inset 0 0 0 1px;color:#f6f6f6;color:var(--sn-stylekit-secondary-background-color);content:"";display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.sn-component .sk-box.sk-secondary:hover:before,.sn-component .sk-button.sk-secondary:hover:before,.sn-component .sk-circle.sk-secondary:hover:before,.sn-component .sk-secondary.sk-box:hover:before{-webkit-filter:brightness(130%);filter:brightness(130%)}.sn-component .sk-box.sk-secondary.no-bg,.sn-component .sk-button.sk-secondary.no-bg,.sn-component .sk-circle.sk-secondary.no-bg,.sn-component .sk-secondary.no-bg.sk-box{background-color:transparent}.sn-component .sk-box.sk-secondary.no-bg:before,.sn-component .sk-button.sk-secondary.no-bg:before,.sn-component .sk-circle.sk-secondary.no-bg:before,.sn-component .sk-secondary.no-bg.sk-box:before{content:none}.sn-component .sk-box.sk-secondary.featured,.sn-component .sk-button.sk-secondary.featured,.sn-component .sk-circle.sk-secondary.featured,.sn-component .sk-secondary.featured.sk-box{border:none;font-size:.89375rem;font-size:var(--sn-stylekit-font-size-h3);padding:.609375rem 1.015625rem}.sn-component .sk-box.sk-secondary.featured:before,.sn-component .sk-button.sk-secondary.featured:before,.sn-component .sk-circle.sk-secondary.featured:before,.sn-component .sk-secondary.featured.sk-box:before{opacity:1}.sn-component .sk-box.sk-secondary-contrast,.sn-component .sk-button.sk-secondary-contrast,.sn-component .sk-circle.sk-secondary-contrast,.sn-component .sk-secondary-contrast.sk-box{background-color:#e3e3e3;background-color:var(--sn-stylekit-secondary-contrast-background-color);border-color:#e3e3e3;border-color:var(--sn-stylekit-secondary-contrast-background-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);color:#2e2e2e;color:var(--sn-stylekit-secondary-contrast-foreground-color);overflow:hidden;position:relative}.sn-component .sk-box.sk-secondary-contrast *,.sn-component .sk-button.sk-secondary-contrast *,.sn-component .sk-circle.sk-secondary-contrast *,.sn-component .sk-secondary-contrast.sk-box *{position:relative}.sn-component .sk-box.sk-secondary-contrast:before,.sn-component .sk-button.sk-secondary-contrast:before,.sn-component .sk-circle.sk-secondary-contrast:before,.sn-component .sk-secondary-contrast.sk-box:before{background-color:#e3e3e3;background-color:var(--sn-stylekit-secondary-contrast-background-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);content:"";height:100%;left:0;opacity:1;position:absolute;top:0;width:100%}.sn-component .sk-box.sk-secondary-contrast:after,.sn-component .sk-button.sk-secondary-contrast:after,.sn-component .sk-circle.sk-secondary-contrast:after,.sn-component .sk-secondary-contrast.sk-box:after{border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);box-shadow:inset 0 0 0 1px;color:#e3e3e3;color:var(--sn-stylekit-secondary-contrast-background-color);content:"";display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.sn-component .sk-box.sk-secondary-contrast:hover:before,.sn-component .sk-button.sk-secondary-contrast:hover:before,.sn-component .sk-circle.sk-secondary-contrast:hover:before,.sn-component .sk-secondary-contrast.sk-box:hover:before{-webkit-filter:brightness(130%);filter:brightness(130%)}.sn-component .sk-box.sk-secondary-contrast.no-bg,.sn-component .sk-button.sk-secondary-contrast.no-bg,.sn-component .sk-circle.sk-secondary-contrast.no-bg,.sn-component .sk-secondary-contrast.no-bg.sk-box{background-color:transparent}.sn-component .sk-box.sk-secondary-contrast.no-bg:before,.sn-component .sk-button.sk-secondary-contrast.no-bg:before,.sn-component .sk-circle.sk-secondary-contrast.no-bg:before,.sn-component .sk-secondary-contrast.no-bg.sk-box:before{content:none}.sn-component .sk-box.sk-secondary-contrast.featured,.sn-component .sk-button.sk-secondary-contrast.featured,.sn-component .sk-circle.sk-secondary-contrast.featured,.sn-component .sk-secondary-contrast.featured.sk-box{border:none;font-size:.89375rem;font-size:var(--sn-stylekit-font-size-h3);padding:.609375rem 1.015625rem}.sn-component .sk-box.sk-secondary-contrast.featured:before,.sn-component .sk-button.sk-secondary-contrast.featured:before,.sn-component .sk-circle.sk-secondary-contrast.featured:before,.sn-component .sk-secondary-contrast.featured.sk-box:before{opacity:1}.sn-component .neutral.sk-box,.sn-component .sk-box.neutral,.sn-component .sk-button.neutral,.sn-component .sk-circle.neutral{background-color:#989898;background-color:var(--sn-stylekit-neutral-color);border-color:#989898;border-color:var(--sn-stylekit-neutral-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);color:#fff;color:var(--sn-stylekit-neutral-contrast-color);overflow:hidden;position:relative}.sn-component .neutral.sk-box *,.sn-component .sk-box.neutral *,.sn-component .sk-button.neutral *,.sn-component .sk-circle.neutral *{position:relative}.sn-component .neutral.sk-box:before,.sn-component .sk-box.neutral:before,.sn-component .sk-button.neutral:before,.sn-component .sk-circle.neutral:before{background-color:#989898;background-color:var(--sn-stylekit-neutral-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);content:"";height:100%;left:0;opacity:1;position:absolute;top:0;width:100%}.sn-component .neutral.sk-box:after,.sn-component .sk-box.neutral:after,.sn-component .sk-button.neutral:after,.sn-component .sk-circle.neutral:after{border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);box-shadow:inset 0 0 0 1px;color:#989898;color:var(--sn-stylekit-neutral-color);content:"";display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.sn-component .neutral.sk-box:hover:before,.sn-component .sk-box.neutral:hover:before,.sn-component .sk-button.neutral:hover:before,.sn-component .sk-circle.neutral:hover:before{-webkit-filter:brightness(130%);filter:brightness(130%)}.sn-component .neutral.no-bg.sk-box,.sn-component .sk-box.neutral.no-bg,.sn-component .sk-button.neutral.no-bg,.sn-component .sk-circle.neutral.no-bg{background-color:transparent}.sn-component .neutral.no-bg.sk-box:before,.sn-component .sk-box.neutral.no-bg:before,.sn-component .sk-button.neutral.no-bg:before,.sn-component .sk-circle.neutral.no-bg:before{content:none}.sn-component .neutral.featured.sk-box,.sn-component .sk-box.neutral.featured,.sn-component .sk-button.neutral.featured,.sn-component .sk-circle.neutral.featured{border:none;font-size:.89375rem;font-size:var(--sn-stylekit-font-size-h3);padding:.609375rem 1.015625rem}.sn-component .neutral.featured.sk-box:before,.sn-component .sk-box.neutral.featured:before,.sn-component .sk-button.neutral.featured:before,.sn-component .sk-circle.neutral.featured:before{opacity:1}.sn-component .info.sk-box,.sn-component .sk-box.info,.sn-component .sk-button.info,.sn-component .sk-circle.info{background-color:#086dd6;background-color:var(--sn-stylekit-info-color);border-color:#086dd6;border-color:var(--sn-stylekit-info-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);color:#fff;color:var(--sn-stylekit-info-contrast-color);overflow:hidden;position:relative}.sn-component .info.sk-box *,.sn-component .sk-box.info *,.sn-component .sk-button.info *,.sn-component .sk-circle.info *{position:relative}.sn-component .info.sk-box:before,.sn-component .sk-box.info:before,.sn-component .sk-button.info:before,.sn-component .sk-circle.info:before{background-color:#086dd6;background-color:var(--sn-stylekit-info-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);content:"";height:100%;left:0;opacity:1;position:absolute;top:0;width:100%}.sn-component .info.sk-box:after,.sn-component .sk-box.info:after,.sn-component .sk-button.info:after,.sn-component .sk-circle.info:after{border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);box-shadow:inset 0 0 0 1px;color:#086dd6;color:var(--sn-stylekit-info-color);content:"";display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.sn-component .info.sk-box:hover:before,.sn-component .sk-box.info:hover:before,.sn-component .sk-button.info:hover:before,.sn-component .sk-circle.info:hover:before{-webkit-filter:brightness(130%);filter:brightness(130%)}.sn-component .info.no-bg.sk-box,.sn-component .sk-box.info.no-bg,.sn-component .sk-button.info.no-bg,.sn-component .sk-circle.info.no-bg{background-color:transparent}.sn-component .info.no-bg.sk-box:before,.sn-component .sk-box.info.no-bg:before,.sn-component .sk-button.info.no-bg:before,.sn-component .sk-circle.info.no-bg:before{content:none}.sn-component .info.featured.sk-box,.sn-component .sk-box.info.featured,.sn-component .sk-button.info.featured,.sn-component .sk-circle.info.featured{border:none;font-size:.89375rem;font-size:var(--sn-stylekit-font-size-h3);padding:.609375rem 1.015625rem}.sn-component .info.featured.sk-box:before,.sn-component .sk-box.info.featured:before,.sn-component .sk-button.info.featured:before,.sn-component .sk-circle.info.featured:before{opacity:1}.sn-component .sk-box.warning,.sn-component .sk-button.warning,.sn-component .sk-circle.warning,.sn-component .warning.sk-box{background-color:#f6a200;background-color:var(--sn-stylekit-warning-color);border-color:#f6a200;border-color:var(--sn-stylekit-warning-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);color:#fff;color:var(--sn-stylekit-warning-contrast-color);overflow:hidden;position:relative}.sn-component .sk-box.warning *,.sn-component .sk-button.warning *,.sn-component .sk-circle.warning *,.sn-component .warning.sk-box *{position:relative}.sn-component .sk-box.warning:before,.sn-component .sk-button.warning:before,.sn-component .sk-circle.warning:before,.sn-component .warning.sk-box:before{background-color:#f6a200;background-color:var(--sn-stylekit-warning-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);content:"";height:100%;left:0;opacity:1;position:absolute;top:0;width:100%}.sn-component .sk-box.warning:after,.sn-component .sk-button.warning:after,.sn-component .sk-circle.warning:after,.sn-component .warning.sk-box:after{border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);box-shadow:inset 0 0 0 1px;color:#f6a200;color:var(--sn-stylekit-warning-color);content:"";display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.sn-component .sk-box.warning:hover:before,.sn-component .sk-button.warning:hover:before,.sn-component .sk-circle.warning:hover:before,.sn-component .warning.sk-box:hover:before{-webkit-filter:brightness(130%);filter:brightness(130%)}.sn-component .sk-box.warning.no-bg,.sn-component .sk-button.warning.no-bg,.sn-component .sk-circle.warning.no-bg,.sn-component .warning.no-bg.sk-box{background-color:transparent}.sn-component .sk-box.warning.no-bg:before,.sn-component .sk-button.warning.no-bg:before,.sn-component .sk-circle.warning.no-bg:before,.sn-component .warning.no-bg.sk-box:before{content:none}.sn-component .sk-box.warning.featured,.sn-component .sk-button.warning.featured,.sn-component .sk-circle.warning.featured,.sn-component .warning.featured.sk-box{border:none;font-size:.89375rem;font-size:var(--sn-stylekit-font-size-h3);padding:.609375rem 1.015625rem}.sn-component .sk-box.warning.featured:before,.sn-component .sk-button.warning.featured:before,.sn-component .sk-circle.warning.featured:before,.sn-component .warning.featured.sk-box:before{opacity:1}.sn-component .danger.sk-box,.sn-component .sk-box.danger,.sn-component .sk-button.danger,.sn-component .sk-circle.danger{background-color:#f80324;background-color:var(--sn-stylekit-danger-color);border-color:#f80324;border-color:var(--sn-stylekit-danger-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);color:#fff;color:var(--sn-stylekit-danger-contrast-color);overflow:hidden;position:relative}.sn-component .danger.sk-box *,.sn-component .sk-box.danger *,.sn-component .sk-button.danger *,.sn-component .sk-circle.danger *{position:relative}.sn-component .danger.sk-box:before,.sn-component .sk-box.danger:before,.sn-component .sk-button.danger:before,.sn-component .sk-circle.danger:before{background-color:#f80324;background-color:var(--sn-stylekit-danger-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);content:"";height:100%;left:0;opacity:1;position:absolute;top:0;width:100%}.sn-component .danger.sk-box:after,.sn-component .sk-box.danger:after,.sn-component .sk-button.danger:after,.sn-component .sk-circle.danger:after{border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);box-shadow:inset 0 0 0 1px;color:#f80324;color:var(--sn-stylekit-danger-color);content:"";display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.sn-component .danger.sk-box:hover:before,.sn-component .sk-box.danger:hover:before,.sn-component .sk-button.danger:hover:before,.sn-component .sk-circle.danger:hover:before{-webkit-filter:brightness(130%);filter:brightness(130%)}.sn-component .danger.no-bg.sk-box,.sn-component .sk-box.danger.no-bg,.sn-component .sk-button.danger.no-bg,.sn-component .sk-circle.danger.no-bg{background-color:transparent}.sn-component .danger.no-bg.sk-box:before,.sn-component .sk-box.danger.no-bg:before,.sn-component .sk-button.danger.no-bg:before,.sn-component .sk-circle.danger.no-bg:before{content:none}.sn-component .danger.featured.sk-box,.sn-component .sk-box.danger.featured,.sn-component .sk-button.danger.featured,.sn-component .sk-circle.danger.featured{border:none;font-size:.89375rem;font-size:var(--sn-stylekit-font-size-h3);padding:.609375rem 1.015625rem}.sn-component .danger.featured.sk-box:before,.sn-component .sk-box.danger.featured:before,.sn-component .sk-button.danger.featured:before,.sn-component .sk-circle.danger.featured:before{opacity:1}.sn-component .sk-box.success,.sn-component .sk-button.success,.sn-component .sk-circle.success,.sn-component .success.sk-box{background-color:#2b9612;background-color:var(--sn-stylekit-success-color);border-color:#2b9612;border-color:var(--sn-stylekit-success-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);color:#fff;color:var(--sn-stylekit-success-contrast-color);overflow:hidden;position:relative}.sn-component .sk-box.success *,.sn-component .sk-button.success *,.sn-component .sk-circle.success *,.sn-component .success.sk-box *{position:relative}.sn-component .sk-box.success:before,.sn-component .sk-button.success:before,.sn-component .sk-circle.success:before,.sn-component .success.sk-box:before{background-color:#2b9612;background-color:var(--sn-stylekit-success-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);content:"";height:100%;left:0;opacity:1;position:absolute;top:0;width:100%}.sn-component .sk-box.success:after,.sn-component .sk-button.success:after,.sn-component .sk-circle.success:after,.sn-component .success.sk-box:after{border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);box-shadow:inset 0 0 0 1px;color:#2b9612;color:var(--sn-stylekit-success-color);content:"";display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.sn-component .sk-box.success:hover:before,.sn-component .sk-button.success:hover:before,.sn-component .sk-circle.success:hover:before,.sn-component .success.sk-box:hover:before{-webkit-filter:brightness(130%);filter:brightness(130%)}.sn-component .sk-box.success.no-bg,.sn-component .sk-button.success.no-bg,.sn-component .sk-circle.success.no-bg,.sn-component .success.no-bg.sk-box{background-color:transparent}.sn-component .sk-box.success.no-bg:before,.sn-component .sk-button.success.no-bg:before,.sn-component .sk-circle.success.no-bg:before,.sn-component .success.no-bg.sk-box:before{content:none}.sn-component .sk-box.success.featured,.sn-component .sk-button.success.featured,.sn-component .sk-circle.success.featured,.sn-component .success.featured.sk-box{border:none;font-size:.89375rem;font-size:var(--sn-stylekit-font-size-h3);padding:.609375rem 1.015625rem}.sn-component .sk-box.success.featured:before,.sn-component .sk-button.success.featured:before,.sn-component .sk-circle.success.featured:before,.sn-component .success.featured.sk-box:before{opacity:1}.sn-component .sk-input.contrast,.sn-component .sk-notification.contrast{background-color:#f6f6f6;background-color:var(--sn-stylekit-contrast-background-color);border:1px solid #e3e3e3;border:1px solid var(--sn-stylekit-contrast-border-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);color:#2e2e2e;color:var(--sn-stylekit-contrast-foreground-color);overflow:hidden;position:relative}.sn-component .sk-input.contrast *,.sn-component .sk-notification.contrast *{position:relative}.sn-component .sk-input.contrast:before,.sn-component .sk-notification.contrast:before{background-color:#f6f6f6;background-color:var(--sn-stylekit-contrast-background-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);content:"";height:100%;left:0;opacity:1;position:absolute;top:0;width:100%}.sn-component .sk-input.contrast:after,.sn-component .sk-notification.contrast:after{border-color:#e3e3e3;border-color:var(--sn-stylekit-contrast-border-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);color:#e3e3e3;color:var(--sn-stylekit-contrast-border-color);content:"";display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.sn-component .sk-input.contrast.no-bg,.sn-component .sk-notification.contrast.no-bg{background-color:transparent}.sn-component .sk-input.contrast.no-bg:before,.sn-component .sk-notification.contrast.no-bg:before{content:none}.sn-component .sk-input.contrast.featured,.sn-component .sk-notification.contrast.featured{border:none;font-size:.89375rem;font-size:var(--sn-stylekit-font-size-h3);padding:.609375rem 1.015625rem}.sn-component .sk-input.contrast.featured:before,.sn-component .sk-notification.contrast.featured:before{opacity:1}.sn-component .sk-input.sk-secondary,.sn-component .sk-notification.sk-secondary{background-color:#f6f6f6;background-color:var(--sn-stylekit-secondary-background-color);border:1px solid #e3e3e3;border:1px solid var(--sn-stylekit-secondary-border-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);color:#2e2e2e;color:var(--sn-stylekit-secondary-foreground-color);overflow:hidden;position:relative}.sn-component .sk-input.sk-secondary *,.sn-component .sk-notification.sk-secondary *{position:relative}.sn-component .sk-input.sk-secondary:before,.sn-component .sk-notification.sk-secondary:before{background-color:#f6f6f6;background-color:var(--sn-stylekit-secondary-background-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);content:"";height:100%;left:0;opacity:1;position:absolute;top:0;width:100%}.sn-component .sk-input.sk-secondary:after,.sn-component .sk-notification.sk-secondary:after{border-color:#e3e3e3;border-color:var(--sn-stylekit-secondary-border-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);color:#e3e3e3;color:var(--sn-stylekit-secondary-border-color);content:"";display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.sn-component .sk-input.sk-secondary.no-bg,.sn-component .sk-notification.sk-secondary.no-bg{background-color:transparent}.sn-component .sk-input.sk-secondary.no-bg:before,.sn-component .sk-notification.sk-secondary.no-bg:before{content:none}.sn-component .sk-input.sk-secondary.featured,.sn-component .sk-notification.sk-secondary.featured{border:none;font-size:.89375rem;font-size:var(--sn-stylekit-font-size-h3);padding:.609375rem 1.015625rem}.sn-component .sk-input.sk-secondary.featured:before,.sn-component .sk-notification.sk-secondary.featured:before{opacity:1}.sn-component .sk-input.sk-secondary-contrast,.sn-component .sk-notification.sk-secondary-contrast{background-color:#e3e3e3;background-color:var(--sn-stylekit-secondary-contrast-background-color);border:1px solid #a2a2a2;border:1px solid var(--sn-stylekit-secondary-contrast-border-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);color:#2e2e2e;color:var(--sn-stylekit-secondary-contrast-foreground-color);overflow:hidden;position:relative}.sn-component .sk-input.sk-secondary-contrast *,.sn-component .sk-notification.sk-secondary-contrast *{position:relative}.sn-component .sk-input.sk-secondary-contrast:before,.sn-component .sk-notification.sk-secondary-contrast:before{background-color:#e3e3e3;background-color:var(--sn-stylekit-secondary-contrast-background-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);content:"";height:100%;left:0;opacity:1;position:absolute;top:0;width:100%}.sn-component .sk-input.sk-secondary-contrast:after,.sn-component .sk-notification.sk-secondary-contrast:after{border-color:#a2a2a2;border-color:var(--sn-stylekit-secondary-contrast-border-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);color:#a2a2a2;color:var(--sn-stylekit-secondary-contrast-border-color);content:"";display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.sn-component .sk-input.sk-secondary-contrast.no-bg,.sn-component .sk-notification.sk-secondary-contrast.no-bg{background-color:transparent}.sn-component .sk-input.sk-secondary-contrast.no-bg:before,.sn-component .sk-notification.sk-secondary-contrast.no-bg:before{content:none}.sn-component .sk-input.sk-secondary-contrast.featured,.sn-component .sk-notification.sk-secondary-contrast.featured{border:none;font-size:.89375rem;font-size:var(--sn-stylekit-font-size-h3);padding:.609375rem 1.015625rem}.sn-component .sk-input.sk-secondary-contrast.featured:before,.sn-component .sk-notification.sk-secondary-contrast.featured:before{opacity:1}.sn-component .sk-input.sk-base,.sn-component .sk-notification.sk-base{background-color:#fff;background-color:var(--sn-stylekit-background-color);border:1px solid #dfe1e4;border:1px solid var(--sn-stylekit-border-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);color:#000;color:var(--sn-stylekit-foreground-color);overflow:hidden;position:relative}.sn-component .sk-input.sk-base *,.sn-component .sk-notification.sk-base *{position:relative}.sn-component .sk-input.sk-base:before,.sn-component .sk-notification.sk-base:before{background-color:#fff;background-color:var(--sn-stylekit-background-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);content:"";height:100%;left:0;opacity:1;position:absolute;top:0;width:100%}.sn-component .sk-input.sk-base:after,.sn-component .sk-notification.sk-base:after{border-color:#dfe1e4;border-color:var(--sn-stylekit-border-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);color:#dfe1e4;color:var(--sn-stylekit-border-color);content:"";display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.sn-component .sk-input.sk-base.no-bg,.sn-component .sk-notification.sk-base.no-bg{background-color:transparent}.sn-component .sk-input.sk-base.no-bg:before,.sn-component .sk-notification.sk-base.no-bg:before{content:none}.sn-component .sk-input.sk-base.featured,.sn-component .sk-notification.sk-base.featured{border:none;font-size:.89375rem;font-size:var(--sn-stylekit-font-size-h3);padding:.609375rem 1.015625rem}.sn-component .sk-input.sk-base.featured:before,.sn-component .sk-notification.sk-base.featured:before{opacity:1}.sn-component .sk-input.neutral,.sn-component .sk-notification.neutral{background-color:#989898;background-color:var(--sn-stylekit-neutral-color);border-color:#989898;border-color:var(--sn-stylekit-neutral-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);color:#fff;color:var(--sn-stylekit-neutral-contrast-color);overflow:hidden;position:relative}.sn-component .sk-input.neutral *,.sn-component .sk-notification.neutral *{position:relative}.sn-component .sk-input.neutral:before,.sn-component .sk-notification.neutral:before{background-color:#989898;background-color:var(--sn-stylekit-neutral-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);content:"";height:100%;left:0;opacity:1;position:absolute;top:0;width:100%}.sn-component .sk-input.neutral:after,.sn-component .sk-notification.neutral:after{border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);box-shadow:inset 0 0 0 1px;color:#989898;color:var(--sn-stylekit-neutral-color);content:"";display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.sn-component .sk-input.neutral.no-bg,.sn-component .sk-notification.neutral.no-bg{background-color:transparent}.sn-component .sk-input.neutral.no-bg:before,.sn-component .sk-notification.neutral.no-bg:before{content:none}.sn-component .sk-input.neutral.featured,.sn-component .sk-notification.neutral.featured{border:none;font-size:.89375rem;font-size:var(--sn-stylekit-font-size-h3);padding:.609375rem 1.015625rem}.sn-component .sk-input.neutral.featured:before,.sn-component .sk-notification.neutral.featured:before{opacity:1}.sn-component .sk-input.info,.sn-component .sk-notification.info{background-color:#086dd6;background-color:var(--sn-stylekit-info-color);border-color:#086dd6;border-color:var(--sn-stylekit-info-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);color:#fff;color:var(--sn-stylekit-info-contrast-color);overflow:hidden;position:relative}.sn-component .sk-input.info *,.sn-component .sk-notification.info *{position:relative}.sn-component .sk-input.info:before,.sn-component .sk-notification.info:before{background-color:#086dd6;background-color:var(--sn-stylekit-info-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);content:"";height:100%;left:0;opacity:1;position:absolute;top:0;width:100%}.sn-component .sk-input.info:after,.sn-component .sk-notification.info:after{border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);box-shadow:inset 0 0 0 1px;color:#086dd6;color:var(--sn-stylekit-info-color);content:"";display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.sn-component .sk-input.info.no-bg,.sn-component .sk-notification.info.no-bg{background-color:transparent}.sn-component .sk-input.info.no-bg:before,.sn-component .sk-notification.info.no-bg:before{content:none}.sn-component .sk-input.info.featured,.sn-component .sk-notification.info.featured{border:none;font-size:.89375rem;font-size:var(--sn-stylekit-font-size-h3);padding:.609375rem 1.015625rem}.sn-component .sk-input.info.featured:before,.sn-component .sk-notification.info.featured:before{opacity:1}.sn-component .sk-input.warning,.sn-component .sk-notification.warning{background-color:#f6a200;background-color:var(--sn-stylekit-warning-color);border-color:#f6a200;border-color:var(--sn-stylekit-warning-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);color:#fff;color:var(--sn-stylekit-warning-contrast-color);overflow:hidden;position:relative}.sn-component .sk-input.warning *,.sn-component .sk-notification.warning *{position:relative}.sn-component .sk-input.warning:before,.sn-component .sk-notification.warning:before{background-color:#f6a200;background-color:var(--sn-stylekit-warning-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);content:"";height:100%;left:0;opacity:1;position:absolute;top:0;width:100%}.sn-component .sk-input.warning:after,.sn-component .sk-notification.warning:after{border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);box-shadow:inset 0 0 0 1px;color:#f6a200;color:var(--sn-stylekit-warning-color);content:"";display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.sn-component .sk-input.warning.no-bg,.sn-component .sk-notification.warning.no-bg{background-color:transparent}.sn-component .sk-input.warning.no-bg:before,.sn-component .sk-notification.warning.no-bg:before{content:none}.sn-component .sk-input.warning.featured,.sn-component .sk-notification.warning.featured{border:none;font-size:.89375rem;font-size:var(--sn-stylekit-font-size-h3);padding:.609375rem 1.015625rem}.sn-component .sk-input.warning.featured:before,.sn-component .sk-notification.warning.featured:before{opacity:1}.sn-component .sk-input.danger,.sn-component .sk-notification.danger{background-color:#f80324;background-color:var(--sn-stylekit-danger-color);border-color:#f80324;border-color:var(--sn-stylekit-danger-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);color:#fff;color:var(--sn-stylekit-danger-contrast-color);overflow:hidden;position:relative}.sn-component .sk-input.danger *,.sn-component .sk-notification.danger *{position:relative}.sn-component .sk-input.danger:before,.sn-component .sk-notification.danger:before{background-color:#f80324;background-color:var(--sn-stylekit-danger-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);content:"";height:100%;left:0;opacity:1;position:absolute;top:0;width:100%}.sn-component .sk-input.danger:after,.sn-component .sk-notification.danger:after{border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);box-shadow:inset 0 0 0 1px;color:#f80324;color:var(--sn-stylekit-danger-color);content:"";display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.sn-component .sk-input.danger.no-bg,.sn-component .sk-notification.danger.no-bg{background-color:transparent}.sn-component .sk-input.danger.no-bg:before,.sn-component .sk-notification.danger.no-bg:before{content:none}.sn-component .sk-input.danger.featured,.sn-component .sk-notification.danger.featured{border:none;font-size:.89375rem;font-size:var(--sn-stylekit-font-size-h3);padding:.609375rem 1.015625rem}.sn-component .sk-input.danger.featured:before,.sn-component .sk-notification.danger.featured:before{opacity:1}.sn-component .sk-input.success,.sn-component .sk-notification.success{background-color:#2b9612;background-color:var(--sn-stylekit-success-color);border-color:#2b9612;border-color:var(--sn-stylekit-success-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);color:#fff;color:var(--sn-stylekit-success-contrast-color);overflow:hidden;position:relative}.sn-component .sk-input.success *,.sn-component .sk-notification.success *{position:relative}.sn-component .sk-input.success:before,.sn-component .sk-notification.success:before{background-color:#2b9612;background-color:var(--sn-stylekit-success-color);border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);content:"";height:100%;left:0;opacity:1;position:absolute;top:0;width:100%}.sn-component .sk-input.success:after,.sn-component .sk-notification.success:after{border-radius:2px;border-radius:var(--sn-stylekit-general-border-radius);box-shadow:inset 0 0 0 1px;color:#2b9612;color:var(--sn-stylekit-success-color);content:"";display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.sn-component .sk-input.success.no-bg,.sn-component .sk-notification.success.no-bg{background-color:transparent}.sn-component .sk-input.success.no-bg:before,.sn-component .sk-notification.success.no-bg:before{content:none}.sn-component .sk-input.success.featured,.sn-component .sk-notification.success.featured{border:none;font-size:.89375rem;font-size:var(--sn-stylekit-font-size-h3);padding:.609375rem 1.015625rem}.sn-component .sk-input.success.featured:before,.sn-component .sk-notification.success.featured:before{opacity:1}.sn-component .sk-notification{cursor:default;margin:1.1375rem 0;padding:.89375rem .8125rem;text-align:left}.sn-component .sk-notification.one-line{padding:0 .325rem}.sn-component .sk-notification.stretch{width:100%}.sn-component .sk-notification.dashed{border-style:dashed;border-width:2px}.sn-component .sk-notification.dashed:after{box-shadow:none}.sn-component .sk-notification .sk-notification-title{font-size:1.05625rem;font-size:var(--sn-stylekit-font-size-h1);font-weight:700;line-height:1.54375rem}.sn-component .sk-notification .sk-notification-text{font-size:.8125rem;font-size:var(--sn-stylekit-font-size-p);font-weight:400;line-height:1.21875rem;text-align:left}.sn-component .sk-circle{background-color:#f6f6f6;background-color:var(--sn-stylekit-contrast-background-color);border:1px solid #2e2e2e;border-color:var(--sn-stylekit-contrast-foreground-color);cursor:pointer;flex-shrink:0;padding:0}.sn-component .sk-circle,.sn-component .sk-circle:after,.sn-component .sk-circle:before{border-radius:50%!important}.sn-component .sk-circle.small{height:11px;width:11px}.sn-component .sk-spinner{-webkit-animation:rotate .8s linear infinite;animation:rotate .8s linear infinite;border:1px solid #989898;border:1px solid var(--sn-stylekit-neutral-color);border-radius:50%;border-right:1px solid transparent}.sn-component .sk-spinner.small{height:12px;width:12px}.sn-component .sk-spinner.info-contrast{border-color:#fff transparent #fff #fff}.sn-component .sk-spinner.info{border-color:#086dd6 transparent #086dd6 #086dd6}.sn-component .sk-spinner.warning{border-color:#f6a200 transparent #f6a200 #f6a200}.sn-component .sk-spinner.danger{border-color:#f80324 transparent #f80324 #f80324}.sn-component .sk-spinner.success{border-color:#2b9612 transparent #2b9612 #2b9612}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.sn-component .sk-app-bar{align-items:center;background-color:#f6f6f6;background-color:var(--sn-stylekit-contrast-background-color);border:1px solid #e3e3e3;border:1px solid var(--sn-stylekit-contrast-border-color);color:#2e2e2e;color:var(--sn-stylekit-contrast-foreground-color);display:flex;height:1.625rem;justify-content:space-between;padding:0 .65rem;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:100%}.sn-component .sk-app-bar.no-edges{border-left:0;border-right:0}.sn-component .sk-app-bar.no-bottom-edge{border-bottom:0}.sn-component .sk-app-bar .left,.sn-component .sk-app-bar .right{display:flex;height:100%}.sn-component .sk-app-bar .sk-app-bar-item{align-items:center;cursor:pointer;display:flex;flex-grow:1;justify-content:center}.sn-component .sk-app-bar .sk-app-bar-item:not(:first-child){margin-left:.8125rem}.sn-component .sk-app-bar .sk-app-bar-item.border{border-left:1px solid #e3e3e3;border-left:1px solid var(--sn-stylekit-contrast-border-color)}.sn-component .sk-app-bar .sk-app-bar-item>.sk-app-bar-item-column{align-items:center;display:flex;height:100%}.sn-component .sk-app-bar .sk-app-bar-item>.sk-app-bar-item-column:not(:first-child){margin-left:.40625rem}.sn-component .sk-app-bar .sk-app-bar-item>.sk-app-bar-item-column.underline{border-bottom:2px solid #086dd6;border-bottom:2px solid var(--sn-stylekit-info-color)}.sn-component .sk-app-bar .sk-app-bar-item.no-pointer{cursor:default}.sn-component .sk-app-bar .sk-app-bar-item:hover>.sk-app-bar-item-column>.sk-label:not(.subtle),.sn-component .sk-app-bar .sk-app-bar-item:hover>.sk-app-bar-item-column>.sk-sublabel:not(.subtle),.sn-component .sk-app-bar .sk-app-bar-item:hover>.sk-label:not(.subtle),.sn-component .sk-app-bar .sk-app-bar-item:hover>.sk-sublabel:not(.subtle),.sn-component .sk-app-bar .sk-panel-section .sk-app-bar-item:hover>.sk-app-bar-item-column>.sk-panel-section-subtitle:not(.subtle),.sn-component .sk-app-bar .sk-panel-section .sk-app-bar-item:hover>.sk-panel-section-subtitle:not(.subtle),.sn-component .sk-panel-section .sk-app-bar .sk-app-bar-item:hover>.sk-app-bar-item-column>.sk-panel-section-subtitle:not(.subtle),.sn-component .sk-panel-section .sk-app-bar .sk-app-bar-item:hover>.sk-panel-section-subtitle:not(.subtle){color:#086dd6;color:var(--sn-stylekit-info-color)}.sn-component .sk-app-bar .sk-app-bar-item>.sk-app-bar-item-column>.sk-label,.sn-component .sk-app-bar .sk-app-bar-item>.sk-label,.sn-component .sk-app-bar .sk-panel-section .sk-app-bar-item>.sk-app-bar-item-column>.sk-panel-section-subtitle,.sn-component .sk-app-bar .sk-panel-section .sk-app-bar-item>.sk-panel-section-subtitle,.sn-component .sk-panel-section .sk-app-bar .sk-app-bar-item>.sk-app-bar-item-column>.sk-panel-section-subtitle,.sn-component .sk-panel-section .sk-app-bar .sk-app-bar-item>.sk-panel-section-subtitle{font-size:.73125rem;font-size:var(--sn-stylekit-font-size-h5);font-weight:700;white-space:nowrap}.sn-component .sk-app-bar .sk-app-bar-item>.sk-app-bar-item-column>.sk-sublabel,.sn-component .sk-app-bar .sk-app-bar-item>.sk-sublabel{font-size:.73125rem;font-size:var(--sn-stylekit-font-size-h5);font-weight:400;white-space:nowrap}.sn-component .sk-app-bar .sk-app-bar-item .subtle{font-weight:400;opacity:.6}.sn-component .sk-panel-table{display:flex;flex-wrap:wrap;padding-left:1px;padding-top:1px}.sn-component .sk-panel-table .sk-panel-table-item{border:1px solid #dfe1e4;border:1px solid var(--sn-stylekit-border-color);display:flex;flex:45% 1;flex-flow:wrap;flex-direction:column;justify-content:space-between;margin-left:-1px;margin-top:-1px;padding:.8125rem}.sn-component .sk-panel-table .sk-panel-table-item img{margin-bottom:.8125rem;max-width:100%}.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-content{display:flex;flex-direction:row}.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-column{align-items:center}.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-column.stretch{width:100%}.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-column:not(:first-child){padding-left:.609375rem}.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-column.quarter{flex-basis:25%}.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-column.three-quarters{flex-basis:75%}.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-footer{margin-top:1.015625rem}.sn-component .sk-panel-table .sk-panel-table-item.no-border{border:none}.sn-component .sk-modal{align-items:center;background-color:transparent;bottom:0;color:#2e2e2e;color:var(--sn-stylekit-contrast-foreground-color);display:flex;height:100vh;justify-content:center;left:0;margin-left:auto;margin-right:auto;position:fixed;right:0;top:0;width:100vw;z-index:10000}.sn-component .sk-modal .sn-component,.sn-component .sk-modal .sn-component .sk-panel{height:100%}.sn-component .sk-modal.auto-height>.sk-modal-content{height:auto!important}.sn-component .sk-modal.large>.sk-modal-content{height:600px;width:900px}.sn-component .sk-modal.medium>.sk-modal-content{height:500px;width:700px}.sn-component .sk-modal.small>.sk-modal-content{height:344px;width:700px}.sn-component .sk-modal .sk-modal-background{background-color:#f6f6f6;background-color:var(--sn-stylekit-contrast-background-color);height:100%;opacity:.7;position:absolute;width:100%;z-index:-1}.sn-component .sk-modal>.sk-modal-content{box-shadow:0 2px 35px 0 rgba(0,0,0,.19);min-width:300px;overflow-y:auto;padding:0;width:auto}@-webkit-keyframes slide-down{0%{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slide-down{0%{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.sn-component .slide-down-animation,.sn-component .sn-dropdown-menu-list,.sn-component .sn-select-popover{-webkit-animation:slide-down .2s ease;animation:slide-down .2s ease}.sn-component .no-border{border:none}.sn-component .border-0,.sn-component .sn-button,.sn-component .sn-dropdown-menu,.sn-component .sn-select,.sn-component .sn-select-button,.sn-component .sn-select-popover{border-width:0}.sn-component .border-1,.sn-component .sn-button.outlined,.sn-component .sn-dropdown-menu,.sn-component .sn-icon-button,.sn-component .sn-select{border-width:1px}.sn-component .border-2{border-width:2px}.sn-component .border-b-1{border-bottom-width:1px}.sn-component .border-main,.sn-component .sn-button.outlined,.sn-component .sn-dropdown-menu,.sn-component .sn-dropdown-menu-list,.sn-component .sn-icon-button,.sn-component .sn-select,.sn-component .sn-select-list,.sn-component .sn-select-popover{border-color:#dfe1e4;border-color:var(--sn-stylekit-border-color)}.sn-component .border-background{border-color:#fff;border-color:var(--sn-stylekit-background-color)}.sn-component .border-transparent{border-color:transparent}.sn-component .border-info{border-color:#086dd6;border-color:var(--sn-stylekit-info-color)}.sn-component .border-neutral{border-color:#989898;border-color:var(--sn-stylekit-neutral-color)}.sn-component .border-rounded-md{border-radius:.375rem}.sn-component .rounded,.sn-component .sn-button,.sn-component .sn-dropdown-menu,.sn-component .sn-dropdown-menu-list,.sn-component .sn-select,.sn-component .sn-select-list,.sn-component .sn-select-popover{border-radius:.25rem}.sn-component .rounded-full,.sn-component .sn-icon-button{border-radius:9999px}.sn-component .border-solid,.sn-component .sn-button,.sn-component .sn-dropdown-menu,.sn-component .sn-icon-button,.sn-component .sn-select{border-style:solid}.sn-component .border-bottom-solid{border-bottom-style:solid}.sn-component .border-box,.sn-component .sn-select{box-sizing:border-box}.sn-component .focus-within\:ring-info:focus-within,.sn-component .focus\:ring-info:focus,.sn-component .ring-info,.sn-component .sn-icon-button:focus{box-shadow:0 0 0 2px #086dd6;box-shadow:0 0 0 2px var(--sn-stylekit-info-color)}.sn-component .focus\:inner-ring-info:focus,.sn-component .inner-ring-info{box-shadow:inset 0 0 0 2px #086dd6;box-shadow:inset 0 0 0 2px var(--sn-stylekit-info-color)}.sn-component .shadow-overlay{box-shadow:0 4px 24px 0 #00000029}.sn-component .border-dark-red{border-color:#cc2128;border-color:var(--sn-stylekit-dark-red)}.sn-component .border-bottom-1-gray{border-bottom-color:#dfe1e4;border-bottom-color:var(--sn-stylekit-border-color)}.sn-component .bg-default,.sn-component .sn-button.outlined,.sn-component .sn-dropdown-menu,.sn-component .sn-dropdown-menu-list,.sn-component .sn-select,.sn-component .sn-select-list{background-color:#fff;background-color:var(--sn-stylekit-background-color)}.sn-component .bg-contrast,.sn-component .focus\:bg-contrast:focus,.sn-component .hover\:bg-contrast:hover,.sn-component .sn-icon-button:focus,.sn-component .sn-icon-button:hover{background-color:#f6f6f6;background-color:var(--sn-stylekit-contrast-background-color)}.sn-component .bg-border{background-color:#dfe1e4;background-color:var(--sn-stylekit-border-color)}.sn-component .bg-secondary-contrast,.sn-component .focus\:bg-secondary-contrast:focus,.sn-component .hover\:bg-secondary-contrast:hover{background-color:#e3e3e3;background-color:var(--sn-stylekit-secondary-contrast-background-color)}.sn-component .bg-clip-padding,.sn-component .sn-icon-button{background-clip:padding-box}.sn-component .bg-transparent,.sn-component .sn-icon-button{background-color:transparent}.sn-component .bg-neutral{background-color:#989898;background-color:var(--sn-stylekit-neutral-color)}.sn-component .color-neutral,.sn-component .sn-icon-button{color:#989898;color:var(--sn-stylekit-neutral-color)}.sn-component .bg-text{background-color:#2e2e2e;background-color:var(--sn-stylekit-contrast-foreground-color)}.sn-component .color-text,.sn-component .focus\:color-text:focus,.sn-component .hover\:color-text:hover,.sn-component .sn-button.outlined,.sn-component .sn-dropdown-menu,.sn-component .sn-dropdown-menu-list,.sn-component .sn-icon-button:focus,.sn-component .sn-icon-button:hover,.sn-component .sn-select,.sn-component .sn-select-list{color:#2e2e2e;color:var(--sn-stylekit-contrast-foreground-color)}.sn-component .bg-foreground{background-color:#000;background-color:var(--sn-stylekit-foreground-color)}.sn-component .color-foreground{color:#000;color:var(--sn-stylekit-foreground-color)}.sn-component .bg-danger{background-color:#f80324;background-color:var(--sn-stylekit-danger-color)}.sn-component .color-danger{color:#f80324;color:var(--sn-stylekit-danger-color)}.sn-component .bg-info,.sn-component .sn-button.info,.sn-component .sn-icon-button.info{background-color:#086dd6;background-color:var(--sn-stylekit-info-color)}.sn-component .color-info{color:#086dd6;color:var(--sn-stylekit-info-color)}.sn-component .bg-info-contrast{background-color:#fff;background-color:var(--sn-stylekit-info-contrast-color)}.sn-component .color-info-contrast,.sn-component .sn-button.info,.sn-component .sn-icon-button.info,.sn-component .sn-icon-button.info:focus,.sn-component .sn-icon-button.info:hover{color:#fff;color:var(--sn-stylekit-info-contrast-color)}.sn-component .bg-info-dark,.sn-component .focus\:bg-info-dark:focus,.sn-component .hover\:bg-info-dark:hover,.sn-component .sn-icon-button.info:focus,.sn-component .sn-icon-button.info:hover{background-color:#065cb5;background-color:var(--sn-stylekit-info-color-darkened)}.sn-component .color-info-dark{color:#065cb5;color:var(--sn-stylekit-info-color-darkened)}.sn-component .bg-grey-1{background-color:#72767e;background-color:var(--sn-stylekit-grey-1)}.sn-component .color-grey-1{color:#72767e;color:var(--sn-stylekit-grey-1)}.sn-component .bg-grey-2{background-color:#bbbec4;background-color:var(--sn-stylekit-grey-2)}.sn-component .color-grey-2{color:#bbbec4;color:var(--sn-stylekit-grey-2)}.sn-component .bg-grey-3{background-color:#dfe1e4;background-color:var(--sn-stylekit-grey-3)}.sn-component .color-grey-3{color:#dfe1e4;color:var(--sn-stylekit-grey-3)}.sn-component .bg-grey-4{background-color:#eeeff1;background-color:var(--sn-stylekit-grey-4)}.sn-component .color-grey-4{color:#eeeff1;color:var(--sn-stylekit-grey-4)}.sn-component .bg-grey-4-opacity-variant{background-color:#bbbec43d;background-color:var(--sn-stylekit-grey-4-opacity-variant)}.sn-component .color-grey-4-opacity-variant{color:#bbbec43d;color:var(--sn-stylekit-grey-4-opacity-variant)}.sn-component .bg-grey-5{background-color:#f4f5f7;background-color:var(--sn-stylekit-grey-5)}.sn-component .color-grey-5{color:#f4f5f7;color:var(--sn-stylekit-grey-5)}.sn-component .bg-grey-6{background-color:#e5e5e5;background-color:var(--sn-stylekit-grey-6)}.sn-component .color-grey-6{color:#e5e5e5;color:var(--sn-stylekit-grey-6)}.sn-component .bg-grey-super-light{background-color:#f9f9f9;background-color:var(--sn-stylekit-grey-super-light)}.sn-component .color-grey-super-light{color:#f9f9f9;color:var(--sn-stylekit-grey-super-light)}.sn-component .bg-black{background-color:#19191c;background-color:var(--sn-stylekit-black)}.sn-component .color-black{color:#19191c;color:var(--sn-stylekit-black)}.sn-component .bg-white{background-color:#fff;background-color:var(--sn-stylekit-white)}.sn-component .color-white{color:#fff;color:var(--sn-stylekit-white)}.sn-component .bg-dark-red{background-color:#cc2128;background-color:var(--sn-stylekit-dark-red)}.sn-component .color-dark-red{color:#cc2128;color:var(--sn-stylekit-dark-red)}.sn-component .bg-accessory-tint-1{background-color:#086dd6;background-color:var(--sn-stylekit-accessory-tint-color-1)}.sn-component .color-accessory-tint-1{color:#086dd6;color:var(--sn-stylekit-accessory-tint-color-1)}.sn-component .bg-accessory-tint-2{background-color:#ea6595;background-color:var(--sn-stylekit-accessory-tint-color-2)}.sn-component .color-accessory-tint-2{color:#ea6595;color:var(--sn-stylekit-accessory-tint-color-2)}.sn-component .bg-accessory-tint-3{background-color:#ebad00;background-color:var(--sn-stylekit-accessory-tint-color-3)}.sn-component .color-accessory-tint-3{color:#ebad00;color:var(--sn-stylekit-accessory-tint-color-3)}.sn-component .bg-accessory-tint-4{background-color:#7049cf;background-color:var(--sn-stylekit-accessory-tint-color-4)}.sn-component .color-accessory-tint-4{color:#7049cf;color:var(--sn-stylekit-accessory-tint-color-4)}.sn-component .bg-accessory-tint-5{background-color:#1aa772;background-color:var(--sn-stylekit-accessory-tint-color-5)}.sn-component .color-accessory-tint-5{color:#1aa772;color:var(--sn-stylekit-accessory-tint-color-5)}.sn-component .bg-accessory-tint-6{background-color:#f28c52;background-color:var(--sn-stylekit-accessory-tint-color-6)}.sn-component .color-accessory-tint-6{color:#f28c52;color:var(--sn-stylekit-accessory-tint-color-6)}.sn-component .selected\:bg-color[aria-selected=true],.sn-component .selected\:bg-color[data-selected],.sn-component .sn-dropdown-menu-list-item[aria-selected=true],.sn-component .sn-dropdown-menu-list-item[data-selected],.sn-component .sn-select-list-option[aria-selected=true],.sn-component .sn-select-list-option[data-selected]{background-color:#f4f5f7;background-color:var(--sn-stylekit-list-item-highlight-color)}.sn-component .selected\:fg-color[aria-selected=true],.sn-component .selected\:fg-color[data-selected],.sn-component .sn-dropdown-menu-list-item[aria-selected=true],.sn-component .sn-dropdown-menu-list-item[data-selected],.sn-component .sn-select-list-option[aria-selected=true],.sn-component .sn-select-list-option[data-selected]{color:#2e2e2e;color:var(--sn-stylekit-contrast-foreground-color)}.sn-component .inline-flex,.sn-component .sn-dropdown-menu,.sn-component .sn-select,.sn-component .sn-select-button{display:inline-flex}.sn-component .block{display:block}.sn-component .flex,.sn-component .sn-dropdown-menu-list-item,.sn-component .sn-icon-button{display:flex}.sn-component .flex-col{flex-direction:column}.sn-component .flex-row{flex-direction:row}.sn-component .flex-grow{flex-grow:1}.sn-component .flex-shrink{flex-shrink:1}.sn-component .flex-wrap{flex-wrap:wrap}.sn-component .grid{display:grid}.sn-component .items-center,.sn-component .sn-dropdown-menu,.sn-component .sn-dropdown-menu-list-item,.sn-component .sn-icon-button,.sn-component .sn-select,.sn-component .sn-select-button{align-items:center}.sn-component .items-start{align-items:flex-start}.sn-component .items-stretch{align-items:stretch}.sn-component .justify-center,.sn-component .sn-dropdown-menu,.sn-component .sn-icon-button,.sn-component .sn-select,.sn-component .sn-select-button{justify-content:center}.sn-component .justify-between{justify-content:space-between}.sn-component .justify-start{justify-content:flex-start}.sn-component .justify-end{justify-content:flex-end}.sn-component .gap-1{grid-gap:.25rem;gap:.25rem}.sn-component .gap-2{grid-gap:.5rem;gap:.5rem}.sn-component .gap-3{grid-gap:.75rem;gap:.75rem}.sn-component .gap-4{grid-gap:1rem;gap:1rem}.sn-component .absolute,.sn-component .sn-dropdown-menu-list,.sn-component .sn-full-screen{position:absolute}.sn-component .fixed{position:fixed}.sn-component .origin-top-right,.sn-component .sn-dropdown-menu-list,.sn-component .sn-select-list{-webkit-transform-origin:top right;transform-origin:top right}.sn-component .overflow-auto{overflow:auto}.sn-component .overflow-y-auto{overflow-y:auto}.sn-component .overflow-hidden{overflow:hidden}.sn-component .overflow-ellipsis{text-overflow:ellipsis}.sn-component .flex-basis-55{flex-basis:13.75rem}.sn-component .focus\:brightness-130:focus,.sn-component .hover\:brightness-130:hover,.sn-component .sn-button:focus,.sn-component .sn-button:hover{-webkit-filter:brightness(130%);filter:brightness(130%)}.sn-component .focus\:bg-highlight:focus,.sn-component .hover\:bg-highlight:hover,.sn-component .sn-button.outlined:focus,.sn-component .sn-button.outlined:hover,.sn-component .sn-dropdown-menu-list-item:hover,.sn-component .sn-dropdown-menu:hover,.sn-component .sn-select:hover{background-color:#f4f5f7;background-color:var(--sn-stylekit-list-item-highlight-color)}.sn-component .focus\:padded-ring-info:focus{box-shadow:0 0 0 2px #fff,0 0 0 4px #086dd6;box-shadow:0 0 0 2px var(--sn-stylekit-background-color),0 0 0 4px var(--sn-stylekit-info-color)}.sn-component .focus\:border-bottom:focus{border-bottom:2px solid #086dd6;border-bottom:2px solid var(--sn-stylekit-info-color)}.sn-component .focus-within\:padded-ring-info:focus-within{box-shadow:0 0 0 2px #fff,0 0 0 4px #086dd6;box-shadow:0 0 0 2px var(--sn-stylekit-background-color),0 0 0 4px var(--sn-stylekit-info-color)}.sn-component .focus-within\:border-background:focus-within{border-color:#fff;border-color:var(--sn-stylekit-background-color)}.sn-component .box-shadow,.sn-component .box-shadow:focus,.sn-component .box-shadow:focus-within,.sn-component .sn-dropdown-menu-list,.sn-component .sn-dropdown-menu-list:focus,.sn-component .sn-dropdown-menu-list:focus-within,.sn-component .sn-select-popover,.sn-component .sn-select-popover:focus,.sn-component .sn-select-popover:focus-within{box-shadow:0 4px 8px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.04)}.sn-component .focus\:outline-none:focus,.sn-component .sn-button:focus,.sn-component .sn-dropdown-menu-list-item:focus,.sn-component .sn-dropdown-menu-list:focus,.sn-component .sn-dropdown-menu:focus,.sn-component .sn-icon-button:focus,.sn-component .sn-select-button:focus,.sn-component .sn-select-list:focus,.sn-component .sn-select-popover:focus,.sn-component .sn-select:focus{outline:none}.sn-component .focus\:shadow-none:focus,.sn-component .sn-button.outlined:focus,.sn-component .sn-dropdown-menu-list-item:focus,.sn-component .sn-dropdown-menu:focus,.sn-component .sn-select-button:focus,.sn-component .sn-select-list:focus,.sn-component .sn-select-popover:focus,.sn-component .sn-select:focus{box-shadow:none}.sn-component .focus-within\:outline-none:focus-within{outline:none}.sn-component .focus-within\:shadow-none:focus-within{box-shadow:none}.sn-component .capitalize,.sn-component .sn-button{text-transform:capitalize}.sn-component .font-normal,.sn-component .sn-dropdown-menu,.sn-component .sn-dropdown-menu-list,.sn-component .sn-select,.sn-component .sn-select-list-option{font-weight:300}.sn-component .font-bold,.sn-component .sn-button{font-weight:700}.sn-component .text-left{text-align:left}.sn-component .text-center{text-align:center}.sn-component .text-xs{font-size:.75rem;line-height:1rem}.sn-component .sn-dropdown-menu,.sn-component .sn-dropdown-menu-list-item,.sn-component .sn-select,.sn-component .sn-select-list,.sn-component .sn-select-list-option,.sn-component .text-sm{font-size:.875rem;line-height:1.25rem}.sn-component .text-input{font-size:.875rem;line-height:1.125rem}.sn-component .text-base{font-size:1rem}.sn-component .text-lg{font-size:1.125rem;line-height:1.75rem}.sn-component .text-2xl{font-size:1.5rem;line-height:2rem}.sn-component .text-3xl{font-size:1.875rem;line-height:2.25rem}.sn-component .font-medium{font-weight:500}.sn-component .leading-4,.sn-component .sn-dropdown-menu,.sn-component .sn-select{line-height:1rem}.sn-component .whitespace-pre-wrap{white-space:pre-wrap}.sn-component .whitespace-nowrap{white-space:nowrap}.sn-component .h-auto{height:auto}.sn-component .h-full{height:100%}.sn-component .h-100vh,.sn-component .sn-full-screen{height:100vh}.sn-component .h-90vh{height:90vh}.sn-component .h-0{height:0}.sn-component .h-2{height:.5rem}.sn-component .h-3\.5{height:.875rem}.sn-component .h-4{height:1rem}.sn-component .h-4\.5{height:1.125rem}.sn-component .h-5{height:1.25rem}.sn-component .h-6{height:1.5rem}.sn-component .h-7{height:1.75rem}.sn-component .h-8,.sn-component .sn-icon-button{height:2rem}.sn-component .h-9{height:2.25rem}.sn-component .h-10{height:2.5rem}.sn-component .h-14{height:3.5rem}.sn-component .h-18{height:4.5rem}.sn-component .h-25{height:6.25rem}.sn-component .h-1px{height:1px}.sn-component .h-20px{height:20px}.sn-component .min-h-0{min-height:0}.sn-component .min-h-5{min-height:1.25rem}.sn-component .m-h-32,.sn-component .sn-dropdown-menu,.sn-component .sn-dropdown-menu-list-item,.sn-component .sn-select{min-height:2rem}.sn-component .min-h-20px{height:20px}.sn-component .max-h-120{max-height:30rem}.sn-component .m-0,.sn-component .sn-icon-button{margin:0}.sn-component .my-1{margin-bottom:.25rem;margin-top:.25rem}.sn-component .my-2{margin-bottom:.5rem;margin-top:.5rem}.sn-component .my-3{margin-bottom:.75rem;margin-top:.75rem}.sn-component .-mt-1{margin-top:-.25rem}.sn-component .mt-1{margin-top:.25rem}.sn-component .mt-2,.sn-component .sn-dropdown-menu-list,.sn-component .sn-select-popover{margin-top:.5rem}.sn-component .mt-3{margin-top:.75rem}.sn-component .mt-4{margin-top:1rem}.sn-component .mb-1{margin-bottom:.25rem}.sn-component .mb-3{margin-bottom:.75rem}.sn-component .-mr-2{margin-right:-.5rem}.sn-component .mr-1{margin-right:.25rem}.sn-component .mr-1\.5{margin-right:.375rem}.sn-component .mr-2,.sn-component .sn-dropdown-menu-list-item>.sn-icon,.sn-component .sn-dropdown-menu>.sn-icon:first-child{margin-right:.5rem}.sn-component .mr-10{margin-right:2.5rem}.sn-component .ml-1{margin-left:.25rem}.sn-component .ml-1\.5{margin-left:.375rem}.sn-component .ml-2,.sn-component .sn-dropdown-menu>.sn-icon:last-child,.sn-component .sn-select-button>.sn-icon:last-child{margin-left:.5rem}.sn-component .ml-6{margin-left:1.5rem}.sn-component .p-0,.sn-component .sn-icon-button{padding:0}.sn-component .p-2{padding:.5rem}.sn-component .py-1,.sn-component .sn-dropdown-menu,.sn-component .sn-select-button{padding-bottom:.25rem;padding-top:.25rem}.sn-component .py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.sn-component .py-1\.75{padding-bottom:.4375rem;padding-top:.4375rem}.sn-component .py-2,.sn-component .sn-dropdown-menu-list,.sn-component .sn-select-list-option{padding-bottom:.5rem;padding-top:.5rem}.sn-component .py-3{padding-bottom:.75rem;padding-top:.75rem}.sn-component .py-4{padding-bottom:1rem;padding-top:1rem}.sn-component .py-6{padding-bottom:1.5rem;padding-top:1.5rem}.sn-component .py-8{padding-bottom:2rem;padding-top:2rem}.sn-component .px-1{padding-left:.25rem;padding-right:.25rem}.sn-component .px-2,.sn-component .sn-dropdown-menu,.sn-component .sn-dropdown-menu-list-item{padding-left:.5rem;padding-right:.5rem}.sn-component .px-3{padding-left:.75rem;padding-right:.75rem}.sn-component .px-3\.5{padding-left:.875rem;padding-right:.875rem}.sn-component .px-4{padding-left:1rem;padding-right:1rem}.sn-component .px-6{padding-left:1.5rem;padding-right:1.5rem}.sn-component .pt-4{padding-top:1rem}.sn-component .pb-3{padding-bottom:.75rem}.sn-component .pr-2{padding-right:.5rem}.sn-component .pl-1{padding-left:.25rem}.sn-component .sn-dropdown-menu,.sn-component .sn-select,.sn-component .w-auto{width:auto}.sn-component .w-full{width:100%}.sn-component .sn-full-screen,.sn-component .w-100vw{width:100vw}.sn-component .fit-content{width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}.sn-component .w-0{width:0}.sn-component .w-2{width:.5rem}.sn-component .w-3\.5{width:.875rem}.sn-component .w-4{width:1rem}.sn-component .w-5{width:1.25rem}.sn-component .sn-icon-button,.sn-component .w-8{width:2rem}.sn-component .w-25{width:6.25rem}.sn-component .w-30{width:7.5rem}.sn-component .w-55{width:13.75rem}.sn-component .sn-dropdown-menu-list,.sn-component .w-56{width:14rem}.sn-component .w-70{width:17.5rem}.sn-component .w-80{width:20rem}.sn-component .w-103{width:25.75rem}.sn-component .w-125{width:31.25rem}.sn-component .w-160{width:40rem}.sn-component .w-20px{width:20px}.sn-component .min-w-265px,.sn-component .sn-dropdown-menu-list{min-width:265px}.sn-component .min-w-20px{min-width:20px}.sn-component .min-w-0{min-width:0}.sn-component .min-w-4{min-width:1rem}.sn-component .min-w-5{min-width:1.25rem}.sn-component .min-w-20{min-width:5rem}.sn-component .min-w-40{min-width:10rem}.sn-component .min-w-42{min-width:10.5rem}.sn-component .min-w-55{min-width:13.75rem}.sn-component .min-w-80{min-width:20rem}.sn-component .max-w-xs{max-width:20rem}.sn-component .max-w-md{max-width:28rem}.sn-component .max-w-40{max-width:10rem}.sn-component .max-w-125{max-width:31.25rem}.sn-component .max-w-290px{max-width:290px}.sn-component .duration-150{transition-duration:.15s}.sn-component .ease-out{transition-timing-function:ease-out}.sn-component .transition-background{transition-property:background}.sn-component .transition-transform{transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform}.sn-component .cursor-pointer,.sn-component .sn-button,.sn-component .sn-dropdown-menu,.sn-component .sn-dropdown-menu-list-item,.sn-component .sn-icon-button,.sn-component .sn-select,.sn-component .sn-select-button,.sn-component .sn-select-list-option{cursor:pointer}.sn-component .sn-full-screen,.sn-component .top-0,.sn-component .top-left-0{top:0}.sn-component .left-0,.sn-component .sn-full-screen,.sn-component .top-left-0{left:0}.sn-component .-top-10{top:-2.5rem}.sn-component .-left-51{left:-12.75rem}.sn-component .sn-button{font-size:.8125rem;min-height:1.8125rem;padding:.609375rem}.sn-component .sn-button.small{font-size:.7109375rem;padding:.40625rem .609375rem}.sn-component .sn-button.contrast{background-color:#2e2e2e;background-color:var(--sn-stylekit-contrast-foreground-color);color:#f6f6f6;color:var(--sn-stylekit-contrast-background-color)}.sn-component .sn-button.neutral{background-color:#989898;background-color:var(--sn-stylekit-neutral-color);color:#fff;color:var(--sn-stylekit-neutral-contrast-color)}.sn-component .sn-button.warning{background-color:#f6a200;background-color:var(--sn-stylekit-warning-color);color:#fff;color:var(--sn-stylekit-warning-contrast-color)}.sn-component .sn-button.danger{background-color:#f80324;background-color:var(--sn-stylekit-danger-color);color:#fff;color:var(--sn-stylekit-danger-contrast-color)}.sn-component .sn-button.success{background-color:#2b9612;background-color:var(--sn-stylekit-success-color);color:#fff;color:var(--sn-stylekit-success-contrast-color)}.sn-component [data-reach-custom-checkbox-container]{margin:0}.sn-component.no-select{-webkit-user-select:none;-ms-user-select:none;user-select:none}[contenteditable],input,textarea{caret-color:#000;caret-color:var(--sn-stylekit-editor-foreground-color)}.linux-desktop,.linux-web,.windows-desktop,.windows-web{scrollbar-width:thin}.linux-desktop ::-webkit-scrollbar,.linux-web ::-webkit-scrollbar,.windows-desktop ::-webkit-scrollbar,.windows-web ::-webkit-scrollbar{border-left:none;height:18px;width:17px}.linux-desktop ::-webkit-scrollbar-thumb,.linux-web ::-webkit-scrollbar-thumb,.windows-desktop ::-webkit-scrollbar-thumb,.windows-web ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:#dfdfdf;background-color:var(--sn-stylekit-scrollbar-thumb-color);border:4px solid transparent;-webkit-border-radius:10px;-webkit-box-shadow:inset -1px -1px 0 rgba(0,0,0,.05),inset 1px 1px 0 rgba(0,0,0,.05)}.linux-desktop ::-webkit-scrollbar-button,.linux-web ::-webkit-scrollbar-button,.windows-desktop ::-webkit-scrollbar-button,.windows-web ::-webkit-scrollbar-button{display:none;height:0;width:0}.linux-desktop ::-webkit-scrollbar-corner,.linux-web ::-webkit-scrollbar-corner,.windows-desktop ::-webkit-scrollbar-corner,.windows-web ::-webkit-scrollbar-corner{background-color:transparent}:root{--reach-listbox:1}[data-reach-listbox-popover]{background:#fff;border:1px solid rgba(0,0,0,.25);display:block;min-width:-moz-fit-content;min-width:-webkit-min-content;min-width:min-content;outline:none;padding:.25rem 0;position:absolute}[data-reach-listbox-popover]:focus-within{box-shadow:0 0 4px Highlight;outline:4px auto -webkit-focus-ring-color}[data-reach-listbox-popover][hidden]{display:none}[data-reach-listbox-list]{list-style:none;margin:0;padding:0}[data-reach-listbox-list]:focus{box-shadow:none;outline:none}[data-reach-listbox-option]{display:block;margin:0;padding:.25rem .5rem;-webkit-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}[data-reach-listbox-option][data-current-nav]{background:#1672d4;color:#fff}[data-reach-listbox-option][data-current-selected]{font-weight:bolder}[data-reach-listbox-option][data-current-selected][data-confirming]{-webkit-animation:flash .1s;animation:flash .1s;-webkit-animation-iteration-count:1;animation-iteration-count:1}[data-reach-listbox-option][aria-disabled=true]{opacity:.5}[data-reach-listbox-button]{align-items:center;border-color:#d8d8d8 #d1d1d1 #bababa;border-style:solid;border-width:1px;cursor:default;display:inline-flex;justify-content:space-between;padding:1px 10px 2px;-webkit-user-select:none;-ms-user-select:none;user-select:none}[data-reach-listbox-button][aria-disabled=true]{opacity:.5}[data-reach-listbox-arrow]{display:block;font-size:.5em;margin-left:.5rem}[data-reach-listbox-group-label]{display:block;font-weight:bolder;margin:0;padding:.25rem .5rem;-webkit-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}@-webkit-keyframes flash{0%{background:#1159a6;color:#fff;opacity:1}50%{background:inherit;color:inherit;opacity:.5}to{background:#1159a6;color:#fff;opacity:1}}@keyframes flash{0%{background:#1159a6;color:#fff;opacity:1}50%{background:inherit;color:inherit;opacity:.5}to{background:#1159a6;color:#fff;opacity:1}}@font-face{font-display:block;font-family:Material Icons;font-style:normal;font-weight:400;src:url(../../static/media/material-icons.aba5a2a316a1d312db26.woff2) format("woff2"),url(../../static/media/material-icons.824b570fb059ee0a44a9.woff) format("woff")}.material-icons{-webkit-font-feature-settings:"liga";font-feature-settings:"liga";font-family:Material Icons}@font-face{font-display:block;font-family:Material Icons Outlined;font-style:normal;font-weight:400;src:url(../../static/media/material-icons-outlined.5d7deb03b9cecba7d247.woff2) format("woff2"),url(../../static/media/material-icons-outlined.123a7ad6784163c39aaa.woff) format("woff")}.material-icons,.material-icons-outlined{word-wrap:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap}.material-icons-outlined{-webkit-font-feature-settings:"liga";font-feature-settings:"liga";font-family:Material Icons Outlined}@font-face{font-display:block;font-family:Material Icons Round;font-style:normal;font-weight:400;src:url(../../static/media/material-icons-round.7c985a8aea387341edf9.woff2) format("woff2"),url(../../static/media/material-icons-round.159dc8004e17a33f287f.woff) format("woff")}.material-icons-round{-webkit-font-feature-settings:"liga";font-feature-settings:"liga";font-family:Material Icons Round}@font-face{font-display:block;font-family:Material Icons Sharp;font-style:normal;font-weight:400;src:url(../../static/media/material-icons-sharp.25f4d306806e85bc60f6.woff2) format("woff2"),url(../../static/media/material-icons-sharp.77bc1b022b575be35fa7.woff) format("woff")}.material-icons-round,.material-icons-sharp{word-wrap:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;direction:ltr;display:inline-block;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap}.material-icons-sharp{-webkit-font-feature-settings:"liga";font-feature-settings:"liga";font-family:Material Icons Sharp}@font-face{font-display:block;font-family:Material Icons Two Tone;font-style:normal;font-weight:400;src:url(../../static/media/material-icons-two-tone.7e94e72135150c6b387c.woff2) format("woff2"),url(../../static/media/material-icons-two-tone.ee71463e28071436d096.woff) format("woff")}.material-icons-two-tone{word-wrap:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-font-feature-settings:"liga";font-feature-settings:"liga";direction:ltr;display:inline-block;font-family:Material Icons Two Tone;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap}@font-face{font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(../../static/media/KaTeX_AMS-Regular.73ea273a72f4aca30ca5.woff2) format("woff2"),url(../../static/media/KaTeX_AMS-Regular.d562e886c52f12660a41.woff) format("woff"),url(../../static/media/KaTeX_AMS-Regular.853be92419a6c3766b9a.ttf) format("truetype")}@font-face{font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(../../static/media/KaTeX_Caligraphic-Bold.a1abf90dfd72792a577a.woff2) format("woff2"),url(../../static/media/KaTeX_Caligraphic-Bold.d757c535a2e5902f1325.woff) format("woff"),url(../../static/media/KaTeX_Caligraphic-Bold.7489a2fbfb9bfe704420.ttf) format("truetype")}@font-face{font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(../../static/media/KaTeX_Caligraphic-Regular.d6484fce1ef428d5bd94.woff2) format("woff2"),url(../../static/media/KaTeX_Caligraphic-Regular.db074fa22cf224af93d7.woff) format("woff"),url(../../static/media/KaTeX_Caligraphic-Regular.7e873d3833eb108a0758.ttf) format("truetype")}@font-face{font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(../../static/media/KaTeX_Fraktur-Bold.931d67ea207ab37ee693.woff2) format("woff2"),url(../../static/media/KaTeX_Fraktur-Bold.354501bac435c3264834.woff) format("woff"),url(../../static/media/KaTeX_Fraktur-Bold.4c761b3711973ab04edf.ttf) format("truetype")}@font-face{font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(../../static/media/KaTeX_Fraktur-Regular.172d3529b26f8cedef6b.woff2) format("woff2"),url(../../static/media/KaTeX_Fraktur-Regular.6fdf0ac577be0ba82a4c.woff) format("woff"),url(../../static/media/KaTeX_Fraktur-Regular.ed305b5434865e06ffde.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(../../static/media/KaTeX_Main-Bold.39890742bc957b368704.woff2) format("woff2"),url(../../static/media/KaTeX_Main-Bold.0c3b8929d377c0e9b2f3.woff) format("woff"),url(../../static/media/KaTeX_Main-Bold.8169508bf58f8bd92ad8.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(../../static/media/KaTeX_Main-BoldItalic.20f389c4120be058d80a.woff2) format("woff2"),url(../../static/media/KaTeX_Main-BoldItalic.428978dc7837d46de091.woff) format("woff"),url(../../static/media/KaTeX_Main-BoldItalic.828abcb200061cffbaae.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(../../static/media/KaTeX_Main-Italic.fe2176f79edaa716e621.woff2) format("woff2"),url(../../static/media/KaTeX_Main-Italic.fd947498bc16392e76c2.woff) format("woff"),url(../../static/media/KaTeX_Main-Italic.fa675e5e4bec9eb250b6.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(../../static/media/KaTeX_Main-Regular.f650f111a3b890d116f1.woff2) format("woff2"),url(../../static/media/KaTeX_Main-Regular.4f35fbcc9ee8614c2bcc.woff) format("woff"),url(../../static/media/KaTeX_Main-Regular.9eba1d77abcf2aa6e94e.ttf) format("truetype")}@font-face{font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(../../static/media/KaTeX_Math-BoldItalic.dcbcbd93bac0470b462d.woff2) format("woff2"),url(../../static/media/KaTeX_Math-BoldItalic.3f07ed67f06c720120ce.woff) format("woff"),url(../../static/media/KaTeX_Math-BoldItalic.bf2d440b3a42ea78a998.ttf) format("truetype")}@font-face{font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(../../static/media/KaTeX_Math-Italic.6d3d25f4820d0da8f01f.woff2) format("woff2"),url(../../static/media/KaTeX_Math-Italic.96759856b4e70f3a8338.woff) format("woff"),url(../../static/media/KaTeX_Math-Italic.8a5f936332e8028c7278.ttf) format("truetype")}@font-face{font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(../../static/media/KaTeX_SansSerif-Bold.95591a929f0d32aa282a.woff2) format("woff2"),url(../../static/media/KaTeX_SansSerif-Bold.b9cd458ac6d5889ff9c3.woff) format("woff"),url(../../static/media/KaTeX_SansSerif-Bold.5b49f4993ae22d7975b4.ttf) format("truetype")}@font-face{font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(../../static/media/KaTeX_SansSerif-Italic.7d393d382f3e7fb1c637.woff2) format("woff2"),url(../../static/media/KaTeX_SansSerif-Italic.8d593cfaa96238d5e2f8.woff) format("woff"),url(../../static/media/KaTeX_SansSerif-Italic.b257a18c016f37ee4543.ttf) format("truetype")}@font-face{font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(../../static/media/KaTeX_SansSerif-Regular.cd5e231e0cc53b2cb2c0.woff2) format("woff2"),url(../../static/media/KaTeX_SansSerif-Regular.02271ec5cb9f5b4588ac.woff) format("woff"),url(../../static/media/KaTeX_SansSerif-Regular.2f7bc363fc5424ebda59.ttf) format("truetype")}@font-face{font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(../../static/media/KaTeX_Script-Regular.c81d1b2a4b75d3eded60.woff2) format("woff2"),url(../../static/media/KaTeX_Script-Regular.073b3402d036714b4370.woff) format("woff"),url(../../static/media/KaTeX_Script-Regular.fc9ba5249878cd8f8d88.ttf) format("truetype")}@font-face{font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(../../static/media/KaTeX_Size1-Regular.6eec866c69313624be60.woff2) format("woff2"),url(../../static/media/KaTeX_Size1-Regular.0108e89c9003e8c14ea3.woff) format("woff"),url(../../static/media/KaTeX_Size1-Regular.6de7d4b539221a49e9e2.ttf) format("truetype")}@font-face{font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(../../static/media/KaTeX_Size2-Regular.2960900c4f271311eb36.woff2) format("woff2"),url(../../static/media/KaTeX_Size2-Regular.3a99e70aee4076660d38.woff) format("woff"),url(../../static/media/KaTeX_Size2-Regular.57f5c1837853986ea1db.ttf) format("truetype")}@font-face{font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(../../static/media/KaTeX_Size3-Regular.e1951519f6f0596f7356.woff2) format("woff2"),url(../../static/media/KaTeX_Size3-Regular.7947224e8a9914fa332b.woff) format("woff"),url(../../static/media/KaTeX_Size3-Regular.8d6b6822586eea3d3b20.ttf) format("truetype")}@font-face{font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(../../static/media/KaTeX_Size4-Regular.e418bf257af1052628d8.woff2) format("woff2"),url(../../static/media/KaTeX_Size4-Regular.aeffd8025cba3647f1a6.woff) format("woff"),url(../../static/media/KaTeX_Size4-Regular.4ad7c7e8bb8d10a34bb7.ttf) format("truetype")}@font-face{font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(../../static/media/KaTeX_Typewriter-Regular.c295e7f71970f03c0549.woff2) format("woff2"),url(../../static/media/KaTeX_Typewriter-Regular.4c6b94fd1d07f8beff7c.woff) format("woff"),url(../../static/media/KaTeX_Typewriter-Regular.c5c02d763c89380dcb4e.ttf) format("truetype")}.katex{text-rendering:auto;font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;text-indent:0}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.15.2"}.katex .katex-mathml{clip:rect(1px,1px,1px,1px);border:0;height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.newline{display:block}.katex .base{position:relative;white-space:nowrap;width:-webkit-min-content;width:min-content}.katex .base,.katex .strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .hbox{width:100%}.katex .hbox,.katex .thinbox{display:inline-flex;flex-direction:row}.katex .thinbox{max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline,.katex .hline,.katex .mfrac .frac-line,.katex .overline .overline-line,.katex .rule,.katex .underline .underline-line{min-height:1px}.katex .mspace{display:inline-block}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.inner,.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .clap>.fix,.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .clap>.inner,.katex .rlap>.inner{left:0}.katex .clap>.inner>span{margin-left:-50%;margin-right:50%}.katex .rule{border:0 solid;display:inline-block;position:relative}.katex .hline,.katex .overline .overline-line,.katex .underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.root{margin-left:.27777778em;margin-right:-.55555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.83333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.16666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.33333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.66666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.45666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .sizing.reset-size2.size11{font-size:4.14666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.71428571em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.85714286em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.14285714em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.28571429em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.42857143em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.71428571em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.05714286em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.46857143em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:2.96285714em}.katex .fontsize-ensurer.reset-size3.size11,.katex .sizing.reset-size3.size11{font-size:3.55428571em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.55555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.66666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.77777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.88888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.11111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.33333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.30444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .sizing.reset-size5.size11{font-size:2.76444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.41666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.58333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.66666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.83333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.72833333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .sizing.reset-size7.size11{font-size:2.07333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.34722222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.41666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.48611111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.55555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.69444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.83333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.44027778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .sizing.reset-size8.size11{font-size:1.72777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.28935185em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.34722222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.40509259em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.46296296em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.52083333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.5787037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.69444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.83333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.20023148em}.katex .fontsize-ensurer.reset-size9.size11,.katex .sizing.reset-size9.size11{font-size:1.43981481em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.24108004em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.28929605em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.33751205em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.38572806em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.43394407em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.48216008em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.57859209em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.69431051em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.83317261em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .sizing.reset-size10.size11{font-size:1.19961427em}.katex .fontsize-ensurer.reset-size11.size1,.katex .sizing.reset-size11.size1{font-size:.20096463em}.katex .fontsize-ensurer.reset-size11.size2,.katex .sizing.reset-size11.size2{font-size:.24115756em}.katex .fontsize-ensurer.reset-size11.size3,.katex .sizing.reset-size11.size3{font-size:.28135048em}.katex .fontsize-ensurer.reset-size11.size4,.katex .sizing.reset-size11.size4{font-size:.32154341em}.katex .fontsize-ensurer.reset-size11.size5,.katex .sizing.reset-size11.size5{font-size:.36173633em}.katex .fontsize-ensurer.reset-size11.size6,.katex .sizing.reset-size11.size6{font-size:.40192926em}.katex .fontsize-ensurer.reset-size11.size7,.katex .sizing.reset-size11.size7{font-size:.48231511em}.katex .fontsize-ensurer.reset-size11.size8,.katex .sizing.reset-size11.size8{font-size:.57877814em}.katex .fontsize-ensurer.reset-size11.size9,.katex .sizing.reset-size11.size9{font-size:.69453376em}.katex .fontsize-ensurer.reset-size11.size10,.katex .sizing.reset-size11.size10{font-size:.83360129em}.katex .fontsize-ensurer.reset-size11.size11,.katex .sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .accent .accent-body{position:relative}.katex .accent .accent-body:not(.accent-full){width:0}.katex .overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .stretchy:after,.katex .stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}code[class*=language-],pre[class*=language-]{word-wrap:normal;background:#fafafa;color:#90a4ae;font-family:Roboto Mono,monospace;font-size:1em;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;line-height:1.5em;tab-size:4;text-align:left;white-space:pre;word-break:normal;word-spacing:normal}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{background:#cceae7;color:#263238}:not(pre)>code[class*=language-]{border-radius:.2em;padding:.1em;white-space:normal}pre[class*=language-]{margin:.5em 0;overflow:auto;padding:1.25em 1em;position:relative}.language-css>code,.language-sass>code,.language-scss>code{color:#f76d47}[class*=language-] .namespace{opacity:.7}.token.atrule{color:#7c4dff}.token.attr-name{color:#39adb5}.token.attr-value,.token.attribute{color:#f6a434}.token.boolean{color:#7c4dff}.token.builtin,.token.cdata,.token.char,.token.class{color:#39adb5}.token.class-name{color:#6182b8}.token.comment{color:#aabfc9}.token.constant{color:#7c4dff}.token.deleted{color:#e53935}.token.doctype{color:#aabfc9}.token.entity{color:#e53935}.token.function{color:#7c4dff}.token.hexcode{color:#f76d47}.token.id,.token.important{color:#7c4dff;font-weight:700}.token.inserted{color:#39adb5}.token.keyword{color:#7c4dff}.token.number{color:#f76d47}.token.operator{color:#39adb5}.token.prolog{color:#aabfc9}.token.property{color:#39adb5}.token.pseudo-class,.token.pseudo-element{color:#f6a434}.token.punctuation{color:#39adb5}.token.regex{color:#6182b8}.token.selector{color:#e53935}.token.string{color:#f6a434}.token.symbol{color:#7c4dff}.token.tag{color:#e53935}.token.unit{color:#f76d47}.token.url,.token.variable{color:#e53935}:root{--sn-stylekit-monospace-font:SFMono-Regular,Consolas,Liberation Mono,Menlo,"Ubuntu Mono",courier,monospace}body,html{background-color:transparent;background-color:var(--sn-stylekit-background-color);font-size:var(--sn-stylekit-font-size-editor);height:100%;margin:0;padding:0;width:100%}*,body,html{font-family:var(--sn-stylekit-sans-serif-font)}*{-webkit-tap-highlight-color:rgba(0,0,0,0)}#root{height:100%}.sn-component{display:flex;flex-direction:column;font-size:var(--sn-stylekit-font-size-editor);min-height:100vh}@media screen and (max-width:420px){.sn-component{min-height:-webkit-fill-available}}.container{flex:1 1}.container,.container .milkdown-container{display:flex;flex-grow:1;height:100%;width:100%}.container .milkdown-container{box-sizing:border-box;flex-direction:column;justify-content:flex-start;margin:0 auto;max-height:100%;max-width:100%;padding:0;position:relative}.container .milkdown-container>div{height:100%}.container .milkdown-container .milkdown-menu-wrapper{height:100%;overflow:auto;position:relative}.container .milkdown-container .milkdown-menu-wrapper .milkdown-menu{background:rgba(var(--surface),1);background-color:var(--sn-stylekit-contrast-background-color);border:none;border-color:var(--sn-stylekit-border-color);box-sizing:border-box;display:flex;flex-wrap:nowrap;left:0;overflow-x:auto;position:absolute;right:0;top:0;width:100%;z-index:1}.container .milkdown-container .milkdown-menu-wrapper .milkdown-menu .button{background-color:var(--sn-stylekit-secondary-background-color);color:var(--sn-stylekit-neutral-color);transition:none}.container .milkdown-container .milkdown-menu-wrapper .milkdown-menu .button.active{background-color:var(--sn-stylekit-neutral-color)!important;color:var(--sn-stylekit-neutral-contrast-color)!important}.container .milkdown-container .milkdown-menu-wrapper .milkdown-menu .divider{background-color:var(--sn-stylekit-border-color)!important}.container .milkdown-container .milkdown-menu-wrapper .milkdown{background-color:var(--sn-stylekit-background-color)!important;box-shadow:none!important;color:var(--sn-stylekit-editor-foreground-color)!important;height:100%;max-width:100%;overflow:auto}.container .milkdown-container .milkdown-menu-wrapper .milkdown::-webkit-scrollbar-thumb{background-color:var(--sn-stylekit-scrollbar-thumb-color);border:2px solid transparent}.container .milkdown-container .milkdown-menu-wrapper .milkdown::-webkit-scrollbar-thumb:hover{background-color:var(--sn-stylekit-scrollbar-thumb-color)}.container .milkdown-container .milkdown-menu-wrapper .milkdown .emoji{height:1.3rem!important;width:1.3rem!important}.container .milkdown-container .milkdown-menu-wrapper .milkdown .editor{max-width:100%!important;padding:4.125rem 1.25rem 0!important}.container .milkdown-container .milkdown-menu-wrapper .milkdown .editor>*{margin-bottom:.875rem!important;margin-top:0!important}.container .milkdown-container .milkdown-menu-wrapper .milkdown .editor h1.heading.h1{font-size:2.8rem!important}.container .milkdown-container .milkdown-menu-wrapper .milkdown .editor h2.heading.h2{font-size:2.3rem!important}.container .milkdown-container .milkdown-menu-wrapper .milkdown .editor h3.heading.h3{font-size:1.8rem!important}.container .milkdown-container .milkdown-menu-wrapper .milkdown .editor h4.heading.h4{font-size:1.5rem!important}.container .milkdown-container .milkdown-menu-wrapper .milkdown .editor h5.heading.h5{font-size:1rem!important}.container .milkdown-container .milkdown-menu-wrapper .milkdown .editor p.paragraph{font-size:var(--sn-stylekit-font-size-editor)!important}.container .milkdown-container .milkdown-menu-wrapper .milkdown .editor .strike-through{-webkit-text-decoration-color:rgba(var(--sn-stylekit-editor-foreground-color),.5);text-decoration-color:rgba(var(--sn-stylekit-editor-foreground-color),.5)}.container .milkdown-container .milkdown-menu-wrapper .milkdown .editor .ProseMirror-gapcursor{caret-color:transparent}.container .milkdown-container .milkdown-menu-wrapper .milkdown .editor .tableWrapper table{border-color:var(--sn-stylekit-border-color)}.container .milkdown-container .milkdown-menu-wrapper .milkdown .editor .tableWrapper table th{background-clip:padding-box;background-color:var(--sn-stylekit-neutral-color)!important;border:var(--lineWidth) solid var(--sn-stylekit-border-color);color:var(--sn-stylekit-neutral-contrast-color)}.container .milkdown-container .milkdown-menu-wrapper .milkdown .editor .tableWrapper table td{background:inherit;border:var(--lineWidth) solid var(--sn-stylekit-border-color);color:var(--sn-stylekit-paragraph-text-color)}.container .milkdown-container .milkdown-menu-wrapper .milkdown .editor .empty,.container .milkdown-container .milkdown-menu-wrapper .milkdown .editor .image,.container .milkdown-container .milkdown-menu-wrapper .milkdown .editor .system{background-color:var(--sn-stylekit-secondary-contrast-background-color)}.container .milkdown-container .milkdown-menu-wrapper .milkdown .editor .empty .placeholder:before{color:var(--sn-stylekit-foreground-color)}.container .milkdown-container .milkdown-menu-wrapper .milkdown .editor .code-inline{background-color:var(--sn-stylekit-foreground-color);color:var(--sn-stylekit-background-color)}.container .milkdown-container .milkdown-menu-wrapper .milkdown .slash-dropdown{background-color:var(--sn-stylekit-contrast-background-color)!important;border-color:var(--sn-stylekit-border-color)!important}.container .milkdown-container .milkdown-menu-wrapper .milkdown .slash-dropdown .slash-dropdown-item,.container .milkdown-container .milkdown-menu-wrapper .milkdown .slash-dropdown .slash-dropdown-item .icon{color:var(--sn-stylekit-paragraph-text-color)!important}.container .milkdown-container .milkdown-menu-wrapper .milkdown .milkdown-emoji-filter{color:var(--sn-stylekit-paragraph-text-color)!important}.container .milkdown-container .milkdown-menu-wrapper .milkdown .milkdown-emoji-filter,.container .milkdown-container .milkdown-menu-wrapper .milkdown .tooltip{background-color:var(--sn-stylekit-contrast-background-color)!important;border-color:var(--sn-stylekit-border-color)!important}.container .milkdown-container .milkdown-menu-wrapper .milkdown .tooltip .icon{color:var(--sn-stylekit-paragraph-text-color)!important}.container .milkdown-container .milkdown-menu-wrapper .milkdown .tooltip .icon:not(:last-child):after{right:0!important;width:0!important}.container .milkdown-container .milkdown-menu-wrapper .milkdown .tooltip-input{background-color:var(--sn-stylekit-contrast-background-color)!important;border-color:var(--sn-stylekit-border-color)!important}.container .milkdown-container .milkdown-menu-wrapper .milkdown .tooltip-input button{color:var(--sn-stylekit-success-color)!important}.container .milkdown-container .milkdown-menu-wrapper .milkdown .tooltip-input input{color:var(--sn-stylekit-paragraph-text-color)!important}.container .milkdown-container .milkdown-menu-wrapper .milkdown .tooltip-input input::-webkit-input-placeholder{color:var(--sn-stylekit-neutral-color)!important}.container .milkdown-container .milkdown-menu-wrapper .milkdown .tooltip-input input:-ms-input-placeholder{color:var(--sn-stylekit-neutral-color)!important}.container .milkdown-container .milkdown-menu-wrapper .milkdown .tooltip-input input::placeholder{color:var(--sn-stylekit-neutral-color)!important}.container .codemirror-container{max-height:100%;overflow-y:auto}.container .codemirror-container .cm-theme-light .cm-editor{-webkit-overflow-scrolling:touch;background-color:var(--sn-stylekit-editor-background-color)!important;color:var(--sn-stylekit-editor-foreground-color)!important;font-family:var(--sn-stylekit-monospace-font);font-size:calc(var(--sn-stylekit-font-size-editor) - .3rem)}@media only screen and (min-width:768px){.container .codemirror-container .cm-theme-light .cm-editor{font-size:calc(var(--sn-stylekit-font-size-editor) - .1rem)}}.container .codemirror-container .cm-theme-light .cm-editor .cm-content{caret-color:var(--sn-stylekit-editor-foreground-color)!important}.container .codemirror-container .cm-theme-light .cm-editor .cm-lineNumbers{color:var(--sn-stylekit-neutral-color)!important;opacity:.5}.container .codemirror-container .cm-theme-light .cm-editor .cm-cursor{border-color:var(--sn-stylekit-info-color)!important}.container .codemirror-container .cm-theme-light .cm-editor .cm-gutters{background-color:var(--sn-stylekit-background-color)!important;border-color:var(--sn-stylekit-border-color)!important;color:var(--sn-stylekit-editor-foreground-color)!important}.container .codemirror-container .cm-theme-light .cm-editor .ͼb{color:var(--sn-stylekit-info-color)!important}.container .codemirror-container .cm-theme-light .cm-editor .cm-selectionBackground{background:var(--sn-stylekit-info-color)!important}.container .codemirror-container .cm-theme-light .cm-editor .cm-activeLine{background-color:var(--sn-stylekit-secondary-contrast-background-color)!important}.container .codemirror-container .cm-theme-light .cm-editor .cm-activeLineGutter{background-color:var(--sn-stylekit-contrast-background-color)!important}.container>.separator{background-color:var(--sn-stylekit-border-color)}.container.horizontal{flex-direction:row;overflow-x:clip}.container.horizontal .column{flex:1 1}.container.horizontal .column.full{max-width:100%}.container.horizontal .column.half{max-width:50%}.container.horizontal .separator{width:10px}.container.horizontal .column.half:last-child{max-width:50%}.container.vertical{flex-direction:column;overflow-y:clip}.container.vertical .row.full{height:100%}.container.vertical .row.half{height:40%}.container.vertical .separator{height:1%}.container.vertical .row.half:last-child{height:59%}
+/*# sourceMappingURL=main.904cd38b.css.map*/
\ No newline at end of file
diff --git a/public/components/org.standardnotes.markdown-visual-editor/build/static/css/main.904cd38b.css.map b/public/components/org.standardnotes.markdown-visual-editor/build/static/css/main.904cd38b.css.map
new file mode 100644
index 000000000..7e0528515
--- /dev/null
+++ b/public/components/org.standardnotes.markdown-visual-editor/build/static/css/main.904cd38b.css.map
@@ -0,0 +1 @@
+{"version":3,"file":"static/css/main.904cd38b.css","mappings":"AAAA,2EACA,CAAC,KAQC,8BADF,gBAGE,MASF,QACE,MAMF,aACE,IAOF,aACE,eACA,IASF,sBACE,SAEA,iBAEA,KAQF,+BACE,cAEA,GASF,4BACE,aAOF,kBACE,0BAEA,0EAEA,UAOF,kBAEE,eAOF,+BAGE,cAEA,OAOF,aACE,SAOF,aAEE,cACA,kBACA,wBACA,KAGF,aACE,KAGF,SACE,KAQF,iBACE,uCASF,mBAKE,eAEA,iBAEA,SAEA,cAQF,gBAGE,eAOF,mBAGE,iDAMF,yBAIE,yHAMF,iBAIE,UACA,6GAMF,6BAIE,UAMF,0BACE,QASF,qBACE,cAEA,cAEA,eAEA,UAEA,mBAEA,UAOF,uBACE,UAMF,aACE,8BAOF,qBAEE,UAEA,mFAOF,WAEE,eAOF,4BACE,oBAEA,0CAOF,uBACE,8BAOF,yBACE,aAEA,SASF,aACE,SAMF,iBACE,CASA,kBAMF,YACE,OAGF,sCACE,oCACA,2CACA,mCACA,sCACA,qCACA,sCACA,oCACA,sCACA,yBACA,4BACA,6BACA,6BACA,6BACA,6BACA,+CACA,6BACA,6BACA,uCACA,+BACA,oCACA,0CACA,iCACA,0CACA,uCACA,4CACA,oCACA,0CACA,oCACA,0CACA,mCACA,yCACA,mCACA,oCACA,mCACA,oCACA,gDACA,gDACA,4CACA,iDACA,iDACA,6CACA,0DACA,0DACA,sDACA,0EACA,0EACA,2CACA,8CACA,yCACA,4CACA,mDACA,+BACA,wCACA,kEACA,gEACA,qHACA,iNAEA,oEAGA,+BACA,kCACA,6CACA,6CACA,6CACA,6CACA,6CACA,6CACA,eAYA,kCACA,sDAVF,yJASE,CATF,8CAWE,yBAIA,qBACA,CADA,oDACA,yBACA,CADA,gDACA,kBACA,CADA,sDACA,CAJF,4BACE,CADF,oDACE,CAGA,YACA,sBACA,CACA,YADA,aAEA,iCAGF,yBACE,gCAIA,WACA,iBAFF,eAGE,0CAWA,mBAFA,wBACA,CADA,6DACA,CAFA,+BACA,CADA,gEACA,CACA,aACA,CADA,kDACA,CAPA,YAEA,CAHF,aACE,CAEA,6BACA,2BAKA,iEAGF,oBACE,CADF,yCACE,gBACA,wDAGF,eACE,6EAKA,4BACA,CADA,oDACA,uBAHF,yBAIE,yGAGF,gBAEE,yFAKA,cAFF,eAGE,2FAKA,cAFF,gBAGE,2CAKA,WACA,CACA,WACA,CAFA,eACA,CAEA,0BADA,yBACA,CALA,yBAMA,kGAGF,aAEE,CAFF,6CAEE,gBACA,iCAIA,YACA,uBAFF,qBAGE,+CAGF,iBACE,kDAGF,eACE,kDAIA,wFADF,wBAEE,4DAGF,kBACE,4CAGF,mBACE,+CAIA,gBADF,gBAEE,yDAKA,8DADA,eACA,CAFF,uBAGE,+DAGF,+BACE,CADF,uDACE,CAGA,8DADA,kBACA,CAFA,qBACA,CAFA,wBAIA,4DAGF,mBACE,CADF,yCACE,kBACA,mEAGF,eACE,WACA,qDAGF,sBACE,6DAGF,oBACE,6BAKA,kBACA,CAHF,YACE,8BACA,CACA,mBACA,sCAGF,sBACE,2CAGF,wBACE,0CAGF,0BACE,uCAGF,sBACE,sDAGF,UACE,0FAGF,sBACE,uCAIA,wBADF,oBAEE,mCAGF,QACE,UACA,8BAGF,wBACE,CADF,gDACE,kBACA,UACA,8BAGF,UACE,mCAGF,SACE,2CAGF,qBACE,8BAGF,wBACE,iBACA,8BAGF,qBACE,CADF,oDACE,yBACA,CADA,yDACA,kBACA,CADA,sDACA,gBACA,CAEA,0BADA,yBACA,CAFA,wBACA,CADA,oBACA,CADA,gBAGA,oDASA,mBAJA,wBACA,CADA,6DACA,CAFA,+BACA,CADA,gEACA,CACA,aACA,CADA,kDACA,aACA,8BACA,CANF,uBAOE,0DAIA,6DADF,eAEE,6DAGF,mBACE,WACA,iDAQA,wFAJA,cACA,aACA,mBACA,8BACA,CALF,gBAME,uDAGF,wBACE,CADF,6DACE,CACA,2EADA,aACA,CADA,kDAEA,uEAGF,YACE,CACA,sBADA,sBAEA,yFAIF,iBACE,yBACA,+EAGF,UACE,8FAGF,mBACE,sLAGF,wBAEE,CAFF,yDAEE,gBACA,kMAGF,0EAEE,6EAGF,YACE,kiBAGF,gBACE,CADF,yCACE,gBACA,qPAGF,kBACE,CADF,wCACE,gBACA,8DAGF,mBACE,CADF,yCACE,oBACA,WACA,oBAGF,mDACE,uBAGF,iDACE,2BAGF,0BACE,+BACA,gCACA,mCACA,0GASA,gBANF,QAKE,UAEA,sBAIA,oBACA,CADA,yCACA,CAFF,eACE,CACA,sBACA,sBAGF,iBACE,CADF,yCACE,sBACA,sBAGF,mBACE,CADF,yCACE,uBACA,sBAGF,kBACE,CADF,wCACE,sBACA,sBAGF,6DACE,wBAGF,eACE,8BAGF,6DACE,+BAGF,2DACE,8BAGF,6DACE,sBAGF,cACE,+DACA,+BAGF,aACE,CADF,sCACE,WACA,4BAGF,iBACE,CADF,sDACE,0BACA,kCAGF,oBACE,oCAGF,wBACE,CADF,iDACE,2DACA,iCAGF,wBACE,CADF,8CACE,wDACA,oCAGF,wBACE,CADF,iDACE,2DACA,mCAGF,wBACE,CADF,gDACE,0DACA,oCAGF,wBACE,CADF,iDACE,2DACA,qBAGF,oBACE,wBAGF,oDACE,yBAGF,gEACE,wBAGF,oDACE,qBAGF,iDACE,8BAGF,uDACE,wBAGF,oDACE,uBAGF,mDACE,wBAGF,oDACE,uBAGF,qEACE,0BAGF,wEACE,yBAGF,uEACE,0BAGF,wEACE,sBAGF,4BACE,YACA,4BAIA,iCADF,2BAEE,sBAGF,kBACE,8BAMA,WACA,CAJF,qBACE,CAGA,mBACA,CADA,yCACA,CAHA,kBACA,CAGA,SACA,CANA,wBACA,CAKA,YAFA,UAGA,oCAIA,4BACA,aAFF,UACE,CADF,yCAGE,wCAGF,WACE,oFAGF,eACE,oGAGF,eACE,8FAIA,cADF,kBAEE,wKAKA,uBACA,uBAHF,UAKE,sEAGF,oBACE,sBACA,wGAGF,qBACE,iCAGF,uFACE,kCAIA,yBADF,qBAEE,2CAGF,8DAEE,CALA,4BAGF,8DAEE,sCAGF,8DAEE,uCAGF,8DAEE,wCAGF,YACE,WACA,kGAGF,aACE,YACA,kBACA,kFAGF,oBACE,sBACA,oHAGF,gBACE,sIAGF,gBACE,qCAGF,YACE,mBACA,4FAGF,eACE,CACA,QACA,wBACA,0BAHA,kBAIA,8HAIA,gBADF,iBAEE,oHAIA,6BACA,CADA,kEACA,CAEA,6BAFA,iBACA,CAHF,0BACE,CADF,+DACE,CAEA,yBAEA,kHAOA,4BAHA,8BACA,CADA,mEACA,iBACA,yBACA,CAJF,2BACE,CADF,gEAKE,qCAGF,oBACE,sDAGF,gBACE,4BAGF,oBACE,gDAMA,cACA,CAJF,aACE,CACA,mBACA,CADA,yCACA,CAFA,2BACA,CAEA,iBACA,+DACA,4FAGF,2BACE,0DAGF,4BACE,6MAIA,aACA,CAFF,eACE,CACA,iBACA,wDAGF,mBACE,CADF,yCACE,6BACA,uBAGF,6BACE,+HAYA,qBACA,CADA,oDACA,CAEA,mEADA,iBACA,CADA,sDACA,CAZF,UAQE,CARF,yCAQE,CAEA,eACA,CAHA,iBASA,uIAGF,iBAGE,2JAWA,qBACA,CADA,oDACA,CACA,yEAVF,UAGE,CAIA,WACA,CAHA,MACA,CAGA,SACA,CAPA,iBACA,MACA,CACA,UAKA,uJAYA,iBACA,CADA,sDACA,CACA,0BACA,sDAZF,UAGE,cACA,YACA,CAEA,MACA,CAEA,mBACA,CANA,iBACA,MACA,CACA,UAKA,mLAGF,uDAGE,uJAGF,4BAGE,mLAGF,YAGE,mKAGF,WAGE,CACA,8DADA,8BAEA,+LAGF,SAGE,mIAYA,wBACA,CADA,6DACA,CAEA,+EADA,iBACA,CADA,sDACA,CAZF,aAQE,CARF,kDAQE,CAEA,eACA,CAHA,iBASA,2IAGF,iBAGE,+JAWA,wBACA,CADA,6DACA,CACA,yEAVF,UAGE,CAIA,WACA,CAHA,MACA,CAGA,SACA,CAPA,iBACA,MACA,CACA,UAKA,2JAYA,iBACA,CADA,sDACA,CACA,0BACA,kEAZF,UAGE,cACA,YACA,CAEA,MACA,CAEA,mBACA,CANA,iBACA,MACA,CACA,UAKA,uLAGF,uDAGE,2JAGF,4BAGE,uLAGF,YAGE,uKAGF,WAGE,CACA,8DADA,8BAEA,mMAGF,SAGE,mJAYA,wBACA,CADA,8DACA,CAEA,gFADA,iBACA,CADA,sDACA,CAZF,aAQE,CARF,mDAQE,CAEA,eACA,CAHA,iBASA,2JAGF,iBAGE,+KAWA,wBACA,CADA,8DACA,CACA,yEAVF,UAGE,CAIA,WACA,CAHA,MACA,CAGA,SACA,CAPA,iBACA,MACA,CACA,UAKA,2KAYA,iBACA,CADA,sDACA,CACA,0BACA,mEAZF,UAGE,cACA,YACA,CAEA,MACA,CAEA,mBACA,CANA,iBACA,MACA,CACA,UAKA,uMAGF,uDAGE,2KAGF,4BAGE,uMAGF,YAGE,uLAGF,WAGE,CACA,8DADA,8BAEA,mNAGF,SAGE,uLAYA,wBACA,CADA,uEACA,CAEA,yFADA,iBACA,CADA,sDACA,CAZF,aAQE,CARF,4DAQE,CAEA,eACA,CAHA,iBASA,+LAGF,iBAGE,mNAWA,wBACA,CADA,uEACA,CACA,yEAVF,UAGE,CAIA,WACA,CAHA,MACA,CAGA,SACA,CAPA,iBACA,MACA,CACA,UAKA,+MAYA,iBACA,CADA,sDACA,CACA,0BACA,4EAZF,UAGE,cACA,YACA,CAEA,MACA,CAEA,mBACA,CANA,iBACA,MACA,CACA,UAKA,2OAGF,uDAGE,+MAGF,4BAGE,2OAGF,YAGE,2NAGF,WAGE,CACA,8DADA,8BAEA,uPAGF,SAGE,+HAYA,wBACA,CADA,iDACA,CAEA,mEADA,iBACA,CADA,sDACA,CAZF,UAQE,CARF,+CAQE,CAEA,eACA,CAHA,iBASA,uIAGF,iBAGE,2JAWA,wBACA,CADA,iDACA,CACA,yEAVF,UAGE,CAIA,WACA,CAHA,MACA,CAGA,SACA,CAPA,iBACA,MACA,CACA,UAKA,uJAYA,iBACA,CADA,sDACA,CACA,0BACA,sDAZF,UAGE,cACA,YACA,CAEA,MACA,CAEA,mBACA,CANA,iBACA,MACA,CACA,UAKA,mLAGF,uDAGE,uJAGF,4BAGE,mLAGF,YAGE,mKAGF,WAGE,CACA,8DADA,8BAEA,+LAGF,SAGE,mHAYA,wBACA,CADA,8CACA,CAEA,gEADA,iBACA,CADA,sDACA,CAZF,UAQE,CARF,4CAQE,CAEA,eACA,CAHA,iBASA,2HAGF,iBAGE,+IAWA,wBACA,CADA,8CACA,CACA,yEAVF,UAGE,CAIA,WACA,CAHA,MACA,CAGA,SACA,CAPA,iBACA,MACA,CACA,UAKA,2IAYA,iBACA,CADA,sDACA,CACA,0BACA,mDAZF,UAGE,cACA,YACA,CAEA,MACA,CAEA,mBACA,CANA,iBACA,MACA,CACA,UAKA,uKAGF,uDAGE,2IAGF,4BAGE,uKAGF,YAGE,uJAGF,WAGE,CACA,8DADA,8BAEA,mLAGF,SAGE,+HAYA,wBACA,CADA,iDACA,CAEA,mEADA,iBACA,CADA,sDACA,CAZF,UAQE,CARF,+CAQE,CAEA,eACA,CAHA,iBASA,uIAGF,iBAGE,2JAWA,wBACA,CADA,iDACA,CACA,yEAVF,UAGE,CAIA,WACA,CAHA,MACA,CAGA,SACA,CAPA,iBACA,MACA,CACA,UAKA,uJAYA,iBACA,CADA,sDACA,CACA,0BACA,sDAZF,UAGE,cACA,YACA,CAEA,MACA,CAEA,mBACA,CANA,iBACA,MACA,CACA,UAKA,mLAGF,uDAGE,uJAGF,4BAGE,mLAGF,YAGE,mKAGF,WAGE,CACA,8DADA,8BAEA,+LAGF,SAGE,2HAYA,wBACA,CADA,gDACA,CAEA,kEADA,iBACA,CADA,sDACA,CAZF,UAQE,CARF,8CAQE,CAEA,eACA,CAHA,iBASA,mIAGF,iBAGE,uJAWA,wBACA,CADA,gDACA,CACA,yEAVF,UAGE,CAIA,WACA,CAHA,MACA,CAGA,SACA,CAPA,iBACA,MACA,CACA,UAKA,mJAYA,iBACA,CADA,sDACA,CACA,0BACA,qDAZF,UAGE,cACA,YACA,CAEA,MACA,CAEA,mBACA,CANA,iBACA,MACA,CACA,UAKA,+KAGF,uDAGE,mJAGF,4BAGE,+KAGF,YAGE,+JAGF,WAGE,CACA,8DADA,8BAEA,2LAGF,SAGE,+HAYA,wBACA,CADA,iDACA,CAEA,mEADA,iBACA,CADA,sDACA,CAZF,UAQE,CARF,+CAQE,CAEA,eACA,CAHA,iBASA,uIAGF,iBAGE,2JAWA,wBACA,CADA,iDACA,CACA,yEAVF,UAGE,CAIA,WACA,CAHA,MACA,CAGA,SACA,CAPA,iBACA,MACA,CACA,UAKA,uJAYA,iBACA,CADA,sDACA,CACA,0BACA,sDAZF,UAGE,cACA,YACA,CAEA,MACA,CAEA,mBACA,CANA,iBACA,MACA,CACA,UAKA,mLAGF,uDAGE,uJAGF,4BAGE,mLAGF,YAGE,mKAGF,WAGE,CACA,8DADA,8BAEA,+LAGF,SAGE,0EAWA,wBACA,CADA,6DACA,CAOA,mFANA,iBACA,CADA,sDACA,CAXF,aAOE,CAPF,kDAOE,CAEA,eACA,CAHA,iBAUA,8EAGF,iBAEE,wFAUA,wBACA,CADA,6DACA,CACA,yEATF,UAEE,CAIA,WACA,CAHA,MACA,CAGA,SACA,CAPA,iBACA,MACA,CACA,UAKA,sFAcA,2EAHA,iBACA,CADA,sDACA,CACA,aACA,CADA,8CACA,CAXF,UAEE,cACA,YACA,CAEA,MACA,CAEA,mBACA,CANA,iBACA,MACA,CACA,UAKA,sFAGF,4BAEE,oGAGF,YAEE,4FAGF,WAEE,CACA,8DADA,8BAEA,0GAGF,SAEE,kFAWA,wBACA,CADA,8DACA,CAOA,oFANA,iBACA,CADA,sDACA,CAXF,aAOE,CAPF,mDAOE,CAEA,eACA,CAHA,iBAUA,sFAGF,iBAEE,gGAUA,wBACA,CADA,8DACA,CACA,yEATF,UAEE,CAIA,WACA,CAHA,MACA,CAGA,SACA,CAPA,iBACA,MACA,CACA,UAKA,8FAcA,4EAHA,iBACA,CADA,sDACA,CACA,aACA,CADA,+CACA,CAXF,UAEE,cACA,YACA,CAEA,MACA,CAEA,mBACA,CANA,iBACA,MACA,CACA,UAKA,8FAGF,4BAEE,4GAGF,YAEE,oGAGF,WAEE,CACA,8DADA,8BAEA,kHAGF,SAEE,oGAWA,wBACA,CADA,uEACA,CAOA,6FANA,iBACA,CADA,sDACA,CAXF,aAOE,CAPF,4DAOE,CAEA,eACA,CAHA,iBAUA,wGAGF,iBAEE,kHAUA,wBACA,CADA,uEACA,CACA,yEATF,UAEE,CAIA,WACA,CAHA,MACA,CAGA,SACA,CAPA,iBACA,MACA,CACA,UAKA,gHAcA,qFAHA,iBACA,CADA,sDACA,CACA,aACA,CADA,wDACA,CAXF,UAEE,cACA,YACA,CAEA,MACA,CAEA,mBACA,CANA,iBACA,MACA,CACA,UAKA,gHAGF,4BAEE,8HAGF,YAEE,sHAGF,WAEE,CACA,8DADA,8BAEA,oIAGF,SAEE,wEAWA,qBACA,CADA,oDACA,CAOA,0EANA,iBACA,CADA,sDACA,CAXF,UAOE,CAPF,yCAOE,CAEA,eACA,CAHA,iBAUA,4EAGF,iBAEE,sFAUA,qBACA,CADA,oDACA,CACA,yEATF,UAEE,CAIA,WACA,CAHA,MACA,CAGA,SACA,CAPA,iBACA,MACA,CACA,UAKA,oFAcA,kEAHA,iBACA,CADA,sDACA,CACA,aACA,CADA,qCACA,CAXF,UAEE,cACA,YACA,CAEA,MACA,CAEA,mBACA,CANA,iBACA,MACA,CACA,UAKA,oFAGF,4BAEE,kGAGF,YAEE,0FAGF,WAEE,CACA,8DADA,8BAEA,wGAGF,SAEE,wEAWA,wBACA,CADA,iDACA,CAEA,mEADA,iBACA,CADA,sDACA,CAXF,UAOE,CAPF,+CAOE,CAEA,eACA,CAHA,iBASA,4EAGF,iBAEE,sFAUA,wBACA,CADA,iDACA,CACA,yEATF,UAEE,CAIA,WACA,CAHA,MACA,CAGA,SACA,CAPA,iBACA,MACA,CACA,UAKA,oFAWA,iBACA,CADA,sDACA,CACA,0BACA,sDAXF,UAEE,cACA,YACA,CAEA,MACA,CAEA,mBACA,CANA,iBACA,MACA,CACA,UAKA,oFAGF,4BAEE,kGAGF,YAEE,0FAGF,WAEE,CACA,8DADA,8BAEA,wGAGF,SAEE,kEAWA,wBACA,CADA,8CACA,CAEA,gEADA,iBACA,CADA,sDACA,CAXF,UAOE,CAPF,4CAOE,CAEA,eACA,CAHA,iBASA,sEAGF,iBAEE,gFAUA,wBACA,CADA,8CACA,CACA,yEATF,UAEE,CAIA,WACA,CAHA,MACA,CAGA,SACA,CAPA,iBACA,MACA,CACA,UAKA,8EAWA,iBACA,CADA,sDACA,CACA,0BACA,mDAXF,UAEE,cACA,YACA,CAEA,MACA,CAEA,mBACA,CANA,iBACA,MACA,CACA,UAKA,8EAGF,4BAEE,4FAGF,YAEE,oFAGF,WAEE,CACA,8DADA,8BAEA,kGAGF,SAEE,wEAWA,wBACA,CADA,iDACA,CAEA,mEADA,iBACA,CADA,sDACA,CAXF,UAOE,CAPF,+CAOE,CAEA,eACA,CAHA,iBASA,4EAGF,iBAEE,sFAUA,wBACA,CADA,iDACA,CACA,yEATF,UAEE,CAIA,WACA,CAHA,MACA,CAGA,SACA,CAPA,iBACA,MACA,CACA,UAKA,oFAWA,iBACA,CADA,sDACA,CACA,0BACA,sDAXF,UAEE,cACA,YACA,CAEA,MACA,CAEA,mBACA,CANA,iBACA,MACA,CACA,UAKA,oFAGF,4BAEE,kGAGF,YAEE,0FAGF,WAEE,CACA,8DADA,8BAEA,wGAGF,SAEE,sEAWA,wBACA,CADA,gDACA,CAEA,kEADA,iBACA,CADA,sDACA,CAXF,UAOE,CAPF,8CAOE,CAEA,eACA,CAHA,iBASA,0EAGF,iBAEE,oFAUA,wBACA,CADA,gDACA,CACA,yEATF,UAEE,CAIA,WACA,CAHA,MACA,CAGA,SACA,CAPA,iBACA,MACA,CACA,UAKA,kFAWA,iBACA,CADA,sDACA,CACA,0BACA,qDAXF,UAEE,cACA,YACA,CAEA,MACA,CAEA,mBACA,CANA,iBACA,MACA,CACA,UAKA,kFAGF,4BAEE,gGAGF,YAEE,wFAGF,WAEE,CACA,8DADA,8BAEA,sGAGF,SAEE,wEAWA,wBACA,CADA,iDACA,CAEA,mEADA,iBACA,CADA,sDACA,CAXF,UAOE,CAPF,+CAOE,CAEA,eACA,CAHA,iBASA,4EAGF,iBAEE,sFAUA,wBACA,CADA,iDACA,CACA,yEATF,UAEE,CAIA,WACA,CAHA,MACA,CAGA,SACA,CAPA,iBACA,MACA,CACA,UAKA,oFAWA,iBACA,CADA,sDACA,CACA,0BACA,sDAXF,UAEE,cACA,YACA,CAEA,MACA,CAEA,mBACA,CANA,iBACA,MACA,CACA,UAKA,oFAGF,4BAEE,kGAGF,YAEE,0FAGF,WAEE,CACA,8DADA,8BAEA,wGAGF,SAEE,gCAMA,eAFA,kBACA,CAFF,0BACE,CACA,eAEA,yCAGF,iBACE,wCAGF,UACE,uCAGF,mBACE,iBACA,6CAGF,eACE,uDAGF,oBACE,CADF,yCACE,gBACA,uBACA,sDAIA,kBACA,CADA,wCACA,CACA,gBAHF,sBACE,CACA,eAEA,0BAMA,wBACA,CADA,6DACA,CAFA,wBACA,CADA,yDACA,CAFA,cACA,CAIA,cAFA,SAGA,CAIA,wFAGF,2BACE,gCAIA,YADF,UAEE,2BAKA,4CACA,CADA,oCACA,CAHF,wBACE,CAEA,kDAFA,iBACA,CACA,kCACA,iCAIA,YADF,UAEE,yCAIA,uCACA,gCAIA,gDACA,mCAIA,gDACA,kCAIA,gDACA,mCAIA,gDACA,2BAGF,GACE,qDACE,IAEF,uDACE,EARF,kBAGF,GACE,qDACE,IAEF,uDACE,4BAWF,kBACA,CAJA,wBACA,CADA,6DACA,CAGA,wBACA,CADA,yDACA,CAJA,aACA,CADA,kDACA,CANF,YACE,CACA,eACA,CAGA,6BACA,CAJA,gBACA,CAKA,+DARA,UASA,oCAGF,aACE,eACA,0CAGF,eACE,kEAGF,YAEE,YACA,4CAMA,kBACA,CAHA,cACA,aACA,CAHF,WACE,CAGA,sBACA,8DAGF,oBACE,mDAGF,4FACE,oEAKA,mBADA,YACA,CAFF,WAGE,sFAGF,qBACE,8EAGF,qFACE,uDAGF,cACE,mzBAGF,iDAME,mhBAOA,mBACA,CADA,yCACA,CALF,eAIE,CACA,kBACA,yIAGF,mBAEE,CAFF,yCAEE,gBACA,mBACA,oDAGF,eACE,WACA,+BAGF,YACE,eACA,iBACA,gBACA,oDAKA,wBACA,CADA,gDACA,CAGA,YACA,CAPF,UACE,eACA,CAKA,qBACA,+BAJA,gBACA,gBACA,CAHA,gBAMA,wDAIA,uBADF,cAEE,iFAGF,YACE,mBACA,gFAGF,kBACE,wFAGF,UACE,kGAGF,uBACE,wFAGF,cACE,+FAGF,cACE,gFAGF,sBACE,8DAGF,WACE,yBAgBA,kBACA,CAJA,4BACA,CALA,QACA,CAIA,aACA,CADA,kDACA,aACA,CAJA,YACA,CAIA,uBAXA,MACA,CAHA,gBACA,kBACA,CAHF,cACE,CAGA,OACA,MACA,CAEA,WACA,CAFA,aAQA,CAIA,sFAGF,WACE,uDAGF,qBACE,iDAIA,aADF,WAEE,kDAIA,aADF,WAEE,iDAIA,aADF,WAEE,8CAOA,wBACA,CADA,6DACA,CAFA,WACA,CACA,WALF,iBACE,CACA,UACA,CAFA,UAKA,2CAUA,wCAHA,eACA,CALF,eACE,CAEA,SACA,CAHA,UAOA,+BAGF,GACE,SACE,gEACA,IAEF,SACE,wDACA,EAVF,sBAGF,GACE,SACE,gEACA,IAEF,SACE,wDACA,4GAIJ,mEACE,0BAGF,WACE,4KAGF,cACE,kJAGF,gBACE,yBAGF,gBACE,2BAGF,uBACE,yPAGF,iEACE,kCAGF,kEACE,mCAGF,wBACE,4BAGF,+DACE,+BAGF,kEACE,kCAGF,qBACE,8MAGF,oBACE,2DAGF,oBACE,6IAGF,kBACE,oCAGF,yBACE,oDAGF,qBACE,wJAGF,+EACE,4EAGF,2FACE,+BAGF,iCACE,gCAGF,6DACE,qCAGF,+EACE,yLAGF,0EACE,oLAGF,sFACE,0BAGF,yEACE,0IAGF,gGACE,8DAGF,2BACE,6DAGF,4BACE,2BAGF,0EACE,4DAGF,oDACE,wBAGF,sFACE,+UAGF,gEACE,8BAGF,0EACE,iCAGF,oDACE,0BAGF,yEACE,6BAGF,mDACE,yFAGF,uEACE,2BAGF,iDACE,iCAGF,6EACE,uLAGF,uDACE,iMAGF,gFACE,gCAGF,0DACE,0BAGF,mEACE,6BAGF,6CACE,0BAGF,mEACE,6BAGF,6CACE,0BAGF,mEACE,6BAGF,6CACE,0BAGF,mEACE,6BAGF,6CACE,0CAGF,qFACE,6CAGF,+DACE,0BAGF,mEACE,6BAGF,6CACE,0BAGF,mEACE,6BAGF,6CACE,oCAGF,6EACE,uCAGF,uDACE,yBAGF,kEACE,4BAGF,4CACE,yBAGF,+DACE,4BAGF,yCACE,4BAGF,qEACE,+BAGF,+CACE,oCAGF,mFACE,uCAGF,6DACE,oCAGF,mFACE,uCAGF,6DACE,oCAGF,mFACE,uCAGF,6DACE,oCAGF,mFACE,uCAGF,6DACE,oCAGF,mFACE,uCAGF,6DACE,oCAGF,mFACE,uCAGF,6DACE,4UAGF,sFAIE,4UAGF,gEAIE,qHAGF,mBACE,sBAGF,aACE,6FAGF,YACE,yBAGF,qBACE,yBAGF,kBACE,0BAGF,WACE,4BAGF,aACE,0BAGF,cACE,qBAGF,YACE,8LAGF,kBACE,4BAGF,sBACE,8BAGF,mBACE,sJAGF,sBACE,gCAGF,6BACE,8BAGF,0BACE,4BAGF,wBACE,sBAGF,eACE,WACA,sBAGF,cACE,UACA,sBAGF,eACE,WACA,sBAGF,aACE,SACA,4FAGF,iBACE,sBAGF,cACE,CAIA,mGAGF,6DACE,8BAGF,aACE,gCAGF,eACE,gCAGF,eACE,kCAGF,sBACE,8BAGF,mBACE,CAIA,oJAGF,uDACE,CAIA,uRAGF,sFACE,8CAGF,4IACE,2CAGF,qFACE,4DAGF,4IACE,6DAGF,kEACE,0VAGF,8DACE,8XAGF,YACE,uTAGF,eACE,wDAGF,YACE,uDAGF,eACE,oDAGF,yBACE,+JAGF,eACE,mDAGF,eACE,0BAGF,eACE,4BAGF,iBACE,wBAGF,gBACE,iBACA,8LAGF,iBACE,oBACA,2BAGF,iBACE,qBACA,0BAGF,cACE,wBAGF,kBACE,oBACA,yBAGF,gBACE,iBACA,yBAGF,kBACE,oBACA,4BAGF,eACE,mFAGF,gBACE,oCAGF,oBACE,kCAGF,kBACE,uBAGF,WACE,uBAGF,WACE,sDAGF,YACE,uBAGF,WACE,oBAGF,QACE,oBAGF,YACE,uBAGF,cACE,oBAGF,WACE,uBAGF,eACE,oBAGF,cACE,oBAGF,aACE,oBAGF,cACE,kDAGF,WACE,oBAGF,cACE,qBAGF,aACE,qBAGF,aACE,qBAGF,aACE,qBAGF,cACE,sBAGF,UACE,uBAGF,WACE,wBAGF,YACE,wBAGF,kBACE,0HAGF,eACE,2BAGF,WACE,0BAGF,gBACE,kDAGF,QACE,qBAIA,qBADF,iBAEE,qBAIA,oBADF,gBAEE,qBAIA,qBADF,iBAEE,sBAGF,kBACE,qBAGF,iBACE,2FAGF,gBACE,qBAGF,iBACE,qBAGF,eACE,qBAGF,oBACE,qBAGF,oBACE,sBAGF,mBACE,qBAGF,mBACE,wBAGF,oBACE,6HAGF,kBACE,sBAGF,mBACE,qBAGF,kBACE,wBAGF,mBACE,6HAGF,iBACE,qBAGF,kBACE,kDAMA,SACA,oBAGF,aACE,qFAIA,sBADF,kBAEE,wBAIA,uBADF,mBAEE,yBAIA,wBADF,oBAEE,+FAIA,qBADF,iBAEE,qBAIA,sBADF,kBAEE,qBAIA,oBADF,gBAEE,qBAIA,sBADF,kBAEE,qBAIA,oBADF,gBAEE,qBAGF,mBACE,qBACA,+FAGF,kBACE,oBACA,qBAGF,mBACE,qBACA,wBAGF,oBACE,sBACA,qBAGF,iBACE,mBACA,qBAGF,mBACE,qBACA,qBAGF,gBACE,qBAGF,qBACE,qBAGF,mBACE,qBAGF,mBACE,gFAGF,UACE,uBAGF,UACE,sDAGF,WACE,4BAGF,sBACE,4CACA,oBAGF,OACE,oBAGF,WACE,uBAGF,aACE,oBAGF,UACE,oBAGF,aACE,kDAGF,UACE,qBAGF,aACE,qBAGF,YACE,qBAGF,cACE,0DAGF,WACE,qBAGF,aACE,qBAGF,WACE,sBAGF,cACE,sBAGF,cACE,sBAGF,WACE,uBAGF,UACE,iEAGF,eACE,2BAGF,cACE,wBAGF,WACE,wBAGF,cACE,wBAGF,iBACE,yBAGF,cACE,yBAGF,eACE,yBAGF,iBACE,yBAGF,kBACE,yBAGF,eACE,yBAGF,eACE,yBAGF,eACE,yBAGF,eACE,0BAGF,kBACE,4BAGF,eACE,6BAGF,wBACE,yBAGF,mCACE,sCAGF,8BACE,qCAGF,mHACE,8PAGF,cACE,8EAGF,KACE,+EAGF,MACE,wBAGF,WACE,yBAGF,cACE,0BAGF,kBACE,CACA,qBADA,kBAEA,gCAGF,qBACE,6BACA,mCAGF,wBACE,CADF,6DACE,iEACA,kCAGF,wBACE,CADF,iDACE,2DACA,kCAGF,wBACE,CADF,iDACE,2DACA,iCAGF,wBACE,CADF,gDACE,0DACA,kCAGF,wBACE,CADF,iDACE,2DACA,sDAGF,QACE,yBAGF,8DACE,kCAIF,uEAGE,yDAGF,oBAIE,yIAQA,iBADA,WACA,CALF,UAME,iKAOA,2BACA,CACA,wBACA,CADA,yDACA,CAPF,4BAIE,CACA,0BACA,CACA,oFACA,qKAQA,aADA,QACA,CALF,OAME,qKAGF,4BAIE,OAGF,iBACE,8BASA,eACA,CACA,iCARF,aACE,CACA,0BACA,8BACA,sBACA,CAEA,YACA,CAHA,gBACA,CALA,iBAQA,2CAGF,4BACE,0CACA,sCAGF,YACE,2BAKA,gBAFF,QACE,UAEA,iCAGF,eACE,aACA,6BAGF,aACE,SACA,qBACA,CACA,+DADA,kBAEA,+CAGF,kBACE,WACA,oDAGF,kBACE,qEAGF,2BACE,CADF,mBACE,gEACA,iDAGF,UACE,6BAIA,kBACA,CAGA,oCACA,CADA,kBACA,CADA,gBACA,eACA,CAPF,mBACE,CACA,6BACA,qBACA,CAGA,8DACA,iDAGF,UACE,4BAIA,aACA,gBAFF,iBAGE,kCAGF,aACE,CAIA,mBAJA,QACA,qBACA,CACA,wBACA,CADA,oBACA,CADA,gBACA,CAFA,kBAGA,0BAGF,GACE,kBACE,WACA,UACA,KAGA,kBACA,eAFF,UAGE,IAEF,kBACE,WACA,UACA,EAjBF,iBAGF,GACE,kBACE,WACA,UACA,KAGA,kBACA,eAFF,UAGE,IAEF,kBACE,WACA,UACA,EChgIJ,WAIE,mBAHA,2BACA,kBACA,gBAEA,qKAIA,iBAaA,oCAIA,6BACA,CAjBA,0BAiBA,YAGA,mBAHA,mCAEA,kBACA,wMAOA,0CAlBA,gBACA,mCACA,kCACA,mCAFA,cAHA,oBAEA,CALA,eADA,kBAFA,eAEA,CAEA,qBACA,CAFA,aACA,CACA,mBACA,CAEA,kBAoCA,CAlBA,yBAeA,oCAEA,6BACA,CAjBA,mCAiBA,8BAEF,CAFE,mEAEF,iLAQE,uBAeA,kEAbA,gCAaA,YAGA,kBACA,CAJA,gCAEF,kBACE,iBACA,iLAUA,6CAtBA,iBAIA,kCACA,kCAEA,kCACA,CALF,aACE,CAJA,qBAFA,eADA,iBACA,CADA,gBAEA,sBADA,aACA,oBACA,mBAoCA,CAdA,sBAWA,qCAEF,4BACE,CAdA,gCAcA,YAGA,kBAEA,CALA,mCACA,kBACA,gBACA,CAEA,uLAQA,0BACA,6NADA,mCACA,6HC1HF,WAAW,qBAAqB,CAAC,iBAAiB,CAAC,eAAe,CAAC,iQAAnE,ouwBCAA,6CAME,iBAEA,mBADA,cAEA,kCACA,cAOA,qBAEA,iBACA,aATA,kBAIA,WAbA,gBACA,gBAEA,kBADA,mBAgBA,CAWF,wIAIE,mBACA,cAGF,iCAEE,mBACA,aAFA,kBAEA,CAGF,sBAGE,cAFA,cAGA,mBAFA,iBAEA,CAGF,2DAGE,cAGF,8BACE,WAGF,cACE,cAGF,iBACE,cAOF,mCACE,cAGF,eACE,cAeF,qDACE,cAGF,kBACE,cAGF,eACE,cAGF,gBACE,cAGF,eACE,cAGF,eACE,cAGF,cACE,cAGF,gBACE,cAGF,eACE,cAQF,2BACE,cACA,gBAGF,gBACE,cAGF,eACE,cAGF,cACE,cAGF,gBACE,cAGF,cACE,cAGF,gBACE,cAOF,0CACE,cAGF,mBACE,cAGF,aACE,cAGF,gBACE,cAGF,cACE,cAGF,cACE,cAGF,WACE,cAGF,YACE,cAOF,2BACE,cCxMF,MACE,2GAIF,UAEE,6BACA,qDAEA,8CACA,YACA,SACA,UACA,WAGF,YARE,8CAWA,CAHF,EAEE,yCACA,CAGF,MACE,YAGF,cACE,aACA,sBACA,8CACA,iBACA,oCALF,cAMI,mCAIJ,WACE,QAIA,CC9CA,0CD4CA,aADA,YAGA,YADA,UCjCE,CAZF,+BAYE,sBAHA,sBAFA,2BANA,cAIA,gBAFA,eAQA,UADA,iBAEA,CAEA,mCACE,YAGF,sDAGE,YADA,cADA,iBAEA,CAEA,qEAWE,kCACA,8DAFA,YAGA,6CARA,sBAEA,aACA,iBALA,OAMA,gBAKA,kBAVA,QAHA,MAKA,WAJA,SAYA,CAEA,6EACE,+DACA,uCAEA,gBAGF,oFACE,4DACA,0DAGF,8EACE,2DAIJ,gEAIE,+DADA,0BAEA,2DAHA,YADA,eAKA,cAEA,yFACE,0DACA,6BAGF,+FACE,0DAGF,uEACE,wBACA,uBAGF,wEAKE,yBADA,oCACA,CAEA,0EAEE,gCADA,sBACA,CAGF,sFACE,2BAGF,sFACE,2BAGF,sFACE,2BAGF,sFACE,2BAGF,sFACE,yBAGF,oFACE,wDAGF,wFACE,4JAMF,+FACE,wBAGF,4FACE,6CAEA,+FAIE,4BADA,4DADA,8DADA,+CAGA,CAGF,+FAGE,mBADA,8DADA,6CAEA,CAIJ,8OAGE,wEAKF,mGACE,0CAGF,qFAEE,qDADA,yCACA,CAIJ,gFACE,wEAGA,uDAKE,gNACE,wDAKN,uFAKE,wDAGF,gKAPE,wEAGA,sDAQA,CAEA,+EACE,wDAGF,sGAEE,kBADA,iBACA,CAIJ,+EACE,wEAGA,uDAEA,sFACE,iDAGF,qFACE,wDAGF,gHACE,iDADF,2GACE,iDADF,kGACE,iDCvNZ,iCAEI,gBADF,eAEE,6DAMI,gCACA,CAJF,qEACE,2DACA,8CACA,CACA,2DACA,0CAEA,4DAPF,2DAQI,0EAGF,gEACE,6EAGF,gDACE,WACA,wEAGF,oDACE,yEAGF,8DACE,CACA,uDADA,0DAEA,iEAGF,6CACE,qFAGF,kDACE,4EAGF,iFACE,kFAKF,uEACE,CCnDV,sBACE,iDAGF,sBACE,mBACA,gBAEA,8BACE,SAGF,mCACE,eAGF,mCACE,cAGF,iCACE,WAGF,8CACE,cAIJ,oBACE,sBACA,gBAIA,8BACE,YAGF,8BACE,WAGF,+BACE,SAXiB,CAcnB,yCACE","sources":["../node_modules/sn-stylekit/dist/stylekit.css","../node_modules/material-icons/iconfont/material-icons.css","../node_modules/katex/dist/katex.min.css","stylesheets/prism/material-light.css","stylesheets/main.scss","components/Milkdown/styles.scss","components/CodeMirror/styles.scss","components/SplitView/styles.scss"],"sourcesContent":["@charset \"UTF-8\";\n/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n/* Document\n   ========================================================================== */\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\nhtml {\n  line-height: 1.15;\n  /* 1 */\n  -webkit-text-size-adjust: 100%;\n  /* 2 */\n}\n\n/* Sections\n   ========================================================================== */\n/**\n * Remove the margin in all browsers.\n */\nbody {\n  margin: 0;\n}\n\n/**\n * Render the `main` element consistently in IE.\n */\nmain {\n  display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\nh1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}\n\n/* Grouping content\n   ========================================================================== */\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\nhr {\n  box-sizing: content-box;\n  /* 1 */\n  height: 0;\n  /* 1 */\n  overflow: visible;\n  /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\npre {\n  font-family: monospace, monospace;\n  /* 1 */\n  font-size: 1em;\n  /* 2 */\n}\n\n/* Text-level semantics\n   ========================================================================== */\n/**\n * Remove the gray background on active links in IE 10.\n */\na {\n  background-color: transparent;\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\nabbr[title] {\n  border-bottom: none;\n  /* 1 */\n  text-decoration: underline;\n  /* 2 */\n  text-decoration: underline dotted;\n  /* 2 */\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace;\n  /* 1 */\n  font-size: 1em;\n  /* 2 */\n}\n\n/**\n * Add the correct font size in all browsers.\n */\nsmall {\n  font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/* Embedded content\n   ========================================================================== */\n/**\n * Remove the border on images inside links in IE 10.\n */\nimg {\n  border-style: none;\n}\n\n/* Forms\n   ========================================================================== */\n/**\n * 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit;\n  /* 1 */\n  font-size: 100%;\n  /* 1 */\n  line-height: 1.15;\n  /* 1 */\n  margin: 0;\n  /* 2 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\nbutton,\ninput {\n  /* 1 */\n  overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\nbutton,\nselect {\n  /* 1 */\n  text-transform: none;\n}\n\n/**\n * Correct the inability to style clickable types in iOS and Safari.\n */\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n  -webkit-appearance: button;\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\nfieldset {\n  padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n *    `fieldset` elements in all browsers.\n */\nlegend {\n  box-sizing: border-box;\n  /* 1 */\n  color: inherit;\n  /* 2 */\n  display: table;\n  /* 1 */\n  max-width: 100%;\n  /* 1 */\n  padding: 0;\n  /* 3 */\n  white-space: normal;\n  /* 1 */\n}\n\n/**\n * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\nprogress {\n  vertical-align: baseline;\n}\n\n/**\n * Remove the default vertical scrollbar in IE 10+.\n */\ntextarea {\n  overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n */\n[type=\"checkbox\"],\n[type=\"radio\"] {\n  box-sizing: border-box;\n  /* 1 */\n  padding: 0;\n  /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n[type=\"search\"] {\n  -webkit-appearance: textfield;\n  /* 1 */\n  outline-offset: -2px;\n  /* 2 */\n}\n\n/**\n * Remove the inner padding in Chrome and Safari on macOS.\n */\n[type=\"search\"]::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n::-webkit-file-upload-button {\n  -webkit-appearance: button;\n  /* 1 */\n  font: inherit;\n  /* 2 */\n}\n\n/* Interactive\n   ========================================================================== */\n/*\n * Add the correct display in Edge, IE 10+, and Firefox.\n */\ndetails {\n  display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\nsummary {\n  display: list-item;\n}\n\n/* Misc\n   ========================================================================== */\n/**\n * Add the correct display in IE 10+.\n */\ntemplate {\n  display: none;\n}\n\n/**\n * Add the correct display in IE 10.\n */\n[hidden] {\n  display: none;\n}\n\n:root {\n  --sn-stylekit-base-font-size: 0.8125rem;\n  --sn-stylekit-font-size-p: 0.8125rem;\n  --sn-stylekit-font-size-editor: 0.983125rem;\n  --sn-stylekit-font-size-h6: 0.65rem;\n  --sn-stylekit-font-size-h5: 0.73125rem;\n  --sn-stylekit-font-size-h4: 0.8125rem;\n  --sn-stylekit-font-size-h3: 0.89375rem;\n  --sn-stylekit-font-size-h2: 0.975rem;\n  --sn-stylekit-font-size-h1: 1.05625rem;\n  --sn-stylekit-white: #ffffff;\n  --sn-stylekit-black: #19191c;\n  --sn-stylekit-grey-1: #72767e;\n  --sn-stylekit-grey-2: #bbbec4;\n  --sn-stylekit-grey-3: #dfe1e4;\n  --sn-stylekit-grey-4: #eeeff1;\n  --sn-stylekit-grey-4-opacity-variant: #bbbec43d;\n  --sn-stylekit-grey-5: #f4f5f7;\n  --sn-stylekit-grey-6: #e5e5e5;\n  --sn-stylekit-grey-super-light: #f9f9f9;\n  --sn-stylekit-dark-red: #cc2128;\n  --sn-stylekit-neutral-color: #989898;\n  --sn-stylekit-neutral-contrast-color: #ffffff;\n  --sn-stylekit-info-color: #086dd6;\n  --sn-stylekit-info-color-darkened: #065cb5;\n  --sn-stylekit-info-contrast-color: #ffffff;\n  --sn-stylekit-info-backdrop-color: #2b6fcf0f;\n  --sn-stylekit-success-color: #2b9612;\n  --sn-stylekit-success-contrast-color: #ffffff;\n  --sn-stylekit-warning-color: #f6a200;\n  --sn-stylekit-warning-contrast-color: #ffffff;\n  --sn-stylekit-danger-color: #f80324;\n  --sn-stylekit-danger-contrast-color: #ffffff;\n  --sn-stylekit-shadow-color: #c8c8c8;\n  --sn-stylekit-background-color: #ffffff;\n  --sn-stylekit-border-color: #dfe1e4;\n  --sn-stylekit-foreground-color: #000000;\n  --sn-stylekit-contrast-background-color: #f6f6f6;\n  --sn-stylekit-contrast-foreground-color: #2e2e2e;\n  --sn-stylekit-contrast-border-color: #e3e3e3;\n  --sn-stylekit-secondary-background-color: #f6f6f6;\n  --sn-stylekit-secondary-foreground-color: #2e2e2e;\n  --sn-stylekit-secondary-border-color: #e3e3e3;\n  --sn-stylekit-secondary-contrast-background-color: #e3e3e3;\n  --sn-stylekit-secondary-contrast-foreground-color: #2e2e2e;\n  --sn-stylekit-secondary-contrast-border-color: #a2a2a2;\n  --sn-stylekit-editor-background-color: var(--sn-stylekit-background-color);\n  --sn-stylekit-editor-foreground-color: var(--sn-stylekit-foreground-color);\n  --sn-stylekit-paragraph-text-color: #454545;\n  --sn-stylekit-input-placeholder-color: #a8a8a8;\n  --sn-stylekit-input-border-color: #e3e3e3;\n  --sn-stylekit-scrollbar-thumb-color: #dfdfdf;\n  --sn-stylekit-scrollbar-track-border-color: #e7e7e7;\n  --sn-stylekit-menu-border: none;\n  --sn-stylekit-general-border-radius: 2px;\n  --sn-stylekit-list-item-highlight-color: var(--sn-stylekit-grey-5);\n  --sn-stylekit-simplified-chinese-font: 'Microsoft Yahei', '微软雅黑体';\n  --sn-stylekit-monospace-font: 'SFMono-Regular', Consolas, 'Liberation Mono',\n    Menlo, 'Ubuntu Mono', 'Courier New', monospace;\n  --sn-stylekit-sans-serif-font: -apple-system, BlinkMacSystemFont, 'Segoe UI',\n    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',\n    'Helvetica Neue', var(--sn-stylekit-simplified-chinese-font), sans-serif;\n  --sn-stylekit-editor-font-family: var(--sn-stylekit-sans-serif-font);\n  --sn-stylekit-theme-type: light;\n  --sn-stylekit-theme-name: sn-light;\n  --sn-stylekit-accessory-tint-color-1: #086dd6;\n  --sn-stylekit-accessory-tint-color-2: #ea6595;\n  --sn-stylekit-accessory-tint-color-3: #ebad00;\n  --sn-stylekit-accessory-tint-color-4: #7049cf;\n  --sn-stylekit-accessory-tint-color-5: #1aa772;\n  --sn-stylekit-accessory-tint-color-6: #f28c52;\n}\n\n.sn-component {\n  /**\n * Do not use these rules without explicitly handling focus in a different\n * way, otherwise keyboard focus will break.\n */\n  /**\n * A button that is just an icon. Separated from .sn-button because there\n * is almost no style overlap.\n */\n  font-family: var(--sn-stylekit-sans-serif-font);\n  -webkit-font-smoothing: antialiased;\n  color: var(--sn-stylekit-foreground-color);\n}\n\n.sn-component .sk-panel {\n  box-shadow: 0px 2px 5px var(--sn-stylekit-shadow-color);\n  background-color: var(--sn-stylekit-background-color);\n  border: 1px solid var(--sn-stylekit-border-color);\n  border-radius: var(--sn-stylekit-general-border-radius);\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  flex-grow: 1;\n}\n\n.sn-component .sk-panel a:hover {\n  text-decoration: underline;\n}\n\n.sn-component .sk-panel.static {\n  box-shadow: none;\n  border: none;\n  border-radius: 0;\n}\n\n.sn-component .sk-panel .sk-panel-header {\n  flex-shrink: 0;\n  /* Don't allow to condense in height */\n  display: flex;\n  justify-content: space-between;\n  padding: 0.89375rem 1.625rem;\n  border-bottom: 1px solid var(--sn-stylekit-contrast-border-color);\n  background-color: var(--sn-stylekit-contrast-background-color);\n  color: var(--sn-stylekit-contrast-foreground-color);\n  align-items: center;\n}\n\n.sn-component .sk-panel .sk-panel-header .sk-panel-header-title {\n  font-size: var(--sn-stylekit-font-size-h1);\n  font-weight: 500;\n}\n\n.sn-component .sk-panel .sk-panel-header .close-button {\n  font-weight: bold;\n}\n\n.sn-component .sk-panel .sk-footer,\n.sn-component .sk-panel .sk-panel-footer {\n  padding: 0.8125rem 1.625rem;\n  border-top: 1px solid var(--sn-stylekit-border-color);\n  box-sizing: border-box;\n}\n\n.sn-component .sk-panel .sk-footer.extra-padding,\n.sn-component .sk-panel .sk-panel-footer.extra-padding {\n  padding: 1.625rem 1.625rem;\n}\n\n.sn-component .sk-panel .sk-footer .left,\n.sn-component .sk-panel .sk-panel-footer .left {\n  text-align: left;\n  display: block;\n}\n\n.sn-component .sk-panel .sk-footer .right,\n.sn-component .sk-panel .sk-panel-footer .right {\n  text-align: right;\n  display: block;\n}\n\n.sn-component .sk-panel .sk-panel-content {\n  padding: 1.3rem 1.625rem;\n  padding-bottom: 0;\n  flex-grow: 1;\n  overflow: scroll;\n  height: 100%;\n  overflow-y: auto !important;\n  overflow-x: auto !important;\n}\n\n.sn-component .sk-panel .sk-panel-content .sk-p,\n.sn-component .sk-panel .sk-panel-content .sk-li {\n  color: var(--sn-stylekit-paragraph-text-color);\n  line-height: 1.3;\n}\n\n.sn-component .sk-panel-section {\n  padding-bottom: 1.3rem;\n  display: flex;\n  flex-direction: column;\n}\n\n.sn-component .sk-panel-section.sk-panel-hero {\n  text-align: center;\n}\n\n.sn-component .sk-panel-section .sk-p:last-child {\n  margin-bottom: 0;\n}\n\n.sn-component .sk-panel-section:not(:last-child) {\n  margin-bottom: 1.21875rem;\n  border-bottom: 1px solid var(--sn-stylekit-border-color);\n}\n\n.sn-component .sk-panel-section:not(:last-child).no-border {\n  border-bottom: none;\n}\n\n.sn-component .sk-panel-section:last-child {\n  margin-bottom: 0.5rem;\n}\n\n.sn-component .sk-panel-section.no-bottom-pad {\n  padding-bottom: 0;\n  margin-bottom: 0;\n}\n\n.sn-component .sk-panel-section .sk-panel-section-title {\n  margin-bottom: 0.40625rem;\n  font-weight: bold;\n  font-size: var(--sn-stylekit-font-size-h3);\n}\n\n.sn-component .sk-panel-section .sk-panel-section-outer-title {\n  border-bottom: 1px solid var(--sn-stylekit-border-color);\n  padding-bottom: 0.73125rem;\n  margin-top: 1.70625rem;\n  margin-bottom: 15px;\n  font-size: var(--sn-stylekit-font-size-h3);\n}\n\n.sn-component .sk-panel-section .sk-panel-section-subtitle {\n  font-size: var(--sn-stylekit-font-size-h5);\n  margin-bottom: 2px;\n}\n\n.sn-component .sk-panel-section .sk-panel-section-subtitle.subtle {\n  font-weight: normal;\n  opacity: 0.6;\n}\n\n.sn-component .sk-panel-section .text-content .sk-p {\n  margin-bottom: 0.8175rem;\n}\n\n.sn-component .sk-panel-section .text-content p:first-child {\n  margin-top: 0.24375rem;\n}\n\n.sn-component .sk-panel-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-top: 0.325rem;\n}\n\n.sn-component .sk-panel-row.centered {\n  justify-content: center;\n}\n\n.sn-component .sk-panel-row.justify-right {\n  justify-content: flex-end;\n}\n\n.sn-component .sk-panel-row.justify-left {\n  justify-content: flex-start;\n}\n\n.sn-component .sk-panel-row.align-top {\n  align-items: flex-start;\n}\n\n.sn-component .sk-panel-row .sk-panel-column.stretch {\n  width: 100%;\n}\n\n.sn-component .sk-panel-row.default-padding, .sn-component .sk-panel-row:not(:last-child) {\n  padding-bottom: 0.325rem;\n}\n\n.sn-component .sk-panel-row.condensed {\n  padding-top: 0.1625rem;\n  padding-bottom: 0.1625rem;\n}\n\n.sn-component .sk-panel-row .sk-p {\n  margin: 0;\n  padding: 0;\n}\n\n.sn-component .vertical-rule {\n  background-color: var(--sn-stylekit-border-color);\n  height: 1.21875rem;\n  width: 1px;\n}\n\n.sn-component .sk-panel-form {\n  width: 100%;\n}\n\n.sn-component .sk-panel-form.half {\n  width: 50%;\n}\n\n.sn-component .sk-panel-form .form-submit {\n  margin-top: 0.121875rem;\n}\n\n.sn-component .right-aligned {\n  justify-content: flex-end;\n  text-align: right;\n}\n\n.sn-component .sk-menu-panel {\n  background-color: var(--sn-stylekit-background-color);\n  border: 1px solid var(--sn-stylekit-contrast-border-color);\n  border-radius: var(--sn-stylekit-general-border-radius);\n  overflow: scroll;\n  user-select: none;\n  overflow-y: auto !important;\n  overflow-x: auto !important;\n}\n\n.sn-component .sk-menu-panel .sk-menu-panel-header {\n  padding: 0.65rem 0.8125rem;\n  border-bottom: 1px solid var(--sn-stylekit-contrast-border-color);\n  background-color: var(--sn-stylekit-contrast-background-color);\n  color: var(--sn-stylekit-contrast-foreground-color);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.sn-component .sk-menu-panel .sk-menu-panel-header-title {\n  font-weight: bold;\n  font-size: var(--sn-stylekit-font-size-h4);\n}\n\n.sn-component .sk-menu-panel .sk-menu-panel-header-subtitle {\n  margin-top: 0.1625rem;\n  opacity: 0.6;\n}\n\n.sn-component .sk-menu-panel .sk-menu-panel-row {\n  padding: 0.8125rem 0.8125rem;\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  border-bottom: 1px solid var(--sn-stylekit-border-color);\n}\n\n.sn-component .sk-menu-panel .sk-menu-panel-row:hover {\n  background-color: var(--sn-stylekit-contrast-background-color);\n  color: var(--sn-stylekit-contrast-foreground-color);\n  border-color: var(--sn-stylekit-contrast-border-color);\n}\n\n.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column {\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  /* Nested row */\n}\n\n.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column:not(:first-child) {\n  padding-left: 1rem;\n  padding-right: 0.121875rem;\n}\n\n.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column.stretch {\n  width: 100%;\n}\n\n.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .sk-menu-panel-subrows {\n  margin-top: 0.8125rem;\n}\n\n.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .sk-menu-panel-row,\n.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .sk-menu-panel-subrow {\n  border: 1px solid var(--sn-stylekit-contrast-border-color);\n  margin-top: -1px;\n}\n\n.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .sk-menu-panel-row:hover,\n.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .sk-menu-panel-subrow:hover {\n  background-color: var(--sn-stylekit-background-color);\n}\n\n.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .left {\n  display: flex;\n}\n\n.sn-component .sk-menu-panel .sk-menu-panel-row .sk-button .sk-label, .sn-component .sk-menu-panel .sk-menu-panel-row .sk-box .sk-label, .sn-component .sk-menu-panel .sk-menu-panel-row .sk-button .sk-panel-section .sk-panel-section-subtitle, .sn-component .sk-panel-section .sk-menu-panel .sk-menu-panel-row .sk-button .sk-panel-section-subtitle, .sn-component .sk-menu-panel .sk-menu-panel-row .sk-box .sk-panel-section .sk-panel-section-subtitle, .sn-component .sk-panel-section .sk-menu-panel .sk-menu-panel-row .sk-box .sk-panel-section-subtitle {\n  font-size: var(--sn-stylekit-font-size-h6);\n  font-weight: normal;\n}\n\n.sn-component .sk-menu-panel .sk-menu-panel-row .sk-label, .sn-component .sk-menu-panel .sk-menu-panel-row .sk-panel-section .sk-panel-section-subtitle, .sn-component .sk-panel-section .sk-menu-panel .sk-menu-panel-row .sk-panel-section-subtitle {\n  font-size: var(--sn-stylekit-font-size-p);\n  font-weight: bold;\n}\n\n.sn-component .sk-menu-panel .sk-menu-panel-row .sk-sublabel {\n  font-size: var(--sn-stylekit-font-size-h5);\n  margin-top: 0.1625rem;\n  opacity: 0.6;\n}\n\n.sn-component .red {\n  color: var(--sn-stylekit-danger-color);\n}\n\n.sn-component .tinted {\n  color: var(--sn-stylekit-info-color);\n}\n\n.sn-component .selectable {\n  user-select: text !important;\n  -ms-user-select: text !important;\n  -moz-user-select: text !important;\n  -webkit-user-select: text !important;\n}\n\n.sn-component .sk-h1,\n.sn-component .sk-h2,\n.sn-component .sk-h3,\n.sn-component .sk-h4,\n.sn-component .sk-h5 {\n  margin: 0;\n  padding: 0;\n  font-weight: normal;\n}\n\n.sn-component .sk-h1 {\n  font-weight: 500;\n  font-size: var(--sn-stylekit-font-size-h1);\n  line-height: 1.54375rem;\n}\n\n.sn-component .sk-h2 {\n  font-size: var(--sn-stylekit-font-size-h2);\n  line-height: 1.4625rem;\n}\n\n.sn-component .sk-h3 {\n  font-size: var(--sn-stylekit-font-size-h3);\n  line-height: 1.38125rem;\n}\n\n.sn-component .sk-h4 {\n  font-size: var(--sn-stylekit-font-size-p);\n  line-height: 1.1375rem;\n}\n\n.sn-component .sk-h5 {\n  font-size: var(--sn-stylekit-font-size-h5);\n}\n\n.sn-component .sk-bold {\n  font-weight: bold;\n}\n\n.sn-component .sk-font-small {\n  font-size: var(--sn-stylekit-font-size-h5);\n}\n\n.sn-component .sk-font-normal {\n  font-size: var(--sn-stylekit-font-size-p);\n}\n\n.sn-component .sk-font-large {\n  font-size: var(--sn-stylekit-font-size-h3);\n}\n\n.sn-component a.sk-a {\n  cursor: pointer;\n  user-select: none;\n}\n\n.sn-component a.sk-a.disabled {\n  color: var(--sn-stylekit-neutral-color);\n  opacity: 0.6;\n}\n\n.sn-component a.sk-a.boxed {\n  border-radius: var(--sn-stylekit-general-border-radius);\n  padding: 0.24375rem 0.325rem;\n}\n\n.sn-component a.sk-a.boxed:hover {\n  text-decoration: none;\n}\n\n.sn-component a.sk-a.boxed.neutral {\n  background-color: var(--sn-stylekit-neutral-color);\n  color: var(--sn-stylekit-neutral-contrast-color);\n}\n\n.sn-component a.sk-a.boxed.info {\n  background-color: var(--sn-stylekit-info-color);\n  color: var(--sn-stylekit-info-contrast-color);\n}\n\n.sn-component a.sk-a.boxed.warning {\n  background-color: var(--sn-stylekit-warning-color);\n  color: var(--sn-stylekit-warning-contrast-color);\n}\n\n.sn-component a.sk-a.boxed.danger {\n  background-color: var(--sn-stylekit-danger-color);\n  color: var(--sn-stylekit-danger-contrast-color);\n}\n\n.sn-component a.sk-a.boxed.success {\n  background-color: var(--sn-stylekit-success-color);\n  color: var(--sn-stylekit-success-contrast-color);\n}\n\n.sn-component .wrap {\n  word-wrap: break-word;\n}\n\n.sn-component *.sk-base {\n  color: var(--sn-stylekit-foreground-color);\n}\n\n.sn-component *.contrast {\n  color: var(--sn-stylekit-contrast-foreground-color);\n}\n\n.sn-component *.neutral {\n  color: var(--sn-stylekit-neutral-color);\n}\n\n.sn-component *.info {\n  color: var(--sn-stylekit-info-color);\n}\n\n.sn-component *.info-contrast {\n  color: var(--sn-stylekit-info-contrast-color);\n}\n\n.sn-component *.warning {\n  color: var(--sn-stylekit-warning-color);\n}\n\n.sn-component *.danger {\n  color: var(--sn-stylekit-danger-color);\n}\n\n.sn-component *.success {\n  color: var(--sn-stylekit-success-color);\n}\n\n.sn-component *.info-i {\n  color: var(--sn-stylekit-info-color) !important;\n}\n\n.sn-component *.warning-i {\n  color: var(--sn-stylekit-warning-color) !important;\n}\n\n.sn-component *.danger-i {\n  color: var(--sn-stylekit-danger-color) !important;\n}\n\n.sn-component *.success-i {\n  color: var(--sn-stylekit-success-color) !important;\n}\n\n.sn-component *.clear {\n  background-color: transparent;\n  border: none;\n}\n\n.sn-component .center-text {\n  text-align: center !important;\n  justify-content: center !important;\n}\n\n.sn-component p.sk-p {\n  margin: 0.40625rem 0;\n}\n\n.sn-component input.sk-input {\n  box-sizing: border-box;\n  padding: 0.56875rem 0.65rem;\n  margin: 0.24375rem 0;\n  border: none;\n  font-size: var(--sn-stylekit-font-size-h3);\n  width: 100%;\n  outline: 0;\n  resize: none;\n}\n\n.sn-component input.sk-input.clear {\n  color: var(--sn-stylekit-foreground-color);\n  background-color: transparent;\n  border: none;\n}\n\n.sn-component input.sk-input.no-border {\n  border: none;\n}\n\n.sn-component .sk-label, .sn-component .sk-panel-section .sk-panel-section-subtitle {\n  font-weight: bold;\n}\n\n.sn-component .sk-label.no-bold, .sn-component .sk-panel-section .no-bold.sk-panel-section-subtitle {\n  font-weight: normal;\n}\n\n.sn-component label.sk-label, .sn-component .sk-panel-section label.sk-panel-section-subtitle {\n  margin: 0.56875rem 0;\n  display: block;\n}\n\n.sn-component label.sk-label input[type='checkbox'], .sn-component .sk-panel-section label.sk-panel-section-subtitle input[type='checkbox'],\n.sn-component input[type='radio'] {\n  width: auto;\n  margin-right: 0.365625rem;\n  /* Space after checkbox */\n  vertical-align: middle;\n}\n\n.sn-component .sk-horizontal-group > *, .sn-component .sk-input-group > * {\n  display: inline-block;\n  vertical-align: middle;\n}\n\n.sn-component .sk-horizontal-group > *:not(:first-child), .sn-component .sk-input-group > *:not(:first-child) {\n  margin-left: 0.73125rem;\n}\n\n.sn-component .sk-border-bottom {\n  border-bottom: 1px solid var(--sn-stylekit-border-color);\n}\n\n.sn-component .sk-checkbox-group {\n  padding-top: 0.40625rem;\n  padding-bottom: 0.24375rem;\n}\n\n.sn-component ::placeholder {\n  /* Chrome, Firefox, Opera, Safari 10.1+ */\n  color: var(--sn-stylekit-input-placeholder-color);\n}\n\n.sn-component :-ms-input-placeholder {\n  /* Internet Explorer 10-11 */\n  color: var(--sn-stylekit-input-placeholder-color);\n}\n\n.sn-component ::-ms-input-placeholder {\n  /* Microsoft Edge */\n  color: var(--sn-stylekit-input-placeholder-color);\n}\n\n.sn-component .sk-button-group.stretch {\n  display: flex;\n  width: 100%;\n}\n\n.sn-component .sk-button-group.stretch .sk-button, .sn-component .sk-button-group.stretch .sk-box {\n  display: block;\n  flex-grow: 1;\n  text-align: center;\n}\n\n.sn-component .sk-button-group .sk-button, .sn-component .sk-button-group .sk-box {\n  display: inline-block;\n  vertical-align: middle;\n}\n\n.sn-component .sk-button-group .sk-button:not(:last-child), .sn-component .sk-button-group .sk-box:not(:last-child) {\n  margin-right: 5px;\n}\n\n.sn-component .sk-button-group .sk-button:not(:last-child).featured, .sn-component .sk-button-group .sk-box:not(:last-child).featured {\n  margin-right: 8px;\n}\n\n.sn-component .sk-segmented-buttons {\n  display: flex;\n  flex-direction: row;\n}\n\n.sn-component .sk-segmented-buttons .sk-button, .sn-component .sk-segmented-buttons .sk-box {\n  border-radius: 0;\n  white-space: nowrap;\n  margin: 0;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n\n.sn-component .sk-segmented-buttons .sk-button:not(:last-child), .sn-component .sk-segmented-buttons .sk-box:not(:last-child) {\n  border-right: none;\n  border-radius: 0;\n}\n\n.sn-component .sk-segmented-buttons .sk-button:first-child, .sn-component .sk-segmented-buttons .sk-box:first-child {\n  border-top-left-radius: var(--sn-stylekit-general-border-radius);\n  border-bottom-left-radius: var(--sn-stylekit-general-border-radius);\n  border-right: none;\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.sn-component .sk-segmented-buttons .sk-button:last-child, .sn-component .sk-segmented-buttons .sk-box:last-child {\n  border-top-right-radius: var(--sn-stylekit-general-border-radius);\n  border-bottom-right-radius: var(--sn-stylekit-general-border-radius);\n  border-left: none;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.sn-component .sk-box-group .sk-box {\n  display: inline-block;\n}\n\n.sn-component .sk-box-group .sk-box:not(:last-child) {\n  margin-right: 5px;\n}\n\n.sn-component .sk-a.button {\n  text-decoration: none;\n}\n\n.sn-component .sk-button, .sn-component .sk-box {\n  display: table;\n  padding: 0.40625rem 0.56875rem;\n  font-size: var(--sn-stylekit-font-size-h5);\n  cursor: pointer;\n  text-align: center;\n  user-select: none;\n}\n\n.sn-component .sk-button.no-hover-border:after, .sn-component .no-hover-border.sk-box:after {\n  color: transparent !important;\n}\n\n.sn-component .sk-button.wide, .sn-component .wide.sk-box {\n  padding: 0.24375rem 1.38125rem;\n}\n\n.sn-component .sk-button > .sk-label, .sn-component .sk-box > .sk-label, .sn-component .sk-panel-section .sk-button > .sk-panel-section-subtitle, .sn-component .sk-panel-section .sk-box > .sk-panel-section-subtitle {\n  font-weight: bold;\n  display: block;\n  text-align: center;\n}\n\n.sn-component .sk-button.big, .sn-component .big.sk-box {\n  font-size: var(--sn-stylekit-font-size-h3);\n  padding: 0.56875rem 2.03125rem;\n}\n\n.sn-component .sk-box {\n  padding: 2.03125rem 1.21875rem;\n}\n\n.sn-component .sk-button.sk-base, .sn-component .sk-base.sk-box,\n.sn-component .sk-box.sk-base,\n.sn-component .sk-circle.sk-base {\n  /*\n    If $border-color is supplied, we use traditional borders for rect.\n    Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders.\n    If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders\n  */\n  color: var(--sn-stylekit-foreground-color);\n  position: relative;\n  background-color: var(--sn-stylekit-background-color);\n  overflow: hidden;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  /*\n    We use box-shadow instead of border so that the borders are rounded properly around the rect.\n    We keep border-color as well incase the individual elements want a border in some cases.\n  */\n  border-color: var(--sn-stylekit-background-color);\n}\n\n.sn-component .sk-button.sk-base *, .sn-component .sk-base.sk-box *,\n.sn-component .sk-box.sk-base *,\n.sn-component .sk-circle.sk-base * {\n  position: relative;\n}\n\n.sn-component .sk-button.sk-base:before, .sn-component .sk-base.sk-box:before,\n.sn-component .sk-box.sk-base:before,\n.sn-component .sk-circle.sk-base:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--sn-stylekit-background-color);\n  opacity: 1;\n  border-radius: var(--sn-stylekit-general-border-radius);\n}\n\n.sn-component .sk-button.sk-base:after, .sn-component .sk-base.sk-box:after,\n.sn-component .sk-box.sk-base:after,\n.sn-component .sk-circle.sk-base:after {\n  content: '';\n  display: block;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  pointer-events: none;\n  box-shadow: inset 0 0 0 1px;\n  color: var(--sn-stylekit-background-color);\n}\n\n.sn-component .sk-button.sk-base:hover:before, .sn-component .sk-base.sk-box:hover:before,\n.sn-component .sk-box.sk-base:hover:before,\n.sn-component .sk-circle.sk-base:hover:before {\n  filter: brightness(130%);\n}\n\n.sn-component .sk-button.sk-base.no-bg, .sn-component .sk-base.no-bg.sk-box,\n.sn-component .sk-box.sk-base.no-bg,\n.sn-component .sk-circle.sk-base.no-bg {\n  background-color: transparent;\n}\n\n.sn-component .sk-button.sk-base.no-bg:before, .sn-component .sk-base.no-bg.sk-box:before,\n.sn-component .sk-box.sk-base.no-bg:before,\n.sn-component .sk-circle.sk-base.no-bg:before {\n  content: none;\n}\n\n.sn-component .sk-button.sk-base.featured, .sn-component .sk-base.featured.sk-box,\n.sn-component .sk-box.sk-base.featured,\n.sn-component .sk-circle.sk-base.featured {\n  border: none;\n  padding: 0.609375rem 1.015625rem;\n  font-size: var(--sn-stylekit-font-size-h3);\n}\n\n.sn-component .sk-button.sk-base.featured:before, .sn-component .sk-base.featured.sk-box:before,\n.sn-component .sk-box.sk-base.featured:before,\n.sn-component .sk-circle.sk-base.featured:before {\n  opacity: 1;\n}\n\n.sn-component .sk-button.contrast, .sn-component .contrast.sk-box,\n.sn-component .sk-box.contrast,\n.sn-component .sk-circle.contrast {\n  /*\n    If $border-color is supplied, we use traditional borders for rect.\n    Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders.\n    If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders\n  */\n  color: var(--sn-stylekit-contrast-foreground-color);\n  position: relative;\n  background-color: var(--sn-stylekit-contrast-background-color);\n  overflow: hidden;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  /*\n    We use box-shadow instead of border so that the borders are rounded properly around the rect.\n    We keep border-color as well incase the individual elements want a border in some cases.\n  */\n  border-color: var(--sn-stylekit-contrast-background-color);\n}\n\n.sn-component .sk-button.contrast *, .sn-component .contrast.sk-box *,\n.sn-component .sk-box.contrast *,\n.sn-component .sk-circle.contrast * {\n  position: relative;\n}\n\n.sn-component .sk-button.contrast:before, .sn-component .contrast.sk-box:before,\n.sn-component .sk-box.contrast:before,\n.sn-component .sk-circle.contrast:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--sn-stylekit-contrast-background-color);\n  opacity: 1;\n  border-radius: var(--sn-stylekit-general-border-radius);\n}\n\n.sn-component .sk-button.contrast:after, .sn-component .contrast.sk-box:after,\n.sn-component .sk-box.contrast:after,\n.sn-component .sk-circle.contrast:after {\n  content: '';\n  display: block;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  pointer-events: none;\n  box-shadow: inset 0 0 0 1px;\n  color: var(--sn-stylekit-contrast-background-color);\n}\n\n.sn-component .sk-button.contrast:hover:before, .sn-component .contrast.sk-box:hover:before,\n.sn-component .sk-box.contrast:hover:before,\n.sn-component .sk-circle.contrast:hover:before {\n  filter: brightness(130%);\n}\n\n.sn-component .sk-button.contrast.no-bg, .sn-component .contrast.no-bg.sk-box,\n.sn-component .sk-box.contrast.no-bg,\n.sn-component .sk-circle.contrast.no-bg {\n  background-color: transparent;\n}\n\n.sn-component .sk-button.contrast.no-bg:before, .sn-component .contrast.no-bg.sk-box:before,\n.sn-component .sk-box.contrast.no-bg:before,\n.sn-component .sk-circle.contrast.no-bg:before {\n  content: none;\n}\n\n.sn-component .sk-button.contrast.featured, .sn-component .contrast.featured.sk-box,\n.sn-component .sk-box.contrast.featured,\n.sn-component .sk-circle.contrast.featured {\n  border: none;\n  padding: 0.609375rem 1.015625rem;\n  font-size: var(--sn-stylekit-font-size-h3);\n}\n\n.sn-component .sk-button.contrast.featured:before, .sn-component .contrast.featured.sk-box:before,\n.sn-component .sk-box.contrast.featured:before,\n.sn-component .sk-circle.contrast.featured:before {\n  opacity: 1;\n}\n\n.sn-component .sk-button.sk-secondary, .sn-component .sk-secondary.sk-box,\n.sn-component .sk-box.sk-secondary,\n.sn-component .sk-circle.sk-secondary {\n  /*\n    If $border-color is supplied, we use traditional borders for rect.\n    Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders.\n    If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders\n  */\n  color: var(--sn-stylekit-secondary-foreground-color);\n  position: relative;\n  background-color: var(--sn-stylekit-secondary-background-color);\n  overflow: hidden;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  /*\n    We use box-shadow instead of border so that the borders are rounded properly around the rect.\n    We keep border-color as well incase the individual elements want a border in some cases.\n  */\n  border-color: var(--sn-stylekit-secondary-background-color);\n}\n\n.sn-component .sk-button.sk-secondary *, .sn-component .sk-secondary.sk-box *,\n.sn-component .sk-box.sk-secondary *,\n.sn-component .sk-circle.sk-secondary * {\n  position: relative;\n}\n\n.sn-component .sk-button.sk-secondary:before, .sn-component .sk-secondary.sk-box:before,\n.sn-component .sk-box.sk-secondary:before,\n.sn-component .sk-circle.sk-secondary:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--sn-stylekit-secondary-background-color);\n  opacity: 1;\n  border-radius: var(--sn-stylekit-general-border-radius);\n}\n\n.sn-component .sk-button.sk-secondary:after, .sn-component .sk-secondary.sk-box:after,\n.sn-component .sk-box.sk-secondary:after,\n.sn-component .sk-circle.sk-secondary:after {\n  content: '';\n  display: block;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  pointer-events: none;\n  box-shadow: inset 0 0 0 1px;\n  color: var(--sn-stylekit-secondary-background-color);\n}\n\n.sn-component .sk-button.sk-secondary:hover:before, .sn-component .sk-secondary.sk-box:hover:before,\n.sn-component .sk-box.sk-secondary:hover:before,\n.sn-component .sk-circle.sk-secondary:hover:before {\n  filter: brightness(130%);\n}\n\n.sn-component .sk-button.sk-secondary.no-bg, .sn-component .sk-secondary.no-bg.sk-box,\n.sn-component .sk-box.sk-secondary.no-bg,\n.sn-component .sk-circle.sk-secondary.no-bg {\n  background-color: transparent;\n}\n\n.sn-component .sk-button.sk-secondary.no-bg:before, .sn-component .sk-secondary.no-bg.sk-box:before,\n.sn-component .sk-box.sk-secondary.no-bg:before,\n.sn-component .sk-circle.sk-secondary.no-bg:before {\n  content: none;\n}\n\n.sn-component .sk-button.sk-secondary.featured, .sn-component .sk-secondary.featured.sk-box,\n.sn-component .sk-box.sk-secondary.featured,\n.sn-component .sk-circle.sk-secondary.featured {\n  border: none;\n  padding: 0.609375rem 1.015625rem;\n  font-size: var(--sn-stylekit-font-size-h3);\n}\n\n.sn-component .sk-button.sk-secondary.featured:before, .sn-component .sk-secondary.featured.sk-box:before,\n.sn-component .sk-box.sk-secondary.featured:before,\n.sn-component .sk-circle.sk-secondary.featured:before {\n  opacity: 1;\n}\n\n.sn-component .sk-button.sk-secondary-contrast, .sn-component .sk-secondary-contrast.sk-box,\n.sn-component .sk-box.sk-secondary-contrast,\n.sn-component .sk-circle.sk-secondary-contrast {\n  /*\n    If $border-color is supplied, we use traditional borders for rect.\n    Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders.\n    If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders\n  */\n  color: var(--sn-stylekit-secondary-contrast-foreground-color);\n  position: relative;\n  background-color: var(--sn-stylekit-secondary-contrast-background-color);\n  overflow: hidden;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  /*\n    We use box-shadow instead of border so that the borders are rounded properly around the rect.\n    We keep border-color as well incase the individual elements want a border in some cases.\n  */\n  border-color: var(--sn-stylekit-secondary-contrast-background-color);\n}\n\n.sn-component .sk-button.sk-secondary-contrast *, .sn-component .sk-secondary-contrast.sk-box *,\n.sn-component .sk-box.sk-secondary-contrast *,\n.sn-component .sk-circle.sk-secondary-contrast * {\n  position: relative;\n}\n\n.sn-component .sk-button.sk-secondary-contrast:before, .sn-component .sk-secondary-contrast.sk-box:before,\n.sn-component .sk-box.sk-secondary-contrast:before,\n.sn-component .sk-circle.sk-secondary-contrast:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--sn-stylekit-secondary-contrast-background-color);\n  opacity: 1;\n  border-radius: var(--sn-stylekit-general-border-radius);\n}\n\n.sn-component .sk-button.sk-secondary-contrast:after, .sn-component .sk-secondary-contrast.sk-box:after,\n.sn-component .sk-box.sk-secondary-contrast:after,\n.sn-component .sk-circle.sk-secondary-contrast:after {\n  content: '';\n  display: block;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  pointer-events: none;\n  box-shadow: inset 0 0 0 1px;\n  color: var(--sn-stylekit-secondary-contrast-background-color);\n}\n\n.sn-component .sk-button.sk-secondary-contrast:hover:before, .sn-component .sk-secondary-contrast.sk-box:hover:before,\n.sn-component .sk-box.sk-secondary-contrast:hover:before,\n.sn-component .sk-circle.sk-secondary-contrast:hover:before {\n  filter: brightness(130%);\n}\n\n.sn-component .sk-button.sk-secondary-contrast.no-bg, .sn-component .sk-secondary-contrast.no-bg.sk-box,\n.sn-component .sk-box.sk-secondary-contrast.no-bg,\n.sn-component .sk-circle.sk-secondary-contrast.no-bg {\n  background-color: transparent;\n}\n\n.sn-component .sk-button.sk-secondary-contrast.no-bg:before, .sn-component .sk-secondary-contrast.no-bg.sk-box:before,\n.sn-component .sk-box.sk-secondary-contrast.no-bg:before,\n.sn-component .sk-circle.sk-secondary-contrast.no-bg:before {\n  content: none;\n}\n\n.sn-component .sk-button.sk-secondary-contrast.featured, .sn-component .sk-secondary-contrast.featured.sk-box,\n.sn-component .sk-box.sk-secondary-contrast.featured,\n.sn-component .sk-circle.sk-secondary-contrast.featured {\n  border: none;\n  padding: 0.609375rem 1.015625rem;\n  font-size: var(--sn-stylekit-font-size-h3);\n}\n\n.sn-component .sk-button.sk-secondary-contrast.featured:before, .sn-component .sk-secondary-contrast.featured.sk-box:before,\n.sn-component .sk-box.sk-secondary-contrast.featured:before,\n.sn-component .sk-circle.sk-secondary-contrast.featured:before {\n  opacity: 1;\n}\n\n.sn-component .sk-button.neutral, .sn-component .neutral.sk-box,\n.sn-component .sk-box.neutral,\n.sn-component .sk-circle.neutral {\n  /*\n    If $border-color is supplied, we use traditional borders for rect.\n    Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders.\n    If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders\n  */\n  color: var(--sn-stylekit-neutral-contrast-color);\n  position: relative;\n  background-color: var(--sn-stylekit-neutral-color);\n  overflow: hidden;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  /*\n    We use box-shadow instead of border so that the borders are rounded properly around the rect.\n    We keep border-color as well incase the individual elements want a border in some cases.\n  */\n  border-color: var(--sn-stylekit-neutral-color);\n}\n\n.sn-component .sk-button.neutral *, .sn-component .neutral.sk-box *,\n.sn-component .sk-box.neutral *,\n.sn-component .sk-circle.neutral * {\n  position: relative;\n}\n\n.sn-component .sk-button.neutral:before, .sn-component .neutral.sk-box:before,\n.sn-component .sk-box.neutral:before,\n.sn-component .sk-circle.neutral:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--sn-stylekit-neutral-color);\n  opacity: 1;\n  border-radius: var(--sn-stylekit-general-border-radius);\n}\n\n.sn-component .sk-button.neutral:after, .sn-component .neutral.sk-box:after,\n.sn-component .sk-box.neutral:after,\n.sn-component .sk-circle.neutral:after {\n  content: '';\n  display: block;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  pointer-events: none;\n  box-shadow: inset 0 0 0 1px;\n  color: var(--sn-stylekit-neutral-color);\n}\n\n.sn-component .sk-button.neutral:hover:before, .sn-component .neutral.sk-box:hover:before,\n.sn-component .sk-box.neutral:hover:before,\n.sn-component .sk-circle.neutral:hover:before {\n  filter: brightness(130%);\n}\n\n.sn-component .sk-button.neutral.no-bg, .sn-component .neutral.no-bg.sk-box,\n.sn-component .sk-box.neutral.no-bg,\n.sn-component .sk-circle.neutral.no-bg {\n  background-color: transparent;\n}\n\n.sn-component .sk-button.neutral.no-bg:before, .sn-component .neutral.no-bg.sk-box:before,\n.sn-component .sk-box.neutral.no-bg:before,\n.sn-component .sk-circle.neutral.no-bg:before {\n  content: none;\n}\n\n.sn-component .sk-button.neutral.featured, .sn-component .neutral.featured.sk-box,\n.sn-component .sk-box.neutral.featured,\n.sn-component .sk-circle.neutral.featured {\n  border: none;\n  padding: 0.609375rem 1.015625rem;\n  font-size: var(--sn-stylekit-font-size-h3);\n}\n\n.sn-component .sk-button.neutral.featured:before, .sn-component .neutral.featured.sk-box:before,\n.sn-component .sk-box.neutral.featured:before,\n.sn-component .sk-circle.neutral.featured:before {\n  opacity: 1;\n}\n\n.sn-component .sk-button.info, .sn-component .info.sk-box,\n.sn-component .sk-box.info,\n.sn-component .sk-circle.info {\n  /*\n    If $border-color is supplied, we use traditional borders for rect.\n    Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders.\n    If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders\n  */\n  color: var(--sn-stylekit-info-contrast-color);\n  position: relative;\n  background-color: var(--sn-stylekit-info-color);\n  overflow: hidden;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  /*\n    We use box-shadow instead of border so that the borders are rounded properly around the rect.\n    We keep border-color as well incase the individual elements want a border in some cases.\n  */\n  border-color: var(--sn-stylekit-info-color);\n}\n\n.sn-component .sk-button.info *, .sn-component .info.sk-box *,\n.sn-component .sk-box.info *,\n.sn-component .sk-circle.info * {\n  position: relative;\n}\n\n.sn-component .sk-button.info:before, .sn-component .info.sk-box:before,\n.sn-component .sk-box.info:before,\n.sn-component .sk-circle.info:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--sn-stylekit-info-color);\n  opacity: 1;\n  border-radius: var(--sn-stylekit-general-border-radius);\n}\n\n.sn-component .sk-button.info:after, .sn-component .info.sk-box:after,\n.sn-component .sk-box.info:after,\n.sn-component .sk-circle.info:after {\n  content: '';\n  display: block;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  pointer-events: none;\n  box-shadow: inset 0 0 0 1px;\n  color: var(--sn-stylekit-info-color);\n}\n\n.sn-component .sk-button.info:hover:before, .sn-component .info.sk-box:hover:before,\n.sn-component .sk-box.info:hover:before,\n.sn-component .sk-circle.info:hover:before {\n  filter: brightness(130%);\n}\n\n.sn-component .sk-button.info.no-bg, .sn-component .info.no-bg.sk-box,\n.sn-component .sk-box.info.no-bg,\n.sn-component .sk-circle.info.no-bg {\n  background-color: transparent;\n}\n\n.sn-component .sk-button.info.no-bg:before, .sn-component .info.no-bg.sk-box:before,\n.sn-component .sk-box.info.no-bg:before,\n.sn-component .sk-circle.info.no-bg:before {\n  content: none;\n}\n\n.sn-component .sk-button.info.featured, .sn-component .info.featured.sk-box,\n.sn-component .sk-box.info.featured,\n.sn-component .sk-circle.info.featured {\n  border: none;\n  padding: 0.609375rem 1.015625rem;\n  font-size: var(--sn-stylekit-font-size-h3);\n}\n\n.sn-component .sk-button.info.featured:before, .sn-component .info.featured.sk-box:before,\n.sn-component .sk-box.info.featured:before,\n.sn-component .sk-circle.info.featured:before {\n  opacity: 1;\n}\n\n.sn-component .sk-button.warning, .sn-component .warning.sk-box,\n.sn-component .sk-box.warning,\n.sn-component .sk-circle.warning {\n  /*\n    If $border-color is supplied, we use traditional borders for rect.\n    Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders.\n    If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders\n  */\n  color: var(--sn-stylekit-warning-contrast-color);\n  position: relative;\n  background-color: var(--sn-stylekit-warning-color);\n  overflow: hidden;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  /*\n    We use box-shadow instead of border so that the borders are rounded properly around the rect.\n    We keep border-color as well incase the individual elements want a border in some cases.\n  */\n  border-color: var(--sn-stylekit-warning-color);\n}\n\n.sn-component .sk-button.warning *, .sn-component .warning.sk-box *,\n.sn-component .sk-box.warning *,\n.sn-component .sk-circle.warning * {\n  position: relative;\n}\n\n.sn-component .sk-button.warning:before, .sn-component .warning.sk-box:before,\n.sn-component .sk-box.warning:before,\n.sn-component .sk-circle.warning:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--sn-stylekit-warning-color);\n  opacity: 1;\n  border-radius: var(--sn-stylekit-general-border-radius);\n}\n\n.sn-component .sk-button.warning:after, .sn-component .warning.sk-box:after,\n.sn-component .sk-box.warning:after,\n.sn-component .sk-circle.warning:after {\n  content: '';\n  display: block;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  pointer-events: none;\n  box-shadow: inset 0 0 0 1px;\n  color: var(--sn-stylekit-warning-color);\n}\n\n.sn-component .sk-button.warning:hover:before, .sn-component .warning.sk-box:hover:before,\n.sn-component .sk-box.warning:hover:before,\n.sn-component .sk-circle.warning:hover:before {\n  filter: brightness(130%);\n}\n\n.sn-component .sk-button.warning.no-bg, .sn-component .warning.no-bg.sk-box,\n.sn-component .sk-box.warning.no-bg,\n.sn-component .sk-circle.warning.no-bg {\n  background-color: transparent;\n}\n\n.sn-component .sk-button.warning.no-bg:before, .sn-component .warning.no-bg.sk-box:before,\n.sn-component .sk-box.warning.no-bg:before,\n.sn-component .sk-circle.warning.no-bg:before {\n  content: none;\n}\n\n.sn-component .sk-button.warning.featured, .sn-component .warning.featured.sk-box,\n.sn-component .sk-box.warning.featured,\n.sn-component .sk-circle.warning.featured {\n  border: none;\n  padding: 0.609375rem 1.015625rem;\n  font-size: var(--sn-stylekit-font-size-h3);\n}\n\n.sn-component .sk-button.warning.featured:before, .sn-component .warning.featured.sk-box:before,\n.sn-component .sk-box.warning.featured:before,\n.sn-component .sk-circle.warning.featured:before {\n  opacity: 1;\n}\n\n.sn-component .sk-button.danger, .sn-component .danger.sk-box,\n.sn-component .sk-box.danger,\n.sn-component .sk-circle.danger {\n  /*\n    If $border-color is supplied, we use traditional borders for rect.\n    Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders.\n    If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders\n  */\n  color: var(--sn-stylekit-danger-contrast-color);\n  position: relative;\n  background-color: var(--sn-stylekit-danger-color);\n  overflow: hidden;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  /*\n    We use box-shadow instead of border so that the borders are rounded properly around the rect.\n    We keep border-color as well incase the individual elements want a border in some cases.\n  */\n  border-color: var(--sn-stylekit-danger-color);\n}\n\n.sn-component .sk-button.danger *, .sn-component .danger.sk-box *,\n.sn-component .sk-box.danger *,\n.sn-component .sk-circle.danger * {\n  position: relative;\n}\n\n.sn-component .sk-button.danger:before, .sn-component .danger.sk-box:before,\n.sn-component .sk-box.danger:before,\n.sn-component .sk-circle.danger:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--sn-stylekit-danger-color);\n  opacity: 1;\n  border-radius: var(--sn-stylekit-general-border-radius);\n}\n\n.sn-component .sk-button.danger:after, .sn-component .danger.sk-box:after,\n.sn-component .sk-box.danger:after,\n.sn-component .sk-circle.danger:after {\n  content: '';\n  display: block;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  pointer-events: none;\n  box-shadow: inset 0 0 0 1px;\n  color: var(--sn-stylekit-danger-color);\n}\n\n.sn-component .sk-button.danger:hover:before, .sn-component .danger.sk-box:hover:before,\n.sn-component .sk-box.danger:hover:before,\n.sn-component .sk-circle.danger:hover:before {\n  filter: brightness(130%);\n}\n\n.sn-component .sk-button.danger.no-bg, .sn-component .danger.no-bg.sk-box,\n.sn-component .sk-box.danger.no-bg,\n.sn-component .sk-circle.danger.no-bg {\n  background-color: transparent;\n}\n\n.sn-component .sk-button.danger.no-bg:before, .sn-component .danger.no-bg.sk-box:before,\n.sn-component .sk-box.danger.no-bg:before,\n.sn-component .sk-circle.danger.no-bg:before {\n  content: none;\n}\n\n.sn-component .sk-button.danger.featured, .sn-component .danger.featured.sk-box,\n.sn-component .sk-box.danger.featured,\n.sn-component .sk-circle.danger.featured {\n  border: none;\n  padding: 0.609375rem 1.015625rem;\n  font-size: var(--sn-stylekit-font-size-h3);\n}\n\n.sn-component .sk-button.danger.featured:before, .sn-component .danger.featured.sk-box:before,\n.sn-component .sk-box.danger.featured:before,\n.sn-component .sk-circle.danger.featured:before {\n  opacity: 1;\n}\n\n.sn-component .sk-button.success, .sn-component .success.sk-box,\n.sn-component .sk-box.success,\n.sn-component .sk-circle.success {\n  /*\n    If $border-color is supplied, we use traditional borders for rect.\n    Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders.\n    If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders\n  */\n  color: var(--sn-stylekit-success-contrast-color);\n  position: relative;\n  background-color: var(--sn-stylekit-success-color);\n  overflow: hidden;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  /*\n    We use box-shadow instead of border so that the borders are rounded properly around the rect.\n    We keep border-color as well incase the individual elements want a border in some cases.\n  */\n  border-color: var(--sn-stylekit-success-color);\n}\n\n.sn-component .sk-button.success *, .sn-component .success.sk-box *,\n.sn-component .sk-box.success *,\n.sn-component .sk-circle.success * {\n  position: relative;\n}\n\n.sn-component .sk-button.success:before, .sn-component .success.sk-box:before,\n.sn-component .sk-box.success:before,\n.sn-component .sk-circle.success:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--sn-stylekit-success-color);\n  opacity: 1;\n  border-radius: var(--sn-stylekit-general-border-radius);\n}\n\n.sn-component .sk-button.success:after, .sn-component .success.sk-box:after,\n.sn-component .sk-box.success:after,\n.sn-component .sk-circle.success:after {\n  content: '';\n  display: block;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  pointer-events: none;\n  box-shadow: inset 0 0 0 1px;\n  color: var(--sn-stylekit-success-color);\n}\n\n.sn-component .sk-button.success:hover:before, .sn-component .success.sk-box:hover:before,\n.sn-component .sk-box.success:hover:before,\n.sn-component .sk-circle.success:hover:before {\n  filter: brightness(130%);\n}\n\n.sn-component .sk-button.success.no-bg, .sn-component .success.no-bg.sk-box,\n.sn-component .sk-box.success.no-bg,\n.sn-component .sk-circle.success.no-bg {\n  background-color: transparent;\n}\n\n.sn-component .sk-button.success.no-bg:before, .sn-component .success.no-bg.sk-box:before,\n.sn-component .sk-box.success.no-bg:before,\n.sn-component .sk-circle.success.no-bg:before {\n  content: none;\n}\n\n.sn-component .sk-button.success.featured, .sn-component .success.featured.sk-box,\n.sn-component .sk-box.success.featured,\n.sn-component .sk-circle.success.featured {\n  border: none;\n  padding: 0.609375rem 1.015625rem;\n  font-size: var(--sn-stylekit-font-size-h3);\n}\n\n.sn-component .sk-button.success.featured:before, .sn-component .success.featured.sk-box:before,\n.sn-component .sk-box.success.featured:before,\n.sn-component .sk-circle.success.featured:before {\n  opacity: 1;\n}\n\n.sn-component .sk-notification.contrast,\n.sn-component .sk-input.contrast {\n  /*\n    If $border-color is supplied, we use traditional borders for rect.\n    Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders.\n    If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders\n  */\n  color: var(--sn-stylekit-contrast-foreground-color);\n  position: relative;\n  background-color: var(--sn-stylekit-contrast-background-color);\n  overflow: hidden;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  /*\n    We use box-shadow instead of border so that the borders are rounded properly around the rect.\n    We keep border-color as well incase the individual elements want a border in some cases.\n  */\n  border-color: var(--sn-stylekit-contrast-border-color);\n  border: 1px solid var(--sn-stylekit-contrast-border-color);\n}\n\n.sn-component .sk-notification.contrast *,\n.sn-component .sk-input.contrast * {\n  position: relative;\n}\n\n.sn-component .sk-notification.contrast:before,\n.sn-component .sk-input.contrast:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--sn-stylekit-contrast-background-color);\n  opacity: 1;\n  border-radius: var(--sn-stylekit-general-border-radius);\n}\n\n.sn-component .sk-notification.contrast:after,\n.sn-component .sk-input.contrast:after {\n  content: '';\n  display: block;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  pointer-events: none;\n  color: var(--sn-stylekit-contrast-border-color);\n  border-color: var(--sn-stylekit-contrast-border-color);\n}\n\n.sn-component .sk-notification.contrast.no-bg,\n.sn-component .sk-input.contrast.no-bg {\n  background-color: transparent;\n}\n\n.sn-component .sk-notification.contrast.no-bg:before,\n.sn-component .sk-input.contrast.no-bg:before {\n  content: none;\n}\n\n.sn-component .sk-notification.contrast.featured,\n.sn-component .sk-input.contrast.featured {\n  border: none;\n  padding: 0.609375rem 1.015625rem;\n  font-size: var(--sn-stylekit-font-size-h3);\n}\n\n.sn-component .sk-notification.contrast.featured:before,\n.sn-component .sk-input.contrast.featured:before {\n  opacity: 1;\n}\n\n.sn-component .sk-notification.sk-secondary,\n.sn-component .sk-input.sk-secondary {\n  /*\n    If $border-color is supplied, we use traditional borders for rect.\n    Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders.\n    If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders\n  */\n  color: var(--sn-stylekit-secondary-foreground-color);\n  position: relative;\n  background-color: var(--sn-stylekit-secondary-background-color);\n  overflow: hidden;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  /*\n    We use box-shadow instead of border so that the borders are rounded properly around the rect.\n    We keep border-color as well incase the individual elements want a border in some cases.\n  */\n  border-color: var(--sn-stylekit-secondary-border-color);\n  border: 1px solid var(--sn-stylekit-secondary-border-color);\n}\n\n.sn-component .sk-notification.sk-secondary *,\n.sn-component .sk-input.sk-secondary * {\n  position: relative;\n}\n\n.sn-component .sk-notification.sk-secondary:before,\n.sn-component .sk-input.sk-secondary:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--sn-stylekit-secondary-background-color);\n  opacity: 1;\n  border-radius: var(--sn-stylekit-general-border-radius);\n}\n\n.sn-component .sk-notification.sk-secondary:after,\n.sn-component .sk-input.sk-secondary:after {\n  content: '';\n  display: block;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  pointer-events: none;\n  color: var(--sn-stylekit-secondary-border-color);\n  border-color: var(--sn-stylekit-secondary-border-color);\n}\n\n.sn-component .sk-notification.sk-secondary.no-bg,\n.sn-component .sk-input.sk-secondary.no-bg {\n  background-color: transparent;\n}\n\n.sn-component .sk-notification.sk-secondary.no-bg:before,\n.sn-component .sk-input.sk-secondary.no-bg:before {\n  content: none;\n}\n\n.sn-component .sk-notification.sk-secondary.featured,\n.sn-component .sk-input.sk-secondary.featured {\n  border: none;\n  padding: 0.609375rem 1.015625rem;\n  font-size: var(--sn-stylekit-font-size-h3);\n}\n\n.sn-component .sk-notification.sk-secondary.featured:before,\n.sn-component .sk-input.sk-secondary.featured:before {\n  opacity: 1;\n}\n\n.sn-component .sk-notification.sk-secondary-contrast,\n.sn-component .sk-input.sk-secondary-contrast {\n  /*\n    If $border-color is supplied, we use traditional borders for rect.\n    Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders.\n    If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders\n  */\n  color: var(--sn-stylekit-secondary-contrast-foreground-color);\n  position: relative;\n  background-color: var(--sn-stylekit-secondary-contrast-background-color);\n  overflow: hidden;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  /*\n    We use box-shadow instead of border so that the borders are rounded properly around the rect.\n    We keep border-color as well incase the individual elements want a border in some cases.\n  */\n  border-color: var(--sn-stylekit-secondary-contrast-border-color);\n  border: 1px solid var(--sn-stylekit-secondary-contrast-border-color);\n}\n\n.sn-component .sk-notification.sk-secondary-contrast *,\n.sn-component .sk-input.sk-secondary-contrast * {\n  position: relative;\n}\n\n.sn-component .sk-notification.sk-secondary-contrast:before,\n.sn-component .sk-input.sk-secondary-contrast:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--sn-stylekit-secondary-contrast-background-color);\n  opacity: 1;\n  border-radius: var(--sn-stylekit-general-border-radius);\n}\n\n.sn-component .sk-notification.sk-secondary-contrast:after,\n.sn-component .sk-input.sk-secondary-contrast:after {\n  content: '';\n  display: block;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  pointer-events: none;\n  color: var(--sn-stylekit-secondary-contrast-border-color);\n  border-color: var(--sn-stylekit-secondary-contrast-border-color);\n}\n\n.sn-component .sk-notification.sk-secondary-contrast.no-bg,\n.sn-component .sk-input.sk-secondary-contrast.no-bg {\n  background-color: transparent;\n}\n\n.sn-component .sk-notification.sk-secondary-contrast.no-bg:before,\n.sn-component .sk-input.sk-secondary-contrast.no-bg:before {\n  content: none;\n}\n\n.sn-component .sk-notification.sk-secondary-contrast.featured,\n.sn-component .sk-input.sk-secondary-contrast.featured {\n  border: none;\n  padding: 0.609375rem 1.015625rem;\n  font-size: var(--sn-stylekit-font-size-h3);\n}\n\n.sn-component .sk-notification.sk-secondary-contrast.featured:before,\n.sn-component .sk-input.sk-secondary-contrast.featured:before {\n  opacity: 1;\n}\n\n.sn-component .sk-notification.sk-base,\n.sn-component .sk-input.sk-base {\n  /*\n    If $border-color is supplied, we use traditional borders for rect.\n    Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders.\n    If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders\n  */\n  color: var(--sn-stylekit-foreground-color);\n  position: relative;\n  background-color: var(--sn-stylekit-background-color);\n  overflow: hidden;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  /*\n    We use box-shadow instead of border so that the borders are rounded properly around the rect.\n    We keep border-color as well incase the individual elements want a border in some cases.\n  */\n  border-color: var(--sn-stylekit-border-color);\n  border: 1px solid var(--sn-stylekit-border-color);\n}\n\n.sn-component .sk-notification.sk-base *,\n.sn-component .sk-input.sk-base * {\n  position: relative;\n}\n\n.sn-component .sk-notification.sk-base:before,\n.sn-component .sk-input.sk-base:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--sn-stylekit-background-color);\n  opacity: 1;\n  border-radius: var(--sn-stylekit-general-border-radius);\n}\n\n.sn-component .sk-notification.sk-base:after,\n.sn-component .sk-input.sk-base:after {\n  content: '';\n  display: block;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  pointer-events: none;\n  color: var(--sn-stylekit-border-color);\n  border-color: var(--sn-stylekit-border-color);\n}\n\n.sn-component .sk-notification.sk-base.no-bg,\n.sn-component .sk-input.sk-base.no-bg {\n  background-color: transparent;\n}\n\n.sn-component .sk-notification.sk-base.no-bg:before,\n.sn-component .sk-input.sk-base.no-bg:before {\n  content: none;\n}\n\n.sn-component .sk-notification.sk-base.featured,\n.sn-component .sk-input.sk-base.featured {\n  border: none;\n  padding: 0.609375rem 1.015625rem;\n  font-size: var(--sn-stylekit-font-size-h3);\n}\n\n.sn-component .sk-notification.sk-base.featured:before,\n.sn-component .sk-input.sk-base.featured:before {\n  opacity: 1;\n}\n\n.sn-component .sk-notification.neutral,\n.sn-component .sk-input.neutral {\n  /*\n    If $border-color is supplied, we use traditional borders for rect.\n    Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders.\n    If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders\n  */\n  color: var(--sn-stylekit-neutral-contrast-color);\n  position: relative;\n  background-color: var(--sn-stylekit-neutral-color);\n  overflow: hidden;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  /*\n    We use box-shadow instead of border so that the borders are rounded properly around the rect.\n    We keep border-color as well incase the individual elements want a border in some cases.\n  */\n  border-color: var(--sn-stylekit-neutral-color);\n}\n\n.sn-component .sk-notification.neutral *,\n.sn-component .sk-input.neutral * {\n  position: relative;\n}\n\n.sn-component .sk-notification.neutral:before,\n.sn-component .sk-input.neutral:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--sn-stylekit-neutral-color);\n  opacity: 1;\n  border-radius: var(--sn-stylekit-general-border-radius);\n}\n\n.sn-component .sk-notification.neutral:after,\n.sn-component .sk-input.neutral:after {\n  content: '';\n  display: block;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  pointer-events: none;\n  box-shadow: inset 0 0 0 1px;\n  color: var(--sn-stylekit-neutral-color);\n}\n\n.sn-component .sk-notification.neutral.no-bg,\n.sn-component .sk-input.neutral.no-bg {\n  background-color: transparent;\n}\n\n.sn-component .sk-notification.neutral.no-bg:before,\n.sn-component .sk-input.neutral.no-bg:before {\n  content: none;\n}\n\n.sn-component .sk-notification.neutral.featured,\n.sn-component .sk-input.neutral.featured {\n  border: none;\n  padding: 0.609375rem 1.015625rem;\n  font-size: var(--sn-stylekit-font-size-h3);\n}\n\n.sn-component .sk-notification.neutral.featured:before,\n.sn-component .sk-input.neutral.featured:before {\n  opacity: 1;\n}\n\n.sn-component .sk-notification.info,\n.sn-component .sk-input.info {\n  /*\n    If $border-color is supplied, we use traditional borders for rect.\n    Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders.\n    If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders\n  */\n  color: var(--sn-stylekit-info-contrast-color);\n  position: relative;\n  background-color: var(--sn-stylekit-info-color);\n  overflow: hidden;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  /*\n    We use box-shadow instead of border so that the borders are rounded properly around the rect.\n    We keep border-color as well incase the individual elements want a border in some cases.\n  */\n  border-color: var(--sn-stylekit-info-color);\n}\n\n.sn-component .sk-notification.info *,\n.sn-component .sk-input.info * {\n  position: relative;\n}\n\n.sn-component .sk-notification.info:before,\n.sn-component .sk-input.info:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--sn-stylekit-info-color);\n  opacity: 1;\n  border-radius: var(--sn-stylekit-general-border-radius);\n}\n\n.sn-component .sk-notification.info:after,\n.sn-component .sk-input.info:after {\n  content: '';\n  display: block;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  pointer-events: none;\n  box-shadow: inset 0 0 0 1px;\n  color: var(--sn-stylekit-info-color);\n}\n\n.sn-component .sk-notification.info.no-bg,\n.sn-component .sk-input.info.no-bg {\n  background-color: transparent;\n}\n\n.sn-component .sk-notification.info.no-bg:before,\n.sn-component .sk-input.info.no-bg:before {\n  content: none;\n}\n\n.sn-component .sk-notification.info.featured,\n.sn-component .sk-input.info.featured {\n  border: none;\n  padding: 0.609375rem 1.015625rem;\n  font-size: var(--sn-stylekit-font-size-h3);\n}\n\n.sn-component .sk-notification.info.featured:before,\n.sn-component .sk-input.info.featured:before {\n  opacity: 1;\n}\n\n.sn-component .sk-notification.warning,\n.sn-component .sk-input.warning {\n  /*\n    If $border-color is supplied, we use traditional borders for rect.\n    Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders.\n    If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders\n  */\n  color: var(--sn-stylekit-warning-contrast-color);\n  position: relative;\n  background-color: var(--sn-stylekit-warning-color);\n  overflow: hidden;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  /*\n    We use box-shadow instead of border so that the borders are rounded properly around the rect.\n    We keep border-color as well incase the individual elements want a border in some cases.\n  */\n  border-color: var(--sn-stylekit-warning-color);\n}\n\n.sn-component .sk-notification.warning *,\n.sn-component .sk-input.warning * {\n  position: relative;\n}\n\n.sn-component .sk-notification.warning:before,\n.sn-component .sk-input.warning:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--sn-stylekit-warning-color);\n  opacity: 1;\n  border-radius: var(--sn-stylekit-general-border-radius);\n}\n\n.sn-component .sk-notification.warning:after,\n.sn-component .sk-input.warning:after {\n  content: '';\n  display: block;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  pointer-events: none;\n  box-shadow: inset 0 0 0 1px;\n  color: var(--sn-stylekit-warning-color);\n}\n\n.sn-component .sk-notification.warning.no-bg,\n.sn-component .sk-input.warning.no-bg {\n  background-color: transparent;\n}\n\n.sn-component .sk-notification.warning.no-bg:before,\n.sn-component .sk-input.warning.no-bg:before {\n  content: none;\n}\n\n.sn-component .sk-notification.warning.featured,\n.sn-component .sk-input.warning.featured {\n  border: none;\n  padding: 0.609375rem 1.015625rem;\n  font-size: var(--sn-stylekit-font-size-h3);\n}\n\n.sn-component .sk-notification.warning.featured:before,\n.sn-component .sk-input.warning.featured:before {\n  opacity: 1;\n}\n\n.sn-component .sk-notification.danger,\n.sn-component .sk-input.danger {\n  /*\n    If $border-color is supplied, we use traditional borders for rect.\n    Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders.\n    If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders\n  */\n  color: var(--sn-stylekit-danger-contrast-color);\n  position: relative;\n  background-color: var(--sn-stylekit-danger-color);\n  overflow: hidden;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  /*\n    We use box-shadow instead of border so that the borders are rounded properly around the rect.\n    We keep border-color as well incase the individual elements want a border in some cases.\n  */\n  border-color: var(--sn-stylekit-danger-color);\n}\n\n.sn-component .sk-notification.danger *,\n.sn-component .sk-input.danger * {\n  position: relative;\n}\n\n.sn-component .sk-notification.danger:before,\n.sn-component .sk-input.danger:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--sn-stylekit-danger-color);\n  opacity: 1;\n  border-radius: var(--sn-stylekit-general-border-radius);\n}\n\n.sn-component .sk-notification.danger:after,\n.sn-component .sk-input.danger:after {\n  content: '';\n  display: block;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  pointer-events: none;\n  box-shadow: inset 0 0 0 1px;\n  color: var(--sn-stylekit-danger-color);\n}\n\n.sn-component .sk-notification.danger.no-bg,\n.sn-component .sk-input.danger.no-bg {\n  background-color: transparent;\n}\n\n.sn-component .sk-notification.danger.no-bg:before,\n.sn-component .sk-input.danger.no-bg:before {\n  content: none;\n}\n\n.sn-component .sk-notification.danger.featured,\n.sn-component .sk-input.danger.featured {\n  border: none;\n  padding: 0.609375rem 1.015625rem;\n  font-size: var(--sn-stylekit-font-size-h3);\n}\n\n.sn-component .sk-notification.danger.featured:before,\n.sn-component .sk-input.danger.featured:before {\n  opacity: 1;\n}\n\n.sn-component .sk-notification.success,\n.sn-component .sk-input.success {\n  /*\n    If $border-color is supplied, we use traditional borders for rect.\n    Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders.\n    If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders\n  */\n  color: var(--sn-stylekit-success-contrast-color);\n  position: relative;\n  background-color: var(--sn-stylekit-success-color);\n  overflow: hidden;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  /*\n    We use box-shadow instead of border so that the borders are rounded properly around the rect.\n    We keep border-color as well incase the individual elements want a border in some cases.\n  */\n  border-color: var(--sn-stylekit-success-color);\n}\n\n.sn-component .sk-notification.success *,\n.sn-component .sk-input.success * {\n  position: relative;\n}\n\n.sn-component .sk-notification.success:before,\n.sn-component .sk-input.success:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--sn-stylekit-success-color);\n  opacity: 1;\n  border-radius: var(--sn-stylekit-general-border-radius);\n}\n\n.sn-component .sk-notification.success:after,\n.sn-component .sk-input.success:after {\n  content: '';\n  display: block;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  border-radius: var(--sn-stylekit-general-border-radius);\n  pointer-events: none;\n  box-shadow: inset 0 0 0 1px;\n  color: var(--sn-stylekit-success-color);\n}\n\n.sn-component .sk-notification.success.no-bg,\n.sn-component .sk-input.success.no-bg {\n  background-color: transparent;\n}\n\n.sn-component .sk-notification.success.no-bg:before,\n.sn-component .sk-input.success.no-bg:before {\n  content: none;\n}\n\n.sn-component .sk-notification.success.featured,\n.sn-component .sk-input.success.featured {\n  border: none;\n  padding: 0.609375rem 1.015625rem;\n  font-size: var(--sn-stylekit-font-size-h3);\n}\n\n.sn-component .sk-notification.success.featured:before,\n.sn-component .sk-input.success.featured:before {\n  opacity: 1;\n}\n\n.sn-component .sk-notification {\n  padding: 0.89375rem 0.8125rem;\n  margin: 1.1375rem 0;\n  text-align: left;\n  cursor: default;\n}\n\n.sn-component .sk-notification.one-line {\n  padding: 0rem 0.325rem;\n}\n\n.sn-component .sk-notification.stretch {\n  width: 100%;\n}\n\n.sn-component .sk-notification.dashed {\n  border-style: dashed;\n  border-width: 2px;\n}\n\n.sn-component .sk-notification.dashed:after {\n  box-shadow: none;\n}\n\n.sn-component .sk-notification .sk-notification-title {\n  font-size: var(--sn-stylekit-font-size-h1);\n  font-weight: bold;\n  line-height: 1.54375rem;\n}\n\n.sn-component .sk-notification .sk-notification-text {\n  line-height: 1.21875rem;\n  font-size: var(--sn-stylekit-font-size-p);\n  text-align: left;\n  font-weight: normal;\n}\n\n.sn-component .sk-circle {\n  border: 1px solid;\n  cursor: pointer;\n  border-color: var(--sn-stylekit-contrast-foreground-color);\n  background-color: var(--sn-stylekit-contrast-background-color);\n  padding: 0;\n  border-radius: 50% !important;\n  flex-shrink: 0;\n}\n\n.sn-component .sk-circle:before {\n  border-radius: 50% !important;\n}\n\n.sn-component .sk-circle:after {\n  border-radius: 50% !important;\n}\n\n.sn-component .sk-circle.small {\n  width: 11px;\n  height: 11px;\n}\n\n.sn-component .sk-spinner {\n  border: 1px solid var(--sn-stylekit-neutral-color);\n  border-radius: 50%;\n  animation: rotate 0.8s infinite linear;\n  border-right-color: transparent;\n}\n\n.sn-component .sk-spinner.small {\n  width: 12px;\n  height: 12px;\n}\n\n.sn-component .sk-spinner.info-contrast {\n  border-color: var(--sn-stylekit-info-contrast-color);\n  border-right-color: transparent;\n}\n\n.sn-component .sk-spinner.info {\n  border-color: var(--sn-stylekit-info-color);\n  border-right-color: transparent;\n}\n\n.sn-component .sk-spinner.warning {\n  border-color: var(--sn-stylekit-warning-color);\n  border-right-color: transparent;\n}\n\n.sn-component .sk-spinner.danger {\n  border-color: var(--sn-stylekit-danger-color);\n  border-right-color: transparent;\n}\n\n.sn-component .sk-spinner.success {\n  border-color: var(--sn-stylekit-success-color);\n  border-right-color: transparent;\n}\n\n@keyframes rotate {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.sn-component .sk-app-bar {\n  display: flex;\n  width: 100%;\n  height: 1.625rem;\n  padding: 0 0.65rem;\n  background-color: var(--sn-stylekit-contrast-background-color);\n  color: var(--sn-stylekit-contrast-foreground-color);\n  justify-content: space-between;\n  align-items: center;\n  border: 1px solid var(--sn-stylekit-contrast-border-color);\n  user-select: none;\n}\n\n.sn-component .sk-app-bar.no-edges {\n  border-left: 0;\n  border-right: 0;\n}\n\n.sn-component .sk-app-bar.no-bottom-edge {\n  border-bottom: 0;\n}\n\n.sn-component .sk-app-bar .left,\n.sn-component .sk-app-bar .right {\n  display: flex;\n  height: 100%;\n}\n\n.sn-component .sk-app-bar .sk-app-bar-item {\n  flex-grow: 1;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sn-component .sk-app-bar .sk-app-bar-item:not(:first-child) {\n  margin-left: 0.8125rem;\n}\n\n.sn-component .sk-app-bar .sk-app-bar-item.border {\n  border-left: 1px solid var(--sn-stylekit-contrast-border-color);\n}\n\n.sn-component .sk-app-bar .sk-app-bar-item > .sk-app-bar-item-column {\n  height: 100%;\n  display: flex;\n  align-items: center;\n}\n\n.sn-component .sk-app-bar .sk-app-bar-item > .sk-app-bar-item-column:not(:first-child) {\n  margin-left: 0.40625rem;\n}\n\n.sn-component .sk-app-bar .sk-app-bar-item > .sk-app-bar-item-column.underline {\n  border-bottom: 2px solid var(--sn-stylekit-info-color);\n}\n\n.sn-component .sk-app-bar .sk-app-bar-item.no-pointer {\n  cursor: default;\n}\n\n.sn-component .sk-app-bar .sk-app-bar-item:hover > .sk-label:not(.subtle), .sn-component .sk-app-bar .sk-panel-section .sk-app-bar-item:hover > .sk-panel-section-subtitle:not(.subtle), .sn-component .sk-panel-section .sk-app-bar .sk-app-bar-item:hover > .sk-panel-section-subtitle:not(.subtle),\n.sn-component .sk-app-bar .sk-app-bar-item:hover > .sk-sublabel:not(.subtle),\n.sn-component .sk-app-bar .sk-app-bar-item:hover > .sk-app-bar-item-column > .sk-label:not(.subtle),\n.sn-component .sk-app-bar .sk-panel-section .sk-app-bar-item:hover > .sk-app-bar-item-column > .sk-panel-section-subtitle:not(.subtle),\n.sn-component .sk-panel-section .sk-app-bar .sk-app-bar-item:hover > .sk-app-bar-item-column > .sk-panel-section-subtitle:not(.subtle),\n.sn-component .sk-app-bar .sk-app-bar-item:hover > .sk-app-bar-item-column > .sk-sublabel:not(.subtle) {\n  color: var(--sn-stylekit-info-color);\n}\n\n.sn-component .sk-app-bar .sk-app-bar-item > .sk-label, .sn-component .sk-app-bar .sk-panel-section .sk-app-bar-item > .sk-panel-section-subtitle, .sn-component .sk-panel-section .sk-app-bar .sk-app-bar-item > .sk-panel-section-subtitle,\n.sn-component .sk-app-bar .sk-app-bar-item > .sk-app-bar-item-column > .sk-label,\n.sn-component .sk-app-bar .sk-panel-section .sk-app-bar-item > .sk-app-bar-item-column > .sk-panel-section-subtitle,\n.sn-component .sk-panel-section .sk-app-bar .sk-app-bar-item > .sk-app-bar-item-column > .sk-panel-section-subtitle {\n  font-weight: bold;\n  font-size: var(--sn-stylekit-font-size-h5);\n  white-space: nowrap;\n}\n\n.sn-component .sk-app-bar .sk-app-bar-item > .sk-sublabel,\n.sn-component .sk-app-bar .sk-app-bar-item > .sk-app-bar-item-column > .sk-sublabel {\n  font-size: var(--sn-stylekit-font-size-h5);\n  font-weight: normal;\n  white-space: nowrap;\n}\n\n.sn-component .sk-app-bar .sk-app-bar-item .subtle {\n  font-weight: normal;\n  opacity: 0.6;\n}\n\n.sn-component .sk-panel-table {\n  display: flex;\n  flex-wrap: wrap;\n  padding-left: 1px;\n  padding-top: 1px;\n}\n\n.sn-component .sk-panel-table .sk-panel-table-item {\n  flex: 45%;\n  flex-flow: wrap;\n  border: 1px solid var(--sn-stylekit-border-color);\n  padding: 0.8125rem;\n  margin-left: -1px;\n  margin-top: -1px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n.sn-component .sk-panel-table .sk-panel-table-item img {\n  max-width: 100%;\n  margin-bottom: 0.8125rem;\n}\n\n.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-content {\n  display: flex;\n  flex-direction: row;\n}\n\n.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-column {\n  align-items: center;\n}\n\n.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-column.stretch {\n  width: 100%;\n}\n\n.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-column:not(:first-child) {\n  padding-left: 0.609375rem;\n}\n\n.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-column.quarter {\n  flex-basis: 25%;\n}\n\n.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-column.three-quarters {\n  flex-basis: 75%;\n}\n\n.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-footer {\n  margin-top: 1.015625rem;\n}\n\n.sn-component .sk-panel-table .sk-panel-table-item.no-border {\n  border: none;\n}\n\n.sn-component .sk-modal {\n  position: fixed;\n  margin-left: auto;\n  margin-right: auto;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  z-index: 10000;\n  width: 100vw;\n  height: 100vh;\n  background-color: transparent;\n  color: var(--sn-stylekit-contrast-foreground-color);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sn-component .sk-modal .sn-component {\n  height: 100%;\n}\n\n.sn-component .sk-modal .sn-component .sk-panel {\n  height: 100%;\n}\n\n.sn-component .sk-modal.auto-height > .sk-modal-content {\n  height: auto !important;\n}\n\n.sn-component .sk-modal.large > .sk-modal-content {\n  width: 900px;\n  height: 600px;\n}\n\n.sn-component .sk-modal.medium > .sk-modal-content {\n  width: 700px;\n  height: 500px;\n}\n\n.sn-component .sk-modal.small > .sk-modal-content {\n  width: 700px;\n  height: 344px;\n}\n\n.sn-component .sk-modal .sk-modal-background {\n  position: absolute;\n  z-index: -1;\n  width: 100%;\n  height: 100%;\n  background-color: var(--sn-stylekit-contrast-background-color);\n  opacity: 0.7;\n}\n\n.sn-component .sk-modal > .sk-modal-content {\n  overflow-y: auto;\n  width: auto;\n  padding: 0;\n  padding-bottom: 0;\n  min-width: 300px;\n  -webkit-box-shadow: 0px 2px 35px 0px rgba(0, 0, 0, 0.19);\n  -moz-box-shadow: 0px 2px 35px 0px rgba(0, 0, 0, 0.19);\n  box-shadow: 0px 2px 35px 0px rgba(0, 0, 0, 0.19);\n}\n\n@keyframes slide-down {\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.sn-component .slide-down-animation, .sn-component .sn-dropdown-menu-list, .sn-component .sn-select-popover {\n  animation: slide-down 0.2s ease;\n}\n\n.sn-component .no-border {\n  border: none;\n}\n\n.sn-component .border-0, .sn-component .sn-button, .sn-component .sn-dropdown-menu, .sn-component .sn-select, .sn-component .sn-select-button, .sn-component .sn-select-popover {\n  border-width: 0px;\n}\n\n.sn-component .border-1, .sn-component .sn-button.outlined, .sn-component .sn-dropdown-menu, .sn-component .sn-select, .sn-component .sn-icon-button {\n  border-width: 1px;\n}\n\n.sn-component .border-2 {\n  border-width: 2px;\n}\n\n.sn-component .border-b-1 {\n  border-bottom-width: 1px;\n}\n\n.sn-component .border-main, .sn-component .sn-button.outlined, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list, .sn-component .sn-select, .sn-component .sn-select-list, .sn-component .sn-select-popover, .sn-component .sn-icon-button {\n  border-color: var(--sn-stylekit-border-color);\n}\n\n.sn-component .border-background {\n  border-color: var(--sn-stylekit-background-color);\n}\n\n.sn-component .border-transparent {\n  border-color: transparent;\n}\n\n.sn-component .border-info {\n  border-color: var(--sn-stylekit-info-color);\n}\n\n.sn-component .border-neutral {\n  border-color: var(--sn-stylekit-neutral-color);\n}\n\n.sn-component .border-rounded-md {\n  border-radius: 0.375rem;\n}\n\n.sn-component .rounded, .sn-component .sn-button, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list, .sn-component .sn-select, .sn-component .sn-select-list, .sn-component .sn-select-popover {\n  border-radius: 0.25rem;\n}\n\n.sn-component .rounded-full, .sn-component .sn-icon-button {\n  border-radius: 9999px;\n}\n\n.sn-component .border-solid, .sn-component .sn-button, .sn-component .sn-dropdown-menu, .sn-component .sn-select, .sn-component .sn-icon-button {\n  border-style: solid;\n}\n\n.sn-component .border-bottom-solid {\n  border-bottom-style: solid;\n}\n\n.sn-component .border-box, .sn-component .sn-select {\n  box-sizing: border-box;\n}\n\n.sn-component .ring-info, .sn-component .focus\\:ring-info:focus, .sn-component .sn-icon-button:focus, .sn-component .focus-within\\:ring-info:focus-within {\n  box-shadow: 0 0 0 2px var(--sn-stylekit-info-color);\n}\n\n.sn-component .inner-ring-info, .sn-component .focus\\:inner-ring-info:focus {\n  box-shadow: inset 0 0 0 2px var(--sn-stylekit-info-color);\n}\n\n.sn-component .shadow-overlay {\n  box-shadow: 0px 4px 24px 0px #00000029;\n}\n\n.sn-component .border-dark-red {\n  border-color: var(--sn-stylekit-dark-red);\n}\n\n.sn-component .border-bottom-1-gray {\n  border-bottom-color: var(--sn-stylekit-border-color);\n}\n\n.sn-component .bg-default, .sn-component .sn-button.outlined, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list, .sn-component .sn-select, .sn-component .sn-select-list {\n  background-color: var(--sn-stylekit-background-color);\n}\n\n.sn-component .bg-contrast, .sn-component .hover\\:bg-contrast:hover, .sn-component .sn-icon-button:hover, .sn-component .focus\\:bg-contrast:focus, .sn-component .sn-icon-button:focus {\n  background-color: var(--sn-stylekit-contrast-background-color);\n}\n\n.sn-component .bg-border {\n  background-color: var(--sn-stylekit-border-color);\n}\n\n.sn-component .bg-secondary-contrast, .sn-component .hover\\:bg-secondary-contrast:hover, .sn-component .focus\\:bg-secondary-contrast:focus {\n  background-color: var(--sn-stylekit-secondary-contrast-background-color);\n}\n\n.sn-component .bg-clip-padding, .sn-component .sn-icon-button {\n  background-clip: padding-box;\n}\n\n.sn-component .bg-transparent, .sn-component .sn-icon-button {\n  background-color: transparent;\n}\n\n.sn-component .bg-neutral {\n  background-color: var(--sn-stylekit-neutral-color);\n}\n\n.sn-component .color-neutral, .sn-component .sn-icon-button {\n  color: var(--sn-stylekit-neutral-color);\n}\n\n.sn-component .bg-text {\n  background-color: var(--sn-stylekit-contrast-foreground-color);\n}\n\n.sn-component .color-text, .sn-component .hover\\:color-text:hover, .sn-component .sn-icon-button:hover, .sn-component .focus\\:color-text:focus, .sn-component .sn-icon-button:focus, .sn-component .sn-button.outlined, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list, .sn-component .sn-select, .sn-component .sn-select-list {\n  color: var(--sn-stylekit-contrast-foreground-color);\n}\n\n.sn-component .bg-foreground {\n  background-color: var(--sn-stylekit-foreground-color);\n}\n\n.sn-component .color-foreground {\n  color: var(--sn-stylekit-foreground-color);\n}\n\n.sn-component .bg-danger {\n  background-color: var(--sn-stylekit-danger-color);\n}\n\n.sn-component .color-danger {\n  color: var(--sn-stylekit-danger-color);\n}\n\n.sn-component .bg-info, .sn-component .sn-button.info, .sn-component .sn-icon-button.info {\n  background-color: var(--sn-stylekit-info-color);\n}\n\n.sn-component .color-info {\n  color: var(--sn-stylekit-info-color);\n}\n\n.sn-component .bg-info-contrast {\n  background-color: var(--sn-stylekit-info-contrast-color);\n}\n\n.sn-component .color-info-contrast, .sn-component .sn-button.info, .sn-component .sn-icon-button.info, .sn-component .sn-icon-button.info:hover, .sn-component .sn-icon-button.info:focus {\n  color: var(--sn-stylekit-info-contrast-color);\n}\n\n.sn-component .bg-info-dark, .sn-component .hover\\:bg-info-dark:hover, .sn-component .focus\\:bg-info-dark:focus, .sn-component .sn-icon-button.info:hover, .sn-component .sn-icon-button.info:focus {\n  background-color: var(--sn-stylekit-info-color-darkened);\n}\n\n.sn-component .color-info-dark {\n  color: var(--sn-stylekit-info-color-darkened);\n}\n\n.sn-component .bg-grey-1 {\n  background-color: var(--sn-stylekit-grey-1);\n}\n\n.sn-component .color-grey-1 {\n  color: var(--sn-stylekit-grey-1);\n}\n\n.sn-component .bg-grey-2 {\n  background-color: var(--sn-stylekit-grey-2);\n}\n\n.sn-component .color-grey-2 {\n  color: var(--sn-stylekit-grey-2);\n}\n\n.sn-component .bg-grey-3 {\n  background-color: var(--sn-stylekit-grey-3);\n}\n\n.sn-component .color-grey-3 {\n  color: var(--sn-stylekit-grey-3);\n}\n\n.sn-component .bg-grey-4 {\n  background-color: var(--sn-stylekit-grey-4);\n}\n\n.sn-component .color-grey-4 {\n  color: var(--sn-stylekit-grey-4);\n}\n\n.sn-component .bg-grey-4-opacity-variant {\n  background-color: var(--sn-stylekit-grey-4-opacity-variant);\n}\n\n.sn-component .color-grey-4-opacity-variant {\n  color: var(--sn-stylekit-grey-4-opacity-variant);\n}\n\n.sn-component .bg-grey-5 {\n  background-color: var(--sn-stylekit-grey-5);\n}\n\n.sn-component .color-grey-5 {\n  color: var(--sn-stylekit-grey-5);\n}\n\n.sn-component .bg-grey-6 {\n  background-color: var(--sn-stylekit-grey-6);\n}\n\n.sn-component .color-grey-6 {\n  color: var(--sn-stylekit-grey-6);\n}\n\n.sn-component .bg-grey-super-light {\n  background-color: var(--sn-stylekit-grey-super-light);\n}\n\n.sn-component .color-grey-super-light {\n  color: var(--sn-stylekit-grey-super-light);\n}\n\n.sn-component .bg-black {\n  background-color: var(--sn-stylekit-black);\n}\n\n.sn-component .color-black {\n  color: var(--sn-stylekit-black);\n}\n\n.sn-component .bg-white {\n  background-color: var(--sn-stylekit-white);\n}\n\n.sn-component .color-white {\n  color: var(--sn-stylekit-white);\n}\n\n.sn-component .bg-dark-red {\n  background-color: var(--sn-stylekit-dark-red);\n}\n\n.sn-component .color-dark-red {\n  color: var(--sn-stylekit-dark-red);\n}\n\n.sn-component .bg-accessory-tint-1 {\n  background-color: var(--sn-stylekit-accessory-tint-color-1);\n}\n\n.sn-component .color-accessory-tint-1 {\n  color: var(--sn-stylekit-accessory-tint-color-1);\n}\n\n.sn-component .bg-accessory-tint-2 {\n  background-color: var(--sn-stylekit-accessory-tint-color-2);\n}\n\n.sn-component .color-accessory-tint-2 {\n  color: var(--sn-stylekit-accessory-tint-color-2);\n}\n\n.sn-component .bg-accessory-tint-3 {\n  background-color: var(--sn-stylekit-accessory-tint-color-3);\n}\n\n.sn-component .color-accessory-tint-3 {\n  color: var(--sn-stylekit-accessory-tint-color-3);\n}\n\n.sn-component .bg-accessory-tint-4 {\n  background-color: var(--sn-stylekit-accessory-tint-color-4);\n}\n\n.sn-component .color-accessory-tint-4 {\n  color: var(--sn-stylekit-accessory-tint-color-4);\n}\n\n.sn-component .bg-accessory-tint-5 {\n  background-color: var(--sn-stylekit-accessory-tint-color-5);\n}\n\n.sn-component .color-accessory-tint-5 {\n  color: var(--sn-stylekit-accessory-tint-color-5);\n}\n\n.sn-component .bg-accessory-tint-6 {\n  background-color: var(--sn-stylekit-accessory-tint-color-6);\n}\n\n.sn-component .color-accessory-tint-6 {\n  color: var(--sn-stylekit-accessory-tint-color-6);\n}\n\n.sn-component .selected\\:bg-color[data-selected], .sn-component .sn-dropdown-menu-list-item[data-selected], .sn-component .sn-select-list-option[data-selected],\n.sn-component .selected\\:bg-color[aria-selected='true'],\n.sn-component .sn-dropdown-menu-list-item[aria-selected='true'],\n.sn-component .sn-select-list-option[aria-selected='true'] {\n  background-color: var(--sn-stylekit-list-item-highlight-color);\n}\n\n.sn-component .selected\\:fg-color[data-selected], .sn-component .sn-dropdown-menu-list-item[data-selected], .sn-component .sn-select-list-option[data-selected],\n.sn-component .selected\\:fg-color[aria-selected='true'],\n.sn-component .sn-dropdown-menu-list-item[aria-selected='true'],\n.sn-component .sn-select-list-option[aria-selected='true'] {\n  color: var(--sn-stylekit-contrast-foreground-color);\n}\n\n.sn-component .inline-flex, .sn-component .sn-dropdown-menu, .sn-component .sn-select, .sn-component .sn-select-button {\n  display: inline-flex;\n}\n\n.sn-component .block {\n  display: block;\n}\n\n.sn-component .flex, .sn-component .sn-dropdown-menu-list-item, .sn-component .sn-icon-button {\n  display: flex;\n}\n\n.sn-component .flex-col {\n  flex-direction: column;\n}\n\n.sn-component .flex-row {\n  flex-direction: row;\n}\n\n.sn-component .flex-grow {\n  flex-grow: 1;\n}\n\n.sn-component .flex-shrink {\n  flex-shrink: 1;\n}\n\n.sn-component .flex-wrap {\n  flex-wrap: wrap;\n}\n\n.sn-component .grid {\n  display: grid;\n}\n\n.sn-component .items-center, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list-item, .sn-component .sn-select, .sn-component .sn-select-button, .sn-component .sn-icon-button {\n  align-items: center;\n}\n\n.sn-component .items-start {\n  align-items: flex-start;\n}\n\n.sn-component .items-stretch {\n  align-items: stretch;\n}\n\n.sn-component .justify-center, .sn-component .sn-dropdown-menu, .sn-component .sn-select, .sn-component .sn-select-button, .sn-component .sn-icon-button {\n  justify-content: center;\n}\n\n.sn-component .justify-between {\n  justify-content: space-between;\n}\n\n.sn-component .justify-start {\n  justify-content: flex-start;\n}\n\n.sn-component .justify-end {\n  justify-content: flex-end;\n}\n\n.sn-component .gap-1 {\n  grid-gap: 0.25rem;\n  gap: 0.25rem;\n}\n\n.sn-component .gap-2 {\n  grid-gap: 0.5rem;\n  gap: 0.5rem;\n}\n\n.sn-component .gap-3 {\n  grid-gap: 0.75rem;\n  gap: 0.75rem;\n}\n\n.sn-component .gap-4 {\n  grid-gap: 1rem;\n  gap: 1rem;\n}\n\n.sn-component .absolute, .sn-component .sn-dropdown-menu-list, .sn-component .sn-full-screen {\n  position: absolute;\n}\n\n.sn-component .fixed {\n  position: fixed;\n}\n\n.sn-component .cursor-pointer, .sn-component .sn-button, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list-item, .sn-component .sn-select, .sn-component .sn-select-button, .sn-component .sn-select-list-option, .sn-component .sn-icon-button {\n  cursor: pointer;\n}\n\n.sn-component .origin-top-right, .sn-component .sn-dropdown-menu-list, .sn-component .sn-select-list {\n  transform-origin: top right;\n}\n\n.sn-component .overflow-auto {\n  overflow: auto;\n}\n\n.sn-component .overflow-y-auto {\n  overflow-y: auto;\n}\n\n.sn-component .overflow-hidden {\n  overflow: hidden;\n}\n\n.sn-component .overflow-ellipsis {\n  text-overflow: ellipsis;\n}\n\n.sn-component .flex-basis-55 {\n  flex-basis: 13.75rem;\n}\n\n.sn-component .hover\\:brightness-130:hover, .sn-component .sn-button:hover {\n  filter: brightness(130%);\n}\n\n.sn-component .focus\\:brightness-130:focus, .sn-component .sn-button:focus {\n  filter: brightness(130%);\n}\n\n.sn-component .hover\\:bg-highlight:hover, .sn-component .sn-button.outlined:hover, .sn-component .sn-dropdown-menu:hover, .sn-component .sn-dropdown-menu-list-item:hover, .sn-component .sn-select:hover {\n  background-color: var(--sn-stylekit-list-item-highlight-color);\n}\n\n.sn-component .focus\\:bg-highlight:focus, .sn-component .sn-button.outlined:focus {\n  background-color: var(--sn-stylekit-list-item-highlight-color);\n}\n\n.sn-component .focus\\:padded-ring-info:focus {\n  box-shadow: 0 0 0 2px var(--sn-stylekit-background-color), 0 0 0 4px var(--sn-stylekit-info-color);\n}\n\n.sn-component .focus\\:border-bottom:focus {\n  border-bottom: 2px solid var(--sn-stylekit-info-color);\n}\n\n.sn-component .focus-within\\:padded-ring-info:focus-within {\n  box-shadow: 0 0 0 2px var(--sn-stylekit-background-color), 0 0 0 4px var(--sn-stylekit-info-color);\n}\n\n.sn-component .focus-within\\:border-background:focus-within {\n  border-color: var(--sn-stylekit-background-color);\n}\n\n.sn-component .box-shadow, .sn-component .sn-dropdown-menu-list, .sn-component .sn-select-popover, .sn-component .box-shadow:focus, .sn-component .sn-dropdown-menu-list:focus, .sn-component .sn-select-popover:focus, .sn-component .box-shadow:focus-within, .sn-component .sn-dropdown-menu-list:focus-within, .sn-component .sn-select-popover:focus-within {\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12), 0px 2px 8px rgba(0, 0, 0, 0.04);\n}\n\n.sn-component .focus\\:outline-none:focus, .sn-component .sn-button:focus, .sn-component .sn-dropdown-menu:focus, .sn-component .sn-dropdown-menu-list:focus, .sn-component .sn-dropdown-menu-list-item:focus, .sn-component .sn-select:focus, .sn-component .sn-select-button:focus, .sn-component .sn-select-list:focus, .sn-component .sn-select-popover:focus, .sn-component .sn-icon-button:focus {\n  outline: none;\n}\n\n.sn-component .focus\\:shadow-none:focus, .sn-component .sn-button.outlined:focus, .sn-component .sn-dropdown-menu:focus, .sn-component .sn-dropdown-menu-list-item:focus, .sn-component .sn-select:focus, .sn-component .sn-select-button:focus, .sn-component .sn-select-list:focus, .sn-component .sn-select-popover:focus {\n  box-shadow: none;\n}\n\n.sn-component .focus-within\\:outline-none:focus-within {\n  outline: none;\n}\n\n.sn-component .focus-within\\:shadow-none:focus-within {\n  box-shadow: none;\n}\n\n.sn-component .capitalize, .sn-component .sn-button {\n  text-transform: capitalize;\n}\n\n.sn-component .font-normal, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list, .sn-component .sn-select, .sn-component .sn-select-list-option {\n  font-weight: 300;\n}\n\n.sn-component .font-bold, .sn-component .sn-button {\n  font-weight: 700;\n}\n\n.sn-component .text-left {\n  text-align: left;\n}\n\n.sn-component .text-center {\n  text-align: center;\n}\n\n.sn-component .text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n\n.sn-component .text-sm, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list-item, .sn-component .sn-select, .sn-component .sn-select-list, .sn-component .sn-select-list-option {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n\n.sn-component .text-input {\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n}\n\n.sn-component .text-base {\n  font-size: 1rem;\n}\n\n.sn-component .text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n\n.sn-component .text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n\n.sn-component .text-3xl {\n  font-size: 1.875rem;\n  line-height: 2.25rem;\n}\n\n.sn-component .font-medium {\n  font-weight: 500;\n}\n\n.sn-component .leading-4, .sn-component .sn-dropdown-menu, .sn-component .sn-select {\n  line-height: 1rem;\n}\n\n.sn-component .whitespace-pre-wrap {\n  white-space: pre-wrap;\n}\n\n.sn-component .whitespace-nowrap {\n  white-space: nowrap;\n}\n\n.sn-component .h-auto {\n  height: auto;\n}\n\n.sn-component .h-full {\n  height: 100%;\n}\n\n.sn-component .h-100vh, .sn-component .sn-full-screen {\n  height: 100vh;\n}\n\n.sn-component .h-90vh {\n  height: 90vh;\n}\n\n.sn-component .h-0 {\n  height: 0;\n}\n\n.sn-component .h-2 {\n  height: 0.5rem;\n}\n\n.sn-component .h-3\\.5 {\n  height: 0.875rem;\n}\n\n.sn-component .h-4 {\n  height: 1rem;\n}\n\n.sn-component .h-4\\.5 {\n  height: 1.125rem;\n}\n\n.sn-component .h-5 {\n  height: 1.25rem;\n}\n\n.sn-component .h-6 {\n  height: 1.5rem;\n}\n\n.sn-component .h-7 {\n  height: 1.75rem;\n}\n\n.sn-component .h-8, .sn-component .sn-icon-button {\n  height: 2rem;\n}\n\n.sn-component .h-9 {\n  height: 2.25rem;\n}\n\n.sn-component .h-10 {\n  height: 2.5rem;\n}\n\n.sn-component .h-14 {\n  height: 3.5rem;\n}\n\n.sn-component .h-18 {\n  height: 4.5rem;\n}\n\n.sn-component .h-25 {\n  height: 6.25rem;\n}\n\n.sn-component .h-1px {\n  height: 1px;\n}\n\n.sn-component .h-20px {\n  height: 20px;\n}\n\n.sn-component .min-h-0 {\n  min-height: 0;\n}\n\n.sn-component .min-h-5 {\n  min-height: 1.25rem;\n}\n\n.sn-component .m-h-32, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list-item, .sn-component .sn-select {\n  min-height: 2rem;\n}\n\n.sn-component .min-h-20px {\n  height: 20px;\n}\n\n.sn-component .max-h-120 {\n  max-height: 30rem;\n}\n\n.sn-component .m-0, .sn-component .sn-icon-button {\n  margin: 0;\n}\n\n.sn-component .my-1 {\n  margin-top: 0.25rem;\n  margin-bottom: 0.25rem;\n}\n\n.sn-component .my-2 {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n\n.sn-component .my-3 {\n  margin-top: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n\n.sn-component .-mt-1 {\n  margin-top: -0.25rem;\n}\n\n.sn-component .mt-1 {\n  margin-top: 0.25rem;\n}\n\n.sn-component .mt-2, .sn-component .sn-dropdown-menu-list, .sn-component .sn-select-popover {\n  margin-top: 0.5rem;\n}\n\n.sn-component .mt-3 {\n  margin-top: 0.75rem;\n}\n\n.sn-component .mt-4 {\n  margin-top: 1rem;\n}\n\n.sn-component .mb-1 {\n  margin-bottom: 0.25rem;\n}\n\n.sn-component .mb-3 {\n  margin-bottom: 0.75rem;\n}\n\n.sn-component .-mr-2 {\n  margin-right: -0.5rem;\n}\n\n.sn-component .mr-1 {\n  margin-right: 0.25rem;\n}\n\n.sn-component .mr-1\\.5 {\n  margin-right: 0.375rem;\n}\n\n.sn-component .mr-2, .sn-component .sn-dropdown-menu > .sn-icon:first-child, .sn-component .sn-dropdown-menu-list-item > .sn-icon {\n  margin-right: 0.5rem;\n}\n\n.sn-component .mr-10 {\n  margin-right: 2.5rem;\n}\n\n.sn-component .ml-1 {\n  margin-left: 0.25rem;\n}\n\n.sn-component .ml-1\\.5 {\n  margin-left: 0.375rem;\n}\n\n.sn-component .ml-2, .sn-component .sn-dropdown-menu > .sn-icon:last-child, .sn-component .sn-select-button > .sn-icon:last-child {\n  margin-left: 0.5rem;\n}\n\n.sn-component .ml-6 {\n  margin-left: 1.5rem;\n}\n\n.sn-component .p-0, .sn-component .sn-icon-button {\n  padding-top: 0;\n  padding-bottom: 0;\n  padding-left: 0;\n  padding-right: 0;\n}\n\n.sn-component .p-2 {\n  padding: 0.5rem;\n}\n\n.sn-component .py-1, .sn-component .sn-dropdown-menu, .sn-component .sn-select-button {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n\n.sn-component .py-1\\.5 {\n  padding-top: 0.375rem;\n  padding-bottom: 0.375rem;\n}\n\n.sn-component .py-1\\.75 {\n  padding-top: 0.4375rem;\n  padding-bottom: 0.4375rem;\n}\n\n.sn-component .py-2, .sn-component .sn-dropdown-menu-list, .sn-component .sn-select-list-option {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.sn-component .py-3 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n\n.sn-component .py-4 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n\n.sn-component .py-6 {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n\n.sn-component .py-8 {\n  padding-top: 2rem;\n  padding-bottom: 2rem;\n}\n\n.sn-component .px-1 {\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n}\n\n.sn-component .px-2, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list-item {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.sn-component .px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n\n.sn-component .px-3\\.5 {\n  padding-left: 0.875rem;\n  padding-right: 0.875rem;\n}\n\n.sn-component .px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.sn-component .px-6 {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n}\n\n.sn-component .pt-4 {\n  padding-top: 1rem;\n}\n\n.sn-component .pb-3 {\n  padding-bottom: 0.75rem;\n}\n\n.sn-component .pr-2 {\n  padding-right: 0.5rem;\n}\n\n.sn-component .pl-1 {\n  padding-left: 0.25rem;\n}\n\n.sn-component .w-auto, .sn-component .sn-dropdown-menu, .sn-component .sn-select {\n  width: auto;\n}\n\n.sn-component .w-full {\n  width: 100%;\n}\n\n.sn-component .w-100vw, .sn-component .sn-full-screen {\n  width: 100vw;\n}\n\n.sn-component .fit-content {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n\n.sn-component .w-0 {\n  width: 0;\n}\n\n.sn-component .w-2 {\n  width: 0.5rem;\n}\n\n.sn-component .w-3\\.5 {\n  width: 0.875rem;\n}\n\n.sn-component .w-4 {\n  width: 1rem;\n}\n\n.sn-component .w-5 {\n  width: 1.25rem;\n}\n\n.sn-component .w-8, .sn-component .sn-icon-button {\n  width: 2rem;\n}\n\n.sn-component .w-25 {\n  width: 6.25rem;\n}\n\n.sn-component .w-30 {\n  width: 7.5rem;\n}\n\n.sn-component .w-55 {\n  width: 13.75rem;\n}\n\n.sn-component .w-56, .sn-component .sn-dropdown-menu-list {\n  width: 14rem;\n}\n\n.sn-component .w-70 {\n  width: 17.5rem;\n}\n\n.sn-component .w-80 {\n  width: 20rem;\n}\n\n.sn-component .w-103 {\n  width: 25.75rem;\n}\n\n.sn-component .w-125 {\n  width: 31.25rem;\n}\n\n.sn-component .w-160 {\n  width: 40rem;\n}\n\n.sn-component .w-20px {\n  width: 20px;\n}\n\n.sn-component .min-w-265px, .sn-component .sn-dropdown-menu-list {\n  min-width: 265px;\n}\n\n.sn-component .min-w-20px {\n  min-width: 20px;\n}\n\n.sn-component .min-w-0 {\n  min-width: 0;\n}\n\n.sn-component .min-w-4 {\n  min-width: 1rem;\n}\n\n.sn-component .min-w-5 {\n  min-width: 1.25rem;\n}\n\n.sn-component .min-w-20 {\n  min-width: 5rem;\n}\n\n.sn-component .min-w-40 {\n  min-width: 10rem;\n}\n\n.sn-component .min-w-42 {\n  min-width: 10.5rem;\n}\n\n.sn-component .min-w-55 {\n  min-width: 13.75rem;\n}\n\n.sn-component .min-w-80 {\n  min-width: 20rem;\n}\n\n.sn-component .max-w-xs {\n  max-width: 20rem;\n}\n\n.sn-component .max-w-md {\n  max-width: 28rem;\n}\n\n.sn-component .max-w-40 {\n  max-width: 10rem;\n}\n\n.sn-component .max-w-125 {\n  max-width: 31.25rem;\n}\n\n.sn-component .max-w-290px {\n  max-width: 290px;\n}\n\n.sn-component .duration-150 {\n  transition-duration: 150ms;\n}\n\n.sn-component .ease-out {\n  transition-timing-function: ease-out;\n}\n\n.sn-component .transition-background {\n  transition-property: background;\n}\n\n.sn-component .transition-transform {\n  transition-property: transform;\n}\n\n.sn-component .cursor-pointer, .sn-component .sn-button, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list-item, .sn-component .sn-select, .sn-component .sn-select-button, .sn-component .sn-select-list-option, .sn-component .sn-icon-button {\n  cursor: pointer;\n}\n\n.sn-component .top-0, .sn-component .top-left-0, .sn-component .sn-full-screen {\n  top: 0;\n}\n\n.sn-component .left-0, .sn-component .top-left-0, .sn-component .sn-full-screen {\n  left: 0;\n}\n\n.sn-component .-top-10 {\n  top: -2.5rem;\n}\n\n.sn-component .-left-51 {\n  left: -12.75rem;\n}\n\n.sn-component .sn-button {\n  font-size: 0.8125rem;\n  padding: 0.609375rem;\n  min-height: 1.8125rem;\n}\n\n.sn-component .sn-button.small {\n  font-size: 0.7109375rem;\n  padding: 0.40625rem 0.609375rem;\n}\n\n.sn-component .sn-button.contrast {\n  background-color: var(--sn-stylekit-contrast-foreground-color);\n  color: var(--sn-stylekit-contrast-background-color);\n}\n\n.sn-component .sn-button.neutral {\n  background-color: var(--sn-stylekit-neutral-color);\n  color: var(--sn-stylekit-neutral-contrast-color);\n}\n\n.sn-component .sn-button.warning {\n  background-color: var(--sn-stylekit-warning-color);\n  color: var(--sn-stylekit-warning-contrast-color);\n}\n\n.sn-component .sn-button.danger {\n  background-color: var(--sn-stylekit-danger-color);\n  color: var(--sn-stylekit-danger-contrast-color);\n}\n\n.sn-component .sn-button.success {\n  background-color: var(--sn-stylekit-success-color);\n  color: var(--sn-stylekit-success-contrast-color);\n}\n\n.sn-component [data-reach-custom-checkbox-container] {\n  margin: 0;\n}\n\n.sn-component.no-select {\n  user-select: none;\n}\n\n/* Goes outside of .sn-component declaration, as following properties are global */\ninput,\ntextarea,\n[contenteditable] {\n  caret-color: var(--sn-stylekit-editor-foreground-color);\n}\n\n.windows-web,\n.windows-desktop,\n.linux-web,\n.linux-desktop {\n  scrollbar-width: thin;\n}\n\n.windows-web ::-webkit-scrollbar,\n.windows-desktop ::-webkit-scrollbar,\n.linux-web ::-webkit-scrollbar,\n.linux-desktop ::-webkit-scrollbar {\n  width: 17px;\n  height: 18px;\n  border-left: none;\n}\n\n.windows-web ::-webkit-scrollbar-thumb,\n.windows-desktop ::-webkit-scrollbar-thumb,\n.linux-web ::-webkit-scrollbar-thumb,\n.linux-desktop ::-webkit-scrollbar-thumb {\n  border: 4px solid rgba(0, 0, 0, 0);\n  background-clip: padding-box;\n  -webkit-border-radius: 10px;\n  background-color: var(--sn-stylekit-scrollbar-thumb-color);\n  -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);\n}\n\n.windows-web ::-webkit-scrollbar-button,\n.windows-desktop ::-webkit-scrollbar-button,\n.linux-web ::-webkit-scrollbar-button,\n.linux-desktop ::-webkit-scrollbar-button {\n  width: 0;\n  height: 0;\n  display: none;\n}\n\n.windows-web ::-webkit-scrollbar-corner,\n.windows-desktop ::-webkit-scrollbar-corner,\n.linux-web ::-webkit-scrollbar-corner,\n.linux-desktop ::-webkit-scrollbar-corner {\n  background-color: transparent;\n}\n\n:root {\n  --reach-listbox: 1;\n}\n\n[data-reach-listbox-popover] {\n  display: block;\n  position: absolute;\n  min-width: -moz-fit-content;\n  min-width: -webkit-min-content;\n  min-width: min-content;\n  padding: 0.25rem 0;\n  background: white;\n  outline: none;\n  border: solid 1px rgba(0, 0, 0, 0.25);\n}\n\n[data-reach-listbox-popover]:focus-within {\n  box-shadow: 0 0 4px Highlight;\n  outline: -webkit-focus-ring-color auto 4px;\n}\n\n[data-reach-listbox-popover][hidden] {\n  display: none;\n}\n\n[data-reach-listbox-list] {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n[data-reach-listbox-list]:focus {\n  box-shadow: none;\n  outline: none;\n}\n\n[data-reach-listbox-option] {\n  display: block;\n  margin: 0;\n  padding: 0.25rem 0.5rem;\n  white-space: nowrap;\n  user-select: none;\n}\n\n[data-reach-listbox-option][data-current-nav] {\n  background: #1672d4;\n  color: white;\n}\n\n[data-reach-listbox-option][data-current-selected] {\n  font-weight: bolder;\n}\n\n[data-reach-listbox-option][data-current-selected][data-confirming] {\n  animation: flash 100ms;\n  animation-iteration-count: 1;\n}\n\n[data-reach-listbox-option][aria-disabled=\"true\"] {\n  opacity: 0.5;\n}\n\n[data-reach-listbox-button] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1px 10px 2px;\n  border: 1px solid;\n  border-color: #d8d8d8 #d1d1d1 #bababa;\n  cursor: default;\n  user-select: none;\n}\n\n[data-reach-listbox-button][aria-disabled=\"true\"] {\n  opacity: 0.5;\n}\n\n[data-reach-listbox-arrow] {\n  margin-left: 0.5rem;\n  display: block;\n  font-size: 0.5em;\n}\n\n[data-reach-listbox-group-label] {\n  display: block;\n  margin: 0;\n  padding: 0.25rem 0.5rem;\n  white-space: nowrap;\n  user-select: none;\n  font-weight: bolder;\n}\n\n@keyframes flash {\n  0% {\n    background: #1159a6;\n    color: white;\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n    background: inherit;\n    color: inherit;\n  }\n  100% {\n    background: #1159a6;\n    color: white;\n    opacity: 1;\n  }\n}\n\n","@font-face {\n  font-family: \"Material Icons\";\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n  src: url(\"./material-icons.woff2\") format(\"woff2\"), url(\"./material-icons.woff\") format(\"woff\");\n}\n.material-icons {\n  font-family: \"Material Icons\";\n  font-weight: normal;\n  font-style: normal;\n  font-size: 24px;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  word-wrap: normal;\n  direction: ltr;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-feature-settings: \"liga\";\n}\n\n@font-face {\n  font-family: \"Material Icons Outlined\";\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n  src: url(\"./material-icons-outlined.woff2\") format(\"woff2\"), url(\"./material-icons-outlined.woff\") format(\"woff\");\n}\n.material-icons-outlined {\n  font-family: \"Material Icons Outlined\";\n  font-weight: normal;\n  font-style: normal;\n  font-size: 24px;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  word-wrap: normal;\n  direction: ltr;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-feature-settings: \"liga\";\n}\n\n@font-face {\n  font-family: \"Material Icons Round\";\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n  src: url(\"./material-icons-round.woff2\") format(\"woff2\"), url(\"./material-icons-round.woff\") format(\"woff\");\n}\n.material-icons-round {\n  font-family: \"Material Icons Round\";\n  font-weight: normal;\n  font-style: normal;\n  font-size: 24px;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  word-wrap: normal;\n  direction: ltr;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-feature-settings: \"liga\";\n}\n\n@font-face {\n  font-family: \"Material Icons Sharp\";\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n  src: url(\"./material-icons-sharp.woff2\") format(\"woff2\"), url(\"./material-icons-sharp.woff\") format(\"woff\");\n}\n.material-icons-sharp {\n  font-family: \"Material Icons Sharp\";\n  font-weight: normal;\n  font-style: normal;\n  font-size: 24px;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  word-wrap: normal;\n  direction: ltr;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-feature-settings: \"liga\";\n}\n\n@font-face {\n  font-family: \"Material Icons Two Tone\";\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n  src: url(\"./material-icons-two-tone.woff2\") format(\"woff2\"), url(\"./material-icons-two-tone.woff\") format(\"woff\");\n}\n.material-icons-two-tone {\n  font-family: \"Material Icons Two Tone\";\n  font-weight: normal;\n  font-style: normal;\n  font-size: 24px;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  word-wrap: normal;\n  direction: ltr;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-feature-settings: \"liga\";\n}\n","@font-face{font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(fonts/KaTeX_AMS-Regular.woff2) format(\"woff2\"),url(fonts/KaTeX_AMS-Regular.woff) format(\"woff\"),url(fonts/KaTeX_AMS-Regular.ttf) format(\"truetype\")}@font-face{font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(fonts/KaTeX_Caligraphic-Bold.woff2) format(\"woff2\"),url(fonts/KaTeX_Caligraphic-Bold.woff) format(\"woff\"),url(fonts/KaTeX_Caligraphic-Bold.ttf) format(\"truetype\")}@font-face{font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(fonts/KaTeX_Caligraphic-Regular.woff2) format(\"woff2\"),url(fonts/KaTeX_Caligraphic-Regular.woff) format(\"woff\"),url(fonts/KaTeX_Caligraphic-Regular.ttf) format(\"truetype\")}@font-face{font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(fonts/KaTeX_Fraktur-Bold.woff2) format(\"woff2\"),url(fonts/KaTeX_Fraktur-Bold.woff) format(\"woff\"),url(fonts/KaTeX_Fraktur-Bold.ttf) format(\"truetype\")}@font-face{font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(fonts/KaTeX_Fraktur-Regular.woff2) format(\"woff2\"),url(fonts/KaTeX_Fraktur-Regular.woff) format(\"woff\"),url(fonts/KaTeX_Fraktur-Regular.ttf) format(\"truetype\")}@font-face{font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(fonts/KaTeX_Main-Bold.woff2) format(\"woff2\"),url(fonts/KaTeX_Main-Bold.woff) format(\"woff\"),url(fonts/KaTeX_Main-Bold.ttf) format(\"truetype\")}@font-face{font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(fonts/KaTeX_Main-BoldItalic.woff2) format(\"woff2\"),url(fonts/KaTeX_Main-BoldItalic.woff) format(\"woff\"),url(fonts/KaTeX_Main-BoldItalic.ttf) format(\"truetype\")}@font-face{font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(fonts/KaTeX_Main-Italic.woff2) format(\"woff2\"),url(fonts/KaTeX_Main-Italic.woff) format(\"woff\"),url(fonts/KaTeX_Main-Italic.ttf) format(\"truetype\")}@font-face{font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(fonts/KaTeX_Main-Regular.woff2) format(\"woff2\"),url(fonts/KaTeX_Main-Regular.woff) format(\"woff\"),url(fonts/KaTeX_Main-Regular.ttf) format(\"truetype\")}@font-face{font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(fonts/KaTeX_Math-BoldItalic.woff2) format(\"woff2\"),url(fonts/KaTeX_Math-BoldItalic.woff) format(\"woff\"),url(fonts/KaTeX_Math-BoldItalic.ttf) format(\"truetype\")}@font-face{font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(fonts/KaTeX_Math-Italic.woff2) format(\"woff2\"),url(fonts/KaTeX_Math-Italic.woff) format(\"woff\"),url(fonts/KaTeX_Math-Italic.ttf) format(\"truetype\")}@font-face{font-family:\"KaTeX_SansSerif\";font-style:normal;font-weight:700;src:url(fonts/KaTeX_SansSerif-Bold.woff2) format(\"woff2\"),url(fonts/KaTeX_SansSerif-Bold.woff) format(\"woff\"),url(fonts/KaTeX_SansSerif-Bold.ttf) format(\"truetype\")}@font-face{font-family:\"KaTeX_SansSerif\";font-style:italic;font-weight:400;src:url(fonts/KaTeX_SansSerif-Italic.woff2) format(\"woff2\"),url(fonts/KaTeX_SansSerif-Italic.woff) format(\"woff\"),url(fonts/KaTeX_SansSerif-Italic.ttf) format(\"truetype\")}@font-face{font-family:\"KaTeX_SansSerif\";font-style:normal;font-weight:400;src:url(fonts/KaTeX_SansSerif-Regular.woff2) format(\"woff2\"),url(fonts/KaTeX_SansSerif-Regular.woff) format(\"woff\"),url(fonts/KaTeX_SansSerif-Regular.ttf) format(\"truetype\")}@font-face{font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(fonts/KaTeX_Script-Regular.woff2) format(\"woff2\"),url(fonts/KaTeX_Script-Regular.woff) format(\"woff\"),url(fonts/KaTeX_Script-Regular.ttf) format(\"truetype\")}@font-face{font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(fonts/KaTeX_Size1-Regular.woff2) format(\"woff2\"),url(fonts/KaTeX_Size1-Regular.woff) format(\"woff\"),url(fonts/KaTeX_Size1-Regular.ttf) format(\"truetype\")}@font-face{font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(fonts/KaTeX_Size2-Regular.woff2) format(\"woff2\"),url(fonts/KaTeX_Size2-Regular.woff) format(\"woff\"),url(fonts/KaTeX_Size2-Regular.ttf) format(\"truetype\")}@font-face{font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(fonts/KaTeX_Size3-Regular.woff2) format(\"woff2\"),url(fonts/KaTeX_Size3-Regular.woff) format(\"woff\"),url(fonts/KaTeX_Size3-Regular.ttf) format(\"truetype\")}@font-face{font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(fonts/KaTeX_Size4-Regular.woff2) format(\"woff2\"),url(fonts/KaTeX_Size4-Regular.woff) format(\"woff\"),url(fonts/KaTeX_Size4-Regular.ttf) format(\"truetype\")}@font-face{font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(fonts/KaTeX_Typewriter-Regular.woff2) format(\"woff2\"),url(fonts/KaTeX_Typewriter-Regular.woff) format(\"woff\"),url(fonts/KaTeX_Typewriter-Regular.ttf) format(\"truetype\")}.katex{text-rendering:auto;font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;text-indent:0}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:\"0.15.2\"}.katex .katex-mathml{clip:rect(1px,1px,1px,1px);border:0;height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.newline{display:block}.katex .base{position:relative;white-space:nowrap;width:-webkit-min-content;width:-moz-min-content;width:min-content}.katex .base,.katex .strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .hbox{width:100%}.katex .hbox,.katex .thinbox{display:inline-flex;flex-direction:row}.katex .thinbox{max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline,.katex .hline,.katex .mfrac .frac-line,.katex .overline .overline-line,.katex .rule,.katex .underline .underline-line{min-height:1px}.katex .mspace{display:inline-block}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.inner,.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .clap>.fix,.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .clap>.inner,.katex .rlap>.inner{left:0}.katex .clap>.inner>span{margin-left:-50%;margin-right:50%}.katex .rule{border:0 solid;display:inline-block;position:relative}.katex .hline,.katex .overline .overline-line,.katex .underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.root{margin-left:.27777778em;margin-right:-.55555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.83333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.16666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.33333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.66666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.45666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .sizing.reset-size2.size11{font-size:4.14666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.71428571em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.85714286em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.14285714em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.28571429em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.42857143em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.71428571em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.05714286em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.46857143em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:2.96285714em}.katex .fontsize-ensurer.reset-size3.size11,.katex .sizing.reset-size3.size11{font-size:3.55428571em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.55555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.66666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.77777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.88888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.11111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.33333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.30444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .sizing.reset-size5.size11{font-size:2.76444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.41666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.58333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.66666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.83333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.72833333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .sizing.reset-size7.size11{font-size:2.07333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.34722222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.41666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.48611111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.55555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.69444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.83333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.44027778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .sizing.reset-size8.size11{font-size:1.72777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.28935185em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.34722222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.40509259em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.46296296em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.52083333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.5787037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.69444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.83333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.20023148em}.katex .fontsize-ensurer.reset-size9.size11,.katex .sizing.reset-size9.size11{font-size:1.43981481em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.24108004em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.28929605em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.33751205em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.38572806em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.43394407em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.48216008em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.57859209em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.69431051em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.83317261em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .sizing.reset-size10.size11{font-size:1.19961427em}.katex .fontsize-ensurer.reset-size11.size1,.katex .sizing.reset-size11.size1{font-size:.20096463em}.katex .fontsize-ensurer.reset-size11.size2,.katex .sizing.reset-size11.size2{font-size:.24115756em}.katex .fontsize-ensurer.reset-size11.size3,.katex .sizing.reset-size11.size3{font-size:.28135048em}.katex .fontsize-ensurer.reset-size11.size4,.katex .sizing.reset-size11.size4{font-size:.32154341em}.katex .fontsize-ensurer.reset-size11.size5,.katex .sizing.reset-size11.size5{font-size:.36173633em}.katex .fontsize-ensurer.reset-size11.size6,.katex .sizing.reset-size11.size6{font-size:.40192926em}.katex .fontsize-ensurer.reset-size11.size7,.katex .sizing.reset-size11.size7{font-size:.48231511em}.katex .fontsize-ensurer.reset-size11.size8,.katex .sizing.reset-size11.size8{font-size:.57877814em}.katex .fontsize-ensurer.reset-size11.size9,.katex .sizing.reset-size11.size9{font-size:.69453376em}.katex .fontsize-ensurer.reset-size11.size10,.katex .sizing.reset-size11.size10{font-size:.83360129em}.katex .fontsize-ensurer.reset-size11.size11,.katex .sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .accent .accent-body{position:relative}.katex .accent .accent-body:not(.accent-full){width:0}.katex .overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .stretchy:after,.katex .stretchy:before{content:\"\"}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .eqn-num:before{content:\"(\" counter(katexEqnNo) \")\";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:\"(\" counter(mmlEqnNo) \")\";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}\n","code[class*='language-'],\npre[class*='language-'] {\n  text-align: left;\n  white-space: pre;\n  word-spacing: normal;\n  word-break: normal;\n  word-wrap: normal;\n  color: #90a4ae;\n  background: #fafafa;\n  font-family: Roboto Mono, monospace;\n  font-size: 1em;\n  line-height: 1.5em;\n\n  -moz-tab-size: 4;\n  -o-tab-size: 4;\n  tab-size: 4;\n\n  -webkit-hyphens: none;\n  -moz-hyphens: none;\n  -ms-hyphens: none;\n  hyphens: none;\n}\n\ncode[class*='language-']::-moz-selection,\npre[class*='language-']::-moz-selection,\ncode[class*='language-'] ::-moz-selection,\npre[class*='language-'] ::-moz-selection {\n  background: #cceae7;\n  color: #263238;\n}\n\ncode[class*='language-']::selection,\npre[class*='language-']::selection,\ncode[class*='language-'] ::selection,\npre[class*='language-'] ::selection {\n  background: #cceae7;\n  color: #263238;\n}\n\n:not(pre) > code[class*='language-'] {\n  white-space: normal;\n  border-radius: 0.2em;\n  padding: 0.1em;\n}\n\npre[class*='language-'] {\n  overflow: auto;\n  position: relative;\n  margin: 0.5em 0;\n  padding: 1.25em 1em;\n}\n\n.language-css > code,\n.language-sass > code,\n.language-scss > code {\n  color: #f76d47;\n}\n\n[class*='language-'] .namespace {\n  opacity: 0.7;\n}\n\n.token.atrule {\n  color: #7c4dff;\n}\n\n.token.attr-name {\n  color: #39adb5;\n}\n\n.token.attr-value {\n  color: #f6a434;\n}\n\n.token.attribute {\n  color: #f6a434;\n}\n\n.token.boolean {\n  color: #7c4dff;\n}\n\n.token.builtin {\n  color: #39adb5;\n}\n\n.token.cdata {\n  color: #39adb5;\n}\n\n.token.char {\n  color: #39adb5;\n}\n\n.token.class {\n  color: #39adb5;\n}\n\n.token.class-name {\n  color: #6182b8;\n}\n\n.token.comment {\n  color: #aabfc9;\n}\n\n.token.constant {\n  color: #7c4dff;\n}\n\n.token.deleted {\n  color: #e53935;\n}\n\n.token.doctype {\n  color: #aabfc9;\n}\n\n.token.entity {\n  color: #e53935;\n}\n\n.token.function {\n  color: #7c4dff;\n}\n\n.token.hexcode {\n  color: #f76d47;\n}\n\n.token.id {\n  color: #7c4dff;\n  font-weight: bold;\n}\n\n.token.important {\n  color: #7c4dff;\n  font-weight: bold;\n}\n\n.token.inserted {\n  color: #39adb5;\n}\n\n.token.keyword {\n  color: #7c4dff;\n}\n\n.token.number {\n  color: #f76d47;\n}\n\n.token.operator {\n  color: #39adb5;\n}\n\n.token.prolog {\n  color: #aabfc9;\n}\n\n.token.property {\n  color: #39adb5;\n}\n\n.token.pseudo-class {\n  color: #f6a434;\n}\n\n.token.pseudo-element {\n  color: #f6a434;\n}\n\n.token.punctuation {\n  color: #39adb5;\n}\n\n.token.regex {\n  color: #6182b8;\n}\n\n.token.selector {\n  color: #e53935;\n}\n\n.token.string {\n  color: #f6a434;\n}\n\n.token.symbol {\n  color: #7c4dff;\n}\n\n.token.tag {\n  color: #e53935;\n}\n\n.token.unit {\n  color: #f76d47;\n}\n\n.token.url {\n  color: #e53935;\n}\n\n.token.variable {\n  color: #e53935;\n}\n","@import '~sn-stylekit/dist/stylekit.css';\n@import 'material-icons/iconfont/material-icons.css';\n@import 'katex/dist/katex.min.css';\n@import 'prism/material-light.css';\n\n:root {\n  --sn-stylekit-monospace-font: SFMono-Regular, Consolas, Liberation Mono, Menlo,\n    'Ubuntu Mono', courier, monospace;\n}\n\nbody,\nhtml {\n  background-color: transparent;\n  background-color: var(--sn-stylekit-background-color);\n  font-family: var(--sn-stylekit-sans-serif-font);\n  font-size: var(--sn-stylekit-font-size-editor);\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n}\n\n* {\n  // To prevent gray flash when focusing input on mobile Safari\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  font-family: var(--sn-stylekit-sans-serif-font);\n}\n\n#root {\n  height: 100%;\n}\n\n.sn-component {\n  display: flex;\n  flex-direction: column;\n  font-size: var(--sn-stylekit-font-size-editor);\n  min-height: 100vh;\n  @media screen and (max-width: 420px) {\n    min-height: -webkit-fill-available;\n  }\n}\n\n.container {\n  flex: 1;\n  flex-grow: 1;\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n",".container {\n  .milkdown-container {\n    margin: 0 auto;\n    width: 100%;\n    max-width: 100%;\n    height: 100%;\n    max-height: 100%;\n    flex-grow: 1;\n    justify-content: flex-start;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    padding: 0;\n    box-sizing: border-box;\n\n    > div {\n      height: 100%;\n    }\n\n    .milkdown-menu-wrapper {\n      position: relative;\n      overflow: auto;\n      height: 100%;\n\n      .milkdown-menu {\n        top: 0;\n        z-index: 1;\n        left: 0;\n        right: 0;\n        box-sizing: border-box;\n        width: 100%;\n        display: flex;\n        flex-wrap: nowrap;\n        overflow-x: auto;\n        border: none;\n        background: rgba(var(--surface), 1);\n        background-color: var(--sn-stylekit-contrast-background-color);\n        border-color: var(--sn-stylekit-border-color);\n        position: absolute;\n\n        .button {\n          background-color: var(--sn-stylekit-secondary-background-color);\n          color: var(--sn-stylekit-neutral-color);\n          -webkit-transition: none;\n          transition: none;\n        }\n\n        .button.active {\n          background-color: var(--sn-stylekit-neutral-color) !important;\n          color: var(--sn-stylekit-neutral-contrast-color) !important;\n        }\n\n        .divider {\n          background-color: var(--sn-stylekit-border-color) !important;\n        }\n      }\n\n      .milkdown {\n        max-width: 100%;\n        height: 100%;\n        box-shadow: none !important;\n        background-color: var(--sn-stylekit-background-color) !important;\n        color: var(--sn-stylekit-editor-foreground-color) !important;\n        overflow: auto;\n\n        &::-webkit-scrollbar-thumb {\n          background-color: var(--sn-stylekit-scrollbar-thumb-color);\n          border: 2px solid transparent;\n        }\n\n        &::-webkit-scrollbar-thumb:hover {\n          background-color: var(--sn-stylekit-scrollbar-thumb-color);\n        }\n\n        .emoji {\n          height: 1.3rem !important;\n          width: 1.3rem !important;\n        }\n\n        .editor {\n          padding-top: 4.125rem !important;\n          padding-left: 1.25rem !important;\n          padding-right: 1.25rem !important;\n          padding-bottom: 0 !important;\n          max-width: 100% !important;\n\n          > * {\n            margin-top: 0 !important;\n            margin-bottom: 0.875rem !important;\n          }\n\n          h1.heading.h1 {\n            font-size: 2.8rem !important;\n          }\n\n          h2.heading.h2 {\n            font-size: 2.3rem !important;\n          }\n\n          h3.heading.h3 {\n            font-size: 1.8rem !important;\n          }\n\n          h4.heading.h4 {\n            font-size: 1.5rem !important;\n          }\n\n          h5.heading.h5 {\n            font-size: 1rem !important;\n          }\n\n          p.paragraph {\n            font-size: var(--sn-stylekit-font-size-editor) !important;\n          }\n\n          .strike-through {\n            text-decoration-color: rgba(\n              var(--sn-stylekit-editor-foreground-color),\n              0.5\n            );\n          }\n\n          .ProseMirror-gapcursor {\n            caret-color: transparent;\n          }\n\n          .tableWrapper table {\n            border-color: var(--sn-stylekit-border-color);\n\n            th {\n              color: var(--sn-stylekit-neutral-contrast-color);\n              border: var(--lineWidth) solid var(--sn-stylekit-border-color);\n              background-color: var(--sn-stylekit-neutral-color) !important;\n              background-clip: padding-box;\n            }\n\n            td {\n              color: var(--sn-stylekit-paragraph-text-color);\n              border: var(--lineWidth) solid var(--sn-stylekit-border-color);\n              background: inherit;\n            }\n          }\n\n          .image,\n          .system,\n          .empty {\n            background-color: var(\n              --sn-stylekit-secondary-contrast-background-color\n            );\n          }\n\n          .empty .placeholder::before {\n            color: var(--sn-stylekit-foreground-color);\n          }\n\n          .code-inline {\n            color: var(--sn-stylekit-background-color);\n            background-color: var(--sn-stylekit-foreground-color);\n          }\n        }\n\n        .slash-dropdown {\n          background-color: var(\n            --sn-stylekit-contrast-background-color\n          ) !important;\n          border-color: var(--sn-stylekit-border-color) !important;\n\n          .slash-dropdown-item {\n            color: var(--sn-stylekit-paragraph-text-color) !important;\n\n            .icon {\n              color: var(--sn-stylekit-paragraph-text-color) !important;\n            }\n          }\n        }\n\n        .milkdown-emoji-filter {\n          background-color: var(\n            --sn-stylekit-contrast-background-color\n          ) !important;\n          border-color: var(--sn-stylekit-border-color) !important;\n          color: var(--sn-stylekit-paragraph-text-color) !important;\n        }\n\n        .tooltip {\n          background-color: var(\n            --sn-stylekit-contrast-background-color\n          ) !important;\n          border-color: var(--sn-stylekit-border-color) !important;\n\n          .icon {\n            color: var(--sn-stylekit-paragraph-text-color) !important;\n          }\n\n          .icon:not(:last-child)::after {\n            width: 0 !important;\n            right: 0 !important;\n          }\n        }\n\n        .tooltip-input {\n          background-color: var(\n            --sn-stylekit-contrast-background-color\n          ) !important;\n          border-color: var(--sn-stylekit-border-color) !important;\n\n          button {\n            color: var(--sn-stylekit-success-color) !important;\n          }\n\n          input {\n            color: var(--sn-stylekit-paragraph-text-color) !important;\n          }\n\n          input::placeholder {\n            color: var(--sn-stylekit-neutral-color) !important;\n          }\n        }\n      }\n    }\n  }\n}\n",".container {\n  .codemirror-container {\n    overflow-y: auto;\n    max-height: 100%;\n\n    .cm-theme-light {\n      .cm-editor {\n        background-color: var(--sn-stylekit-editor-background-color) !important;\n        color: var(--sn-stylekit-editor-foreground-color) !important;\n        font-family: var(--sn-stylekit-monospace-font);\n        -webkit-overflow-scrolling: touch;\n        font-size: calc(var(--sn-stylekit-font-size-editor) - 0.3rem);\n\n        @media only screen and (min-width: 768px) {\n          font-size: calc(var(--sn-stylekit-font-size-editor) - 0.1rem);\n        }\n\n        .cm-content {\n          caret-color: var(--sn-stylekit-editor-foreground-color) !important;\n        }\n\n        .cm-lineNumbers {\n          color: var(--sn-stylekit-neutral-color) !important;\n          opacity: 0.5;\n        }\n\n        .cm-cursor {\n          border-color: var(--sn-stylekit-info-color) !important;\n        }\n\n        .cm-gutters {\n          background-color: var(--sn-stylekit-background-color) !important;\n          color: var(--sn-stylekit-editor-foreground-color) !important;\n          border-color: var(--sn-stylekit-border-color) !important;\n        }\n\n        .ͼb {\n          color: var(--sn-stylekit-info-color) !important;\n        }\n\n        .cm-selectionBackground {\n          background: var(--sn-stylekit-info-color) !important;\n        }\n\n        .cm-activeLine {\n          background-color: var(\n            --sn-stylekit-secondary-contrast-background-color\n          ) !important;\n        }\n\n        .cm-activeLineGutter {\n          background-color: var(\n            --sn-stylekit-contrast-background-color\n          ) !important;\n        }\n      }\n    }\n  }\n}\n",".container > .separator {\n  background-color: var(--sn-stylekit-border-color);\n}\n\n.container.horizontal {\n  flex-direction: row;\n  overflow-x: clip;\n\n  .column {\n    flex: 1;\n  }\n\n  .column.full {\n    max-width: 100%;\n  }\n\n  .column.half {\n    max-width: 50%;\n  }\n\n  .separator {\n    width: 10px;\n  }\n\n  .column.half:last-child {\n    max-width: 50%;\n  }\n}\n\n.container.vertical {\n  flex-direction: column;\n  overflow-y: clip;\n\n  $separator-height: 1%;\n\n  .row.full {\n    height: 100%;\n  }\n\n  .row.half {\n    height: 40%;\n  }\n\n  .separator {\n    height: $separator-height;\n  }\n\n  .row.half:last-child {\n    height: 60% - $separator-height;\n  }\n}\n"],"names":[],"sourceRoot":""}
\ No newline at end of file
diff --git a/public/components/org.standardnotes.markdown-visual-editor/package.json b/public/components/org.standardnotes.markdown-visual-editor/package.json
index b6f1050e4..30f2e05dc 100644
--- a/public/components/org.standardnotes.markdown-visual-editor/package.json
+++ b/public/components/org.standardnotes.markdown-visual-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/markdown-visual",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "author": "Johnny Almonte <johnny@standardnotes.com>",
   "description": "A lightweight WYSIWYG markdown editor for Standard Notes, derived from Milkdown.",
   "keywords": [
diff --git a/yarn.lock b/yarn.lock
index 971519079..30cd56c7c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2396,6 +2396,14 @@
     "@standardnotes/common" "^1.17.0"
     "@standardnotes/sncrypto-common" "^1.7.3"
 
+"@standardnotes/applications@^1.2.7":
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/@standardnotes/applications/-/applications-1.2.7.tgz#77dc5c1061e28d377614f44c5ad9b6e5970cfc8d"
+  integrity sha512-7bPb7jDIexLZ9R5ZjfWH+dmNdATzqOv7MyR1NMjnHaEhJQCsg9DM2mmKndbulgm8O8r+klC+NN2TMSFHcm6KDw==
+  dependencies:
+    "@standardnotes/common" "^1.18.0"
+    "@standardnotes/sncrypto-common" "^1.7.3"
+
 "@standardnotes/auth@^3.18.0":
   version "3.18.0"
   resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.18.0.tgz#682301abe8b15d297cd3d140682e8c85bc849953"
@@ -2404,25 +2412,46 @@
     "@standardnotes/common" "^1.17.0"
     jsonwebtoken "^8.5.1"
 
+"@standardnotes/auth@^3.18.1":
+  version "3.18.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.18.1.tgz#05c6e86f17cb54bb3b1fdab458da0219fcf14b99"
+  integrity sha512-ppQ6NOGwXXe78lpomwDyk9FyW1DkyC1eOWytV4G67kCTBhEr8NNJ9Y+8efJLsPQgDU7Cn7CMZNZvKUkp8fe2dw==
+  dependencies:
+    "@standardnotes/common" "^1.18.0"
+    jsonwebtoken "^8.5.1"
+
 "@standardnotes/common@^1.17.0":
   version "1.17.0"
   resolved "https://registry.yarnpkg.com/@standardnotes/common/-/common-1.17.0.tgz#4f862dae7599bc6541bc259f98f93cd399581175"
   integrity sha512-aINO14A8pHFb6tOP6Jmv9inPrT0rWvQE7J8RAVtd5bP9Vh7Po5AmwUxTsSrZIb9wBGzkYFMs3m+vA1ZNMMfLvQ==
 
-"@standardnotes/components@1.7.13":
-  version "1.7.13"
-  resolved "https://registry.yarnpkg.com/@standardnotes/components/-/components-1.7.13.tgz#55c0bad3afd36788b45bf1e67950d84ee5358dd3"
-  integrity sha512-Gy1PsibeTjcNNLUvHtfgPFNvEf+BdaYF9QA/RimEsPd9NWZL/kDJSVqj7J33gGoxpdv7l8Y/lMOMt6Az+FqKKw==
+"@standardnotes/common@^1.18.0":
+  version "1.18.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/common/-/common-1.18.0.tgz#59a92a322e0987c62bf076fabca466ef121e86d8"
+  integrity sha512-xL0+uEoQYhL6ZNI+Jc63smhQdQD9TsEoN+/nqLSfYs3WOoKNV1sZ/NYrQZL9SuVbgWVT238xxQeoA9FrfTfJaA==
 
-"@standardnotes/domain-events@^2.26.2":
-  version "2.26.2"
-  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.26.2.tgz#4f39bdb5048ad64bd528e544c54512d4387a43dd"
-  integrity sha512-cnyr954d0DIUFLZafy2k359DhHqyq1b7ylZG4ZHYiqpiG30cfQyQ2r2HBWQiFHNVRvIYrFxnSl3k0cm+H3JoXQ==
+"@standardnotes/components@1.7.14":
+  version "1.7.14"
+  resolved "https://registry.yarnpkg.com/@standardnotes/components/-/components-1.7.14.tgz#ddd5b4d5787d3f90a4e1a88cfd95995f9267b1d1"
+  integrity sha512-NDzP8/lmzgFBjxfmaE3OSOjPfozs3vednFfrjmjri5kCXlfClEISL6b/kh6B6wv/x9DIFveOsRj2Lrov+5IXdw==
+
+"@standardnotes/domain-events@^2.26.4":
+  version "2.26.4"
+  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.26.4.tgz#ecd3b1767c3a99f5e72e93e1c073cc68e3bfa34a"
+  integrity sha512-MBtg87x0e7ehl4Qhq4Esliz3GNbCURCRWyOsxX1fUhMLwpRCFco3FOfxNkdwO5KCdVzxqEUC2L2CLqptJF/5sw==
   dependencies:
-    "@standardnotes/auth" "^3.18.0"
-    "@standardnotes/features" "^1.35.6"
+    "@standardnotes/auth" "^3.18.1"
+    "@standardnotes/features" "^1.36.1"
 
-"@standardnotes/features@1.35.6", "@standardnotes/features@^1.35.6":
+"@standardnotes/features@1.36.1", "@standardnotes/features@^1.36.1":
+  version "1.36.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.36.1.tgz#73ee9535a60331950c29db429396012d3994880a"
+  integrity sha512-NtxONj+wRI1VXfIXfsUfFjO26eQRyV9n8x5sBjD2kD85BSAIMx28VNbJY8aWIjPz7NJC5RbJj+apR4///VKi1g==
+  dependencies:
+    "@standardnotes/auth" "^3.18.1"
+    "@standardnotes/common" "^1.18.0"
+
+"@standardnotes/features@^1.35.6":
   version "1.35.6"
   resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.35.6.tgz#177b34cdb5dc71e13aba0a6b57e5d2ab0849d740"
   integrity sha512-fiYZvlTpYyBcjnPSs1bN7pvIYWvQevZTEBTjNvOTo5ZqCtLoXu0p0hzU+17J2pYrjkh4vHZhYVxrRLXnyft3ZQ==
@@ -2445,6 +2474,16 @@
     "@standardnotes/features" "^1.35.6"
     "@standardnotes/utils" "^1.4.3"
 
+"@standardnotes/payloads@^1.4.22":
+  version "1.4.22"
+  resolved "https://registry.yarnpkg.com/@standardnotes/payloads/-/payloads-1.4.22.tgz#7f10cf92cedf461f79ccfd2a6a4598def9a80546"
+  integrity sha512-Y8qXQCipbQo3QfFQ3/esIacFEqKxoD8WJqMHBI5QY+YHRai4hRuTcmY/l2IJKxLrm/zTZSM7Vb9Vg+e5LgznEg==
+  dependencies:
+    "@standardnotes/applications" "^1.2.7"
+    "@standardnotes/common" "^1.18.0"
+    "@standardnotes/features" "^1.36.1"
+    "@standardnotes/utils" "^1.4.4"
+
 "@standardnotes/responses@1.4.0", "@standardnotes/responses@^1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.4.0.tgz#6ce8c0e94bdf2bdf613904e330cba8708ab39a4b"
@@ -2455,15 +2494,15 @@
     "@standardnotes/features" "^1.35.6"
     "@standardnotes/payloads" "^1.4.20"
 
-"@standardnotes/responses@^1.4.1":
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.4.1.tgz#b03ecf5836d98ce0f9ce91f698411c7694126680"
-  integrity sha512-u7r46NIRh6M/a4UF1O+dbBn60D2/u1ENb2I3rXhMu+Ddrji9T3Kcrs1CzlH1ZwgnN32P3vT4Vjw1K5G0VZMBPw==
+"@standardnotes/responses@^1.4.3":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.4.3.tgz#f3d2032d9ec072952201ea963919e3a99a430fec"
+  integrity sha512-bBC0pd1K/FkEZG0yGle8otYBYFZ3Zywl+4rbPCSN/kSgR1QGenhAn6za8++qggTmdLK6vQbYb2+uGS203/CDBQ==
   dependencies:
-    "@standardnotes/auth" "^3.18.0"
-    "@standardnotes/common" "^1.17.0"
-    "@standardnotes/features" "^1.35.6"
-    "@standardnotes/payloads" "^1.4.20"
+    "@standardnotes/auth" "^3.18.1"
+    "@standardnotes/common" "^1.18.0"
+    "@standardnotes/features" "^1.36.1"
+    "@standardnotes/payloads" "^1.4.22"
 
 "@standardnotes/services@1.6.11":
   version "1.6.11"
@@ -2475,15 +2514,15 @@
     "@standardnotes/responses" "^1.4.0"
     "@standardnotes/utils" "^1.4.3"
 
-"@standardnotes/services@^1.6.12":
-  version "1.6.12"
-  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.6.12.tgz#9a1800761a8e07b8cb7fe5938f86b282c5336f28"
-  integrity sha512-GNEirn+v3GuL6KvpKUDUv9jLzEacYmrrRJ4EzgauZD63hZA6L1nX0iHPLudDrxBB101p597BQXWzt94Rwk5Jfw==
+"@standardnotes/services@^1.6.14":
+  version "1.6.14"
+  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.6.14.tgz#08ddafe3912fb1431ea9900936644848ad297775"
+  integrity sha512-CHPyqsSarOPfcpRW8ejk3pYtQVst77Je0OdqedU/vOVUooOt2yLLfrvKPiqLVl505GfCL4K9brAyM9rX2YQaoA==
   dependencies:
-    "@standardnotes/applications" "^1.2.6"
-    "@standardnotes/common" "^1.17.0"
-    "@standardnotes/responses" "^1.4.1"
-    "@standardnotes/utils" "^1.4.3"
+    "@standardnotes/applications" "^1.2.7"
+    "@standardnotes/common" "^1.18.0"
+    "@standardnotes/responses" "^1.4.3"
+    "@standardnotes/utils" "^1.4.4"
 
 "@standardnotes/settings@1.13.1", "@standardnotes/settings@^1.13.1":
   version "1.13.1"
@@ -2504,22 +2543,22 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.92.8":
-  version "2.92.8"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.92.8.tgz#148b454a87893a4625b643d47e8d8d9018e02b19"
-  integrity sha512-Ru/C0zsx2s9HEgEQO3QyvNP4q124c6hlc1gDuQOtuLk9PC0hA/Pq6FdVPsmzRifSTpage+3zq1RgFOMdqbpZFw==
+"@standardnotes/snjs@2.92.10":
+  version "2.92.10"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.92.10.tgz#bcadc4e917943a60264a0b4b66662facb03767c3"
+  integrity sha512-dDOIj7CZesHwubLoxSeCQ8M9GUpyyrCFTOefbT8IyD1VP2nGs++8Babp4qACCaut5R28dL5C0B7XnQI37lzUDA==
   dependencies:
-    "@standardnotes/applications" "^1.2.6"
-    "@standardnotes/auth" "^3.18.0"
-    "@standardnotes/common" "^1.17.0"
-    "@standardnotes/domain-events" "^2.26.2"
-    "@standardnotes/features" "^1.35.6"
-    "@standardnotes/payloads" "^1.4.20"
-    "@standardnotes/responses" "^1.4.1"
-    "@standardnotes/services" "^1.6.12"
+    "@standardnotes/applications" "^1.2.7"
+    "@standardnotes/auth" "^3.18.1"
+    "@standardnotes/common" "^1.18.0"
+    "@standardnotes/domain-events" "^2.26.4"
+    "@standardnotes/features" "^1.36.1"
+    "@standardnotes/payloads" "^1.4.22"
+    "@standardnotes/responses" "^1.4.3"
+    "@standardnotes/services" "^1.6.14"
     "@standardnotes/settings" "^1.13.1"
     "@standardnotes/sncrypto-common" "^1.7.3"
-    "@standardnotes/utils" "^1.4.3"
+    "@standardnotes/utils" "^1.4.4"
 
 "@standardnotes/stylekit@5.17.0":
   version "5.17.0"
@@ -2543,6 +2582,15 @@
     dompurify "^2.3.6"
     lodash "^4.17.21"
 
+"@standardnotes/utils@^1.4.4":
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/@standardnotes/utils/-/utils-1.4.4.tgz#89f5f9cb6d6a65ce7d656ce8de12a9c4eb092bbd"
+  integrity sha512-JPzAF3QvN7MP6vYBjjkZBqC1e06GmijpqwvO59NQWUg62gAMJkOBb3BtBI7AVa+C3OkQRNvqf8JWb5xq7sFKTQ==
+  dependencies:
+    "@standardnotes/common" "^1.18.0"
+    dompurify "^2.3.6"
+    lodash "^4.17.21"
+
 "@svgr/babel-plugin-add-jsx-attribute@^6.0.0":
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.0.0.tgz#bd6d1ff32a31b82b601e73672a789cc41e84fe18"

From 90fcac61e0ed58e875648951fd4c257cd77a4165 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Thu, 31 Mar 2022 14:07:21 -0500
Subject: [PATCH 007/102] chore: upgrade snjs deps

---
 .../javascripts/services/archiveManager.ts    |   9 +-
 .../javascripts/services/desktopManager.ts    |  16 +-
 .../javascripts/services/themeManager.ts      |  21 +-
 app/assets/javascripts/tsconfig.json          |   3 +-
 package.json                                  |  16 +-
 yarn.lock                                     | 274 ++++++++----------
 6 files changed, 146 insertions(+), 193 deletions(-)

diff --git a/app/assets/javascripts/services/archiveManager.ts b/app/assets/javascripts/services/archiveManager.ts
index f97530fbd..78d31e2f9 100644
--- a/app/assets/javascripts/services/archiveManager.ts
+++ b/app/assets/javascripts/services/archiveManager.ts
@@ -39,17 +39,18 @@ export class ArchiveManager {
   }
 
   public async downloadBackup(encrypted: boolean): Promise<void> {
-    const intent = encrypted
-      ? EncryptionIntent.FileEncrypted
-      : EncryptionIntent.FileDecrypted;
+    const data = encrypted
+      ? await this.application.createEncryptedBackupFile(true)
+      : await this.application.createDecryptedBackupFile();
 
-    const data = await this.application.createBackupFile(intent, true);
     if (!data) {
       return;
     }
+
     const blobData = new Blob([JSON.stringify(data, null, 2)], {
       type: 'text/json',
     });
+
     if (encrypted) {
       this.downloadData(
         blobData,
diff --git a/app/assets/javascripts/services/desktopManager.ts b/app/assets/javascripts/services/desktopManager.ts
index 243c3392c..c32ae85dd 100644
--- a/app/assets/javascripts/services/desktopManager.ts
+++ b/app/assets/javascripts/services/desktopManager.ts
@@ -3,14 +3,14 @@ import {
   SNComponent,
   ComponentMutator,
   AppDataField,
-  EncryptionIntent,
   ApplicationService,
   ApplicationEvent,
   removeFromArray,
   DesktopManagerInterface,
   PayloadSource,
+  EncryptionIntent,
+  CreateIntentPayloadFromObject,
 } from '@standardnotes/snjs';
-
 import { WebAppEvent, WebApplication } from '@/ui_models/application';
 import { isDesktopApplication } from '@/utils';
 import { Bridge, ElectronDesktopCallbacks } from './bridge';
@@ -68,7 +68,7 @@ export class DesktopManager
    * Keys are not passed into ItemParams, so the result is not encrypted
    */
   convertComponentForTransmission(component: SNComponent) {
-    return this.application.protocolService.payloadByEncryptingPayload(
+    return CreateIntentPayloadFromObject(
       component.payloadRepresentation(),
       EncryptionIntent.FileDecrypted
     );
@@ -158,11 +158,11 @@ export class DesktopManager
   }
 
   async desktop_requestBackupFile(): Promise<string | undefined> {
-    const data = await this.application.createBackupFile(
-      this.application.hasProtectionSources()
-        ? EncryptionIntent.FileEncrypted
-        : EncryptionIntent.FileDecrypted
-    );
+    const encrypted = this.application.hasProtectionSources();
+    const data = encrypted
+      ? await this.application.createEncryptedBackupFile(false)
+      : await this.application.createDecryptedBackupFile();
+
     if (data) {
       return JSON.stringify(data, null, 2);
     }
diff --git a/app/assets/javascripts/services/themeManager.ts b/app/assets/javascripts/services/themeManager.ts
index e44372043..b598499d0 100644
--- a/app/assets/javascripts/services/themeManager.ts
+++ b/app/assets/javascripts/services/themeManager.ts
@@ -11,6 +11,7 @@ import {
   FeatureStatus,
   PayloadSource,
   PrefKey,
+  CreateIntentPayloadFromObject,
 } from '@standardnotes/snjs';
 import { InternalEventBus } from '@standardnotes/services';
 
@@ -271,17 +272,15 @@ export class ThemeManager extends ApplicationService {
     const themes = this.application.items.findItems(
       this.activeThemes
     ) as SNTheme[];
-    const mapped = await Promise.all(
-      themes.map(async (theme) => {
-        const payload = theme.payloadRepresentation();
-        const processedPayload =
-          await this.application.protocolService.payloadByEncryptingPayload(
-            payload,
-            EncryptionIntent.LocalStorageDecrypted
-          );
-        return processedPayload;
-      })
-    );
+
+    const mapped = themes.map((theme) => {
+      const payload = theme.payloadRepresentation();
+      return CreateIntentPayloadFromObject(
+        payload,
+        EncryptionIntent.LocalStorageDecrypted
+      );
+    });
+
     return this.application.setValue(
       CACHED_THEMES_KEY,
       mapped,
diff --git a/app/assets/javascripts/tsconfig.json b/app/assets/javascripts/tsconfig.json
index 3ff463574..48edf8f14 100644
--- a/app/assets/javascripts/tsconfig.json
+++ b/app/assets/javascripts/tsconfig.json
@@ -15,8 +15,7 @@
     "baseUrl": ".",
     "jsx": "react-jsx",
     "jsxImportSource": "preact",
-    "typeRoots": ["./@types"],
-    "types": ["@types/jest"],
+    "typeRoots": ["./@types", "../../../node_modules/@types"],
     "paths": {
       "%/*": ["../templates/*"],
       "@/*": ["./*"],
diff --git a/package.json b/package.json
index 53530aafa..ae404118b 100644
--- a/package.json
+++ b/package.json
@@ -28,9 +28,9 @@
     "@babel/preset-typescript": "^7.16.7",
     "@reach/disclosure": "^0.16.2",
     "@reach/visually-hidden": "^0.16.0",
-    "@standardnotes/responses": "1.4.0",
-    "@standardnotes/services": "1.6.11",
-    "@standardnotes/stylekit": "5.17.0",
+    "@standardnotes/responses": "1.5.1",
+    "@standardnotes/services": "1.7.1",
+    "@standardnotes/stylekit": "5.20.0",
     "@svgr/webpack": "^6.2.1",
     "@types/jest": "^27.4.1",
     "@types/react": "^17.0.42",
@@ -72,11 +72,11 @@
     "@reach/listbox": "^0.16.2",
     "@reach/tooltip": "^0.16.2",
     "@standardnotes/components": "1.7.14",
-    "@standardnotes/features": "1.36.1",
-    "@standardnotes/filepicker": "1.10.3",
-    "@standardnotes/settings": "1.13.1",
-    "@standardnotes/sncrypto-web": "1.8.0",
-    "@standardnotes/snjs": "2.92.10",
+    "@standardnotes/features": "1.36.3",
+    "@standardnotes/filepicker": "1.10.4",
+    "@standardnotes/settings": "1.13.2",
+    "@standardnotes/sncrypto-web": "1.8.1",
+    "@standardnotes/snjs": "2.93.3",
     "@zip.js/zip.js": "^2.4.7",
     "mobx": "^6.5.0",
     "mobx-react-lite": "^3.3.0",
diff --git a/yarn.lock b/yarn.lock
index 30cd56c7c..771c0a0db 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2388,206 +2388,148 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@standardnotes/applications@^1.2.6":
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/@standardnotes/applications/-/applications-1.2.6.tgz#e78dd45eb829765e5f6bf9ff99acdef88c1fd474"
-  integrity sha512-QozKdaItKZDsUhL2hZPLbjwTcjAExlFNuRZiug0zApfii2Z5jBkgoXB1p2Ma/o/gjdkS4CxHGFWALjth8mxN0w==
+"@standardnotes/auth@^3.18.3":
+  version "3.18.3"
+  resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.18.3.tgz#2c2aa19ad56fc5f3f286dbef56bd8496d1e5380f"
+  integrity sha512-crdpVHJpnY574IIwBM1QcqNMULyvQ8nOnkH4DhFNcfWF7R+A+S4lMg2KxN9bR+j2gM/WWhbfcU8owJrz1+vsqA==
   dependencies:
-    "@standardnotes/common" "^1.17.0"
-    "@standardnotes/sncrypto-common" "^1.7.3"
-
-"@standardnotes/applications@^1.2.7":
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/@standardnotes/applications/-/applications-1.2.7.tgz#77dc5c1061e28d377614f44c5ad9b6e5970cfc8d"
-  integrity sha512-7bPb7jDIexLZ9R5ZjfWH+dmNdATzqOv7MyR1NMjnHaEhJQCsg9DM2mmKndbulgm8O8r+klC+NN2TMSFHcm6KDw==
-  dependencies:
-    "@standardnotes/common" "^1.18.0"
-    "@standardnotes/sncrypto-common" "^1.7.3"
-
-"@standardnotes/auth@^3.18.0":
-  version "3.18.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.18.0.tgz#682301abe8b15d297cd3d140682e8c85bc849953"
-  integrity sha512-7X11Uy9DtmTRgplvk9TkUjVqCxlv2gsgigM9rxtGPZQ++cb/iypD34RfhDVQ87tPtVL8LOlqtkZ/iC8eItS/JQ==
-  dependencies:
-    "@standardnotes/common" "^1.17.0"
+    "@standardnotes/common" "^1.19.1"
     jsonwebtoken "^8.5.1"
 
-"@standardnotes/auth@^3.18.1":
-  version "3.18.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.18.1.tgz#05c6e86f17cb54bb3b1fdab458da0219fcf14b99"
-  integrity sha512-ppQ6NOGwXXe78lpomwDyk9FyW1DkyC1eOWytV4G67kCTBhEr8NNJ9Y+8efJLsPQgDU7Cn7CMZNZvKUkp8fe2dw==
-  dependencies:
-    "@standardnotes/common" "^1.18.0"
-    jsonwebtoken "^8.5.1"
-
-"@standardnotes/common@^1.17.0":
-  version "1.17.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/common/-/common-1.17.0.tgz#4f862dae7599bc6541bc259f98f93cd399581175"
-  integrity sha512-aINO14A8pHFb6tOP6Jmv9inPrT0rWvQE7J8RAVtd5bP9Vh7Po5AmwUxTsSrZIb9wBGzkYFMs3m+vA1ZNMMfLvQ==
-
-"@standardnotes/common@^1.18.0":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/common/-/common-1.18.0.tgz#59a92a322e0987c62bf076fabca466ef121e86d8"
-  integrity sha512-xL0+uEoQYhL6ZNI+Jc63smhQdQD9TsEoN+/nqLSfYs3WOoKNV1sZ/NYrQZL9SuVbgWVT238xxQeoA9FrfTfJaA==
+"@standardnotes/common@^1.19.1":
+  version "1.19.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/common/-/common-1.19.1.tgz#45f0837b40bc1c583c22552a53429fe26c5ef498"
+  integrity sha512-O114ZdOvur6U1mmiPfvEo/TZjKRxHWBsAAAn+XTtS70E+2VqgvCwgiYT6bG1oUcoyrIiCdRPPyiTC/UPF4gkXg==
 
 "@standardnotes/components@1.7.14":
   version "1.7.14"
   resolved "https://registry.yarnpkg.com/@standardnotes/components/-/components-1.7.14.tgz#ddd5b4d5787d3f90a4e1a88cfd95995f9267b1d1"
   integrity sha512-NDzP8/lmzgFBjxfmaE3OSOjPfozs3vednFfrjmjri5kCXlfClEISL6b/kh6B6wv/x9DIFveOsRj2Lrov+5IXdw==
 
-"@standardnotes/domain-events@^2.26.4":
-  version "2.26.4"
-  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.26.4.tgz#ecd3b1767c3a99f5e72e93e1c073cc68e3bfa34a"
-  integrity sha512-MBtg87x0e7ehl4Qhq4Esliz3GNbCURCRWyOsxX1fUhMLwpRCFco3FOfxNkdwO5KCdVzxqEUC2L2CLqptJF/5sw==
+"@standardnotes/domain-events@^2.26.6":
+  version "2.26.6"
+  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.26.6.tgz#6d19099b147f60dfe69a458463aa81759846507a"
+  integrity sha512-CiF7MlFlZgwzMbOkcHGOy8FL1iGlSff9s7eUOlgOcYoidolFOF8HHJJn+d8+iwEvwANDwMJmrrGcFf5X9f0wzA==
   dependencies:
-    "@standardnotes/auth" "^3.18.1"
-    "@standardnotes/features" "^1.36.1"
+    "@standardnotes/auth" "^3.18.3"
+    "@standardnotes/features" "^1.36.3"
 
-"@standardnotes/features@1.36.1", "@standardnotes/features@^1.36.1":
-  version "1.36.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.36.1.tgz#73ee9535a60331950c29db429396012d3994880a"
-  integrity sha512-NtxONj+wRI1VXfIXfsUfFjO26eQRyV9n8x5sBjD2kD85BSAIMx28VNbJY8aWIjPz7NJC5RbJj+apR4///VKi1g==
+"@standardnotes/encryption@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.1.3.tgz#7554a6268d8f274c59bb9dd55117ba7dffefb5cd"
+  integrity sha512-0oelxlDMCR8I6l33R/CsdU9z25R+kCvYLt0FbypPCRaDOMTcjITR1R+VsnKznw/GbcMxcD1TTnDGRRQyLVmDmw==
   dependencies:
-    "@standardnotes/auth" "^3.18.1"
-    "@standardnotes/common" "^1.18.0"
+    "@standardnotes/models" "^1.1.1"
+    "@standardnotes/payloads" "^1.5.1"
+    "@standardnotes/responses" "^1.5.1"
+    "@standardnotes/services" "^1.7.1"
 
-"@standardnotes/features@^1.35.6":
-  version "1.35.6"
-  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.35.6.tgz#177b34cdb5dc71e13aba0a6b57e5d2ab0849d740"
-  integrity sha512-fiYZvlTpYyBcjnPSs1bN7pvIYWvQevZTEBTjNvOTo5ZqCtLoXu0p0hzU+17J2pYrjkh4vHZhYVxrRLXnyft3ZQ==
+"@standardnotes/features@1.36.3", "@standardnotes/features@^1.36.3":
+  version "1.36.3"
+  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.36.3.tgz#c3a2c2451fe2f036c5c94e51e86c804872028763"
+  integrity sha512-/38iTb22NULjtL8MitUeqsZdGwZgyP6t8p2LPc5sLFmeyU/CgZ22sh55GKAW5P/fm/oWyBqK6zjsVvtIH6AQug==
   dependencies:
-    "@standardnotes/auth" "^3.18.0"
-    "@standardnotes/common" "^1.17.0"
+    "@standardnotes/auth" "^3.18.3"
+    "@standardnotes/common" "^1.19.1"
 
-"@standardnotes/filepicker@1.10.3":
-  version "1.10.3"
-  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.10.3.tgz#7384cf40e5ee6b685ea4773cd7857530f11f9d3a"
-  integrity sha512-95XYq3f758jiut9L4wmd4pC8UariaWUMuGtZB1NDPWm/qgO9ig117hrL7sMN7NU5hRqdt+f6O9xpO7zOoTblrQ==
+"@standardnotes/filepicker@1.10.4":
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.10.4.tgz#a69822381dcb7910ce7ce9040bb0466b3b950985"
+  integrity sha512-BnfKi+HFXX1e/fprZ2awvcrBSQkVZs1VN/hk7e9hH8qhQtbktfURKEEyOZoQnDu14BMa1tSdAVTjhXpxlbRRcA==
 
-"@standardnotes/payloads@^1.4.20":
-  version "1.4.20"
-  resolved "https://registry.yarnpkg.com/@standardnotes/payloads/-/payloads-1.4.20.tgz#d35544e144b556b5cc2b9cf1e3561462832964b2"
-  integrity sha512-Lj+D0scBjEkMWXdezXQs/6gm1wAh9KTosPfD912XHKhYoJfqHiDwwLFgHuB0fxrnvGNhiopM3+GtE/OeP5ZYOw==
+"@standardnotes/models@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.1.1.tgz#1a54253ded5c759ac8eeb1cb2878da73da2bd8a3"
+  integrity sha512-tl6Yjv/hlPd1xARF4o8vHNPyfoV0d5V/IkdlPA0I2GQh7pLPxHirwD5E2+rRnv59HPiV4ws+XwLtnnPZaZ38bg==
   dependencies:
-    "@standardnotes/applications" "^1.2.6"
-    "@standardnotes/common" "^1.17.0"
-    "@standardnotes/features" "^1.35.6"
-    "@standardnotes/utils" "^1.4.3"
+    "@standardnotes/payloads" "^1.5.1"
 
-"@standardnotes/payloads@^1.4.22":
-  version "1.4.22"
-  resolved "https://registry.yarnpkg.com/@standardnotes/payloads/-/payloads-1.4.22.tgz#7f10cf92cedf461f79ccfd2a6a4598def9a80546"
-  integrity sha512-Y8qXQCipbQo3QfFQ3/esIacFEqKxoD8WJqMHBI5QY+YHRai4hRuTcmY/l2IJKxLrm/zTZSM7Vb9Vg+e5LgznEg==
+"@standardnotes/payloads@^1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/payloads/-/payloads-1.5.1.tgz#f0cbe309721a14811d4b11cfce9a66d6fb9c2171"
+  integrity sha512-wqL31WPGFAQPMXICCf5Kxh3UOiaGbMu6ZE8cYmuZsMhti2h8FgIE04rcrzAh0/dSYtufrfHUnjhMmkPXZQAV2g==
   dependencies:
-    "@standardnotes/applications" "^1.2.7"
-    "@standardnotes/common" "^1.18.0"
-    "@standardnotes/features" "^1.36.1"
-    "@standardnotes/utils" "^1.4.4"
+    "@standardnotes/common" "^1.19.1"
+    "@standardnotes/features" "^1.36.3"
+    "@standardnotes/utils" "^1.4.6"
 
-"@standardnotes/responses@1.4.0", "@standardnotes/responses@^1.4.0":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.4.0.tgz#6ce8c0e94bdf2bdf613904e330cba8708ab39a4b"
-  integrity sha512-eHjaJcYlZ/U49X2E3xH3etVmCVTc1BDV3XdUkSiDt5SsxavSHKKGiHu/h7QNHNYAmV/+yOU3N5YZAweBp2ZCMA==
+"@standardnotes/responses@1.5.1", "@standardnotes/responses@^1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.5.1.tgz#a88171e0834ad363ce2284256f8630f8adee4ae3"
+  integrity sha512-8BodIxtIfSG9IEzCSQy2dmB9RR1FeoKYBwOrO4MKyX1TpvVPlr0dtGUxWtbt20kI49FSLU9QDeWeexNiXcDSrA==
   dependencies:
-    "@standardnotes/auth" "^3.18.0"
-    "@standardnotes/common" "^1.17.0"
-    "@standardnotes/features" "^1.35.6"
-    "@standardnotes/payloads" "^1.4.20"
+    "@standardnotes/auth" "^3.18.3"
+    "@standardnotes/common" "^1.19.1"
+    "@standardnotes/features" "^1.36.3"
+    "@standardnotes/payloads" "^1.5.1"
 
-"@standardnotes/responses@^1.4.3":
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.4.3.tgz#f3d2032d9ec072952201ea963919e3a99a430fec"
-  integrity sha512-bBC0pd1K/FkEZG0yGle8otYBYFZ3Zywl+4rbPCSN/kSgR1QGenhAn6za8++qggTmdLK6vQbYb2+uGS203/CDBQ==
+"@standardnotes/services@1.7.1", "@standardnotes/services@^1.7.1":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.7.1.tgz#7c3f8f379478dfeeec3b9c87868a380213947533"
+  integrity sha512-xW5C/nqUomwxnN2zSS22t845PPRceevUNqtwFtPzodeaDNZpCMwLvHPqJhbXW6cYuPeVbPGn4ify8EnrGqu+/w==
   dependencies:
-    "@standardnotes/auth" "^3.18.1"
-    "@standardnotes/common" "^1.18.0"
-    "@standardnotes/features" "^1.36.1"
-    "@standardnotes/payloads" "^1.4.22"
+    "@standardnotes/common" "^1.19.1"
+    "@standardnotes/models" "^1.1.1"
+    "@standardnotes/responses" "^1.5.1"
+    "@standardnotes/utils" "^1.4.6"
 
-"@standardnotes/services@1.6.11":
-  version "1.6.11"
-  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.6.11.tgz#a1ac0e28128a720e1c4f85220b0e4ed122ea4573"
-  integrity sha512-iGVobfAavRALJOvnhF24HHcule7jaUGx4xVH9Kr8g+9a2vVWRM3Fyp3EqE4LZjlS5u8Qz1i8BADzQtzajb1VmQ==
+"@standardnotes/settings@1.13.2", "@standardnotes/settings@^1.13.2":
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/@standardnotes/settings/-/settings-1.13.2.tgz#32509823e9f1b885282d5f6e82a6fed5178e5ec2"
+  integrity sha512-kA2K2/xfS3dlPF//yy2GitH6bfFf4EmvNQ77OWMn1qZdLlTl4HTGps1Q5mX/BrLfC9HNutxqnLFr1N94vxdWlQ==
+
+"@standardnotes/sncrypto-common@^1.7.4":
+  version "1.7.4"
+  resolved "https://registry.yarnpkg.com/@standardnotes/sncrypto-common/-/sncrypto-common-1.7.4.tgz#970fbe84edbdc9d632c8774ec201f1e140f693d6"
+  integrity sha512-6O4RjyfNyCFV32sYCO7jxDt/UelPfbvaMQXYPJ3F58r5gyFdc9K/PxjWmKhzRVxTprNLr+4uWbf1FUERTdTuhg==
+
+"@standardnotes/sncrypto-web@1.8.1":
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/sncrypto-web/-/sncrypto-web-1.8.1.tgz#4e8192be81c2b6da2d39d4119ea95ceeb24c49a0"
+  integrity sha512-lTuFu8WNmUh/9+OApgBj0IU55svXEK5gQRpE9Wdn49mzPZUQx7FrrkQ8piKDBrkpxFoaeQXXgNNWk3CwGQ8WCQ==
   dependencies:
-    "@standardnotes/applications" "^1.2.6"
-    "@standardnotes/common" "^1.17.0"
-    "@standardnotes/responses" "^1.4.0"
-    "@standardnotes/utils" "^1.4.3"
-
-"@standardnotes/services@^1.6.14":
-  version "1.6.14"
-  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.6.14.tgz#08ddafe3912fb1431ea9900936644848ad297775"
-  integrity sha512-CHPyqsSarOPfcpRW8ejk3pYtQVst77Je0OdqedU/vOVUooOt2yLLfrvKPiqLVl505GfCL4K9brAyM9rX2YQaoA==
-  dependencies:
-    "@standardnotes/applications" "^1.2.7"
-    "@standardnotes/common" "^1.18.0"
-    "@standardnotes/responses" "^1.4.3"
-    "@standardnotes/utils" "^1.4.4"
-
-"@standardnotes/settings@1.13.1", "@standardnotes/settings@^1.13.1":
-  version "1.13.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/settings/-/settings-1.13.1.tgz#c0f8558079da178667e7addd569b6953cd5e6bc2"
-  integrity sha512-oHTJI+R1hLafHraeDmg7Zg1rLwRIT9n0AEe8C4+Qm6iraTYGaUWG1YNJ2xuPrQJRPa2gMxO/E9qMWDl88ZizRQ==
-
-"@standardnotes/sncrypto-common@^1.7.3":
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/@standardnotes/sncrypto-common/-/sncrypto-common-1.7.3.tgz#1e62a14800393be44cdb376d1d72fbc064334fc1"
-  integrity sha512-twwYeBL+COkNF9IUM5bWrLZ4gXjg41tRxBMR3r3JcbrkyYjcNqVHf9L+YdBcndjSV3/9xwWl2pYWK1RB3UR2Xg==
-
-"@standardnotes/sncrypto-web@1.8.0":
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/sncrypto-web/-/sncrypto-web-1.8.0.tgz#8552d9793b570713adad20555651ce54eb5c0a19"
-  integrity sha512-5OFDan0EexHUGt9sWUKTRXAsLYsNqd/cT8Q9x0aKEIG/ZMVk6XGs/s202Af3O3h1LCsWAJhuOSwvieDgJIdEpA==
-  dependencies:
-    "@standardnotes/sncrypto-common" "^1.7.3"
+    "@standardnotes/sncrypto-common" "^1.7.4"
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.92.10":
-  version "2.92.10"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.92.10.tgz#bcadc4e917943a60264a0b4b66662facb03767c3"
-  integrity sha512-dDOIj7CZesHwubLoxSeCQ8M9GUpyyrCFTOefbT8IyD1VP2nGs++8Babp4qACCaut5R28dL5C0B7XnQI37lzUDA==
+"@standardnotes/snjs@2.93.3":
+  version "2.93.3"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.93.3.tgz#528c257994b8602666af0d80930e55421d9d5946"
+  integrity sha512-XZS8vBDqc80lEYKndyNIiyZSPme1DU7H6XNCUBH5mt41CF8qvxv76eTFSxmi2oZNrNNujl/Ez1jb23F7oUEMrw==
   dependencies:
-    "@standardnotes/applications" "^1.2.7"
-    "@standardnotes/auth" "^3.18.1"
-    "@standardnotes/common" "^1.18.0"
-    "@standardnotes/domain-events" "^2.26.4"
-    "@standardnotes/features" "^1.36.1"
-    "@standardnotes/payloads" "^1.4.22"
-    "@standardnotes/responses" "^1.4.3"
-    "@standardnotes/services" "^1.6.14"
-    "@standardnotes/settings" "^1.13.1"
-    "@standardnotes/sncrypto-common" "^1.7.3"
-    "@standardnotes/utils" "^1.4.4"
+    "@standardnotes/auth" "^3.18.3"
+    "@standardnotes/common" "^1.19.1"
+    "@standardnotes/domain-events" "^2.26.6"
+    "@standardnotes/encryption" "^1.1.3"
+    "@standardnotes/features" "^1.36.3"
+    "@standardnotes/models" "^1.1.1"
+    "@standardnotes/payloads" "^1.5.1"
+    "@standardnotes/responses" "^1.5.1"
+    "@standardnotes/services" "^1.7.1"
+    "@standardnotes/settings" "^1.13.2"
+    "@standardnotes/sncrypto-common" "^1.7.4"
+    "@standardnotes/utils" "^1.4.6"
 
-"@standardnotes/stylekit@5.17.0":
-  version "5.17.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.17.0.tgz#ef8093d036142a88780d9a39f2d33618fb017f09"
-  integrity sha512-C8a1WwbyaJn+Tf62INd62zhf7Zx0yEIMTDyr47dK4U1J0ppmlBTm/4JsSetPvht9djTJkBJGFUiwek4HNJDv0w==
+"@standardnotes/stylekit@5.20.0":
+  version "5.20.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.20.0.tgz#84ad262b39cbe307a9e06ffa8eb05119db8a7adb"
+  integrity sha512-R926S0NlzB97wq6PyX978s1g21KSymX3CjQCmbM3tfV7KFXfNjjDdWSTVetC8exZj/BPvsudfOtNA5bVsJ8RkA==
   dependencies:
     "@nanostores/preact" "^0.1.3"
     "@reach/listbox" "^0.16.2"
     "@reach/menu-button" "^0.16.2"
     "@svgr/webpack" "^6.2.1"
+    focus-trap "^6.7.3"
     nanoid "^3.3.1"
     nanostores "^0.5.10"
     prop-types "^15.8.1"
 
-"@standardnotes/utils@^1.4.3":
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/@standardnotes/utils/-/utils-1.4.3.tgz#6bae390a2d5ef6947340e6ec03cb4b0d0ac88d48"
-  integrity sha512-QO/bKmex/KFnKgKg1kIpaCTSO/QjYS80enHCwx4de1yZ1NN3xYjZpzjK/HB7RarXHCzFSxDuLTmf/68eswViBA==
+"@standardnotes/utils@^1.4.6":
+  version "1.4.6"
+  resolved "https://registry.yarnpkg.com/@standardnotes/utils/-/utils-1.4.6.tgz#19fadae46b594e301731989a836e1e9025ec4749"
+  integrity sha512-8k/ucqtfZd/tl7zBA5E988Kbo+9RiGq70ZNiXjvGhud8hX2JUfUtVqnpjTCIEChKyJhOJR3uVQZBHq9H9S0+lg==
   dependencies:
-    "@standardnotes/common" "^1.17.0"
-    dompurify "^2.3.6"
-    lodash "^4.17.21"
-
-"@standardnotes/utils@^1.4.4":
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/@standardnotes/utils/-/utils-1.4.4.tgz#89f5f9cb6d6a65ce7d656ce8de12a9c4eb092bbd"
-  integrity sha512-JPzAF3QvN7MP6vYBjjkZBqC1e06GmijpqwvO59NQWUg62gAMJkOBb3BtBI7AVa+C3OkQRNvqf8JWb5xq7sFKTQ==
-  dependencies:
-    "@standardnotes/common" "^1.18.0"
+    "@standardnotes/common" "^1.19.1"
     dompurify "^2.3.6"
     lodash "^4.17.21"
 
@@ -5394,6 +5336,13 @@ focus-lock@^0.9.1:
   dependencies:
     tslib "^2.0.3"
 
+focus-trap@^6.7.3:
+  version "6.7.3"
+  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-6.7.3.tgz#b5dc195b49c90001f08a63134471d1e6dd381ddd"
+  integrity sha512-8xCEKndV4KrseGhFKKKmczVA14yx1/hnmFICPOjcFjToxCJYj/NHH43tPc3YE/PLnLRNZoFug0EcWkGQde/miQ==
+  dependencies:
+    tabbable "^5.2.1"
+
 follow-redirects@^1.0.0:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db"
@@ -9776,6 +9725,11 @@ tabbable@^4.0.0:
   resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-4.0.0.tgz#5bff1d1135df1482cf0f0206434f15eadbeb9261"
   integrity sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ==
 
+tabbable@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.2.1.tgz#e3fda7367ddbb172dcda9f871c0fdb36d1c4cd9c"
+  integrity sha512-40pEZ2mhjaZzK0BnI+QGNjJO8UYx9pP5v7BGe17SORTO0OEuuaAwQTkAp8whcZvqon44wKFOikD+Al11K3JICQ==
+
 tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"

From d1df913578815b533cfa08aa05fce1d6fabbff30 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 11 Apr 2022 12:56:29 +0530
Subject: [PATCH 008/102] feat: disable note title input autocomplete (#963)

---
 app/assets/javascripts/components/NoteView/NoteView.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/javascripts/components/NoteView/NoteView.tsx b/app/assets/javascripts/components/NoteView/NoteView.tsx
index 637217d1f..e90eebcb1 100644
--- a/app/assets/javascripts/components/NoteView/NoteView.tsx
+++ b/app/assets/javascripts/components/NoteView/NoteView.tsx
@@ -1025,6 +1025,7 @@ export class NoteView extends PureComponent<Props, State> {
                       }
                       spellcheck={false}
                       value={this.state.editorTitle}
+                      autocomplete="off"
                     />
                   </div>
                 </div>

From 290c3badd09872b7e8871b7504f3093a2853eeec Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 11 Apr 2022 18:40:03 +0530
Subject: [PATCH 009/102] fix: revision textarea background color (#966)

---
 .../components/RevisionHistoryModal/SelectedRevisionContent.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/components/RevisionHistoryModal/SelectedRevisionContent.tsx b/app/assets/javascripts/components/RevisionHistoryModal/SelectedRevisionContent.tsx
index bca863be8..e0a4a3388 100644
--- a/app/assets/javascripts/components/RevisionHistoryModal/SelectedRevisionContent.tsx
+++ b/app/assets/javascripts/components/RevisionHistoryModal/SelectedRevisionContent.tsx
@@ -68,7 +68,7 @@ export const SelectedRevisionContent: FunctionComponent<SelectedRevisionContentP
               {selectedRevision.payload.content.text.length ? (
                 <textarea
                   readOnly={true}
-                  className="w-full h-full resize-none p-4 pt-0 border-0 color-text text-editor font-editor"
+                  className="w-full h-full resize-none p-4 pt-0 border-0 bg-default color-text text-editor font-editor"
                 >
                   {selectedRevision.payload.content.text}
                 </textarea>

From 3126d97dcab9b3ab33011c29521916259383fab9 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 11 Apr 2022 19:33:34 +0530
Subject: [PATCH 010/102] feat: add file information panel to file preview
 modal (#965)

---
 .../components/Files/FilePreviewInfoPanel.tsx |  37 ++++++
 .../components/Files/FilePreviewModal.tsx     | 107 ++++++++++--------
 app/assets/stylesheets/_sn.scss               |   8 ++
 3 files changed, 104 insertions(+), 48 deletions(-)
 create mode 100644 app/assets/javascripts/components/Files/FilePreviewInfoPanel.tsx

diff --git a/app/assets/javascripts/components/Files/FilePreviewInfoPanel.tsx b/app/assets/javascripts/components/Files/FilePreviewInfoPanel.tsx
new file mode 100644
index 000000000..cf215c80d
--- /dev/null
+++ b/app/assets/javascripts/components/Files/FilePreviewInfoPanel.tsx
@@ -0,0 +1,37 @@
+import { formatSizeToReadableString } from '@standardnotes/filepicker';
+import { SNFile } from '@standardnotes/snjs';
+import { FunctionComponent } from 'preact';
+import { Icon } from '../Icon';
+
+type Props = {
+  file: SNFile;
+};
+
+export const FilePreviewInfoPanel: FunctionComponent<Props> = ({ file }) => {
+  return (
+    <div className="flex flex-col min-w-70 p-4 border-0 border-l-1px border-solid border-main">
+      <div className="flex items-center mb-4">
+        <Icon type="info" className="mr-2" />
+        <div className="font-semibold">File information</div>
+      </div>
+      <div className="mb-3">
+        <span className="font-semibold">Type:</span> {file.mimeType}
+      </div>
+      <div className="mb-3">
+        <span className="font-semibold">Size:</span>{' '}
+        {formatSizeToReadableString(file.size)}
+      </div>
+      <div className="mb-3">
+        <span className="font-semibold">Created:</span>{' '}
+        {file.created_at.toLocaleString()}
+      </div>
+      <div className="mb-3">
+        <span className="font-semibold">Last Modified:</span>{' '}
+        {file.userModifiedDate.toLocaleString()}
+      </div>
+      <div>
+        <span className="font-semibold">File ID:</span> {file.uuid}
+      </div>
+    </div>
+  );
+};
diff --git a/app/assets/javascripts/components/Files/FilePreviewModal.tsx b/app/assets/javascripts/components/Files/FilePreviewModal.tsx
index e1d0b4b0b..6ea7f46e0 100644
--- a/app/assets/javascripts/components/Files/FilePreviewModal.tsx
+++ b/app/assets/javascripts/components/Files/FilePreviewModal.tsx
@@ -8,6 +8,7 @@ import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { getFileIconComponent } from '../AttachedFilesPopover/PopoverFileItem';
 import { Button } from '../Button';
 import { Icon } from '../Icon';
+import { FilePreviewInfoPanel } from './FilePreviewInfoPanel';
 import { isFileTypePreviewable } from './isFilePreviewable';
 
 type Props = {
@@ -40,6 +41,7 @@ export const FilePreviewModal: FunctionComponent<Props> = ({
   const [objectUrl, setObjectUrl] = useState<string>();
   const [isFilePreviewable, setIsFilePreviewable] = useState(false);
   const [isLoadingFile, setIsLoadingFile] = useState(false);
+  const [showFileInfoPanel, setShowFileInfoPanel] = useState(false);
   const closeButtonRef = useRef<HTMLButtonElement>(null);
 
   const getObjectUrl = useCallback(async () => {
@@ -109,6 +111,12 @@ export const FilePreviewModal: FunctionComponent<Props> = ({
             <span className="ml-3 font-medium">{file.name}</span>
           </div>
           <div className="flex items-center">
+            <button
+              className="flex p-1.5 mr-4 bg-transparent hover:bg-contrast border-solid border-main border-1 cursor-pointer rounded"
+              onClick={() => setShowFileInfoPanel((show) => !show)}
+            >
+              <Icon type="info" className="color-neutral" />
+            </button>
             {objectUrl && (
               <Button
                 variant="primary"
@@ -126,67 +134,70 @@ export const FilePreviewModal: FunctionComponent<Props> = ({
               ref={closeButtonRef}
               onClick={onDismiss}
               aria-label="Close modal"
-              className="flex p-1 bg-transparent border-0 cursor-pointer"
+              className="flex p-1 bg-transparent hover:bg-contrast border-0 cursor-pointer rounded"
             >
               <Icon type="close" className="color-neutral" />
             </button>
           </div>
         </div>
-        <div className="flex flex-grow items-center justify-center min-h-0 overflow-auto">
-          {objectUrl ? (
-            getPreviewComponentForFile(file, objectUrl)
-          ) : isLoadingFile ? (
-            <div className="sk-spinner w-5 h-5 spinner-info"></div>
-          ) : (
-            <div className="flex flex-col items-center">
-              <NoPreviewIllustration className="w-30 h-30 mb-4" />
-              <div className="font-bold text-base mb-2">
-                This file can't be previewed.
-              </div>
-              {isFilePreviewable ? (
-                <>
-                  <div className="text-sm text-center color-grey-0 mb-4 max-w-35ch">
-                    There was an error loading the file. Try again, or download
-                    it and open it using another application.
-                  </div>
-                  <div className="flex items-center">
+        <div className="flex flex-grow min-h-0 overflow-auto">
+          <div className="flex flex-grow items-center justify-center">
+            {objectUrl ? (
+              getPreviewComponentForFile(file, objectUrl)
+            ) : isLoadingFile ? (
+              <div className="sk-spinner w-5 h-5 spinner-info"></div>
+            ) : (
+              <div className="flex flex-col items-center">
+                <NoPreviewIllustration className="w-30 h-30 mb-4" />
+                <div className="font-bold text-base mb-2">
+                  This file can't be previewed.
+                </div>
+                {isFilePreviewable ? (
+                  <>
+                    <div className="text-sm text-center color-grey-0 mb-4 max-w-35ch">
+                      There was an error loading the file. Try again, or
+                      download the file and open it using another application.
+                    </div>
+                    <div className="flex items-center">
+                      <Button
+                        variant="primary"
+                        className="mr-3"
+                        onClick={() => {
+                          getObjectUrl();
+                        }}
+                      >
+                        Try again
+                      </Button>
+                      <Button
+                        variant="normal"
+                        onClick={() => {
+                          application.getAppState().files.downloadFile(file);
+                        }}
+                      >
+                        Download
+                      </Button>
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    <div className="text-sm text-center color-grey-0 mb-4 max-w-35ch">
+                      To view this file, download it and open it using another
+                      application.
+                    </div>
                     <Button
                       variant="primary"
-                      className="mr-3"
-                      onClick={() => {
-                        getObjectUrl();
-                      }}
-                    >
-                      Try again
-                    </Button>
-                    <Button
-                      variant="normal"
                       onClick={() => {
                         application.getAppState().files.downloadFile(file);
                       }}
                     >
                       Download
                     </Button>
-                  </div>
-                </>
-              ) : (
-                <>
-                  <div className="text-sm text-center color-grey-0 mb-4 max-w-35ch">
-                    To view this file, download it and open it using another
-                    application.
-                  </div>
-                  <Button
-                    variant="primary"
-                    onClick={() => {
-                      application.getAppState().files.downloadFile(file);
-                    }}
-                  >
-                    Download
-                  </Button>
-                </>
-              )}
-            </div>
-          )}
+                  </>
+                )}
+              </div>
+            )}
+          </div>
+          {showFileInfoPanel && <FilePreviewInfoPanel file={file} />}
         </div>
       </DialogContent>
     </DialogOverlay>
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index f2e8bdcbd..266087998 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -473,6 +473,10 @@
   border-right-width: 1px;
 }
 
+.sn-component .border-l-1px {
+  border-left-width: 1px;
+}
+
 .sn-component .border-t-1px {
   border-top-width: 1px;
 }
@@ -493,6 +497,10 @@
   padding: 0.25rem;
 }
 
+.p-1\.5 {
+  padding: 0.375rem;
+}
+
 .p-8 {
   padding: 2rem;
 }

From 3a2ff2f440a5838649eca883f3e6689b4f5c05ff Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Mon, 11 Apr 2022 12:48:19 -0500
Subject: [PATCH 011/102] refactor: new snjs support (#967)

---
 .prettierrc                                   |   2 +-
 .../components/AccountMenu/User.tsx           |   2 +-
 .../AttachedFilesPopover.tsx                  |  26 +-
 app/assets/javascripts/components/Footer.tsx  |   5 +-
 .../components/NoteView/NoteView.tsx          | 270 ++++++++----------
 .../javascripts/components/NotesListItem.tsx  |  23 +-
 .../components/NotesListOptionsMenu.tsx       |   8 +-
 .../NotesOptions/ListedActionsOption.tsx      |   4 +-
 .../components/NotesOptions/NotesOptions.tsx  |  21 --
 .../changeEditor/ChangeEditorMenu.tsx         |   2 +-
 .../changeEditor/createEditorMenuGroups.ts    |   6 +-
 .../components/Preferences/PreferencesMenu.ts |  52 +---
 .../Preferences/PreferencesView.tsx           |  30 +-
 .../Preferences/panes/Appearance.tsx          |   7 +-
 .../Preferences/panes/ExtensionPane.tsx       |  79 -----
 .../Preferences/panes/Extensions.tsx          |   9 +-
 .../panes/backups-segments/EmailBackups.tsx   |  14 +-
 .../cloud-backups/CloudBackupProvider.tsx     |   5 +-
 .../backups-segments/cloud-backups/index.tsx  |   9 +-
 .../ConfirmCustomExtension.tsx                |   4 +-
 .../extensions-segments/ExtensionItem.tsx     |   4 +-
 .../ExtensionsLatestVersions.ts               |   7 +-
 .../panes/general-segments/Defaults.tsx       |   4 +-
 .../panes/general-segments/Labs.tsx           |   7 +-
 .../panes/security-segments/Privacy.tsx       |   2 +-
 .../QuickSettingsMenu/QuickSettingsMenu.tsx   |  38 ++-
 .../HistoryListContainer.tsx                  |   6 +-
 .../RevisionHistoryModalWrapper.tsx           |  15 +-
 .../components/RevisionPreviewModal.tsx       |   6 +-
 .../components/Tags/SmartViewsListItem.tsx    |  52 ++--
 .../components/Tags/TagsListItem.tsx          |  99 +++----
 .../javascripts/services/archiveManager.ts    |  12 +-
 .../javascripts/services/desktopManager.ts    |  17 +-
 .../javascripts/services/themeManager.ts      |  17 +-
 .../ui_models/app_state/account_menu_state.ts |   9 +-
 .../ui_models/app_state/app_state.ts          | 101 ++++---
 .../ui_models/app_state/note_tags_state.ts    |   2 +-
 .../ui_models/app_state/notes_state.ts        |  42 +--
 .../ui_models/app_state/notes_view_state.ts   |  56 ++--
 .../ui_models/app_state/tags_state.ts         |  67 ++---
 .../javascripts/ui_models/application.ts      |   3 +-
 .../ui_models/application_group.ts            |   2 +-
 package.json                                  |  26 +-
 yarn.lock                                     | 196 ++++++-------
 44 files changed, 569 insertions(+), 799 deletions(-)
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/ExtensionPane.tsx

diff --git a/.prettierrc b/.prettierrc
index 544138be4..9e74d98a6 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,3 +1,3 @@
 {
-  "singleQuote": true
+  "singleQuote": true,
 }
diff --git a/app/assets/javascripts/components/AccountMenu/User.tsx b/app/assets/javascripts/components/AccountMenu/User.tsx
index 68f49df1e..7815d4e74 100644
--- a/app/assets/javascripts/components/AccountMenu/User.tsx
+++ b/app/assets/javascripts/components/AccountMenu/User.tsx
@@ -1,7 +1,7 @@
 import { observer } from 'mobx-react-lite';
 import { AppState } from '@/ui_models/app_state';
 import { WebApplication } from '@/ui_models/application';
-import { User as UserType } from '@standardnotes/responses';
+import { User as UserType } from '@standardnotes/snjs';
 
 type Props = {
   appState: AppState;
diff --git a/app/assets/javascripts/components/AttachedFilesPopover/AttachedFilesPopover.tsx b/app/assets/javascripts/components/AttachedFilesPopover/AttachedFilesPopover.tsx
index 82c1f2c14..770ea0277 100644
--- a/app/assets/javascripts/components/AttachedFilesPopover/AttachedFilesPopover.tsx
+++ b/app/assets/javascripts/components/AttachedFilesPopover/AttachedFilesPopover.tsx
@@ -169,20 +169,18 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
             </div>
           ) : null}
           {filteredList.length > 0 ? (
-            filteredList
-              .filter((file) => !file.deleted)
-              .map((file: SNFile) => {
-                return (
-                  <PopoverFileItem
-                    key={file.uuid}
-                    file={file}
-                    isAttachedToNote={attachedFiles.includes(file)}
-                    handleFileAction={handleFileAction}
-                    getIconType={application.iconsController.getIconForFileType}
-                    closeOnBlur={closeOnBlur}
-                  />
-                );
-              })
+            filteredList.map((file: SNFile) => {
+              return (
+                <PopoverFileItem
+                  key={file.uuid}
+                  file={file}
+                  isAttachedToNote={attachedFiles.includes(file)}
+                  handleFileAction={handleFileAction}
+                  getIconType={application.iconsController.getIconForFileType}
+                  closeOnBlur={closeOnBlur}
+                />
+              );
+            })
           ) : (
             <div className="flex flex-col items-center justify-center w-full py-8">
               <div className="w-18 h-18 mb-2">
diff --git a/app/assets/javascripts/components/Footer.tsx b/app/assets/javascripts/components/Footer.tsx
index 5965843c4..fa7667602 100644
--- a/app/assets/javascripts/components/Footer.tsx
+++ b/app/assets/javascripts/components/Footer.tsx
@@ -226,10 +226,7 @@ export class Footer extends PureComponent<Props, State> {
     this.application.items.setDisplayOptions(
       ContentType.Theme,
       CollectionSort.Title,
-      'asc',
-      (theme: ItemInterface) => {
-        return !theme.errorDecrypting;
-      }
+      'asc'
     );
   }
 
diff --git a/app/assets/javascripts/components/NoteView/NoteView.tsx b/app/assets/javascripts/components/NoteView/NoteView.tsx
index e90eebcb1..6db18d81a 100644
--- a/app/assets/javascripts/components/NoteView/NoteView.tsx
+++ b/app/assets/javascripts/components/NoteView/NoteView.tsx
@@ -281,7 +281,7 @@ export class NoteView extends PureComponent<Props, State> {
       });
     }
 
-    if (!note.deleted && note.locked !== this.state.noteLocked) {
+    if (note.locked !== this.state.noteLocked) {
       this.setState({
         noteLocked: note.locked,
       });
@@ -421,7 +421,7 @@ export class NoteView extends PureComponent<Props, State> {
   streamItems() {
     this.removeComponentStreamObserver = this.application.streamItems(
       ContentType.Component,
-      async (_items, source) => {
+      async ({ source }) => {
         if (
           isPayloadSourceInternalChange(source) ||
           source === PayloadSource.InitialObserverRegistrationPush
@@ -1003,7 +1003,7 @@ export class NoteView extends PureComponent<Props, State> {
             )}
           </div>
 
-          {this.note && !this.note.errorDecrypting && (
+          {this.note && (
             <div id="editor-title-bar" className="section-title-bar w-full">
               <div className="flex items-center justify-between h-8">
                 <div
@@ -1089,165 +1089,127 @@ export class NoteView extends PureComponent<Props, State> {
             </div>
           )}
 
-          {!this.note.errorDecrypting && (
-            <div
-              id={ElementIds.EditorContent}
-              className={ElementIds.EditorContent}
-              ref={this.editorContentRef}
-            >
-              {this.state.marginResizersEnabled &&
-              this.editorContentRef.current ? (
-                <PanelResizer
-                  minWidth={300}
-                  hoverable={true}
-                  collapsable={false}
-                  panel={this.editorContentRef.current}
-                  side={PanelSide.Left}
-                  type={PanelResizeType.OffsetAndWidth}
-                  left={this.state.leftResizerOffset}
-                  width={this.state.leftResizerWidth}
-                  resizeFinishCallback={this.onPanelResizeFinish}
-                />
-              ) : null}
+          <div
+            id={ElementIds.EditorContent}
+            className={ElementIds.EditorContent}
+            ref={this.editorContentRef}
+          >
+            {this.state.marginResizersEnabled &&
+            this.editorContentRef.current ? (
+              <PanelResizer
+                minWidth={300}
+                hoverable={true}
+                collapsable={false}
+                panel={this.editorContentRef.current}
+                side={PanelSide.Left}
+                type={PanelResizeType.OffsetAndWidth}
+                left={this.state.leftResizerOffset}
+                width={this.state.leftResizerWidth}
+                resizeFinishCallback={this.onPanelResizeFinish}
+              />
+            ) : null}
 
-              {this.state.editorComponentViewer && (
-                <div className="component-view">
-                  <ComponentView
-                    componentViewer={this.state.editorComponentViewer}
-                    onLoad={this.onEditorComponentLoad}
-                    requestReload={this.editorComponentViewerRequestsReload}
-                    application={this.application}
-                    appState={this.appState}
-                  />
-                </div>
+            {this.state.editorComponentViewer && (
+              <div className="component-view">
+                <ComponentView
+                  componentViewer={this.state.editorComponentViewer}
+                  onLoad={this.onEditorComponentLoad}
+                  requestReload={this.editorComponentViewerRequestsReload}
+                  application={this.application}
+                  appState={this.appState}
+                />
+              </div>
+            )}
+
+            {this.state.editorStateDidLoad &&
+              !this.state.editorComponentViewer &&
+              !this.state.textareaUnloading && (
+                <textarea
+                  autocomplete="off"
+                  className="editable font-editor"
+                  dir="auto"
+                  id={ElementIds.NoteTextEditor}
+                  onChange={this.onTextAreaChange}
+                  value={this.state.editorText}
+                  readonly={this.state.noteLocked}
+                  onFocus={this.onContentFocus}
+                  spellcheck={this.state.spellcheck}
+                  ref={(ref) => this.onSystemEditorLoad(ref)}
+                ></textarea>
               )}
 
-              {this.state.editorStateDidLoad &&
-                !this.state.editorComponentViewer &&
-                !this.state.textareaUnloading && (
-                  <textarea
-                    autocomplete="off"
-                    className="editable font-editor"
-                    dir="auto"
-                    id={ElementIds.NoteTextEditor}
-                    onChange={this.onTextAreaChange}
-                    value={this.state.editorText}
-                    readonly={this.state.noteLocked}
-                    onFocus={this.onContentFocus}
-                    spellcheck={this.state.spellcheck}
-                    ref={(ref) => this.onSystemEditorLoad(ref)}
-                  ></textarea>
-                )}
+            {this.state.marginResizersEnabled &&
+            this.editorContentRef.current ? (
+              <PanelResizer
+                minWidth={300}
+                hoverable={true}
+                collapsable={false}
+                panel={this.editorContentRef.current}
+                side={PanelSide.Right}
+                type={PanelResizeType.OffsetAndWidth}
+                left={this.state.rightResizerOffset}
+                width={this.state.rightResizerWidth}
+                resizeFinishCallback={this.onPanelResizeFinish}
+              />
+            ) : null}
+          </div>
 
-              {this.state.marginResizersEnabled &&
-              this.editorContentRef.current ? (
-                <PanelResizer
-                  minWidth={300}
-                  hoverable={true}
-                  collapsable={false}
-                  panel={this.editorContentRef.current}
-                  side={PanelSide.Right}
-                  type={PanelResizeType.OffsetAndWidth}
-                  left={this.state.rightResizerOffset}
-                  width={this.state.rightResizerWidth}
-                  resizeFinishCallback={this.onPanelResizeFinish}
-                />
-              ) : null}
-            </div>
-          )}
-
-          {this.note.errorDecrypting && (
-            <div className="section">
-              <div id="error-decrypting-container" className="sn-component">
-                <div id="error-decrypting-panel" className="sk-panel">
-                  <div className="sk-panel-header">
-                    <div className="sk-panel-header-title">
-                      {this.note.waitingForKey
-                        ? 'Waiting for Key'
-                        : 'Unable to Decrypt'}
-                    </div>
-                  </div>
-                  <div className="sk-panel-content">
-                    <div className="sk-panel-section">
-                      {this.note.waitingForKey && (
-                        <p className="sk-p">
-                          This note is awaiting its encryption key to be ready.
-                          Please wait for syncing to complete for this note to
-                          be decrypted.
-                        </p>
-                      )}
-                      {!this.note.waitingForKey && (
-                        <p className="sk-p">
-                          There was an error decrypting this item. Ensure you
-                          are running the latest version of this app, then sign
-                          out and sign back in to try again.
-                        </p>
-                      )}
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {!this.note.errorDecrypting && (
-            <div id="editor-pane-component-stack">
-              {this.state.availableStackComponents.length > 0 && (
-                <div
-                  id="component-stack-menu-bar"
-                  className="sk-app-bar no-edges"
-                >
-                  <div className="left">
-                    {this.state.availableStackComponents.map((component) => {
-                      return (
-                        <div
-                          key={component.uuid}
-                          onClick={() => {
-                            this.toggleStackComponent(component);
-                          }}
-                          className="sk-app-bar-item"
-                        >
-                          <div className="sk-app-bar-item-column">
-                            <div
-                              className={
-                                (this.stackComponentExpanded(component) &&
-                                component.active
-                                  ? 'info '
-                                  : '') +
-                                (!this.stackComponentExpanded(component)
-                                  ? 'neutral '
-                                  : '') +
-                                ' sk-circle small'
-                              }
-                            />
-                          </div>
-                          <div className="sk-app-bar-item-column">
-                            <div className="sk-label">{component.name}</div>
-                          </div>
+          <div id="editor-pane-component-stack">
+            {this.state.availableStackComponents.length > 0 && (
+              <div
+                id="component-stack-menu-bar"
+                className="sk-app-bar no-edges"
+              >
+                <div className="left">
+                  {this.state.availableStackComponents.map((component) => {
+                    return (
+                      <div
+                        key={component.uuid}
+                        onClick={() => {
+                          this.toggleStackComponent(component);
+                        }}
+                        className="sk-app-bar-item"
+                      >
+                        <div className="sk-app-bar-item-column">
+                          <div
+                            className={
+                              (this.stackComponentExpanded(component) &&
+                              component.active
+                                ? 'info '
+                                : '') +
+                              (!this.stackComponentExpanded(component)
+                                ? 'neutral '
+                                : '') +
+                              ' sk-circle small'
+                            }
+                          />
                         </div>
-                      );
-                    })}
-                  </div>
+                        <div className="sk-app-bar-item-column">
+                          <div className="sk-label">{component.name}</div>
+                        </div>
+                      </div>
+                    );
+                  })}
                 </div>
-              )}
-
-              <div className="sn-component">
-                {this.state.stackComponentViewers.map((viewer) => {
-                  return (
-                    <div className="component-view component-stack-item">
-                      <ComponentView
-                        key={viewer.identifier}
-                        componentViewer={viewer}
-                        manualDealloc={true}
-                        application={this.application}
-                        appState={this.appState}
-                      />
-                    </div>
-                  );
-                })}
               </div>
+            )}
+
+            <div className="sn-component">
+              {this.state.stackComponentViewers.map((viewer) => {
+                return (
+                  <div className="component-view component-stack-item">
+                    <ComponentView
+                      key={viewer.identifier}
+                      componentViewer={viewer}
+                      manualDealloc={true}
+                      application={this.application}
+                      appState={this.appState}
+                    />
+                  </div>
+                );
+              })}
             </div>
-          )}
+          </div>
         </div>
       </div>
     );
diff --git a/app/assets/javascripts/components/NotesListItem.tsx b/app/assets/javascripts/components/NotesListItem.tsx
index 1928308bd..cd11880ca 100644
--- a/app/assets/javascripts/components/NotesListItem.tsx
+++ b/app/assets/javascripts/components/NotesListItem.tsx
@@ -1,6 +1,7 @@
 import { WebApplication } from '@/ui_models/application';
 import {
   CollectionSort,
+  CollectionSortProperty,
   sanitizeHtmlString,
   SNNote,
 } from '@standardnotes/snjs';
@@ -18,7 +19,7 @@ type Props = {
   onClick: () => void;
   onContextMenu: (e: MouseEvent) => void;
   selected: boolean;
-  sortedBy?: CollectionSort;
+  sortedBy?: CollectionSortProperty;
 };
 
 type NoteFlag = {
@@ -34,25 +35,7 @@ const flagsForNote = (note: SNNote) => {
       class: 'danger',
     });
   }
-  if (note.errorDecrypting) {
-    if (note.waitingForKey) {
-      flags.push({
-        text: 'Waiting For Keys',
-        class: 'info',
-      });
-    } else {
-      flags.push({
-        text: 'Missing Keys',
-        class: 'danger',
-      });
-    }
-  }
-  if (note.deleted) {
-    flags.push({
-      text: 'Deletion Pending Sync',
-      class: 'danger',
-    });
-  }
+
   return flags;
 };
 
diff --git a/app/assets/javascripts/components/NotesListOptionsMenu.tsx b/app/assets/javascripts/components/NotesListOptionsMenu.tsx
index a701d6df0..9002ab7ee 100644
--- a/app/assets/javascripts/components/NotesListOptionsMenu.tsx
+++ b/app/assets/javascripts/components/NotesListOptionsMenu.tsx
@@ -1,5 +1,9 @@
 import { WebApplication } from '@/ui_models/application';
-import { CollectionSort, PrefKey } from '@standardnotes/snjs';
+import {
+  CollectionSort,
+  CollectionSortProperty,
+  PrefKey,
+} from '@standardnotes/snjs';
 import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
 import { useState } from 'preact/hooks';
@@ -52,7 +56,7 @@ export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
       setSortReverse(!sortReverse);
     };
 
-    const toggleSortBy = (sort: CollectionSort) => {
+    const toggleSortBy = (sort: CollectionSortProperty) => {
       if (sortBy === sort) {
         toggleSortReverse();
       } else {
diff --git a/app/assets/javascripts/components/NotesOptions/ListedActionsOption.tsx b/app/assets/javascripts/components/NotesOptions/ListedActionsOption.tsx
index 5fc9bef1a..f9cdf0c49 100644
--- a/app/assets/javascripts/components/NotesOptions/ListedActionsOption.tsx
+++ b/app/assets/javascripts/components/NotesOptions/ListedActionsOption.tsx
@@ -104,7 +104,7 @@ const ListedActionsMenu: FunctionComponent<ListedActionsMenuProps> = ({
     const updatedGroup: ListedMenuGroup = {
       name: updatedAccountInfo.display_name,
       account: group.account,
-      actions: updatedAccountInfo.actions,
+      actions: updatedAccountInfo.actions as Action[],
     };
 
     const updatedGroups = menuGroups.map((group) => {
@@ -145,7 +145,7 @@ const ListedActionsMenu: FunctionComponent<ListedActionsMenuProps> = ({
               menuGroups.push({
                 name: accountInfo.display_name,
                 account,
-                actions: accountInfo.actions,
+                actions: accountInfo.actions as Action[],
               });
             } else {
               menuGroups.push({
diff --git a/app/assets/javascripts/components/NotesOptions/NotesOptions.tsx b/app/assets/javascripts/components/NotesOptions/NotesOptions.tsx
index 3fb22b7a0..3c0c8da56 100644
--- a/app/assets/javascripts/components/NotesOptions/NotesOptions.tsx
+++ b/app/assets/javascripts/components/NotesOptions/NotesOptions.tsx
@@ -219,7 +219,6 @@ export const NotesOptions = observer(
     const notTrashed = notes.some((note) => !note.trashed);
     const pinned = notes.some((note) => note.pinned);
     const unpinned = notes.some((note) => !note.pinned);
-    const errored = notes.some((note) => note.errorDecrypting);
 
     useEffect(() => {
       const removeAltKeyObserver = application.io.addKeyObserver({
@@ -278,26 +277,6 @@ export const NotesOptions = observer(
       });
     };
 
-    if (errored) {
-      return (
-        <>
-          {notes.length === 1 ? (
-            <div className="px-3 pt-1.5 pb-1 text-xs color-neutral font-medium">
-              <div>
-                <span className="font-semibold">Note ID:</span> {notes[0].uuid}
-              </div>
-            </div>
-          ) : null}
-          <DeletePermanentlyButton
-            closeOnBlur={closeOnBlur}
-            onClick={async () => {
-              await appState.notes.deleteNotesPermanently();
-            }}
-          />
-        </>
-      );
-    }
-
     const openRevisionHistoryModal = () => {
       appState.notes.setShowRevisionHistoryModal(true);
     };
diff --git a/app/assets/javascripts/components/NotesOptions/changeEditor/ChangeEditorMenu.tsx b/app/assets/javascripts/components/NotesOptions/changeEditor/ChangeEditorMenu.tsx
index 7a6f217c2..cd35f31b5 100644
--- a/app/assets/javascripts/components/NotesOptions/changeEditor/ChangeEditorMenu.tsx
+++ b/app/assets/javascripts/components/NotesOptions/changeEditor/ChangeEditorMenu.tsx
@@ -86,7 +86,7 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
   ) => {
     if (component) {
       if (component.conflictOf) {
-        application.mutator.changeAndSaveItem(component.uuid, (mutator) => {
+        application.mutator.changeAndSaveItem(component, (mutator) => {
           mutator.conflictOf = undefined;
         });
       }
diff --git a/app/assets/javascripts/components/NotesOptions/changeEditor/createEditorMenuGroups.ts b/app/assets/javascripts/components/NotesOptions/changeEditor/createEditorMenuGroups.ts
index 1b59c6358..d69be1d46 100644
--- a/app/assets/javascripts/components/NotesOptions/changeEditor/createEditorMenuGroups.ts
+++ b/app/assets/javascripts/components/NotesOptions/changeEditor/createEditorMenuGroups.ts
@@ -1,11 +1,13 @@
 import { WebApplication } from '@/ui_models/application';
 import {
+  ContentType,
+  FeatureStatus,
+  SNComponent,
   ComponentArea,
   FeatureDescription,
   GetFeatures,
   NoteType,
-} from '@standardnotes/features';
-import { ContentType, FeatureStatus, SNComponent } from '@standardnotes/snjs';
+} from '@standardnotes/snjs';
 import { EditorMenuItem, EditorMenuGroup } from '../ChangeEditorOption';
 
 export const PLAIN_EDITOR_NAME = 'Plain Editor';
diff --git a/app/assets/javascripts/components/Preferences/PreferencesMenu.ts b/app/assets/javascripts/components/Preferences/PreferencesMenu.ts
index b9b474f63..f2a2843fb 100644
--- a/app/assets/javascripts/components/Preferences/PreferencesMenu.ts
+++ b/app/assets/javascripts/components/Preferences/PreferencesMenu.ts
@@ -1,12 +1,6 @@
 import { action, makeAutoObservable, observable } from 'mobx';
 import { ExtensionsLatestVersions } from '@/components/Preferences/panes/extensions-segments';
-import {
-  ComponentArea,
-  ContentType,
-  FeatureIdentifier,
-  SNComponent,
-  IconType,
-} from '@standardnotes/snjs';
+import { FeatureIdentifier, IconType } from '@standardnotes/snjs';
 import { WebApplication } from '@/ui_models/application';
 
 const PREFERENCE_IDS = [
@@ -61,7 +55,6 @@ const READY_PREFERENCES_MENU_ITEMS: PreferencesMenuItem[] = [
 
 export class PreferencesMenu {
   private _selectedPane: PreferenceId | FeatureIdentifier = 'account';
-  private _extensionPanes: SNComponent[] = [];
   private _menu: PreferencesMenuItem[];
   private _extensionLatestVersions: ExtensionsLatestVersions =
     new ExtensionsLatestVersions(new Map());
@@ -74,7 +67,6 @@ export class PreferencesMenu {
       ? PREFERENCES_MENU_ITEMS
       : READY_PREFERENCES_MENU_ITEMS;
 
-    this.loadExtensionsPanes();
     this.loadLatestVersions();
 
     makeAutoObservable<
@@ -105,64 +97,24 @@ export class PreferencesMenu {
     return this._extensionLatestVersions;
   }
 
-  loadExtensionsPanes(): void {
-    const excludedComponents = [
-      FeatureIdentifier.TwoFactorAuthManager,
-      'org.standardnotes.batch-manager',
-      'org.standardnotes.extensions-manager',
-      FeatureIdentifier.CloudLink,
-    ];
-    this._extensionPanes = (
-      this.application.items.getItems([
-        ContentType.ActionsExtension,
-        ContentType.Component,
-        ContentType.Theme,
-      ]) as SNComponent[]
-    ).filter(
-      (extension) =>
-        extension.area === ComponentArea.Modal &&
-        !excludedComponents.includes(extension.package_info.identifier)
-    );
-  }
-
   get menuItems(): SelectableMenuItem[] {
     const menuItems = this._menu.map((preference) => ({
       ...preference,
       selected: preference.id === this._selectedPane,
     }));
-    const extensionsMenuItems: SelectableMenuItem[] = this._extensionPanes.map(
-      (extension) => {
-        return {
-          icon: 'window',
-          id: extension.package_info.identifier,
-          label: extension.name,
-          selected: extension.package_info.identifier === this._selectedPane,
-        };
-      }
-    );
 
-    return menuItems.concat(extensionsMenuItems);
+    return menuItems;
   }
 
   get selectedMenuItem(): PreferencesMenuItem | undefined {
     return this._menu.find((item) => item.id === this._selectedPane);
   }
 
-  get selectedExtension(): SNComponent | undefined {
-    return this._extensionPanes.find(
-      (extension) => extension.package_info.identifier === this._selectedPane
-    );
-  }
-
   get selectedPaneId(): PreferenceId | FeatureIdentifier {
     if (this.selectedMenuItem != undefined) {
       return this.selectedMenuItem.id;
     }
 
-    if (this.selectedExtension != undefined) {
-      return this.selectedExtension.package_info.identifier;
-    }
-
     return 'account';
   }
 
diff --git a/app/assets/javascripts/components/Preferences/PreferencesView.tsx b/app/assets/javascripts/components/Preferences/PreferencesView.tsx
index dd615570a..f808c6458 100644
--- a/app/assets/javascripts/components/Preferences/PreferencesView.tsx
+++ b/app/assets/javascripts/components/Preferences/PreferencesView.tsx
@@ -1,6 +1,8 @@
 import { RoundIconButton } from '@/components/RoundIconButton';
 import { TitleBar, Title } from '@/components/TitleBar';
 import { FunctionComponent } from 'preact';
+import { observer } from 'mobx-react-lite';
+
 import {
   AccountPreferences,
   HelpAndFeedback,
@@ -8,15 +10,12 @@ import {
   General,
   Security,
 } from './panes';
-import { observer } from 'mobx-react-lite';
-
 import { PreferencesMenu } from './PreferencesMenu';
 import { PreferencesMenuView } from './PreferencesMenuView';
 import { WebApplication } from '@/ui_models/application';
 import { MfaProps } from './panes/two-factor-auth/MfaProps';
 import { AppState } from '@/ui_models/app_state';
 import { useEffect, useMemo } from 'preact/hooks';
-import { ExtensionPane } from './panes/ExtensionPane';
 import { Backups } from '@/components/Preferences/panes/Backups';
 import { Appearance } from './panes/Appearance';
 
@@ -66,24 +65,13 @@ const PaneSelector: FunctionComponent<
     case 'help-feedback':
       return <HelpAndFeedback />;
     default:
-      if (menu.selectedExtension != undefined) {
-        return (
-          <ExtensionPane
-            application={application}
-            appState={appState}
-            extension={menu.selectedExtension}
-            preferencesMenu={menu}
-          />
-        );
-      } else {
-        return (
-          <General
-            appState={appState}
-            application={application}
-            extensionsLatestVersions={menu.extensionsLatestVersions}
-          />
-        );
-      }
+      return (
+        <General
+          appState={appState}
+          application={application}
+          extensionsLatestVersions={menu.extensionsLatestVersions}
+        />
+      );
   }
 });
 
diff --git a/app/assets/javascripts/components/Preferences/panes/Appearance.tsx b/app/assets/javascripts/components/Preferences/panes/Appearance.tsx
index 3ca731a9b..5f7f16259 100644
--- a/app/assets/javascripts/components/Preferences/panes/Appearance.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/Appearance.tsx
@@ -4,12 +4,12 @@ import { sortThemes } from '@/components/QuickSettingsMenu/QuickSettingsMenu';
 import { HorizontalSeparator } from '@/components/Shared/HorizontalSeparator';
 import { Switch } from '@/components/Switch';
 import { WebApplication } from '@/ui_models/application';
-import { GetFeatures } from '@standardnotes/features';
 import {
   ContentType,
   FeatureIdentifier,
   FeatureStatus,
   PrefKey,
+  GetFeatures,
   SNTheme,
 } from '@standardnotes/snjs';
 import { observer } from 'mobx-react-lite';
@@ -61,9 +61,8 @@ export const Appearance: FunctionComponent<Props> = observer(
     );
 
     useEffect(() => {
-      const themesAsItems: DropdownItem[] = (
-        application.items.getDisplayableItems(ContentType.Theme) as SNTheme[]
-      )
+      const themesAsItems: DropdownItem[] = application.items
+        .getDisplayableItems<SNTheme>(ContentType.Theme)
         .filter((theme) => !theme.isLayerable())
         .sort(sortThemes)
         .map((theme) => {
diff --git a/app/assets/javascripts/components/Preferences/panes/ExtensionPane.tsx b/app/assets/javascripts/components/Preferences/panes/ExtensionPane.tsx
deleted file mode 100644
index cac365104..000000000
--- a/app/assets/javascripts/components/Preferences/panes/ExtensionPane.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import {
-  PreferencesGroup,
-  PreferencesSegment,
-} from '@/components/Preferences/components';
-import { WebApplication } from '@/ui_models/application';
-import { ComponentViewer, SNComponent } from '@standardnotes/snjs';
-import { FeatureIdentifier } from '@standardnotes/features';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { ExtensionItem } from './extensions-segments';
-import { ComponentView } from '@/components/ComponentView';
-import { AppState } from '@/ui_models/app_state';
-import { PreferencesMenu } from '@/components/Preferences/PreferencesMenu';
-import { useEffect, useState } from 'preact/hooks';
-
-interface IProps {
-  application: WebApplication;
-  appState: AppState;
-  extension: SNComponent;
-  preferencesMenu: PreferencesMenu;
-}
-
-const urlOverrideForExtension = (extension: SNComponent) => {
-  if (extension.identifier === FeatureIdentifier.CloudLink) {
-    return 'https://extensions.standardnotes.org/components/cloudlink';
-  } else {
-    return undefined;
-  }
-};
-
-export const ExtensionPane: FunctionComponent<IProps> = observer(
-  ({ extension, application, appState, preferencesMenu }) => {
-    const [componentViewer] = useState<ComponentViewer>(
-      application.componentManager.createComponentViewer(
-        extension,
-        undefined,
-        undefined,
-        urlOverrideForExtension(extension)
-      )
-    );
-    const latestVersion =
-      preferencesMenu.extensionsLatestVersions.getVersion(extension);
-
-    useEffect(() => {
-      return () => {
-        application.componentManager.destroyComponentViewer(componentViewer);
-      };
-    }, [application, componentViewer]);
-
-    return (
-      <div className="preferences-extension-pane color-foreground flex-grow flex flex-row overflow-y-auto min-h-0">
-        <div className="flex-grow flex flex-col py-6 items-center">
-          <div className="w-200 max-w-200 flex flex-col">
-            <PreferencesGroup>
-              <ExtensionItem
-                application={application}
-                extension={extension}
-                first={false}
-                uninstall={() =>
-                  application.mutator
-                    .deleteItem(extension)
-                    .then(() => preferencesMenu.loadExtensionsPanes())
-                }
-                latestVersion={latestVersion}
-              />
-              <PreferencesSegment>
-                <ComponentView
-                  application={application}
-                  appState={appState}
-                  componentViewer={componentViewer}
-                />
-              </PreferencesSegment>
-            </PreferencesGroup>
-          </div>
-        </div>
-      </div>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/Preferences/panes/Extensions.tsx b/app/assets/javascripts/components/Preferences/panes/Extensions.tsx
index 8c7c9a8e0..99ef28307 100644
--- a/app/assets/javascripts/components/Preferences/panes/Extensions.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/Extensions.tsx
@@ -13,10 +13,11 @@ import { useEffect, useRef, useState } from 'preact/hooks';
 import { observer } from 'mobx-react-lite';
 
 const loadExtensions = (application: WebApplication) =>
-  application.items.getItems(
-    [ContentType.ActionsExtension, ContentType.Component, ContentType.Theme],
-    true
-  ) as SNComponent[];
+  application.items.getItems([
+    ContentType.ActionsExtension,
+    ContentType.Component,
+    ContentType.Theme,
+  ]) as SNComponent[];
 
 export const Extensions: FunctionComponent<{
   application: WebApplication;
diff --git a/app/assets/javascripts/components/Preferences/panes/backups-segments/EmailBackups.tsx b/app/assets/javascripts/components/Preferences/panes/backups-segments/EmailBackups.tsx
index b3286718c..16d634bcd 100644
--- a/app/assets/javascripts/components/Preferences/panes/backups-segments/EmailBackups.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/backups-segments/EmailBackups.tsx
@@ -13,16 +13,16 @@ import {
   Text,
   Title,
 } from '../../components';
-import {
-  EmailBackupFrequency,
-  MuteFailedBackupsEmailsOption,
-  SettingName,
-} from '@standardnotes/settings';
 import { Dropdown, DropdownItem } from '@/components/Dropdown';
 import { Switch } from '@/components/Switch';
 import { HorizontalSeparator } from '@/components/Shared/HorizontalSeparator';
-import { FeatureIdentifier } from '@standardnotes/features';
-import { FeatureStatus } from '@standardnotes/snjs';
+import {
+  FeatureStatus,
+  FeatureIdentifier,
+  EmailBackupFrequency,
+  MuteFailedBackupsEmailsOption,
+  SettingName,
+} from '@standardnotes/snjs';
 
 type Props = {
   application: WebApplication;
diff --git a/app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/CloudBackupProvider.tsx b/app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/CloudBackupProvider.tsx
index 64806d0ec..938c73911 100644
--- a/app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/CloudBackupProvider.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/CloudBackupProvider.tsx
@@ -1,11 +1,12 @@
 import { useCallback, useEffect, useState } from 'preact/hooks';
-import { ButtonType, SettingName } from '@standardnotes/snjs';
 import {
+  ButtonType,
+  SettingName,
   CloudProvider,
   DropboxBackupFrequency,
   GoogleDriveBackupFrequency,
   OneDriveBackupFrequency,
-} from '@standardnotes/settings';
+} from '@standardnotes/snjs';
 import { WebApplication } from '@/ui_models/application';
 import { Button } from '@/components/Button';
 import { isDev, openInNewTab } from '@/utils';
diff --git a/app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/index.tsx b/app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/index.tsx
index 1ce07b1cb..a19b481fd 100644
--- a/app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/index.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/index.tsx
@@ -9,14 +9,15 @@ import {
   Title,
 } from '@/components/Preferences/components';
 import { HorizontalSeparator } from '@/components/Shared/HorizontalSeparator';
-import { FeatureIdentifier } from '@standardnotes/features';
-import { FeatureStatus } from '@standardnotes/snjs';
-import { FunctionComponent } from 'preact';
 import {
+  FeatureStatus,
+  FeatureIdentifier,
   CloudProvider,
   MuteFailedCloudBackupsEmailsOption,
   SettingName,
-} from '@standardnotes/settings';
+} from '@standardnotes/snjs';
+import { FunctionComponent } from 'preact';
+
 import { Switch } from '@/components/Switch';
 import { convertStringifiedBooleanToBoolean } from '@/utils';
 import { STRING_FAILED_TO_UPDATE_USER_SETTING } from '@/strings';
diff --git a/app/assets/javascripts/components/Preferences/panes/extensions-segments/ConfirmCustomExtension.tsx b/app/assets/javascripts/components/Preferences/panes/extensions-segments/ConfirmCustomExtension.tsx
index 362d3d24c..60333b60d 100644
--- a/app/assets/javascripts/components/Preferences/panes/extensions-segments/ConfirmCustomExtension.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/extensions-segments/ConfirmCustomExtension.tsx
@@ -1,4 +1,4 @@
-import { displayStringForContentType, SNComponent } from '@standardnotes/snjs';
+import { DisplayStringForContentType, SNComponent } from '@standardnotes/snjs';
 import { Button } from '@/components/Button';
 import { FunctionComponent } from 'preact';
 import { Title, Text, Subtitle, PreferencesSegment } from '../../components';
@@ -30,7 +30,7 @@ export const ConfirmCustomExtension: FunctionComponent<{
     },
     {
       label: 'Extension Type',
-      value: displayStringForContentType(component.content_type),
+      value: DisplayStringForContentType(component.content_type),
     },
   ];
 
diff --git a/app/assets/javascripts/components/Preferences/panes/extensions-segments/ExtensionItem.tsx b/app/assets/javascripts/components/Preferences/panes/extensions-segments/ExtensionItem.tsx
index 4dab16adb..316ee59a7 100644
--- a/app/assets/javascripts/components/Preferences/panes/extensions-segments/ExtensionItem.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/extensions-segments/ExtensionItem.tsx
@@ -47,7 +47,7 @@ export const ExtensionItem: FunctionComponent<ExtensionItemProps> = ({
     const newOfflineOnly = !offlineOnly;
     setOfflineOnly(newOfflineOnly);
     application.mutator
-      .changeAndSaveItem(extension.uuid, (m: any) => {
+      .changeAndSaveItem(extension, (m: any) => {
         if (m.content == undefined) m.content = {};
         m.content.offlineOnly = newOfflineOnly;
       })
@@ -63,7 +63,7 @@ export const ExtensionItem: FunctionComponent<ExtensionItemProps> = ({
   const changeExtensionName = (newName: string) => {
     setExtensionName(newName);
     application.mutator
-      .changeAndSaveItem(extension.uuid, (m: any) => {
+      .changeAndSaveItem(extension, (m: any) => {
         if (m.content == undefined) m.content = {};
         m.content.name = newName;
       })
diff --git a/app/assets/javascripts/components/Preferences/panes/extensions-segments/ExtensionsLatestVersions.ts b/app/assets/javascripts/components/Preferences/panes/extensions-segments/ExtensionsLatestVersions.ts
index 5ac51a842..6757dd813 100644
--- a/app/assets/javascripts/components/Preferences/panes/extensions-segments/ExtensionsLatestVersions.ts
+++ b/app/assets/javascripts/components/Preferences/panes/extensions-segments/ExtensionsLatestVersions.ts
@@ -1,6 +1,9 @@
 import { WebApplication } from '@/ui_models/application';
-import { FeatureDescription } from '@standardnotes/features';
-import { SNComponent, ClientDisplayableError } from '@standardnotes/snjs';
+import {
+  SNComponent,
+  ClientDisplayableError,
+  FeatureDescription,
+} from '@standardnotes/snjs';
 import { makeAutoObservable, observable } from 'mobx';
 
 export class ExtensionsLatestVersions {
diff --git a/app/assets/javascripts/components/Preferences/panes/general-segments/Defaults.tsx b/app/assets/javascripts/components/Preferences/panes/general-segments/Defaults.tsx
index 003cc9a39..fa5bd6c4e 100644
--- a/app/assets/javascripts/components/Preferences/panes/general-segments/Defaults.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/general-segments/Defaults.tsx
@@ -34,7 +34,7 @@ const makeEditorDefault = (
   if (currentDefault) {
     removeEditorDefault(application, currentDefault);
   }
-  application.mutator.changeAndSaveItem(component.uuid, (m) => {
+  application.mutator.changeAndSaveItem(component, (m) => {
     const mutator = m as ComponentMutator;
     mutator.defaultEditor = true;
   });
@@ -44,7 +44,7 @@ const removeEditorDefault = (
   application: WebApplication,
   component: SNComponent
 ) => {
-  application.mutator.changeAndSaveItem(component.uuid, (m) => {
+  application.mutator.changeAndSaveItem(component, (m) => {
     const mutator = m as ComponentMutator;
     mutator.defaultEditor = false;
   });
diff --git a/app/assets/javascripts/components/Preferences/panes/general-segments/Labs.tsx b/app/assets/javascripts/components/Preferences/panes/general-segments/Labs.tsx
index 9c36f06ba..0c14f55fb 100644
--- a/app/assets/javascripts/components/Preferences/panes/general-segments/Labs.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/general-segments/Labs.tsx
@@ -1,4 +1,3 @@
-import { FindNativeFeature } from '@standardnotes/features';
 import { Switch } from '@/components/Switch';
 import {
   PreferencesGroup,
@@ -8,7 +7,11 @@ import {
   Title,
 } from '@/components/Preferences/components';
 import { WebApplication } from '@/ui_models/application';
-import { FeatureIdentifier, FeatureStatus } from '@standardnotes/snjs';
+import {
+  FeatureIdentifier,
+  FeatureStatus,
+  FindNativeFeature,
+} from '@standardnotes/snjs';
 import { FunctionComponent } from 'preact';
 import { useCallback, useEffect, useState } from 'preact/hooks';
 import { usePremiumModal } from '@/components/Premium';
diff --git a/app/assets/javascripts/components/Preferences/panes/security-segments/Privacy.tsx b/app/assets/javascripts/components/Preferences/panes/security-segments/Privacy.tsx
index 78277a96a..5ae3843e2 100644
--- a/app/assets/javascripts/components/Preferences/panes/security-segments/Privacy.tsx
+++ b/app/assets/javascripts/components/Preferences/panes/security-segments/Privacy.tsx
@@ -12,7 +12,7 @@ import {
   MuteSignInEmailsOption,
   LogSessionUserAgentOption,
   SettingName,
-} from '@standardnotes/settings';
+} from '@standardnotes/snjs';
 import { observer } from 'mobx-react-lite';
 import { FunctionalComponent } from 'preact';
 import { useCallback, useEffect, useState } from 'preact/hooks';
diff --git a/app/assets/javascripts/components/QuickSettingsMenu/QuickSettingsMenu.tsx b/app/assets/javascripts/components/QuickSettingsMenu/QuickSettingsMenu.tsx
index d2cbdcf52..daf69a3b2 100644
--- a/app/assets/javascripts/components/QuickSettingsMenu/QuickSettingsMenu.tsx
+++ b/app/assets/javascripts/components/QuickSettingsMenu/QuickSettingsMenu.tsx
@@ -103,15 +103,15 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
     }, [focusModeEnabled]);
 
     const reloadThemes = useCallback(() => {
-      const themes = (
-        application.items.getDisplayableItems(ContentType.Theme) as SNTheme[]
-      ).map((item) => {
-        return {
-          name: item.name,
-          identifier: item.identifier,
-          component: item,
-        };
-      }) as ThemeItem[];
+      const themes = application.items
+        .getDisplayableItems<SNTheme>(ContentType.Theme)
+        .map((item) => {
+          return {
+            name: item.name,
+            identifier: item.identifier,
+            component: item,
+          };
+        }) as ThemeItem[];
 
       GetFeatures()
         .filter(
@@ -140,17 +140,15 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
     }, [application]);
 
     const reloadToggleableComponents = useCallback(() => {
-      const toggleableComponents = (
-        application.items.getDisplayableItems(
-          ContentType.Component
-        ) as SNComponent[]
-      ).filter(
-        (component) =>
-          [ComponentArea.EditorStack, ComponentArea.TagsList].includes(
-            component.area
-          ) &&
-          component.identifier !== FeatureIdentifier.DeprecatedFoldersComponent
-      );
+      const toggleableComponents = application.items
+        .getDisplayableItems<SNComponent>(ContentType.Component)
+        .filter(
+          (component) =>
+            [ComponentArea.EditorStack].includes(component.area) &&
+            component.identifier !==
+              FeatureIdentifier.DeprecatedFoldersComponent
+        );
+
       setToggleableComponents(toggleableComponents);
     }, [application]);
 
diff --git a/app/assets/javascripts/components/RevisionHistoryModal/HistoryListContainer.tsx b/app/assets/javascripts/components/RevisionHistoryModal/HistoryListContainer.tsx
index 55748187a..6f16c6a21 100644
--- a/app/assets/javascripts/components/RevisionHistoryModal/HistoryListContainer.tsx
+++ b/app/assets/javascripts/components/RevisionHistoryModal/HistoryListContainer.tsx
@@ -134,7 +134,7 @@ export const HistoryListContainer: FunctionComponent<Props> = observer(
             throw new Error('Could not fetch revision');
           }
 
-          setSelectedRevision(response.item as HistoryEntry);
+          setSelectedRevision(response.item as unknown as HistoryEntry);
         } catch (error) {
           console.error(error);
           setSelectedRevision(undefined);
@@ -165,7 +165,7 @@ export const HistoryListContainer: FunctionComponent<Props> = observer(
           try {
             const remoteRevision =
               await application.historyManager.fetchRemoteRevision(
-                note.uuid,
+                note,
                 revisionListEntry
               );
             setSelectedRevision(remoteRevision);
@@ -182,7 +182,7 @@ export const HistoryListContainer: FunctionComponent<Props> = observer(
       },
       [
         application,
-        note.uuid,
+        note,
         setIsFetchingSelectedRevision,
         setSelectedRemoteEntry,
         setSelectedRevision,
diff --git a/app/assets/javascripts/components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx b/app/assets/javascripts/components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
index 2ec440528..78ddfc537 100644
--- a/app/assets/javascripts/components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
+++ b/app/assets/javascripts/components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
@@ -8,7 +8,6 @@ import {
   ButtonType,
   ContentType,
   HistoryEntry,
-  PayloadContent,
   PayloadSource,
   RevisionListEntry,
   SNNote,
@@ -148,7 +147,7 @@ export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps>
         }).then((confirmed) => {
           if (confirmed) {
             application.mutator.changeAndSaveItem(
-              selectedRevision.payload.uuid,
+              originalNote,
               (mutator) => {
                 mutator.unsafe_setCustomContent(
                   selectedRevision.payload.content
@@ -165,14 +164,14 @@ export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps>
 
     const restoreAsCopy = async () => {
       if (selectedRevision) {
-        const originalNote = application.items.findItem(
+        const originalNote = application.items.findSureItem<SNNote>(
           selectedRevision.payload.uuid
-        ) as SNNote;
+        );
 
         const duplicatedItem = await application.mutator.duplicateItem(
           originalNote,
           {
-            ...(selectedRevision.payload.content as PayloadContent),
+            ...selectedRevision.payload.content,
             title: selectedRevision.payload.content.title
               ? selectedRevision.payload.content.title + ' (copy)'
               : undefined,
@@ -188,10 +187,10 @@ export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps>
     useEffect(() => {
       const fetchTemplateNote = async () => {
         if (selectedRevision) {
-          const newTemplateNote = (await application.mutator.createTemplateItem(
+          const newTemplateNote = application.mutator.createTemplateItem(
             ContentType.Note,
             selectedRevision.payload.content
-          )) as SNNote;
+          ) as SNNote;
 
           setTemplateNoteForRevision(newTemplateNote);
         }
@@ -218,7 +217,7 @@ export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps>
             setIsDeletingRevision(true);
 
             application.historyManager
-              .deleteRemoteRevision(note.uuid, selectedRemoteEntry)
+              .deleteRemoteRevision(note, selectedRemoteEntry)
               .then((res) => {
                 if (res.error?.message) {
                   throw new Error(res.error.message);
diff --git a/app/assets/javascripts/components/RevisionPreviewModal.tsx b/app/assets/javascripts/components/RevisionPreviewModal.tsx
index 2889e1498..204f65e1a 100644
--- a/app/assets/javascripts/components/RevisionPreviewModal.tsx
+++ b/app/assets/javascripts/components/RevisionPreviewModal.tsx
@@ -4,7 +4,7 @@ import {
   PayloadSource,
   SNNote,
   ComponentViewer,
-  PayloadContent,
+  NoteContent,
 } from '@standardnotes/snjs';
 import { confirmDialog } from '@/services/alertService';
 import { STRING_RESTORE_LOCKED_ATTEMPT } from '@/strings';
@@ -13,7 +13,7 @@ import { ComponentView } from './ComponentView';
 
 interface Props {
   application: WebApplication;
-  content: PayloadContent;
+  content: NoteContent;
   title?: string;
   uuid: string;
 }
@@ -74,7 +74,7 @@ export class RevisionPreviewModal extends PureComponent<Props, State> {
         });
       } else {
         this.application.mutator.changeAndSaveItem(
-          this.props.uuid,
+          this.originalNote,
           (mutator) => {
             mutator.unsafe_setCustomContent(this.props.content);
           },
diff --git a/app/assets/javascripts/components/Tags/SmartViewsListItem.tsx b/app/assets/javascripts/components/Tags/SmartViewsListItem.tsx
index 841c7c540..0b8f22c3e 100644
--- a/app/assets/javascripts/components/Tags/SmartViewsListItem.tsx
+++ b/app/assets/javascripts/components/Tags/SmartViewsListItem.tsx
@@ -110,30 +110,29 @@ export const SmartViewsListItem: FunctionComponent<Props> = observer(
             paddingLeft: `${level * PADDING_PER_LEVEL_PX + PADDING_BASE_PX}px`,
           }}
         >
-          {!view.errorDecrypting ? (
-            <div className="tag-info">
-              <div className={`tag-icon mr-1`}>
-                <Icon
-                  type={iconType}
-                  className={`${isSelected ? 'color-info' : 'color-neutral'}`}
-                />
-              </div>
-              <input
-                className={`title ${isEditing ? 'editing' : ''}`}
-                disabled={!isEditing}
-                id={`react-tag-${view.uuid}`}
-                onBlur={onBlur}
-                onInput={onInput}
-                value={title}
-                onKeyUp={onKeyUp}
-                spellCheck={false}
-                ref={inputRef}
+          <div className="tag-info">
+            <div className={`tag-icon mr-1`}>
+              <Icon
+                type={iconType}
+                className={`${isSelected ? 'color-info' : 'color-neutral'}`}
               />
-              <div className="count">
-                {view.uuid === SystemViewId.AllNotes && tagsState.allNotesCount}
-              </div>
             </div>
-          ) : null}
+            <input
+              className={`title ${isEditing ? 'editing' : ''}`}
+              disabled={!isEditing}
+              id={`react-tag-${view.uuid}`}
+              onBlur={onBlur}
+              onInput={onInput}
+              value={title}
+              onKeyUp={onKeyUp}
+              spellCheck={false}
+              ref={inputRef}
+            />
+            <div className="count">
+              {view.uuid === SystemViewId.AllNotes && tagsState.allNotesCount}
+            </div>
+          </div>
+
           {!isSystemView(view) && (
             <div className="meta">
               {view.conflictOf && (
@@ -141,14 +140,7 @@ export const SmartViewsListItem: FunctionComponent<Props> = observer(
                   Conflicted Copy {view.conflictOf}
                 </div>
               )}
-              {view.errorDecrypting && !view.waitingForKey && (
-                <div className="danger small-text font-bold">Missing Keys</div>
-              )}
-              {view.errorDecrypting && view.waitingForKey && (
-                <div className="info small-text font-bold">
-                  Waiting For Keys
-                </div>
-              )}
+
               {isSelected && (
                 <div className="menu">
                   {!isEditing && (
diff --git a/app/assets/javascripts/components/Tags/TagsListItem.tsx b/app/assets/javascripts/components/Tags/TagsListItem.tsx
index 5e3cf1018..93b44e5d1 100644
--- a/app/assets/javascripts/components/Tags/TagsListItem.tsx
+++ b/app/assets/javascripts/components/Tags/TagsListItem.tsx
@@ -152,7 +152,7 @@ export const TagsListItem: FunctionComponent<Props> = observer(
       () => ({
         accept: ItemTypes.TAG,
         canDrop: (item) => {
-          return tagsState.isValidTagParent(tag.uuid, item.uuid);
+          return tagsState.isValidTagParent(tag, item as SNTag);
         },
         drop: (item) => {
           if (!hasFolders) {
@@ -202,70 +202,61 @@ export const TagsListItem: FunctionComponent<Props> = observer(
             onContextMenu(tag, e.clientX, e.clientY);
           }}
         >
-          {!tag.errorDecrypting ? (
-            <div className="tag-info" title={title} ref={dropRef}>
-              {hasAtLeastOneFolder && (
-                <div className="tag-fold-container">
-                  <button
-                    className={`tag-fold focus:shadow-inner ${
-                      showChildren ? 'opened' : 'closed'
-                    } ${!hasChildren ? 'invisible' : ''}`}
-                    onClick={hasChildren ? toggleChildren : undefined}
-                  >
-                    <Icon
-                      className={`color-neutral`}
-                      type={
-                        showChildren
-                          ? 'menu-arrow-down-alt'
-                          : 'menu-arrow-right'
-                      }
-                    />
-                  </button>
-                </div>
-              )}
-              <div className={`tag-icon draggable mr-1`} ref={dragRef}>
-                <Icon
-                  type="hashtag"
-                  className={`${isSelected ? 'color-info' : 'color-neutral'}`}
-                />
-              </div>
-              <input
-                className={`title ${isEditing ? 'editing' : ''}`}
-                id={`react-tag-${tag.uuid}`}
-                disabled={!isEditing}
-                onBlur={onBlur}
-                onInput={onInput}
-                value={title}
-                onKeyDown={onKeyDown}
-                spellCheck={false}
-                ref={inputRef}
-              />
-              <div className="flex items-center">
+          <div className="tag-info" title={title} ref={dropRef}>
+            {hasAtLeastOneFolder && (
+              <div className="tag-fold-container">
                 <button
-                  className={`border-0 mr-2 bg-transparent hover:bg-contrast focus:shadow-inner cursor-pointer ${
-                    isSelected ? 'visible' : 'invisible'
-                  }`}
-                  onClick={toggleContextMenu}
-                  ref={menuButtonRef}
+                  className={`tag-fold focus:shadow-inner ${
+                    showChildren ? 'opened' : 'closed'
+                  } ${!hasChildren ? 'invisible' : ''}`}
+                  onClick={hasChildren ? toggleChildren : undefined}
                 >
-                  <Icon type="more" className="color-neutral" />
+                  <Icon
+                    className={`color-neutral`}
+                    type={
+                      showChildren ? 'menu-arrow-down-alt' : 'menu-arrow-right'
+                    }
+                  />
                 </button>
-                <div className="count">{noteCounts.get()}</div>
               </div>
+            )}
+            <div className={`tag-icon draggable mr-1`} ref={dragRef}>
+              <Icon
+                type="hashtag"
+                className={`${isSelected ? 'color-info' : 'color-neutral'}`}
+              />
             </div>
-          ) : null}
+            <input
+              className={`title ${isEditing ? 'editing' : ''}`}
+              id={`react-tag-${tag.uuid}`}
+              disabled={!isEditing}
+              onBlur={onBlur}
+              onInput={onInput}
+              value={title}
+              onKeyDown={onKeyDown}
+              spellCheck={false}
+              ref={inputRef}
+            />
+            <div className="flex items-center">
+              <button
+                className={`border-0 mr-2 bg-transparent hover:bg-contrast focus:shadow-inner cursor-pointer ${
+                  isSelected ? 'visible' : 'invisible'
+                }`}
+                onClick={toggleContextMenu}
+                ref={menuButtonRef}
+              >
+                <Icon type="more" className="color-neutral" />
+              </button>
+              <div className="count">{noteCounts.get()}</div>
+            </div>
+          </div>
+
           <div className={`meta ${hasAtLeastOneFolder ? 'with-folders' : ''}`}>
             {tag.conflictOf && (
               <div className="danger small-text font-bold">
                 Conflicted Copy {tag.conflictOf}
               </div>
             )}
-            {tag.errorDecrypting && !tag.waitingForKey && (
-              <div className="danger small-text font-bold">Missing Keys</div>
-            )}
-            {tag.errorDecrypting && tag.waitingForKey && (
-              <div className="info small-text font-bold">Waiting For Keys</div>
-            )}
           </div>
         </button>
         {isAddingSubtag && (
diff --git a/app/assets/javascripts/services/archiveManager.ts b/app/assets/javascripts/services/archiveManager.ts
index 78d31e2f9..bc9ca5438 100644
--- a/app/assets/javascripts/services/archiveManager.ts
+++ b/app/assets/javascripts/services/archiveManager.ts
@@ -1,11 +1,10 @@
 import { WebApplication } from '@/ui_models/application';
 import { parseFileName } from '@standardnotes/filepicker';
 import {
-  EncryptionIntent,
   ContentType,
-  SNNote,
   BackupFile,
-  PayloadContent,
+  BackupFileDecryptedContextualPayload,
+  NoteContent,
 } from '@standardnotes/snjs';
 
 function sanitizeFileName(name: string): string {
@@ -79,6 +78,7 @@ export class ArchiveManager {
     const blob = new Blob([JSON.stringify(data, null, 2)], {
       type: 'text/plain',
     });
+
     const fileName = zippableFileName('Standard Notes Backup and Import File');
     await zipWriter.add(fileName, new zip.BlobReader(blob));
 
@@ -88,9 +88,9 @@ export class ArchiveManager {
       let name, contents;
 
       if (item.content_type === ContentType.Note) {
-        const note = item as SNNote;
-        name = (note.content as PayloadContent).title;
-        contents = (note.content as PayloadContent).text;
+        const note = item as BackupFileDecryptedContextualPayload<NoteContent>;
+        name = note.content.title;
+        contents = note.content.text;
       } else {
         name = item.content_type;
         contents = JSON.stringify(item.content, null, 2);
diff --git a/app/assets/javascripts/services/desktopManager.ts b/app/assets/javascripts/services/desktopManager.ts
index c32ae85dd..412cba298 100644
--- a/app/assets/javascripts/services/desktopManager.ts
+++ b/app/assets/javascripts/services/desktopManager.ts
@@ -8,13 +8,11 @@ import {
   removeFromArray,
   DesktopManagerInterface,
   PayloadSource,
-  EncryptionIntent,
-  CreateIntentPayloadFromObject,
+  InternalEventBus,
 } from '@standardnotes/snjs';
 import { WebAppEvent, WebApplication } from '@/ui_models/application';
 import { isDesktopApplication } from '@/utils';
 import { Bridge, ElectronDesktopCallbacks } from './bridge';
-import { InternalEventBus } from '@standardnotes/services';
 
 /**
  * An interface used by the Desktop application to interact with SN
@@ -68,10 +66,7 @@ export class DesktopManager
    * Keys are not passed into ItemParams, so the result is not encrypted
    */
   convertComponentForTransmission(component: SNComponent) {
-    return CreateIntentPayloadFromObject(
-      component.payloadRepresentation(),
-      EncryptionIntent.FileDecrypted
-    );
+    return component.payloadRepresentation().ejected();
   }
 
   // All `components` should be installed
@@ -84,11 +79,7 @@ export class DesktopManager
         return this.convertComponentForTransmission(component);
       })
     ).then((payloads) => {
-      this.bridge.syncComponents(
-        payloads.filter(
-          (payload) => !payload.errorDecrypting && !payload.waitingForKey
-        )
-      );
+      this.bridge.syncComponents(payloads);
     });
   }
 
@@ -137,7 +128,7 @@ export class DesktopManager
       return;
     }
     const updatedComponent = await this.application.mutator.changeAndSaveItem(
-      component.uuid,
+      component,
       (m) => {
         const mutator = m as ComponentMutator;
         if (error) {
diff --git a/app/assets/javascripts/services/themeManager.ts b/app/assets/javascripts/services/themeManager.ts
index b598499d0..68031c36b 100644
--- a/app/assets/javascripts/services/themeManager.ts
+++ b/app/assets/javascripts/services/themeManager.ts
@@ -1,7 +1,6 @@
 import { WebApplication } from '@/ui_models/application';
 import {
   StorageValueModes,
-  EncryptionIntent,
   ApplicationService,
   SNTheme,
   removeFromArray,
@@ -11,9 +10,9 @@ import {
   FeatureStatus,
   PayloadSource,
   PrefKey,
-  CreateIntentPayloadFromObject,
+  CreateDecryptedLocalStorageContextPayload,
+  InternalEventBus,
 } from '@standardnotes/snjs';
-import { InternalEventBus } from '@standardnotes/services';
 
 const CACHED_THEMES_KEY = 'cachedThemes';
 
@@ -156,9 +155,9 @@ export class ThemeManager extends ApplicationService {
       const preference = prefersDarkColorScheme
         ? PrefKey.AutoDarkThemeIdentifier
         : PrefKey.AutoLightThemeIdentifier;
-      const themes = this.application.items.getDisplayableItems(
+      const themes = this.application.items.getDisplayableItems<SNTheme>(
         ContentType.Theme
-      ) as SNTheme[];
+      );
 
       const enableDefaultTheme = () => {
         const activeTheme = themes.find(
@@ -206,7 +205,8 @@ export class ThemeManager extends ApplicationService {
 
     this.unregisterStream = this.application.streamItems(
       ContentType.Theme,
-      (items, source) => {
+      ({ changed, inserted, source }) => {
+        const items = changed.concat(inserted);
         const themes = items as SNTheme[];
         for (const theme of themes) {
           if (theme.active) {
@@ -275,10 +275,7 @@ export class ThemeManager extends ApplicationService {
 
     const mapped = themes.map((theme) => {
       const payload = theme.payloadRepresentation();
-      return CreateIntentPayloadFromObject(
-        payload,
-        EncryptionIntent.LocalStorageDecrypted
-      );
+      return CreateDecryptedLocalStorageContextPayload(payload);
     });
 
     return this.application.setValue(
diff --git a/app/assets/javascripts/ui_models/app_state/account_menu_state.ts b/app/assets/javascripts/ui_models/app_state/account_menu_state.ts
index ce9064880..5bb879a6b 100644
--- a/app/assets/javascripts/ui_models/app_state/account_menu_state.ts
+++ b/app/assets/javascripts/ui_models/app_state/account_menu_state.ts
@@ -6,7 +6,12 @@ import {
   observable,
   runInAction,
 } from 'mobx';
-import { ApplicationEvent, ContentType, SNItem } from '@standardnotes/snjs';
+import {
+  ApplicationEvent,
+  ContentType,
+  SNNote,
+  SNTag,
+} from '@standardnotes/snjs';
 import { WebApplication } from '@/ui_models/application';
 import { AccountMenuPane } from '@/components/AccountMenu';
 
@@ -23,7 +28,7 @@ export class AccountMenuState {
   otherSessionsSignOut = false;
   server: string | undefined = undefined;
   enableServerOption = false;
-  notesAndTags: SNItem[] = [];
+  notesAndTags: (SNNote | SNTag)[] = [];
   isEncryptionEnabled = false;
   encryptionStatusString = '';
   isBackupEncrypted = false;
diff --git a/app/assets/javascripts/ui_models/app_state/app_state.ts b/app/assets/javascripts/ui_models/app_state/app_state.ts
index 8c6dc4e27..ac1e97623 100644
--- a/app/assets/javascripts/ui_models/app_state/app_state.ts
+++ b/app/assets/javascripts/ui_models/app_state/app_state.ts
@@ -8,13 +8,14 @@ import {
   ContentType,
   DeinitSource,
   NoteViewController,
-  PayloadSource,
   PrefKey,
   SNNote,
   SmartView,
   SNTag,
   SystemViewId,
   removeFromArray,
+  PayloadSource,
+  Uuid,
 } from '@standardnotes/snjs';
 import {
   action,
@@ -276,9 +277,9 @@ export class AppState {
     this.application.noteControllerGroup.closeAllNoteViews();
   }
 
-  noteControllerForNote(note: SNNote) {
+  noteControllerForNote(uuid: Uuid) {
     for (const controller of this.getNoteControllers()) {
-      if (controller.note.uuid === note.uuid) {
+      if (controller.note.uuid === uuid) {
         return controller;
       }
     }
@@ -328,43 +329,61 @@ export class AppState {
   }
 
   streamNotesAndTags() {
-    this.application.streamItems(
+    this.application.streamItems<SNNote | SNTag>(
       [ContentType.Note, ContentType.Tag],
-      async (items, source) => {
+      async ({ changed, inserted, removed, source }) => {
+        if (
+          ![PayloadSource.PreSyncSave, PayloadSource.RemoteRetrieved].includes(
+            source
+          )
+        ) {
+          return;
+        }
+
+        const removedNotes = removed.filter(
+          (i) => i.content_type === ContentType.Note
+        );
+
+        for (const removedNote of removedNotes) {
+          const noteController = this.noteControllerForNote(removedNote.uuid);
+          if (noteController) {
+            this.closeNoteController(noteController);
+          }
+        }
+
+        const changedOrInserted = [...changed, ...inserted].filter(
+          (i) => i.content_type === ContentType.Note
+        );
+
         const selectedTag = this.tags.selected;
 
-        /** Close any note controllers for deleted/trashed/archived notes */
-        if (source === PayloadSource.PreSyncSave) {
-          const notes = items.filter(
-            (candidate) => candidate.content_type === ContentType.Note
-          ) as SNNote[];
-          for (const note of notes) {
-            const noteController = this.noteControllerForNote(note);
-            if (!noteController) {
-              continue;
-            }
-            if (note.deleted) {
-              this.closeNoteController(noteController);
-            } else if (
-              note.trashed &&
-              !(
-                selectedTag instanceof SmartView &&
-                selectedTag.uuid === SystemViewId.TrashedNotes
-              ) &&
-              !this.searchOptions.includeTrashed
-            ) {
-              this.closeNoteController(noteController);
-            } else if (
-              note.archived &&
-              !(
-                selectedTag instanceof SmartView &&
-                selectedTag.uuid === SystemViewId.ArchivedNotes
-              ) &&
-              !this.searchOptions.includeArchived &&
-              !this.application.getPreference(PrefKey.NotesShowArchived, false)
-            ) {
-              this.closeNoteController(noteController);
-            }
+        for (const note of changedOrInserted) {
+          const noteController = this.noteControllerForNote(note.uuid);
+          if (!noteController) {
+            continue;
+          }
+
+          const isBrowswingTrashedNotes =
+            selectedTag instanceof SmartView &&
+            selectedTag.uuid === SystemViewId.TrashedNotes;
+
+          const isBrowsingArchivedNotes =
+            selectedTag instanceof SmartView &&
+            selectedTag.uuid === SystemViewId.ArchivedNotes;
+
+          if (
+            note.trashed &&
+            !isBrowswingTrashedNotes &&
+            !this.searchOptions.includeTrashed
+          ) {
+            this.closeNoteController(noteController);
+          } else if (
+            note.archived &&
+            !isBrowsingArchivedNotes &&
+            !this.searchOptions.includeArchived &&
+            !this.application.getPreference(PrefKey.NotesShowArchived, false)
+          ) {
+            this.closeNoteController(noteController);
           }
         }
       }
@@ -436,11 +455,9 @@ export class AppState {
 
   /** Returns the tags that are referncing this note */
   public getNoteTags(note: SNNote) {
-    return this.application.items
-      .itemsReferencingItem(note.uuid)
-      .filter((ref) => {
-        return ref.content_type === ContentType.Tag;
-      }) as SNTag[];
+    return this.application.items.itemsReferencingItem(note).filter((ref) => {
+      return ref.content_type === ContentType.Tag;
+    }) as SNTag[];
   }
 
   panelDidResize(name: string, collapsed: boolean) {
diff --git a/app/assets/javascripts/ui_models/app_state/note_tags_state.ts b/app/assets/javascripts/ui_models/app_state/note_tags_state.ts
index 238da65aa..a5f26c786 100644
--- a/app/assets/javascripts/ui_models/app_state/note_tags_state.ts
+++ b/app/assets/javascripts/ui_models/app_state/note_tags_state.ts
@@ -215,7 +215,7 @@ export class NoteTagsState {
   async removeTagFromActiveNote(tag: SNTag): Promise<void> {
     const { activeNote } = this;
     if (activeNote) {
-      await this.application.mutator.changeItem(tag.uuid, (mutator) => {
+      await this.application.mutator.changeItem(tag, (mutator) => {
         mutator.removeItemAsRelationship(activeNote);
       });
       this.application.sync.sync();
diff --git a/app/assets/javascripts/ui_models/app_state/notes_state.ts b/app/assets/javascripts/ui_models/app_state/notes_state.ts
index 0dec3b8d0..c01ecc378 100644
--- a/app/assets/javascripts/ui_models/app_state/notes_state.ts
+++ b/app/assets/javascripts/ui_models/app_state/notes_state.ts
@@ -60,15 +60,22 @@ export class NotesState {
     });
 
     appEventListeners.push(
-      application.streamItems(ContentType.Note, (notes) => {
-        runInAction(() => {
-          for (const note of notes) {
-            if (this.selectedNotes[note.uuid]) {
-              this.selectedNotes[note.uuid] = note as SNNote;
+      application.streamItems<SNNote>(
+        ContentType.Note,
+        ({ changed, inserted, removed }) => {
+          runInAction(() => {
+            for (const removedNote of removed) {
+              delete this.selectedNotes[removedNote.uuid];
             }
-          }
-        });
-      })
+
+            for (const note of [...changed, ...inserted]) {
+              if (this.selectedNotes[note.uuid]) {
+                this.selectedNotes[note.uuid] = note;
+              }
+            }
+          });
+        }
+      )
     );
   }
 
@@ -85,9 +92,8 @@ export class NotesState {
   }
 
   private async selectNotesRange(selectedNote: SNNote): Promise<void> {
-    const notes = this.application.items.getDisplayableItems(
-      ContentType.Note
-    ) as SNNote[];
+    const notes = this.application.items.getDisplayableNotes();
+
     const lastSelectedNoteIndex = notes.findIndex(
       (note) => note.uuid == this.lastSelectedNote?.uuid
     );
@@ -179,10 +185,6 @@ export class NotesState {
 
     this.appState.noteTags.reloadTags();
     await this.onActiveEditorChanged();
-
-    if (note.waitingForKey) {
-      this.application.presentKeyRecoveryWizard();
-    }
   }
 
   setContextMenuOpen(open: boolean): void {
@@ -263,7 +265,7 @@ export class NotesState {
     mutate: (mutator: NoteMutator) => void
   ): Promise<void> {
     await this.application.mutator.changeItems(
-      Object.keys(this.selectedNotes),
+      Object.values(this.selectedNotes),
       mutate,
       false
     );
@@ -399,7 +401,7 @@ export class NotesState {
 
   async toggleGlobalSpellcheckForNote(note: SNNote) {
     await this.application.mutator.changeItem<NoteMutator>(
-      note.uuid,
+      note,
       (mutator) => {
         mutator.toggleSpellcheck();
       },
@@ -410,11 +412,11 @@ export class NotesState {
 
   async addTagToSelectedNotes(tag: SNTag): Promise<void> {
     const selectedNotes = Object.values(this.selectedNotes);
-    const parentChainTags = this.application.items.getTagParentChain(tag.uuid);
+    const parentChainTags = this.application.items.getTagParentChain(tag);
     const tagsToAdd = [...parentChainTags, tag];
     await Promise.all(
       tagsToAdd.map(async (tag) => {
-        await this.application.mutator.changeItem(tag.uuid, (mutator) => {
+        await this.application.mutator.changeItem(tag, (mutator) => {
           for (const note of selectedNotes) {
             mutator.addItemAsRelationship(note);
           }
@@ -426,7 +428,7 @@ export class NotesState {
 
   async removeTagFromSelectedNotes(tag: SNTag): Promise<void> {
     const selectedNotes = Object.values(this.selectedNotes);
-    await this.application.mutator.changeItem(tag.uuid, (mutator) => {
+    await this.application.mutator.changeItem(tag, (mutator) => {
       for (const note of selectedNotes) {
         mutator.removeItemAsRelationship(note);
       }
diff --git a/app/assets/javascripts/ui_models/app_state/notes_view_state.ts b/app/assets/javascripts/ui_models/app_state/notes_view_state.ts
index f2dd350c8..1130d3534 100644
--- a/app/assets/javascripts/ui_models/app_state/notes_view_state.ts
+++ b/app/assets/javascripts/ui_models/app_state/notes_view_state.ts
@@ -1,6 +1,7 @@
 import {
   ApplicationEvent,
   CollectionSort,
+  CollectionSortProperty,
   ContentType,
   findInArray,
   NotesDisplayCriteria,
@@ -28,7 +29,7 @@ const ELEMENT_ID_SEARCH_BAR = 'search-bar';
 const ELEMENT_ID_SCROLL_CONTAINER = 'notes-scrollable';
 
 export type DisplayOptions = {
-  sortBy: CollectionSort;
+  sortBy: CollectionSortProperty;
   sortReverse: boolean;
   hidePinned: boolean;
   showArchived: boolean;
@@ -73,18 +74,20 @@ export class NotesViewState {
     this.resetPagination();
 
     appObservers.push(
-      application.streamItems(ContentType.Note, () => {
+      application.streamItems<SNNote>(ContentType.Note, () => {
         this.reloadNotes();
+
         const activeNote = this.appState.notes.activeNoteController?.note;
+
         if (this.application.getAppState().notes.selectedNotesCount < 2) {
           if (activeNote) {
-            const discarded = activeNote.deleted || activeNote.trashed;
+            const browsingTrashedNotes =
+              this.appState.selectedTag instanceof SmartView &&
+              this.appState.selectedTag?.uuid === SystemViewId.TrashedNotes;
+
             if (
-              discarded &&
-              !(
-                this.appState.selectedTag instanceof SmartView &&
-                this.appState.selectedTag?.uuid === SystemViewId.TrashedNotes
-              ) &&
+              activeNote.trashed &&
+              !browsingTrashedNotes &&
               !this.appState?.searchOptions.includeTrashed
             ) {
               this.selectNextOrCreateNew();
@@ -96,19 +99,24 @@ export class NotesViewState {
           }
         }
       }),
-      application.streamItems([ContentType.Tag], async (items) => {
-        const tags = items as SNTag[];
-        /** A tag could have changed its relationships, so we need to reload the filter */
-        this.reloadNotesDisplayOptions();
-        this.reloadNotes();
-        if (
-          this.appState.selectedTag &&
-          findInArray(tags, 'uuid', this.appState.selectedTag.uuid)
-        ) {
-          /** Tag title could have changed */
-          this.reloadPanelTitle();
+
+      application.streamItems<SNTag>(
+        [ContentType.Tag],
+        async ({ changed, inserted }) => {
+          const tags = [...changed, ...inserted];
+          /** A tag could have changed its relationships, so we need to reload the filter */
+          this.reloadNotesDisplayOptions();
+          this.reloadNotes();
+
+          if (
+            this.appState.selectedTag &&
+            findInArray(tags, 'uuid', this.appState.selectedTag.uuid)
+          ) {
+            /** Tag title could have changed */
+            this.reloadPanelTitle();
+          }
         }
-      }),
+      ),
       application.addEventObserver(async () => {
         this.reloadPreferences();
       }, ApplicationEvent.PreferencesChanged),
@@ -223,9 +231,7 @@ export class NotesViewState {
     if (!tag) {
       return;
     }
-    const notes = this.application.items.getDisplayableItems(
-      ContentType.Note
-    ) as SNNote[];
+    const notes = this.application.items.getDisplayableNotes();
     const renderedNotes = notes.slice(0, this.notesToDisplay);
 
     this.notes = notes;
@@ -250,7 +256,7 @@ export class NotesViewState {
     }
 
     const criteria = NotesDisplayCriteria.Create({
-      sortProperty: this.displayOptions.sortBy as CollectionSort,
+      sortProperty: this.displayOptions.sortBy,
       sortDirection: this.displayOptions.sortReverse ? 'asc' : 'dsc',
       tags: tag instanceof SNTag ? [tag] : [],
       views: tag instanceof SmartView ? [tag] : [],
@@ -498,7 +504,7 @@ export class NotesViewState {
   handleEditorChange = async () => {
     const activeNote = this.appState.getActiveNoteController()?.note;
     if (activeNote && activeNote.conflictOf) {
-      this.application.mutator.changeAndSaveItem(activeNote.uuid, (mutator) => {
+      this.application.mutator.changeAndSaveItem(activeNote, (mutator) => {
         mutator.conflictOf = undefined;
       });
     }
diff --git a/app/assets/javascripts/ui_models/app_state/tags_state.ts b/app/assets/javascripts/ui_models/app_state/tags_state.ts
index e03dc419c..acf1fee80 100644
--- a/app/assets/javascripts/ui_models/app_state/tags_state.ts
+++ b/app/assets/javascripts/ui_models/app_state/tags_state.ts
@@ -14,6 +14,7 @@ import {
   TagMutator,
   UuidString,
   isSystemView,
+  FindItem,
 } from '@standardnotes/snjs';
 import {
   action,
@@ -29,11 +30,9 @@ import { FeaturesState, SMART_TAGS_FEATURE_NAME } from './features_state';
 type AnyTag = SNTag | SmartView;
 
 const rootTags = (application: SNApplication): SNTag[] => {
-  const hasNoParent = (tag: SNTag) => !application.items.getTagParent(tag.uuid);
+  const hasNoParent = (tag: SNTag) => !application.items.getTagParent(tag);
 
-  const allTags = application.items.getDisplayableItems(
-    ContentType.Tag
-  ) as SNTag[];
+  const allTags = application.items.getDisplayableItems<SNTag>(ContentType.Tag);
   const rootTags = allTags.filter(hasNoParent);
 
   return rootTags;
@@ -44,10 +43,10 @@ const tagSiblings = (application: SNApplication, tag: SNTag): SNTag[] => {
     tags.filter((other) => other.uuid !== tag.uuid);
 
   const isTemplateTag = application.items.isTemplateItem(tag);
-  const parentTag = !isTemplateTag && application.items.getTagParent(tag.uuid);
+  const parentTag = !isTemplateTag && application.items.getTagParent(tag);
 
   if (parentTag) {
-    const siblingsAndTag = application.items.getTagChildren(parentTag.uuid);
+    const siblingsAndTag = application.items.getTagChildren(parentTag);
     return withoutCurrentTag(siblingsAndTag);
   }
 
@@ -148,24 +147,24 @@ export class TagsState {
     appEventListeners.push(
       this.application.streamItems(
         [ContentType.Tag, ContentType.SmartView],
-        (items) => {
+        ({ changed, removed }) => {
           runInAction(() => {
             this.tags = this.application.items.getDisplayableItems<SNTag>(
               ContentType.Tag
             );
+
             this.smartViews = this.application.items.getSmartViews();
 
             const selectedTag = this.selected_;
+
             if (selectedTag && !isSystemView(selectedTag as SmartView)) {
-              const matchingTag = items.find(
-                (candidate) => candidate.uuid === selectedTag.uuid
-              ) as AnyTag;
-              if (matchingTag) {
-                if (matchingTag.deleted) {
-                  this.selected_ = this.smartViews[0];
-                } else {
-                  this.selected_ = matchingTag;
-                }
+              if (FindItem(removed, selectedTag.uuid)) {
+                this.selected_ = this.smartViews[0];
+              }
+
+              const updated = FindItem(changed, selectedTag.uuid);
+              if (updated) {
+                this.selected_ = updated as AnyTag;
               }
             } else {
               this.selected_ = this.smartViews[0];
@@ -202,7 +201,7 @@ export class TagsState {
       title
     )) as SNTag;
 
-    const futureSiblings = this.application.items.getTagChildren(parent.uuid);
+    const futureSiblings = this.application.items.getTagChildren(parent);
 
     if (!isValidFutureSiblings(this.application, futureSiblings, createdTag)) {
       this.setAddingSubtagTo(undefined);
@@ -319,7 +318,7 @@ export class TagsState {
       return [];
     }
 
-    const children = this.application.items.getTagChildren(tag.uuid);
+    const children = this.application.items.getTagChildren(tag);
 
     const childrenUuids = children.map((childTag) => childTag.uuid);
     const childrenTags = this.tags.filter((tag) =>
@@ -328,8 +327,8 @@ export class TagsState {
     return childrenTags;
   }
 
-  isValidTagParent(parentUuid: UuidString, tagUuid: UuidString): boolean {
-    return this.application.items.isValidTagParent(parentUuid, tagUuid);
+  isValidTagParent(parent: SNTag, tag: SNTag): boolean {
+    return this.application.items.isValidTagParent(parent, tag);
   }
 
   public hasParent(tagUuid: UuidString): boolean {
@@ -343,7 +342,7 @@ export class TagsState {
   ): Promise<void> {
     const tag = this.application.items.findItem(tagUuid) as SNTag;
 
-    const currentParent = this.application.items.getTagParent(tag.uuid);
+    const currentParent = this.application.items.getTagParent(tag);
     const currentParentUuid = currentParent?.uuid;
 
     if (currentParentUuid === futureParentUuid) {
@@ -361,9 +360,8 @@ export class TagsState {
       }
       await this.application.mutator.unsetTagParent(tag);
     } else {
-      const futureSiblings = this.application.items.getTagChildren(
-        futureParent.uuid
-      );
+      const futureSiblings =
+        this.application.items.getTagChildren(futureParent);
       if (!isValidFutureSiblings(this.application, futureSiblings, tag)) {
         return;
       }
@@ -374,9 +372,7 @@ export class TagsState {
   }
 
   get rootTags(): SNTag[] {
-    return this.tags.filter(
-      (tag) => !this.application.items.getTagParent(tag.uuid)
-    );
+    return this.tags.filter((tag) => !this.application.items.getTagParent(tag));
   }
 
   get tagsCount(): number {
@@ -401,7 +397,7 @@ export class TagsState {
 
   public set selected(tag: AnyTag | undefined) {
     if (tag && tag.conflictOf) {
-      this.application.mutator.changeAndSaveItem(tag.uuid, (mutator) => {
+      this.application.mutator.changeAndSaveItem(tag, (mutator) => {
         mutator.conflictOf = undefined;
       });
     }
@@ -417,12 +413,9 @@ export class TagsState {
   }
 
   public setExpanded(tag: SNTag, expanded: boolean) {
-    this.application.mutator.changeAndSaveItem<TagMutator>(
-      tag.uuid,
-      (mutator) => {
-        mutator.expanded = expanded;
-      }
-    );
+    this.application.mutator.changeAndSaveItem<TagMutator>(tag, (mutator) => {
+      mutator.expanded = expanded;
+    });
   }
 
   public get selectedUuid(): UuidString | undefined {
@@ -527,7 +520,7 @@ export class TagsState {
       });
     } else {
       await this.application.mutator.changeAndSaveItem<TagMutator>(
-        tag.uuid,
+        tag,
         (mutator) => {
           mutator.title = newTitle;
         }
@@ -563,9 +556,7 @@ export class TagsState {
   }
 
   public get hasAtLeastOneFolder(): boolean {
-    return this.tags.some(
-      (tag) => !!this.application.items.getTagParent(tag.uuid)
-    );
+    return this.tags.some((tag) => !!this.application.items.getTagParent(tag));
   }
 }
 
diff --git a/app/assets/javascripts/ui_models/application.ts b/app/assets/javascripts/ui_models/application.ts
index 8d06cd055..e51ca5cfa 100644
--- a/app/assets/javascripts/ui_models/application.ts
+++ b/app/assets/javascripts/ui_models/application.ts
@@ -75,15 +75,16 @@ export class WebApplication extends SNApplication {
       if (source === DeinitSource.AppGroupUnload) {
         this.getThemeService().deactivateAllThemes();
       }
+
       for (const service of Object.values(this.webServices)) {
         if ('deinit' in service) {
           service.deinit?.(source);
         }
         (service as any).application = undefined;
       }
+
       this.webServices = {} as WebServices;
       this.noteControllerGroup.deinit();
-      this.iconsController.deinit();
       this.webEventObservers.length = 0;
 
       if (source === DeinitSource.SignOut) {
diff --git a/app/assets/javascripts/ui_models/application_group.ts b/app/assets/javascripts/ui_models/application_group.ts
index 8feb4c7c4..f391b333b 100644
--- a/app/assets/javascripts/ui_models/application_group.ts
+++ b/app/assets/javascripts/ui_models/application_group.ts
@@ -6,6 +6,7 @@ import {
   DeviceInterface,
   Platform,
   Runtime,
+  InternalEventBus,
 } from '@standardnotes/snjs';
 import { AppState } from '@/ui_models/app_state';
 import { Bridge } from '@/services/bridge';
@@ -16,7 +17,6 @@ import { IOService } from '@/services/ioService';
 import { AutolockService } from '@/services/autolock_service';
 import { StatusManager } from '@/services/statusManager';
 import { ThemeManager } from '@/services/themeManager';
-import { InternalEventBus } from '@standardnotes/services';
 
 export class ApplicationGroup extends SNApplicationGroup {
   constructor(
diff --git a/package.json b/package.json
index ae404118b..f26895e8f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "standard-notes-web",
-  "version": "3.14.0",
+  "version": "3.15.0",
   "license": "AGPL-3.0-or-later",
   "repository": {
     "type": "git",
@@ -26,11 +26,6 @@
     "@babel/plugin-transform-react-jsx": "^7.17.3",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-typescript": "^7.16.7",
-    "@reach/disclosure": "^0.16.2",
-    "@reach/visually-hidden": "^0.16.0",
-    "@standardnotes/responses": "1.5.1",
-    "@standardnotes/services": "1.7.1",
-    "@standardnotes/stylekit": "5.20.0",
     "@svgr/webpack": "^6.2.1",
     "@types/jest": "^27.4.1",
     "@types/react": "^17.0.42",
@@ -65,26 +60,27 @@
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {
-    "@reach/alert": "^0.16.0",
     "@reach/alert-dialog": "^0.16.2",
+    "@reach/alert": "^0.16.0",
     "@reach/checkbox": "^0.16.0",
     "@reach/dialog": "^0.16.2",
+    "@reach/disclosure": "^0.16.2",
     "@reach/listbox": "^0.16.2",
     "@reach/tooltip": "^0.16.2",
+    "@reach/visually-hidden": "^0.16.0",
     "@standardnotes/components": "1.7.14",
-    "@standardnotes/features": "1.36.3",
-    "@standardnotes/filepicker": "1.10.4",
-    "@standardnotes/settings": "1.13.2",
-    "@standardnotes/sncrypto-web": "1.8.1",
-    "@standardnotes/snjs": "2.93.3",
+    "@standardnotes/filepicker": "1.10.5",
+    "@standardnotes/sncrypto-web": "1.8.2",
+    "@standardnotes/snjs": "2.94.3",
+    "@standardnotes/stylekit": "5.21.3",
     "@zip.js/zip.js": "^2.4.7",
-    "mobx": "^6.5.0",
     "mobx-react-lite": "^3.3.0",
+    "mobx": "^6.5.0",
     "preact": "^10.6.6",
     "qrcode.react": "^2.0.0",
-    "react-dnd": "^15.1.1",
     "react-dnd-html5-backend": "^15.1.2",
-    "react-dnd-touch-backend": "^15.1.1"
+    "react-dnd-touch-backend": "^15.1.1",
+    "react-dnd": "^15.1.1"
   },
   "lint-staged": {
     "app/**/*.{js,ts,jsx,tsx}": "eslint --cache --fix",
diff --git a/yarn.lock b/yarn.lock
index 771c0a0db..b457e95f1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2388,132 +2388,122 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@standardnotes/auth@^3.18.3":
-  version "3.18.3"
-  resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.18.3.tgz#2c2aa19ad56fc5f3f286dbef56bd8496d1e5380f"
-  integrity sha512-crdpVHJpnY574IIwBM1QcqNMULyvQ8nOnkH4DhFNcfWF7R+A+S4lMg2KxN9bR+j2gM/WWhbfcU8owJrz1+vsqA==
+"@standardnotes/auth@^3.18.5":
+  version "3.18.5"
+  resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.18.5.tgz#11087e0bc31c42e489a7f546d317bbbcbd48d573"
+  integrity sha512-NSeU3A9iDyZFLLfv6jOyaweykMbjUUe0XoZo6lVifQucsRW0VJ4R6m3aeXqx6/zDwmHIBqVVzrX2bqQ7r2s9SA==
   dependencies:
-    "@standardnotes/common" "^1.19.1"
+    "@standardnotes/common" "^1.19.3"
     jsonwebtoken "^8.5.1"
 
-"@standardnotes/common@^1.19.1":
-  version "1.19.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/common/-/common-1.19.1.tgz#45f0837b40bc1c583c22552a53429fe26c5ef498"
-  integrity sha512-O114ZdOvur6U1mmiPfvEo/TZjKRxHWBsAAAn+XTtS70E+2VqgvCwgiYT6bG1oUcoyrIiCdRPPyiTC/UPF4gkXg==
+"@standardnotes/common@^1.19.3":
+  version "1.19.3"
+  resolved "https://registry.yarnpkg.com/@standardnotes/common/-/common-1.19.3.tgz#ae2ca493492eb5e0d9663abf736a9d7a26365c52"
+  integrity sha512-nMqH+grkIgnODr5EncbG9yHqIxSBHLVTiAb+NZ2EvkhLBiuVhP2UEDNs8KcZKfgNVGGDIHQbjEXZKGog9J6gZw==
 
 "@standardnotes/components@1.7.14":
   version "1.7.14"
   resolved "https://registry.yarnpkg.com/@standardnotes/components/-/components-1.7.14.tgz#ddd5b4d5787d3f90a4e1a88cfd95995f9267b1d1"
   integrity sha512-NDzP8/lmzgFBjxfmaE3OSOjPfozs3vednFfrjmjri5kCXlfClEISL6b/kh6B6wv/x9DIFveOsRj2Lrov+5IXdw==
 
-"@standardnotes/domain-events@^2.26.6":
-  version "2.26.6"
-  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.26.6.tgz#6d19099b147f60dfe69a458463aa81759846507a"
-  integrity sha512-CiF7MlFlZgwzMbOkcHGOy8FL1iGlSff9s7eUOlgOcYoidolFOF8HHJJn+d8+iwEvwANDwMJmrrGcFf5X9f0wzA==
+"@standardnotes/domain-events@^2.26.9":
+  version "2.26.9"
+  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.26.9.tgz#09d3ac547e263ff957a9a645a6c1f0039aa85ccd"
+  integrity sha512-iQCiCdLpMw3Yp3Z9q7GU9Z48tK2jAMI32VjsQtbyqOmjR+aVmo4e2oGyshm/2+5ymKUiG7xlx3Hl63RlQbGf1A==
   dependencies:
-    "@standardnotes/auth" "^3.18.3"
-    "@standardnotes/features" "^1.36.3"
+    "@standardnotes/auth" "^3.18.5"
+    "@standardnotes/features" "^1.37.2"
 
-"@standardnotes/encryption@^1.1.3":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.1.3.tgz#7554a6268d8f274c59bb9dd55117ba7dffefb5cd"
-  integrity sha512-0oelxlDMCR8I6l33R/CsdU9z25R+kCvYLt0FbypPCRaDOMTcjITR1R+VsnKznw/GbcMxcD1TTnDGRRQyLVmDmw==
+"@standardnotes/encryption@^1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.2.2.tgz#27325dff46875871c26e208d77651532573a7afc"
+  integrity sha512-B9RjWltLuURg6qUdFTQZeQRKX2DoP6VL/6kS2Ay3ZkrEEcCNvxeuqr9yvXbZn2kKS0dUDfzfbYWOvoVxyyUwYA==
   dependencies:
-    "@standardnotes/models" "^1.1.1"
-    "@standardnotes/payloads" "^1.5.1"
-    "@standardnotes/responses" "^1.5.1"
-    "@standardnotes/services" "^1.7.1"
+    "@standardnotes/models" "^1.2.2"
+    "@standardnotes/responses" "^1.6.2"
+    "@standardnotes/services" "^1.8.2"
 
-"@standardnotes/features@1.36.3", "@standardnotes/features@^1.36.3":
-  version "1.36.3"
-  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.36.3.tgz#c3a2c2451fe2f036c5c94e51e86c804872028763"
-  integrity sha512-/38iTb22NULjtL8MitUeqsZdGwZgyP6t8p2LPc5sLFmeyU/CgZ22sh55GKAW5P/fm/oWyBqK6zjsVvtIH6AQug==
+"@standardnotes/features@^1.37.2":
+  version "1.37.2"
+  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.37.2.tgz#bedae2935a5659aa1fd30849e47ed167d45a7d3a"
+  integrity sha512-kNUCRMuLPmjjxWvE/OjHAewGZzv5/NAsqw/cHj+O4sbhRBWSv1dq+UzLzUxnj2kUsKObPjKqYeqo6WrXOnl3BQ==
   dependencies:
-    "@standardnotes/auth" "^3.18.3"
-    "@standardnotes/common" "^1.19.1"
+    "@standardnotes/auth" "^3.18.5"
+    "@standardnotes/common" "^1.19.3"
 
-"@standardnotes/filepicker@1.10.4":
-  version "1.10.4"
-  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.10.4.tgz#a69822381dcb7910ce7ce9040bb0466b3b950985"
-  integrity sha512-BnfKi+HFXX1e/fprZ2awvcrBSQkVZs1VN/hk7e9hH8qhQtbktfURKEEyOZoQnDu14BMa1tSdAVTjhXpxlbRRcA==
+"@standardnotes/filepicker@1.10.5":
+  version "1.10.5"
+  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.10.5.tgz#28c7cc68cb3337940a52e19b1dea76af343f2852"
+  integrity sha512-Tl9mCW/qAzupOtQAYlbPHgZU16ljtRGV0awOHT7+uulPYoyKJJ4cqlKRzFaaONTAN6GpICEeSqidcB/lb5e5uQ==
 
-"@standardnotes/models@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.1.1.tgz#1a54253ded5c759ac8eeb1cb2878da73da2bd8a3"
-  integrity sha512-tl6Yjv/hlPd1xARF4o8vHNPyfoV0d5V/IkdlPA0I2GQh7pLPxHirwD5E2+rRnv59HPiV4ws+XwLtnnPZaZ38bg==
+"@standardnotes/models@^1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.2.2.tgz#d67086319ad12ec5f6d267f77d353a0bd3740983"
+  integrity sha512-o762wf4pOobk4GcHJR0+lFVJeP/TifiP4OCM9ko23wkE6d6tWpM5SyvOUyZga2NNp5He8Pkm06Oo1ObxBYaWIw==
   dependencies:
-    "@standardnotes/payloads" "^1.5.1"
+    "@standardnotes/features" "^1.37.2"
+    "@standardnotes/responses" "^1.6.2"
+    "@standardnotes/utils" "^1.4.8"
 
-"@standardnotes/payloads@^1.5.1":
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/payloads/-/payloads-1.5.1.tgz#f0cbe309721a14811d4b11cfce9a66d6fb9c2171"
-  integrity sha512-wqL31WPGFAQPMXICCf5Kxh3UOiaGbMu6ZE8cYmuZsMhti2h8FgIE04rcrzAh0/dSYtufrfHUnjhMmkPXZQAV2g==
+"@standardnotes/responses@^1.6.2":
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.6.2.tgz#665702c01bd25f10763ef0230fe9df775996c424"
+  integrity sha512-w/SNFITk7aipmN1nahH456xe/xKGPp+/dqpKF+LDoSl6C+UZ17NOtSVP/Q4nVIvGy57QOD8OvN7inCpSrLCEyw==
   dependencies:
-    "@standardnotes/common" "^1.19.1"
-    "@standardnotes/features" "^1.36.3"
-    "@standardnotes/utils" "^1.4.6"
+    "@standardnotes/auth" "^3.18.5"
+    "@standardnotes/common" "^1.19.3"
+    "@standardnotes/features" "^1.37.2"
 
-"@standardnotes/responses@1.5.1", "@standardnotes/responses@^1.5.1":
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.5.1.tgz#a88171e0834ad363ce2284256f8630f8adee4ae3"
-  integrity sha512-8BodIxtIfSG9IEzCSQy2dmB9RR1FeoKYBwOrO4MKyX1TpvVPlr0dtGUxWtbt20kI49FSLU9QDeWeexNiXcDSrA==
+"@standardnotes/services@^1.8.2":
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.8.2.tgz#3a95af1573636dc288dc4efd52de8568c2cd68fe"
+  integrity sha512-+iLVngtw0avyoUM4Sn0Kpmh99KTWYbhX/HiJLbnFoW5LJrqA2FarZRPUqYpiKuEcfcdZ4brmm5ipts45n1DXXw==
   dependencies:
-    "@standardnotes/auth" "^3.18.3"
-    "@standardnotes/common" "^1.19.1"
-    "@standardnotes/features" "^1.36.3"
-    "@standardnotes/payloads" "^1.5.1"
+    "@standardnotes/common" "^1.19.3"
+    "@standardnotes/models" "^1.2.2"
+    "@standardnotes/responses" "^1.6.2"
+    "@standardnotes/utils" "^1.4.8"
 
-"@standardnotes/services@1.7.1", "@standardnotes/services@^1.7.1":
-  version "1.7.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.7.1.tgz#7c3f8f379478dfeeec3b9c87868a380213947533"
-  integrity sha512-xW5C/nqUomwxnN2zSS22t845PPRceevUNqtwFtPzodeaDNZpCMwLvHPqJhbXW6cYuPeVbPGn4ify8EnrGqu+/w==
+"@standardnotes/settings@^1.13.3":
+  version "1.13.3"
+  resolved "https://registry.yarnpkg.com/@standardnotes/settings/-/settings-1.13.3.tgz#6f46927f5cb85e3070ccd2bc6a91deadf1b9ef9f"
+  integrity sha512-hLb5ba8qFgKdhSYqJLX+7L5K2ZPwoqGlMrDDQTph+rQe08FnDoupCzz+uFOO1EJITI3XzrbvSW79GQYV0/5AkA==
+
+"@standardnotes/sncrypto-common@^1.7.5":
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/@standardnotes/sncrypto-common/-/sncrypto-common-1.7.5.tgz#2c4ca3923970f5360f8ae01d40e2eaa957b75c12"
+  integrity sha512-VfGNDAlju4h7Ai7Z7shds41Lvl7JQruYc4pemkAzcmYgrXLHy/wHMUA0kanGTW7fVr3AYmbYCqO6lycldAmrwQ==
+
+"@standardnotes/sncrypto-web@1.8.2":
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/@standardnotes/sncrypto-web/-/sncrypto-web-1.8.2.tgz#cf60a2ad85240e3ef56ccd5d1b45c29d16300966"
+  integrity sha512-C/2EkZrYBKTgnW4uluhJ3+GOnbbOL6ixg/c9pa2LZ9zT1vBRaS3vFIHC5hIMwrOsPE1QmIaJyiGtdzMA7A3VMw==
   dependencies:
-    "@standardnotes/common" "^1.19.1"
-    "@standardnotes/models" "^1.1.1"
-    "@standardnotes/responses" "^1.5.1"
-    "@standardnotes/utils" "^1.4.6"
-
-"@standardnotes/settings@1.13.2", "@standardnotes/settings@^1.13.2":
-  version "1.13.2"
-  resolved "https://registry.yarnpkg.com/@standardnotes/settings/-/settings-1.13.2.tgz#32509823e9f1b885282d5f6e82a6fed5178e5ec2"
-  integrity sha512-kA2K2/xfS3dlPF//yy2GitH6bfFf4EmvNQ77OWMn1qZdLlTl4HTGps1Q5mX/BrLfC9HNutxqnLFr1N94vxdWlQ==
-
-"@standardnotes/sncrypto-common@^1.7.4":
-  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/@standardnotes/sncrypto-common/-/sncrypto-common-1.7.4.tgz#970fbe84edbdc9d632c8774ec201f1e140f693d6"
-  integrity sha512-6O4RjyfNyCFV32sYCO7jxDt/UelPfbvaMQXYPJ3F58r5gyFdc9K/PxjWmKhzRVxTprNLr+4uWbf1FUERTdTuhg==
-
-"@standardnotes/sncrypto-web@1.8.1":
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/sncrypto-web/-/sncrypto-web-1.8.1.tgz#4e8192be81c2b6da2d39d4119ea95ceeb24c49a0"
-  integrity sha512-lTuFu8WNmUh/9+OApgBj0IU55svXEK5gQRpE9Wdn49mzPZUQx7FrrkQ8piKDBrkpxFoaeQXXgNNWk3CwGQ8WCQ==
-  dependencies:
-    "@standardnotes/sncrypto-common" "^1.7.4"
+    "@standardnotes/sncrypto-common" "^1.7.5"
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.93.3":
-  version "2.93.3"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.93.3.tgz#528c257994b8602666af0d80930e55421d9d5946"
-  integrity sha512-XZS8vBDqc80lEYKndyNIiyZSPme1DU7H6XNCUBH5mt41CF8qvxv76eTFSxmi2oZNrNNujl/Ez1jb23F7oUEMrw==
+"@standardnotes/snjs@2.94.3":
+  version "2.94.3"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.94.3.tgz#93918769025f4883f80555df61c88a838de1c4c3"
+  integrity sha512-wfJg8n/p1QisPlxWSyW9dYqN79/Zr16lugryHG0Tc1vXRyLcDNbaYxvo5XR3gGjsml8zARn5NdXJEkBBdPN2xA==
   dependencies:
-    "@standardnotes/auth" "^3.18.3"
-    "@standardnotes/common" "^1.19.1"
-    "@standardnotes/domain-events" "^2.26.6"
-    "@standardnotes/encryption" "^1.1.3"
-    "@standardnotes/features" "^1.36.3"
-    "@standardnotes/models" "^1.1.1"
-    "@standardnotes/payloads" "^1.5.1"
-    "@standardnotes/responses" "^1.5.1"
-    "@standardnotes/services" "^1.7.1"
-    "@standardnotes/settings" "^1.13.2"
-    "@standardnotes/sncrypto-common" "^1.7.4"
-    "@standardnotes/utils" "^1.4.6"
+    "@standardnotes/auth" "^3.18.5"
+    "@standardnotes/common" "^1.19.3"
+    "@standardnotes/domain-events" "^2.26.9"
+    "@standardnotes/encryption" "^1.2.2"
+    "@standardnotes/features" "^1.37.2"
+    "@standardnotes/models" "^1.2.2"
+    "@standardnotes/responses" "^1.6.2"
+    "@standardnotes/services" "^1.8.2"
+    "@standardnotes/settings" "^1.13.3"
+    "@standardnotes/sncrypto-common" "^1.7.5"
+    "@standardnotes/utils" "^1.4.8"
 
-"@standardnotes/stylekit@5.20.0":
-  version "5.20.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.20.0.tgz#84ad262b39cbe307a9e06ffa8eb05119db8a7adb"
-  integrity sha512-R926S0NlzB97wq6PyX978s1g21KSymX3CjQCmbM3tfV7KFXfNjjDdWSTVetC8exZj/BPvsudfOtNA5bVsJ8RkA==
+"@standardnotes/stylekit@5.21.3":
+  version "5.21.3"
+  resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.21.3.tgz#32d136328e7ec04f983fe635ec507a05084f3aac"
+  integrity sha512-0ILhE/xtuGBbBuMRurdWDuHrtMvIoJoMwu/2wp+2WNlYzWbSzq/TQ3MYYBUUS76K/nerxJwr7kBtZeJpCdWccg==
   dependencies:
     "@nanostores/preact" "^0.1.3"
     "@reach/listbox" "^0.16.2"
@@ -2524,12 +2514,12 @@
     nanostores "^0.5.10"
     prop-types "^15.8.1"
 
-"@standardnotes/utils@^1.4.6":
-  version "1.4.6"
-  resolved "https://registry.yarnpkg.com/@standardnotes/utils/-/utils-1.4.6.tgz#19fadae46b594e301731989a836e1e9025ec4749"
-  integrity sha512-8k/ucqtfZd/tl7zBA5E988Kbo+9RiGq70ZNiXjvGhud8hX2JUfUtVqnpjTCIEChKyJhOJR3uVQZBHq9H9S0+lg==
+"@standardnotes/utils@^1.4.8":
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/@standardnotes/utils/-/utils-1.4.8.tgz#4c984220903bf64733961c50633de6adf62cb78f"
+  integrity sha512-sGROUIUdDncSyAb4w1O+qadJOTp18+9XO8MX08jOEPEMTfmVNFV1xYu6ZWe/0Ae4wCghBr8XeCCfVeE1XNyjTg==
   dependencies:
-    "@standardnotes/common" "^1.19.1"
+    "@standardnotes/common" "^1.19.3"
     dompurify "^2.3.6"
     lodash "^4.17.21"
 

From c16f23a75fa82949fd87d2939cd2524e97259dc3 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 12 Apr 2022 00:05:08 +0530
Subject: [PATCH 012/102] feat: new lock screen and challenge modal design
 (#957)

---
 .../components/ApplicationView.tsx            |   2 +-
 app/assets/javascripts/components/Button.tsx  |   8 +-
 .../javascripts/components/ChallengeModal.tsx | 371 ------------------
 .../ChallengeModal/ChallengeModal.tsx         | 270 +++++++++++++
 .../ChallengeModal/ChallengePrompt.tsx        | 103 +++++
 .../javascripts/components/DecoratedInput.tsx |   2 +-
 .../components/DecoratedPasswordInput.tsx     |   2 +-
 .../javascripts/components/IconButton.tsx     |   1 +
 .../javascripts/components/Menu/Menu.tsx      |   3 +-
 app/assets/stylesheets/_modals.scss           |   6 +-
 app/assets/stylesheets/_reach-sub.scss        |   3 +
 app/assets/stylesheets/_sn.scss               |  48 ++-
 12 files changed, 434 insertions(+), 385 deletions(-)
 delete mode 100644 app/assets/javascripts/components/ChallengeModal.tsx
 create mode 100644 app/assets/javascripts/components/ChallengeModal/ChallengeModal.tsx
 create mode 100644 app/assets/javascripts/components/ChallengeModal/ChallengePrompt.tsx

diff --git a/app/assets/javascripts/components/ApplicationView.tsx b/app/assets/javascripts/components/ApplicationView.tsx
index 9f5191c1c..56c522bf0 100644
--- a/app/assets/javascripts/components/ApplicationView.tsx
+++ b/app/assets/javascripts/components/ApplicationView.tsx
@@ -17,7 +17,7 @@ import { NoteGroupView } from '@/components/NoteGroupView';
 import { Footer } from '@/components/Footer';
 import { SessionsModal } from '@/components/SessionsModal';
 import { PreferencesViewWrapper } from '@/components/Preferences/PreferencesViewWrapper';
-import { ChallengeModal } from '@/components/ChallengeModal';
+import { ChallengeModal } from '@/components/ChallengeModal/ChallengeModal';
 import { NotesContextMenu } from '@/components/NotesContextMenu';
 import { PurchaseFlowWrapper } from '@/components/PurchaseFlow/PurchaseFlowWrapper';
 import { render } from 'preact';
diff --git a/app/assets/javascripts/components/Button.tsx b/app/assets/javascripts/components/Button.tsx
index f91177d0b..1afc15904 100644
--- a/app/assets/javascripts/components/Button.tsx
+++ b/app/assets/javascripts/components/Button.tsx
@@ -22,8 +22,8 @@ const getClassName = (
 
   let focusHoverStates =
     variant === 'normal'
-      ? 'focus:bg-contrast hover:bg-contrast'
-      : 'hover:brightness-130 focus:brightness-130';
+      ? 'focus:bg-contrast focus:outline-none hover:bg-contrast'
+      : 'hover:brightness-130 focus:outline-none focus:brightness-130';
 
   if (danger) {
     colors =
@@ -39,8 +39,8 @@ const getClassName = (
         : 'bg-grey-2 color-info-contrast';
     focusHoverStates =
       variant === 'normal'
-        ? 'focus:bg-default hover:bg-default'
-        : 'focus:brightness-default hover:brightness-default';
+        ? 'focus:bg-default focus:outline-none hover:bg-default'
+        : 'focus:brightness-default focus:outline-none hover:brightness-default';
   }
 
   return `${baseClass} ${colors} ${borders} ${focusHoverStates} ${cursor}`;
diff --git a/app/assets/javascripts/components/ChallengeModal.tsx b/app/assets/javascripts/components/ChallengeModal.tsx
deleted file mode 100644
index ec98b8426..000000000
--- a/app/assets/javascripts/components/ChallengeModal.tsx
+++ /dev/null
@@ -1,371 +0,0 @@
-import { WebApplication } from '@/ui_models/application';
-import { Dialog } from '@reach/dialog';
-import {
-  ChallengeValue,
-  removeFromArray,
-  Challenge,
-  ChallengeReason,
-  ChallengePrompt,
-  ChallengeValidation,
-  ProtectionSessionDurations,
-} from '@standardnotes/snjs';
-import { confirmDialog } from '@/services/alertService';
-import { STRING_SIGN_OUT_CONFIRMATION } from '@/strings';
-import { createRef } from 'preact';
-import { PureComponent } from '@/components/Abstract/PureComponent';
-
-type InputValue = {
-  prompt: ChallengePrompt;
-  value: string | number | boolean;
-  invalid: boolean;
-};
-
-type Values = Record<number, InputValue>;
-
-type State = {
-  prompts: ChallengePrompt[];
-  values: Partial<Values>;
-  processing: boolean;
-  forgotPasscode: boolean;
-  showForgotPasscodeLink: boolean;
-  processingPrompts: ChallengePrompt[];
-  hasAccount: boolean;
-  protectedNoteAccessDuration: number;
-};
-
-type Props = {
-  challenge: Challenge;
-  application: WebApplication;
-  onDismiss: (challenge: Challenge) => void;
-};
-
-export class ChallengeModal extends PureComponent<Props, State> {
-  submitting = false;
-  protectionsSessionDurations = ProtectionSessionDurations;
-  protectionsSessionValidation = ChallengeValidation.ProtectionSessionDuration;
-  private initialFocusRef = createRef<HTMLInputElement>();
-
-  constructor(props: Props) {
-    super(props, props.application);
-
-    const values = {} as Values;
-    const prompts = this.props.challenge.prompts;
-    for (const prompt of prompts) {
-      values[prompt.id] = {
-        prompt,
-        value: prompt.initialValue ?? '',
-        invalid: false,
-      };
-    }
-    const showForgotPasscodeLink = [
-      ChallengeReason.ApplicationUnlock,
-      ChallengeReason.Migration,
-    ].includes(this.props.challenge.reason);
-    this.state = {
-      prompts,
-      values,
-      processing: false,
-      forgotPasscode: false,
-      showForgotPasscodeLink,
-      hasAccount: this.application.hasAccount(),
-      processingPrompts: [],
-      protectedNoteAccessDuration: ProtectionSessionDurations[0].valueInSeconds,
-    };
-  }
-
-  componentDidMount(): void {
-    super.componentDidMount();
-
-    this.application.addChallengeObserver(this.props.challenge, {
-      onValidValue: (value) => {
-        this.state.values[value.prompt.id]!.invalid = false;
-        removeFromArray(this.state.processingPrompts, value.prompt);
-        this.reloadProcessingStatus();
-        this.afterStateChange();
-      },
-      onInvalidValue: (value) => {
-        this.state.values[value.prompt.id]!.invalid = true;
-        /** If custom validation, treat all values together and not individually */
-        if (!value.prompt.validates) {
-          this.setState({ processingPrompts: [], processing: false });
-        } else {
-          removeFromArray(this.state.processingPrompts, value.prompt);
-          this.reloadProcessingStatus();
-        }
-        this.afterStateChange();
-      },
-      onComplete: () => {
-        this.dismiss();
-      },
-      onCancel: () => {
-        this.dismiss();
-      },
-    });
-  }
-
-  deinit() {
-    (this.application as unknown) = undefined;
-    (this.props.challenge as unknown) = undefined;
-    super.deinit();
-  }
-
-  reloadProcessingStatus() {
-    return this.setState({
-      processing: this.state.processingPrompts.length > 0,
-    });
-  }
-
-  destroyLocalData = async () => {
-    if (
-      await confirmDialog({
-        text: STRING_SIGN_OUT_CONFIRMATION,
-        confirmButtonStyle: 'danger',
-      })
-    ) {
-      this.dismiss();
-      this.application.user.signOut();
-    }
-  };
-
-  cancel = () => {
-    if (this.props.challenge.cancelable) {
-      this.application.cancelChallenge(this.props.challenge);
-    }
-  };
-
-  onForgotPasscodeClick = () => {
-    this.setState({
-      forgotPasscode: true,
-    });
-  };
-
-  onTextValueChange = (prompt: ChallengePrompt) => {
-    const values = this.state.values;
-    values[prompt.id]!.invalid = false;
-    this.setState({ values });
-  };
-
-  onNumberValueChange(prompt: ChallengePrompt, value: number) {
-    const values = this.state.values;
-    values[prompt.id]!.invalid = false;
-    values[prompt.id]!.value = value;
-    this.setState({ values });
-  }
-
-  validate() {
-    let failed = 0;
-    for (const prompt of this.state.prompts) {
-      const value = this.state.values[prompt.id]!;
-      if (typeof value.value === 'string' && value.value.length === 0) {
-        this.state.values[prompt.id]!.invalid = true;
-        failed++;
-      }
-    }
-    return failed === 0;
-  }
-
-  submit = async () => {
-    if (!this.validate()) {
-      return;
-    }
-    if (this.submitting || this.state.processing) {
-      return;
-    }
-    this.submitting = true;
-    await this.setState({ processing: true });
-    const values: ChallengeValue[] = [];
-    for (const inputValue of Object.values(this.state.values)) {
-      const rawValue = inputValue!.value;
-      const value = new ChallengeValue(inputValue!.prompt, rawValue);
-      values.push(value);
-    }
-    const processingPrompts = values.map((v) => v.prompt);
-    await this.setState({
-      processingPrompts: processingPrompts,
-      processing: processingPrompts.length > 0,
-    });
-    /**
-     * Unfortunately neccessary to wait 50ms so that the above setState call completely
-     * updates the UI to change processing state, before we enter into UI blocking operation
-     * (crypto key generation)
-     */
-    setTimeout(() => {
-      if (values.length > 0) {
-        this.application.submitValuesForChallenge(this.props.challenge, values);
-      } else {
-        this.setState({ processing: false });
-      }
-      this.submitting = false;
-    }, 50);
-  };
-
-  afterStateChange() {
-    this.render();
-  }
-
-  dismiss = () => {
-    this.props.onDismiss(this.props.challenge);
-  };
-
-  private renderChallengePrompts() {
-    return this.state.prompts.map((prompt, index) => (
-      <>
-        {/** ProtectionSessionDuration can't just be an input field */}
-        {prompt.validation === ChallengeValidation.ProtectionSessionDuration ? (
-          <div key={prompt.id} className="sk-panel-row">
-            <div className="sk-horizontal-group mt-3">
-              <div className="sk-p sk-bold">Allow protected access for</div>
-              {ProtectionSessionDurations.map((option) => (
-                <a
-                  className={
-                    'sk-a info ' +
-                    (option.valueInSeconds ===
-                    this.state.values[prompt.id]!.value
-                      ? 'boxed'
-                      : '')
-                  }
-                  onClick={(event) => {
-                    event.preventDefault();
-                    this.onNumberValueChange(prompt, option.valueInSeconds);
-                  }}
-                >
-                  {option.label}
-                </a>
-              ))}
-            </div>
-          </div>
-        ) : (
-          <div key={prompt.id} className="sk-panel-row">
-            <form
-              className="w-full"
-              onSubmit={(event) => {
-                event.preventDefault();
-                this.submit();
-              }}
-            >
-              <input
-                className="sk-input contrast"
-                value={this.state.values[prompt.id]!.value as string | number}
-                onChange={(event) => {
-                  const value = (event.target as HTMLInputElement).value;
-                  this.state.values[prompt.id]!.value = value;
-                  this.onTextValueChange(prompt);
-                }}
-                ref={index === 0 ? this.initialFocusRef : undefined}
-                placeholder={prompt.title}
-                type={prompt.secureTextEntry ? 'password' : 'text'}
-              />
-            </form>
-          </div>
-        )}
-
-        {this.state.values[prompt.id]!.invalid && (
-          <div className="sk-panel-row centered">
-            <label className="sk-label danger">
-              Invalid authentication. Please try again.
-            </label>
-          </div>
-        )}
-      </>
-    ));
-  }
-
-  render() {
-    if (!this.state.prompts) {
-      return <></>;
-    }
-    return (
-      <Dialog
-        initialFocusRef={this.initialFocusRef}
-        onDismiss={() => {
-          if (this.props.challenge.cancelable) {
-            this.cancel();
-          }
-        }}
-      >
-        <div className="challenge-modal sk-modal-content">
-          <div className="sn-component">
-            <div className="sk-panel">
-              <div className="sk-panel-header">
-                <div className="sk-panel-header-title">
-                  {this.props.challenge.modalTitle}
-                </div>
-              </div>
-              <div className="sk-panel-content">
-                <div className="sk-panel-section">
-                  <div className="sk-p sk-panel-row centered prompt">
-                    <strong>{this.props.challenge.heading}</strong>
-                  </div>
-                  {this.props.challenge.subheading && (
-                    <div className="sk-p sk-panel-row centered subprompt">
-                      {this.props.challenge.subheading}
-                    </div>
-                  )}
-                </div>
-
-                <div className="sk-panel-section">
-                  {this.renderChallengePrompts()}
-                </div>
-              </div>
-              <div className="sk-panel-footer extra-padding">
-                <button
-                  className={
-                    'sn-button w-full ' +
-                    (this.state.processing ? 'neutral' : 'info')
-                  }
-                  disabled={this.state.processing}
-                  onClick={() => this.submit()}
-                >
-                  {this.state.processing ? 'Generating Keys…' : 'Submit'}
-                </button>
-                {this.props.challenge.cancelable && (
-                  <>
-                    <div className="sk-panel-row"></div>
-                    <a
-                      className="sk-panel-row sk-a info centered text-sm"
-                      onClick={() => this.cancel()}
-                    >
-                      Cancel
-                    </a>
-                  </>
-                )}
-              </div>
-              {this.state.showForgotPasscodeLink && (
-                <div className="sk-panel-footer">
-                  {this.state.forgotPasscode ? (
-                    <>
-                      <p className="sk-panel-row sk-p text-center">
-                        {this.state.hasAccount
-                          ? 'If you forgot your application passcode, your ' +
-                            'only option is to clear your local data from this ' +
-                            'device and sign back in to your account.'
-                          : 'If you forgot your application passcode, your ' +
-                            'only option is to delete your data.'}
-                      </p>
-                      <a
-                        className="sk-panel-row sk-a danger centered"
-                        onClick={() => {
-                          this.destroyLocalData();
-                        }}
-                      >
-                        Delete Local Data
-                      </a>
-                    </>
-                  ) : (
-                    <a
-                      className="sk-panel-row sk-a info centered"
-                      onClick={() => this.onForgotPasscodeClick()}
-                    >
-                      Forgot your passcode?
-                    </a>
-                  )}
-                  <div className="sk-panel-row"></div>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      </Dialog>
-    );
-  }
-}
diff --git a/app/assets/javascripts/components/ChallengeModal/ChallengeModal.tsx b/app/assets/javascripts/components/ChallengeModal/ChallengeModal.tsx
new file mode 100644
index 000000000..4f006c1db
--- /dev/null
+++ b/app/assets/javascripts/components/ChallengeModal/ChallengeModal.tsx
@@ -0,0 +1,270 @@
+import { WebApplication } from '@/ui_models/application';
+import { DialogContent, DialogOverlay } from '@reach/dialog';
+import {
+  ButtonType,
+  Challenge,
+  ChallengePrompt,
+  ChallengeReason,
+  ChallengeValue,
+  removeFromArray,
+} from '@standardnotes/snjs';
+import { ProtectedIllustration } from '@standardnotes/stylekit';
+import { FunctionComponent } from 'preact';
+import { useCallback, useEffect, useState } from 'preact/hooks';
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+import { ChallengeModalPrompt } from './ChallengePrompt';
+
+type InputValue = {
+  prompt: ChallengePrompt;
+  value: string | number | boolean;
+  invalid: boolean;
+};
+
+export type ChallengeModalValues = Record<ChallengePrompt['id'], InputValue>;
+
+type Props = {
+  application: WebApplication;
+  challenge: Challenge;
+  onDismiss: (challenge: Challenge) => Promise<void>;
+};
+
+const validateValues = (
+  values: ChallengeModalValues,
+  prompts: ChallengePrompt[]
+): ChallengeModalValues | undefined => {
+  let hasInvalidValues = false;
+  const validatedValues = { ...values };
+  for (const prompt of prompts) {
+    const value = validatedValues[prompt.id];
+    if (typeof value.value === 'string' && value.value.length === 0) {
+      validatedValues[prompt.id].invalid = true;
+      hasInvalidValues = true;
+    }
+  }
+  if (!hasInvalidValues) {
+    return validatedValues;
+  }
+};
+
+export const ChallengeModal: FunctionComponent<Props> = ({
+  application,
+  challenge,
+  onDismiss,
+}) => {
+  const [values, setValues] = useState<ChallengeModalValues>(() => {
+    const values = {} as ChallengeModalValues;
+    for (const prompt of challenge.prompts) {
+      values[prompt.id] = {
+        prompt,
+        value: prompt.initialValue ?? '',
+        invalid: false,
+      };
+    }
+    return values;
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [, setProcessingPrompts] = useState<ChallengePrompt[]>([]);
+  const [bypassModalFocusLock, setBypassModalFocusLock] = useState(false);
+  const shouldShowForgotPasscode = [
+    ChallengeReason.ApplicationUnlock,
+    ChallengeReason.Migration,
+  ].includes(challenge.reason);
+
+  const submit = async () => {
+    const validatedValues = validateValues(values, challenge.prompts);
+    if (!validatedValues) {
+      return;
+    }
+    if (isSubmitting || isProcessing) {
+      return;
+    }
+    setIsSubmitting(true);
+    setIsProcessing(true);
+    const valuesToProcess: ChallengeValue[] = [];
+    for (const inputValue of Object.values(validatedValues)) {
+      const rawValue = inputValue.value;
+      const value = new ChallengeValue(inputValue.prompt, rawValue);
+      valuesToProcess.push(value);
+    }
+    const processingPrompts = valuesToProcess.map((v) => v.prompt);
+    setIsProcessing(processingPrompts.length > 0);
+    setProcessingPrompts(processingPrompts);
+    /**
+     * Unfortunately neccessary to wait 50ms so that the above setState call completely
+     * updates the UI to change processing state, before we enter into UI blocking operation
+     * (crypto key generation)
+     */
+    setTimeout(() => {
+      if (valuesToProcess.length > 0) {
+        application.submitValuesForChallenge(challenge, valuesToProcess);
+      } else {
+        setIsProcessing(false);
+      }
+      setIsSubmitting(false);
+    }, 50);
+  };
+
+  const onValueChange = useCallback(
+    (value: string | number, prompt: ChallengePrompt) => {
+      const newValues = { ...values };
+      newValues[prompt.id].invalid = false;
+      newValues[prompt.id].value = value;
+      setValues(newValues);
+    },
+    [values]
+  );
+
+  const closeModal = () => {
+    if (challenge.cancelable) {
+      onDismiss(challenge);
+    }
+  };
+
+  useEffect(() => {
+    const removeChallengeObserver = application.addChallengeObserver(
+      challenge,
+      {
+        onValidValue: (value) => {
+          setValues((values) => {
+            const newValues = { ...values };
+            newValues[value.prompt.id].invalid = false;
+            return newValues;
+          });
+          setProcessingPrompts((currentlyProcessingPrompts) => {
+            const processingPrompts = currentlyProcessingPrompts.slice();
+            removeFromArray(processingPrompts, value.prompt);
+            setIsProcessing(processingPrompts.length > 0);
+            return processingPrompts;
+          });
+        },
+        onInvalidValue: (value) => {
+          setValues((values) => {
+            const newValues = { ...values };
+            newValues[value.prompt.id].invalid = true;
+            return newValues;
+          });
+          /** If custom validation, treat all values together and not individually */
+          if (!value.prompt.validates) {
+            setProcessingPrompts([]);
+            setIsProcessing(false);
+          } else {
+            setProcessingPrompts((currentlyProcessingPrompts) => {
+              const processingPrompts = currentlyProcessingPrompts.slice();
+              removeFromArray(processingPrompts, value.prompt);
+              setIsProcessing(processingPrompts.length > 0);
+              return processingPrompts;
+            });
+          }
+        },
+        onComplete: () => {
+          onDismiss(challenge);
+        },
+        onCancel: () => {
+          onDismiss(challenge);
+        },
+      }
+    );
+
+    return () => {
+      removeChallengeObserver();
+    };
+  }, [application, challenge, onDismiss]);
+
+  if (!challenge.prompts) {
+    return null;
+  }
+
+  return (
+    <DialogOverlay
+      className={`sn-component ${
+        challenge.reason === ChallengeReason.ApplicationUnlock
+          ? 'challenge-modal-overlay'
+          : ''
+      }`}
+      onDismiss={closeModal}
+      dangerouslyBypassFocusLock={bypassModalFocusLock}
+    >
+      <DialogContent
+        className={`challenge-modal flex flex-col items-center bg-default p-8 rounded relative ${
+          challenge.reason !== ChallengeReason.ApplicationUnlock
+            ? 'shadow-overlay-light border-1 border-solid border-main'
+            : 'focus:shadow-none'
+        }`}
+      >
+        {challenge.cancelable && (
+          <button
+            onClick={closeModal}
+            aria-label="Close modal"
+            className="flex p-1 bg-transparent border-0 cursor-pointer absolute top-4 right-4"
+          >
+            <Icon type="close" className="color-neutral" />
+          </button>
+        )}
+        <ProtectedIllustration className="w-30 h-30 mb-4" />
+        <div className="font-bold text-lg text-center max-w-76 mb-3">
+          {challenge.heading}
+        </div>
+        <div className="text-center text-sm max-w-76 mb-4">
+          {challenge.subheading}
+        </div>
+        <form
+          className="flex flex-col items-center min-w-76 mb-4"
+          onSubmit={(e) => {
+            e.preventDefault();
+            submit();
+          }}
+        >
+          {challenge.prompts.map((prompt, index) => (
+            <ChallengeModalPrompt
+              key={prompt.id}
+              prompt={prompt}
+              values={values}
+              index={index}
+              onValueChange={onValueChange}
+              isInvalid={values[prompt.id].invalid}
+            />
+          ))}
+        </form>
+        <Button
+          variant="primary"
+          disabled={isProcessing}
+          className="min-w-76 mb-3.5"
+          onClick={() => {
+            submit();
+          }}
+        >
+          {isProcessing ? 'Generating Keys...' : 'Unlock'}
+        </Button>
+        {shouldShowForgotPasscode && (
+          <Button
+            className="flex items-center justify-center min-w-76"
+            onClick={() => {
+              setBypassModalFocusLock(true);
+              application.alertService
+                .confirm(
+                  'If you forgot your local passcode, your only option is to clear your local data from this device and sign back in to your account.',
+                  'Forgot passcode?',
+                  'Delete local data',
+                  ButtonType.Danger
+                )
+                .then((shouldDeleteLocalData) => {
+                  if (shouldDeleteLocalData) {
+                    application.user.signOut();
+                  }
+                })
+                .catch(console.error)
+                .finally(() => {
+                  setBypassModalFocusLock(false);
+                });
+            }}
+          >
+            <Icon type="help" className="mr-2 color-neutral" />
+            Forgot passcode?
+          </Button>
+        )}
+      </DialogContent>
+    </DialogOverlay>
+  );
+};
diff --git a/app/assets/javascripts/components/ChallengeModal/ChallengePrompt.tsx b/app/assets/javascripts/components/ChallengeModal/ChallengePrompt.tsx
new file mode 100644
index 000000000..24be05e2c
--- /dev/null
+++ b/app/assets/javascripts/components/ChallengeModal/ChallengePrompt.tsx
@@ -0,0 +1,103 @@
+import {
+  ChallengePrompt,
+  ChallengeValidation,
+  ProtectionSessionDurations,
+} from '@standardnotes/snjs';
+import { FunctionComponent } from 'preact';
+import { useEffect, useRef } from 'preact/hooks';
+import { DecoratedInput } from '../DecoratedInput';
+import { DecoratedPasswordInput } from '../DecoratedPasswordInput';
+import { ChallengeModalValues } from './ChallengeModal';
+
+type Props = {
+  prompt: ChallengePrompt;
+  values: ChallengeModalValues;
+  index: number;
+  onValueChange: (value: string | number, prompt: ChallengePrompt) => void;
+  isInvalid: boolean;
+};
+
+export const ChallengeModalPrompt: FunctionComponent<Props> = ({
+  prompt,
+  values,
+  index,
+  onValueChange,
+  isInvalid,
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (index === 0) {
+      inputRef.current?.focus();
+    }
+  }, [index]);
+
+  useEffect(() => {
+    if (isInvalid) {
+      inputRef.current?.focus();
+    }
+  }, [isInvalid]);
+
+  return (
+    <>
+      {prompt.validation === ChallengeValidation.ProtectionSessionDuration ? (
+        <div className="mt-3 min-w-76">
+          <div className="text-sm font-medium mb-2">
+            Allow protected access for
+          </div>
+          <div className="flex items-center justify-between bg-grey-4 rounded p-1">
+            {ProtectionSessionDurations.map((option) => {
+              const selected =
+                option.valueInSeconds === values[prompt.id].value;
+              return (
+                <label
+                  className={`cursor-pointer px-2 py-1.5 rounded ${
+                    selected
+                      ? 'bg-default color-foreground font-semibold'
+                      : 'color-grey-0 hover:bg-grey-3'
+                  }`}
+                >
+                  <input
+                    type="radio"
+                    name={`session-duration-${prompt.id}`}
+                    className={
+                      'appearance-none m-0 focus:shadow-none focus:outline-none'
+                    }
+                    style={{
+                      marginRight: 0,
+                    }}
+                    checked={selected}
+                    onChange={(event) => {
+                      event.preventDefault();
+                      onValueChange(option.valueInSeconds, prompt);
+                    }}
+                  />
+                  {option.label}
+                </label>
+              );
+            })}
+          </div>
+        </div>
+      ) : prompt.secureTextEntry ? (
+        <DecoratedPasswordInput
+          ref={inputRef}
+          placeholder={prompt.placeholder}
+          className={`w-full max-w-76 ${isInvalid ? 'border-danger' : ''}`}
+          onChange={(value) => onValueChange(value, prompt)}
+        />
+      ) : (
+        <DecoratedInput
+          ref={inputRef}
+          placeholder={prompt.placeholder}
+          className={`w-full max-w-76 ${isInvalid ? 'border-danger' : ''}`}
+          onChange={(value) => onValueChange(value, prompt)}
+        />
+      )}
+      {isInvalid && (
+        <div className="text-sm color-danger mt-2">
+          Invalid authentication, please try again.
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/app/assets/javascripts/components/DecoratedInput.tsx b/app/assets/javascripts/components/DecoratedInput.tsx
index 5307106c7..a2e23229c 100644
--- a/app/assets/javascripts/components/DecoratedInput.tsx
+++ b/app/assets/javascripts/components/DecoratedInput.tsx
@@ -23,7 +23,7 @@ const getClassNames = (
     container: `flex items-stretch position-relative bg-default border-1 border-solid border-main rounded focus-within:ring-info overflow-hidden ${
       !hasLeftDecorations && !hasRightDecorations ? 'px-2 py-1.5' : ''
     }`,
-    input: `w-full border-0 focus:shadow-none ${
+    input: `w-full border-0 focus:shadow-none bg-transparent ${
       !hasLeftDecorations && hasRightDecorations ? 'pl-2' : ''
     } ${hasRightDecorations ? 'pr-2' : ''}`,
     disabled: 'bg-grey-5 cursor-not-allowed',
diff --git a/app/assets/javascripts/components/DecoratedPasswordInput.tsx b/app/assets/javascripts/components/DecoratedPasswordInput.tsx
index 32e21a56a..22fdaf514 100644
--- a/app/assets/javascripts/components/DecoratedPasswordInput.tsx
+++ b/app/assets/javascripts/components/DecoratedPasswordInput.tsx
@@ -9,7 +9,7 @@ const Toggle: FunctionComponent<{
   setIsToggled: StateUpdater<boolean>;
 }> = ({ isToggled, setIsToggled }) => (
   <IconButton
-    className="w-5 h-5 justify-center sk-circle hover:bg-grey-4"
+    className="w-5 h-5 justify-center sk-circle hover:bg-grey-4 color-neutral"
     icon={isToggled ? 'eye-off' : 'eye'}
     iconClassName="sn-icon--small"
     title="Show/hide password"
diff --git a/app/assets/javascripts/components/IconButton.tsx b/app/assets/javascripts/components/IconButton.tsx
index c45233a99..6349be7bc 100644
--- a/app/assets/javascripts/components/IconButton.tsx
+++ b/app/assets/javascripts/components/IconButton.tsx
@@ -44,6 +44,7 @@ export const IconButton: FunctionComponent<Props> = ({
   const focusableClass = focusable ? '' : 'focus:shadow-none';
   return (
     <button
+      type="button"
       title={title}
       className={`no-border cursor-pointer bg-transparent flex flex-row items-center hover:brightness-130 p-0 ${focusableClass} ${className}`}
       onClick={click}
diff --git a/app/assets/javascripts/components/Menu/Menu.tsx b/app/assets/javascripts/components/Menu/Menu.tsx
index c217e5a0d..b7cb129a4 100644
--- a/app/assets/javascripts/components/Menu/Menu.tsx
+++ b/app/assets/javascripts/components/Menu/Menu.tsx
@@ -5,6 +5,7 @@ import {
   VNode,
   RefCallback,
   ComponentChild,
+  toChildArray,
 } from 'preact';
 import { useEffect, useRef } from 'preact/hooks';
 import { JSXInternal } from 'preact/src/jsx';
@@ -117,7 +118,7 @@ export const Menu: FunctionComponent<MenuProps> = ({
       style={style}
       aria-label={a11yLabel}
     >
-      {Array.isArray(children) ? children.map(mapMenuItems) : null}
+      {toChildArray(children).map(mapMenuItems)}
     </menu>
   );
 };
diff --git a/app/assets/stylesheets/_modals.scss b/app/assets/stylesheets/_modals.scss
index 4fbb05418..2730c6c41 100644
--- a/app/assets/stylesheets/_modals.scss
+++ b/app/assets/stylesheets/_modals.scss
@@ -12,8 +12,7 @@
 }
 
 .challenge-modal {
-  max-width: 480px;
-  min-width: 400px !important;
+  min-width: 0 !important;
 
   .prompt, .subprompt {
     text-align: center;
@@ -21,9 +20,6 @@
   .sk-panel .sk-panel-header {
     justify-content: center;
   }
-  input {
-    text-align: center;
-  }
 }
 
 #account-switcher {
diff --git a/app/assets/stylesheets/_reach-sub.scss b/app/assets/stylesheets/_reach-sub.scss
index 3d209c899..ec50ce6f1 100644
--- a/app/assets/stylesheets/_reach-sub.scss
+++ b/app/assets/stylesheets/_reach-sub.scss
@@ -17,6 +17,9 @@
   left: 0px;
   opacity: 0.75;
 }
+.challenge-modal-overlay::before {
+  background-color: var(--sn-stylekit-grey-5);
+}
 
 [data-reach-dialog-content] {
   width: auto;
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 266087998..38227287c 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -246,6 +246,10 @@
   margin-left: 0.75rem;
 }
 
+.sn-component .mr-0 {
+  margin-right: 0;
+}
+
 .mr-2\.5 {
   margin-right: 0.625rem;
 }
@@ -298,6 +302,10 @@
   margin-bottom: 0.5rem;
 }
 
+.mb-3\.5 {
+  margin-bottom: 0.75rem;
+}
+
 .max-w-40\% {
   max-width: 40%;
 }
@@ -314,10 +322,18 @@
   max-width: 80%;
 }
 
+.max-w-68 {
+  max-width: 17rem;
+}
+
 .max-w-72 {
   max-width: 18rem;
 }
 
+.max-w-76 {
+  max-width: 19rem;
+}
+
 .max-w-89 {
   max-width: 22.25rem;
 }
@@ -397,6 +413,10 @@
   min-width: 17.5rem;
 }
 
+.min-w-76 {
+  min-width: 19rem;
+}
+
 .min-w-24 {
   min-width: 6rem;
 }
@@ -457,7 +477,7 @@
   max-height: 27.5rem;
 }
 
-.border-danger {
+.sn-component .border-danger {
   border-color: var(--sn-stylekit-danger-color);
 }
 
@@ -501,6 +521,10 @@
   padding: 0.375rem;
 }
 
+.p-6 {
+  padding: 1.5rem;
+}
+
 .p-8 {
   padding: 2rem;
 }
@@ -610,6 +634,11 @@
   padding-bottom: 2.25rem;
 }
 
+.py-12 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -626,6 +655,10 @@
   position: sticky;
 }
 
+.top-4 {
+  top: 1rem;
+}
+
 .top-30\% {
   top: 30%;
 }
@@ -694,6 +727,10 @@
   right: 0.5rem;
 }
 
+.right-4 {
+  right: 1rem;
+}
+
 .-right-2 {
   right: -0.5rem;
 }
@@ -1054,6 +1091,10 @@
   vertical-align: middle;
 }
 
+.shadow-overlay-light {
+  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05);
+}
+
 .sn-component .focus\:brightness-default:focus {
   filter: brightness(100%);
 }
@@ -1062,6 +1103,11 @@
   filter: brightness(100%);
 }
 
+.appearance-none {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
 .sn-component .focus\:bg-default:focus {
   background-color: var(--sn-stylekit-background-color);
 }

From ff4debfeb8d8b60cb132d8eccb4cf385a527b001 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 12 Apr 2022 00:09:33 +0530
Subject: [PATCH 013/102] feat: show toast before applying system color scheme
 (#964)

---
 .../javascripts/services/themeManager.ts      | 117 ++++++++++++------
 1 file changed, 77 insertions(+), 40 deletions(-)

diff --git a/app/assets/javascripts/services/themeManager.ts b/app/assets/javascripts/services/themeManager.ts
index 68031c36b..0722391bb 100644
--- a/app/assets/javascripts/services/themeManager.ts
+++ b/app/assets/javascripts/services/themeManager.ts
@@ -13,8 +13,15 @@ import {
   CreateDecryptedLocalStorageContextPayload,
   InternalEventBus,
 } from '@standardnotes/snjs';
+import {
+  dismissToast,
+  ToastType,
+  addTimedToast,
+} from '@standardnotes/stylekit';
 
-const CACHED_THEMES_KEY = 'cachedThemes';
+const CachedThemesKey = 'cachedThemes';
+const TimeBeforeApplyingColorScheme = 5;
+const DefaultThemeIdentifier = 'Default';
 
 export class ThemeManager extends ApplicationService {
   private activeThemes: UuidString[] = [];
@@ -39,7 +46,7 @@ export class ThemeManager extends ApplicationService {
         this.deactivateAllThemes();
         this.activeThemes = [];
         this.application?.removeValue(
-          CACHED_THEMES_KEY,
+          CachedThemesKey,
           StorageValueModes.Nonwrapped
         );
         break;
@@ -71,19 +78,17 @@ export class ThemeManager extends ApplicationService {
       false
     );
 
-    if (useDeviceThemeSettings === this.lastUseDeviceThemeSettings) {
-      return;
+    if (useDeviceThemeSettings !== this.lastUseDeviceThemeSettings) {
+      this.lastUseDeviceThemeSettings = useDeviceThemeSettings;
     }
 
-    this.lastUseDeviceThemeSettings = useDeviceThemeSettings;
+    if (useDeviceThemeSettings) {
+      const prefersDarkColorScheme = window.matchMedia(
+        '(prefers-color-scheme: dark)'
+      );
 
-    const prefersDarkColorScheme = window.matchMedia(
-      '(prefers-color-scheme: dark)'
-    );
-    this.setThemeAsPerColorScheme(
-      useDeviceThemeSettings,
-      prefersDarkColorScheme.matches
-    );
+      this.setThemeAsPerColorScheme(prefersDarkColorScheme.matches);
+    }
   }
 
   get webApplication() {
@@ -141,37 +146,59 @@ export class ThemeManager extends ApplicationService {
   }
 
   private colorSchemeEventHandler(event: MediaQueryListEvent) {
-    this.setThemeAsPerColorScheme(
-      this.lastUseDeviceThemeSettings,
-      event.matches
+    this.setThemeAsPerColorScheme(event.matches);
+  }
+
+  private showColorSchemeToast(setThemeCallback: () => void) {
+    const [toastId, intervalId] = addTimedToast(
+      {
+        type: ToastType.Regular,
+        message: (timeRemaining) =>
+          `Applying system color scheme in ${timeRemaining}s...`,
+        actions: [
+          {
+            label: 'Keep current theme',
+            handler: () => {
+              dismissToast(toastId);
+              clearInterval(intervalId);
+            },
+          },
+          {
+            label: 'Apply now',
+            handler: () => {
+              dismissToast(toastId);
+              clearInterval(intervalId);
+              setThemeCallback();
+            },
+          },
+        ],
+      },
+      setThemeCallback,
+      TimeBeforeApplyingColorScheme
     );
   }
 
-  private setThemeAsPerColorScheme(
-    useDeviceThemeSettings: boolean,
-    prefersDarkColorScheme: boolean
-  ) {
-    if (useDeviceThemeSettings) {
-      const preference = prefersDarkColorScheme
-        ? PrefKey.AutoDarkThemeIdentifier
-        : PrefKey.AutoLightThemeIdentifier;
-      const themes = this.application.items.getDisplayableItems<SNTheme>(
-        ContentType.Theme
-      );
+  private setThemeAsPerColorScheme(prefersDarkColorScheme: boolean) {
+    const preference = prefersDarkColorScheme
+      ? PrefKey.AutoDarkThemeIdentifier
+      : PrefKey.AutoLightThemeIdentifier;
 
-      const enableDefaultTheme = () => {
-        const activeTheme = themes.find(
-          (theme) => theme.active && !theme.isLayerable()
-        );
-        if (activeTheme) this.application.mutator.toggleTheme(activeTheme);
-      };
+    const themes = this.application.items.getDisplayableItems(
+      ContentType.Theme
+    ) as SNTheme[];
 
-      const themeIdentifier = this.application.getPreference(
-        preference,
-        'Default'
-      ) as string;
-      if (themeIdentifier === 'Default') {
-        enableDefaultTheme();
+    const activeTheme = themes.find(
+      (theme) => theme.active && !theme.isLayerable()
+    );
+
+    const themeIdentifier = this.application.getPreference(
+      preference,
+      DefaultThemeIdentifier
+    ) as string;
+
+    const setTheme = () => {
+      if (themeIdentifier === DefaultThemeIdentifier && activeTheme) {
+        this.application.mutator.toggleTheme(activeTheme);
       } else {
         const theme = themes.find(
           (theme) => theme.package_info.identifier === themeIdentifier
@@ -180,6 +207,16 @@ export class ThemeManager extends ApplicationService {
           this.application.mutator.toggleTheme(theme);
         }
       }
+    };
+
+    const isPreferredThemeNotActive =
+      activeTheme?.identifier !== themeIdentifier;
+
+    const isDefaultThemePreferredAndNotActive =
+      themeIdentifier === DefaultThemeIdentifier && activeTheme;
+
+    if (isPreferredThemeNotActive || isDefaultThemePreferredAndNotActive) {
+      this.showColorSchemeToast(setTheme);
     }
   }
 
@@ -279,7 +316,7 @@ export class ThemeManager extends ApplicationService {
     });
 
     return this.application.setValue(
-      CACHED_THEMES_KEY,
+      CachedThemesKey,
       mapped,
       StorageValueModes.Nonwrapped
     );
@@ -287,7 +324,7 @@ export class ThemeManager extends ApplicationService {
 
   private async getCachedThemes() {
     const cachedThemes = (await this.application.getValue(
-      CACHED_THEMES_KEY,
+      CachedThemesKey,
       StorageValueModes.Nonwrapped
     )) as SNTheme[];
     if (cachedThemes) {

From 369ece1a505e1f81022efb9b504a18ad532a4cc4 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 12 Apr 2022 12:35:11 +0530
Subject: [PATCH 014/102] fix: decorated input text color (#968)

---
 app/assets/javascripts/components/DecoratedInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/components/DecoratedInput.tsx b/app/assets/javascripts/components/DecoratedInput.tsx
index a2e23229c..b8a73c689 100644
--- a/app/assets/javascripts/components/DecoratedInput.tsx
+++ b/app/assets/javascripts/components/DecoratedInput.tsx
@@ -23,7 +23,7 @@ const getClassNames = (
     container: `flex items-stretch position-relative bg-default border-1 border-solid border-main rounded focus-within:ring-info overflow-hidden ${
       !hasLeftDecorations && !hasRightDecorations ? 'px-2 py-1.5' : ''
     }`,
-    input: `w-full border-0 focus:shadow-none bg-transparent ${
+    input: `w-full border-0 focus:shadow-none bg-transparent color-text ${
       !hasLeftDecorations && hasRightDecorations ? 'pl-2' : ''
     } ${hasRightDecorations ? 'pr-2' : ''}`,
     disabled: 'bg-grey-5 cursor-not-allowed',

From dc9c1ea0fc7b2510e8567c93305ad769ee79c566 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Tue, 12 Apr 2022 09:29:43 -0500
Subject: [PATCH 015/102] chore: lint

---
 .../javascripts/services/desktopManager.ts       |  2 ++
 .../javascripts/ui_models/app_state/app_state.ts | 16 ++++++++--------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/services/desktopManager.ts b/app/assets/javascripts/services/desktopManager.ts
index 412cba298..cb3fb8127 100644
--- a/app/assets/javascripts/services/desktopManager.ts
+++ b/app/assets/javascripts/services/desktopManager.ts
@@ -44,6 +44,7 @@ export class DesktopManager
 
   async onAppEvent(eventName: ApplicationEvent) {
     super.onAppEvent(eventName);
+
     if (eventName === ApplicationEvent.LocalDataLoaded) {
       this.dataLoaded = true;
       this.bridge.onInitialDataLoad();
@@ -74,6 +75,7 @@ export class DesktopManager
     if (!this.isDesktop) {
       return;
     }
+
     Promise.all(
       components.map((component) => {
         return this.convertComponentForTransmission(component);
diff --git a/app/assets/javascripts/ui_models/app_state/app_state.ts b/app/assets/javascripts/ui_models/app_state/app_state.ts
index ac1e97623..c077e3852 100644
--- a/app/assets/javascripts/ui_models/app_state/app_state.ts
+++ b/app/assets/javascripts/ui_models/app_state/app_state.ts
@@ -357,20 +357,20 @@ export class AppState {
 
         const selectedTag = this.tags.selected;
 
+        const isBrowswingTrashedNotes =
+          selectedTag instanceof SmartView &&
+          selectedTag.uuid === SystemViewId.TrashedNotes;
+
+        const isBrowsingArchivedNotes =
+          selectedTag instanceof SmartView &&
+          selectedTag.uuid === SystemViewId.ArchivedNotes;
+
         for (const note of changedOrInserted) {
           const noteController = this.noteControllerForNote(note.uuid);
           if (!noteController) {
             continue;
           }
 
-          const isBrowswingTrashedNotes =
-            selectedTag instanceof SmartView &&
-            selectedTag.uuid === SystemViewId.TrashedNotes;
-
-          const isBrowsingArchivedNotes =
-            selectedTag instanceof SmartView &&
-            selectedTag.uuid === SystemViewId.ArchivedNotes;
-
           if (
             note.trashed &&
             !isBrowswingTrashedNotes &&

From 8e467f9e6d21231f27849e9dd40885900fdaaa07 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Wed, 13 Apr 2022 22:02:34 +0530
Subject: [PATCH 016/102] refactor: format and lint codebase (#971)

---
 .eslintrc                                     |   7 +-
 .prettierrc                                   |   3 +
 app/assets/javascripts/@types/modules.ts      |   2 +-
 .../javascripts/@types/qrcode.react.d.ts      |   2 +-
 app/assets/javascripts/App.tsx                |  79 ++
 .../Components/Abstract/PureComponent.tsx     | 135 +++
 .../AccountMenu/AdvancedOptions.tsx           | 115 +--
 .../AccountMenu/ConfirmPassword.tsx           | 119 ++-
 .../AccountMenu/CreateAccount.tsx             | 110 +--
 .../AccountMenu/GeneralAccountMenu.tsx        | 107 +--
 .../AccountMenu/SignIn.tsx                    | 148 +--
 .../AccountMenu/User.tsx                      |  27 +-
 .../WorkspaceSwitcher/WorkspaceMenuItem.tsx   |  48 +-
 .../WorkspaceSwitcherMenu.tsx                 |  64 ++
 .../WorkspaceSwitcherOption.tsx               |  60 +-
 .../AccountMenu/index.tsx                     | 117 +--
 .../ApplicationGroupView/index.tsx}           |  29 +-
 .../Components/ApplicationView/index.tsx      | 216 +++++
 .../AttachedFilesButton.tsx                   | 368 +++++++
 .../AttachedFilesPopover.tsx                  | 151 ++-
 .../AttachedFilesPopover/PopoverFileItem.tsx  |  81 +-
 .../PopoverFileItemAction.tsx                 |  31 +
 .../PopoverFileSubmenu.tsx                    | 112 +--
 .../Bubble/index.tsx}                         |  16 +-
 .../Button}/Button.tsx                        |  64 +-
 .../Button}/IconButton.tsx                    |  32 +-
 .../Components/Button/RoundIconButton.tsx     |  40 +
 .../ChallengeModal/ChallengeModal.tsx         | 248 +++--
 .../ChallengeModal/ChallengePrompt.tsx        |  59 +-
 .../ChangeEditor}/ChangeEditorButton.tsx      |  97 +-
 .../ChangeEditor}/ChangeEditorMenu.tsx        | 205 ++--
 .../ChangeEditor}/createEditorMenuGroups.ts   |  65 +-
 .../Checkbox/index.tsx}                       |  18 +-
 .../ComponentView/IsDeprecated.tsx            |  20 +-
 .../ComponentView/IsExpired.tsx               |  49 +-
 .../ComponentView/IssueOnLoading.tsx          |  19 +-
 .../ComponentView/OfflineRestricted.tsx       |  20 +-
 .../ComponentView/UrlMissing.tsx              |  18 +-
 .../Components/ComponentView/index.tsx        | 221 +++++
 .../Components/ConfirmSignoutModal/index.tsx  |  98 ++
 .../Dropdown/index.tsx}                       |  70 +-
 .../Files/FilePreviewInfoPanel.tsx            |  22 +-
 .../Files/FilePreviewModal.tsx                | 124 ++-
 .../Files/FilePreviewModalProvider.tsx        |  48 +
 .../Components/Files/isFilePreviewable.ts     |  12 +
 .../Footer/index.tsx}                         | 391 ++++----
 .../Icon.tsx => Components/Icon/index.tsx}    |  30 +-
 .../Components/Input/DecoratedInput.tsx       |  75 ++
 .../Components/Input/DecoratedInputProps.ts   |  15 +
 .../Input/DecoratedPasswordInput.tsx          |  42 +
 .../Input}/FloatingLabelInput.tsx             |  56 +-
 .../javascripts/Components/Input/Input.tsx    |  14 +
 .../{components => Components}/Menu/Menu.tsx  |  98 +-
 .../Menu/MenuItem.tsx                         | 113 +--
 .../MultipleSelectedNotes/index.tsx           |  36 +
 .../Components/Navigation/index.tsx           |  82 ++
 .../NoAccountWarning/index.tsx}               |  26 +-
 .../Components/NoteGroupView/index.tsx        |  57 ++
 .../NoteTags}/NoteTag.tsx                     | 111 ++-
 .../NoteTags}/NoteTagsContainer.tsx           |  24 +-
 .../NoteView/NoteView.test.ts                 | 144 ++-
 .../NoteView/NoteView.tsx                     | 903 ++++++++----------
 .../Components/NotesContextMenu/index.tsx     |  47 +
 .../NotesList}/NotesListItem.tsx              |  87 +-
 .../NotesList}/NotesListOptionsMenu.tsx       | 162 ++--
 .../Components/NotesList/index.tsx            | 104 ++
 .../Components/NotesOptions/AddTagOption.tsx  | 111 +++
 .../NotesOptions/ChangeEditorOption.tsx       | 108 +--
 .../NotesOptions/ListedActionsOption.tsx      | 200 ++--
 .../NotesOptions/NotesOptions.tsx             | 299 +++---
 .../NotesOptions}/NotesOptionsPanel.tsx       |  82 +-
 .../Components/NotesView/index.tsx            | 260 +++++
 .../Components/OtherSessionsSignOut/index.tsx |  70 ++
 .../Components/PanelResizer/index.tsx         | 326 +++++++
 .../PasswordWizard/index.tsx}                 | 217 ++---
 .../PermissionsModal/index.tsx}               |  49 +-
 .../Components/PinNoteButton/index.tsx        |  39 +
 .../Preferences/Panes/Account/Advanced.tsx    |  38 +
 .../Panes/Account}/Authentication.tsx         |  44 +-
 .../Account/ChangeEmail}/ChangeEmailForm.tsx  |  22 +-
 .../ChangeEmail/ChangeEmailSuccess.tsx        |  13 +
 .../Panes/Account/ChangeEmail/index.tsx       | 171 ++++
 .../Preferences/Panes/Account/Credentials.tsx |  75 ++
 .../Panes/Account/OfflineSubscription.tsx     | 128 +++
 .../Panes/Account}/SignOutView.tsx            |  58 +-
 .../Account/Subscription/NoSubscription.tsx   |  51 +
 .../Account/Subscription}/Subscription.tsx    |  36 +-
 .../Subscription/SubscriptionInformation.tsx  |  85 ++
 .../Preferences/Panes/Account/Sync.tsx        |  65 ++
 .../Preferences/Panes/Account/index.tsx       |  29 +
 .../Preferences/Panes/Appearance.tsx          | 169 ++++
 .../CloudBackups}/CloudBackupProvider.tsx     | 203 ++--
 .../Panes/Backups/CloudBackups}/index.tsx     | 127 ++-
 .../Panes/Backups}/DataBackups.tsx            | 170 ++--
 .../Panes/Backups}/EmailBackups.tsx           | 173 ++--
 .../Preferences/Panes/Backups/index.tsx       |  22 +
 .../Preferences/Panes}/CloudLink.tsx          |  55 +-
 .../Extensions}/ConfirmCustomExtension.tsx    |  22 +-
 .../Panes/Extensions/ExtensionItem.tsx        | 104 ++
 .../Extensions/ExtensionsLatestVersions.ts    |  42 +
 .../Panes/Extensions}/RenameExtension.tsx     |  47 +-
 .../Preferences/Panes/Extensions/index.tsx}   |  99 +-
 .../Preferences/Panes/General}/Defaults.tsx   | 155 ++-
 .../Preferences/Panes/General}/Labs.tsx       |  94 +-
 .../Preferences/Panes/General/Tools.tsx       |  62 ++
 .../Preferences/Panes/General/index.tsx       |  31 +
 .../Preferences/Panes}/HelpFeedback.tsx       |  55 +-
 .../Preferences/Panes/Listed/BlogItem.tsx     |  48 +
 .../Preferences/Panes/Listed/index.tsx}       |  82 +-
 .../Preferences/Panes/Security/Encryption.tsx |  72 ++
 .../Panes/Security}/PasscodeLock.tsx          | 248 ++---
 .../Preferences/Panes/Security/Privacy.tsx    | 146 +++
 .../Panes/Security/Protections.tsx            | 103 ++
 .../Preferences/Panes/Security/index.tsx      |  25 +
 .../Panes/TwoFactorAuth}/AuthAppInfoPopup.tsx |  55 +-
 .../Panes/TwoFactorAuth/Bullet.tsx            |   5 +
 .../Panes/TwoFactorAuth/CopyButton.tsx        |  21 +
 .../Panes/TwoFactorAuth/MfaProps.ts           |   6 +
 .../Panes/TwoFactorAuth}/SaveSecretKey.tsx    |  35 +-
 .../Panes/TwoFactorAuth}/ScanQRCode.tsx       |  28 +-
 .../TwoFactorAuth}/TwoFactorActivation.ts     |  82 +-
 .../TwoFactorAuth/TwoFactorActivationView.tsx |  22 +
 .../Panes/TwoFactorAuth}/TwoFactorAuth.ts     | 107 +--
 .../Panes/TwoFactorAuth/TwoFactorAuthView.tsx |  77 ++
 .../Panes/TwoFactorAuth}/TwoFactorSuccess.tsx |  23 +-
 .../Panes/TwoFactorAuth}/Verification.tsx     |  46 +-
 .../TwoFactorAuth/download-secret-key.tsx     |  13 +
 .../Preferences/Panes/TwoFactorAuth/index.tsx |  11 +
 .../Components/Preferences/Panes/index.ts     |   5 +
 .../PreferencesComponents}/Content.tsx        |  32 +-
 .../PreferencesComponents/MenuItem.tsx        |  24 +
 .../PreferencesGroup.tsx                      |  16 +-
 .../PreferencesPane.tsx                       |   4 +-
 .../PreferencesSegment.tsx                    |   8 +
 .../PreferencesComponents/index.ts            |   5 +
 .../Preferences/PreferencesMenu.ts            |  67 +-
 .../Preferences/PreferencesMenuView.tsx       |  12 +-
 .../Preferences/PreferencesView.tsx           | 116 +++
 .../Preferences/PreferencesViewWrapper.tsx    |  25 +-
 .../Preferences/Providers/MfaProvider.ts      |  13 +
 .../Preferences/Providers/UserProvider.ts     |   3 +
 .../Components/Preferences/Providers/index.ts |   2 +
 .../PremiumFeaturesModal/index.tsx}           |  61 +-
 .../ProtectedNoteOverlay/index.tsx}           |  27 +-
 .../PurchaseFlow/Panes/CreateAccount.tsx      | 206 ++++
 .../Components/PurchaseFlow/Panes/SignIn.tsx  | 167 ++++
 .../PurchaseFlow/PurchaseFlowView.tsx         |  43 +-
 .../PurchaseFlow/PurchaseFlowWrapper.tsx      |  48 +
 .../QuickSettingsMenu/EventHandlers.ts}       |  62 +-
 .../QuickSettingsMenu/FocusModeSwitch.tsx     |  47 +-
 .../Components/QuickSettingsMenu/ThemeItem.ts |   7 +
 .../QuickSettingsMenu/ThemesMenuButton.tsx    |  74 +-
 .../QuickSettingsMenu/index.tsx}              | 287 +++---
 .../HistoryListContainer.tsx                  | 176 ++--
 .../RevisionHistoryModal/HistoryListItem.tsx  |  18 +-
 .../LegacyHistoryList.tsx                     |  69 +-
 .../RemoteHistoryList.tsx                     |  94 ++
 .../RevisionContentLocked.tsx                 |  45 +-
 .../RevisionHistoryModalWrapper.tsx           | 248 +++--
 .../SelectedRevisionContent.tsx               |  75 ++
 .../SessionHistoryList.tsx                    |  78 +-
 .../RevisionHistoryModal/utils.ts             | 102 +-
 .../SearchOptions/index.tsx}                  |  25 +-
 .../SessionsModal/index.tsx}                  | 160 ++--
 .../Shared/AccordionItem.tsx                  |  30 +-
 .../Shared/HorizontalSeparator.tsx            |  14 +-
 .../Shared/ModalDialog.tsx                    |  40 +-
 .../Switch/index.tsx}                         |  48 +-
 .../SyncResolutionMenu/index.tsx}             |  44 +-
 .../TagAutocomplete/AutocompleteTagHint.tsx   |  72 ++
 .../TagAutocomplete/AutocompleteTagInput.tsx  | 146 +++
 .../TagAutocomplete/AutocompleteTagResult.tsx | 104 ++
 .../javascripts/Components/Tags/DragNDrop.ts  |   9 +
 .../Components/Tags/RootTagDropZone.tsx       |  46 +
 .../Components/Tags/SmartViewsList.tsx        |  27 +
 .../Components/Tags/SmartViewsListItem.tsx    | 153 +++
 .../Components/Tags/SmartViewsSection.tsx     |  16 +
 .../Components/Tags/TagContextMenu.tsx        | 110 +++
 .../Tags/TagsList.tsx                         |  55 +-
 .../Tags/TagsListItem.tsx                     | 229 +++--
 .../Components/Tags/TagsSection.tsx           |  66 ++
 .../Components/Tags/TagsSectionAddButton.tsx  |  22 +
 .../Components/Tags/TagsSectionTitle.tsx      |  55 ++
 .../javascripts/Components/TitleBar/Title.tsx |   5 +
 .../Components/TitleBar/TitleBar.tsx          |   5 +
 app/assets/javascripts/Constants.ts           |  18 +
 app/assets/javascripts/Crypto.ts              |   3 +
 .../javascripts/{database.ts => Database.ts}  | 215 ++---
 .../{element_ids.ts => ElementIDs.ts}         |   2 +-
 app/assets/javascripts/{enums.ts => Enums.ts} |   0
 .../javascripts/Hooks/useBeforeUnload.tsx     |  11 +
 .../javascripts/Hooks/useCloseOnBlur.ts       |  24 +
 .../Hooks/useCloseOnClickOutside.ts           |  29 +
 .../Hooks/useListKeyboardNavigation.ts        |  96 ++
 .../javascripts/Hooks/usePremiumModal.tsx     |  61 ++
 .../AlertService.ts}                          |  57 +-
 .../javascripts/Services/ArchiveManager.ts    | 159 +++
 .../AutolockService.ts}                       |  84 +-
 app/assets/javascripts/Services/Bridge.ts     |  37 +
 .../BrowserBridge.ts}                         |  19 +-
 .../DesktopManager.ts}                        | 118 +--
 .../ioService.ts => Services/IOService.ts}    | 172 ++--
 .../LocalStorage.ts}                          |  18 +-
 .../javascripts/Services/StatusManager.ts     |  30 +
 .../javascripts/Services/ThemeManager.ts      | 318 ++++++
 ...tartApplication.ts => StartApplication.ts} |   6 +-
 .../javascripts/{strings.ts => Strings.ts}    | 119 ++-
 app/assets/javascripts/Types.ts               |  12 +
 .../hoist-non-react-statics.d.ts              |  66 +-
 .../AppState/AccountMenuState.ts}             | 175 ++--
 .../UIModels/AppState/ActionsMenuState.ts     |  22 +
 .../javascripts/UIModels/AppState/AppState.ts | 429 +++++++++
 .../UIModels/AppState/FeaturesState.ts        |  87 ++
 .../UIModels/AppState/FilesState.ts           | 169 ++++
 .../AppState/NoAccountWarningState.ts}        |  34 +-
 .../AppState/NoteTagsState.ts}                | 186 ++--
 .../AppState/NotesState.ts}                   | 375 ++++----
 .../AppState/NotesViewState.ts}               | 507 +++++-----
 .../AppState/PreferencesState.ts}             |  28 +-
 .../AppState/PurchaseFlowState.ts}            |  28 +-
 .../AppState/QuickSettingsState.ts}           |  38 +-
 .../AppState/SearchOptionsState.ts}           |  50 +-
 .../AppState/SubscriptionState.ts}            |  81 +-
 .../UIModels/AppState/SyncState.ts            |  33 +
 .../AppState/TagsState.ts}                    | 459 ++++-----
 .../javascripts/UIModels/AppState/index.ts    |   1 +
 .../javascripts/UIModels/Application.ts       | 155 +++
 .../javascripts/UIModels/ApplicationGroup.ts  |  75 ++
 .../CalculateDifferenceBetweenDatesInDays.ts  |  19 +
 .../Utils/CalculateSubmenuStyle.tsx           |  64 ++
 .../Utils/ConcatenateUint8Arrays.ts           |  12 +
 .../{utils/isMobile.ts => Utils/IsMobile.ts}  |  16 +-
 .../javascripts/Utils/ManageSubscription.ts   |  13 +
 app/assets/javascripts/Utils/SortThemes.ts    |  14 +
 .../javascripts/Utils/StringUtils.spec.ts     |  61 ++
 app/assets/javascripts/Utils/StringUtils.ts   |  29 +
 .../{utils/utils.ts => Utils/Utils.ts}        | 140 ++-
 app/assets/javascripts/Utils/index.ts         |   5 +
 app/assets/javascripts/Version.ts             |   8 +
 ...ice_interface.ts => WebDeviceInterface.ts} | 118 +--
 .../__mocks__/@standardnotes/snjs.js          |   4 +-
 app/assets/javascripts/app.tsx                |  79 --
 .../components/Abstract/PureComponent.tsx     | 140 ---
 .../WorkspaceSwitcherMenu.tsx                 |  69 --
 .../components/ApplicationView.tsx            | 250 -----
 .../AttachedFilesButton.tsx                   | 401 --------
 .../PopoverFileItemAction.tsx                 |  32 -
 .../components/AutocompleteTagHint.tsx        |  81 --
 .../components/AutocompleteTagInput.tsx       | 160 ----
 .../components/AutocompleteTagResult.tsx      | 115 ---
 .../components/ComponentView/index.tsx        | 250 -----
 .../components/ConfirmSignoutModal.tsx        | 114 ---
 .../components/ConfirmationDialog.tsx         |  35 -
 .../javascripts/components/DecoratedInput.tsx |  98 --
 .../components/DecoratedPasswordInput.tsx     |  42 -
 .../Files/FilePreviewModalProvider.tsx        |  53 -
 .../components/Files/isFilePreviewable.ts     |  12 -
 app/assets/javascripts/components/Input.tsx   |  22 -
 app/assets/javascripts/components/MenuRow.tsx | 115 ---
 .../components/MultipleSelectedNotes.tsx      |  40 -
 .../javascripts/components/Navigation.tsx     |  89 --
 .../javascripts/components/NoteGroupView.tsx  |  70 --
 .../components/NotesContextMenu.tsx           |  53 -
 .../javascripts/components/NotesList.tsx      | 118 ---
 .../components/NotesOptions/AddTagOption.tsx  | 127 ---
 .../javascripts/components/NotesView.tsx      | 294 ------
 .../components/OtherSessionsSignOut.tsx       |  79 --
 .../javascripts/components/PanelResizer.tsx   | 340 -------
 .../javascripts/components/PinNoteButton.tsx  |  41 -
 .../Preferences/PreferencesView.tsx           | 130 ---
 .../Preferences/components/MenuItem.tsx       |  31 -
 .../components/PreferencesSegment.tsx         |   9 -
 .../Preferences/components/index.ts           |   5 -
 .../Preferences/panes/AccountPreferences.tsx  |  33 -
 .../Preferences/panes/Appearance.tsx          | 201 ----
 .../components/Preferences/panes/Backups.tsx  |  23 -
 .../components/Preferences/panes/General.tsx  |  29 -
 .../components/Preferences/panes/Security.tsx |  26 -
 .../Preferences/panes/account/Advanced.tsx    |  44 -
 .../Preferences/panes/account/Credentials.tsx |  81 --
 .../Preferences/panes/account/Sync.tsx        |  69 --
 .../changeEmail/ChangeEmailSuccess.tsx        |  15 -
 .../panes/account/changeEmail/index.tsx       | 180 ----
 .../Preferences/panes/account/index.ts        |   6 -
 .../panes/account/offlineSubscription.tsx     | 138 ---
 .../account/subscription/NoSubscription.tsx   |  57 --
 .../subscription/SubscriptionInformation.tsx  |  91 --
 .../panes/backups-segments/index.ts           |   3 -
 .../extensions-segments/ExtensionItem.tsx     | 115 ---
 .../ExtensionsLatestVersions.ts               |  55 --
 .../panes/extensions-segments/index.ts        |   3 -
 .../panes/general-segments/Tools.tsx          |  67 --
 .../panes/general-segments/index.ts           |   3 -
 .../components/Preferences/panes/index.ts     |   5 -
 .../Preferences/panes/listed/BlogItem.tsx     |  56 --
 .../panes/security-segments/Encryption.tsx    |  86 --
 .../panes/security-segments/Privacy.tsx       | 166 ----
 .../panes/security-segments/Protections.tsx   | 118 ---
 .../panes/security-segments/index.ts          |   3 -
 .../panes/two-factor-auth/Bullet.tsx          |   9 -
 .../panes/two-factor-auth/CopyButton.tsx      |  23 -
 .../panes/two-factor-auth/MfaProps.ts         |   6 -
 .../TwoFactorActivationView.tsx               |  22 -
 .../two-factor-auth/TwoFactorAuthView.tsx     |  91 --
 .../two-factor-auth/download-secret-key.tsx   |  13 -
 .../panes/two-factor-auth/index.tsx           |  13 -
 .../Preferences/providers/MfaProvider.ts      |  13 -
 .../Preferences/providers/UserProvider.ts     |   3 -
 .../components/Preferences/providers/index.ts |   2 -
 .../javascripts/components/Premium/index.ts   |   1 -
 .../components/Premium/usePremiumModal.tsx    |  63 --
 .../PurchaseFlow/PurchaseFlowWrapper.tsx      |  49 -
 .../PurchaseFlow/panes/CreateAccount.tsx      | 220 -----
 .../components/PurchaseFlow/panes/SignIn.tsx  | 175 ----
 .../RemoteHistoryList.tsx                     | 115 ---
 .../SelectedRevisionContent.tsx               |  95 --
 .../components/RevisionPreviewModal.tsx       | 187 ----
 .../components/RoundIconButton.tsx            |  43 -
 .../components/Tags/RootTagDropZone.tsx       |  48 -
 .../components/Tags/SmartViewsList.tsx        |  29 -
 .../components/Tags/SmartViewsListItem.tsx    | 167 ----
 .../components/Tags/SmartViewsSection.tsx     |  18 -
 .../components/Tags/TagContextMenu.tsx        | 118 ---
 .../components/Tags/TagsSection.tsx           |  73 --
 .../components/Tags/TagsSectionAddButton.tsx  |  24 -
 .../components/Tags/TagsSectionTitle.tsx      |  61 --
 .../javascripts/components/Tags/dragndrop.ts  |   9 -
 .../javascripts/components/TitleBar.tsx       |  13 -
 app/assets/javascripts/components/utils.ts    | 194 ----
 app/assets/javascripts/constants.ts           |  18 -
 app/assets/javascripts/crypto.ts              |   3 -
 .../javascripts/hooks/manageSubscription.ts   |  10 -
 .../javascripts/hooks/useBeforeUnload.tsx     |  11 -
 app/assets/javascripts/index.ts               |   6 +-
 app/assets/javascripts/jest.config.js         |   9 +-
 .../javascripts/services/archiveManager.ts    | 168 ----
 app/assets/javascripts/services/bridge.ts     |  40 -
 .../javascripts/services/statusManager.ts     |  30 -
 .../javascripts/services/themeManager.ts      | 345 -------
 app/assets/javascripts/tsconfig.json          |   3 +-
 app/assets/javascripts/types.ts               |  12 -
 .../ui_models/app_state/actions_menu_state.ts |  22 -
 .../ui_models/app_state/app_state.ts          | 482 ----------
 .../ui_models/app_state/features_state.ts     | 104 --
 .../ui_models/app_state/files_state.ts        | 193 ----
 .../javascripts/ui_models/app_state/index.ts  |   6 -
 .../ui_models/app_state/sync_state.ts         |  36 -
 .../javascripts/ui_models/application.ts      | 155 ---
 .../ui_models/application_group.ts            |  81 --
 .../utils/calculateSubmenuStyle.tsx           |  77 --
 .../utils/concatenateUint8Arrays.ts           |  14 -
 app/assets/javascripts/utils/index.ts         |   5 -
 .../javascripts/utils/stringUtils.spec.ts     |  65 --
 app/assets/javascripts/utils/stringUtils.ts   |  39 -
 app/assets/javascripts/version.ts             |   8 -
 app/assets/stylesheets/_columns.scss          |   2 +-
 app/assets/stylesheets/_ionicons.scss         |   1 -
 app/assets/stylesheets/_main.scss             |  51 +-
 app/assets/stylesheets/_modals.scss           |   6 +-
 app/assets/stylesheets/_notes.scss            |   4 +-
 app/assets/stylesheets/_scrollbar.scss        |   2 +-
 app/assets/stylesheets/_sessions-modal.scss   |   4 +-
 app/assets/stylesheets/_sn.scss               |   5 +-
 app/assets/stylesheets/_stylekit-sub.scss     |  14 +-
 app/assets/stylesheets/_ui.scss               |  49 +-
 package.json                                  |   9 +-
 yarn.lock                                     |  88 ++
 367 files changed, 13778 insertions(+), 16093 deletions(-)
 create mode 100644 app/assets/javascripts/App.tsx
 create mode 100644 app/assets/javascripts/Components/Abstract/PureComponent.tsx
 rename app/assets/javascripts/{components => Components}/AccountMenu/AdvancedOptions.tsx (71%)
 rename app/assets/javascripts/{components => Components}/AccountMenu/ConfirmPassword.tsx (60%)
 rename app/assets/javascripts/{components => Components}/AccountMenu/CreateAccount.tsx (58%)
 rename app/assets/javascripts/{components => Components}/AccountMenu/GeneralAccountMenu.tsx (69%)
 rename app/assets/javascripts/{components => Components}/AccountMenu/SignIn.tsx (62%)
 rename app/assets/javascripts/{components => Components}/AccountMenu/User.tsx (68%)
 rename app/assets/javascripts/{components => Components}/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx (67%)
 create mode 100644 app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx
 rename app/assets/javascripts/{components => Components}/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx (55%)
 rename app/assets/javascripts/{components => Components}/AccountMenu/index.tsx (54%)
 rename app/assets/javascripts/{components/ApplicationGroupView.tsx => Components/ApplicationGroupView/index.tsx} (54%)
 create mode 100644 app/assets/javascripts/Components/ApplicationView/index.tsx
 create mode 100644 app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
 rename app/assets/javascripts/{components => Components}/AttachedFilesPopover/AttachedFilesPopover.tsx (64%)
 rename app/assets/javascripts/{components => Components}/AttachedFilesPopover/PopoverFileItem.tsx (62%)
 create mode 100644 app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItemAction.tsx
 rename app/assets/javascripts/{components => Components}/AttachedFilesPopover/PopoverFileSubmenu.tsx (74%)
 rename app/assets/javascripts/{components/Bubble.tsx => Components/Bubble/index.tsx} (70%)
 rename app/assets/javascripts/{components => Components/Button}/Button.tsx (54%)
 rename app/assets/javascripts/{components => Components/Button}/IconButton.tsx (66%)
 create mode 100644 app/assets/javascripts/Components/Button/RoundIconButton.tsx
 rename app/assets/javascripts/{components => Components}/ChallengeModal/ChallengeModal.tsx (54%)
 rename app/assets/javascripts/{components => Components}/ChallengeModal/ChallengePrompt.tsx (65%)
 rename app/assets/javascripts/{components => Components/ChangeEditor}/ChangeEditorButton.tsx (51%)
 rename app/assets/javascripts/{components/NotesOptions/changeEditor => Components/ChangeEditor}/ChangeEditorMenu.tsx (50%)
 rename app/assets/javascripts/{components/NotesOptions/changeEditor => Components/ChangeEditor}/createEditorMenuGroups.ts (70%)
 rename app/assets/javascripts/{components/Checkbox.tsx => Components/Checkbox/index.tsx} (73%)
 rename app/assets/javascripts/{components => Components}/ComponentView/IsDeprecated.tsx (57%)
 rename app/assets/javascripts/{components => Components}/ComponentView/IsExpired.tsx (53%)
 rename app/assets/javascripts/{components => Components}/ComponentView/IssueOnLoading.tsx (59%)
 rename app/assets/javascripts/{components => Components}/ComponentView/OfflineRestricted.tsx (69%)
 rename app/assets/javascripts/{components => Components}/ComponentView/UrlMissing.tsx (60%)
 create mode 100644 app/assets/javascripts/Components/ComponentView/index.tsx
 create mode 100644 app/assets/javascripts/Components/ConfirmSignoutModal/index.tsx
 rename app/assets/javascripts/{components/Dropdown.tsx => Components/Dropdown/index.tsx} (74%)
 rename app/assets/javascripts/{components => Components}/Files/FilePreviewInfoPanel.tsx (70%)
 rename app/assets/javascripts/{components => Components}/Files/FilePreviewModal.tsx (68%)
 create mode 100644 app/assets/javascripts/Components/Files/FilePreviewModalProvider.tsx
 create mode 100644 app/assets/javascripts/Components/Files/isFilePreviewable.ts
 rename app/assets/javascripts/{components/Footer.tsx => Components/Footer/index.tsx} (57%)
 rename app/assets/javascripts/{components/Icon.tsx => Components/Icon/index.tsx} (91%)
 create mode 100644 app/assets/javascripts/Components/Input/DecoratedInput.tsx
 create mode 100644 app/assets/javascripts/Components/Input/DecoratedInputProps.ts
 create mode 100644 app/assets/javascripts/Components/Input/DecoratedPasswordInput.tsx
 rename app/assets/javascripts/{components => Components/Input}/FloatingLabelInput.tsx (51%)
 create mode 100644 app/assets/javascripts/Components/Input/Input.tsx
 rename app/assets/javascripts/{components => Components}/Menu/Menu.tsx (53%)
 rename app/assets/javascripts/{components => Components}/Menu/MenuItem.tsx (51%)
 create mode 100644 app/assets/javascripts/Components/MultipleSelectedNotes/index.tsx
 create mode 100644 app/assets/javascripts/Components/Navigation/index.tsx
 rename app/assets/javascripts/{components/NoAccountWarning.tsx => Components/NoAccountWarning/index.tsx} (62%)
 create mode 100644 app/assets/javascripts/Components/NoteGroupView/index.tsx
 rename app/assets/javascripts/{components => Components/NoteTags}/NoteTag.tsx (50%)
 rename app/assets/javascripts/{components => Components/NoteTags}/NoteTagsContainer.tsx (50%)
 rename app/assets/javascripts/{components => Components}/NoteView/NoteView.test.ts (73%)
 rename app/assets/javascripts/{components => Components}/NoteView/NoteView.tsx (60%)
 create mode 100644 app/assets/javascripts/Components/NotesContextMenu/index.tsx
 rename app/assets/javascripts/{components => Components/NotesList}/NotesListItem.tsx (70%)
 rename app/assets/javascripts/{components => Components/NotesList}/NotesListOptionsMenu.tsx (80%)
 create mode 100644 app/assets/javascripts/Components/NotesList/index.tsx
 create mode 100644 app/assets/javascripts/Components/NotesOptions/AddTagOption.tsx
 rename app/assets/javascripts/{components => Components}/NotesOptions/ChangeEditorOption.tsx (57%)
 rename app/assets/javascripts/{components => Components}/NotesOptions/ListedActionsOption.tsx (68%)
 rename app/assets/javascripts/{components => Components}/NotesOptions/NotesOptions.tsx (66%)
 rename app/assets/javascripts/{components => Components/NotesOptions}/NotesOptionsPanel.tsx (51%)
 create mode 100644 app/assets/javascripts/Components/NotesView/index.tsx
 create mode 100644 app/assets/javascripts/Components/OtherSessionsSignOut/index.tsx
 create mode 100644 app/assets/javascripts/Components/PanelResizer/index.tsx
 rename app/assets/javascripts/{components/PasswordWizard.tsx => Components/PasswordWizard/index.tsx} (66%)
 rename app/assets/javascripts/{components/PermissionsModal.tsx => Components/PermissionsModal/index.tsx} (77%)
 create mode 100644 app/assets/javascripts/Components/PinNoteButton/index.tsx
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/Account/Advanced.tsx
 rename app/assets/javascripts/{components/Preferences/panes/account => Components/Preferences/Panes/Account}/Authentication.tsx (59%)
 rename app/assets/javascripts/{components/Preferences/panes/account/changeEmail => Components/Preferences/Panes/Account/ChangeEmail}/ChangeEmailForm.tsx (74%)
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmailSuccess.tsx
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/Account/ChangeEmail/index.tsx
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/Account/Credentials.tsx
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/Account/OfflineSubscription.tsx
 rename app/assets/javascripts/{components/Preferences/panes/account => Components/Preferences/Panes/Account}/SignOutView.tsx (63%)
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx
 rename app/assets/javascripts/{components/Preferences/panes/account/subscription => Components/Preferences/Panes/Account/Subscription}/Subscription.tsx (59%)
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/SubscriptionInformation.tsx
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/Account/Sync.tsx
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/Appearance.tsx
 rename app/assets/javascripts/{components/Preferences/panes/backups-segments/cloud-backups => Components/Preferences/Panes/Backups/CloudBackups}/CloudBackupProvider.tsx (52%)
 rename app/assets/javascripts/{components/Preferences/panes/backups-segments/cloud-backups => Components/Preferences/Panes/Backups/CloudBackups}/index.tsx (62%)
 rename app/assets/javascripts/{components/Preferences/panes/backups-segments => Components/Preferences/Panes/Backups}/DataBackups.tsx (57%)
 rename app/assets/javascripts/{components/Preferences/panes/backups-segments => Components/Preferences/Panes/Backups}/EmailBackups.tsx (57%)
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/Backups/index.tsx
 rename app/assets/javascripts/{components/Preferences/panes => Components/Preferences/Panes}/CloudLink.tsx (65%)
 rename app/assets/javascripts/{components/Preferences/panes/extensions-segments => Components/Preferences/Panes/Extensions}/ConfirmCustomExtension.tsx (82%)
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionItem.tsx
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionsLatestVersions.ts
 rename app/assets/javascripts/{components/Preferences/panes/extensions-segments => Components/Preferences/Panes/Extensions}/RenameExtension.tsx (57%)
 rename app/assets/javascripts/{components/Preferences/panes/Extensions.tsx => Components/Preferences/Panes/Extensions/index.tsx} (62%)
 rename app/assets/javascripts/{components/Preferences/panes/general-segments => Components/Preferences/Panes/General}/Defaults.tsx (56%)
 rename app/assets/javascripts/{components/Preferences/panes/general-segments => Components/Preferences/Panes/General}/Labs.tsx (51%)
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/General/Tools.tsx
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/General/index.tsx
 rename app/assets/javascripts/{components/Preferences/panes => Components/Preferences/Panes}/HelpFeedback.tsx (65%)
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/Listed/BlogItem.tsx
 rename app/assets/javascripts/{components/Preferences/panes/Listed.tsx => Components/Preferences/Panes/Listed/index.tsx} (58%)
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/Security/Encryption.tsx
 rename app/assets/javascripts/{components/Preferences/panes/security-segments => Components/Preferences/Panes/Security}/PasscodeLock.tsx (56%)
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/Security/Privacy.tsx
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/Security/Protections.tsx
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/Security/index.tsx
 rename app/assets/javascripts/{components/Preferences/panes/two-factor-auth => Components/Preferences/Panes/TwoFactorAuth}/AuthAppInfoPopup.tsx (56%)
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/Bullet.tsx
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/CopyButton.tsx
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/MfaProps.ts
 rename app/assets/javascripts/{components/Preferences/panes/two-factor-auth => Components/Preferences/Panes/TwoFactorAuth}/SaveSecretKey.tsx (77%)
 rename app/assets/javascripts/{components/Preferences/panes/two-factor-auth => Components/Preferences/Panes/TwoFactorAuth}/ScanQRCode.tsx (79%)
 rename app/assets/javascripts/{components/Preferences/panes/two-factor-auth => Components/Preferences/Panes/TwoFactorAuth}/TwoFactorActivation.ts (55%)
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorActivationView.tsx
 rename app/assets/javascripts/{components/Preferences/panes/two-factor-auth => Components/Preferences/Panes/TwoFactorAuth}/TwoFactorAuth.ts (51%)
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView.tsx
 rename app/assets/javascripts/{components/Preferences/panes/two-factor-auth => Components/Preferences/Panes/TwoFactorAuth}/TwoFactorSuccess.tsx (57%)
 rename app/assets/javascripts/{components/Preferences/panes/two-factor-auth => Components/Preferences/Panes/TwoFactorAuth}/Verification.tsx (61%)
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/download-secret-key.tsx
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/index.tsx
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/index.ts
 rename app/assets/javascripts/{components/Preferences/components => Components/Preferences/PreferencesComponents}/Content.tsx (57%)
 create mode 100644 app/assets/javascripts/Components/Preferences/PreferencesComponents/MenuItem.tsx
 rename app/assets/javascripts/{components/Preferences/components => Components/Preferences/PreferencesComponents}/PreferencesGroup.tsx (58%)
 rename app/assets/javascripts/{components/Preferences/components => Components/Preferences/PreferencesComponents}/PreferencesPane.tsx (91%)
 create mode 100644 app/assets/javascripts/Components/Preferences/PreferencesComponents/PreferencesSegment.tsx
 create mode 100644 app/assets/javascripts/Components/Preferences/PreferencesComponents/index.ts
 rename app/assets/javascripts/{components => Components}/Preferences/PreferencesMenu.ts (72%)
 rename app/assets/javascripts/{components => Components}/Preferences/PreferencesMenuView.tsx (64%)
 create mode 100644 app/assets/javascripts/Components/Preferences/PreferencesView.tsx
 rename app/assets/javascripts/{components => Components}/Preferences/PreferencesViewWrapper.tsx (50%)
 create mode 100644 app/assets/javascripts/Components/Preferences/Providers/MfaProvider.ts
 create mode 100644 app/assets/javascripts/Components/Preferences/Providers/UserProvider.ts
 create mode 100644 app/assets/javascripts/Components/Preferences/Providers/index.ts
 rename app/assets/javascripts/{components/PremiumFeaturesModal.tsx => Components/PremiumFeaturesModal/index.tsx} (57%)
 rename app/assets/javascripts/{components/ProtectedNoteOverlay.tsx => Components/ProtectedNoteOverlay/index.tsx} (63%)
 create mode 100644 app/assets/javascripts/Components/PurchaseFlow/Panes/CreateAccount.tsx
 create mode 100644 app/assets/javascripts/Components/PurchaseFlow/Panes/SignIn.tsx
 rename app/assets/javascripts/{components => Components}/PurchaseFlow/PurchaseFlowView.tsx (70%)
 create mode 100644 app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowWrapper.tsx
 rename app/assets/javascripts/{components/QuickSettingsMenu/eventHandlers.ts => Components/QuickSettingsMenu/EventHandlers.ts} (56%)
 rename app/assets/javascripts/{components => Components}/QuickSettingsMenu/FocusModeSwitch.tsx (57%)
 create mode 100644 app/assets/javascripts/Components/QuickSettingsMenu/ThemeItem.ts
 rename app/assets/javascripts/{components => Components}/QuickSettingsMenu/ThemesMenuButton.tsx (51%)
 rename app/assets/javascripts/{components/QuickSettingsMenu/QuickSettingsMenu.tsx => Components/QuickSettingsMenu/index.tsx} (57%)
 rename app/assets/javascripts/{components => Components}/RevisionHistoryModal/HistoryListContainer.tsx (57%)
 rename app/assets/javascripts/{components => Components}/RevisionHistoryModal/HistoryListItem.tsx (63%)
 rename app/assets/javascripts/{components => Components}/RevisionHistoryModal/LegacyHistoryList.tsx (56%)
 create mode 100644 app/assets/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx
 rename app/assets/javascripts/{components => Components}/RevisionHistoryModal/RevisionContentLocked.tsx (62%)
 rename app/assets/javascripts/{components => Components}/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx (60%)
 create mode 100644 app/assets/javascripts/Components/RevisionHistoryModal/SelectedRevisionContent.tsx
 rename app/assets/javascripts/{components => Components}/RevisionHistoryModal/SessionHistoryList.tsx (57%)
 rename app/assets/javascripts/{components => Components}/RevisionHistoryModal/utils.ts (54%)
 rename app/assets/javascripts/{components/SearchOptions.tsx => Components/SearchOptions/index.tsx} (67%)
 rename app/assets/javascripts/{components/SessionsModal.tsx => Components/SessionsModal/index.tsx} (65%)
 rename app/assets/javascripts/{components => Components}/Shared/AccordionItem.tsx (58%)
 rename app/assets/javascripts/{components => Components}/Shared/HorizontalSeparator.tsx (56%)
 rename app/assets/javascripts/{components => Components}/Shared/ModalDialog.tsx (76%)
 rename app/assets/javascripts/{components/Switch.tsx => Components/Switch/index.tsx} (55%)
 rename app/assets/javascripts/{components/SyncResolutionMenu.tsx => Components/SyncResolutionMenu/index.tsx} (59%)
 create mode 100644 app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagHint.tsx
 create mode 100644 app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagInput.tsx
 create mode 100644 app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagResult.tsx
 create mode 100644 app/assets/javascripts/Components/Tags/DragNDrop.ts
 create mode 100644 app/assets/javascripts/Components/Tags/RootTagDropZone.tsx
 create mode 100644 app/assets/javascripts/Components/Tags/SmartViewsList.tsx
 create mode 100644 app/assets/javascripts/Components/Tags/SmartViewsListItem.tsx
 create mode 100644 app/assets/javascripts/Components/Tags/SmartViewsSection.tsx
 create mode 100644 app/assets/javascripts/Components/Tags/TagContextMenu.tsx
 rename app/assets/javascripts/{components => Components}/Tags/TagsList.tsx (51%)
 rename app/assets/javascripts/{components => Components}/Tags/TagsListItem.tsx (55%)
 create mode 100644 app/assets/javascripts/Components/Tags/TagsSection.tsx
 create mode 100644 app/assets/javascripts/Components/Tags/TagsSectionAddButton.tsx
 create mode 100644 app/assets/javascripts/Components/Tags/TagsSectionTitle.tsx
 create mode 100644 app/assets/javascripts/Components/TitleBar/Title.tsx
 create mode 100644 app/assets/javascripts/Components/TitleBar/TitleBar.tsx
 create mode 100644 app/assets/javascripts/Constants.ts
 create mode 100644 app/assets/javascripts/Crypto.ts
 rename app/assets/javascripts/{database.ts => Database.ts} (50%)
 rename app/assets/javascripts/{element_ids.ts => ElementIDs.ts} (98%)
 rename app/assets/javascripts/{enums.ts => Enums.ts} (100%)
 create mode 100644 app/assets/javascripts/Hooks/useBeforeUnload.tsx
 create mode 100644 app/assets/javascripts/Hooks/useCloseOnBlur.ts
 create mode 100644 app/assets/javascripts/Hooks/useCloseOnClickOutside.ts
 create mode 100644 app/assets/javascripts/Hooks/useListKeyboardNavigation.ts
 create mode 100644 app/assets/javascripts/Hooks/usePremiumModal.tsx
 rename app/assets/javascripts/{services/alertService.ts => Services/AlertService.ts} (71%)
 create mode 100644 app/assets/javascripts/Services/ArchiveManager.ts
 rename app/assets/javascripts/{services/autolock_service.ts => Services/AutolockService.ts} (59%)
 create mode 100644 app/assets/javascripts/Services/Bridge.ts
 rename app/assets/javascripts/{services/browserBridge.ts => Services/BrowserBridge.ts} (69%)
 rename app/assets/javascripts/{services/desktopManager.ts => Services/DesktopManager.ts} (58%)
 rename app/assets/javascripts/{services/ioService.ts => Services/IOService.ts} (50%)
 rename app/assets/javascripts/{services/localStorage.ts => Services/LocalStorage.ts} (55%)
 create mode 100644 app/assets/javascripts/Services/StatusManager.ts
 create mode 100644 app/assets/javascripts/Services/ThemeManager.ts
 rename app/assets/javascripts/{startApplication.ts => StartApplication.ts} (58%)
 rename app/assets/javascripts/{strings.ts => Strings.ts} (75%)
 create mode 100644 app/assets/javascripts/Types.ts
 rename app/assets/javascripts/{typings => Typings}/hoist-non-react-statics.d.ts (61%)
 rename app/assets/javascripts/{ui_models/app_state/account_menu_state.ts => UIModels/AppState/AccountMenuState.ts} (54%)
 create mode 100644 app/assets/javascripts/UIModels/AppState/ActionsMenuState.ts
 create mode 100644 app/assets/javascripts/UIModels/AppState/AppState.ts
 create mode 100644 app/assets/javascripts/UIModels/AppState/FeaturesState.ts
 create mode 100644 app/assets/javascripts/UIModels/AppState/FilesState.ts
 rename app/assets/javascripts/{ui_models/app_state/no_account_warning_state.ts => UIModels/AppState/NoAccountWarningState.ts} (61%)
 rename app/assets/javascripts/{ui_models/app_state/note_tags_state.ts => UIModels/AppState/NoteTagsState.ts} (50%)
 rename app/assets/javascripts/{ui_models/app_state/notes_state.ts => UIModels/AppState/NotesState.ts} (51%)
 rename app/assets/javascripts/{ui_models/app_state/notes_view_state.ts => UIModels/AppState/NotesViewState.ts} (54%)
 rename app/assets/javascripts/{ui_models/app_state/preferences_state.ts => UIModels/AppState/PreferencesState.ts} (59%)
 rename app/assets/javascripts/{ui_models/app_state/purchase_flow_state.ts => UIModels/AppState/PurchaseFlowState.ts} (52%)
 rename app/assets/javascripts/{ui_models/app_state/quick_settings_state.ts => UIModels/AppState/QuickSettingsState.ts} (57%)
 rename app/assets/javascripts/{ui_models/app_state/search_options_state.ts => UIModels/AppState/SearchOptionsState.ts} (54%)
 rename app/assets/javascripts/{ui_models/app_state/subscription_state.ts => UIModels/AppState/SubscriptionState.ts} (64%)
 create mode 100644 app/assets/javascripts/UIModels/AppState/SyncState.ts
 rename app/assets/javascripts/{ui_models/app_state/tags_state.ts => UIModels/AppState/TagsState.ts} (52%)
 create mode 100644 app/assets/javascripts/UIModels/AppState/index.ts
 create mode 100644 app/assets/javascripts/UIModels/Application.ts
 create mode 100644 app/assets/javascripts/UIModels/ApplicationGroup.ts
 create mode 100644 app/assets/javascripts/Utils/CalculateDifferenceBetweenDatesInDays.ts
 create mode 100644 app/assets/javascripts/Utils/CalculateSubmenuStyle.tsx
 create mode 100644 app/assets/javascripts/Utils/ConcatenateUint8Arrays.ts
 rename app/assets/javascripts/{utils/isMobile.ts => Utils/IsMobile.ts} (91%)
 create mode 100644 app/assets/javascripts/Utils/ManageSubscription.ts
 create mode 100644 app/assets/javascripts/Utils/SortThemes.ts
 create mode 100644 app/assets/javascripts/Utils/StringUtils.spec.ts
 create mode 100644 app/assets/javascripts/Utils/StringUtils.ts
 rename app/assets/javascripts/{utils/utils.ts => Utils/Utils.ts} (55%)
 create mode 100644 app/assets/javascripts/Utils/index.ts
 create mode 100644 app/assets/javascripts/Version.ts
 rename app/assets/javascripts/{web_device_interface.ts => WebDeviceInterface.ts} (50%)
 delete mode 100644 app/assets/javascripts/app.tsx
 delete mode 100644 app/assets/javascripts/components/Abstract/PureComponent.tsx
 delete mode 100644 app/assets/javascripts/components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx
 delete mode 100644 app/assets/javascripts/components/ApplicationView.tsx
 delete mode 100644 app/assets/javascripts/components/AttachedFilesPopover/AttachedFilesButton.tsx
 delete mode 100644 app/assets/javascripts/components/AttachedFilesPopover/PopoverFileItemAction.tsx
 delete mode 100644 app/assets/javascripts/components/AutocompleteTagHint.tsx
 delete mode 100644 app/assets/javascripts/components/AutocompleteTagInput.tsx
 delete mode 100644 app/assets/javascripts/components/AutocompleteTagResult.tsx
 delete mode 100644 app/assets/javascripts/components/ComponentView/index.tsx
 delete mode 100644 app/assets/javascripts/components/ConfirmSignoutModal.tsx
 delete mode 100644 app/assets/javascripts/components/ConfirmationDialog.tsx
 delete mode 100644 app/assets/javascripts/components/DecoratedInput.tsx
 delete mode 100644 app/assets/javascripts/components/DecoratedPasswordInput.tsx
 delete mode 100644 app/assets/javascripts/components/Files/FilePreviewModalProvider.tsx
 delete mode 100644 app/assets/javascripts/components/Files/isFilePreviewable.ts
 delete mode 100644 app/assets/javascripts/components/Input.tsx
 delete mode 100644 app/assets/javascripts/components/MenuRow.tsx
 delete mode 100644 app/assets/javascripts/components/MultipleSelectedNotes.tsx
 delete mode 100644 app/assets/javascripts/components/Navigation.tsx
 delete mode 100644 app/assets/javascripts/components/NoteGroupView.tsx
 delete mode 100644 app/assets/javascripts/components/NotesContextMenu.tsx
 delete mode 100644 app/assets/javascripts/components/NotesList.tsx
 delete mode 100644 app/assets/javascripts/components/NotesOptions/AddTagOption.tsx
 delete mode 100644 app/assets/javascripts/components/NotesView.tsx
 delete mode 100644 app/assets/javascripts/components/OtherSessionsSignOut.tsx
 delete mode 100644 app/assets/javascripts/components/PanelResizer.tsx
 delete mode 100644 app/assets/javascripts/components/PinNoteButton.tsx
 delete mode 100644 app/assets/javascripts/components/Preferences/PreferencesView.tsx
 delete mode 100644 app/assets/javascripts/components/Preferences/components/MenuItem.tsx
 delete mode 100644 app/assets/javascripts/components/Preferences/components/PreferencesSegment.tsx
 delete mode 100644 app/assets/javascripts/components/Preferences/components/index.ts
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/AccountPreferences.tsx
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/Appearance.tsx
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/Backups.tsx
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/General.tsx
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/Security.tsx
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/account/Advanced.tsx
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/account/Credentials.tsx
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/account/Sync.tsx
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/account/changeEmail/ChangeEmailSuccess.tsx
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/account/changeEmail/index.tsx
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/account/index.ts
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/account/offlineSubscription.tsx
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/account/subscription/NoSubscription.tsx
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/account/subscription/SubscriptionInformation.tsx
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/backups-segments/index.ts
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/extensions-segments/ExtensionItem.tsx
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/extensions-segments/ExtensionsLatestVersions.ts
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/extensions-segments/index.ts
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/general-segments/Tools.tsx
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/general-segments/index.ts
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/index.ts
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/listed/BlogItem.tsx
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/security-segments/Encryption.tsx
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/security-segments/Privacy.tsx
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/security-segments/Protections.tsx
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/security-segments/index.ts
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/two-factor-auth/Bullet.tsx
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/two-factor-auth/CopyButton.tsx
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/two-factor-auth/MfaProps.ts
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorActivationView.tsx
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorAuthView.tsx
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/two-factor-auth/download-secret-key.tsx
 delete mode 100644 app/assets/javascripts/components/Preferences/panes/two-factor-auth/index.tsx
 delete mode 100644 app/assets/javascripts/components/Preferences/providers/MfaProvider.ts
 delete mode 100644 app/assets/javascripts/components/Preferences/providers/UserProvider.ts
 delete mode 100644 app/assets/javascripts/components/Preferences/providers/index.ts
 delete mode 100644 app/assets/javascripts/components/Premium/index.ts
 delete mode 100644 app/assets/javascripts/components/Premium/usePremiumModal.tsx
 delete mode 100644 app/assets/javascripts/components/PurchaseFlow/PurchaseFlowWrapper.tsx
 delete mode 100644 app/assets/javascripts/components/PurchaseFlow/panes/CreateAccount.tsx
 delete mode 100644 app/assets/javascripts/components/PurchaseFlow/panes/SignIn.tsx
 delete mode 100644 app/assets/javascripts/components/RevisionHistoryModal/RemoteHistoryList.tsx
 delete mode 100644 app/assets/javascripts/components/RevisionHistoryModal/SelectedRevisionContent.tsx
 delete mode 100644 app/assets/javascripts/components/RevisionPreviewModal.tsx
 delete mode 100644 app/assets/javascripts/components/RoundIconButton.tsx
 delete mode 100644 app/assets/javascripts/components/Tags/RootTagDropZone.tsx
 delete mode 100644 app/assets/javascripts/components/Tags/SmartViewsList.tsx
 delete mode 100644 app/assets/javascripts/components/Tags/SmartViewsListItem.tsx
 delete mode 100644 app/assets/javascripts/components/Tags/SmartViewsSection.tsx
 delete mode 100644 app/assets/javascripts/components/Tags/TagContextMenu.tsx
 delete mode 100644 app/assets/javascripts/components/Tags/TagsSection.tsx
 delete mode 100644 app/assets/javascripts/components/Tags/TagsSectionAddButton.tsx
 delete mode 100644 app/assets/javascripts/components/Tags/TagsSectionTitle.tsx
 delete mode 100644 app/assets/javascripts/components/Tags/dragndrop.ts
 delete mode 100644 app/assets/javascripts/components/TitleBar.tsx
 delete mode 100644 app/assets/javascripts/components/utils.ts
 delete mode 100644 app/assets/javascripts/constants.ts
 delete mode 100644 app/assets/javascripts/crypto.ts
 delete mode 100644 app/assets/javascripts/hooks/manageSubscription.ts
 delete mode 100644 app/assets/javascripts/hooks/useBeforeUnload.tsx
 delete mode 100644 app/assets/javascripts/services/archiveManager.ts
 delete mode 100644 app/assets/javascripts/services/bridge.ts
 delete mode 100644 app/assets/javascripts/services/statusManager.ts
 delete mode 100644 app/assets/javascripts/services/themeManager.ts
 delete mode 100644 app/assets/javascripts/types.ts
 delete mode 100644 app/assets/javascripts/ui_models/app_state/actions_menu_state.ts
 delete mode 100644 app/assets/javascripts/ui_models/app_state/app_state.ts
 delete mode 100644 app/assets/javascripts/ui_models/app_state/features_state.ts
 delete mode 100644 app/assets/javascripts/ui_models/app_state/files_state.ts
 delete mode 100644 app/assets/javascripts/ui_models/app_state/index.ts
 delete mode 100644 app/assets/javascripts/ui_models/app_state/sync_state.ts
 delete mode 100644 app/assets/javascripts/ui_models/application.ts
 delete mode 100644 app/assets/javascripts/ui_models/application_group.ts
 delete mode 100644 app/assets/javascripts/utils/calculateSubmenuStyle.tsx
 delete mode 100644 app/assets/javascripts/utils/concatenateUint8Arrays.ts
 delete mode 100644 app/assets/javascripts/utils/index.ts
 delete mode 100644 app/assets/javascripts/utils/stringUtils.spec.ts
 delete mode 100644 app/assets/javascripts/utils/stringUtils.ts
 delete mode 100644 app/assets/javascripts/version.ts

diff --git a/.eslintrc b/.eslintrc
index b572d609c..8219c6088 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -5,7 +5,8 @@
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "prettier",
-    "plugin:react-hooks/recommended"
+    "plugin:react-hooks/recommended",
+    "./node_modules/@standardnotes/config/src/.eslintrc"
   ],
   "plugins": ["@typescript-eslint", "react", "react-hooks"],
   "parserOptions": {
@@ -23,7 +24,9 @@
     "react-hooks/exhaustive-deps": "error",
     "eol-last": "error",
     "no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 0 }],
-    "no-trailing-spaces": "error"
+    "no-trailing-spaces": "error",
+    "@typescript-eslint/no-explicit-any": "warn",
+    "no-invalid-this": "warn"
   },
   "env": {
     "browser": true
diff --git a/.prettierrc b/.prettierrc
index 9e74d98a6..cb8ee2671 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,3 +1,6 @@
 {
   "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "semi": false
 }
diff --git a/app/assets/javascripts/@types/modules.ts b/app/assets/javascripts/@types/modules.ts
index b5518926f..8b139eba2 100644
--- a/app/assets/javascripts/@types/modules.ts
+++ b/app/assets/javascripts/@types/modules.ts
@@ -1,3 +1,3 @@
 declare module '*.svg' {
-  export default function SvgComponent(props: React.SVGProps<SVGSVGElement>): JSX.Element;
+  export default function SvgComponent(props: React.SVGProps<SVGSVGElement>): JSX.Element
 }
diff --git a/app/assets/javascripts/@types/qrcode.react.d.ts b/app/assets/javascripts/@types/qrcode.react.d.ts
index f997f01d9..c30c2c732 100644
--- a/app/assets/javascripts/@types/qrcode.react.d.ts
+++ b/app/assets/javascripts/@types/qrcode.react.d.ts
@@ -1 +1 @@
-declare module 'qrcode.react';
+declare module 'qrcode.react'
diff --git a/app/assets/javascripts/App.tsx b/app/assets/javascripts/App.tsx
new file mode 100644
index 000000000..0cb0d0f49
--- /dev/null
+++ b/app/assets/javascripts/App.tsx
@@ -0,0 +1,79 @@
+'use strict'
+
+declare global {
+  interface Window {
+    dashboardUrl?: string
+    defaultSyncServer: string
+    devAccountEmail?: string
+    devAccountPassword?: string
+    devAccountServer?: string
+    enabledUnfinishedFeatures: boolean
+    plansUrl?: string
+    purchaseUrl?: string
+    startApplication?: StartApplication
+    websocketUrl: string
+    electronAppVersion?: string
+  }
+}
+
+import { IsWebPlatform, WebAppVersion } from '@/Version'
+import { Runtime, SNLog } from '@standardnotes/snjs'
+import { render } from 'preact'
+import { ApplicationGroupView } from './Components/ApplicationGroupView'
+import { Bridge } from './Services/Bridge'
+import { BrowserBridge } from './Services/BrowserBridge'
+import { StartApplication } from './StartApplication'
+import { ApplicationGroup } from './UIModels/ApplicationGroup'
+import { isDev } from './Utils'
+
+const startApplication: StartApplication = async function startApplication(
+  defaultSyncServerHost: string,
+  bridge: Bridge,
+  enableUnfinishedFeatures: boolean,
+  webSocketUrl: string,
+) {
+  SNLog.onLog = console.log
+  SNLog.onError = console.error
+
+  const mainApplicationGroup = new ApplicationGroup(
+    defaultSyncServerHost,
+    bridge,
+    enableUnfinishedFeatures ? Runtime.Dev : Runtime.Prod,
+    webSocketUrl,
+  )
+
+  if (isDev) {
+    Object.defineProperties(window, {
+      application: {
+        get: () => mainApplicationGroup.primaryApplication,
+      },
+    })
+  }
+
+  const renderApp = () => {
+    render(
+      <ApplicationGroupView mainApplicationGroup={mainApplicationGroup} />,
+      document.body.appendChild(document.createElement('div')),
+    )
+  }
+
+  const domReady = document.readyState === 'complete' || document.readyState === 'interactive'
+  if (domReady) {
+    renderApp()
+  } else {
+    window.addEventListener('DOMContentLoaded', () => {
+      renderApp()
+    })
+  }
+}
+
+if (IsWebPlatform) {
+  startApplication(
+    window.defaultSyncServer,
+    new BrowserBridge(WebAppVersion),
+    window.enabledUnfinishedFeatures,
+    window.websocketUrl,
+  ).catch(console.error)
+} else {
+  window.startApplication = startApplication
+}
diff --git a/app/assets/javascripts/Components/Abstract/PureComponent.tsx b/app/assets/javascripts/Components/Abstract/PureComponent.tsx
new file mode 100644
index 000000000..6351b53bd
--- /dev/null
+++ b/app/assets/javascripts/Components/Abstract/PureComponent.tsx
@@ -0,0 +1,135 @@
+import { ApplicationEvent } from '@standardnotes/snjs'
+import { WebApplication } from '@/UIModels/Application'
+import { AppState, AppStateEvent } from '@/UIModels/AppState'
+import { autorun, IReactionDisposer, IReactionPublic } from 'mobx'
+import { Component } from 'preact'
+import { findDOMNode, unmountComponentAtNode } from 'preact/compat'
+
+export type PureComponentState = Partial<Record<string, any>>
+export type PureComponentProps = Partial<Record<string, any>>
+
+export abstract class PureComponent<
+  P = PureComponentProps,
+  S = PureComponentState,
+> extends Component<P, S> {
+  private unsubApp!: () => void
+  private unsubState!: () => void
+  private reactionDisposers: IReactionDisposer[] = []
+
+  constructor(props: P, protected application: WebApplication) {
+    super(props)
+  }
+
+  override componentDidMount() {
+    this.addAppEventObserver()
+    this.addAppStateObserver()
+  }
+
+  deinit(): void {
+    this.unsubApp?.()
+    this.unsubState?.()
+    for (const disposer of this.reactionDisposers) {
+      disposer()
+    }
+    this.reactionDisposers.length = 0
+    ;(this.unsubApp as unknown) = undefined
+    ;(this.unsubState as unknown) = undefined
+  }
+
+  protected dismissModal(): void {
+    const elem = this.getElement()
+    if (!elem) {
+      return
+    }
+
+    const parent = elem.parentElement
+    if (!parent) {
+      return
+    }
+    parent.remove()
+    unmountComponentAtNode(parent)
+  }
+
+  override componentWillUnmount(): void {
+    this.deinit()
+  }
+
+  render() {
+    return <div>Must override</div>
+  }
+
+  public get appState(): AppState {
+    return this.application.getAppState()
+  }
+
+  protected getElement(): Element | null {
+    return findDOMNode(this)
+  }
+
+  autorun(view: (r: IReactionPublic) => void): void {
+    this.reactionDisposers.push(autorun(view))
+  }
+
+  addAppStateObserver() {
+    this.unsubState = this.application.getAppState().addObserver(async (eventName, data) => {
+      this.onAppStateEvent(eventName, data)
+    })
+  }
+
+  onAppStateEvent(_eventName: AppStateEvent, _data: unknown) {
+    /** Optional override */
+  }
+
+  addAppEventObserver() {
+    if (this.application.isStarted()) {
+      this.onAppStart().catch(console.error)
+    }
+    if (this.application.isLaunched()) {
+      this.onAppLaunch().catch(console.error)
+    }
+    this.unsubApp = this.application.addEventObserver(async (eventName, data: unknown) => {
+      this.onAppEvent(eventName, data)
+      if (eventName === ApplicationEvent.Started) {
+        await this.onAppStart()
+      } else if (eventName === ApplicationEvent.Launched) {
+        await this.onAppLaunch()
+      } else if (eventName === ApplicationEvent.CompletedIncrementalSync) {
+        this.onAppIncrementalSync()
+      } else if (eventName === ApplicationEvent.CompletedFullSync) {
+        this.onAppFullSync()
+      } else if (eventName === ApplicationEvent.KeyStatusChanged) {
+        this.onAppKeyChange().catch(console.error)
+      } else if (eventName === ApplicationEvent.LocalDataLoaded) {
+        this.onLocalDataLoaded()
+      }
+    })
+  }
+
+  onAppEvent(_eventName: ApplicationEvent, _data?: unknown) {
+    /** Optional override */
+  }
+
+  async onAppStart() {
+    /** Optional override */
+  }
+
+  onLocalDataLoaded() {
+    /** Optional override */
+  }
+
+  async onAppLaunch() {
+    /** Optional override */
+  }
+
+  async onAppKeyChange() {
+    /** Optional override */
+  }
+
+  onAppIncrementalSync() {
+    /** Optional override */
+  }
+
+  onAppFullSync() {
+    /** Optional override */
+  }
+}
diff --git a/app/assets/javascripts/components/AccountMenu/AdvancedOptions.tsx b/app/assets/javascripts/Components/AccountMenu/AdvancedOptions.tsx
similarity index 71%
rename from app/assets/javascripts/components/AccountMenu/AdvancedOptions.tsx
rename to app/assets/javascripts/Components/AccountMenu/AdvancedOptions.tsx
index ec67e0ed3..266660f11 100644
--- a/app/assets/javascripts/components/AccountMenu/AdvancedOptions.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/AdvancedOptions.tsx
@@ -1,96 +1,85 @@
-import { WebApplication } from '@/ui_models/application';
-import { AppState } from '@/ui_models/app_state';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { useEffect, useState } from 'preact/hooks';
-import { Checkbox } from '../Checkbox';
-import { DecoratedInput } from '../DecoratedInput';
-import { Icon } from '../Icon';
+import { WebApplication } from '@/UIModels/Application'
+import { AppState } from '@/UIModels/AppState'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { useEffect, useState } from 'preact/hooks'
+import { Checkbox } from '@/Components/Checkbox'
+import { DecoratedInput } from '@/Components/Input/DecoratedInput'
+import { Icon } from '@/Components/Icon'
 
 type Props = {
-  application: WebApplication;
-  appState: AppState;
-  disabled?: boolean;
-  onVaultChange?: (isVault: boolean, vaultedEmail?: string) => void;
-  onStrictSignInChange?: (isStrictSignIn: boolean) => void;
-};
+  application: WebApplication
+  appState: AppState
+  disabled?: boolean
+  onVaultChange?: (isVault: boolean, vaultedEmail?: string) => void
+  onStrictSignInChange?: (isStrictSignIn: boolean) => void
+}
 
 export const AdvancedOptions: FunctionComponent<Props> = observer(
-  ({
-    appState,
-    application,
-    disabled = false,
-    onVaultChange,
-    onStrictSignInChange,
-    children,
-  }) => {
-    const { server, setServer, enableServerOption, setEnableServerOption } =
-      appState.accountMenu;
-    const [showAdvanced, setShowAdvanced] = useState(false);
+  ({ appState, application, disabled = false, onVaultChange, onStrictSignInChange, children }) => {
+    const { server, setServer, enableServerOption, setEnableServerOption } = appState.accountMenu
+    const [showAdvanced, setShowAdvanced] = useState(false)
 
-    const [isVault, setIsVault] = useState(false);
-    const [vaultName, setVaultName] = useState('');
-    const [vaultUserphrase, setVaultUserphrase] = useState('');
+    const [isVault, setIsVault] = useState(false)
+    const [vaultName, setVaultName] = useState('')
+    const [vaultUserphrase, setVaultUserphrase] = useState('')
 
-    const [isStrictSignin, setIsStrictSignin] = useState(false);
+    const [isStrictSignin, setIsStrictSignin] = useState(false)
 
     useEffect(() => {
       const recomputeVaultedEmail = async () => {
-        const vaultedEmail = await application.vaultToEmail(
-          vaultName,
-          vaultUserphrase
-        );
+        const vaultedEmail = await application.vaultToEmail(vaultName, vaultUserphrase)
 
         if (!vaultedEmail) {
           if (vaultName?.length > 0 && vaultUserphrase?.length > 0) {
-            application.alertService.alert('Unable to compute vault name.');
+            application.alertService.alert('Unable to compute vault name.').catch(console.error)
           }
-          return;
+          return
         }
-        onVaultChange?.(true, vaultedEmail);
-      };
+        onVaultChange?.(true, vaultedEmail)
+      }
 
       if (vaultName && vaultUserphrase) {
-        recomputeVaultedEmail();
+        recomputeVaultedEmail().catch(console.error)
       }
-    }, [vaultName, vaultUserphrase, application, onVaultChange]);
+    }, [vaultName, vaultUserphrase, application, onVaultChange])
 
     useEffect(() => {
-      onVaultChange?.(isVault);
-    }, [isVault, onVaultChange]);
+      onVaultChange?.(isVault)
+    }, [isVault, onVaultChange])
 
     const handleIsVaultChange = () => {
-      setIsVault(!isVault);
-    };
+      setIsVault(!isVault)
+    }
 
     const handleVaultNameChange = (name: string) => {
-      setVaultName(name);
-    };
+      setVaultName(name)
+    }
 
     const handleVaultUserphraseChange = (userphrase: string) => {
-      setVaultUserphrase(userphrase);
-    };
+      setVaultUserphrase(userphrase)
+    }
 
     const handleServerOptionChange = (e: Event) => {
       if (e.target instanceof HTMLInputElement) {
-        setEnableServerOption(e.target.checked);
+        setEnableServerOption(e.target.checked)
       }
-    };
+    }
 
     const handleSyncServerChange = (server: string) => {
-      setServer(server);
-      application.setCustomHost(server);
-    };
+      setServer(server)
+      application.setCustomHost(server).catch(console.error)
+    }
 
     const handleStrictSigninChange = () => {
-      const newValue = !isStrictSignin;
-      setIsStrictSignin(newValue);
-      onStrictSignInChange?.(newValue);
-    };
+      const newValue = !isStrictSignin
+      setIsStrictSignin(newValue)
+      onStrictSignInChange?.(newValue)
+    }
 
     const toggleShowAdvanced = () => {
-      setShowAdvanced(!showAdvanced);
-    };
+      setShowAdvanced(!showAdvanced)
+    }
 
     return (
       <>
@@ -130,7 +119,7 @@ export const AdvancedOptions: FunctionComponent<Props> = observer(
             {appState.enableUnfinishedFeatures && isVault && (
               <>
                 <DecoratedInput
-                  className={`mb-2`}
+                  className={'mb-2'}
                   left={[<Icon type="folder" className="color-neutral" />]}
                   type="text"
                   placeholder="Vault name"
@@ -139,7 +128,7 @@ export const AdvancedOptions: FunctionComponent<Props> = observer(
                   disabled={disabled}
                 />
                 <DecoratedInput
-                  className={`mb-2`}
+                  className={'mb-2'}
                   left={[<Icon type="server" className="color-neutral" />]}
                   type="text"
                   placeholder="Vault userphrase"
@@ -188,6 +177,6 @@ export const AdvancedOptions: FunctionComponent<Props> = observer(
           </div>
         ) : null}
       </>
-    );
-  }
-);
+    )
+  },
+)
diff --git a/app/assets/javascripts/components/AccountMenu/ConfirmPassword.tsx b/app/assets/javascripts/Components/AccountMenu/ConfirmPassword.tsx
similarity index 60%
rename from app/assets/javascripts/components/AccountMenu/ConfirmPassword.tsx
rename to app/assets/javascripts/Components/AccountMenu/ConfirmPassword.tsx
index cbb981c8c..bf633af22 100644
--- a/app/assets/javascripts/components/AccountMenu/ConfirmPassword.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/ConfirmPassword.tsx
@@ -1,96 +1,96 @@
-import { STRING_NON_MATCHING_PASSWORDS } from '@/strings';
-import { WebApplication } from '@/ui_models/application';
-import { AppState } from '@/ui_models/app_state';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { useEffect, useRef, useState } from 'preact/hooks';
-import { AccountMenuPane } from '.';
-import { Button } from '../Button';
-import { Checkbox } from '../Checkbox';
-import { DecoratedPasswordInput } from '../DecoratedPasswordInput';
-import { Icon } from '../Icon';
-import { IconButton } from '../IconButton';
+import { STRING_NON_MATCHING_PASSWORDS } from '@/Strings'
+import { WebApplication } from '@/UIModels/Application'
+import { AppState } from '@/UIModels/AppState'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { AccountMenuPane } from '.'
+import { Button } from '@/Components/Button/Button'
+import { Checkbox } from '@/Components/Checkbox'
+import { DecoratedPasswordInput } from '@/Components/Input/DecoratedPasswordInput'
+import { Icon } from '@/Components/Icon'
+import { IconButton } from '@/Components/Button/IconButton'
 
 type Props = {
-  appState: AppState;
-  application: WebApplication;
-  setMenuPane: (pane: AccountMenuPane) => void;
-  email: string;
-  password: string;
-};
+  appState: AppState
+  application: WebApplication
+  setMenuPane: (pane: AccountMenuPane) => void
+  email: string
+  password: string
+}
 
 export const ConfirmPassword: FunctionComponent<Props> = observer(
   ({ application, appState, setMenuPane, email, password }) => {
-    const { notesAndTagsCount } = appState.accountMenu;
-    const [confirmPassword, setConfirmPassword] = useState('');
-    const [isRegistering, setIsRegistering] = useState(false);
-    const [isEphemeral, setIsEphemeral] = useState(false);
-    const [shouldMergeLocal, setShouldMergeLocal] = useState(true);
-    const [error, setError] = useState('');
+    const { notesAndTagsCount } = appState.accountMenu
+    const [confirmPassword, setConfirmPassword] = useState('')
+    const [isRegistering, setIsRegistering] = useState(false)
+    const [isEphemeral, setIsEphemeral] = useState(false)
+    const [shouldMergeLocal, setShouldMergeLocal] = useState(true)
+    const [error, setError] = useState('')
 
-    const passwordInputRef = useRef<HTMLInputElement>(null);
+    const passwordInputRef = useRef<HTMLInputElement>(null)
 
     useEffect(() => {
-      passwordInputRef.current?.focus();
-    }, []);
+      passwordInputRef.current?.focus()
+    }, [])
 
     const handlePasswordChange = (text: string) => {
-      setConfirmPassword(text);
-    };
+      setConfirmPassword(text)
+    }
 
     const handleEphemeralChange = () => {
-      setIsEphemeral(!isEphemeral);
-    };
+      setIsEphemeral(!isEphemeral)
+    }
 
     const handleShouldMergeChange = () => {
-      setShouldMergeLocal(!shouldMergeLocal);
-    };
+      setShouldMergeLocal(!shouldMergeLocal)
+    }
 
     const handleKeyDown = (e: KeyboardEvent) => {
       if (error.length) {
-        setError('');
+        setError('')
       }
       if (e.key === 'Enter') {
-        handleConfirmFormSubmit(e);
+        handleConfirmFormSubmit(e)
       }
-    };
+    }
 
     const handleConfirmFormSubmit = (e: Event) => {
-      e.preventDefault();
+      e.preventDefault()
 
       if (!password) {
-        passwordInputRef.current?.focus();
-        return;
+        passwordInputRef.current?.focus()
+        return
       }
 
       if (password === confirmPassword) {
-        setIsRegistering(true);
+        setIsRegistering(true)
         application
           .register(email, password, isEphemeral, shouldMergeLocal)
           .then((res) => {
             if (res.error) {
-              throw new Error(res.error.message);
+              throw new Error(res.error.message)
             }
-            appState.accountMenu.closeAccountMenu();
-            appState.accountMenu.setCurrentPane(AccountMenuPane.GeneralMenu);
+            appState.accountMenu.closeAccountMenu()
+            appState.accountMenu.setCurrentPane(AccountMenuPane.GeneralMenu)
           })
           .catch((err) => {
-            console.error(err);
-            setError(err.message);
+            console.error(err)
+            setError(err.message)
           })
           .finally(() => {
-            setIsRegistering(false);
-          });
+            setIsRegistering(false)
+          })
       } else {
-        setError(STRING_NON_MATCHING_PASSWORDS);
-        setConfirmPassword('');
-        passwordInputRef.current?.focus();
+        setError(STRING_NON_MATCHING_PASSWORDS)
+        setConfirmPassword('')
+        passwordInputRef.current?.focus()
       }
-    };
+    }
 
     const handleGoBack = () => {
-      setMenuPane(AccountMenuPane.Register);
-    };
+      setMenuPane(AccountMenuPane.Register)
+    }
 
     return (
       <>
@@ -110,8 +110,7 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
           <span className="color-dark-red">
             Standard Notes does not have a password reset option
           </span>
-          . If you forget your password, you will permanently lose access to
-          your data.
+          . If you forget your password, you will permanently lose access to your data.
         </div>
         <form onSubmit={handleConfirmFormSubmit} className="px-3 mb-1">
           <DecoratedPasswordInput
@@ -127,9 +126,7 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
           {error ? <div className="color-dark-red my-2">{error}</div> : null}
           <Button
             className="btn-w-full mt-1 mb-3"
-            label={
-              isRegistering ? 'Creating account...' : 'Create account & sign in'
-            }
+            label={isRegistering ? 'Creating account...' : 'Create account & sign in'}
             variant="primary"
             onClick={handleConfirmFormSubmit}
             disabled={isRegistering}
@@ -152,6 +149,6 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
           ) : null}
         </form>
       </>
-    );
-  }
-);
+    )
+  },
+)
diff --git a/app/assets/javascripts/components/AccountMenu/CreateAccount.tsx b/app/assets/javascripts/Components/AccountMenu/CreateAccount.tsx
similarity index 58%
rename from app/assets/javascripts/components/AccountMenu/CreateAccount.tsx
rename to app/assets/javascripts/Components/AccountMenu/CreateAccount.tsx
index fb6c8ffa7..660afa802 100644
--- a/app/assets/javascripts/components/AccountMenu/CreateAccount.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/CreateAccount.tsx
@@ -1,90 +1,82 @@
-import { WebApplication } from '@/ui_models/application';
-import { AppState } from '@/ui_models/app_state';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { StateUpdater, useEffect, useRef, useState } from 'preact/hooks';
-import { AccountMenuPane } from '.';
-import { Button } from '../Button';
-import { DecoratedInput } from '../DecoratedInput';
-import { DecoratedPasswordInput } from '../DecoratedPasswordInput';
-import { Icon } from '../Icon';
-import { IconButton } from '../IconButton';
-import { AdvancedOptions } from './AdvancedOptions';
+import { WebApplication } from '@/UIModels/Application'
+import { AppState } from '@/UIModels/AppState'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { StateUpdater, useEffect, useRef, useState } from 'preact/hooks'
+import { AccountMenuPane } from '.'
+import { Button } from '@/Components/Button/Button'
+import { DecoratedInput } from '@/Components/Input/DecoratedInput'
+import { DecoratedPasswordInput } from '@/Components/Input/DecoratedPasswordInput'
+import { Icon } from '@/Components/Icon'
+import { IconButton } from '@/Components/Button/IconButton'
+import { AdvancedOptions } from './AdvancedOptions'
 
 type Props = {
-  appState: AppState;
-  application: WebApplication;
-  setMenuPane: (pane: AccountMenuPane) => void;
-  email: string;
-  setEmail: StateUpdater<string>;
-  password: string;
-  setPassword: StateUpdater<string>;
-};
+  appState: AppState
+  application: WebApplication
+  setMenuPane: (pane: AccountMenuPane) => void
+  email: string
+  setEmail: StateUpdater<string>
+  password: string
+  setPassword: StateUpdater<string>
+}
 
 export const CreateAccount: FunctionComponent<Props> = observer(
-  ({
-    appState,
-    application,
-    setMenuPane,
-    email,
-    setEmail,
-    password,
-    setPassword,
-  }) => {
-    const emailInputRef = useRef<HTMLInputElement>(null);
-    const passwordInputRef = useRef<HTMLInputElement>(null);
-    const [isVault, setIsVault] = useState(false);
+  ({ appState, application, setMenuPane, email, setEmail, password, setPassword }) => {
+    const emailInputRef = useRef<HTMLInputElement>(null)
+    const passwordInputRef = useRef<HTMLInputElement>(null)
+    const [isVault, setIsVault] = useState(false)
 
     useEffect(() => {
       if (emailInputRef.current) {
-        emailInputRef.current?.focus();
+        emailInputRef.current?.focus()
       }
-    }, []);
+    }, [])
 
     const handleEmailChange = (text: string) => {
-      setEmail(text);
-    };
+      setEmail(text)
+    }
 
     const handlePasswordChange = (text: string) => {
-      setPassword(text);
-    };
+      setPassword(text)
+    }
 
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Enter') {
-        handleRegisterFormSubmit(e);
+        handleRegisterFormSubmit(e)
       }
-    };
+    }
 
     const handleRegisterFormSubmit = (e: Event) => {
-      e.preventDefault();
+      e.preventDefault()
 
       if (!email || email.length === 0) {
-        emailInputRef.current?.focus();
-        return;
+        emailInputRef.current?.focus()
+        return
       }
 
       if (!password || password.length === 0) {
-        passwordInputRef.current?.focus();
-        return;
+        passwordInputRef.current?.focus()
+        return
       }
 
-      setEmail(email);
-      setPassword(password);
-      setMenuPane(AccountMenuPane.ConfirmPassword);
-    };
+      setEmail(email)
+      setPassword(password)
+      setMenuPane(AccountMenuPane.ConfirmPassword)
+    }
 
     const handleClose = () => {
-      setMenuPane(AccountMenuPane.GeneralMenu);
-      setEmail('');
-      setPassword('');
-    };
+      setMenuPane(AccountMenuPane.GeneralMenu)
+      setEmail('')
+      setPassword('')
+    }
 
     const onVaultChange = (isVault: boolean, vaultedEmail?: string) => {
-      setIsVault(isVault);
+      setIsVault(isVault)
       if (isVault && vaultedEmail) {
-        setEmail(vaultedEmail);
+        setEmail(vaultedEmail)
       }
-    };
+    }
 
     return (
       <>
@@ -133,6 +125,6 @@ export const CreateAccount: FunctionComponent<Props> = observer(
           onVaultChange={onVaultChange}
         />
       </>
-    );
-  }
-);
+    )
+  },
+)
diff --git a/app/assets/javascripts/components/AccountMenu/GeneralAccountMenu.tsx b/app/assets/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx
similarity index 69%
rename from app/assets/javascripts/components/AccountMenu/GeneralAccountMenu.tsx
rename to app/assets/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx
index be83c04fa..3834aa89f 100644
--- a/app/assets/javascripts/components/AccountMenu/GeneralAccountMenu.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx
@@ -1,37 +1,37 @@
-import { WebApplication } from '@/ui_models/application';
-import { AppState } from '@/ui_models/app_state';
-import { observer } from 'mobx-react-lite';
-import { Icon } from '../Icon';
-import { formatLastSyncDate } from '@/components/Preferences/panes/account/Sync';
-import { SyncQueueStrategy } from '@standardnotes/snjs';
-import { STRING_GENERIC_SYNC_ERROR } from '@/strings';
-import { useState } from 'preact/hooks';
-import { AccountMenuPane } from '.';
-import { FunctionComponent } from 'preact';
-import { Menu } from '../Menu/Menu';
-import { MenuItem, MenuItemSeparator, MenuItemType } from '../Menu/MenuItem';
-import { WorkspaceSwitcherOption } from './WorkspaceSwitcher/WorkspaceSwitcherOption';
-import { ApplicationGroup } from '@/ui_models/application_group';
+import { WebApplication } from '@/UIModels/Application'
+import { AppState } from '@/UIModels/AppState'
+import { observer } from 'mobx-react-lite'
+import { Icon } from '@/Components/Icon'
+import { formatLastSyncDate } from '@/Components/Preferences/Panes/Account/Sync'
+import { SyncQueueStrategy } from '@standardnotes/snjs'
+import { STRING_GENERIC_SYNC_ERROR } from '@/Strings'
+import { useState } from 'preact/hooks'
+import { AccountMenuPane } from '.'
+import { FunctionComponent } from 'preact'
+import { Menu } from '@/Components/Menu/Menu'
+import { MenuItem, MenuItemSeparator, MenuItemType } from '@/Components/Menu/MenuItem'
+import { WorkspaceSwitcherOption } from './WorkspaceSwitcher/WorkspaceSwitcherOption'
+import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
 
 type Props = {
-  appState: AppState;
-  application: WebApplication;
-  mainApplicationGroup: ApplicationGroup;
-  setMenuPane: (pane: AccountMenuPane) => void;
-  closeMenu: () => void;
-};
+  appState: AppState
+  application: WebApplication
+  mainApplicationGroup: ApplicationGroup
+  setMenuPane: (pane: AccountMenuPane) => void
+  closeMenu: () => void
+}
 
-const iconClassName = 'color-neutral mr-2';
+const iconClassName = 'color-neutral mr-2'
 
 export const GeneralAccountMenu: FunctionComponent<Props> = observer(
   ({ application, appState, setMenuPane, closeMenu, mainApplicationGroup }) => {
-    const [isSyncingInProgress, setIsSyncingInProgress] = useState(false);
+    const [isSyncingInProgress, setIsSyncingInProgress] = useState(false)
     const [lastSyncDate, setLastSyncDate] = useState(
-      formatLastSyncDate(application.sync.getLastSyncDate() as Date)
-    );
+      formatLastSyncDate(application.sync.getLastSyncDate() as Date),
+    )
 
     const doSynchronization = async () => {
-      setIsSyncingInProgress(true);
+      setIsSyncingInProgress(true)
 
       application.sync
         .sync({
@@ -40,25 +40,23 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
         })
         .then((res) => {
           if (res && (res as any).error) {
-            throw new Error();
+            throw new Error()
           } else {
-            setLastSyncDate(
-              formatLastSyncDate(application.sync.getLastSyncDate() as Date)
-            );
+            setLastSyncDate(formatLastSyncDate(application.sync.getLastSyncDate() as Date))
           }
         })
         .catch(() => {
-          application.alertService.alert(STRING_GENERIC_SYNC_ERROR);
+          application.alertService.alert(STRING_GENERIC_SYNC_ERROR).catch(console.error)
         })
         .finally(() => {
-          setIsSyncingInProgress(false);
-        });
-    };
+          setIsSyncingInProgress(false)
+        })
+    }
 
-    const user = application.getUser();
+    const user = application.getUser()
 
-    const CREATE_ACCOUNT_INDEX = 1;
-    const SWITCHER_INDEX = 0;
+    const CREATE_ACCOUNT_INDEX = 1
+    const SWITCHER_INDEX = 0
 
     return (
       <>
@@ -90,10 +88,7 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
                   </div>
                 </div>
               )}
-              <div
-                className="flex cursor-pointer color-grey-1"
-                onClick={doSynchronization}
-              >
+              <div className="flex cursor-pointer color-grey-1" onClick={doSynchronization}>
                 <Icon type="sync" />
               </div>
             </div>
@@ -102,8 +97,8 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
           <>
             <div className="px-3 mb-1">
               <div className="mb-3 color-foreground">
-                You’re offline. Sign in to sync your notes and preferences
-                across all your devices and enable end-to-end encryption.
+                You’re offline. Sign in to sync your notes and preferences across all your devices
+                and enable end-to-end encryption.
               </div>
               <div className="flex items-center color-grey-1">
                 <Icon type="cloud-off" className="mr-2" />
@@ -116,9 +111,7 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
           isOpen={appState.accountMenu.show}
           a11yLabel="General account menu"
           closeMenu={closeMenu}
-          initialFocus={
-            !application.hasAccount() ? CREATE_ACCOUNT_INDEX : SWITCHER_INDEX
-          }
+          initialFocus={!application.hasAccount() ? CREATE_ACCOUNT_INDEX : SWITCHER_INDEX}
         >
           <MenuItemSeparator />
           <WorkspaceSwitcherOption
@@ -130,9 +123,9 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
             <MenuItem
               type={MenuItemType.IconButton}
               onClick={() => {
-                appState.accountMenu.closeAccountMenu();
-                appState.preferences.setCurrentPane('account');
-                appState.preferences.openPreferences();
+                appState.accountMenu.closeAccountMenu()
+                appState.preferences.setCurrentPane('account')
+                appState.preferences.openPreferences()
               }}
             >
               <Icon type="user" className={iconClassName} />
@@ -143,7 +136,7 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
               <MenuItem
                 type={MenuItemType.IconButton}
                 onClick={() => {
-                  setMenuPane(AccountMenuPane.Register);
+                  setMenuPane(AccountMenuPane.Register)
                 }}
               >
                 <Icon type="user" className={iconClassName} />
@@ -152,7 +145,7 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
               <MenuItem
                 type={MenuItemType.IconButton}
                 onClick={() => {
-                  setMenuPane(AccountMenuPane.SignIn);
+                  setMenuPane(AccountMenuPane.SignIn)
                 }}
               >
                 <Icon type="signIn" className={iconClassName} />
@@ -164,9 +157,9 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
             className="justify-between"
             type={MenuItemType.IconButton}
             onClick={() => {
-              appState.accountMenu.closeAccountMenu();
-              appState.preferences.setCurrentPane('help-feedback');
-              appState.preferences.openPreferences();
+              appState.accountMenu.closeAccountMenu()
+              appState.preferences.setCurrentPane('help-feedback')
+              appState.preferences.openPreferences()
             }}
           >
             <div className="flex items-center">
@@ -181,7 +174,7 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
               <MenuItem
                 type={MenuItemType.IconButton}
                 onClick={() => {
-                  appState.accountMenu.setSigningOut(true);
+                  appState.accountMenu.setSigningOut(true)
                 }}
               >
                 <Icon type="signOut" className={iconClassName} />
@@ -191,6 +184,6 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
           ) : null}
         </Menu>
       </>
-    );
-  }
-);
+    )
+  },
+)
diff --git a/app/assets/javascripts/components/AccountMenu/SignIn.tsx b/app/assets/javascripts/Components/AccountMenu/SignIn.tsx
similarity index 62%
rename from app/assets/javascripts/components/AccountMenu/SignIn.tsx
rename to app/assets/javascripts/Components/AccountMenu/SignIn.tsx
index 0d4deacaa..7df3b8260 100644
--- a/app/assets/javascripts/components/AccountMenu/SignIn.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/SignIn.tsx
@@ -1,134 +1,134 @@
-import { WebApplication } from '@/ui_models/application';
-import { AppState } from '@/ui_models/app_state';
-import { isDev } from '@/utils';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
-import { AccountMenuPane } from '.';
-import { Button } from '../Button';
-import { Checkbox } from '../Checkbox';
-import { DecoratedInput } from '../DecoratedInput';
-import { DecoratedPasswordInput } from '../DecoratedPasswordInput';
-import { Icon } from '../Icon';
-import { IconButton } from '../IconButton';
-import { AdvancedOptions } from './AdvancedOptions';
+import { WebApplication } from '@/UIModels/Application'
+import { AppState } from '@/UIModels/AppState'
+import { isDev } from '@/Utils'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
+import { AccountMenuPane } from '.'
+import { Button } from '@/Components/Button/Button'
+import { Checkbox } from '@/Components/Checkbox'
+import { DecoratedInput } from '@/Components/Input/DecoratedInput'
+import { DecoratedPasswordInput } from '@/Components/Input/DecoratedPasswordInput'
+import { Icon } from '@/Components/Icon'
+import { IconButton } from '@/Components/Button/IconButton'
+import { AdvancedOptions } from './AdvancedOptions'
 
 type Props = {
-  appState: AppState;
-  application: WebApplication;
-  setMenuPane: (pane: AccountMenuPane) => void;
-};
+  appState: AppState
+  application: WebApplication
+  setMenuPane: (pane: AccountMenuPane) => void
+}
 
 export const SignInPane: FunctionComponent<Props> = observer(
   ({ application, appState, setMenuPane }) => {
-    const { notesAndTagsCount } = appState.accountMenu;
-    const [email, setEmail] = useState('');
-    const [password, setPassword] = useState('');
-    const [error, setError] = useState('');
-    const [isEphemeral, setIsEphemeral] = useState(false);
+    const { notesAndTagsCount } = appState.accountMenu
+    const [email, setEmail] = useState('')
+    const [password, setPassword] = useState('')
+    const [error, setError] = useState('')
+    const [isEphemeral, setIsEphemeral] = useState(false)
 
-    const [isStrictSignin, setIsStrictSignin] = useState(false);
-    const [isSigningIn, setIsSigningIn] = useState(false);
-    const [shouldMergeLocal, setShouldMergeLocal] = useState(true);
-    const [isVault, setIsVault] = useState(false);
+    const [isStrictSignin, setIsStrictSignin] = useState(false)
+    const [isSigningIn, setIsSigningIn] = useState(false)
+    const [shouldMergeLocal, setShouldMergeLocal] = useState(true)
+    const [isVault, setIsVault] = useState(false)
 
-    const emailInputRef = useRef<HTMLInputElement>(null);
-    const passwordInputRef = useRef<HTMLInputElement>(null);
+    const emailInputRef = useRef<HTMLInputElement>(null)
+    const passwordInputRef = useRef<HTMLInputElement>(null)
 
     useEffect(() => {
       if (emailInputRef?.current) {
-        emailInputRef.current?.focus();
+        emailInputRef.current?.focus()
       }
       if (isDev && window.devAccountEmail) {
-        setEmail(window.devAccountEmail);
-        setPassword(window.devAccountPassword as string);
+        setEmail(window.devAccountEmail)
+        setPassword(window.devAccountPassword as string)
       }
-    }, []);
+    }, [])
 
     const resetInvalid = () => {
       if (error.length) {
-        setError('');
+        setError('')
       }
-    };
+    }
 
     const handleEmailChange = (text: string) => {
-      setEmail(text);
-    };
+      setEmail(text)
+    }
 
     const handlePasswordChange = (text: string) => {
       if (error.length) {
-        setError('');
+        setError('')
       }
-      setPassword(text);
-    };
+      setPassword(text)
+    }
 
     const handleEphemeralChange = () => {
-      setIsEphemeral(!isEphemeral);
-    };
+      setIsEphemeral(!isEphemeral)
+    }
 
     const handleStrictSigninChange = () => {
-      setIsStrictSignin(!isStrictSignin);
-    };
+      setIsStrictSignin(!isStrictSignin)
+    }
 
     const handleShouldMergeChange = () => {
-      setShouldMergeLocal(!shouldMergeLocal);
-    };
+      setShouldMergeLocal(!shouldMergeLocal)
+    }
 
     const signIn = () => {
-      setIsSigningIn(true);
-      emailInputRef?.current?.blur();
-      passwordInputRef?.current?.blur();
+      setIsSigningIn(true)
+      emailInputRef?.current?.blur()
+      passwordInputRef?.current?.blur()
 
       application
         .signIn(email, password, isStrictSignin, isEphemeral, shouldMergeLocal)
         .then((res) => {
           if (res.error) {
-            throw new Error(res.error.message);
+            throw new Error(res.error.message)
           }
-          appState.accountMenu.closeAccountMenu();
+          appState.accountMenu.closeAccountMenu()
         })
         .catch((err) => {
-          console.error(err);
-          setError(err.message ?? err.toString());
-          setPassword('');
-          passwordInputRef?.current?.blur();
+          console.error(err)
+          setError(err.message ?? err.toString())
+          setPassword('')
+          passwordInputRef?.current?.blur()
         })
         .finally(() => {
-          setIsSigningIn(false);
-        });
-    };
+          setIsSigningIn(false)
+        })
+    }
 
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Enter') {
-        handleSignInFormSubmit(e);
+        handleSignInFormSubmit(e)
       }
-    };
+    }
 
     const onVaultChange = useCallback(
       (newIsVault: boolean, vaultedEmail?: string) => {
-        setIsVault(newIsVault);
+        setIsVault(newIsVault)
         if (newIsVault && vaultedEmail) {
-          setEmail(vaultedEmail);
+          setEmail(vaultedEmail)
         }
       },
-      [setEmail]
-    );
+      [setEmail],
+    )
 
     const handleSignInFormSubmit = (e: Event) => {
-      e.preventDefault();
+      e.preventDefault()
 
       if (!email || email.length === 0) {
-        emailInputRef?.current?.focus();
-        return;
+        emailInputRef?.current?.focus()
+        return
       }
 
       if (!password || password.length === 0) {
-        passwordInputRef?.current?.focus();
-        return;
+        passwordInputRef?.current?.focus()
+        return
       }
 
-      signIn();
-    };
+      signIn()
+    }
 
     return (
       <>
@@ -201,6 +201,6 @@ export const SignInPane: FunctionComponent<Props> = observer(
           onStrictSignInChange={handleStrictSigninChange}
         />
       </>
-    );
-  }
-);
+    )
+  },
+)
diff --git a/app/assets/javascripts/components/AccountMenu/User.tsx b/app/assets/javascripts/Components/AccountMenu/User.tsx
similarity index 68%
rename from app/assets/javascripts/components/AccountMenu/User.tsx
rename to app/assets/javascripts/Components/AccountMenu/User.tsx
index 7815d4e74..2752a0504 100644
--- a/app/assets/javascripts/components/AccountMenu/User.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/User.tsx
@@ -1,16 +1,16 @@
-import { observer } from 'mobx-react-lite';
-import { AppState } from '@/ui_models/app_state';
-import { WebApplication } from '@/ui_models/application';
-import { User as UserType } from '@standardnotes/snjs';
+import { observer } from 'mobx-react-lite'
+import { AppState } from '@/UIModels/AppState'
+import { WebApplication } from '@/UIModels/Application'
+import { User as UserType } from '@standardnotes/snjs'
 
 type Props = {
-  appState: AppState;
-  application: WebApplication;
-};
+  appState: AppState
+  application: WebApplication
+}
 
 const User = observer(({ appState, application }: Props) => {
-  const { server } = appState.accountMenu;
-  const user = application.getUser() as UserType;
+  const { server } = appState.accountMenu
+  const user = application.getUser() as UserType
 
   return (
     <div className="sk-panel-section">
@@ -18,8 +18,7 @@ const User = observer(({ appState, application }: Props) => {
         <div className="sk-notification danger">
           <div className="sk-notification-title">Sync Unreachable</div>
           <div className="sk-notification-text">
-            Hmm...we can't seem to sync your account. The reason:{' '}
-            {appState.sync.errorMessage}
+            Hmm...we can't seem to sync your account. The reason: {appState.sync.errorMessage}
           </div>
           <a
             className="sk-a info-contrast sk-bold sk-panel-row"
@@ -39,7 +38,7 @@ const User = observer(({ appState, application }: Props) => {
       </div>
       <div className="sk-panel-row" />
     </div>
-  );
-});
+  )
+})
 
-export default User;
+export default User
diff --git a/app/assets/javascripts/components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
similarity index 67%
rename from app/assets/javascripts/components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
rename to app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
index 5f222726f..11026f65b 100644
--- a/app/assets/javascripts/components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
@@ -1,16 +1,16 @@
-import { Icon } from '@/components/Icon';
-import { MenuItem, MenuItemType } from '@/components/Menu/MenuItem';
-import { KeyboardKey } from '@/services/ioService';
-import { ApplicationDescriptor } from '@standardnotes/snjs/dist/@types';
-import { FunctionComponent } from 'preact';
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { Icon } from '@/Components/Icon'
+import { MenuItem, MenuItemType } from '@/Components/Menu/MenuItem'
+import { KeyboardKey } from '@/Services/IOService'
+import { ApplicationDescriptor } from '@standardnotes/snjs/dist/@types'
+import { FunctionComponent } from 'preact'
+import { useEffect, useRef, useState } from 'preact/hooks'
 
 type Props = {
-  descriptor: ApplicationDescriptor;
-  onClick: () => void;
-  onDelete: () => void;
-  renameDescriptor: (label: string) => void;
-};
+  descriptor: ApplicationDescriptor
+  onClick: () => void
+  onDelete: () => void
+  renameDescriptor: (label: string) => void
+}
 
 export const WorkspaceMenuItem: FunctionComponent<Props> = ({
   descriptor,
@@ -18,26 +18,26 @@ export const WorkspaceMenuItem: FunctionComponent<Props> = ({
   onDelete,
   renameDescriptor,
 }) => {
-  const [isRenaming, setIsRenaming] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
+  const [isRenaming, setIsRenaming] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
     if (isRenaming) {
-      inputRef.current?.focus();
+      inputRef.current?.focus()
     }
-  }, [isRenaming]);
+  }, [isRenaming])
 
   const handleInputKeyDown = (event: KeyboardEvent) => {
     if (event.key === KeyboardKey.Enter) {
-      inputRef.current?.blur();
+      inputRef.current?.blur()
     }
-  };
+  }
 
   const handleInputBlur = (event: FocusEvent) => {
-    const name = (event.target as HTMLInputElement).value;
-    renameDescriptor(name);
-    setIsRenaming(false);
-  };
+    const name = (event.target as HTMLInputElement).value
+    renameDescriptor(name)
+    setIsRenaming(false)
+  }
 
   return (
     <MenuItem
@@ -63,7 +63,7 @@ export const WorkspaceMenuItem: FunctionComponent<Props> = ({
             <button
               className="w-5 h-5 p-0 mr-3 border-0 bg-transparent hover:bg-contrast cursor-pointer"
               onClick={() => {
-                setIsRenaming((isRenaming) => !isRenaming);
+                setIsRenaming((isRenaming) => !isRenaming)
               }}
             >
               <Icon type="pencil" className="sn-icon--mid color-neutral" />
@@ -78,5 +78,5 @@ export const WorkspaceMenuItem: FunctionComponent<Props> = ({
         )}
       </div>
     </MenuItem>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx
new file mode 100644
index 000000000..876b4c291
--- /dev/null
+++ b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx
@@ -0,0 +1,64 @@
+import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
+import { AppState } from '@/UIModels/AppState'
+import { ApplicationDescriptor } from '@standardnotes/snjs'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { useEffect, useState } from 'preact/hooks'
+import { Icon } from '@/Components/Icon'
+import { Menu } from '@/Components/Menu/Menu'
+import { MenuItem, MenuItemSeparator, MenuItemType } from '@/Components/Menu/MenuItem'
+import { WorkspaceMenuItem } from './WorkspaceMenuItem'
+
+type Props = {
+  mainApplicationGroup: ApplicationGroup
+  appState: AppState
+  isOpen: boolean
+}
+
+export const WorkspaceSwitcherMenu: FunctionComponent<Props> = observer(
+  ({ mainApplicationGroup, appState, isOpen }) => {
+    const [applicationDescriptors, setApplicationDescriptors] = useState<ApplicationDescriptor[]>(
+      [],
+    )
+
+    useEffect(() => {
+      const removeAppGroupObserver = mainApplicationGroup.addApplicationChangeObserver(() => {
+        const applicationDescriptors = mainApplicationGroup.getDescriptors()
+        setApplicationDescriptors(applicationDescriptors)
+      })
+
+      return () => {
+        removeAppGroupObserver()
+      }
+    }, [mainApplicationGroup])
+
+    return (
+      <Menu a11yLabel="Workspace switcher menu" className="px-0 focus:shadow-none" isOpen={isOpen}>
+        {applicationDescriptors.map((descriptor) => (
+          <WorkspaceMenuItem
+            descriptor={descriptor}
+            onDelete={() => {
+              appState.accountMenu.setSigningOut(true)
+            }}
+            onClick={() => {
+              mainApplicationGroup.loadApplicationForDescriptor(descriptor).catch(console.error)
+            }}
+            renameDescriptor={(label: string) =>
+              mainApplicationGroup.renameDescriptor(descriptor, label)
+            }
+          />
+        ))}
+        <MenuItemSeparator />
+        <MenuItem
+          type={MenuItemType.IconButton}
+          onClick={() => {
+            mainApplicationGroup.addNewApplication().catch(console.error)
+          }}
+        >
+          <Icon type="user-add" className="color-neutral mr-2" />
+          Add another workspace
+        </MenuItem>
+      </Menu>
+    )
+  },
+)
diff --git a/app/assets/javascripts/components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx
similarity index 55%
rename from app/assets/javascripts/components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx
rename to app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx
index d369c3977..284e0a400 100644
--- a/app/assets/javascripts/components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx
@@ -1,53 +1,47 @@
-import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/constants';
-import { ApplicationGroup } from '@/ui_models/application_group';
-import { AppState } from '@/ui_models/app_state';
-import {
-  calculateSubmenuStyle,
-  SubmenuStyle,
-} from '@/utils/calculateSubmenuStyle';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { useEffect, useRef, useState } from 'preact/hooks';
-import { Icon } from '../../Icon';
-import { WorkspaceSwitcherMenu } from './WorkspaceSwitcherMenu';
+import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants'
+import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
+import { AppState } from '@/UIModels/AppState'
+import { calculateSubmenuStyle, SubmenuStyle } from '@/Utils/CalculateSubmenuStyle'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { Icon } from '@/Components/Icon'
+import { WorkspaceSwitcherMenu } from './WorkspaceSwitcherMenu'
 
 type Props = {
-  mainApplicationGroup: ApplicationGroup;
-  appState: AppState;
-};
+  mainApplicationGroup: ApplicationGroup
+  appState: AppState
+}
 
 export const WorkspaceSwitcherOption: FunctionComponent<Props> = observer(
   ({ mainApplicationGroup, appState }) => {
-    const buttonRef = useRef<HTMLButtonElement>(null);
-    const menuRef = useRef<HTMLDivElement>(null);
-    const [isOpen, setIsOpen] = useState(false);
-    const [menuStyle, setMenuStyle] = useState<SubmenuStyle>();
+    const buttonRef = useRef<HTMLButtonElement>(null)
+    const menuRef = useRef<HTMLDivElement>(null)
+    const [isOpen, setIsOpen] = useState(false)
+    const [menuStyle, setMenuStyle] = useState<SubmenuStyle>()
 
     const toggleMenu = () => {
       if (!isOpen) {
-        const menuPosition = calculateSubmenuStyle(buttonRef.current);
+        const menuPosition = calculateSubmenuStyle(buttonRef.current)
         if (menuPosition) {
-          setMenuStyle(menuPosition);
+          setMenuStyle(menuPosition)
         }
       }
 
-      setIsOpen(!isOpen);
-    };
+      setIsOpen(!isOpen)
+    }
 
     useEffect(() => {
       if (isOpen) {
         setTimeout(() => {
-          const newMenuPosition = calculateSubmenuStyle(
-            buttonRef.current,
-            menuRef.current
-          );
+          const newMenuPosition = calculateSubmenuStyle(buttonRef.current, menuRef.current)
 
           if (newMenuPosition) {
-            setMenuStyle(newMenuPosition);
+            setMenuStyle(newMenuPosition)
           }
-        });
+        })
       }
-    }, [isOpen]);
+    }, [isOpen])
 
     return (
       <>
@@ -78,6 +72,6 @@ export const WorkspaceSwitcherOption: FunctionComponent<Props> = observer(
           </div>
         )}
       </>
-    );
-  }
-);
+    )
+  },
+)
diff --git a/app/assets/javascripts/components/AccountMenu/index.tsx b/app/assets/javascripts/Components/AccountMenu/index.tsx
similarity index 54%
rename from app/assets/javascripts/components/AccountMenu/index.tsx
rename to app/assets/javascripts/Components/AccountMenu/index.tsx
index 9e2e1381a..cf4ae5772 100644
--- a/app/assets/javascripts/components/AccountMenu/index.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/index.tsx
@@ -1,15 +1,15 @@
-import { observer } from 'mobx-react-lite';
-import { useCloseOnClickOutside } from '@/components/utils';
-import { AppState } from '@/ui_models/app_state';
-import { WebApplication } from '@/ui_models/application';
-import { useRef, useState } from 'preact/hooks';
-import { GeneralAccountMenu } from './GeneralAccountMenu';
-import { FunctionComponent } from 'preact';
-import { SignInPane } from './SignIn';
-import { CreateAccount } from './CreateAccount';
-import { ConfirmPassword } from './ConfirmPassword';
-import { JSXInternal } from 'preact/src/jsx';
-import { ApplicationGroup } from '@/ui_models/application_group';
+import { observer } from 'mobx-react-lite'
+import { useCloseOnClickOutside } from '@/Hooks/useCloseOnClickOutside'
+import { AppState } from '@/UIModels/AppState'
+import { WebApplication } from '@/UIModels/Application'
+import { useRef, useState } from 'preact/hooks'
+import { GeneralAccountMenu } from './GeneralAccountMenu'
+import { FunctionComponent } from 'preact'
+import { SignInPane } from './SignIn'
+import { CreateAccount } from './CreateAccount'
+import { ConfirmPassword } from './ConfirmPassword'
+import { JSXInternal } from 'preact/src/jsx'
+import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
 
 export enum AccountMenuPane {
   GeneralMenu,
@@ -19,32 +19,25 @@ export enum AccountMenuPane {
 }
 
 type Props = {
-  appState: AppState;
-  application: WebApplication;
-  onClickOutside: () => void;
-  mainApplicationGroup: ApplicationGroup;
-};
+  appState: AppState
+  application: WebApplication
+  onClickOutside: () => void
+  mainApplicationGroup: ApplicationGroup
+}
 
 type PaneSelectorProps = {
-  appState: AppState;
-  application: WebApplication;
-  mainApplicationGroup: ApplicationGroup;
-  menuPane: AccountMenuPane;
-  setMenuPane: (pane: AccountMenuPane) => void;
-  closeMenu: () => void;
-};
+  appState: AppState
+  application: WebApplication
+  mainApplicationGroup: ApplicationGroup
+  menuPane: AccountMenuPane
+  setMenuPane: (pane: AccountMenuPane) => void
+  closeMenu: () => void
+}
 
 const MenuPaneSelector: FunctionComponent<PaneSelectorProps> = observer(
-  ({
-    application,
-    appState,
-    menuPane,
-    setMenuPane,
-    closeMenu,
-    mainApplicationGroup,
-  }) => {
-    const [email, setEmail] = useState('');
-    const [password, setPassword] = useState('');
+  ({ application, appState, menuPane, setMenuPane, closeMenu, mainApplicationGroup }) => {
+    const [email, setEmail] = useState('')
+    const [password, setPassword] = useState('')
 
     switch (menuPane) {
       case AccountMenuPane.GeneralMenu:
@@ -56,15 +49,11 @@ const MenuPaneSelector: FunctionComponent<PaneSelectorProps> = observer(
             setMenuPane={setMenuPane}
             closeMenu={closeMenu}
           />
-        );
+        )
       case AccountMenuPane.SignIn:
         return (
-          <SignInPane
-            appState={appState}
-            application={application}
-            setMenuPane={setMenuPane}
-          />
-        );
+          <SignInPane appState={appState} application={application} setMenuPane={setMenuPane} />
+        )
       case AccountMenuPane.Register:
         return (
           <CreateAccount
@@ -76,7 +65,7 @@ const MenuPaneSelector: FunctionComponent<PaneSelectorProps> = observer(
             password={password}
             setPassword={setPassword}
           />
-        );
+        )
       case AccountMenuPane.ConfirmPassword:
         return (
           <ConfirmPassword
@@ -86,48 +75,40 @@ const MenuPaneSelector: FunctionComponent<PaneSelectorProps> = observer(
             email={email}
             password={password}
           />
-        );
+        )
     }
-  }
-);
+  },
+)
 
 export const AccountMenu: FunctionComponent<Props> = observer(
   ({ application, appState, onClickOutside, mainApplicationGroup }) => {
-    const {
-      currentPane,
-      setCurrentPane,
-      shouldAnimateCloseMenu,
-      closeAccountMenu,
-    } = appState.accountMenu;
+    const { currentPane, setCurrentPane, shouldAnimateCloseMenu, closeAccountMenu } =
+      appState.accountMenu
 
-    const ref = useRef<HTMLDivElement>(null);
+    const ref = useRef<HTMLDivElement>(null)
     useCloseOnClickOutside(ref, () => {
-      onClickOutside();
-    });
+      onClickOutside()
+    })
 
-    const handleKeyDown: JSXInternal.KeyboardEventHandler<HTMLDivElement> = (
-      event
-    ) => {
+    const handleKeyDown: JSXInternal.KeyboardEventHandler<HTMLDivElement> = (event) => {
       switch (event.key) {
         case 'Escape':
           if (currentPane === AccountMenuPane.GeneralMenu) {
-            closeAccountMenu();
+            closeAccountMenu()
           } else if (currentPane === AccountMenuPane.ConfirmPassword) {
-            setCurrentPane(AccountMenuPane.Register);
+            setCurrentPane(AccountMenuPane.Register)
           } else {
-            setCurrentPane(AccountMenuPane.GeneralMenu);
+            setCurrentPane(AccountMenuPane.GeneralMenu)
           }
-          break;
+          break
       }
-    };
+    }
 
     return (
       <div ref={ref} id="account-menu" className="sn-component">
         <div
           className={`sn-menu-border sn-account-menu sn-dropdown ${
-            shouldAnimateCloseMenu
-              ? 'slide-up-animation'
-              : 'sn-dropdown--animated'
+            shouldAnimateCloseMenu ? 'slide-up-animation' : 'sn-dropdown--animated'
           } min-w-80 max-h-120 max-w-xs flex flex-col py-2 overflow-y-auto absolute`}
           onKeyDown={handleKeyDown}
         >
@@ -141,6 +122,6 @@ export const AccountMenu: FunctionComponent<Props> = observer(
           />
         </div>
       </div>
-    );
-  }
-);
+    )
+  },
+)
diff --git a/app/assets/javascripts/components/ApplicationGroupView.tsx b/app/assets/javascripts/Components/ApplicationGroupView/index.tsx
similarity index 54%
rename from app/assets/javascripts/components/ApplicationGroupView.tsx
rename to app/assets/javascripts/Components/ApplicationGroupView/index.tsx
index fd84b890b..570673766 100644
--- a/app/assets/javascripts/components/ApplicationGroupView.tsx
+++ b/app/assets/javascripts/Components/ApplicationGroupView/index.tsx
@@ -1,27 +1,26 @@
-import { ApplicationGroup } from '@/ui_models/application_group';
-import { WebApplication } from '@/ui_models/application';
-import { Component } from 'preact';
-import { ApplicationView } from './ApplicationView';
+import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
+import { WebApplication } from '@/UIModels/Application'
+import { Component } from 'preact'
+import { ApplicationView } from '@/Components/ApplicationView'
 
 type State = {
-  activeApplication?: WebApplication;
-};
+  activeApplication?: WebApplication
+}
 
 type Props = {
-  mainApplicationGroup: ApplicationGroup;
-};
+  mainApplicationGroup: ApplicationGroup
+}
 
 export class ApplicationGroupView extends Component<Props, State> {
   constructor(props: Props) {
-    super(props);
+    super(props)
 
     props.mainApplicationGroup.addApplicationChangeObserver(() => {
-      const activeApplication = props.mainApplicationGroup
-        .primaryApplication as WebApplication;
-      this.setState({ activeApplication });
-    });
+      const activeApplication = props.mainApplicationGroup.primaryApplication as WebApplication
+      this.setState({ activeApplication })
+    })
 
-    props.mainApplicationGroup.initialize();
+    props.mainApplicationGroup.initialize().catch(console.error)
   }
 
   render() {
@@ -37,6 +36,6 @@ export class ApplicationGroupView extends Component<Props, State> {
           </div>
         )}
       </>
-    );
+    )
   }
 }
diff --git a/app/assets/javascripts/Components/ApplicationView/index.tsx b/app/assets/javascripts/Components/ApplicationView/index.tsx
new file mode 100644
index 000000000..b6b408a94
--- /dev/null
+++ b/app/assets/javascripts/Components/ApplicationView/index.tsx
@@ -0,0 +1,216 @@
+import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
+import { getPlatformString, getWindowUrlParams } from '@/Utils'
+import { AppStateEvent, PanelResizedData } from '@/UIModels/AppState'
+import { ApplicationEvent, Challenge, PermissionDialog, removeFromArray } from '@standardnotes/snjs'
+import { PANEL_NAME_NOTES, PANEL_NAME_NAVIGATION } from '@/Constants'
+import { alertDialog } from '@/Services/AlertService'
+import { WebAppEvent, WebApplication } from '@/UIModels/Application'
+import { PureComponent } from '@/Components/Abstract/PureComponent'
+import { Navigation } from '@/Components/Navigation'
+import { NotesView } from '@/Components/NotesView'
+import { NoteGroupView } from '@/Components/NoteGroupView'
+import { Footer } from '@/Components/Footer'
+import { SessionsModal } from '@/Components/SessionsModal'
+import { PreferencesViewWrapper } from '@/Components/Preferences/PreferencesViewWrapper'
+import { ChallengeModal } from '@/Components/ChallengeModal/ChallengeModal'
+import { NotesContextMenu } from '@/Components/NotesContextMenu'
+import { PurchaseFlowWrapper } from '@/Components/PurchaseFlow/PurchaseFlowWrapper'
+import { render } from 'preact'
+import { PermissionsModal } from '@/Components/PermissionsModal'
+import { RevisionHistoryModalWrapper } from '@/Components/RevisionHistoryModal/RevisionHistoryModalWrapper'
+import { PremiumModalProvider } from '@/Hooks/usePremiumModal'
+import { ConfirmSignoutContainer } from '@/Components/ConfirmSignoutModal'
+import { TagsContextMenu } from '@/Components/Tags/TagContextMenu'
+import { ToastContainer } from '@standardnotes/stylekit'
+import { FilePreviewModalProvider } from '@/Components/Files/FilePreviewModalProvider'
+
+type Props = {
+  application: WebApplication
+  mainApplicationGroup: ApplicationGroup
+}
+
+type State = {
+  started?: boolean
+  launched?: boolean
+  needsUnlock?: boolean
+  appClass: string
+  challenges: Challenge[]
+}
+
+export class ApplicationView extends PureComponent<Props, State> {
+  public readonly platformString = getPlatformString()
+
+  constructor(props: Props) {
+    super(props, props.application)
+    this.state = {
+      appClass: '',
+      challenges: [],
+    }
+  }
+
+  override deinit() {
+    ;(this.application as unknown) = undefined
+    super.deinit()
+  }
+
+  override componentDidMount(): void {
+    super.componentDidMount()
+    this.loadApplication().catch(console.error)
+  }
+
+  async loadApplication() {
+    this.application.componentManager.setDesktopManager(this.application.getDesktopService())
+    await this.application.prepareForLaunch({
+      receiveChallenge: async (challenge) => {
+        const challenges = this.state.challenges.slice()
+        challenges.push(challenge)
+        this.setState({ challenges: challenges })
+      },
+    })
+    await this.application.launch()
+  }
+
+  public removeChallenge = async (challenge: Challenge) => {
+    const challenges = this.state.challenges.slice()
+    removeFromArray(challenges, challenge)
+    this.setState({ challenges: challenges })
+  }
+
+  override async onAppStart() {
+    super.onAppStart().catch(console.error)
+    this.setState({
+      started: true,
+      needsUnlock: this.application.hasPasscode(),
+    })
+
+    this.application.componentManager.presentPermissionsDialog = this.presentPermissionsDialog
+  }
+
+  override async onAppLaunch() {
+    super.onAppLaunch().catch(console.error)
+    this.setState({
+      launched: true,
+      needsUnlock: false,
+    })
+    this.handleDemoSignInFromParams().catch(console.error)
+  }
+
+  onUpdateAvailable() {
+    this.application.notifyWebEvent(WebAppEvent.NewUpdateAvailable)
+  }
+
+  override async onAppEvent(eventName: ApplicationEvent) {
+    super.onAppEvent(eventName)
+    switch (eventName) {
+      case ApplicationEvent.LocalDatabaseReadError:
+        alertDialog({
+          text: 'Unable to load local database. Please restart the app and try again.',
+        }).catch(console.error)
+        break
+      case ApplicationEvent.LocalDatabaseWriteError:
+        alertDialog({
+          text: 'Unable to write to local database. Please restart the app and try again.',
+        }).catch(console.error)
+        break
+    }
+  }
+
+  override async onAppStateEvent(eventName: AppStateEvent, data?: unknown) {
+    if (eventName === AppStateEvent.PanelResized) {
+      const { panel, collapsed } = data as PanelResizedData
+      let appClass = ''
+      if (panel === PANEL_NAME_NOTES && collapsed) {
+        appClass += 'collapsed-notes'
+      }
+      if (panel === PANEL_NAME_NAVIGATION && collapsed) {
+        appClass += ' collapsed-navigation'
+      }
+      this.setState({ appClass })
+    } else if (eventName === AppStateEvent.WindowDidFocus) {
+      if (!(await this.application.isLocked())) {
+        this.application.sync.sync().catch(console.error)
+      }
+    }
+  }
+
+  async handleDemoSignInFromParams() {
+    const token = getWindowUrlParams().get('demo-token')
+    if (!token || this.application.hasAccount()) {
+      return
+    }
+
+    await this.application.sessions.populateSessionFromDemoShareToken(token)
+  }
+
+  presentPermissionsDialog = (dialog: PermissionDialog) => {
+    render(
+      <PermissionsModal
+        application={this.application}
+        callback={dialog.callback}
+        component={dialog.component}
+        permissionsString={dialog.permissionsString}
+      />,
+      document.body.appendChild(document.createElement('div')),
+    )
+  }
+
+  override render() {
+    if (this.application['dealloced'] === true) {
+      console.error('Attempting to render dealloced application')
+      return <div></div>
+    }
+
+    const renderAppContents = !this.state.needsUnlock && this.state.launched
+
+    return (
+      <FilePreviewModalProvider application={this.application}>
+        <PremiumModalProvider application={this.application} appState={this.appState}>
+          <div className={this.platformString + ' main-ui-view sn-component'}>
+            {renderAppContents && (
+              <div id="app" className={this.state.appClass + ' app app-column-container'}>
+                <Navigation application={this.application} />
+                <NotesView application={this.application} appState={this.appState} />
+                <NoteGroupView application={this.application} />
+              </div>
+            )}
+            {renderAppContents && (
+              <>
+                <Footer
+                  application={this.application}
+                  applicationGroup={this.props.mainApplicationGroup}
+                />
+                <SessionsModal application={this.application} appState={this.appState} />
+                <PreferencesViewWrapper appState={this.appState} application={this.application} />
+                <RevisionHistoryModalWrapper
+                  application={this.application}
+                  appState={this.appState}
+                />
+              </>
+            )}
+            {this.state.challenges.map((challenge) => {
+              return (
+                <div className="sk-modal">
+                  <ChallengeModal
+                    key={challenge.id}
+                    application={this.application}
+                    challenge={challenge}
+                    onDismiss={this.removeChallenge}
+                  />
+                </div>
+              )
+            })}
+            {renderAppContents && (
+              <>
+                <NotesContextMenu application={this.application} appState={this.appState} />
+                <TagsContextMenu appState={this.appState} />
+                <PurchaseFlowWrapper application={this.application} appState={this.appState} />
+                <ConfirmSignoutContainer appState={this.appState} application={this.application} />
+                <ToastContainer />
+              </>
+            )}
+          </div>
+        </PremiumModalProvider>
+      </FilePreviewModalProvider>
+    )
+  }
+}
diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
new file mode 100644
index 000000000..af2c3f1ce
--- /dev/null
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
@@ -0,0 +1,368 @@
+import { WebApplication } from '@/UIModels/Application'
+import { AppState } from '@/UIModels/AppState'
+import { MENU_MARGIN_FROM_APP_BORDER } from '@/Constants'
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
+import VisuallyHidden from '@reach/visually-hidden'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
+import { Icon } from '@/Components/Icon'
+import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
+import {
+  ChallengeReason,
+  ContentType,
+  FeatureIdentifier,
+  FeatureStatus,
+  SNFile,
+} from '@standardnotes/snjs'
+import { confirmDialog } from '@/Services/AlertService'
+import { addToast, dismissToast, ToastType } from '@standardnotes/stylekit'
+import { StreamingFileReader } from '@standardnotes/filepicker'
+import { PopoverFileItemAction, PopoverFileItemActionType } from './PopoverFileItemAction'
+import { AttachedFilesPopover, PopoverTabs } from './AttachedFilesPopover'
+import { usePremiumModal } from '@/Hooks/usePremiumModal'
+
+type Props = {
+  application: WebApplication
+  appState: AppState
+  onClickPreprocessing?: () => Promise<void>
+}
+
+const createDragOverlay = () => {
+  if (document.getElementById('drag-overlay')) {
+    return
+  }
+
+  const overlayElementTemplate =
+    '<div class="sn-component" id="drag-overlay"><div class="absolute top-0 left-0 w-full h-full z-index-1001"></div></div>'
+  const overlayFragment = document.createRange().createContextualFragment(overlayElementTemplate)
+  document.body.appendChild(overlayFragment)
+}
+
+const removeDragOverlay = () => {
+  document.getElementById('drag-overlay')?.remove()
+}
+
+export const AttachedFilesButton: FunctionComponent<Props> = observer(
+  ({ application, appState, onClickPreprocessing }) => {
+    const premiumModal = usePremiumModal()
+    const note = Object.values(appState.notes.selectedNotes)[0]
+
+    const [open, setOpen] = useState(false)
+    const [position, setPosition] = useState({
+      top: 0,
+      right: 0,
+    })
+    const [maxHeight, setMaxHeight] = useState<number | 'auto'>('auto')
+    const buttonRef = useRef<HTMLButtonElement>(null)
+    const panelRef = useRef<HTMLDivElement>(null)
+    const containerRef = useRef<HTMLDivElement>(null)
+    const [closeOnBlur, keepMenuOpen] = useCloseOnBlur(containerRef, setOpen)
+
+    const [attachedFilesCount, setAttachedFilesCount] = useState(
+      note ? application.items.getFilesForNote(note).length : 0,
+    )
+
+    const reloadAttachedFilesCount = useCallback(() => {
+      setAttachedFilesCount(note ? application.items.getFilesForNote(note).length : 0)
+    }, [application.items, note])
+
+    useEffect(() => {
+      const unregisterFileStream = application.streamItems(ContentType.File, () => {
+        reloadAttachedFilesCount()
+      })
+
+      return () => {
+        unregisterFileStream()
+      }
+    }, [application, reloadAttachedFilesCount])
+
+    const toggleAttachedFilesMenu = useCallback(async () => {
+      if (
+        application.features.getFeatureStatus(FeatureIdentifier.Files) !== FeatureStatus.Entitled
+      ) {
+        premiumModal.activate('Files')
+        return
+      }
+
+      const rect = buttonRef.current?.getBoundingClientRect()
+      if (rect) {
+        const { clientHeight } = document.documentElement
+        const footerElementRect = document.getElementById('footer-bar')?.getBoundingClientRect()
+        const footerHeightInPx = footerElementRect?.height
+
+        if (footerHeightInPx) {
+          setMaxHeight(clientHeight - rect.bottom - footerHeightInPx - MENU_MARGIN_FROM_APP_BORDER)
+        }
+
+        setPosition({
+          top: rect.bottom,
+          right: document.body.clientWidth - rect.right,
+        })
+
+        const newOpenState = !open
+        if (newOpenState && onClickPreprocessing) {
+          await onClickPreprocessing()
+        }
+
+        setOpen(newOpenState)
+      }
+    }, [application.features, onClickPreprocessing, open, premiumModal])
+
+    const deleteFile = async (file: SNFile) => {
+      const shouldDelete = await confirmDialog({
+        text: `Are you sure you want to permanently delete "${file.name}"?`,
+        confirmButtonStyle: 'danger',
+      })
+      if (shouldDelete) {
+        const deletingToastId = addToast({
+          type: ToastType.Loading,
+          message: `Deleting file "${file.name}"...`,
+        })
+        await application.files.deleteFile(file)
+        addToast({
+          type: ToastType.Success,
+          message: `Deleted file "${file.name}"`,
+        })
+        dismissToast(deletingToastId)
+      }
+    }
+
+    const downloadFile = async (file: SNFile) => {
+      appState.files.downloadFile(file).catch(console.error)
+    }
+
+    const attachFileToNote = useCallback(
+      async (file: SNFile) => {
+        await application.items.associateFileWithNote(file, note)
+      },
+      [application.items, note],
+    )
+
+    const detachFileFromNote = async (file: SNFile) => {
+      await application.items.disassociateFileWithNote(file, note)
+    }
+
+    const toggleFileProtection = async (file: SNFile) => {
+      let result: SNFile | undefined
+      if (file.protected) {
+        keepMenuOpen(true)
+        result = await application.mutator.unprotectFile(file)
+        keepMenuOpen(false)
+        buttonRef.current?.focus()
+      } else {
+        result = await application.mutator.protectFile(file)
+      }
+      const isProtected = result ? result.protected : file.protected
+      return isProtected
+    }
+
+    const authorizeProtectedActionForFile = async (
+      file: SNFile,
+      challengeReason: ChallengeReason,
+    ) => {
+      const authorizedFiles = await application.protections.authorizeProtectedActionForFiles(
+        [file],
+        challengeReason,
+      )
+      const isAuthorized = authorizedFiles.length > 0 && authorizedFiles.includes(file)
+      return isAuthorized
+    }
+
+    const renameFile = async (file: SNFile, fileName: string) => {
+      await application.items.renameFile(file, fileName)
+    }
+
+    const handleFileAction = async (action: PopoverFileItemAction) => {
+      const file =
+        action.type !== PopoverFileItemActionType.RenameFile ? action.payload : action.payload.file
+      let isAuthorizedForAction = true
+
+      if (file.protected && action.type !== PopoverFileItemActionType.ToggleFileProtection) {
+        keepMenuOpen(true)
+        isAuthorizedForAction = await authorizeProtectedActionForFile(
+          file,
+          ChallengeReason.AccessProtectedFile,
+        )
+        keepMenuOpen(false)
+        buttonRef.current?.focus()
+      }
+
+      if (!isAuthorizedForAction) {
+        return false
+      }
+
+      switch (action.type) {
+        case PopoverFileItemActionType.AttachFileToNote:
+          await attachFileToNote(file)
+          break
+        case PopoverFileItemActionType.DetachFileToNote:
+          await detachFileFromNote(file)
+          break
+        case PopoverFileItemActionType.DeleteFile:
+          await deleteFile(file)
+          break
+        case PopoverFileItemActionType.DownloadFile:
+          await downloadFile(file)
+          break
+        case PopoverFileItemActionType.ToggleFileProtection: {
+          const isProtected = await toggleFileProtection(file)
+          action.callback(isProtected)
+          break
+        }
+        case PopoverFileItemActionType.RenameFile:
+          await renameFile(file, action.payload.name)
+          break
+      }
+
+      application.sync.sync().catch(console.error)
+
+      return true
+    }
+
+    const [isDraggingFiles, setIsDraggingFiles] = useState(false)
+    const [currentTab, setCurrentTab] = useState(PopoverTabs.AttachedFiles)
+    const dragCounter = useRef(0)
+
+    const handleDrag = (event: DragEvent) => {
+      event.preventDefault()
+      event.stopPropagation()
+    }
+
+    const handleDragIn = useCallback(
+      (event: DragEvent) => {
+        event.preventDefault()
+        event.stopPropagation()
+
+        dragCounter.current = dragCounter.current + 1
+
+        if (event.dataTransfer?.items.length) {
+          setIsDraggingFiles(true)
+          createDragOverlay()
+          if (!open) {
+            toggleAttachedFilesMenu().catch(console.error)
+          }
+        }
+      },
+      [open, toggleAttachedFilesMenu],
+    )
+
+    const handleDragOut = (event: DragEvent) => {
+      event.preventDefault()
+      event.stopPropagation()
+
+      dragCounter.current = dragCounter.current - 1
+
+      if (dragCounter.current > 0) {
+        return
+      }
+
+      removeDragOverlay()
+
+      setIsDraggingFiles(false)
+    }
+
+    const handleDrop = useCallback(
+      (event: DragEvent) => {
+        event.preventDefault()
+        event.stopPropagation()
+
+        setIsDraggingFiles(false)
+        removeDragOverlay()
+
+        if (event.dataTransfer?.items.length) {
+          Array.from(event.dataTransfer.items).forEach(async (item) => {
+            const fileOrHandle = StreamingFileReader.available()
+              ? ((await item.getAsFileSystemHandle()) as FileSystemFileHandle)
+              : item.getAsFile()
+
+            if (!fileOrHandle) {
+              return
+            }
+
+            const uploadedFiles = await appState.files.uploadNewFile(fileOrHandle)
+
+            if (!uploadedFiles) {
+              return
+            }
+
+            if (currentTab === PopoverTabs.AttachedFiles) {
+              uploadedFiles.forEach((file) => {
+                attachFileToNote(file).catch(console.error)
+              })
+            }
+          })
+
+          event.dataTransfer.clearData()
+          dragCounter.current = 0
+        }
+      },
+      [appState.files, attachFileToNote, currentTab],
+    )
+
+    useEffect(() => {
+      window.addEventListener('dragenter', handleDragIn)
+      window.addEventListener('dragleave', handleDragOut)
+      window.addEventListener('dragover', handleDrag)
+      window.addEventListener('drop', handleDrop)
+
+      return () => {
+        window.removeEventListener('dragenter', handleDragIn)
+        window.removeEventListener('dragleave', handleDragOut)
+        window.removeEventListener('dragover', handleDrag)
+        window.removeEventListener('drop', handleDrop)
+      }
+    }, [handleDragIn, handleDrop])
+
+    return (
+      <div ref={containerRef}>
+        <Disclosure open={open} onChange={toggleAttachedFilesMenu}>
+          <DisclosureButton
+            onKeyDown={(event) => {
+              if (event.key === 'Escape') {
+                setOpen(false)
+              }
+            }}
+            ref={buttonRef}
+            className={`sn-icon-button border-contrast ${
+              attachedFilesCount > 0 ? 'py-1 px-3' : ''
+            }`}
+            onBlur={closeOnBlur}
+          >
+            <VisuallyHidden>Attached files</VisuallyHidden>
+            <Icon type="attachment-file" className="block" />
+            {attachedFilesCount > 0 && <span className="ml-2">{attachedFilesCount}</span>}
+          </DisclosureButton>
+          <DisclosurePanel
+            onKeyDown={(event) => {
+              if (event.key === 'Escape') {
+                setOpen(false)
+                buttonRef.current?.focus()
+              }
+            }}
+            ref={panelRef}
+            style={{
+              ...position,
+              maxHeight,
+            }}
+            className="sn-dropdown sn-dropdown--animated min-w-80 max-h-120 max-w-xs flex flex-col overflow-y-auto fixed"
+            onBlur={closeOnBlur}
+          >
+            {open && (
+              <AttachedFilesPopover
+                application={application}
+                appState={appState}
+                note={note}
+                handleFileAction={handleFileAction}
+                currentTab={currentTab}
+                closeOnBlur={closeOnBlur}
+                setCurrentTab={setCurrentTab}
+                isDraggingFiles={isDraggingFiles}
+              />
+            )}
+          </DisclosurePanel>
+        </Disclosure>
+      </div>
+    )
+  },
+)
diff --git a/app/assets/javascripts/components/AttachedFilesPopover/AttachedFilesPopover.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
similarity index 64%
rename from app/assets/javascripts/components/AttachedFilesPopover/AttachedFilesPopover.tsx
rename to app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
index 770ea0277..f363a8865 100644
--- a/app/assets/javascripts/components/AttachedFilesPopover/AttachedFilesPopover.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
@@ -1,18 +1,15 @@
-import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/constants';
-import { WebApplication } from '@/ui_models/application';
-import { AppState } from '@/ui_models/app_state';
-import { ContentType, SNFile, SNNote } from '@standardnotes/snjs';
-import { FilesIllustration } from '@standardnotes/stylekit';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { StateUpdater, useEffect, useRef, useState } from 'preact/hooks';
-import { Button } from '../Button';
-import { Icon } from '../Icon';
-import { PopoverFileItem } from './PopoverFileItem';
-import {
-  PopoverFileItemAction,
-  PopoverFileItemActionType,
-} from './PopoverFileItemAction';
+import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants'
+import { WebApplication } from '@/UIModels/Application'
+import { AppState } from '@/UIModels/AppState'
+import { ContentType, SNFile, SNNote } from '@standardnotes/snjs'
+import { FilesIllustration } from '@standardnotes/stylekit'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { StateUpdater, useEffect, useRef, useState } from 'preact/hooks'
+import { Button } from '@/Components/Button/Button'
+import { Icon } from '@/Components/Icon'
+import { PopoverFileItem } from './PopoverFileItem'
+import { PopoverFileItemAction, PopoverFileItemActionType } from './PopoverFileItemAction'
 
 export enum PopoverTabs {
   AttachedFiles,
@@ -20,15 +17,15 @@ export enum PopoverTabs {
 }
 
 type Props = {
-  application: WebApplication;
-  appState: AppState;
-  currentTab: PopoverTabs;
-  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void;
-  handleFileAction: (action: PopoverFileItemAction) => Promise<boolean>;
-  isDraggingFiles: boolean;
-  note: SNNote;
-  setCurrentTab: StateUpdater<PopoverTabs>;
-};
+  application: WebApplication
+  appState: AppState
+  currentTab: PopoverTabs
+  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
+  handleFileAction: (action: PopoverFileItemAction) => Promise<boolean>
+  isDraggingFiles: boolean
+  note: SNNote
+  setCurrentTab: StateUpdater<PopoverTabs>
+}
 
 export const AttachedFilesPopover: FunctionComponent<Props> = observer(
   ({
@@ -41,70 +38,61 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
     note,
     setCurrentTab,
   }) => {
-    const [attachedFiles, setAttachedFiles] = useState<SNFile[]>([]);
-    const [allFiles, setAllFiles] = useState<SNFile[]>([]);
-    const [searchQuery, setSearchQuery] = useState('');
-    const searchInputRef = useRef<HTMLInputElement>(null);
+    const [attachedFiles, setAttachedFiles] = useState<SNFile[]>([])
+    const [allFiles, setAllFiles] = useState<SNFile[]>([])
+    const [searchQuery, setSearchQuery] = useState('')
+    const searchInputRef = useRef<HTMLInputElement>(null)
 
-    const filesList =
-      currentTab === PopoverTabs.AttachedFiles ? attachedFiles : allFiles;
+    const filesList = currentTab === PopoverTabs.AttachedFiles ? attachedFiles : allFiles
 
     const filteredList =
       searchQuery.length > 0
         ? filesList.filter(
-            (file) =>
-              file.name.toLowerCase().indexOf(searchQuery.toLowerCase()) !== -1
+            (file) => file.name.toLowerCase().indexOf(searchQuery.toLowerCase()) !== -1,
           )
-        : filesList;
+        : filesList
 
     useEffect(() => {
-      const unregisterFileStream = application.streamItems(
-        ContentType.File,
-        () => {
-          setAttachedFiles(
-            application.items
-              .getFilesForNote(note)
-              .sort((a, b) => (a.created_at < b.created_at ? 1 : -1))
-          );
+      const unregisterFileStream = application.streamItems(ContentType.File, () => {
+        setAttachedFiles(
+          application.items
+            .getFilesForNote(note)
+            .sort((a, b) => (a.created_at < b.created_at ? 1 : -1)),
+        )
 
-          setAllFiles(
-            application.items
-              .getItems(ContentType.File)
-              .sort((a, b) =>
-                a.created_at < b.created_at ? 1 : -1
-              ) as SNFile[]
-          );
-        }
-      );
+        setAllFiles(
+          application.items
+            .getItems(ContentType.File)
+            .sort((a, b) => (a.created_at < b.created_at ? 1 : -1)) as SNFile[],
+        )
+      })
 
       return () => {
-        unregisterFileStream();
-      };
-    }, [application, note]);
+        unregisterFileStream()
+      }
+    }, [application, note])
 
     const handleAttachFilesClick = async () => {
-      const uploadedFiles = await appState.files.uploadNewFile();
+      const uploadedFiles = await appState.files.uploadNewFile()
       if (!uploadedFiles) {
-        return;
+        return
       }
       if (currentTab === PopoverTabs.AttachedFiles) {
         uploadedFiles.forEach((file) => {
           handleFileAction({
             type: PopoverFileItemActionType.AttachFileToNote,
             payload: file,
-          });
-        });
+          }).catch(console.error)
+        })
       }
-    };
+    }
 
     return (
       <div
         className="flex flex-col"
         tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
         style={{
-          border: isDraggingFiles
-            ? '2px dashed var(--sn-stylekit-info-color)'
-            : '',
+          border: isDraggingFiles ? '2px dashed var(--sn-stylekit-info-color)' : '',
         }}
       >
         <div className="flex border-0 border-b-1 border-solid border-main">
@@ -115,7 +103,7 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
                 : 'color-text'
             }`}
             onClick={() => {
-              setCurrentTab(PopoverTabs.AttachedFiles);
+              setCurrentTab(PopoverTabs.AttachedFiles)
             }}
             onBlur={closeOnBlur}
           >
@@ -128,7 +116,7 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
                 : 'color-text'
             }`}
             onClick={() => {
-              setCurrentTab(PopoverTabs.AllFiles);
+              setCurrentTab(PopoverTabs.AllFiles)
             }}
             onBlur={closeOnBlur}
           >
@@ -145,7 +133,7 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
                   placeholder="Search files..."
                   value={searchQuery}
                   onInput={(e) => {
-                    setSearchQuery((e.target as HTMLInputElement).value);
+                    setSearchQuery((e.target as HTMLInputElement).value)
                   }}
                   onBlur={closeOnBlur}
                   ref={searchInputRef}
@@ -154,15 +142,12 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
                   <button
                     className="flex absolute right-2 p-0 bg-transparent border-0 top-1/2 -translate-y-1/2 cursor-pointer"
                     onClick={() => {
-                      setSearchQuery('');
-                      searchInputRef.current?.focus();
+                      setSearchQuery('')
+                      searchInputRef.current?.focus()
                     }}
                     onBlur={closeOnBlur}
                   >
-                    <Icon
-                      type="clear-circle-filled"
-                      className="color-neutral"
-                    />
+                    <Icon type="clear-circle-filled" className="color-neutral" />
                   </button>
                 )}
               </div>
@@ -179,7 +164,7 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
                   getIconType={application.iconsController.getIconForFileType}
                   closeOnBlur={closeOnBlur}
                 />
-              );
+              )
             })
           ) : (
             <div className="flex flex-col items-center justify-center w-full py-8">
@@ -193,17 +178,10 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
                   ? 'No files attached to this note'
                   : 'No files found in this account'}
               </div>
-              <Button
-                variant="normal"
-                onClick={handleAttachFilesClick}
-                onBlur={closeOnBlur}
-              >
-                {currentTab === PopoverTabs.AttachedFiles ? 'Attach' : 'Upload'}{' '}
-                files
+              <Button variant="normal" onClick={handleAttachFilesClick} onBlur={closeOnBlur}>
+                {currentTab === PopoverTabs.AttachedFiles ? 'Attach' : 'Upload'} files
               </Button>
-              <div className="text-xs color-grey-0 mt-3">
-                Or drop your files here
-              </div>
+              <div className="text-xs color-grey-0 mt-3">Or drop your files here</div>
             </div>
           )}
         </div>
@@ -214,13 +192,10 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
             onBlur={closeOnBlur}
           >
             <Icon type="add" className="mr-2 color-neutral" />
-            {currentTab === PopoverTabs.AttachedFiles
-              ? 'Attach'
-              : 'Upload'}{' '}
-            files
+            {currentTab === PopoverTabs.AttachedFiles ? 'Attach' : 'Upload'} files
           </button>
         )}
       </div>
-    );
-  }
-);
+    )
+  },
+)
diff --git a/app/assets/javascripts/components/AttachedFilesPopover/PopoverFileItem.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx
similarity index 62%
rename from app/assets/javascripts/components/AttachedFilesPopover/PopoverFileItem.tsx
rename to app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx
index 1f6981f47..d5b61ceb3 100644
--- a/app/assets/javascripts/components/AttachedFilesPopover/PopoverFileItem.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx
@@ -1,29 +1,26 @@
-import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/constants';
-import { KeyboardKey } from '@/services/ioService';
-import { formatSizeToReadableString } from '@standardnotes/filepicker';
-import { IconType, SNFile } from '@standardnotes/snjs';
-import { FunctionComponent } from 'preact';
-import { useEffect, useRef, useState } from 'preact/hooks';
-import { Icon, ICONS } from '../Icon';
-import {
-  PopoverFileItemAction,
-  PopoverFileItemActionType,
-} from './PopoverFileItemAction';
-import { PopoverFileSubmenu } from './PopoverFileSubmenu';
+import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants'
+import { KeyboardKey } from '@/Services/IOService'
+import { formatSizeToReadableString } from '@standardnotes/filepicker'
+import { IconType, SNFile } from '@standardnotes/snjs'
+import { FunctionComponent } from 'preact'
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { Icon, ICONS } from '@/Components/Icon'
+import { PopoverFileItemAction, PopoverFileItemActionType } from './PopoverFileItemAction'
+import { PopoverFileSubmenu } from './PopoverFileSubmenu'
 
 export const getFileIconComponent = (iconType: string, className: string) => {
-  const IconComponent = ICONS[iconType as keyof typeof ICONS];
+  const IconComponent = ICONS[iconType as keyof typeof ICONS]
 
-  return <IconComponent className={className} />;
-};
+  return <IconComponent className={className} />
+}
 
 export type PopoverFileItemProps = {
-  file: SNFile;
-  isAttachedToNote: boolean;
-  handleFileAction: (action: PopoverFileItemAction) => Promise<boolean>;
-  getIconType(type: string): IconType;
-  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void;
-};
+  file: SNFile
+  isAttachedToNote: boolean
+  handleFileAction: (action: PopoverFileItemAction) => Promise<boolean>
+  getIconType(type: string): IconType
+  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
+}
 
 export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
   file,
@@ -32,16 +29,16 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
   getIconType,
   closeOnBlur,
 }) => {
-  const [fileName, setFileName] = useState(file.name);
-  const [isRenamingFile, setIsRenamingFile] = useState(false);
-  const itemRef = useRef<HTMLDivElement>(null);
-  const fileNameInputRef = useRef<HTMLInputElement>(null);
+  const [fileName, setFileName] = useState(file.name)
+  const [isRenamingFile, setIsRenamingFile] = useState(false)
+  const itemRef = useRef<HTMLDivElement>(null)
+  const fileNameInputRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
     if (isRenamingFile) {
-      fileNameInputRef.current?.focus();
+      fileNameInputRef.current?.focus()
     }
-  }, [isRenamingFile]);
+  }, [isRenamingFile])
 
   const renameFile = async (file: SNFile, name: string) => {
     await handleFileAction({
@@ -50,23 +47,23 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
         file,
         name,
       },
-    });
-    setIsRenamingFile(false);
-  };
+    })
+    setIsRenamingFile(false)
+  }
 
   const handleFileNameInput = (event: Event) => {
-    setFileName((event.target as HTMLInputElement).value);
-  };
+    setFileName((event.target as HTMLInputElement).value)
+  }
 
   const handleFileNameInputKeyDown = (event: KeyboardEvent) => {
     if (event.key === KeyboardKey.Enter) {
-      itemRef.current?.focus();
+      itemRef.current?.focus()
     }
-  };
+  }
 
   const handleFileNameInputBlur = () => {
-    renameFile(file, fileName);
-  };
+    renameFile(file, fileName).catch(console.error)
+  }
 
   return (
     <div
@@ -75,10 +72,7 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
       tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
     >
       <div className="flex items-center">
-        {getFileIconComponent(
-          getIconType(file.mimeType),
-          'w-8 h-8 flex-shrink-0'
-        )}
+        {getFileIconComponent(getIconType(file.mimeType), 'w-8 h-8 flex-shrink-0')}
         <div className="flex flex-col mx-4">
           {isRenamingFile ? (
             <input
@@ -102,8 +96,7 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
             </div>
           )}
           <div className="text-xs color-grey-0">
-            {file.created_at.toLocaleString()} ·{' '}
-            {formatSizeToReadableString(file.size)}
+            {file.created_at.toLocaleString()} · {formatSizeToReadableString(file.size)}
           </div>
         </div>
       </div>
@@ -115,5 +108,5 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
         closeOnBlur={closeOnBlur}
       />
     </div>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItemAction.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItemAction.tsx
new file mode 100644
index 000000000..b774c6b90
--- /dev/null
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItemAction.tsx
@@ -0,0 +1,31 @@
+import { SNFile } from '@standardnotes/snjs'
+
+export enum PopoverFileItemActionType {
+  AttachFileToNote,
+  DetachFileToNote,
+  DeleteFile,
+  DownloadFile,
+  RenameFile,
+  ToggleFileProtection,
+}
+
+export type PopoverFileItemAction =
+  | {
+      type: Exclude<
+        PopoverFileItemActionType,
+        PopoverFileItemActionType.RenameFile | PopoverFileItemActionType.ToggleFileProtection
+      >
+      payload: SNFile
+    }
+  | {
+      type: PopoverFileItemActionType.ToggleFileProtection
+      payload: SNFile
+      callback: (isProtected: boolean) => void
+    }
+  | {
+      type: PopoverFileItemActionType.RenameFile
+      payload: {
+        file: SNFile
+        name: string
+      }
+    }
diff --git a/app/assets/javascripts/components/AttachedFilesPopover/PopoverFileSubmenu.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx
similarity index 74%
rename from app/assets/javascripts/components/AttachedFilesPopover/PopoverFileSubmenu.tsx
rename to app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx
index d9183779d..fe5a94e5f 100644
--- a/app/assets/javascripts/components/AttachedFilesPopover/PopoverFileSubmenu.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx
@@ -1,31 +1,18 @@
-import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/constants';
-import {
-  calculateSubmenuStyle,
-  SubmenuStyle,
-} from '@/utils/calculateSubmenuStyle';
-import {
-  Disclosure,
-  DisclosureButton,
-  DisclosurePanel,
-} from '@reach/disclosure';
-import { FunctionComponent } from 'preact';
-import {
-  StateUpdater,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'preact/hooks';
-import { Icon } from '../Icon';
-import { Switch } from '../Switch';
-import { useCloseOnBlur } from '../utils';
-import { useFilePreviewModal } from '../Files/FilePreviewModalProvider';
-import { PopoverFileItemProps } from './PopoverFileItem';
-import { PopoverFileItemActionType } from './PopoverFileItemAction';
+import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants'
+import { calculateSubmenuStyle, SubmenuStyle } from '@/Utils/CalculateSubmenuStyle'
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
+import { FunctionComponent } from 'preact'
+import { StateUpdater, useCallback, useEffect, useRef, useState } from 'preact/hooks'
+import { Icon } from '@/Components/Icon'
+import { Switch } from '@/Components/Switch'
+import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
+import { useFilePreviewModal } from '@/Components/Files/FilePreviewModalProvider'
+import { PopoverFileItemProps } from './PopoverFileItem'
+import { PopoverFileItemActionType } from './PopoverFileItemAction'
 
 type Props = Omit<PopoverFileItemProps, 'renameFile' | 'getIconType'> & {
-  setIsRenamingFile: StateUpdater<boolean>;
-};
+  setIsRenamingFile: StateUpdater<boolean>
+}
 
 export const PopoverFileSubmenu: FunctionComponent<Props> = ({
   file,
@@ -33,54 +20,51 @@ export const PopoverFileSubmenu: FunctionComponent<Props> = ({
   handleFileAction,
   setIsRenamingFile,
 }) => {
-  const filePreviewModal = useFilePreviewModal();
+  const filePreviewModal = useFilePreviewModal()
 
-  const menuContainerRef = useRef<HTMLDivElement>(null);
-  const menuButtonRef = useRef<HTMLButtonElement>(null);
-  const menuRef = useRef<HTMLDivElement>(null);
+  const menuContainerRef = useRef<HTMLDivElement>(null)
+  const menuButtonRef = useRef<HTMLButtonElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
 
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const [isFileProtected, setIsFileProtected] = useState(file.protected);
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const [isFileProtected, setIsFileProtected] = useState(file.protected)
   const [menuStyle, setMenuStyle] = useState<SubmenuStyle>({
     right: 0,
     bottom: 0,
     maxHeight: 'auto',
-  });
-  const [closeOnBlur] = useCloseOnBlur(menuContainerRef, setIsMenuOpen);
+  })
+  const [closeOnBlur] = useCloseOnBlur(menuContainerRef, setIsMenuOpen)
 
   const closeMenu = () => {
-    setIsMenuOpen(false);
-  };
+    setIsMenuOpen(false)
+  }
 
   const toggleMenu = () => {
     if (!isMenuOpen) {
-      const menuPosition = calculateSubmenuStyle(menuButtonRef.current);
+      const menuPosition = calculateSubmenuStyle(menuButtonRef.current)
       if (menuPosition) {
-        setMenuStyle(menuPosition);
+        setMenuStyle(menuPosition)
       }
     }
 
-    setIsMenuOpen(!isMenuOpen);
-  };
+    setIsMenuOpen(!isMenuOpen)
+  }
 
   const recalculateMenuStyle = useCallback(() => {
-    const newMenuPosition = calculateSubmenuStyle(
-      menuButtonRef.current,
-      menuRef.current
-    );
+    const newMenuPosition = calculateSubmenuStyle(menuButtonRef.current, menuRef.current)
 
     if (newMenuPosition) {
-      setMenuStyle(newMenuPosition);
+      setMenuStyle(newMenuPosition)
     }
-  }, []);
+  }, [])
 
   useEffect(() => {
     if (isMenuOpen) {
       setTimeout(() => {
-        recalculateMenuStyle();
-      });
+        recalculateMenuStyle()
+      })
     }
-  }, [isMenuOpen, recalculateMenuStyle]);
+  }, [isMenuOpen, recalculateMenuStyle])
 
   return (
     <div ref={menuContainerRef}>
@@ -106,8 +90,8 @@ export const PopoverFileSubmenu: FunctionComponent<Props> = ({
                 onBlur={closeOnBlur}
                 className="sn-dropdown-item focus:bg-info-backdrop"
                 onClick={() => {
-                  filePreviewModal.activate(file);
-                  closeMenu();
+                  filePreviewModal.activate(file)
+                  closeMenu()
                 }}
               >
                 <Icon type="file" className="mr-2 color-neutral" />
@@ -121,8 +105,8 @@ export const PopoverFileSubmenu: FunctionComponent<Props> = ({
                     handleFileAction({
                       type: PopoverFileItemActionType.DetachFileToNote,
                       payload: file,
-                    });
-                    closeMenu();
+                    }).catch(console.error)
+                    closeMenu()
                   }}
                 >
                   <Icon type="link-off" className="mr-2 color-neutral" />
@@ -136,8 +120,8 @@ export const PopoverFileSubmenu: FunctionComponent<Props> = ({
                     handleFileAction({
                       type: PopoverFileItemActionType.AttachFileToNote,
                       payload: file,
-                    });
-                    closeMenu();
+                    }).catch(console.error)
+                    closeMenu()
                   }}
                 >
                   <Icon type="link" className="mr-2 color-neutral" />
@@ -152,9 +136,9 @@ export const PopoverFileSubmenu: FunctionComponent<Props> = ({
                     type: PopoverFileItemActionType.ToggleFileProtection,
                     payload: file,
                     callback: (isProtected: boolean) => {
-                      setIsFileProtected(isProtected);
+                      setIsFileProtected(isProtected)
                     },
-                  });
+                  }).catch(console.error)
                 }}
                 onBlur={closeOnBlur}
               >
@@ -176,8 +160,8 @@ export const PopoverFileSubmenu: FunctionComponent<Props> = ({
                   handleFileAction({
                     type: PopoverFileItemActionType.DownloadFile,
                     payload: file,
-                  });
-                  closeMenu();
+                  }).catch(console.error)
+                  closeMenu()
                 }}
               >
                 <Icon type="download" className="mr-2 color-neutral" />
@@ -187,7 +171,7 @@ export const PopoverFileSubmenu: FunctionComponent<Props> = ({
                 onBlur={closeOnBlur}
                 className="sn-dropdown-item focus:bg-info-backdrop"
                 onClick={() => {
-                  setIsRenamingFile(true);
+                  setIsRenamingFile(true)
                 }}
               >
                 <Icon type="pencil" className="mr-2 color-neutral" />
@@ -200,8 +184,8 @@ export const PopoverFileSubmenu: FunctionComponent<Props> = ({
                   handleFileAction({
                     type: PopoverFileItemActionType.DeleteFile,
                     payload: file,
-                  });
-                  closeMenu();
+                  }).catch(console.error)
+                  closeMenu()
                 }}
               >
                 <Icon type="trash" className="mr-2 color-danger" />
@@ -212,5 +196,5 @@ export const PopoverFileSubmenu: FunctionComponent<Props> = ({
         </DisclosurePanel>
       </Disclosure>
     </div>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/components/Bubble.tsx b/app/assets/javascripts/Components/Bubble/index.tsx
similarity index 70%
rename from app/assets/javascripts/components/Bubble.tsx
rename to app/assets/javascripts/Components/Bubble/index.tsx
index e164a4f50..5a2146823 100644
--- a/app/assets/javascripts/components/Bubble.tsx
+++ b/app/assets/javascripts/Components/Bubble/index.tsx
@@ -1,25 +1,23 @@
 interface BubbleProperties {
-  label: string;
-  selected: boolean;
-  onSelect: () => void;
+  label: string
+  selected: boolean
+  onSelect: () => void
 }
 
 const styles = {
   base: 'px-2 py-1.5 text-center rounded-full cursor-pointer transition border-1 border-solid active:border-info active:bg-info active:color-neutral-contrast',
   unselected: 'color-neutral border-secondary',
   selected: 'border-info bg-info color-neutral-contrast',
-};
+}
 
 const Bubble = ({ label, selected, onSelect }: BubbleProperties) => (
   <span
     role="tab"
-    className={`bubble ${styles.base} ${
-      selected ? styles.selected : styles.unselected
-    }`}
+    className={`bubble ${styles.base} ${selected ? styles.selected : styles.unselected}`}
     onClick={onSelect}
   >
     {label}
   </span>
-);
+)
 
-export default Bubble;
+export default Bubble
diff --git a/app/assets/javascripts/components/Button.tsx b/app/assets/javascripts/Components/Button/Button.tsx
similarity index 54%
rename from app/assets/javascripts/components/Button.tsx
rename to app/assets/javascripts/Components/Button/Button.tsx
index 1afc15904..eca0e336e 100644
--- a/app/assets/javascripts/components/Button.tsx
+++ b/app/assets/javascripts/Components/Button/Button.tsx
@@ -1,58 +1,44 @@
-import { JSXInternal } from 'preact/src/jsx';
-import { ComponentChildren, FunctionComponent, Ref } from 'preact';
-import { forwardRef } from 'preact/compat';
+import { JSXInternal } from 'preact/src/jsx'
+import { ComponentChildren, FunctionComponent, Ref } from 'preact'
+import { forwardRef } from 'preact/compat'
 
-const baseClass = `rounded px-4 py-1.75 font-bold text-sm fit-content`;
+const baseClass = 'rounded px-4 py-1.75 font-bold text-sm fit-content'
 
-type ButtonVariant = 'normal' | 'primary';
+type ButtonVariant = 'normal' | 'primary'
 
-const getClassName = (
-  variant: ButtonVariant,
-  danger: boolean,
-  disabled: boolean
-) => {
-  const borders =
-    variant === 'normal' ? 'border-solid border-main border-1' : 'no-border';
-  const cursor = disabled ? 'cursor-not-allowed' : 'cursor-pointer';
+const getClassName = (variant: ButtonVariant, danger: boolean, disabled: boolean) => {
+  const borders = variant === 'normal' ? 'border-solid border-main border-1' : 'no-border'
+  const cursor = disabled ? 'cursor-not-allowed' : 'cursor-pointer'
 
-  let colors =
-    variant === 'normal'
-      ? 'bg-default color-text'
-      : 'bg-info color-info-contrast';
+  let colors = variant === 'normal' ? 'bg-default color-text' : 'bg-info color-info-contrast'
 
   let focusHoverStates =
     variant === 'normal'
       ? 'focus:bg-contrast focus:outline-none hover:bg-contrast'
-      : 'hover:brightness-130 focus:outline-none focus:brightness-130';
+      : 'hover:brightness-130 focus:outline-none focus:brightness-130'
 
   if (danger) {
-    colors =
-      variant === 'normal'
-        ? 'bg-default color-danger'
-        : 'bg-danger color-info-contrast';
+    colors = variant === 'normal' ? 'bg-default color-danger' : 'bg-danger color-info-contrast'
   }
 
   if (disabled) {
-    colors =
-      variant === 'normal'
-        ? 'bg-default color-grey-2'
-        : 'bg-grey-2 color-info-contrast';
+    colors = variant === 'normal' ? 'bg-default color-grey-2' : 'bg-grey-2 color-info-contrast'
     focusHoverStates =
       variant === 'normal'
         ? 'focus:bg-default focus:outline-none hover:bg-default'
-        : 'focus:brightness-default focus:outline-none hover:brightness-default';
+        : 'focus:brightness-default focus:outline-none hover:brightness-default'
   }
 
-  return `${baseClass} ${colors} ${borders} ${focusHoverStates} ${cursor}`;
-};
+  return `${baseClass} ${colors} ${borders} ${focusHoverStates} ${cursor}`
+}
 
 type ButtonProps = JSXInternal.HTMLAttributes<HTMLButtonElement> & {
-  children?: ComponentChildren;
-  className?: string;
-  variant?: ButtonVariant;
-  dangerStyle?: boolean;
-  label?: string;
-};
+  children?: ComponentChildren
+  className?: string
+  variant?: ButtonVariant
+  dangerStyle?: boolean
+  label?: string
+}
 
 export const Button: FunctionComponent<ButtonProps> = forwardRef(
   (
@@ -65,7 +51,7 @@ export const Button: FunctionComponent<ButtonProps> = forwardRef(
       children,
       ...props
     }: ButtonProps,
-    ref: Ref<HTMLButtonElement>
+    ref: Ref<HTMLButtonElement>,
   ) => {
     return (
       <button
@@ -77,6 +63,6 @@ export const Button: FunctionComponent<ButtonProps> = forwardRef(
       >
         {label ?? children}
       </button>
-    );
-  }
-);
+    )
+  },
+)
diff --git a/app/assets/javascripts/components/IconButton.tsx b/app/assets/javascripts/Components/Button/IconButton.tsx
similarity index 66%
rename from app/assets/javascripts/components/IconButton.tsx
rename to app/assets/javascripts/Components/Button/IconButton.tsx
index 6349be7bc..f74bec08c 100644
--- a/app/assets/javascripts/components/IconButton.tsx
+++ b/app/assets/javascripts/Components/Button/IconButton.tsx
@@ -1,27 +1,27 @@
-import { FunctionComponent } from 'preact';
-import { Icon } from './Icon';
-import { IconType } from '@standardnotes/snjs';
+import { FunctionComponent } from 'preact'
+import { Icon } from '@/Components/Icon'
+import { IconType } from '@standardnotes/snjs'
 
 interface Props {
   /**
    * onClick - preventDefault is handled within the component
    */
-  onClick: () => void;
+  onClick: () => void
 
-  className?: string;
+  className?: string
 
-  icon: IconType;
+  icon: IconType
 
-  iconClassName?: string;
+  iconClassName?: string
 
   /**
    * Button tooltip
    */
-  title: string;
+  title: string
 
-  focusable: boolean;
+  focusable: boolean
 
-  disabled?: boolean;
+  disabled?: boolean
 }
 
 /**
@@ -38,10 +38,10 @@ export const IconButton: FunctionComponent<Props> = ({
   disabled = false,
 }) => {
   const click = (e: MouseEvent) => {
-    e.preventDefault();
-    onClick();
-  };
-  const focusableClass = focusable ? '' : 'focus:shadow-none';
+    e.preventDefault()
+    onClick()
+  }
+  const focusableClass = focusable ? '' : 'focus:shadow-none'
   return (
     <button
       type="button"
@@ -52,5 +52,5 @@ export const IconButton: FunctionComponent<Props> = ({
     >
       <Icon type={icon} className={iconClassName} />
     </button>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/Components/Button/RoundIconButton.tsx b/app/assets/javascripts/Components/Button/RoundIconButton.tsx
new file mode 100644
index 000000000..ee3d20325
--- /dev/null
+++ b/app/assets/javascripts/Components/Button/RoundIconButton.tsx
@@ -0,0 +1,40 @@
+import { FunctionComponent } from 'preact'
+import { Icon } from '@/Components/Icon'
+import { IconType } from '@standardnotes/snjs'
+
+type ButtonType = 'normal' | 'primary'
+
+interface Props {
+  /**
+   * onClick - preventDefault is handled within the component
+   */
+  onClick: () => void
+
+  type: ButtonType
+
+  className?: string
+
+  icon: IconType
+}
+
+/**
+ * IconButton component with an icon
+ * preventDefault is already handled within the component
+ */
+export const RoundIconButton: FunctionComponent<Props> = ({
+  onClick,
+  type,
+  className,
+  icon: iconType,
+}) => {
+  const click = (e: MouseEvent) => {
+    e.preventDefault()
+    onClick()
+  }
+  const classes = type === 'primary' ? 'info ' : ''
+  return (
+    <button className={`sn-icon-button ${classes} ${className ?? ''}`} onClick={click}>
+      <Icon type={iconType} />
+    </button>
+  )
+}
diff --git a/app/assets/javascripts/components/ChallengeModal/ChallengeModal.tsx b/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx
similarity index 54%
rename from app/assets/javascripts/components/ChallengeModal/ChallengeModal.tsx
rename to app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx
index 4f006c1db..c3990d784 100644
--- a/app/assets/javascripts/components/ChallengeModal/ChallengeModal.tsx
+++ b/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx
@@ -1,5 +1,5 @@
-import { WebApplication } from '@/ui_models/application';
-import { DialogContent, DialogOverlay } from '@reach/dialog';
+import { WebApplication } from '@/UIModels/Application'
+import { DialogContent, DialogOverlay } from '@reach/dialog'
 import {
   ButtonType,
   Challenge,
@@ -7,90 +7,87 @@ import {
   ChallengeReason,
   ChallengeValue,
   removeFromArray,
-} from '@standardnotes/snjs';
-import { ProtectedIllustration } from '@standardnotes/stylekit';
-import { FunctionComponent } from 'preact';
-import { useCallback, useEffect, useState } from 'preact/hooks';
-import { Button } from '../Button';
-import { Icon } from '../Icon';
-import { ChallengeModalPrompt } from './ChallengePrompt';
+} from '@standardnotes/snjs'
+import { ProtectedIllustration } from '@standardnotes/stylekit'
+import { FunctionComponent } from 'preact'
+import { useCallback, useEffect, useState } from 'preact/hooks'
+import { Button } from '@/Components/Button/Button'
+import { Icon } from '@/Components/Icon'
+import { ChallengeModalPrompt } from './ChallengePrompt'
 
 type InputValue = {
-  prompt: ChallengePrompt;
-  value: string | number | boolean;
-  invalid: boolean;
-};
+  prompt: ChallengePrompt
+  value: string | number | boolean
+  invalid: boolean
+}
 
-export type ChallengeModalValues = Record<ChallengePrompt['id'], InputValue>;
+export type ChallengeModalValues = Record<ChallengePrompt['id'], InputValue>
 
 type Props = {
-  application: WebApplication;
-  challenge: Challenge;
-  onDismiss: (challenge: Challenge) => Promise<void>;
-};
+  application: WebApplication
+  challenge: Challenge
+  onDismiss: (challenge: Challenge) => Promise<void>
+}
 
 const validateValues = (
   values: ChallengeModalValues,
-  prompts: ChallengePrompt[]
+  prompts: ChallengePrompt[],
 ): ChallengeModalValues | undefined => {
-  let hasInvalidValues = false;
-  const validatedValues = { ...values };
+  let hasInvalidValues = false
+  const validatedValues = { ...values }
   for (const prompt of prompts) {
-    const value = validatedValues[prompt.id];
+    const value = validatedValues[prompt.id]
     if (typeof value.value === 'string' && value.value.length === 0) {
-      validatedValues[prompt.id].invalid = true;
-      hasInvalidValues = true;
+      validatedValues[prompt.id].invalid = true
+      hasInvalidValues = true
     }
   }
   if (!hasInvalidValues) {
-    return validatedValues;
+    return validatedValues
   }
-};
+  return undefined
+}
 
-export const ChallengeModal: FunctionComponent<Props> = ({
-  application,
-  challenge,
-  onDismiss,
-}) => {
+export const ChallengeModal: FunctionComponent<Props> = ({ application, challenge, onDismiss }) => {
   const [values, setValues] = useState<ChallengeModalValues>(() => {
-    const values = {} as ChallengeModalValues;
+    const values = {} as ChallengeModalValues
     for (const prompt of challenge.prompts) {
       values[prompt.id] = {
         prompt,
         value: prompt.initialValue ?? '',
         invalid: false,
-      };
+      }
     }
-    return values;
-  });
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [, setProcessingPrompts] = useState<ChallengePrompt[]>([]);
-  const [bypassModalFocusLock, setBypassModalFocusLock] = useState(false);
+    return values
+  })
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [isProcessing, setIsProcessing] = useState(false)
+  const [, setProcessingPrompts] = useState<ChallengePrompt[]>([])
+  const [bypassModalFocusLock, setBypassModalFocusLock] = useState(false)
   const shouldShowForgotPasscode = [
     ChallengeReason.ApplicationUnlock,
     ChallengeReason.Migration,
-  ].includes(challenge.reason);
+  ].includes(challenge.reason)
 
   const submit = async () => {
-    const validatedValues = validateValues(values, challenge.prompts);
+    const validatedValues = validateValues(values, challenge.prompts)
     if (!validatedValues) {
-      return;
+      return
     }
     if (isSubmitting || isProcessing) {
-      return;
+      return
     }
-    setIsSubmitting(true);
-    setIsProcessing(true);
-    const valuesToProcess: ChallengeValue[] = [];
+    setIsSubmitting(true)
+    setIsProcessing(true)
+    const valuesToProcess: ChallengeValue[] = []
     for (const inputValue of Object.values(validatedValues)) {
-      const rawValue = inputValue.value;
-      const value = new ChallengeValue(inputValue.prompt, rawValue);
-      valuesToProcess.push(value);
+      const rawValue = inputValue.value
+      const value = new ChallengeValue(inputValue.prompt, rawValue)
+      valuesToProcess.push(value)
     }
-    const processingPrompts = valuesToProcess.map((v) => v.prompt);
-    setIsProcessing(processingPrompts.length > 0);
-    setProcessingPrompts(processingPrompts);
+    const processingPrompts = valuesToProcess.map((v) => v.prompt)
+    setIsProcessing(processingPrompts.length > 0)
+    setProcessingPrompts(processingPrompts)
     /**
      * Unfortunately neccessary to wait 50ms so that the above setState call completely
      * updates the UI to change processing state, before we enter into UI blocking operation
@@ -98,90 +95,85 @@ export const ChallengeModal: FunctionComponent<Props> = ({
      */
     setTimeout(() => {
       if (valuesToProcess.length > 0) {
-        application.submitValuesForChallenge(challenge, valuesToProcess);
+        application.submitValuesForChallenge(challenge, valuesToProcess).catch(console.error)
       } else {
-        setIsProcessing(false);
+        setIsProcessing(false)
       }
-      setIsSubmitting(false);
-    }, 50);
-  };
+      setIsSubmitting(false)
+    }, 50)
+  }
 
   const onValueChange = useCallback(
     (value: string | number, prompt: ChallengePrompt) => {
-      const newValues = { ...values };
-      newValues[prompt.id].invalid = false;
-      newValues[prompt.id].value = value;
-      setValues(newValues);
+      const newValues = { ...values }
+      newValues[prompt.id].invalid = false
+      newValues[prompt.id].value = value
+      setValues(newValues)
     },
-    [values]
-  );
+    [values],
+  )
 
   const closeModal = () => {
     if (challenge.cancelable) {
-      onDismiss(challenge);
+      onDismiss(challenge).catch(console.error)
     }
-  };
+  }
 
   useEffect(() => {
-    const removeChallengeObserver = application.addChallengeObserver(
-      challenge,
-      {
-        onValidValue: (value) => {
-          setValues((values) => {
-            const newValues = { ...values };
-            newValues[value.prompt.id].invalid = false;
-            return newValues;
-          });
+    const removeChallengeObserver = application.addChallengeObserver(challenge, {
+      onValidValue: (value) => {
+        setValues((values) => {
+          const newValues = { ...values }
+          newValues[value.prompt.id].invalid = false
+          return newValues
+        })
+        setProcessingPrompts((currentlyProcessingPrompts) => {
+          const processingPrompts = currentlyProcessingPrompts.slice()
+          removeFromArray(processingPrompts, value.prompt)
+          setIsProcessing(processingPrompts.length > 0)
+          return processingPrompts
+        })
+      },
+      onInvalidValue: (value) => {
+        setValues((values) => {
+          const newValues = { ...values }
+          newValues[value.prompt.id].invalid = true
+          return newValues
+        })
+        /** If custom validation, treat all values together and not individually */
+        if (!value.prompt.validates) {
+          setProcessingPrompts([])
+          setIsProcessing(false)
+        } else {
           setProcessingPrompts((currentlyProcessingPrompts) => {
-            const processingPrompts = currentlyProcessingPrompts.slice();
-            removeFromArray(processingPrompts, value.prompt);
-            setIsProcessing(processingPrompts.length > 0);
-            return processingPrompts;
-          });
-        },
-        onInvalidValue: (value) => {
-          setValues((values) => {
-            const newValues = { ...values };
-            newValues[value.prompt.id].invalid = true;
-            return newValues;
-          });
-          /** If custom validation, treat all values together and not individually */
-          if (!value.prompt.validates) {
-            setProcessingPrompts([]);
-            setIsProcessing(false);
-          } else {
-            setProcessingPrompts((currentlyProcessingPrompts) => {
-              const processingPrompts = currentlyProcessingPrompts.slice();
-              removeFromArray(processingPrompts, value.prompt);
-              setIsProcessing(processingPrompts.length > 0);
-              return processingPrompts;
-            });
-          }
-        },
-        onComplete: () => {
-          onDismiss(challenge);
-        },
-        onCancel: () => {
-          onDismiss(challenge);
-        },
-      }
-    );
+            const processingPrompts = currentlyProcessingPrompts.slice()
+            removeFromArray(processingPrompts, value.prompt)
+            setIsProcessing(processingPrompts.length > 0)
+            return processingPrompts
+          })
+        }
+      },
+      onComplete: () => {
+        onDismiss(challenge).catch(console.error)
+      },
+      onCancel: () => {
+        onDismiss(challenge).catch(console.error)
+      },
+    })
 
     return () => {
-      removeChallengeObserver();
-    };
-  }, [application, challenge, onDismiss]);
+      removeChallengeObserver()
+    }
+  }, [application, challenge, onDismiss])
 
   if (!challenge.prompts) {
-    return null;
+    return null
   }
 
   return (
     <DialogOverlay
       className={`sn-component ${
-        challenge.reason === ChallengeReason.ApplicationUnlock
-          ? 'challenge-modal-overlay'
-          : ''
+        challenge.reason === ChallengeReason.ApplicationUnlock ? 'challenge-modal-overlay' : ''
       }`}
       onDismiss={closeModal}
       dangerouslyBypassFocusLock={bypassModalFocusLock}
@@ -203,17 +195,13 @@ export const ChallengeModal: FunctionComponent<Props> = ({
           </button>
         )}
         <ProtectedIllustration className="w-30 h-30 mb-4" />
-        <div className="font-bold text-lg text-center max-w-76 mb-3">
-          {challenge.heading}
-        </div>
-        <div className="text-center text-sm max-w-76 mb-4">
-          {challenge.subheading}
-        </div>
+        <div className="font-bold text-lg text-center max-w-76 mb-3">{challenge.heading}</div>
+        <div className="text-center text-sm max-w-76 mb-4">{challenge.subheading}</div>
         <form
           className="flex flex-col items-center min-w-76 mb-4"
           onSubmit={(e) => {
-            e.preventDefault();
-            submit();
+            e.preventDefault()
+            submit().catch(console.error)
           }}
         >
           {challenge.prompts.map((prompt, index) => (
@@ -232,7 +220,7 @@ export const ChallengeModal: FunctionComponent<Props> = ({
           disabled={isProcessing}
           className="min-w-76 mb-3.5"
           onClick={() => {
-            submit();
+            submit().catch(console.error)
           }}
         >
           {isProcessing ? 'Generating Keys...' : 'Unlock'}
@@ -241,23 +229,23 @@ export const ChallengeModal: FunctionComponent<Props> = ({
           <Button
             className="flex items-center justify-center min-w-76"
             onClick={() => {
-              setBypassModalFocusLock(true);
+              setBypassModalFocusLock(true)
               application.alertService
                 .confirm(
                   'If you forgot your local passcode, your only option is to clear your local data from this device and sign back in to your account.',
                   'Forgot passcode?',
                   'Delete local data',
-                  ButtonType.Danger
+                  ButtonType.Danger,
                 )
                 .then((shouldDeleteLocalData) => {
                   if (shouldDeleteLocalData) {
-                    application.user.signOut();
+                    application.user.signOut().catch(console.error)
                   }
                 })
                 .catch(console.error)
                 .finally(() => {
-                  setBypassModalFocusLock(false);
-                });
+                  setBypassModalFocusLock(false)
+                })
             }}
           >
             <Icon type="help" className="mr-2 color-neutral" />
@@ -266,5 +254,5 @@ export const ChallengeModal: FunctionComponent<Props> = ({
         )}
       </DialogContent>
     </DialogOverlay>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/components/ChallengeModal/ChallengePrompt.tsx b/app/assets/javascripts/Components/ChallengeModal/ChallengePrompt.tsx
similarity index 65%
rename from app/assets/javascripts/components/ChallengeModal/ChallengePrompt.tsx
rename to app/assets/javascripts/Components/ChallengeModal/ChallengePrompt.tsx
index 24be05e2c..8ca6088e1 100644
--- a/app/assets/javascripts/components/ChallengeModal/ChallengePrompt.tsx
+++ b/app/assets/javascripts/Components/ChallengeModal/ChallengePrompt.tsx
@@ -2,20 +2,20 @@ import {
   ChallengePrompt,
   ChallengeValidation,
   ProtectionSessionDurations,
-} from '@standardnotes/snjs';
-import { FunctionComponent } from 'preact';
-import { useEffect, useRef } from 'preact/hooks';
-import { DecoratedInput } from '../DecoratedInput';
-import { DecoratedPasswordInput } from '../DecoratedPasswordInput';
-import { ChallengeModalValues } from './ChallengeModal';
+} from '@standardnotes/snjs'
+import { FunctionComponent } from 'preact'
+import { useEffect, useRef } from 'preact/hooks'
+import { DecoratedInput } from '@/Components/Input/DecoratedInput'
+import { DecoratedPasswordInput } from '@/Components/Input/DecoratedPasswordInput'
+import { ChallengeModalValues } from './ChallengeModal'
 
 type Props = {
-  prompt: ChallengePrompt;
-  values: ChallengeModalValues;
-  index: number;
-  onValueChange: (value: string | number, prompt: ChallengePrompt) => void;
-  isInvalid: boolean;
-};
+  prompt: ChallengePrompt
+  values: ChallengeModalValues
+  index: number
+  onValueChange: (value: string | number, prompt: ChallengePrompt) => void
+  isInvalid: boolean
+}
 
 export const ChallengeModalPrompt: FunctionComponent<Props> = ({
   prompt,
@@ -24,31 +24,28 @@ export const ChallengeModalPrompt: FunctionComponent<Props> = ({
   onValueChange,
   isInvalid,
 }) => {
-  const inputRef = useRef<HTMLInputElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
     if (index === 0) {
-      inputRef.current?.focus();
+      inputRef.current?.focus()
     }
-  }, [index]);
+  }, [index])
 
   useEffect(() => {
     if (isInvalid) {
-      inputRef.current?.focus();
+      inputRef.current?.focus()
     }
-  }, [isInvalid]);
+  }, [isInvalid])
 
   return (
     <>
       {prompt.validation === ChallengeValidation.ProtectionSessionDuration ? (
         <div className="mt-3 min-w-76">
-          <div className="text-sm font-medium mb-2">
-            Allow protected access for
-          </div>
+          <div className="text-sm font-medium mb-2">Allow protected access for</div>
           <div className="flex items-center justify-between bg-grey-4 rounded p-1">
             {ProtectionSessionDurations.map((option) => {
-              const selected =
-                option.valueInSeconds === values[prompt.id].value;
+              const selected = option.valueInSeconds === values[prompt.id].value
               return (
                 <label
                   className={`cursor-pointer px-2 py-1.5 rounded ${
@@ -60,21 +57,19 @@ export const ChallengeModalPrompt: FunctionComponent<Props> = ({
                   <input
                     type="radio"
                     name={`session-duration-${prompt.id}`}
-                    className={
-                      'appearance-none m-0 focus:shadow-none focus:outline-none'
-                    }
+                    className={'appearance-none m-0 focus:shadow-none focus:outline-none'}
                     style={{
                       marginRight: 0,
                     }}
                     checked={selected}
                     onChange={(event) => {
-                      event.preventDefault();
-                      onValueChange(option.valueInSeconds, prompt);
+                      event.preventDefault()
+                      onValueChange(option.valueInSeconds, prompt)
                     }}
                   />
                   {option.label}
                 </label>
-              );
+              )
             })}
           </div>
         </div>
@@ -94,10 +89,8 @@ export const ChallengeModalPrompt: FunctionComponent<Props> = ({
         />
       )}
       {isInvalid && (
-        <div className="text-sm color-danger mt-2">
-          Invalid authentication, please try again.
-        </div>
+        <div className="text-sm color-danger mt-2">Invalid authentication, please try again.</div>
       )}
     </>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/components/ChangeEditorButton.tsx b/app/assets/javascripts/Components/ChangeEditor/ChangeEditorButton.tsx
similarity index 51%
rename from app/assets/javascripts/components/ChangeEditorButton.tsx
rename to app/assets/javascripts/Components/ChangeEditor/ChangeEditorButton.tsx
index 0523dc878..928539914 100644
--- a/app/assets/javascripts/components/ChangeEditorButton.tsx
+++ b/app/assets/javascripts/Components/ChangeEditor/ChangeEditorButton.tsx
@@ -1,74 +1,63 @@
-import { WebApplication } from '@/ui_models/application';
-import { AppState } from '@/ui_models/app_state';
-import { MENU_MARGIN_FROM_APP_BORDER } from '@/constants';
-import {
-  Disclosure,
-  DisclosureButton,
-  DisclosurePanel,
-} from '@reach/disclosure';
-import VisuallyHidden from '@reach/visually-hidden';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { useRef, useState } from 'preact/hooks';
-import { Icon } from './Icon';
-import { ChangeEditorMenu } from './NotesOptions/changeEditor/ChangeEditorMenu';
-import { useCloseOnBlur } from './utils';
+import { WebApplication } from '@/UIModels/Application'
+import { AppState } from '@/UIModels/AppState'
+import { MENU_MARGIN_FROM_APP_BORDER } from '@/Constants'
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
+import VisuallyHidden from '@reach/visually-hidden'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { useRef, useState } from 'preact/hooks'
+import { Icon } from '@/Components/Icon'
+import { ChangeEditorMenu } from './ChangeEditorMenu'
+import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
 
 type Props = {
-  application: WebApplication;
-  appState: AppState;
-  onClickPreprocessing?: () => Promise<void>;
-};
+  application: WebApplication
+  appState: AppState
+  onClickPreprocessing?: () => Promise<void>
+}
 
 export const ChangeEditorButton: FunctionComponent<Props> = observer(
   ({ application, appState, onClickPreprocessing }) => {
-    const note = Object.values(appState.notes.selectedNotes)[0];
-    const [isOpen, setIsOpen] = useState(false);
-    const [isVisible, setIsVisible] = useState(false);
+    const note = Object.values(appState.notes.selectedNotes)[0]
+    const [isOpen, setIsOpen] = useState(false)
+    const [isVisible, setIsVisible] = useState(false)
     const [position, setPosition] = useState({
       top: 0,
       right: 0,
-    });
-    const [maxHeight, setMaxHeight] = useState<number | 'auto'>('auto');
-    const buttonRef = useRef<HTMLButtonElement>(null);
-    const panelRef = useRef<HTMLDivElement>(null);
-    const containerRef = useRef<HTMLDivElement>(null);
-    const [closeOnBlur] = useCloseOnBlur(containerRef, setIsOpen);
+    })
+    const [maxHeight, setMaxHeight] = useState<number | 'auto'>('auto')
+    const buttonRef = useRef<HTMLButtonElement>(null)
+    const panelRef = useRef<HTMLDivElement>(null)
+    const containerRef = useRef<HTMLDivElement>(null)
+    const [closeOnBlur] = useCloseOnBlur(containerRef, setIsOpen)
 
     const toggleChangeEditorMenu = async () => {
-      const rect = buttonRef.current?.getBoundingClientRect();
+      const rect = buttonRef.current?.getBoundingClientRect()
       if (rect) {
-        const { clientHeight } = document.documentElement;
-        const footerElementRect = document
-          .getElementById('footer-bar')
-          ?.getBoundingClientRect();
-        const footerHeightInPx = footerElementRect?.height;
+        const { clientHeight } = document.documentElement
+        const footerElementRect = document.getElementById('footer-bar')?.getBoundingClientRect()
+        const footerHeightInPx = footerElementRect?.height
 
         if (footerHeightInPx) {
-          setMaxHeight(
-            clientHeight -
-              rect.bottom -
-              footerHeightInPx -
-              MENU_MARGIN_FROM_APP_BORDER
-          );
+          setMaxHeight(clientHeight - rect.bottom - footerHeightInPx - MENU_MARGIN_FROM_APP_BORDER)
         }
 
         setPosition({
           top: rect.bottom,
           right: document.body.clientWidth - rect.right,
-        });
+        })
 
-        const newOpenState = !isOpen;
+        const newOpenState = !isOpen
         if (newOpenState && onClickPreprocessing) {
-          await onClickPreprocessing();
+          await onClickPreprocessing()
         }
 
-        setIsOpen(newOpenState);
+        setIsOpen(newOpenState)
         setTimeout(() => {
-          setIsVisible(newOpenState);
-        });
+          setIsVisible(newOpenState)
+        })
       }
-    };
+    }
 
     return (
       <div ref={containerRef}>
@@ -76,7 +65,7 @@ export const ChangeEditorButton: FunctionComponent<Props> = observer(
           <DisclosureButton
             onKeyDown={(event) => {
               if (event.key === 'Escape') {
-                setIsOpen(false);
+                setIsOpen(false)
               }
             }}
             onBlur={closeOnBlur}
@@ -89,8 +78,8 @@ export const ChangeEditorButton: FunctionComponent<Props> = observer(
           <DisclosurePanel
             onKeyDown={(event) => {
               if (event.key === 'Escape') {
-                setIsOpen(false);
-                buttonRef.current?.focus();
+                setIsOpen(false)
+                buttonRef.current?.focus()
               }
             }}
             ref={panelRef}
@@ -108,13 +97,13 @@ export const ChangeEditorButton: FunctionComponent<Props> = observer(
                 isVisible={isVisible}
                 note={note}
                 closeMenu={() => {
-                  setIsOpen(false);
+                  setIsOpen(false)
                 }}
               />
             )}
           </DisclosurePanel>
         </Disclosure>
       </div>
-    );
-  }
-);
+    )
+  },
+)
diff --git a/app/assets/javascripts/components/NotesOptions/changeEditor/ChangeEditorMenu.tsx b/app/assets/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
similarity index 50%
rename from app/assets/javascripts/components/NotesOptions/changeEditor/ChangeEditorMenu.tsx
rename to app/assets/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
index cd35f31b5..a76aacfd6 100644
--- a/app/assets/javascripts/components/NotesOptions/changeEditor/ChangeEditorMenu.tsx
+++ b/app/assets/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
@@ -1,14 +1,14 @@
-import { Icon } from '@/components/Icon';
-import { Menu } from '@/components/Menu/Menu';
-import { MenuItem, MenuItemType } from '@/components/Menu/MenuItem';
+import { Icon } from '@/Components/Icon'
+import { Menu } from '@/Components/Menu/Menu'
+import { MenuItem, MenuItemType } from '@/Components/Menu/MenuItem'
 import {
   reloadFont,
   transactionForAssociateComponentWithCurrentNote,
   transactionForDisassociateComponentWithCurrentNote,
-} from '@/components/NoteView/NoteView';
-import { usePremiumModal } from '@/components/Premium';
-import { STRING_EDIT_LOCKED_ATTEMPT } from '@/strings';
-import { WebApplication } from '@/ui_models/application';
+} from '@/Components/NoteView/NoteView'
+import { usePremiumModal } from '@/Hooks/usePremiumModal'
+import { STRING_EDIT_LOCKED_ATTEMPT } from '@/Strings'
+import { WebApplication } from '@/UIModels/Application'
 import {
   ComponentArea,
   ItemMutator,
@@ -17,25 +17,21 @@ import {
   SNComponent,
   SNNote,
   TransactionalMutation,
-} from '@standardnotes/snjs';
-import { Fragment, FunctionComponent } from 'preact';
-import { useCallback, useEffect, useState } from 'preact/hooks';
-import { EditorMenuItem, EditorMenuGroup } from '../ChangeEditorOption';
-import {
-  createEditorMenuGroups,
-  PLAIN_EDITOR_NAME,
-} from './createEditorMenuGroups';
+} from '@standardnotes/snjs'
+import { Fragment, FunctionComponent } from 'preact'
+import { useCallback, useEffect, useState } from 'preact/hooks'
+import { EditorMenuItem, EditorMenuGroup } from '@/Components/NotesOptions/ChangeEditorOption'
+import { createEditorMenuGroups, PLAIN_EDITOR_NAME } from './createEditorMenuGroups'
 
 type ChangeEditorMenuProps = {
-  application: WebApplication;
-  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void;
-  closeMenu: () => void;
-  isVisible: boolean;
-  note: SNNote;
-};
+  application: WebApplication
+  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
+  closeMenu: () => void
+  isVisible: boolean
+  note: SNNote
+}
 
-const getGroupId = (group: EditorMenuGroup) =>
-  group.title.toLowerCase().replace(/\s/, '-');
+const getGroupId = (group: EditorMenuGroup) => group.title.toLowerCase().replace(/\s/, '-')
 
 export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
   application,
@@ -45,65 +41,59 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
   note,
 }) => {
   const [editors] = useState<SNComponent[]>(() =>
-    application.componentManager
-      .componentsForArea(ComponentArea.Editor)
-      .sort((a, b) => {
-        return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
-      })
-  );
-  const [groups, setGroups] = useState<EditorMenuGroup[]>([]);
-  const [currentEditor, setCurrentEditor] = useState<SNComponent>();
+    application.componentManager.componentsForArea(ComponentArea.Editor).sort((a, b) => {
+      return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1
+    }),
+  )
+  const [groups, setGroups] = useState<EditorMenuGroup[]>([])
+  const [currentEditor, setCurrentEditor] = useState<SNComponent>()
 
   useEffect(() => {
-    setGroups(createEditorMenuGroups(application, editors));
-  }, [application, editors]);
+    setGroups(createEditorMenuGroups(application, editors))
+  }, [application, editors])
 
   useEffect(() => {
     if (note) {
-      setCurrentEditor(application.componentManager.editorForNote(note));
+      setCurrentEditor(application.componentManager.editorForNote(note))
     }
-  }, [application, note]);
+  }, [application, note])
 
-  const premiumModal = usePremiumModal();
+  const premiumModal = usePremiumModal()
 
   const isSelectedEditor = useCallback(
     (item: EditorMenuItem) => {
       if (currentEditor) {
         if (item?.component?.identifier === currentEditor.identifier) {
-          return true;
+          return true
         }
       } else if (item.name === PLAIN_EDITOR_NAME) {
-        return true;
+        return true
       }
-      return false;
+      return false
     },
-    [currentEditor]
-  );
+    [currentEditor],
+  )
 
-  const selectComponent = async (
-    component: SNComponent | null,
-    note: SNNote
-  ) => {
+  const selectComponent = async (component: SNComponent | null, note: SNNote) => {
     if (component) {
       if (component.conflictOf) {
-        application.mutator.changeAndSaveItem(component, (mutator) => {
-          mutator.conflictOf = undefined;
-        });
+        application.mutator
+          .changeAndSaveItem(component, (mutator) => {
+            mutator.conflictOf = undefined
+          })
+          .catch(console.error)
       }
     }
 
-    const transactions: TransactionalMutation[] = [];
+    const transactions: TransactionalMutation[] = []
 
     if (application.getAppState().getActiveNoteController()?.isTemplateNote) {
-      await application
-        .getAppState()
-        .getActiveNoteController()
-        .insertTemplatedNote();
+      await application.getAppState().getActiveNoteController().insertTemplatedNote()
     }
 
     if (note.locked) {
-      application.alertService.alert(STRING_EDIT_LOCKED_ATTEMPT);
-      return;
+      application.alertService.alert(STRING_EDIT_LOCKED_ATTEMPT).catch(console.error)
+      return
     }
 
     if (!component) {
@@ -111,97 +101,79 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
         transactions.push({
           itemUuid: note.uuid,
           mutate: (m: ItemMutator) => {
-            const noteMutator = m as NoteMutator;
-            noteMutator.prefersPlainEditor = true;
+            const noteMutator = m as NoteMutator
+            noteMutator.prefersPlainEditor = true
           },
-        });
+        })
       }
-      const currentEditor = application.componentManager.editorForNote(note);
+      const currentEditor = application.componentManager.editorForNote(note)
       if (currentEditor?.isExplicitlyEnabledForItem(note.uuid)) {
-        transactions.push(
-          transactionForDisassociateComponentWithCurrentNote(
-            currentEditor,
-            note
-          )
-        );
+        transactions.push(transactionForDisassociateComponentWithCurrentNote(currentEditor, note))
       }
-      reloadFont(application.getPreference(PrefKey.EditorMonospaceEnabled));
+      reloadFont(application.getPreference(PrefKey.EditorMonospaceEnabled))
     } else if (component.area === ComponentArea.Editor) {
-      const currentEditor = application.componentManager.editorForNote(note);
+      const currentEditor = application.componentManager.editorForNote(note)
       if (currentEditor && component.uuid !== currentEditor.uuid) {
-        transactions.push(
-          transactionForDisassociateComponentWithCurrentNote(
-            currentEditor,
-            note
-          )
-        );
+        transactions.push(transactionForDisassociateComponentWithCurrentNote(currentEditor, note))
       }
-      const prefersPlain = note.prefersPlainEditor;
+      const prefersPlain = note.prefersPlainEditor
       if (prefersPlain) {
         transactions.push({
           itemUuid: note.uuid,
           mutate: (m: ItemMutator) => {
-            const noteMutator = m as NoteMutator;
-            noteMutator.prefersPlainEditor = false;
+            const noteMutator = m as NoteMutator
+            noteMutator.prefersPlainEditor = false
           },
-        });
+        })
       }
-      transactions.push(
-        transactionForAssociateComponentWithCurrentNote(component, note)
-      );
+      transactions.push(transactionForAssociateComponentWithCurrentNote(component, note))
     }
 
-    await application.mutator.runTransactionalMutations(transactions);
+    await application.mutator.runTransactionalMutations(transactions)
     /** Dirtying can happen above */
-    application.sync.sync();
+    application.sync.sync().catch(console.error)
 
-    setCurrentEditor(application.componentManager.editorForNote(note));
-  };
+    setCurrentEditor(application.componentManager.editorForNote(note))
+  }
 
   const selectEditor = async (itemToBeSelected: EditorMenuItem) => {
     if (!itemToBeSelected.isEntitled) {
-      premiumModal.activate(itemToBeSelected.name);
-      return;
+      premiumModal.activate(itemToBeSelected.name)
+      return
     }
 
-    const areBothEditorsPlain = !currentEditor && !itemToBeSelected.component;
+    const areBothEditorsPlain = !currentEditor && !itemToBeSelected.component
 
     if (areBothEditorsPlain) {
-      return;
+      return
     }
 
-    let shouldSelectEditor = true;
+    let shouldSelectEditor = true
 
     if (itemToBeSelected.component) {
-      const changeRequiresAlert =
-        application.componentManager.doesEditorChangeRequireAlert(
-          currentEditor,
-          itemToBeSelected.component
-        );
+      const changeRequiresAlert = application.componentManager.doesEditorChangeRequireAlert(
+        currentEditor,
+        itemToBeSelected.component,
+      )
 
       if (changeRequiresAlert) {
-        shouldSelectEditor =
-          await application.componentManager.showEditorChangeAlert();
+        shouldSelectEditor = await application.componentManager.showEditorChangeAlert()
       }
     }
 
     if (shouldSelectEditor) {
-      selectComponent(itemToBeSelected.component ?? null, note);
+      selectComponent(itemToBeSelected.component ?? null, note).catch(console.error)
     }
 
-    closeMenu();
-  };
+    closeMenu()
+  }
 
   return (
-    <Menu
-      className="pt-0.5 pb-1"
-      a11yLabel="Change editor menu"
-      isOpen={isVisible}
-    >
+    <Menu className="pt-0.5 pb-1" a11yLabel="Change editor menu" isOpen={isVisible}>
       {groups
         .filter((group) => group.items && group.items.length)
         .map((group, index) => {
-          const groupId = getGroupId(group);
+          const groupId = getGroupId(group)
 
           return (
             <Fragment key={groupId}>
@@ -210,24 +182,21 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
                   index === 0 ? 'border-t-0 mb-2' : 'my-2'
                 }`}
               >
-                {group.icon && (
-                  <Icon
-                    type={group.icon}
-                    className={`mr-2 ${group.iconClassName}`}
-                  />
-                )}
+                {group.icon && <Icon type={group.icon} className={`mr-2 ${group.iconClassName}`} />}
                 <div className="font-semibold text-input">{group.title}</div>
               </div>
               {group.items.map((item) => {
                 const onClickEditorItem = () => {
-                  selectEditor(item);
-                };
+                  selectEditor(item).catch(console.error)
+                }
 
                 return (
                   <MenuItem
                     type={MenuItemType.RadioButton}
                     onClick={onClickEditorItem}
-                    className={`sn-dropdown-item py-2 text-input focus:bg-info-backdrop focus:shadow-none`}
+                    className={
+                      'sn-dropdown-item py-2 text-input focus:bg-info-backdrop focus:shadow-none'
+                    }
                     onBlur={closeOnBlur}
                     checked={isSelectedEditor(item)}
                   >
@@ -236,11 +205,11 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
                       {!item.isEntitled && <Icon type="premium-feature" />}
                     </div>
                   </MenuItem>
-                );
+                )
               })}
             </Fragment>
-          );
+          )
         })}
     </Menu>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/components/NotesOptions/changeEditor/createEditorMenuGroups.ts b/app/assets/javascripts/Components/ChangeEditor/createEditorMenuGroups.ts
similarity index 70%
rename from app/assets/javascripts/components/NotesOptions/changeEditor/createEditorMenuGroups.ts
rename to app/assets/javascripts/Components/ChangeEditor/createEditorMenuGroups.ts
index d69be1d46..0ec3dab33 100644
--- a/app/assets/javascripts/components/NotesOptions/changeEditor/createEditorMenuGroups.ts
+++ b/app/assets/javascripts/Components/ChangeEditor/createEditorMenuGroups.ts
@@ -1,4 +1,4 @@
-import { WebApplication } from '@/ui_models/application';
+import { WebApplication } from '@/UIModels/Application'
 import {
   ContentType,
   FeatureStatus,
@@ -7,37 +7,32 @@ import {
   FeatureDescription,
   GetFeatures,
   NoteType,
-} from '@standardnotes/snjs';
-import { EditorMenuItem, EditorMenuGroup } from '../ChangeEditorOption';
+} from '@standardnotes/snjs'
+import { EditorMenuItem, EditorMenuGroup } from '@/Components/NotesOptions/ChangeEditorOption'
 
-export const PLAIN_EDITOR_NAME = 'Plain Editor';
+export const PLAIN_EDITOR_NAME = 'Plain Editor'
 
-type EditorGroup = NoteType | 'plain' | 'others';
+type EditorGroup = NoteType | 'plain' | 'others'
 
-const getEditorGroup = (
-  featureDescription: FeatureDescription
-): EditorGroup => {
+const getEditorGroup = (featureDescription: FeatureDescription): EditorGroup => {
   if (featureDescription.note_type) {
-    return featureDescription.note_type;
+    return featureDescription.note_type
   } else if (featureDescription.file_type) {
     switch (featureDescription.file_type) {
       case 'txt':
-        return 'plain';
+        return 'plain'
       case 'html':
-        return NoteType.RichText;
+        return NoteType.RichText
       case 'md':
-        return NoteType.Markdown;
+        return NoteType.Markdown
       default:
-        return 'others';
+        return 'others'
     }
   }
-  return 'others';
-};
+  return 'others'
+}
 
-export const createEditorMenuGroups = (
-  application: WebApplication,
-  editors: SNComponent[]
-) => {
+export const createEditorMenuGroups = (application: WebApplication, editors: SNComponent[]) => {
   const editorItems: Record<EditorGroup, EditorMenuItem[]> = {
     plain: [
       {
@@ -52,40 +47,34 @@ export const createEditorMenuGroups = (
     spreadsheet: [],
     authentication: [],
     others: [],
-  };
+  }
 
   GetFeatures()
     .filter(
       (feature) =>
-        feature.content_type === ContentType.Component &&
-        feature.area === ComponentArea.Editor
+        feature.content_type === ContentType.Component && feature.area === ComponentArea.Editor,
     )
     .forEach((editorFeature) => {
-      const notInstalled = !editors.find(
-        (editor) => editor.identifier === editorFeature.identifier
-      );
-      const isExperimental = application.features.isExperimentalFeature(
-        editorFeature.identifier
-      );
+      const notInstalled = !editors.find((editor) => editor.identifier === editorFeature.identifier)
+      const isExperimental = application.features.isExperimentalFeature(editorFeature.identifier)
       if (notInstalled && !isExperimental) {
         editorItems[getEditorGroup(editorFeature)].push({
           name: editorFeature.name as string,
           isEntitled: false,
-        });
+        })
       }
-    });
+    })
 
   editors.forEach((editor) => {
     const editorItem: EditorMenuItem = {
       name: editor.name,
       component: editor,
       isEntitled:
-        application.features.getFeatureStatus(editor.identifier) ===
-        FeatureStatus.Entitled,
-    };
+        application.features.getFeatureStatus(editor.identifier) === FeatureStatus.Entitled,
+    }
 
-    editorItems[getEditorGroup(editor.package_info)].push(editorItem);
-  });
+    editorItems[getEditorGroup(editor.package_info)].push(editorItem)
+  })
 
   const editorMenuGroups: EditorMenuGroup[] = [
     {
@@ -136,7 +125,7 @@ export const createEditorMenuGroups = (
       title: 'Others',
       items: editorItems.others,
     },
-  ];
+  ]
 
-  return editorMenuGroups;
-};
+  return editorMenuGroups
+}
diff --git a/app/assets/javascripts/components/Checkbox.tsx b/app/assets/javascripts/Components/Checkbox/index.tsx
similarity index 73%
rename from app/assets/javascripts/components/Checkbox.tsx
rename to app/assets/javascripts/Components/Checkbox/index.tsx
index e453f55d6..11bb910e7 100644
--- a/app/assets/javascripts/components/Checkbox.tsx
+++ b/app/assets/javascripts/Components/Checkbox/index.tsx
@@ -1,12 +1,12 @@
-import { FunctionComponent } from 'preact';
+import { FunctionComponent } from 'preact'
 
 type CheckboxProps = {
-  name: string;
-  checked: boolean;
-  onChange: (e: Event) => void;
-  disabled?: boolean;
-  label: string;
-};
+  name: string
+  checked: boolean
+  onChange: (e: Event) => void
+  disabled?: boolean
+  label: string
+}
 
 export const Checkbox: FunctionComponent<CheckboxProps> = ({
   name,
@@ -28,5 +28,5 @@ export const Checkbox: FunctionComponent<CheckboxProps> = ({
       />
       {label}
     </label>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/components/ComponentView/IsDeprecated.tsx b/app/assets/javascripts/Components/ComponentView/IsDeprecated.tsx
similarity index 57%
rename from app/assets/javascripts/components/ComponentView/IsDeprecated.tsx
rename to app/assets/javascripts/Components/ComponentView/IsDeprecated.tsx
index f65e80008..a1f4150c1 100644
--- a/app/assets/javascripts/components/ComponentView/IsDeprecated.tsx
+++ b/app/assets/javascripts/Components/ComponentView/IsDeprecated.tsx
@@ -1,14 +1,14 @@
-import { FunctionalComponent } from 'preact';
+import { FunctionalComponent } from 'preact'
 
 interface IProps {
-  deprecationMessage: string | undefined;
-  dismissDeprecationMessage: () => void;
+  deprecationMessage: string | undefined
+  dismissDeprecationMessage: () => void
 }
 
 export const IsDeprecated: FunctionalComponent<IProps> = ({
-                                                            deprecationMessage,
-                                                            dismissDeprecationMessage
-                                                          }) => {
+  deprecationMessage,
+  dismissDeprecationMessage,
+}) => {
   return (
     <div className={'sn-component'}>
       <div className={'sk-app-bar no-edges no-top-edge dynamic-height'}>
@@ -21,12 +21,10 @@ export const IsDeprecated: FunctionalComponent<IProps> = ({
         </div>
         <div className={'right'}>
           <div className={'sk-app-bar-item'} onClick={dismissDeprecationMessage}>
-            <button className={'sn-button small info'}>
-              Dismiss
-            </button>
+            <button className={'sn-button small info'}>Dismiss</button>
           </div>
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/components/ComponentView/IsExpired.tsx b/app/assets/javascripts/Components/ComponentView/IsExpired.tsx
similarity index 53%
rename from app/assets/javascripts/components/ComponentView/IsExpired.tsx
rename to app/assets/javascripts/Components/ComponentView/IsExpired.tsx
index ce95e0750..d2df6cee1 100644
--- a/app/assets/javascripts/components/ComponentView/IsExpired.tsx
+++ b/app/assets/javascripts/Components/ComponentView/IsExpired.tsx
@@ -1,29 +1,25 @@
-import { FeatureStatus } from '@standardnotes/snjs';
-import { FunctionalComponent } from 'preact';
+import { FeatureStatus } from '@standardnotes/snjs'
+import { FunctionalComponent } from 'preact'
 
 interface IProps {
-  expiredDate: string;
-  componentName: string;
-  featureStatus: FeatureStatus;
-  manageSubscription: () => void;
+  expiredDate: string
+  componentName: string
+  featureStatus: FeatureStatus
+  manageSubscription: () => void
 }
 
-const statusString = (
-  featureStatus: FeatureStatus,
-  expiredDate: string,
-  componentName: string
-) => {
+const statusString = (featureStatus: FeatureStatus, expiredDate: string, componentName: string) => {
   switch (featureStatus) {
     case FeatureStatus.InCurrentPlanButExpired:
-      return `Your subscription expired on ${expiredDate}`;
+      return `Your subscription expired on ${expiredDate}`
     case FeatureStatus.NoUserSubscription:
-      return `You do not have an active subscription`;
+      return 'You do not have an active subscription'
     case FeatureStatus.NotInCurrentPlan:
-      return `Please upgrade your plan to access ${componentName}`;
+      return `Please upgrade your plan to access ${componentName}`
     default:
-      return `${componentName} is valid and you should not be seeing this message`;
+      return `${componentName} is valid and you should not be seeing this message`
   }
-};
+}
 
 export const IsExpired: FunctionalComponent<IProps> = ({
   expiredDate,
@@ -41,27 +37,18 @@ export const IsExpired: FunctionalComponent<IProps> = ({
             </div>
             <div className={'sk-app-bar-item-column'}>
               <div>
-                <strong>
-                  {statusString(featureStatus, expiredDate, componentName)}
-                </strong>
-                <div className={'sk-p'}>
-                  {componentName} is in a read-only state.
-                </div>
+                <strong>{statusString(featureStatus, expiredDate, componentName)}</strong>
+                <div className={'sk-p'}>{componentName} is in a read-only state.</div>
               </div>
             </div>
           </div>
         </div>
         <div className={'right'}>
-          <div
-            className={'sk-app-bar-item'}
-            onClick={() => manageSubscription()}
-          >
-            <button className={'sn-button small success'}>
-              Manage Subscription
-            </button>
+          <div className={'sk-app-bar-item'} onClick={() => manageSubscription()}>
+            <button className={'sn-button small success'}>Manage Subscription</button>
           </div>
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/components/ComponentView/IssueOnLoading.tsx b/app/assets/javascripts/Components/ComponentView/IssueOnLoading.tsx
similarity index 59%
rename from app/assets/javascripts/components/ComponentView/IssueOnLoading.tsx
rename to app/assets/javascripts/Components/ComponentView/IssueOnLoading.tsx
index b2c70b408..69f3c48ca 100644
--- a/app/assets/javascripts/components/ComponentView/IssueOnLoading.tsx
+++ b/app/assets/javascripts/Components/ComponentView/IssueOnLoading.tsx
@@ -1,22 +1,17 @@
-import { FunctionalComponent } from 'preact';
+import { FunctionalComponent } from 'preact'
 
 interface IProps {
-  componentName: string;
-  reloadIframe: () => void;
+  componentName: string
+  reloadIframe: () => void
 }
 
-export const IssueOnLoading: FunctionalComponent<IProps> = ({
-  componentName,
-  reloadIframe,
-}) => {
+export const IssueOnLoading: FunctionalComponent<IProps> = ({ componentName, reloadIframe }) => {
   return (
     <div className={'sn-component'}>
       <div className={'sk-app-bar no-edges no-top-edge dynamic-height'}>
         <div className={'left'}>
           <div className={'sk-app-bar-item'}>
-            <div className={'sk-label.warning'}>
-              There was an issue loading {componentName}.
-            </div>
+            <div className={'sk-label.warning'}>There was an issue loading {componentName}.</div>
           </div>
         </div>
         <div className={'right'}>
@@ -26,5 +21,5 @@ export const IssueOnLoading: FunctionalComponent<IProps> = ({
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/components/ComponentView/OfflineRestricted.tsx b/app/assets/javascripts/Components/ComponentView/OfflineRestricted.tsx
similarity index 69%
rename from app/assets/javascripts/components/ComponentView/OfflineRestricted.tsx
rename to app/assets/javascripts/Components/ComponentView/OfflineRestricted.tsx
index a60ee0de3..290ef05d0 100644
--- a/app/assets/javascripts/components/ComponentView/OfflineRestricted.tsx
+++ b/app/assets/javascripts/Components/ComponentView/OfflineRestricted.tsx
@@ -1,4 +1,4 @@
-import { FunctionalComponent } from 'preact';
+import { FunctionalComponent } from 'preact'
 
 export const OfflineRestricted: FunctionalComponent = () => {
   return (
@@ -11,21 +11,17 @@ export const OfflineRestricted: FunctionalComponent = () => {
               You have restricted this component to not use a hosted version.
             </div>
             <div className={'sk-subtitle'}>
-              Locally-installed components are not available in the web
-              application.
+              Locally-installed components are not available in the web application.
             </div>
             <div className={'sk-panel-row'} />
             <div className={'sk-panel-row'}>
               <div className={'sk-panel-column'}>
-                <div className={'sk-p'}>
-                  To continue, choose from the following options:
-                </div>
+                <div className={'sk-p'}>To continue, choose from the following options:</div>
                 <ul>
                   <li className={'sk-p'}>
-                    Enable the Hosted option for this component by opening the
-                    Preferences {'>'} General {'>'} Advanced Settings menu and{' '}
-                    toggling 'Use hosted when local is unavailable' under this
-                    component's options. Then press Reload.
+                    Enable the Hosted option for this component by opening the Preferences {'>'}{' '}
+                    General {'>'} Advanced Settings menu and toggling 'Use hosted when local is
+                    unavailable' under this component's options. Then press Reload.
                   </li>
                   <li className={'sk-p'}>Use the desktop application.</li>
                 </ul>
@@ -35,5 +31,5 @@ export const OfflineRestricted: FunctionalComponent = () => {
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/components/ComponentView/UrlMissing.tsx b/app/assets/javascripts/Components/ComponentView/UrlMissing.tsx
similarity index 60%
rename from app/assets/javascripts/components/ComponentView/UrlMissing.tsx
rename to app/assets/javascripts/Components/ComponentView/UrlMissing.tsx
index fa6a56af2..c077671f6 100644
--- a/app/assets/javascripts/components/ComponentView/UrlMissing.tsx
+++ b/app/assets/javascripts/Components/ComponentView/UrlMissing.tsx
@@ -1,7 +1,7 @@
-import { FunctionalComponent } from 'preact';
+import { FunctionalComponent } from 'preact'
 
 interface IProps {
-  componentName: string;
+  componentName: string
 }
 
 export const UrlMissing: FunctionalComponent<IProps> = ({ componentName }) => {
@@ -14,16 +14,14 @@ export const UrlMissing: FunctionalComponent<IProps> = ({ componentName }) => {
               This extension is missing its URL property.
             </div>
             <p>
-              In order to access your note immediately,
-              please switch from {componentName} to the Plain Editor.
-            </p>
-            <br/>
-            <p>
-              Please contact help@standardnotes.com to remedy this issue.
+              In order to access your note immediately, please switch from {componentName} to the
+              Plain Editor.
             </p>
+            <br />
+            <p>Please contact help@standardnotes.com to remedy this issue.</p>
           </div>
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/Components/ComponentView/index.tsx b/app/assets/javascripts/Components/ComponentView/index.tsx
new file mode 100644
index 000000000..be26e251d
--- /dev/null
+++ b/app/assets/javascripts/Components/ComponentView/index.tsx
@@ -0,0 +1,221 @@
+import {
+  ComponentAction,
+  FeatureStatus,
+  SNComponent,
+  dateToLocalizedString,
+  ComponentViewer,
+  ComponentViewerEvent,
+  ComponentViewerError,
+} from '@standardnotes/snjs'
+import { WebApplication } from '@/UIModels/Application'
+import { FunctionalComponent } from 'preact'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks'
+import { observer } from 'mobx-react-lite'
+import { OfflineRestricted } from '@/Components/ComponentView/OfflineRestricted'
+import { UrlMissing } from '@/Components/ComponentView/UrlMissing'
+import { IsDeprecated } from '@/Components/ComponentView/IsDeprecated'
+import { IsExpired } from '@/Components/ComponentView/IsExpired'
+import { IssueOnLoading } from '@/Components/ComponentView/IssueOnLoading'
+import { AppState } from '@/UIModels/AppState'
+import { openSubscriptionDashboard } from '@/Utils/ManageSubscription'
+
+interface IProps {
+  application: WebApplication
+  appState: AppState
+  componentViewer: ComponentViewer
+  requestReload?: (viewer: ComponentViewer, force?: boolean) => void
+  onLoad?: (component: SNComponent) => void
+  manualDealloc?: boolean
+}
+
+/**
+ * The maximum amount of time we'll wait for a component
+ * to load before displaying error
+ */
+const MaxLoadThreshold = 4000
+const VisibilityChangeKey = 'visibilitychange'
+const MSToWaitAfterIframeLoadToAvoidFlicker = 35
+
+export const ComponentView: FunctionalComponent<IProps> = observer(
+  ({ application, onLoad, componentViewer, requestReload }) => {
+    const iframeRef = useRef<HTMLIFrameElement>(null)
+    const excessiveLoadingTimeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+
+    const [hasIssueLoading, setHasIssueLoading] = useState(false)
+    const [isLoading, setIsLoading] = useState(true)
+    const [featureStatus, setFeatureStatus] = useState<FeatureStatus>(
+      componentViewer.getFeatureStatus(),
+    )
+    const [isComponentValid, setIsComponentValid] = useState(true)
+    const [error, setError] = useState<ComponentViewerError | undefined>(undefined)
+    const [deprecationMessage, setDeprecationMessage] = useState<string | undefined>(undefined)
+    const [isDeprecationMessageDismissed, setIsDeprecationMessageDismissed] = useState(false)
+    const [didAttemptReload, setDidAttemptReload] = useState(false)
+
+    const component = componentViewer.component
+
+    const manageSubscription = useCallback(() => {
+      openSubscriptionDashboard(application)
+    }, [application])
+
+    const reloadValidityStatus = useCallback(() => {
+      setFeatureStatus(componentViewer.getFeatureStatus())
+      if (!componentViewer.lockReadonly) {
+        componentViewer.setReadonly(featureStatus !== FeatureStatus.Entitled)
+      }
+      setIsComponentValid(componentViewer.shouldRender())
+
+      if (isLoading && !isComponentValid) {
+        setIsLoading(false)
+      }
+
+      setError(componentViewer.getError())
+      setDeprecationMessage(component.deprecationMessage)
+    }, [componentViewer, component.deprecationMessage, featureStatus, isComponentValid, isLoading])
+
+    useEffect(() => {
+      reloadValidityStatus()
+    }, [reloadValidityStatus])
+
+    const dismissDeprecationMessage = () => {
+      setIsDeprecationMessageDismissed(true)
+    }
+
+    const onVisibilityChange = useCallback(() => {
+      if (document.visibilityState === 'hidden') {
+        return
+      }
+      if (hasIssueLoading) {
+        requestReload?.(componentViewer)
+      }
+    }, [hasIssueLoading, componentViewer, requestReload])
+
+    const handleIframeTakingTooLongToLoad = useCallback(async () => {
+      setIsLoading(false)
+      setHasIssueLoading(true)
+
+      if (!didAttemptReload) {
+        setDidAttemptReload(true)
+        requestReload?.(componentViewer)
+      } else {
+        document.addEventListener(VisibilityChangeKey, onVisibilityChange)
+      }
+    }, [didAttemptReload, onVisibilityChange, componentViewer, requestReload])
+
+    useMemo(() => {
+      const loadTimeout = setTimeout(() => {
+        handleIframeTakingTooLongToLoad().catch(console.error)
+      }, MaxLoadThreshold)
+
+      excessiveLoadingTimeout.current = loadTimeout
+
+      return () => {
+        excessiveLoadingTimeout.current && clearTimeout(excessiveLoadingTimeout.current)
+      }
+    }, [handleIframeTakingTooLongToLoad])
+
+    const onIframeLoad = useCallback(() => {
+      const iframe = iframeRef.current as HTMLIFrameElement
+      const contentWindow = iframe.contentWindow as Window
+      excessiveLoadingTimeout.current && clearTimeout(excessiveLoadingTimeout.current)
+
+      componentViewer.setWindow(contentWindow).catch(console.error)
+
+      setTimeout(() => {
+        setIsLoading(false)
+        setHasIssueLoading(false)
+        onLoad?.(component)
+      }, MSToWaitAfterIframeLoadToAvoidFlicker)
+    }, [componentViewer, onLoad, component, excessiveLoadingTimeout])
+
+    useEffect(() => {
+      const removeFeaturesChangedObserver = componentViewer.addEventObserver((event) => {
+        if (event === ComponentViewerEvent.FeatureStatusUpdated) {
+          setFeatureStatus(componentViewer.getFeatureStatus())
+        }
+      })
+
+      return () => {
+        removeFeaturesChangedObserver()
+      }
+    }, [componentViewer])
+
+    useEffect(() => {
+      const removeActionObserver = componentViewer.addActionObserver((action, data) => {
+        switch (action) {
+          case ComponentAction.KeyDown:
+            application.io.handleComponentKeyDown(data.keyboardModifier)
+            break
+          case ComponentAction.KeyUp:
+            application.io.handleComponentKeyUp(data.keyboardModifier)
+            break
+          case ComponentAction.Click:
+            application.getAppState().notes.setContextMenuOpen(false)
+            break
+          default:
+            return
+        }
+      })
+      return () => {
+        removeActionObserver()
+      }
+    }, [componentViewer, application])
+
+    useEffect(() => {
+      const unregisterDesktopObserver = application
+        .getDesktopService()
+        .registerUpdateObserver((updatedComponent: SNComponent) => {
+          if (updatedComponent.uuid === component.uuid && updatedComponent.active) {
+            requestReload?.(componentViewer)
+          }
+        })
+
+      return () => {
+        unregisterDesktopObserver()
+      }
+    }, [application, requestReload, componentViewer, component.uuid])
+
+    return (
+      <>
+        {hasIssueLoading && (
+          <IssueOnLoading
+            componentName={component.name}
+            reloadIframe={() => {
+              reloadValidityStatus(), requestReload?.(componentViewer, true)
+            }}
+          />
+        )}
+
+        {featureStatus !== FeatureStatus.Entitled && (
+          <IsExpired
+            expiredDate={dateToLocalizedString(component.valid_until)}
+            featureStatus={featureStatus}
+            componentName={component.name}
+            manageSubscription={manageSubscription}
+          />
+        )}
+        {deprecationMessage && !isDeprecationMessageDismissed && (
+          <IsDeprecated
+            deprecationMessage={deprecationMessage}
+            dismissDeprecationMessage={dismissDeprecationMessage}
+          />
+        )}
+        {error === ComponentViewerError.OfflineRestricted && <OfflineRestricted />}
+        {error === ComponentViewerError.MissingUrl && <UrlMissing componentName={component.name} />}
+        {component.uuid && isComponentValid && (
+          <iframe
+            ref={iframeRef}
+            onLoad={onIframeLoad}
+            data-component-viewer-id={componentViewer.identifier}
+            frameBorder={0}
+            src={componentViewer.url || ''}
+            sandbox="allow-scripts allow-top-navigation-by-user-activation allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-modals allow-forms allow-downloads"
+          >
+            Loading
+          </iframe>
+        )}
+        {isLoading && <div className={'loading-overlay'} />}
+      </>
+    )
+  },
+)
diff --git a/app/assets/javascripts/Components/ConfirmSignoutModal/index.tsx b/app/assets/javascripts/Components/ConfirmSignoutModal/index.tsx
new file mode 100644
index 000000000..132b42574
--- /dev/null
+++ b/app/assets/javascripts/Components/ConfirmSignoutModal/index.tsx
@@ -0,0 +1,98 @@
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
+import { STRING_SIGN_OUT_CONFIRMATION } from '@/Strings'
+import { WebApplication } from '@/UIModels/Application'
+import { AppState } from '@/UIModels/AppState'
+import { observer } from 'mobx-react-lite'
+
+type Props = {
+  application: WebApplication
+  appState: AppState
+}
+
+export const ConfirmSignoutContainer = observer((props: Props) => {
+  if (!props.appState.accountMenu.signingOut) {
+    return null
+  }
+  return <ConfirmSignoutModal {...props} />
+})
+
+export const ConfirmSignoutModal = observer(({ application, appState }: Props) => {
+  const [deleteLocalBackups, setDeleteLocalBackups] = useState(false)
+
+  const cancelRef = useRef<HTMLButtonElement>(null)
+  function closeDialog() {
+    appState.accountMenu.setSigningOut(false)
+  }
+
+  const [localBackupsCount, setLocalBackupsCount] = useState(0)
+
+  useEffect(() => {
+    application.bridge.localBackupsCount().then(setLocalBackupsCount).catch(console.error)
+  }, [appState.accountMenu.signingOut, application.bridge])
+
+  return (
+    <AlertDialog onDismiss={closeDialog} leastDestructiveRef={cancelRef}>
+      <div className="sk-modal-content">
+        <div className="sn-component">
+          <div className="sk-panel">
+            <div className="sk-panel-content">
+              <div className="sk-panel-section">
+                <AlertDialogLabel className="sk-h3 sk-panel-section-title">
+                  Sign out workspace?
+                </AlertDialogLabel>
+                <AlertDialogDescription className="sk-panel-row">
+                  <p className="color-foreground">{STRING_SIGN_OUT_CONFIRMATION}</p>
+                </AlertDialogDescription>
+                {localBackupsCount > 0 && (
+                  <div className="flex">
+                    <div className="sk-panel-row"></div>
+                    <label className="flex items-center">
+                      <input
+                        type="checkbox"
+                        checked={deleteLocalBackups}
+                        onChange={(event) => {
+                          setDeleteLocalBackups((event.target as HTMLInputElement).checked)
+                        }}
+                      />
+                      <span className="ml-2">
+                        Delete {localBackupsCount} local backup file
+                        {localBackupsCount > 1 ? 's' : ''}
+                      </span>
+                    </label>
+                    <button
+                      className="capitalize sk-a ml-1.5 p-0 rounded cursor-pointer"
+                      onClick={() => {
+                        application.bridge.viewlocalBackups()
+                      }}
+                    >
+                      View backup files
+                    </button>
+                  </div>
+                )}
+                <div className="flex my-1 mt-4">
+                  <button className="sn-button small neutral" ref={cancelRef} onClick={closeDialog}>
+                    Cancel
+                  </button>
+                  <button
+                    className="sn-button small danger ml-2"
+                    onClick={() => {
+                      if (deleteLocalBackups) {
+                        application.signOutAndDeleteLocalBackups().catch(console.error)
+                      } else {
+                        application.user.signOut().catch(console.error)
+                      }
+                      closeDialog()
+                    }}
+                  >
+                    {application.hasAccount() ? 'Sign Out' : 'Clear Session Data'}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </AlertDialog>
+  )
+})
diff --git a/app/assets/javascripts/components/Dropdown.tsx b/app/assets/javascripts/Components/Dropdown/index.tsx
similarity index 74%
rename from app/assets/javascripts/components/Dropdown.tsx
rename to app/assets/javascripts/Components/Dropdown/index.tsx
index 837697520..9bc9b6b22 100644
--- a/app/assets/javascripts/components/Dropdown.tsx
+++ b/app/assets/javascripts/Components/Dropdown/index.tsx
@@ -5,32 +5,32 @@ import {
   ListboxList,
   ListboxOption,
   ListboxPopover,
-} from '@reach/listbox';
-import VisuallyHidden from '@reach/visually-hidden';
-import { FunctionComponent } from 'preact';
-import { Icon } from './Icon';
-import { IconType } from '@standardnotes/snjs';
+} from '@reach/listbox'
+import VisuallyHidden from '@reach/visually-hidden'
+import { FunctionComponent } from 'preact'
+import { Icon } from '@/Components/Icon'
+import { IconType } from '@standardnotes/snjs'
 
 export type DropdownItem = {
-  icon?: IconType;
-  iconClassName?: string;
-  label: string;
-  value: string;
-  disabled?: boolean;
-};
+  icon?: IconType
+  iconClassName?: string
+  label: string
+  value: string
+  disabled?: boolean
+}
 
 type DropdownProps = {
-  id: string;
-  label: string;
-  items: DropdownItem[];
-  value: string;
-  onChange: (value: string, item: DropdownItem) => void;
-  disabled?: boolean;
-};
+  id: string
+  label: string
+  items: DropdownItem[]
+  value: string
+  onChange: (value: string, item: DropdownItem) => void
+  disabled?: boolean
+}
 
 type ListboxButtonProps = DropdownItem & {
-  isExpanded: boolean;
-};
+  isExpanded: boolean
+}
 
 const CustomDropdownButton: FunctionComponent<ListboxButtonProps> = ({
   label,
@@ -47,15 +47,11 @@ const CustomDropdownButton: FunctionComponent<ListboxButtonProps> = ({
       ) : null}
       <div className="dropdown-selected-label">{label}</div>
     </div>
-    <ListboxArrow
-      className={`sn-dropdown-arrow ${
-        isExpanded ? 'sn-dropdown-arrow-flipped' : ''
-      }`}
-    >
+    <ListboxArrow className={`sn-dropdown-arrow ${isExpanded ? 'sn-dropdown-arrow-flipped' : ''}`}>
       <Icon type="menu-arrow-down" className="sn-icon--small color-grey-1" />
     </ListboxArrow>
   </>
-);
+)
 
 export const Dropdown: FunctionComponent<DropdownProps> = ({
   id,
@@ -65,15 +61,13 @@ export const Dropdown: FunctionComponent<DropdownProps> = ({
   onChange,
   disabled,
 }) => {
-  const labelId = `${id}-label`;
+  const labelId = `${id}-label`
 
   const handleChange = (value: string) => {
-    const selectedItem = items.find(
-      (item) => item.value === value
-    ) as DropdownItem;
+    const selectedItem = items.find((item) => item.value === value) as DropdownItem
 
-    onChange(value, selectedItem);
-  };
+    onChange(value, selectedItem)
+  }
 
   return (
     <>
@@ -87,16 +81,16 @@ export const Dropdown: FunctionComponent<DropdownProps> = ({
         <ListboxButton
           className="sn-dropdown-button"
           children={({ value, label, isExpanded }) => {
-            const current = items.find((item) => item.value === value);
-            const icon = current ? current?.icon : null;
-            const iconClassName = current ? current?.iconClassName : null;
+            const current = items.find((item) => item.value === value)
+            const icon = current ? current?.icon : null
+            const iconClassName = current ? current?.iconClassName : null
             return CustomDropdownButton({
               value: value ? value : label.toLowerCase(),
               label,
               isExpanded,
               ...(icon ? { icon } : null),
               ...(iconClassName ? { iconClassName } : null),
-            });
+            })
           }}
         />
         <ListboxPopover className="sn-dropdown sn-dropdown-popover">
@@ -125,5 +119,5 @@ export const Dropdown: FunctionComponent<DropdownProps> = ({
         </ListboxPopover>
       </ListboxInput>
     </>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/components/Files/FilePreviewInfoPanel.tsx b/app/assets/javascripts/Components/Files/FilePreviewInfoPanel.tsx
similarity index 70%
rename from app/assets/javascripts/components/Files/FilePreviewInfoPanel.tsx
rename to app/assets/javascripts/Components/Files/FilePreviewInfoPanel.tsx
index cf215c80d..5a12704e9 100644
--- a/app/assets/javascripts/components/Files/FilePreviewInfoPanel.tsx
+++ b/app/assets/javascripts/Components/Files/FilePreviewInfoPanel.tsx
@@ -1,11 +1,11 @@
-import { formatSizeToReadableString } from '@standardnotes/filepicker';
-import { SNFile } from '@standardnotes/snjs';
-import { FunctionComponent } from 'preact';
-import { Icon } from '../Icon';
+import { formatSizeToReadableString } from '@standardnotes/filepicker'
+import { SNFile } from '@standardnotes/snjs'
+import { FunctionComponent } from 'preact'
+import { Icon } from '@/Components/Icon'
 
 type Props = {
-  file: SNFile;
-};
+  file: SNFile
+}
 
 export const FilePreviewInfoPanel: FunctionComponent<Props> = ({ file }) => {
   return (
@@ -18,12 +18,10 @@ export const FilePreviewInfoPanel: FunctionComponent<Props> = ({ file }) => {
         <span className="font-semibold">Type:</span> {file.mimeType}
       </div>
       <div className="mb-3">
-        <span className="font-semibold">Size:</span>{' '}
-        {formatSizeToReadableString(file.size)}
+        <span className="font-semibold">Size:</span> {formatSizeToReadableString(file.size)}
       </div>
       <div className="mb-3">
-        <span className="font-semibold">Created:</span>{' '}
-        {file.created_at.toLocaleString()}
+        <span className="font-semibold">Created:</span> {file.created_at.toLocaleString()}
       </div>
       <div className="mb-3">
         <span className="font-semibold">Last Modified:</span>{' '}
@@ -33,5 +31,5 @@ export const FilePreviewInfoPanel: FunctionComponent<Props> = ({ file }) => {
         <span className="font-semibold">File ID:</span> {file.uuid}
       </div>
     </div>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/components/Files/FilePreviewModal.tsx b/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
similarity index 68%
rename from app/assets/javascripts/components/Files/FilePreviewModal.tsx
rename to app/assets/javascripts/Components/Files/FilePreviewModal.tsx
index 6ea7f46e0..f709fde05 100644
--- a/app/assets/javascripts/components/Files/FilePreviewModal.tsx
+++ b/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
@@ -1,88 +1,81 @@
-import { WebApplication } from '@/ui_models/application';
-import { concatenateUint8Arrays } from '@/utils/concatenateUint8Arrays';
-import { DialogContent, DialogOverlay } from '@reach/dialog';
-import { SNFile } from '@standardnotes/snjs';
-import { NoPreviewIllustration } from '@standardnotes/stylekit';
-import { FunctionComponent } from 'preact';
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
-import { getFileIconComponent } from '../AttachedFilesPopover/PopoverFileItem';
-import { Button } from '../Button';
-import { Icon } from '../Icon';
-import { FilePreviewInfoPanel } from './FilePreviewInfoPanel';
-import { isFileTypePreviewable } from './isFilePreviewable';
+import { WebApplication } from '@/UIModels/Application'
+import { concatenateUint8Arrays } from '@/Utils/ConcatenateUint8Arrays'
+import { DialogContent, DialogOverlay } from '@reach/dialog'
+import { SNFile } from '@standardnotes/snjs'
+import { NoPreviewIllustration } from '@standardnotes/stylekit'
+import { FunctionComponent } from 'preact'
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
+import { getFileIconComponent } from '@/Components/AttachedFilesPopover/PopoverFileItem'
+import { Button } from '@/Components/Button/Button'
+import { Icon } from '@/Components/Icon'
+import { FilePreviewInfoPanel } from './FilePreviewInfoPanel'
+import { isFileTypePreviewable } from './isFilePreviewable'
 
 type Props = {
-  application: WebApplication;
-  file: SNFile;
-  onDismiss: () => void;
-};
+  application: WebApplication
+  file: SNFile
+  onDismiss: () => void
+}
 
 const getPreviewComponentForFile = (file: SNFile, objectUrl: string) => {
   if (file.mimeType.startsWith('image/')) {
-    return <img src={objectUrl} />;
+    return <img src={objectUrl} />
   }
 
   if (file.mimeType.startsWith('video/')) {
-    return <video className="w-full h-full" src={objectUrl} controls />;
+    return <video className="w-full h-full" src={objectUrl} controls />
   }
 
   if (file.mimeType.startsWith('audio/')) {
-    return <audio src={objectUrl} controls />;
+    return <audio src={objectUrl} controls />
   }
 
-  return <object className="w-full h-full" data={objectUrl} />;
-};
+  return <object className="w-full h-full" data={objectUrl} />
+}
 
-export const FilePreviewModal: FunctionComponent<Props> = ({
-  application,
-  file,
-  onDismiss,
-}) => {
-  const [objectUrl, setObjectUrl] = useState<string>();
-  const [isFilePreviewable, setIsFilePreviewable] = useState(false);
-  const [isLoadingFile, setIsLoadingFile] = useState(false);
-  const [showFileInfoPanel, setShowFileInfoPanel] = useState(false);
-  const closeButtonRef = useRef<HTMLButtonElement>(null);
+export const FilePreviewModal: FunctionComponent<Props> = ({ application, file, onDismiss }) => {
+  const [objectUrl, setObjectUrl] = useState<string>()
+  const [isFilePreviewable, setIsFilePreviewable] = useState(false)
+  const [isLoadingFile, setIsLoadingFile] = useState(false)
+  const [showFileInfoPanel, setShowFileInfoPanel] = useState(false)
+  const closeButtonRef = useRef<HTMLButtonElement>(null)
 
   const getObjectUrl = useCallback(async () => {
-    setIsLoadingFile(true);
+    setIsLoadingFile(true)
     try {
-      const chunks: Uint8Array[] = [];
-      await application.files.downloadFile(
-        file,
-        async (decryptedChunk: Uint8Array) => {
-          chunks.push(decryptedChunk);
-        }
-      );
-      const finalDecryptedBytes = concatenateUint8Arrays(chunks);
+      const chunks: Uint8Array[] = []
+      await application.files.downloadFile(file, async (decryptedChunk: Uint8Array) => {
+        chunks.push(decryptedChunk)
+      })
+      const finalDecryptedBytes = concatenateUint8Arrays(chunks)
       setObjectUrl(
         URL.createObjectURL(
           new Blob([finalDecryptedBytes], {
             type: file.mimeType,
-          })
-        )
-      );
+          }),
+        ),
+      )
     } catch (error) {
-      console.error(error);
+      console.error(error)
     } finally {
-      setIsLoadingFile(false);
+      setIsLoadingFile(false)
     }
-  }, [application.files, file]);
+  }, [application.files, file])
 
   useEffect(() => {
-    const isPreviewable = isFileTypePreviewable(file.mimeType);
-    setIsFilePreviewable(isPreviewable);
+    const isPreviewable = isFileTypePreviewable(file.mimeType)
+    setIsFilePreviewable(isPreviewable)
 
     if (!objectUrl && isPreviewable) {
-      getObjectUrl();
+      getObjectUrl().catch(console.error)
     }
 
     return () => {
       if (objectUrl) {
-        URL.revokeObjectURL(objectUrl);
+        URL.revokeObjectURL(objectUrl)
       }
-    };
-  }, [file.mimeType, getObjectUrl, objectUrl]);
+    }
+  }, [file.mimeType, getObjectUrl, objectUrl])
 
   return (
     <DialogOverlay
@@ -105,7 +98,7 @@ export const FilePreviewModal: FunctionComponent<Props> = ({
             <div className="w-6 h-6">
               {getFileIconComponent(
                 application.iconsController.getIconForFileType(file.mimeType),
-                'w-6 h-6 flex-shrink-0'
+                'w-6 h-6 flex-shrink-0',
               )}
             </div>
             <span className="ml-3 font-medium">{file.name}</span>
@@ -122,9 +115,7 @@ export const FilePreviewModal: FunctionComponent<Props> = ({
                 variant="primary"
                 className="mr-4"
                 onClick={() => {
-                  application
-                    .getArchiveService()
-                    .downloadData(objectUrl, file.name);
+                  application.getArchiveService().downloadData(objectUrl, file.name)
                 }}
               >
                 Download
@@ -149,21 +140,19 @@ export const FilePreviewModal: FunctionComponent<Props> = ({
             ) : (
               <div className="flex flex-col items-center">
                 <NoPreviewIllustration className="w-30 h-30 mb-4" />
-                <div className="font-bold text-base mb-2">
-                  This file can't be previewed.
-                </div>
+                <div className="font-bold text-base mb-2">This file can't be previewed.</div>
                 {isFilePreviewable ? (
                   <>
                     <div className="text-sm text-center color-grey-0 mb-4 max-w-35ch">
-                      There was an error loading the file. Try again, or
-                      download the file and open it using another application.
+                      There was an error loading the file. Try again, or download the file and open
+                      it using another application.
                     </div>
                     <div className="flex items-center">
                       <Button
                         variant="primary"
                         className="mr-3"
                         onClick={() => {
-                          getObjectUrl();
+                          getObjectUrl().catch(console.error)
                         }}
                       >
                         Try again
@@ -171,7 +160,7 @@ export const FilePreviewModal: FunctionComponent<Props> = ({
                       <Button
                         variant="normal"
                         onClick={() => {
-                          application.getAppState().files.downloadFile(file);
+                          application.getAppState().files.downloadFile(file).catch(console.error)
                         }}
                       >
                         Download
@@ -181,13 +170,12 @@ export const FilePreviewModal: FunctionComponent<Props> = ({
                 ) : (
                   <>
                     <div className="text-sm text-center color-grey-0 mb-4 max-w-35ch">
-                      To view this file, download it and open it using another
-                      application.
+                      To view this file, download it and open it using another application.
                     </div>
                     <Button
                       variant="primary"
                       onClick={() => {
-                        application.getAppState().files.downloadFile(file);
+                        application.getAppState().files.downloadFile(file).catch(console.error)
                       }}
                     >
                       Download
@@ -201,5 +189,5 @@ export const FilePreviewModal: FunctionComponent<Props> = ({
         </div>
       </DialogContent>
     </DialogOverlay>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/Components/Files/FilePreviewModalProvider.tsx b/app/assets/javascripts/Components/Files/FilePreviewModalProvider.tsx
new file mode 100644
index 000000000..38d588b99
--- /dev/null
+++ b/app/assets/javascripts/Components/Files/FilePreviewModalProvider.tsx
@@ -0,0 +1,48 @@
+import { WebApplication } from '@/UIModels/Application'
+import { SNFile } from '@standardnotes/snjs'
+import { createContext, FunctionComponent } from 'preact'
+import { useContext, useState } from 'preact/hooks'
+import { FilePreviewModal } from './FilePreviewModal'
+
+type FilePreviewModalContextData = {
+  activate: (file: SNFile) => void
+}
+
+const FilePreviewModalContext = createContext<FilePreviewModalContextData | null>(null)
+
+export const useFilePreviewModal = (): FilePreviewModalContextData => {
+  const value = useContext(FilePreviewModalContext)
+
+  if (!value) {
+    throw new Error('FilePreviewModalProvider not found.')
+  }
+
+  return value
+}
+
+export const FilePreviewModalProvider: FunctionComponent<{
+  application: WebApplication
+}> = ({ application, children }) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [file, setFile] = useState<SNFile>()
+
+  const activate = (file: SNFile) => {
+    setFile(file)
+    setIsOpen(true)
+  }
+
+  const close = () => {
+    setIsOpen(false)
+  }
+
+  return (
+    <>
+      {isOpen && file && (
+        <FilePreviewModal application={application} file={file} onDismiss={close} />
+      )}
+      <FilePreviewModalContext.Provider value={{ activate }}>
+        {children}
+      </FilePreviewModalContext.Provider>
+    </>
+  )
+}
diff --git a/app/assets/javascripts/Components/Files/isFilePreviewable.ts b/app/assets/javascripts/Components/Files/isFilePreviewable.ts
new file mode 100644
index 000000000..23e46379f
--- /dev/null
+++ b/app/assets/javascripts/Components/Files/isFilePreviewable.ts
@@ -0,0 +1,12 @@
+export const isFileTypePreviewable = (fileType: string) => {
+  const isImage = fileType.startsWith('image/')
+  const isVideo = fileType.startsWith('video/')
+  const isAudio = fileType.startsWith('audio/')
+  const isPdf = fileType === 'application/pdf'
+
+  if (isImage || isVideo || isAudio || isPdf) {
+    return true
+  }
+
+  return false
+}
diff --git a/app/assets/javascripts/components/Footer.tsx b/app/assets/javascripts/Components/Footer/index.tsx
similarity index 57%
rename from app/assets/javascripts/components/Footer.tsx
rename to app/assets/javascripts/Components/Footer/index.tsx
index fa7667602..7fc98f308 100644
--- a/app/assets/javascripts/components/Footer.tsx
+++ b/app/assets/javascripts/Components/Footer/index.tsx
@@ -1,58 +1,57 @@
-import { WebAppEvent, WebApplication } from '@/ui_models/application';
-import { ApplicationGroup } from '@/ui_models/application_group';
-import { PureComponent } from './Abstract/PureComponent';
-import { preventRefreshing } from '@/utils';
+import { WebAppEvent, WebApplication } from '@/UIModels/Application'
+import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
+import { PureComponent } from '@/Components/Abstract/PureComponent'
+import { preventRefreshing } from '@/Utils'
 import {
   ApplicationEvent,
   ContentType,
   CollectionSort,
   ApplicationDescriptor,
-  ItemInterface,
-} from '@standardnotes/snjs';
+} from '@standardnotes/snjs'
 import {
   STRING_NEW_UPDATE_READY,
   STRING_CONFIRM_APP_QUIT_DURING_UPGRADE,
   STRING_UPGRADE_ACCOUNT_CONFIRM_TEXT,
   STRING_UPGRADE_ACCOUNT_CONFIRM_TITLE,
   STRING_UPGRADE_ACCOUNT_CONFIRM_BUTTON,
-} from '@/strings';
-import { alertDialog, confirmDialog } from '@/services/alertService';
-import { AccountMenu, AccountMenuPane } from '@/components/AccountMenu';
-import { AppStateEvent, EventSource } from '@/ui_models/app_state';
-import { Icon } from './Icon';
-import { QuickSettingsMenu } from './QuickSettingsMenu/QuickSettingsMenu';
-import { SyncResolutionMenu } from './SyncResolutionMenu';
-import { Fragment } from 'preact';
+} from '@/Strings'
+import { alertDialog, confirmDialog } from '@/Services/AlertService'
+import { AccountMenu, AccountMenuPane } from '@/Components/AccountMenu'
+import { AppStateEvent, EventSource } from '@/UIModels/AppState'
+import { Icon } from '@/Components/Icon'
+import { QuickSettingsMenu } from '@/Components/QuickSettingsMenu'
+import { SyncResolutionMenu } from '@/Components/SyncResolutionMenu'
+import { Fragment } from 'preact'
 
 type Props = {
-  application: WebApplication;
-  applicationGroup: ApplicationGroup;
-};
+  application: WebApplication
+  applicationGroup: ApplicationGroup
+}
 
 type State = {
-  outOfSync: boolean;
-  dataUpgradeAvailable: boolean;
-  hasPasscode: boolean;
-  descriptors: ApplicationDescriptor[];
-  showBetaWarning: boolean;
-  showSyncResolution: boolean;
-  newUpdateAvailable: boolean;
-  showAccountMenu: boolean;
-  showQuickSettingsMenu: boolean;
-  offline: boolean;
-  hasError: boolean;
-  arbitraryStatusMessage?: string;
-};
+  outOfSync: boolean
+  dataUpgradeAvailable: boolean
+  hasPasscode: boolean
+  descriptors: ApplicationDescriptor[]
+  showBetaWarning: boolean
+  showSyncResolution: boolean
+  newUpdateAvailable: boolean
+  showAccountMenu: boolean
+  showQuickSettingsMenu: boolean
+  offline: boolean
+  hasError: boolean
+  arbitraryStatusMessage?: string
+}
 
 export class Footer extends PureComponent<Props, State> {
-  public user?: unknown;
-  private didCheckForOffline = false;
-  private completedInitialSync = false;
-  private showingDownloadStatus = false;
-  private webEventListenerDestroyer: () => void;
+  public user?: unknown
+  private didCheckForOffline = false
+  private completedInitialSync = false
+  private showingDownloadStatus = false
+  private webEventListenerDestroyer: () => void
 
   constructor(props: Props) {
-    super(props, props.application);
+    super(props, props.application)
     this.state = {
       hasError: false,
       offline: true,
@@ -65,231 +64,215 @@ export class Footer extends PureComponent<Props, State> {
       newUpdateAvailable: false,
       showAccountMenu: false,
       showQuickSettingsMenu: false,
-    };
+    }
 
-    this.webEventListenerDestroyer = props.application.addWebEventObserver(
-      (event) => {
-        if (event === WebAppEvent.NewUpdateAvailable) {
-          this.onNewUpdateAvailable();
-        }
+    this.webEventListenerDestroyer = props.application.addWebEventObserver((event) => {
+      if (event === WebAppEvent.NewUpdateAvailable) {
+        this.onNewUpdateAvailable()
       }
-    );
+    })
   }
 
-  deinit() {
-    this.webEventListenerDestroyer();
-    (this.webEventListenerDestroyer as unknown) = undefined;
-    super.deinit();
+  override deinit() {
+    this.webEventListenerDestroyer()
+    ;(this.webEventListenerDestroyer as unknown) = undefined
+    super.deinit()
   }
 
-  componentDidMount(): void {
-    super.componentDidMount();
+  override componentDidMount(): void {
+    super.componentDidMount()
     this.application.getStatusManager().onStatusChange((message) => {
       this.setState({
         arbitraryStatusMessage: message,
-      });
-    });
+      })
+    })
     this.autorun(() => {
-      const showBetaWarning = this.appState.showBetaWarning;
+      const showBetaWarning = this.appState.showBetaWarning
       this.setState({
         showBetaWarning: showBetaWarning,
         showAccountMenu: this.appState.accountMenu.show,
         showQuickSettingsMenu: this.appState.quickSettingsMenu.open,
-      });
-    });
+      })
+    })
   }
 
   reloadUpgradeStatus() {
-    this.application.checkForSecurityUpdate().then((available) => {
-      this.setState({
-        dataUpgradeAvailable: available,
-      });
-    });
+    this.application
+      .checkForSecurityUpdate()
+      .then((available) => {
+        this.setState({
+          dataUpgradeAvailable: available,
+        })
+      })
+      .catch(console.error)
   }
 
-  async onAppLaunch() {
-    super.onAppLaunch();
-    this.reloadPasscodeStatus();
-    this.reloadUser();
-    this.reloadUpgradeStatus();
-    this.updateOfflineStatus();
-    this.findErrors();
-    this.streamItems();
+  override async onAppLaunch() {
+    super.onAppLaunch().catch(console.error)
+    this.reloadPasscodeStatus().catch(console.error)
+    this.reloadUser()
+    this.reloadUpgradeStatus()
+    this.updateOfflineStatus()
+    this.findErrors()
+    this.streamItems()
   }
 
   reloadUser() {
-    this.user = this.application.getUser();
+    this.user = this.application.getUser()
   }
 
   async reloadPasscodeStatus() {
-    const hasPasscode = this.application.hasPasscode();
+    const hasPasscode = this.application.hasPasscode()
     this.setState({
       hasPasscode: hasPasscode,
-    });
+    })
   }
 
-  /** @override */
-  onAppStateEvent(eventName: AppStateEvent, data: any) {
-    const statusService = this.application.getStatusManager();
+  override onAppStateEvent(eventName: AppStateEvent, data: any) {
+    const statusService = this.application.getStatusManager()
     switch (eventName) {
       case AppStateEvent.EditorFocused:
         if (data.eventSource === EventSource.UserInteraction) {
-          this.closeAccountMenu();
+          this.closeAccountMenu()
         }
-        break;
+        break
       case AppStateEvent.BeganBackupDownload:
-        statusService.setMessage('Saving local backup…');
-        break;
+        statusService.setMessage('Saving local backup…')
+        break
       case AppStateEvent.EndedBackupDownload: {
-        const successMessage = 'Successfully saved backup.';
-        const errorMessage = 'Unable to save local backup.';
-        statusService.setMessage(data.success ? successMessage : errorMessage);
+        const successMessage = 'Successfully saved backup.'
+        const errorMessage = 'Unable to save local backup.'
+        statusService.setMessage(data.success ? successMessage : errorMessage)
 
-        const twoSeconds = 2000;
+        const twoSeconds = 2000
         setTimeout(() => {
-          if (
-            statusService.message === successMessage ||
-            statusService.message === errorMessage
-          ) {
-            statusService.setMessage('');
+          if (statusService.message === successMessage || statusService.message === errorMessage) {
+            statusService.setMessage('')
           }
-        }, twoSeconds);
-        break;
+        }, twoSeconds)
+        break
       }
     }
   }
 
-  /** @override */
-  async onAppKeyChange() {
-    super.onAppKeyChange();
-    this.reloadPasscodeStatus();
+  override async onAppKeyChange() {
+    super.onAppKeyChange().catch(console.error)
+    this.reloadPasscodeStatus().catch(console.error)
   }
 
-  /** @override */
-  onAppEvent(eventName: ApplicationEvent) {
+  override onAppEvent(eventName: ApplicationEvent) {
     switch (eventName) {
       case ApplicationEvent.KeyStatusChanged:
-        this.reloadUpgradeStatus();
-        break;
+        this.reloadUpgradeStatus()
+        break
       case ApplicationEvent.EnteredOutOfSync:
         this.setState({
           outOfSync: true,
-        });
-        break;
+        })
+        break
       case ApplicationEvent.ExitedOutOfSync:
         this.setState({
           outOfSync: false,
-        });
-        break;
+        })
+        break
       case ApplicationEvent.CompletedFullSync:
         if (!this.completedInitialSync) {
-          this.application.getStatusManager().setMessage('');
-          this.completedInitialSync = true;
+          this.application.getStatusManager().setMessage('')
+          this.completedInitialSync = true
         }
         if (!this.didCheckForOffline) {
-          this.didCheckForOffline = true;
-          if (
-            this.state.offline &&
-            this.application.items.getNoteCount() === 0
-          ) {
-            this.appState.accountMenu.setShow(true);
+          this.didCheckForOffline = true
+          if (this.state.offline && this.application.items.getNoteCount() === 0) {
+            this.appState.accountMenu.setShow(true)
           }
         }
-        this.findErrors();
-        this.updateOfflineStatus();
-        break;
+        this.findErrors()
+        this.updateOfflineStatus()
+        break
       case ApplicationEvent.SyncStatusChanged:
-        this.updateSyncStatus();
-        break;
+        this.updateSyncStatus()
+        break
       case ApplicationEvent.FailedSync:
-        this.updateSyncStatus();
-        this.findErrors();
-        this.updateOfflineStatus();
-        break;
+        this.updateSyncStatus()
+        this.findErrors()
+        this.updateOfflineStatus()
+        break
       case ApplicationEvent.LocalDataIncrementalLoad:
       case ApplicationEvent.LocalDataLoaded:
-        this.updateLocalDataStatus();
-        break;
+        this.updateLocalDataStatus()
+        break
       case ApplicationEvent.SignedIn:
       case ApplicationEvent.SignedOut:
-        this.reloadUser();
-        break;
+        this.reloadUser()
+        break
       case ApplicationEvent.WillSync:
         if (!this.completedInitialSync) {
-          this.application.getStatusManager().setMessage('Syncing…');
+          this.application.getStatusManager().setMessage('Syncing…')
         }
-        break;
+        break
     }
   }
 
   streamItems() {
-    this.application.items.setDisplayOptions(
-      ContentType.Theme,
-      CollectionSort.Title,
-      'asc'
-    );
+    this.application.items.setDisplayOptions(ContentType.Theme, CollectionSort.Title, 'asc')
   }
 
   updateSyncStatus() {
-    const statusManager = this.application.getStatusManager();
-    const syncStatus = this.application.sync.getSyncStatus();
-    const stats = syncStatus.getStats();
+    const statusManager = this.application.getStatusManager()
+    const syncStatus = this.application.sync.getSyncStatus()
+    const stats = syncStatus.getStats()
     if (syncStatus.hasError()) {
-      statusManager.setMessage('Unable to Sync');
+      statusManager.setMessage('Unable to Sync')
     } else if (stats.downloadCount > 20) {
-      const text = `Downloading ${stats.downloadCount} items. Keep app open.`;
-      statusManager.setMessage(text);
-      this.showingDownloadStatus = true;
+      const text = `Downloading ${stats.downloadCount} items. Keep app open.`
+      statusManager.setMessage(text)
+      this.showingDownloadStatus = true
     } else if (this.showingDownloadStatus) {
-      this.showingDownloadStatus = false;
-      statusManager.setMessage('Download Complete.');
+      this.showingDownloadStatus = false
+      statusManager.setMessage('Download Complete.')
       setTimeout(() => {
-        statusManager.setMessage('');
-      }, 2000);
+        statusManager.setMessage('')
+      }, 2000)
     } else if (stats.uploadTotalCount > 20) {
       const completionPercentage =
-        stats.uploadCompletionCount === 0
-          ? 0
-          : stats.uploadCompletionCount / stats.uploadTotalCount;
+        stats.uploadCompletionCount === 0 ? 0 : stats.uploadCompletionCount / stats.uploadTotalCount
 
       const stringPercentage = completionPercentage.toLocaleString(undefined, {
         style: 'percent',
-      });
+      })
 
       statusManager.setMessage(
-        `Syncing ${stats.uploadTotalCount} items (${stringPercentage} complete)`
-      );
+        `Syncing ${stats.uploadTotalCount} items (${stringPercentage} complete)`,
+      )
     } else {
-      statusManager.setMessage('');
+      statusManager.setMessage('')
     }
   }
 
   updateLocalDataStatus() {
-    const statusManager = this.application.getStatusManager();
-    const syncStatus = this.application.sync.getSyncStatus();
-    const stats = syncStatus.getStats();
-    const encryption = this.application.isEncryptionAvailable();
+    const statusManager = this.application.getStatusManager()
+    const syncStatus = this.application.sync.getSyncStatus()
+    const stats = syncStatus.getStats()
+    const encryption = this.application.isEncryptionAvailable()
     if (stats.localDataDone) {
-      statusManager.setMessage('');
-      return;
+      statusManager.setMessage('')
+      return
     }
-    const notesString = `${stats.localDataCurrent}/${stats.localDataTotal} items...`;
-    const loadingStatus = encryption
-      ? `Decrypting ${notesString}`
-      : `Loading ${notesString}`;
-    statusManager.setMessage(loadingStatus);
+    const notesString = `${stats.localDataCurrent}/${stats.localDataTotal} items...`
+    const loadingStatus = encryption ? `Decrypting ${notesString}` : `Loading ${notesString}`
+    statusManager.setMessage(loadingStatus)
   }
 
   updateOfflineStatus() {
     this.setState({
       offline: this.application.noAccount(),
-    });
+    })
   }
 
   findErrors() {
     this.setState({
       hasError: this.application.sync.getSyncStatus().hasError(),
-    });
+    })
   }
 
   securityUpdateClickHandler = async () => {
@@ -301,48 +284,48 @@ export class Footer extends PureComponent<Props, State> {
       })
     ) {
       preventRefreshing(STRING_CONFIRM_APP_QUIT_DURING_UPGRADE, async () => {
-        await this.application.upgradeProtocolVersion();
-      });
+        await this.application.upgradeProtocolVersion()
+      }).catch(console.error)
     }
-  };
+  }
 
   accountMenuClickHandler = () => {
-    this.appState.quickSettingsMenu.closeQuickSettingsMenu();
-    this.appState.accountMenu.toggleShow();
-  };
+    this.appState.quickSettingsMenu.closeQuickSettingsMenu()
+    this.appState.accountMenu.toggleShow()
+  }
 
   quickSettingsClickHandler = () => {
-    this.appState.accountMenu.closeAccountMenu();
-    this.appState.quickSettingsMenu.toggle();
-  };
+    this.appState.accountMenu.closeAccountMenu()
+    this.appState.quickSettingsMenu.toggle()
+  }
 
   syncResolutionClickHandler = () => {
     this.setState({
       showSyncResolution: !this.state.showSyncResolution,
-    });
-  };
+    })
+  }
 
   closeAccountMenu = () => {
-    this.appState.accountMenu.setShow(false);
-    this.appState.accountMenu.setCurrentPane(AccountMenuPane.GeneralMenu);
-  };
+    this.appState.accountMenu.setShow(false)
+    this.appState.accountMenu.setCurrentPane(AccountMenuPane.GeneralMenu)
+  }
 
   lockClickHandler = () => {
-    this.application.lock();
-  };
+    this.application.lock().catch(console.error)
+  }
 
   onNewUpdateAvailable = () => {
     this.setState({
       newUpdateAvailable: true,
-    });
-  };
+    })
+  }
 
   newUpdateClickHandler = () => {
     this.setState({
       newUpdateAvailable: false,
-    });
-    this.application.alertService.alert(STRING_NEW_UPDATE_READY);
-  };
+    })
+    this.application.alertService.alert(STRING_NEW_UPDATE_READY).catch(console.error)
+  }
 
   betaMessageClickHandler = () => {
     alertDialog({
@@ -350,18 +333,18 @@ export class Footer extends PureComponent<Props, State> {
       text:
         'If you wish to go back to a stable version, make sure to sign out ' +
         'of this beta app first.',
-    });
-  };
+    }).catch(console.error)
+  }
 
   clickOutsideAccountMenu = () => {
-    this.appState.accountMenu.closeAccountMenu();
-  };
+    this.appState.accountMenu.closeAccountMenu()
+  }
 
   clickOutsideQuickSettingsMenu = () => {
-    this.appState.quickSettingsMenu.closeQuickSettingsMenu();
-  };
+    this.appState.quickSettingsMenu.closeQuickSettingsMenu()
+  }
 
-  render() {
+  override render() {
     return (
       <div className="sn-component">
         <div id="footer-bar" className="sk-app-bar no-edges no-bottom-edge">
@@ -376,15 +359,10 @@ export class Footer extends PureComponent<Props, State> {
               >
                 <div
                   className={
-                    this.state.hasError
-                      ? 'danger'
-                      : (this.user ? 'info' : 'neutral') + ' w-5 h-5'
+                    this.state.hasError ? 'danger' : (this.user ? 'info' : 'neutral') + ' w-5 h-5'
                   }
                 >
-                  <Icon
-                    type="account-circle"
-                    className="hover:color-info w-5 h-5 max-h-5"
-                  />
+                  <Icon type="account-circle" className="hover:color-info w-5 h-5 max-h-5" />
                 </div>
               </div>
               {this.state.showAccountMenu && (
@@ -437,39 +415,26 @@ export class Footer extends PureComponent<Props, State> {
             {this.state.arbitraryStatusMessage && (
               <div className="sk-app-bar-item">
                 <div className="sk-app-bar-item-column">
-                  <span className="neutral sk-label">
-                    {this.state.arbitraryStatusMessage}
-                  </span>
+                  <span className="neutral sk-label">{this.state.arbitraryStatusMessage}</span>
                 </div>
               </div>
             )}
           </div>
           <div className="right">
             {this.state.dataUpgradeAvailable && (
-              <div
-                onClick={this.securityUpdateClickHandler}
-                className="sk-app-bar-item"
-              >
-                <span className="success sk-label">
-                  Encryption upgrade available.
-                </span>
+              <div onClick={this.securityUpdateClickHandler} className="sk-app-bar-item">
+                <span className="success sk-label">Encryption upgrade available.</span>
               </div>
             )}
             {this.state.newUpdateAvailable && (
-              <div
-                onClick={this.newUpdateClickHandler}
-                className="sk-app-bar-item"
-              >
+              <div onClick={this.newUpdateClickHandler} className="sk-app-bar-item">
                 <span className="info sk-label">New update available.</span>
               </div>
             )}
             {(this.state.outOfSync || this.state.showSyncResolution) && (
               <div className="sk-app-bar-item">
                 {this.state.outOfSync && (
-                  <div
-                    onClick={this.syncResolutionClickHandler}
-                    className="sk-label warning"
-                  >
+                  <div onClick={this.syncResolutionClickHandler} className="sk-label warning">
                     Potentially Out of Sync
                   </div>
                 )}
@@ -504,6 +469,6 @@ export class Footer extends PureComponent<Props, State> {
           </div>
         </div>
       </div>
-    );
+    )
   }
 }
diff --git a/app/assets/javascripts/components/Icon.tsx b/app/assets/javascripts/Components/Icon/index.tsx
similarity index 91%
rename from app/assets/javascripts/components/Icon.tsx
rename to app/assets/javascripts/Components/Icon/index.tsx
index e8adb1ff4..2c6efcd3c 100644
--- a/app/assets/javascripts/components/Icon.tsx
+++ b/app/assets/javascripts/Components/Icon/index.tsx
@@ -1,5 +1,5 @@
-import { FunctionalComponent } from 'preact';
-import { IconType } from '@standardnotes/snjs';
+import { FunctionalComponent } from 'preact'
+import { IconType } from '@standardnotes/snjs'
 
 import {
   AccessibilityIcon,
@@ -88,7 +88,7 @@ import {
   UserSwitch,
   WarningIcon,
   WindowIcon,
-} from '@standardnotes/stylekit';
+} from '@standardnotes/stylekit'
 
 export const ICONS = {
   'account-circle': AccountCircleIcon,
@@ -177,22 +177,18 @@ export const ICONS = {
   user: UserIcon,
   warning: WarningIcon,
   window: WindowIcon,
-};
+}
 
 type Props = {
-  type: IconType;
-  className?: string;
-  ariaLabel?: string;
-};
+  type: IconType
+  className?: string
+  ariaLabel?: string
+}
 
-export const Icon: FunctionalComponent<Props> = ({
-  type,
-  className = '',
-  ariaLabel,
-}) => {
-  const IconComponent = ICONS[type as keyof typeof ICONS];
+export const Icon: FunctionalComponent<Props> = ({ type, className = '', ariaLabel }) => {
+  const IconComponent = ICONS[type as keyof typeof ICONS]
   if (!IconComponent) {
-    return null;
+    return null
   }
   return (
     <IconComponent
@@ -200,5 +196,5 @@ export const Icon: FunctionalComponent<Props> = ({
       role="img"
       {...(ariaLabel ? { 'aria-label': ariaLabel } : {})}
     />
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/Components/Input/DecoratedInput.tsx b/app/assets/javascripts/Components/Input/DecoratedInput.tsx
new file mode 100644
index 000000000..35f469ad2
--- /dev/null
+++ b/app/assets/javascripts/Components/Input/DecoratedInput.tsx
@@ -0,0 +1,75 @@
+import { FunctionalComponent, Ref } from 'preact'
+import { forwardRef } from 'preact/compat'
+import { DecoratedInputProps } from './DecoratedInputProps'
+
+const getClassNames = (hasLeftDecorations: boolean, hasRightDecorations: boolean) => {
+  return {
+    container: `flex items-stretch position-relative bg-default border-1 border-solid border-main rounded focus-within:ring-info overflow-hidden ${
+      !hasLeftDecorations && !hasRightDecorations ? 'px-2 py-1.5' : ''
+    }`,
+    input: `w-full border-0 focus:shadow-none bg-transparent color-text ${
+      !hasLeftDecorations && hasRightDecorations ? 'pl-2' : ''
+    } ${hasRightDecorations ? 'pr-2' : ''}`,
+    disabled: 'bg-grey-5 cursor-not-allowed',
+  }
+}
+
+/**
+ * Input that can be decorated on the left and right side
+ */
+export const DecoratedInput: FunctionalComponent<DecoratedInputProps> = forwardRef(
+  (
+    {
+      type = 'text',
+      className = '',
+      disabled = false,
+      left,
+      right,
+      value,
+      placeholder = '',
+      onChange,
+      onFocus,
+      onKeyDown,
+      autocomplete = false,
+    }: DecoratedInputProps,
+    ref: Ref<HTMLInputElement>,
+  ) => {
+    const hasLeftDecorations = Boolean(left?.length)
+    const hasRightDecorations = Boolean(right?.length)
+    const classNames = getClassNames(hasLeftDecorations, hasRightDecorations)
+
+    return (
+      <div
+        className={`${classNames.container} ${disabled ? classNames.disabled : ''} ${className}`}
+      >
+        {left && (
+          <div className="flex items-center px-2 py-1.5">
+            {left.map((leftChild) => (
+              <>{leftChild}</>
+            ))}
+          </div>
+        )}
+        <input
+          type={type}
+          className={`${classNames.input} ${disabled ? classNames.disabled : ''}`}
+          disabled={disabled}
+          value={value}
+          placeholder={placeholder}
+          onChange={(e) => onChange && onChange((e.target as HTMLInputElement).value)}
+          onFocus={onFocus}
+          onKeyDown={onKeyDown}
+          data-lpignore={type !== 'password' ? true : false}
+          autocomplete={autocomplete ? 'on' : 'off'}
+          ref={ref}
+        />
+        {right && (
+          <div className="flex items-center px-2 py-1.5">
+            {right.map((rightChild, index) => (
+              <div className={index > 0 ? 'ml-3' : ''}>{rightChild}</div>
+            ))}
+          </div>
+        )}
+      </div>
+    )
+  },
+)
diff --git a/app/assets/javascripts/Components/Input/DecoratedInputProps.ts b/app/assets/javascripts/Components/Input/DecoratedInputProps.ts
new file mode 100644
index 000000000..6499f000e
--- /dev/null
+++ b/app/assets/javascripts/Components/Input/DecoratedInputProps.ts
@@ -0,0 +1,15 @@
+import { ComponentChild } from 'preact'
+
+export type DecoratedInputProps = {
+  type?: 'text' | 'email' | 'password'
+  className?: string
+  disabled?: boolean
+  left?: ComponentChild[]
+  right?: ComponentChild[]
+  value?: string
+  placeholder?: string
+  onChange?: (text: string) => void
+  onFocus?: (event: FocusEvent) => void
+  onKeyDown?: (event: KeyboardEvent) => void
+  autocomplete?: boolean
+}
diff --git a/app/assets/javascripts/Components/Input/DecoratedPasswordInput.tsx b/app/assets/javascripts/Components/Input/DecoratedPasswordInput.tsx
new file mode 100644
index 000000000..0eb315b87
--- /dev/null
+++ b/app/assets/javascripts/Components/Input/DecoratedPasswordInput.tsx
@@ -0,0 +1,42 @@
+import { FunctionComponent, Ref } from 'preact'
+import { forwardRef } from 'preact/compat'
+import { StateUpdater, useState } from 'preact/hooks'
+import { DecoratedInput } from './DecoratedInput'
+import { IconButton } from '@/Components/Button/IconButton'
+import { DecoratedInputProps } from './DecoratedInputProps'
+
+const Toggle: FunctionComponent<{
+  isToggled: boolean
+  setIsToggled: StateUpdater<boolean>
+}> = ({ isToggled, setIsToggled }) => (
+  <IconButton
+    className="w-5 h-5 justify-center sk-circle hover:bg-grey-4 color-neutral"
+    icon={isToggled ? 'eye-off' : 'eye'}
+    iconClassName="sn-icon--small"
+    title="Show/hide password"
+    onClick={() => setIsToggled((isToggled) => !isToggled)}
+    focusable={true}
+  />
+)
+
+/**
+ * Password input that has a toggle to show/hide password and can be decorated on the left and right side
+ */
+export const DecoratedPasswordInput: FunctionComponent<Omit<DecoratedInputProps, 'type'>> =
+  forwardRef((props, ref: Ref<HTMLInputElement>) => {
+    const [isToggled, setIsToggled] = useState(false)
+
+    const rightSideDecorations = props.right ? [...props.right] : []
+
+    return (
+      <DecoratedInput
+        {...props}
+        ref={ref}
+        type={isToggled ? 'text' : 'password'}
+        right={[
+          ...rightSideDecorations,
+          <Toggle isToggled={isToggled} setIsToggled={setIsToggled} />,
+        ]}
+      />
+    )
+  })
diff --git a/app/assets/javascripts/components/FloatingLabelInput.tsx b/app/assets/javascripts/Components/Input/FloatingLabelInput.tsx
similarity index 51%
rename from app/assets/javascripts/components/FloatingLabelInput.tsx
rename to app/assets/javascripts/Components/Input/FloatingLabelInput.tsx
index c8cda068d..72e078b7a 100644
--- a/app/assets/javascripts/components/FloatingLabelInput.tsx
+++ b/app/assets/javascripts/Components/Input/FloatingLabelInput.tsx
@@ -1,20 +1,20 @@
-import { FunctionComponent, Ref } from 'preact';
-import { JSXInternal } from 'preact/src/jsx';
-import { forwardRef } from 'preact/compat';
-import { useState } from 'preact/hooks';
+import { FunctionComponent, Ref } from 'preact'
+import { JSXInternal } from 'preact/src/jsx'
+import { forwardRef } from 'preact/compat'
+import { useState } from 'preact/hooks'
 
 type Props = {
-  id: string;
-  type: 'text' | 'email' | 'password'; // Have no use cases for other types so far
-  label: string;
-  value: string;
-  onChange: JSXInternal.GenericEventHandler<HTMLInputElement>;
-  disabled?: boolean;
-  className?: string;
-  labelClassName?: string;
-  inputClassName?: string;
-  isInvalid?: boolean;
-};
+  id: string
+  type: 'text' | 'email' | 'password'
+  label: string
+  value: string
+  onChange: JSXInternal.GenericEventHandler<HTMLInputElement>
+  disabled?: boolean
+  className?: string
+  labelClassName?: string
+  inputClassName?: string
+  isInvalid?: boolean
+}
 
 export const FloatingLabelInput: FunctionComponent<Props> = forwardRef(
   (
@@ -30,27 +30,25 @@ export const FloatingLabelInput: FunctionComponent<Props> = forwardRef(
       labelClassName = '',
       inputClassName = '',
     }: Props,
-    ref: Ref<HTMLInputElement>
+    ref: Ref<HTMLInputElement>,
   ) => {
-    const [focused, setFocused] = useState(false);
+    const [focused, setFocused] = useState(false)
 
-    const BASE_CLASSNAME = `relative bg-default`;
+    const BASE_CLASSNAME = 'relative bg-default'
 
-    const LABEL_CLASSNAME = `hidden absolute ${
-      !focused ? 'color-neutral' : 'color-info'
-    } ${focused || value ? 'flex top-0 left-2 pt-1.5 px-1' : ''} ${
-      isInvalid ? 'color-dark-red' : ''
-    } ${labelClassName}`;
+    const LABEL_CLASSNAME = `hidden absolute ${!focused ? 'color-neutral' : 'color-info'} ${
+      focused || value ? 'flex top-0 left-2 pt-1.5 px-1' : ''
+    } ${isInvalid ? 'color-dark-red' : ''} ${labelClassName}`
 
     const INPUT_CLASSNAME = `w-full h-full ${
       focused || value ? 'pt-6 pb-2' : 'py-2.5'
     } px-3 text-input border-1 border-solid border-main rounded placeholder-medium text-input focus:ring-info ${
       isInvalid ? 'border-dark-red placeholder-dark-red' : ''
-    } ${inputClassName}`;
+    } ${inputClassName}`
 
-    const handleFocus = () => setFocused(true);
+    const handleFocus = () => setFocused(true)
 
-    const handleBlur = () => setFocused(false);
+    const handleBlur = () => setFocused(false)
 
     return (
       <div className={`${BASE_CLASSNAME} ${className}`}>
@@ -70,6 +68,6 @@ export const FloatingLabelInput: FunctionComponent<Props> = forwardRef(
           disabled={disabled}
         />
       </div>
-    );
-  }
-);
+    )
+  },
+)
diff --git a/app/assets/javascripts/Components/Input/Input.tsx b/app/assets/javascripts/Components/Input/Input.tsx
new file mode 100644
index 000000000..a5fc45476
--- /dev/null
+++ b/app/assets/javascripts/Components/Input/Input.tsx
@@ -0,0 +1,14 @@
+import { FunctionalComponent } from 'preact'
+
+interface Props {
+  text?: string
+  disabled?: boolean
+  className?: string
+}
+
+export const Input: FunctionalComponent<Props> = ({ className = '', disabled = false, text }) => {
+  const base = 'rounded py-1.5 px-3 text-input my-1 h-8 bg-contrast'
+  const stateClasses = disabled ? 'no-border' : 'border-solid border-1 border-main'
+  const classes = `${base} ${stateClasses} ${className}`
+  return <input type="text" className={classes} disabled={disabled} value={text} />
+}
diff --git a/app/assets/javascripts/components/Menu/Menu.tsx b/app/assets/javascripts/Components/Menu/Menu.tsx
similarity index 53%
rename from app/assets/javascripts/components/Menu/Menu.tsx
rename to app/assets/javascripts/Components/Menu/Menu.tsx
index b7cb129a4..e265baa9d 100644
--- a/app/assets/javascripts/components/Menu/Menu.tsx
+++ b/app/assets/javascripts/Components/Menu/Menu.tsx
@@ -6,22 +6,22 @@ import {
   RefCallback,
   ComponentChild,
   toChildArray,
-} from 'preact';
-import { useEffect, useRef } from 'preact/hooks';
-import { JSXInternal } from 'preact/src/jsx';
-import { MenuItem, MenuItemListElement } from './MenuItem';
-import { KeyboardKey } from '@/services/ioService';
-import { useListKeyboardNavigation } from '../utils';
+} from 'preact'
+import { useEffect, useRef } from 'preact/hooks'
+import { JSXInternal } from 'preact/src/jsx'
+import { MenuItem, MenuItemListElement } from './MenuItem'
+import { KeyboardKey } from '@/Services/IOService'
+import { useListKeyboardNavigation } from '@/Hooks/useListKeyboardNavigation'
 
 type MenuProps = {
-  className?: string;
-  style?: string | JSX.CSSProperties | undefined;
-  a11yLabel: string;
-  children: ComponentChildren;
-  closeMenu?: () => void;
-  isOpen: boolean;
-  initialFocus?: number;
-};
+  className?: string
+  style?: string | JSX.CSSProperties | undefined
+  a11yLabel: string
+  children: ComponentChildren
+  closeMenu?: () => void
+  isOpen: boolean
+  initialFocus?: number
+}
 
 export const Menu: FunctionComponent<MenuProps> = ({
   children,
@@ -32,32 +32,30 @@ export const Menu: FunctionComponent<MenuProps> = ({
   isOpen,
   initialFocus,
 }: MenuProps) => {
-  const menuItemRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const menuItemRefs = useRef<(HTMLButtonElement | null)[]>([])
 
-  const menuElementRef = useRef<HTMLMenuElement>(null);
+  const menuElementRef = useRef<HTMLMenuElement>(null)
 
-  const handleKeyDown: JSXInternal.KeyboardEventHandler<HTMLMenuElement> = (
-    event
-  ) => {
+  const handleKeyDown: JSXInternal.KeyboardEventHandler<HTMLMenuElement> = (event) => {
     if (!menuItemRefs.current) {
-      return;
+      return
     }
 
     if (event.key === KeyboardKey.Escape) {
-      closeMenu?.();
-      return;
+      closeMenu?.()
+      return
     }
-  };
+  }
 
-  useListKeyboardNavigation(menuElementRef, initialFocus);
+  useListKeyboardNavigation(menuElementRef, initialFocus)
 
   useEffect(() => {
     if (isOpen && menuItemRefs.current.length > 0) {
       setTimeout(() => {
-        menuElementRef.current?.focus();
-      });
+        menuElementRef.current?.focus()
+      })
     }
-  }, [isOpen]);
+  }, [isOpen])
 
   const pushRefToArray: RefCallback<HTMLLIElement> = (instance) => {
     if (instance && instance.children) {
@@ -66,49 +64,45 @@ export const Menu: FunctionComponent<MenuProps> = ({
           child.getAttribute('role')?.includes('menuitem') &&
           !menuItemRefs.current.includes(child as HTMLButtonElement)
         ) {
-          menuItemRefs.current.push(child as HTMLButtonElement);
+          menuItemRefs.current.push(child as HTMLButtonElement)
         }
-      });
+      })
     }
-  };
+  }
 
   const mapMenuItems = (
     child: ComponentChild,
     index: number,
-    array: ComponentChild[]
+    array: ComponentChild[],
   ): ComponentChild => {
-    if (!child || (Array.isArray(child) && child.length < 1)) return;
-
-    if (Array.isArray(child)) {
-      return child.map(mapMenuItems);
+    if (!child || (Array.isArray(child) && child.length < 1)) {
+      return
     }
 
-    const _child = child as VNode<unknown>;
+    if (Array.isArray(child)) {
+      return child.map(mapMenuItems)
+    }
+
+    const _child = child as VNode<unknown>
     const isFirstMenuItem =
-      index ===
-      array.findIndex((child) => (child as VNode<unknown>).type === MenuItem);
+      index === array.findIndex((child) => (child as VNode<unknown>).type === MenuItem)
 
     const hasMultipleItems = Array.isArray(_child.props.children)
       ? Array.from(_child.props.children as ComponentChild[]).some(
-          (child) => (child as VNode<unknown>).type === MenuItem
+          (child) => (child as VNode<unknown>).type === MenuItem,
         )
-      : false;
+      : false
 
-    const items = hasMultipleItems
-      ? [...(_child.props.children as ComponentChild[])]
-      : [_child];
+    const items = hasMultipleItems ? [...(_child.props.children as ComponentChild[])] : [_child]
 
     return items.map((child) => {
       return (
-        <MenuItemListElement
-          isFirstMenuItem={isFirstMenuItem}
-          ref={pushRefToArray}
-        >
+        <MenuItemListElement isFirstMenuItem={isFirstMenuItem} ref={pushRefToArray}>
           {child}
         </MenuItemListElement>
-      );
-    });
-  };
+      )
+    })
+  }
 
   return (
     <menu
@@ -120,5 +114,5 @@ export const Menu: FunctionComponent<MenuProps> = ({
     >
       {toChildArray(children).map(mapMenuItems)}
     </menu>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/components/Menu/MenuItem.tsx b/app/assets/javascripts/Components/Menu/MenuItem.tsx
similarity index 51%
rename from app/assets/javascripts/components/Menu/MenuItem.tsx
rename to app/assets/javascripts/Components/Menu/MenuItem.tsx
index ba814fbe4..9f2d64e2b 100644
--- a/app/assets/javascripts/components/Menu/MenuItem.tsx
+++ b/app/assets/javascripts/Components/Menu/MenuItem.tsx
@@ -1,10 +1,10 @@
-import { ComponentChildren, FunctionComponent, VNode } from 'preact';
-import { forwardRef, Ref } from 'preact/compat';
-import { JSXInternal } from 'preact/src/jsx';
-import { Icon } from '../Icon';
-import { Switch, SwitchProps } from '../Switch';
-import { IconType } from '@standardnotes/snjs';
-import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/constants';
+import { ComponentChildren, FunctionComponent, VNode } from 'preact'
+import { forwardRef, Ref } from 'preact/compat'
+import { JSXInternal } from 'preact/src/jsx'
+import { Icon } from '@/Components/Icon'
+import { Switch, SwitchProps } from '@/Components/Switch'
+import { IconType } from '@standardnotes/snjs'
+import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants'
 
 export enum MenuItemType {
   IconButton,
@@ -13,17 +13,17 @@ export enum MenuItemType {
 }
 
 type MenuItemProps = {
-  type: MenuItemType;
-  children: ComponentChildren;
-  onClick?: JSXInternal.MouseEventHandler<HTMLButtonElement>;
-  onChange?: SwitchProps['onChange'];
-  onBlur?: (event: { relatedTarget: EventTarget | null }) => void;
-  className?: string;
-  checked?: boolean;
-  icon?: IconType;
-  iconClassName?: string;
-  tabIndex?: number;
-};
+  type: MenuItemType
+  children: ComponentChildren
+  onClick?: JSXInternal.MouseEventHandler<HTMLButtonElement>
+  onChange?: SwitchProps['onChange']
+  onBlur?: (event: { relatedTarget: EventTarget | null }) => void
+  className?: string
+  checked?: boolean
+  icon?: IconType
+  iconClassName?: string
+  tabIndex?: number
+}
 
 export const MenuItem: FunctionComponent<MenuItemProps> = forwardRef(
   (
@@ -39,19 +39,16 @@ export const MenuItem: FunctionComponent<MenuItemProps> = forwardRef(
       iconClassName,
       tabIndex,
     }: MenuItemProps,
-    ref: Ref<HTMLButtonElement>
+    ref: Ref<HTMLButtonElement>,
   ) => {
-    return type === MenuItemType.SwitchButton &&
-      typeof onChange === 'function' ? (
+    return type === MenuItemType.SwitchButton && typeof onChange === 'function' ? (
       <button
         className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none justify-between"
         onClick={() => {
-          onChange(!checked);
+          onChange(!checked)
         }}
         onBlur={onBlur}
-        tabIndex={
-          typeof tabIndex === 'number' ? tabIndex : FOCUSABLE_BUT_NOT_TABBABLE
-        }
+        tabIndex={typeof tabIndex === 'number' ? tabIndex : FOCUSABLE_BUT_NOT_TABBABLE}
         role="menuitemcheckbox"
         aria-checked={checked}
       >
@@ -62,15 +59,11 @@ export const MenuItem: FunctionComponent<MenuItemProps> = forwardRef(
       <button
         ref={ref}
         role={type === MenuItemType.RadioButton ? 'menuitemradio' : 'menuitem'}
-        tabIndex={
-          typeof tabIndex === 'number' ? tabIndex : FOCUSABLE_BUT_NOT_TABBABLE
-        }
+        tabIndex={typeof tabIndex === 'number' ? tabIndex : FOCUSABLE_BUT_NOT_TABBABLE}
         className={`sn-dropdown-item focus:bg-info-backdrop focus:shadow-none ${className}`}
         onClick={onClick}
         onBlur={onBlur}
-        {...(type === MenuItemType.RadioButton
-          ? { 'aria-checked': checked }
-          : {})}
+        {...(type === MenuItemType.RadioButton ? { 'aria-checked': checked } : {})}
       >
         {type === MenuItemType.IconButton && icon ? (
           <Icon type={icon} className={iconClassName} />
@@ -84,41 +77,37 @@ export const MenuItem: FunctionComponent<MenuItemProps> = forwardRef(
         ) : null}
         {children}
       </button>
-    );
-  }
-);
+    )
+  },
+)
 
 export const MenuItemSeparator: FunctionComponent = () => (
   <div role="separator" className="h-1px my-2 bg-border"></div>
-);
+)
 
 type ListElementProps = {
-  isFirstMenuItem: boolean;
-  children: ComponentChildren;
-};
+  isFirstMenuItem: boolean
+  children: ComponentChildren
+}
 
-export const MenuItemListElement: FunctionComponent<ListElementProps> =
-  forwardRef(
-    (
-      { children, isFirstMenuItem }: ListElementProps,
-      ref: Ref<HTMLLIElement>
-    ) => {
-      const child = children as VNode<unknown>;
+export const MenuItemListElement: FunctionComponent<ListElementProps> = forwardRef(
+  ({ children, isFirstMenuItem }: ListElementProps, ref: Ref<HTMLLIElement>) => {
+    const child = children as VNode<unknown>
 
-      return (
-        <li className="list-style-none" role="none" ref={ref}>
-          {{
-            ...child,
-            props: {
-              ...(child.props ? { ...child.props } : {}),
-              ...(child.type === MenuItem
-                ? {
-                    tabIndex: isFirstMenuItem ? 0 : -1,
-                  }
-                : {}),
-            },
-          }}
-        </li>
-      );
-    }
-  );
+    return (
+      <li className="list-style-none" role="none" ref={ref}>
+        {{
+          ...child,
+          props: {
+            ...(child.props ? { ...child.props } : {}),
+            ...(child.type === MenuItem
+              ? {
+                  tabIndex: isFirstMenuItem ? 0 : -1,
+                }
+              : {}),
+          },
+        }}
+      </li>
+    )
+  },
+)
diff --git a/app/assets/javascripts/Components/MultipleSelectedNotes/index.tsx b/app/assets/javascripts/Components/MultipleSelectedNotes/index.tsx
new file mode 100644
index 000000000..02a3c249d
--- /dev/null
+++ b/app/assets/javascripts/Components/MultipleSelectedNotes/index.tsx
@@ -0,0 +1,36 @@
+import { AppState } from '@/UIModels/AppState'
+import { IlNotesIcon } from '@standardnotes/stylekit'
+import { observer } from 'mobx-react-lite'
+import { NotesOptionsPanel } from '@/Components/NotesOptions/NotesOptionsPanel'
+import { WebApplication } from '@/UIModels/Application'
+import { PinNoteButton } from '@/Components/PinNoteButton'
+
+type Props = {
+  application: WebApplication
+  appState: AppState
+}
+
+export const MultipleSelectedNotes = observer(({ application, appState }: Props) => {
+  const count = appState.notes.selectedNotesCount
+
+  return (
+    <div className="flex flex-col h-full items-center">
+      <div className="flex items-center justify-between p-4 w-full">
+        <h1 className="sk-h1 font-bold m-0">{count} selected notes</h1>
+        <div className="flex">
+          <div className="mr-3">
+            <PinNoteButton appState={appState} />
+          </div>
+          <NotesOptionsPanel application={application} appState={appState} />
+        </div>
+      </div>
+      <div className="flex-grow flex flex-col justify-center items-center w-full max-w-md">
+        <IlNotesIcon className="block" />
+        <h2 className="text-lg m-0 text-center mt-4">{count} selected notes</h2>
+        <p className="text-sm mt-2 text-center max-w-60">
+          Actions will be performed on all selected notes.
+        </p>
+      </div>
+    </div>
+  )
+})
diff --git a/app/assets/javascripts/Components/Navigation/index.tsx b/app/assets/javascripts/Components/Navigation/index.tsx
new file mode 100644
index 000000000..6f1d3e408
--- /dev/null
+++ b/app/assets/javascripts/Components/Navigation/index.tsx
@@ -0,0 +1,82 @@
+import { SmartViewsSection } from '@/Components/Tags/SmartViewsSection'
+import { TagsSection } from '@/Components/Tags/TagsSection'
+import { WebApplication } from '@/UIModels/Application'
+import { PANEL_NAME_NAVIGATION } from '@/Constants'
+import { ApplicationEvent, PrefKey } from '@standardnotes/snjs'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { useCallback, useEffect, useMemo, useState } from 'preact/hooks'
+import { PanelSide, ResizeFinishCallback, PanelResizer, PanelResizeType } from '@/Components/PanelResizer'
+
+type Props = {
+  application: WebApplication
+}
+
+export const Navigation: FunctionComponent<Props> = observer(({ application }) => {
+  const appState = useMemo(() => application.getAppState(), [application])
+  const [ref, setRef] = useState<HTMLDivElement | null>()
+  const [panelWidth, setPanelWidth] = useState<number>(0)
+
+  useEffect(() => {
+    const removeObserver = application.addEventObserver(async () => {
+      const width = application.getPreference(PrefKey.TagsPanelWidth)
+      if (width) {
+        setPanelWidth(width)
+      }
+    }, ApplicationEvent.PreferencesChanged)
+
+    return () => {
+      removeObserver()
+    }
+  }, [application])
+
+  const panelResizeFinishCallback: ResizeFinishCallback = useCallback(
+    (width, _lastLeft, _isMaxWidth, isCollapsed) => {
+      application.setPreference(PrefKey.TagsPanelWidth, width).catch(console.error)
+      appState.noteTags.reloadTagsContainerMaxWidth()
+      appState.panelDidResize(PANEL_NAME_NAVIGATION, isCollapsed)
+    },
+    [application, appState],
+  )
+
+  const panelWidthEventCallback = useCallback(() => {
+    appState.noteTags.reloadTagsContainerMaxWidth()
+  }, [appState])
+
+  return (
+    <div
+      id="navigation"
+      className="sn-component section app-column app-column-first"
+      data-aria-label="Navigation"
+      ref={setRef}
+    >
+      <div id="navigation-content" className="content">
+        <div className="section-title-bar">
+          <div className="section-title-bar-header">
+            <div className="sk-h3 title">
+              <span className="sk-bold">Views</span>
+            </div>
+          </div>
+        </div>
+        <div className="scrollable">
+          <SmartViewsSection appState={appState} />
+          <TagsSection appState={appState} />
+        </div>
+      </div>
+      {ref && (
+        <PanelResizer
+          collapsable={true}
+          defaultWidth={150}
+          panel={ref}
+          hoverable={true}
+          side={PanelSide.Right}
+          type={PanelResizeType.WidthOnly}
+          resizeFinishCallback={panelResizeFinishCallback}
+          widthEventCallback={panelWidthEventCallback}
+          width={panelWidth}
+          left={0}
+        />
+      )}
+    </div>
+  )
+})
diff --git a/app/assets/javascripts/components/NoAccountWarning.tsx b/app/assets/javascripts/Components/NoAccountWarning/index.tsx
similarity index 62%
rename from app/assets/javascripts/components/NoAccountWarning.tsx
rename to app/assets/javascripts/Components/NoAccountWarning/index.tsx
index 3d55a802d..c0b4db0de 100644
--- a/app/assets/javascripts/components/NoAccountWarning.tsx
+++ b/app/assets/javascripts/Components/NoAccountWarning/index.tsx
@@ -1,32 +1,30 @@
-import { Icon } from './Icon';
-import { AppState } from '@/ui_models/app_state';
-import { observer } from 'mobx-react-lite';
+import { Icon } from '@/Components/Icon'
+import { AppState } from '@/UIModels/AppState'
+import { observer } from 'mobx-react-lite'
 
-type Props = { appState: AppState };
+type Props = { appState: AppState }
 
 export const NoAccountWarning = observer(({ appState }: Props) => {
-  const canShow = appState.noAccountWarning.show;
+  const canShow = appState.noAccountWarning.show
   if (!canShow) {
-    return null;
+    return null
   }
   return (
     <div className="mt-5 p-5 rounded-md shadow-sm grid grid-template-cols-1fr">
       <h1 className="sk-h3 m-0 font-semibold">Data not backed up</h1>
-      <p className="m-0 mt-1 col-start-1 col-end-3">
-        Sign in or register to back up your notes.
-      </p>
+      <p className="m-0 mt-1 col-start-1 col-end-3">Sign in or register to back up your notes.</p>
       <button
         className="sn-button small info mt-3 col-start-1 col-end-3 justify-self-start"
         onClick={(event) => {
-          event.stopPropagation();
-          appState.accountMenu.setShow(true);
+          event.stopPropagation()
+          appState.accountMenu.setShow(true)
         }}
       >
         Open Account menu
       </button>
       <button
         onClick={() => {
-          appState.noAccountWarning.hide();
+          appState.noAccountWarning.hide()
         }}
         title="Ignore"
         label="Ignore"
@@ -36,5 +34,5 @@ export const NoAccountWarning = observer(({ appState }: Props) => {
         <Icon type="close" className="block" />
       </button>
     </div>
-  );
-});
+  )
+})
diff --git a/app/assets/javascripts/Components/NoteGroupView/index.tsx b/app/assets/javascripts/Components/NoteGroupView/index.tsx
new file mode 100644
index 000000000..7f9abdbb3
--- /dev/null
+++ b/app/assets/javascripts/Components/NoteGroupView/index.tsx
@@ -0,0 +1,57 @@
+import { NoteViewController } from '@standardnotes/snjs'
+import { PureComponent } from '@/Components/Abstract/PureComponent'
+import { WebApplication } from '@/UIModels/Application'
+import { MultipleSelectedNotes } from '@/Components/MultipleSelectedNotes'
+import { NoteView } from '@/Components/NoteView/NoteView'
+import { ElementIds } from '@/ElementIDs'
+
+type State = {
+  showMultipleSelectedNotes: boolean
+  controllers: NoteViewController[]
+}
+
+type Props = {
+  application: WebApplication
+}
+
+export class NoteGroupView extends PureComponent<Props, State> {
+  constructor(props: Props) {
+    super(props, props.application)
+    this.state = {
+      showMultipleSelectedNotes: false,
+      controllers: [],
+    }
+  }
+
+  override componentDidMount(): void {
+    super.componentDidMount()
+    this.application.noteControllerGroup.addActiveControllerChangeObserver(() => {
+      this.setState({
+        controllers: this.application.noteControllerGroup.noteControllers,
+      })
+    })
+    this.autorun(() => {
+      this.setState({
+        showMultipleSelectedNotes: this.appState.notes.selectedNotesCount > 1,
+      })
+    })
+  }
+
+  override render() {
+    return (
+      <div id={ElementIds.EditorColumn} className="h-full app-column app-column-third">
+        {this.state.showMultipleSelectedNotes && (
+          <MultipleSelectedNotes application={this.application} appState={this.appState} />
+        )}
+
+        {!this.state.showMultipleSelectedNotes && (
+          <>
+            {this.state.controllers.map((controller) => {
+              return <NoteView application={this.application} controller={controller} />
+            })}
+          </>
+        )}
+      </div>
+    )
+  }
+}
diff --git a/app/assets/javascripts/components/NoteTag.tsx b/app/assets/javascripts/Components/NoteTags/NoteTag.tsx
similarity index 50%
rename from app/assets/javascripts/components/NoteTag.tsx
rename to app/assets/javascripts/Components/NoteTags/NoteTag.tsx
index 179ba6cc4..9a5604907 100644
--- a/app/assets/javascripts/components/NoteTag.tsx
+++ b/app/assets/javascripts/Components/NoteTags/NoteTag.tsx
@@ -1,98 +1,98 @@
-import { Icon } from './Icon';
-import { useEffect, useRef, useState } from 'preact/hooks';
-import { AppState } from '@/ui_models/app_state';
-import { SNTag } from '@standardnotes/snjs';
-import { observer } from 'mobx-react-lite';
+import { Icon } from '@/Components/Icon'
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { AppState } from '@/UIModels/AppState'
+import { SNTag } from '@standardnotes/snjs'
+import { observer } from 'mobx-react-lite'
 
 type Props = {
-  appState: AppState;
-  tag: SNTag;
-};
+  appState: AppState
+  tag: SNTag
+}
 
 export const NoteTag = observer(({ appState, tag }: Props) => {
-  const noteTags = appState.noteTags;
+  const noteTags = appState.noteTags
 
-  const { autocompleteInputFocused, focusedTagUuid, tags } = noteTags;
+  const { autocompleteInputFocused, focusedTagUuid, tags } = noteTags
 
-  const [showDeleteButton, setShowDeleteButton] = useState(false);
-  const [tagClicked, setTagClicked] = useState(false);
-  const deleteTagRef = useRef<HTMLButtonElement>(null);
+  const [showDeleteButton, setShowDeleteButton] = useState(false)
+  const [tagClicked, setTagClicked] = useState(false)
+  const deleteTagRef = useRef<HTMLButtonElement>(null)
 
-  const tagRef = useRef<HTMLButtonElement>(null);
+  const tagRef = useRef<HTMLButtonElement>(null)
 
-  const title = tag.title;
-  const prefixTitle = noteTags.getPrefixTitle(tag);
-  const longTitle = noteTags.getLongTitle(tag);
+  const title = tag.title
+  const prefixTitle = noteTags.getPrefixTitle(tag)
+  const longTitle = noteTags.getLongTitle(tag)
 
   const deleteTag = () => {
-    appState.noteTags.focusPreviousTag(tag);
-    appState.noteTags.removeTagFromActiveNote(tag);
-  };
+    appState.noteTags.focusPreviousTag(tag)
+    appState.noteTags.removeTagFromActiveNote(tag).catch(console.error)
+  }
 
   const onDeleteTagClick = (event: MouseEvent) => {
-    event.stopImmediatePropagation();
-    event.stopPropagation();
-    deleteTag();
-  };
+    event.stopImmediatePropagation()
+    event.stopPropagation()
+    deleteTag()
+  }
 
   const onTagClick = (event: MouseEvent) => {
     if (tagClicked && event.target !== deleteTagRef.current) {
-      setTagClicked(false);
-      appState.selectedTag = tag;
+      setTagClicked(false)
+      appState.selectedTag = tag
     } else {
-      setTagClicked(true);
+      setTagClicked(true)
     }
-  };
+  }
 
   const onFocus = () => {
-    appState.noteTags.setFocusedTagUuid(tag.uuid);
-    setShowDeleteButton(true);
-  };
+    appState.noteTags.setFocusedTagUuid(tag.uuid)
+    setShowDeleteButton(true)
+  }
 
   const onBlur = (event: FocusEvent) => {
-    const relatedTarget = event.relatedTarget as Node;
+    const relatedTarget = event.relatedTarget as Node
     if (relatedTarget !== deleteTagRef.current) {
-      appState.noteTags.setFocusedTagUuid(undefined);
-      setShowDeleteButton(false);
+      appState.noteTags.setFocusedTagUuid(undefined)
+      setShowDeleteButton(false)
     }
-  };
+  }
 
   const getTabIndex = () => {
     if (focusedTagUuid) {
-      return focusedTagUuid === tag.uuid ? 0 : -1;
+      return focusedTagUuid === tag.uuid ? 0 : -1
     }
     if (autocompleteInputFocused) {
-      return -1;
+      return -1
     }
-    return tags[0].uuid === tag.uuid ? 0 : -1;
-  };
+    return tags[0].uuid === tag.uuid ? 0 : -1
+  }
 
   const onKeyDown = (event: KeyboardEvent) => {
-    const tagIndex = appState.noteTags.getTagIndex(tag, tags);
+    const tagIndex = appState.noteTags.getTagIndex(tag, tags)
     switch (event.key) {
       case 'Backspace':
-        deleteTag();
-        break;
+        deleteTag()
+        break
       case 'ArrowLeft':
-        appState.noteTags.focusPreviousTag(tag);
-        break;
+        appState.noteTags.focusPreviousTag(tag)
+        break
       case 'ArrowRight':
         if (tagIndex === tags.length - 1) {
-          appState.noteTags.setAutocompleteInputFocused(true);
+          appState.noteTags.setAutocompleteInputFocused(true)
         } else {
-          appState.noteTags.focusNextTag(tag);
+          appState.noteTags.focusNextTag(tag)
         }
-        break;
+        break
       default:
-        return;
+        return
     }
-  };
+  }
 
   useEffect(() => {
     if (focusedTagUuid === tag.uuid) {
-      tagRef.current!.focus();
+      tagRef.current?.focus()
     }
-  }, [appState.noteTags, focusedTagUuid, tag]);
+  }, [appState.noteTags, focusedTagUuid, tag])
 
   return (
     <button
@@ -119,12 +119,9 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
           onClick={onDeleteTagClick}
           tabIndex={-1}
         >
-          <Icon
-            type="close"
-            className="sn-icon--small color-neutral hover:color-info"
-          />
+          <Icon type="close" className="sn-icon--small color-neutral hover:color-info" />
         </button>
       )}
     </button>
-  );
-});
+  )
+})
diff --git a/app/assets/javascripts/components/NoteTagsContainer.tsx b/app/assets/javascripts/Components/NoteTags/NoteTagsContainer.tsx
similarity index 50%
rename from app/assets/javascripts/components/NoteTagsContainer.tsx
rename to app/assets/javascripts/Components/NoteTags/NoteTagsContainer.tsx
index c22da94a7..743674374 100644
--- a/app/assets/javascripts/components/NoteTagsContainer.tsx
+++ b/app/assets/javascripts/Components/NoteTags/NoteTagsContainer.tsx
@@ -1,19 +1,19 @@
-import { AppState } from '@/ui_models/app_state';
-import { observer } from 'mobx-react-lite';
-import { AutocompleteTagInput } from './AutocompleteTagInput';
-import { NoteTag } from './NoteTag';
-import { useEffect } from 'preact/hooks';
+import { AppState } from '@/UIModels/AppState'
+import { observer } from 'mobx-react-lite'
+import { AutocompleteTagInput } from '@/Components/TagAutocomplete/AutocompleteTagInput'
+import { NoteTag } from './NoteTag'
+import { useEffect } from 'preact/hooks'
 
 type Props = {
-  appState: AppState;
-};
+  appState: AppState
+}
 
 export const NoteTagsContainer = observer(({ appState }: Props) => {
-  const { tags, tagsContainerMaxWidth } = appState.noteTags;
+  const { tags, tagsContainerMaxWidth } = appState.noteTags
 
   useEffect(() => {
-    appState.noteTags.reloadTagsContainerMaxWidth();
-  }, [appState.noteTags]);
+    appState.noteTags.reloadTagsContainerMaxWidth()
+  }, [appState.noteTags])
 
   return (
     <div
@@ -27,5 +27,5 @@ export const NoteTagsContainer = observer(({ appState }: Props) => {
       ))}
       <AutocompleteTagInput appState={appState} />
     </div>
-  );
-});
+  )
+})
diff --git a/app/assets/javascripts/components/NoteView/NoteView.test.ts b/app/assets/javascripts/Components/NoteView/NoteView.test.ts
similarity index 73%
rename from app/assets/javascripts/components/NoteView/NoteView.test.ts
rename to app/assets/javascripts/Components/NoteView/NoteView.test.ts
index 90dd896df..bfe64f18b 100644
--- a/app/assets/javascripts/components/NoteView/NoteView.test.ts
+++ b/app/assets/javascripts/Components/NoteView/NoteView.test.ts
@@ -2,20 +2,20 @@
  * @jest-environment jsdom
  */
 
-import { NoteView } from './NoteView';
+import { NoteView } from './NoteView'
 import {
   ApplicationEvent,
   ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction,
-} from '@standardnotes/snjs/';
+} from '@standardnotes/snjs/'
 
 describe('editor-view', () => {
-  let ctrl: NoteView;
-  let setShowProtectedWarningSpy: jest.SpyInstance;
+  let ctrl: NoteView
+  let setShowProtectedWarningSpy: jest.SpyInstance
 
   beforeEach(() => {
-    ctrl = new NoteView({} as any);
+    ctrl = new NoteView({} as any)
 
-    setShowProtectedWarningSpy = jest.spyOn(ctrl, 'setShowProtectedOverlay');
+    setShowProtectedWarningSpy = jest.spyOn(ctrl, 'setShowProtectedOverlay')
 
     Object.defineProperties(ctrl, {
       application: {
@@ -25,7 +25,7 @@ describe('editor-view', () => {
               notes: {
                 setShowProtectedWarning: jest.fn(),
               },
-            };
+            }
           },
           hasProtectionSources: () => true,
           authorizeNoteAccess: jest.fn(),
@@ -48,19 +48,19 @@ describe('editor-view', () => {
           clearNoteChangeListener: jest.fn(),
         },
       },
-    });
-  });
+    })
+  })
   beforeEach(() => {
-    jest.useFakeTimers();
-  });
+    jest.useFakeTimers()
+  })
 
   afterEach(() => {
-    jest.useRealTimers();
-  });
+    jest.useRealTimers()
+  })
 
   afterEach(() => {
-    ctrl.deinit();
-  });
+    ctrl.deinit()
+  })
 
   describe('note is protected', () => {
     beforeEach(() => {
@@ -68,76 +68,71 @@ describe('editor-view', () => {
         value: {
           protected: true,
         },
-      });
-    });
+      })
+    })
 
     it("should hide the note if at the time of the session expiration the note wasn't edited for longer than the allowed idle time", async () => {
       jest
         .spyOn(ctrl, 'getSecondsElapsedSinceLastEdit')
         .mockImplementation(
-          () =>
-            ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction +
-            5
-        );
+          () => ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction + 5,
+        )
 
-      await ctrl.onAppEvent(ApplicationEvent.UnprotectedSessionExpired);
+      await ctrl.onAppEvent(ApplicationEvent.UnprotectedSessionExpired)
 
-      expect(setShowProtectedWarningSpy).toHaveBeenCalledWith(true);
-    });
+      expect(setShowProtectedWarningSpy).toHaveBeenCalledWith(true)
+    })
 
     it('should postpone the note hiding by correct time if the time passed after its last modification is less than the allowed idle time', async () => {
       const secondsElapsedSinceLastEdit =
-        ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction -
-        3;
+        ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction - 3
 
       Object.defineProperty(ctrl.note, 'userModifiedDate', {
         value: new Date(Date.now() - secondsElapsedSinceLastEdit * 1000),
         configurable: true,
-      });
+      })
 
-      await ctrl.onAppEvent(ApplicationEvent.UnprotectedSessionExpired);
+      await ctrl.onAppEvent(ApplicationEvent.UnprotectedSessionExpired)
 
       const secondsAfterWhichTheNoteShouldHide =
         ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction -
-        secondsElapsedSinceLastEdit;
-      jest.advanceTimersByTime((secondsAfterWhichTheNoteShouldHide - 1) * 1000);
-      expect(setShowProtectedWarningSpy).not.toHaveBeenCalled();
+        secondsElapsedSinceLastEdit
+      jest.advanceTimersByTime((secondsAfterWhichTheNoteShouldHide - 1) * 1000)
+      expect(setShowProtectedWarningSpy).not.toHaveBeenCalled()
 
-      jest.advanceTimersByTime(1 * 1000);
-      expect(setShowProtectedWarningSpy).toHaveBeenCalledWith(true);
-    });
+      jest.advanceTimersByTime(1 * 1000)
+      expect(setShowProtectedWarningSpy).toHaveBeenCalledWith(true)
+    })
 
     it('should postpone the note hiding by correct time if the user continued editing it even after the protection session has expired', async () => {
-      const secondsElapsedSinceLastModification = 3;
+      const secondsElapsedSinceLastModification = 3
       Object.defineProperty(ctrl.note, 'userModifiedDate', {
-        value: new Date(
-          Date.now() - secondsElapsedSinceLastModification * 1000
-        ),
+        value: new Date(Date.now() - secondsElapsedSinceLastModification * 1000),
         configurable: true,
-      });
+      })
 
-      await ctrl.onAppEvent(ApplicationEvent.UnprotectedSessionExpired);
+      await ctrl.onAppEvent(ApplicationEvent.UnprotectedSessionExpired)
 
       let secondsAfterWhichTheNoteShouldHide =
         ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction -
-        secondsElapsedSinceLastModification;
-      jest.advanceTimersByTime((secondsAfterWhichTheNoteShouldHide - 1) * 1000);
+        secondsElapsedSinceLastModification
+      jest.advanceTimersByTime((secondsAfterWhichTheNoteShouldHide - 1) * 1000)
 
       // A new modification has just happened
       Object.defineProperty(ctrl.note, 'userModifiedDate', {
         value: new Date(),
         configurable: true,
-      });
+      })
 
       secondsAfterWhichTheNoteShouldHide =
-        ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction;
-      jest.advanceTimersByTime((secondsAfterWhichTheNoteShouldHide - 1) * 1000);
-      expect(setShowProtectedWarningSpy).not.toHaveBeenCalled();
+        ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction
+      jest.advanceTimersByTime((secondsAfterWhichTheNoteShouldHide - 1) * 1000)
+      expect(setShowProtectedWarningSpy).not.toHaveBeenCalled()
 
-      jest.advanceTimersByTime(1 * 1000);
-      expect(setShowProtectedWarningSpy).toHaveBeenCalledWith(true);
-    });
-  });
+      jest.advanceTimersByTime(1 * 1000)
+      expect(setShowProtectedWarningSpy).toHaveBeenCalledWith(true)
+    })
+  })
 
   describe('note is unprotected', () => {
     it('should not call any hiding logic', async () => {
@@ -145,51 +140,46 @@ describe('editor-view', () => {
         value: {
           protected: false,
         },
-      });
-      const hideProtectedNoteIfInactiveSpy = jest.spyOn(
-        ctrl,
-        'hideProtectedNoteIfInactive'
-      );
+      })
+      const hideProtectedNoteIfInactiveSpy = jest.spyOn(ctrl, 'hideProtectedNoteIfInactive')
 
-      await ctrl.onAppEvent(ApplicationEvent.UnprotectedSessionExpired);
+      await ctrl.onAppEvent(ApplicationEvent.UnprotectedSessionExpired)
 
-      expect(hideProtectedNoteIfInactiveSpy).not.toHaveBeenCalled();
-    });
-  });
+      expect(hideProtectedNoteIfInactiveSpy).not.toHaveBeenCalled()
+    })
+  })
 
   describe('dismissProtectedWarning', () => {
     describe('the note has protection sources', () => {
       it('should reveal note contents if the authorization has been passed', async () => {
         jest
           .spyOn(ctrl['application'], 'authorizeNoteAccess')
-          .mockImplementation(async () => Promise.resolve(true));
+          .mockImplementation(async () => Promise.resolve(true))
 
-        await ctrl.dismissProtectedWarning();
+        await ctrl.dismissProtectedWarning()
 
-        expect(setShowProtectedWarningSpy).toHaveBeenCalledWith(false);
-      });
+        expect(setShowProtectedWarningSpy).toHaveBeenCalledWith(false)
+      })
 
       it('should not reveal note contents if the authorization has not been passed', async () => {
         jest
           .spyOn(ctrl['application'], 'authorizeNoteAccess')
-          .mockImplementation(async () => Promise.resolve(false));
+          .mockImplementation(async () => Promise.resolve(false))
 
-        await ctrl.dismissProtectedWarning();
+        await ctrl.dismissProtectedWarning()
 
-        expect(setShowProtectedWarningSpy).not.toHaveBeenCalled();
-      });
-    });
+        expect(setShowProtectedWarningSpy).not.toHaveBeenCalled()
+      })
+    })
 
     describe('the note does not have protection sources', () => {
       it('should reveal note contents', async () => {
-        jest
-          .spyOn(ctrl['application'], 'hasProtectionSources')
-          .mockImplementation(() => false);
+        jest.spyOn(ctrl['application'], 'hasProtectionSources').mockImplementation(() => false)
 
-        await ctrl.dismissProtectedWarning();
+        await ctrl.dismissProtectedWarning()
 
-        expect(setShowProtectedWarningSpy).toHaveBeenCalledWith(false);
-      });
-    });
-  });
-});
+        expect(setShowProtectedWarningSpy).toHaveBeenCalledWith(false)
+      })
+    })
+  })
+})
diff --git a/app/assets/javascripts/components/NoteView/NoteView.tsx b/app/assets/javascripts/Components/NoteView/NoteView.tsx
similarity index 60%
rename from app/assets/javascripts/components/NoteView/NoteView.tsx
rename to app/assets/javascripts/Components/NoteView/NoteView.tsx
index 6db18d81a..b947591cd 100644
--- a/app/assets/javascripts/components/NoteView/NoteView.tsx
+++ b/app/assets/javascripts/Components/NoteView/NoteView.tsx
@@ -1,5 +1,5 @@
-import { WebApplication } from '@/ui_models/application';
-import { createRef, JSX, RefObject } from 'preact';
+import { WebApplication } from '@/UIModels/Application'
+import { createRef, JSX, RefObject } from 'preact'
 import {
   ApplicationEvent,
   isPayloadSourceRetrieved,
@@ -16,151 +16,143 @@ import {
   ItemMutator,
   ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction,
   NoteViewController,
-} from '@standardnotes/snjs';
-import { debounce, isDesktopApplication } from '@/utils';
-import { KeyboardModifier, KeyboardKey } from '@/services/ioService';
-import { EventSource } from '@/ui_models/app_state';
+} from '@standardnotes/snjs'
+import { debounce, isDesktopApplication } from '@/Utils'
+import { KeyboardModifier, KeyboardKey } from '@/Services/IOService'
+import { EventSource } from '@/UIModels/AppState'
 import {
   STRING_DELETE_PLACEHOLDER_ATTEMPT,
   STRING_DELETE_LOCKED_ATTEMPT,
   StringDeleteNote,
-} from '@/strings';
-import { confirmDialog } from '@/services/alertService';
-import { PureComponent } from '../Abstract/PureComponent';
-import { ProtectedNoteOverlay } from '../ProtectedNoteOverlay';
-import { Icon } from '../Icon';
-import { PinNoteButton } from '../PinNoteButton';
-import { NotesOptionsPanel } from '../NotesOptionsPanel';
-import { NoteTagsContainer } from '../NoteTagsContainer';
-import { ComponentView } from '../ComponentView';
-import { PanelSide, PanelResizer, PanelResizeType } from '../PanelResizer';
-import { ElementIds } from '@/element_ids';
-import { ChangeEditorButton } from '../ChangeEditorButton';
-import { AttachedFilesButton } from '../AttachedFilesPopover/AttachedFilesButton';
+} from '@/Strings'
+import { confirmDialog } from '@/Services/AlertService'
+import { PureComponent } from '@/Components/Abstract/PureComponent'
+import { ProtectedNoteOverlay } from '@/Components/ProtectedNoteOverlay'
+import { Icon } from '@/Components/Icon'
+import { PinNoteButton } from '@/Components/PinNoteButton'
+import { NotesOptionsPanel } from '@/Components/NotesOptions/NotesOptionsPanel'
+import { NoteTagsContainer } from '@/Components/NoteTags/NoteTagsContainer'
+import { ComponentView } from '@/Components/ComponentView'
+import { PanelSide, PanelResizer, PanelResizeType } from '@/Components/PanelResizer'
+import { ElementIds } from '@/ElementIDs'
+import { ChangeEditorButton } from '@/Components/ChangeEditor/ChangeEditorButton'
+import { AttachedFilesButton } from '@/Components/AttachedFilesPopover/AttachedFilesButton'
 
-const MINIMUM_STATUS_DURATION = 400;
-const TEXTAREA_DEBOUNCE = 100;
+const MINIMUM_STATUS_DURATION = 400
+const TEXTAREA_DEBOUNCE = 100
 
 type NoteStatus = {
-  message?: string;
-  desc?: string;
-};
+  message?: string
+  desc?: string
+}
 
 function sortAlphabetically(array: SNComponent[]): SNComponent[] {
-  return array.sort((a, b) =>
-    a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1
-  );
+  return array.sort((a, b) => (a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1))
 }
 
 export const transactionForAssociateComponentWithCurrentNote = (
   component: SNComponent,
-  note: SNNote
+  note: SNNote,
 ) => {
   const transaction: TransactionalMutation = {
     itemUuid: component.uuid,
     mutate: (m: ItemMutator) => {
-      const mutator = m as ComponentMutator;
-      mutator.removeDisassociatedItemId(note.uuid);
-      mutator.associateWithItem(note.uuid);
+      const mutator = m as ComponentMutator
+      mutator.removeDisassociatedItemId(note.uuid)
+      mutator.associateWithItem(note.uuid)
     },
-  };
-  return transaction;
-};
+  }
+  return transaction
+}
 
 export const transactionForDisassociateComponentWithCurrentNote = (
   component: SNComponent,
-  note: SNNote
+  note: SNNote,
 ) => {
   const transaction: TransactionalMutation = {
     itemUuid: component.uuid,
     mutate: (m: ItemMutator) => {
-      const mutator = m as ComponentMutator;
-      mutator.removeAssociatedItemId(note.uuid);
-      mutator.disassociateWithItem(note.uuid);
+      const mutator = m as ComponentMutator
+      mutator.removeAssociatedItemId(note.uuid)
+      mutator.disassociateWithItem(note.uuid)
     },
-  };
-  return transaction;
-};
+  }
+  return transaction
+}
 
 export const reloadFont = (monospaceFont?: boolean) => {
-  const root = document.querySelector(':root') as HTMLElement;
-  const propertyName = '--sn-stylekit-editor-font-family';
+  const root = document.querySelector(':root') as HTMLElement
+  const propertyName = '--sn-stylekit-editor-font-family'
   if (monospaceFont) {
-    root.style.setProperty(propertyName, 'var(--sn-stylekit-monospace-font)');
+    root.style.setProperty(propertyName, 'var(--sn-stylekit-monospace-font)')
   } else {
-    root.style.setProperty(propertyName, 'var(--sn-stylekit-sans-serif-font)');
+    root.style.setProperty(propertyName, 'var(--sn-stylekit-sans-serif-font)')
   }
-};
+}
 
 type State = {
-  availableStackComponents: SNComponent[];
-  editorComponentViewer?: ComponentViewer;
-  editorComponentViewerDidAlreadyReload?: boolean;
-  editorStateDidLoad: boolean;
-  editorTitle: string;
-  editorText: string;
-  isDesktop?: boolean;
-  lockText: string;
-  marginResizersEnabled?: boolean;
-  monospaceFont?: boolean;
-  noteLocked: boolean;
-  noteStatus?: NoteStatus;
-  saveError?: any;
-  showLockedIcon: boolean;
-  showProtectedWarning: boolean;
-  spellcheck: boolean;
-  stackComponentViewers: ComponentViewer[];
-  syncTakingTooLong: boolean;
+  availableStackComponents: SNComponent[]
+  editorComponentViewer?: ComponentViewer
+  editorComponentViewerDidAlreadyReload?: boolean
+  editorStateDidLoad: boolean
+  editorTitle: string
+  editorText: string
+  isDesktop?: boolean
+  lockText: string
+  marginResizersEnabled?: boolean
+  monospaceFont?: boolean
+  noteLocked: boolean
+  noteStatus?: NoteStatus
+  saveError?: boolean
+  showLockedIcon: boolean
+  showProtectedWarning: boolean
+  spellcheck: boolean
+  stackComponentViewers: ComponentViewer[]
+  syncTakingTooLong: boolean
   /** Setting to true then false will allow the main content textarea to be destroyed
    * then re-initialized. Used when reloading spellcheck status. */
-  textareaUnloading: boolean;
+  textareaUnloading: boolean
 
-  leftResizerWidth: number;
-  leftResizerOffset: number;
-  rightResizerWidth: number;
-  rightResizerOffset: number;
-};
+  leftResizerWidth: number
+  leftResizerOffset: number
+  rightResizerWidth: number
+  rightResizerOffset: number
+}
 
 interface Props {
-  application: WebApplication;
-  controller: NoteViewController;
+  application: WebApplication
+  controller: NoteViewController
 }
 
 export class NoteView extends PureComponent<Props, State> {
-  readonly controller!: NoteViewController;
+  readonly controller!: NoteViewController
 
-  private statusTimeout?: NodeJS.Timeout;
-  private lastEditorFocusEventSource?: EventSource;
-  onEditorComponentLoad?: () => void;
+  private statusTimeout?: NodeJS.Timeout
+  private lastEditorFocusEventSource?: EventSource
+  onEditorComponentLoad?: () => void
 
-  private scrollPosition = 0;
-  private removeTrashKeyObserver?: () => void;
-  private removeTabObserver?: () => void;
-  private removeComponentStreamObserver?: () => void;
-  private removeComponentManagerObserver?: () => void;
-  private removeInnerNoteObserver?: () => void;
+  private scrollPosition = 0
+  private removeTrashKeyObserver?: () => void
+  private removeTabObserver?: () => void
+  private removeComponentStreamObserver?: () => void
+  private removeComponentManagerObserver?: () => void
+  private removeInnerNoteObserver?: () => void
 
-  private protectionTimeoutId: ReturnType<typeof setTimeout> | null = null;
+  private protectionTimeoutId: ReturnType<typeof setTimeout> | null = null
 
-  private editorContentRef: RefObject<HTMLDivElement>;
+  private editorContentRef: RefObject<HTMLDivElement>
 
   constructor(props: Props) {
-    super(props, props.application);
-    this.controller = props.controller;
+    super(props, props.application)
+    this.controller = props.controller
 
     this.onEditorComponentLoad = () => {
-      this.application.getDesktopService().redoSearch();
-    };
+      this.application.getDesktopService().redoSearch()
+    }
 
-    this.debounceReloadEditorComponent = debounce(
-      this.debounceReloadEditorComponent.bind(this),
-      25
-    );
+    this.debounceReloadEditorComponent = debounce(this.debounceReloadEditorComponent.bind(this), 25)
 
-    this.textAreaChangeDebounceSave = debounce(
-      this.textAreaChangeDebounceSave,
-      TEXTAREA_DEBOUNCE
-    );
+    this.textAreaChangeDebounceSave = debounce(this.textAreaChangeDebounceSave, TEXTAREA_DEBOUNCE)
 
     this.state = {
       availableStackComponents: [],
@@ -181,169 +173,164 @@ export class NoteView extends PureComponent<Props, State> {
       leftResizerOffset: 0,
       rightResizerWidth: 0,
       rightResizerOffset: 0,
-    };
+    }
 
-    this.editorContentRef = createRef<HTMLDivElement>();
+    this.editorContentRef = createRef<HTMLDivElement>()
   }
 
-  deinit() {
-    this.removeComponentStreamObserver?.();
-    (this.removeComponentStreamObserver as unknown) = undefined;
-    this.removeInnerNoteObserver?.();
-    (this.removeInnerNoteObserver as unknown) = undefined;
-    this.removeComponentManagerObserver?.();
-    (this.removeComponentManagerObserver as unknown) = undefined;
-    this.removeTrashKeyObserver?.();
-    this.removeTrashKeyObserver = undefined;
-    this.clearNoteProtectionInactivityTimer();
-    this.removeTabObserver?.();
-    this.removeTabObserver = undefined;
-    this.onEditorComponentLoad = undefined;
-    this.statusTimeout = undefined;
-    (this.onPanelResizeFinish as unknown) = undefined;
-    super.deinit();
+  override deinit() {
+    this.removeComponentStreamObserver?.()
+    ;(this.removeComponentStreamObserver as unknown) = undefined
+    this.removeInnerNoteObserver?.()
+    ;(this.removeInnerNoteObserver as unknown) = undefined
+    this.removeComponentManagerObserver?.()
+    ;(this.removeComponentManagerObserver as unknown) = undefined
+    this.removeTrashKeyObserver?.()
+    this.removeTrashKeyObserver = undefined
+    this.clearNoteProtectionInactivityTimer()
+    this.removeTabObserver?.()
+    this.removeTabObserver = undefined
+    this.onEditorComponentLoad = undefined
+    this.statusTimeout = undefined
+    ;(this.onPanelResizeFinish as unknown) = undefined
+    super.deinit()
   }
 
   getState() {
-    return this.state as State;
+    return this.state as State
   }
 
   get note() {
-    return this.controller.note;
+    return this.controller.note
   }
 
-  componentDidMount(): void {
-    super.componentDidMount();
+  override componentDidMount(): void {
+    super.componentDidMount()
 
-    this.registerKeyboardShortcuts();
+    this.registerKeyboardShortcuts()
 
-    this.removeInnerNoteObserver =
-      this.controller.addNoteInnerValueChangeObserver((note, source) => {
-        this.onNoteInnerChange(note, source);
-      });
+    this.removeInnerNoteObserver = this.controller.addNoteInnerValueChangeObserver(
+      (note, source) => {
+        this.onNoteInnerChange(note, source)
+      },
+    )
 
     this.autorun(() => {
       this.setState({
         showProtectedWarning: this.appState.notes.showProtectedWarning,
-      });
-    });
+      })
+    })
 
-    this.reloadEditorComponent();
-    this.reloadStackComponents();
+    this.reloadEditorComponent().catch(console.error)
+    this.reloadStackComponents().catch(console.error)
 
-    const showProtectedWarning =
-      this.note.protected && !this.application.hasProtectionSources();
-    this.setShowProtectedOverlay(showProtectedWarning);
+    const showProtectedWarning = this.note.protected && !this.application.hasProtectionSources()
+    this.setShowProtectedOverlay(showProtectedWarning)
 
-    this.reloadPreferences();
+    this.reloadPreferences().catch(console.error)
 
     if (this.controller.isTemplateNote) {
       setTimeout(() => {
-        this.focusTitle();
-      });
+        this.focusTitle()
+      })
     }
   }
 
-  componentDidUpdate(_prevProps: Props, prevState: State): void {
+  override componentDidUpdate(_prevProps: Props, prevState: State): void {
     if (
       this.state.showProtectedWarning != undefined &&
       prevState.showProtectedWarning !== this.state.showProtectedWarning
     ) {
-      this.reloadEditorComponent();
+      this.reloadEditorComponent().catch(console.error)
     }
   }
 
   private onNoteInnerChange(note: SNNote, source: PayloadSource): void {
     if (note.uuid !== this.note.uuid) {
-      throw Error('Editor received changes for non-current note');
+      throw Error('Editor received changes for non-current note')
     }
 
     let title = this.state.editorTitle,
-      text = this.state.editorText;
+      text = this.state.editorText
     if (isPayloadSourceRetrieved(source)) {
-      title = note.title;
-      text = note.text;
+      title = note.title
+      text = note.text
     }
     if (!this.state.editorTitle) {
-      title = note.title;
+      title = note.title
     }
     if (!this.state.editorText) {
-      text = note.text;
+      text = note.text
     }
     if (title !== this.state.editorTitle) {
       this.setState({
         editorTitle: title,
-      });
+      })
     }
     if (text !== this.state.editorText) {
       this.setState({
         editorText: text,
-      });
+      })
     }
 
     if (note.locked !== this.state.noteLocked) {
       this.setState({
         noteLocked: note.locked,
-      });
+      })
     }
 
-    this.reloadSpellcheck();
+    this.reloadSpellcheck().catch(console.error)
 
     const isTemplateNoteInsertedToBeInteractableWithEditor =
-      source === PayloadSource.Constructor && note.dirty;
+      source === PayloadSource.Constructor && note.dirty
     if (isTemplateNoteInsertedToBeInteractableWithEditor) {
-      return;
+      return
     }
 
     if (note.lastSyncBegan || note.dirty) {
       if (note.lastSyncEnd) {
-        if (
-          note.dirty ||
-          note.lastSyncBegan!.getTime() > note.lastSyncEnd!.getTime()
-        ) {
-          this.showSavingStatus();
-        } else if (
-          this.state.noteStatus &&
-          note.lastSyncEnd!.getTime() > note.lastSyncBegan!.getTime()
-        ) {
-          this.showAllChangesSavedStatus();
+        const shouldShowSavingStatus =
+          note.lastSyncBegan && note.lastSyncBegan.getTime() > note.lastSyncEnd.getTime()
+        const shouldShowSavedStatus =
+          note.lastSyncBegan && note.lastSyncEnd.getTime() > note.lastSyncBegan.getTime()
+        if (note.dirty || shouldShowSavingStatus) {
+          this.showSavingStatus()
+        } else if (this.state.noteStatus && shouldShowSavedStatus) {
+          this.showAllChangesSavedStatus()
         }
       } else {
-        this.showSavingStatus();
+        this.showSavingStatus()
       }
     }
   }
 
-  componentWillUnmount(): void {
+  override componentWillUnmount(): void {
     if (this.state.editorComponentViewer) {
-      this.application.componentManager?.destroyComponentViewer(
-        this.state.editorComponentViewer
-      );
+      this.application.componentManager?.destroyComponentViewer(this.state.editorComponentViewer)
     }
-    super.componentWillUnmount();
+    super.componentWillUnmount()
   }
-  async onAppLaunch() {
-    await super.onAppLaunch();
-    this.streamItems();
+  override async onAppLaunch() {
+    await super.onAppLaunch()
+    this.streamItems()
   }
 
-  /** @override */
-  async onAppEvent(eventName: ApplicationEvent) {
+  override async onAppEvent(eventName: ApplicationEvent) {
     switch (eventName) {
       case ApplicationEvent.PreferencesChanged:
-        this.reloadPreferences();
-        break;
+        this.reloadPreferences().catch(console.error)
+        break
       case ApplicationEvent.HighLatencySync:
-        this.setState({ syncTakingTooLong: true });
-        break;
+        this.setState({ syncTakingTooLong: true })
+        break
       case ApplicationEvent.CompletedFullSync: {
-        this.setState({ syncTakingTooLong: false });
-        const isInErrorState = this.state.saveError;
+        this.setState({ syncTakingTooLong: false })
+        const isInErrorState = this.state.saveError
         /** if we're still dirty, don't change status, a sync is likely upcoming. */
         if (!this.note.dirty && isInErrorState) {
-          this.showAllChangesSavedStatus();
+          this.showAllChangesSavedStatus()
         }
-        break;
+        break
       }
       case ApplicationEvent.FailedSync:
         /**
@@ -352,71 +339,71 @@ export class NoteView extends PureComponent<Props, State> {
          * and we don't want to display an error here.
          */
         if (this.note.dirty) {
-          this.showErrorStatus();
+          this.showErrorStatus()
         }
-        break;
+        break
       case ApplicationEvent.LocalDatabaseWriteError:
         this.showErrorStatus({
           message: 'Offline Saving Issue',
           desc: 'Changes not saved',
-        });
-        break;
+        })
+        break
       case ApplicationEvent.UnprotectedSessionBegan: {
-        this.setShowProtectedOverlay(false);
-        break;
+        this.setShowProtectedOverlay(false)
+        break
       }
       case ApplicationEvent.UnprotectedSessionExpired: {
         if (this.note.protected) {
-          this.hideProtectedNoteIfInactive();
+          this.hideProtectedNoteIfInactive()
         }
-        break;
+        break
       }
     }
   }
 
   getSecondsElapsedSinceLastEdit(): number {
-    return (Date.now() - this.note.userModifiedDate.getTime()) / 1000;
+    return (Date.now() - this.note.userModifiedDate.getTime()) / 1000
   }
 
   hideProtectedNoteIfInactive(): void {
-    const secondsElapsedSinceLastEdit = this.getSecondsElapsedSinceLastEdit();
+    const secondsElapsedSinceLastEdit = this.getSecondsElapsedSinceLastEdit()
     if (
       secondsElapsedSinceLastEdit >=
       ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction
     ) {
-      this.setShowProtectedOverlay(true);
+      this.setShowProtectedOverlay(true)
     } else {
       const secondsUntilTheNextCheck =
         ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction -
-        secondsElapsedSinceLastEdit;
-      this.startNoteProtectionInactivityTimer(secondsUntilTheNextCheck);
+        secondsElapsedSinceLastEdit
+      this.startNoteProtectionInactivityTimer(secondsUntilTheNextCheck)
     }
   }
 
   startNoteProtectionInactivityTimer(timerDurationInSeconds: number): void {
-    this.clearNoteProtectionInactivityTimer();
+    this.clearNoteProtectionInactivityTimer()
     this.protectionTimeoutId = setTimeout(() => {
-      this.hideProtectedNoteIfInactive();
-    }, timerDurationInSeconds * 1000);
+      this.hideProtectedNoteIfInactive()
+    }, timerDurationInSeconds * 1000)
   }
 
   clearNoteProtectionInactivityTimer(): void {
     if (this.protectionTimeoutId) {
-      clearTimeout(this.protectionTimeoutId);
+      clearTimeout(this.protectionTimeoutId)
     }
   }
 
   dismissProtectedWarning = async () => {
-    let showNoteContents = true;
+    let showNoteContents = true
     if (this.application.hasProtectionSources()) {
-      showNoteContents = await this.application.authorizeNoteAccess(this.note);
+      showNoteContents = await this.application.authorizeNoteAccess(this.note)
     }
     if (!showNoteContents) {
-      return;
+      return
     }
-    this.setShowProtectedOverlay(false);
-    this.focusTitle();
-  };
+    this.setShowProtectedOverlay(false)
+    this.focusTitle()
+  }
 
   streamItems() {
     this.removeComponentStreamObserver = this.application.streamItems(
@@ -426,32 +413,34 @@ export class NoteView extends PureComponent<Props, State> {
           isPayloadSourceInternalChange(source) ||
           source === PayloadSource.InitialObserverRegistrationPush
         ) {
-          return;
+          return
         }
-        if (!this.note) return;
-        await this.reloadStackComponents();
-        this.debounceReloadEditorComponent();
-      }
-    );
+        if (!this.note) {
+          return
+        }
+        await this.reloadStackComponents()
+        this.debounceReloadEditorComponent()
+      },
+    )
   }
 
   private createComponentViewer(component: SNComponent) {
     const viewer = this.application.componentManager.createComponentViewer(
       component,
-      this.note.uuid
-    );
-    return viewer;
+      this.note.uuid,
+    )
+    return viewer
   }
 
   public editorComponentViewerRequestsReload = async (
     viewer: ComponentViewer,
-    force?: boolean
+    force?: boolean,
   ): Promise<void> => {
     if (this.state.editorComponentViewerDidAlreadyReload && !force) {
-      return;
+      return
     }
-    const component = viewer.component;
-    this.application.componentManager.destroyComponentViewer(viewer);
+    const component = viewer.component
+    this.application.componentManager.destroyComponentViewer(viewer)
     this.setState(
       {
         editorComponentViewer: undefined,
@@ -461,86 +450,78 @@ export class NoteView extends PureComponent<Props, State> {
         this.setState({
           editorComponentViewer: this.createComponentViewer(component),
           editorStateDidLoad: true,
-        });
-      }
-    );
-  };
+        })
+      },
+    )
+  }
 
   /**
    * Calling reloadEditorComponent successively without waiting for state to settle
    * can result in componentViewers being dealloced twice
    */
   debounceReloadEditorComponent() {
-    this.reloadEditorComponent();
+    this.reloadEditorComponent().catch(console.error)
   }
 
   private destroyCurrentEditorComponent() {
-    const currentComponentViewer = this.state.editorComponentViewer;
+    const currentComponentViewer = this.state.editorComponentViewer
     if (currentComponentViewer) {
-      this.application.componentManager.destroyComponentViewer(
-        currentComponentViewer
-      );
+      this.application.componentManager.destroyComponentViewer(currentComponentViewer)
       this.setState({
         editorComponentViewer: undefined,
-      });
+      })
     }
   }
 
   private async reloadEditorComponent() {
     if (this.state.showProtectedWarning) {
-      this.destroyCurrentEditorComponent();
-      return;
+      this.destroyCurrentEditorComponent()
+      return
     }
 
-    const newEditor = this.application.componentManager.editorForNote(
-      this.note
-    );
+    const newEditor = this.application.componentManager.editorForNote(this.note)
     /** Editors cannot interact with template notes so the note must be inserted */
     if (newEditor && this.controller.isTemplateNote) {
-      await this.controller.insertTemplatedNote();
-      this.associateComponentWithCurrentNote(newEditor);
+      await this.controller.insertTemplatedNote()
+      this.associateComponentWithCurrentNote(newEditor).catch(console.error)
     }
-    const currentComponentViewer = this.state.editorComponentViewer;
+    const currentComponentViewer = this.state.editorComponentViewer
 
     if (currentComponentViewer?.componentUuid !== newEditor?.uuid) {
       if (currentComponentViewer) {
-        this.destroyCurrentEditorComponent();
+        this.destroyCurrentEditorComponent()
       }
 
       if (newEditor) {
         this.setState({
           editorComponentViewer: this.createComponentViewer(newEditor),
           editorStateDidLoad: true,
-        });
+        })
       }
-      reloadFont(this.state.monospaceFont);
+      reloadFont(this.state.monospaceFont)
     } else {
       this.setState({
         editorStateDidLoad: true,
-      });
+      })
     }
   }
 
   hasAvailableExtensions() {
-    return (
-      this.application.actionsManager.extensionsInContextOfItem(this.note)
-        .length > 0
-    );
+    return this.application.actionsManager.extensionsInContextOfItem(this.note).length > 0
   }
 
   showSavingStatus() {
-    this.setStatus({ message: 'Saving…' }, false);
+    this.setStatus({ message: 'Saving…' }, false)
   }
 
   showAllChangesSavedStatus() {
     this.setState({
       saveError: false,
       syncTakingTooLong: false,
-    });
+    })
     this.setStatus({
-      message:
-        'All changes saved' + (this.application.noAccount() ? ' offline' : ''),
-    });
+      message: 'All changes saved' + (this.application.noAccount() ? ' offline' : ''),
+    })
   }
 
   showErrorStatus(error?: NoteStatus) {
@@ -548,116 +529,114 @@ export class NoteView extends PureComponent<Props, State> {
       error = {
         message: 'Sync Unreachable',
         desc: 'Changes saved offline',
-      };
+      }
     }
     this.setState({
       saveError: true,
       syncTakingTooLong: false,
-    });
-    this.setStatus(error);
+    })
+    this.setStatus(error)
   }
 
   setStatus(status: NoteStatus, wait = true) {
     if (this.statusTimeout) {
-      clearTimeout(this.statusTimeout);
+      clearTimeout(this.statusTimeout)
     }
     if (wait) {
       this.statusTimeout = setTimeout(() => {
         this.setState({
           noteStatus: status,
-        });
-      }, MINIMUM_STATUS_DURATION);
+        })
+      }, MINIMUM_STATUS_DURATION)
     } else {
       this.setState({
         noteStatus: status,
-      });
+      })
     }
   }
 
   cancelPendingSetStatus() {
     if (this.statusTimeout) {
-      clearTimeout(this.statusTimeout);
+      clearTimeout(this.statusTimeout)
     }
   }
 
-  onTextAreaChange = ({
-    currentTarget,
-  }: JSX.TargetedEvent<HTMLTextAreaElement, Event>) => {
-    const text = currentTarget.value;
+  onTextAreaChange = ({ currentTarget }: JSX.TargetedEvent<HTMLTextAreaElement, Event>) => {
+    const text = currentTarget.value
     this.setState({
       editorText: text,
-    });
-    this.textAreaChangeDebounceSave();
-  };
+    })
+    this.textAreaChangeDebounceSave()
+  }
 
   textAreaChangeDebounceSave = () => {
-    this.controller.save({
-      editorValues: {
-        title: this.state.editorTitle,
-        text: this.state.editorText,
-      },
-      isUserModified: true,
-    });
-  };
+    this.controller
+      .save({
+        editorValues: {
+          title: this.state.editorTitle,
+          text: this.state.editorText,
+        },
+        isUserModified: true,
+      })
+      .catch(console.error)
+  }
 
-  onTitleEnter = ({
-    currentTarget,
-  }: JSX.TargetedEvent<HTMLInputElement, Event>) => {
-    currentTarget.blur();
-    this.focusEditor();
-  };
+  onTitleEnter = ({ currentTarget }: JSX.TargetedEvent<HTMLInputElement, Event>) => {
+    currentTarget.blur()
+    this.focusEditor()
+  }
 
-  onTitleChange = ({
-    currentTarget,
-  }: JSX.TargetedEvent<HTMLInputElement, Event>) => {
-    const title = currentTarget.value;
+  onTitleChange = ({ currentTarget }: JSX.TargetedEvent<HTMLInputElement, Event>) => {
+    const title = currentTarget.value
     this.setState({
       editorTitle: title,
-    });
-    this.controller.save({
-      editorValues: {
-        title: title,
-        text: this.state.editorText,
-      },
-      isUserModified: true,
-      dontUpdatePreviews: true,
-    });
-  };
+    })
+    this.controller
+      .save({
+        editorValues: {
+          title: title,
+          text: this.state.editorText,
+        },
+        isUserModified: true,
+        dontUpdatePreviews: true,
+      })
+      .catch(console.error)
+  }
 
   focusEditor() {
-    const element = document.getElementById(ElementIds.NoteTextEditor);
+    const element = document.getElementById(ElementIds.NoteTextEditor)
     if (element) {
-      this.lastEditorFocusEventSource = EventSource.Script;
-      element.focus();
+      this.lastEditorFocusEventSource = EventSource.Script
+      element.focus()
     }
   }
 
   focusTitle() {
-    document.getElementById(ElementIds.NoteTitleEditor)?.focus();
+    document.getElementById(ElementIds.NoteTitleEditor)?.focus()
   }
 
   onContentFocus = () => {
-    this.application
-      .getAppState()
-      .editorDidFocus(this.lastEditorFocusEventSource!);
-    this.lastEditorFocusEventSource = undefined;
-  };
+    if (this.lastEditorFocusEventSource) {
+      this.application.getAppState().editorDidFocus(this.lastEditorFocusEventSource)
+    }
+    this.lastEditorFocusEventSource = undefined
+  }
 
   setShowProtectedOverlay(show: boolean) {
-    this.appState.notes.setShowProtectedWarning(show);
+    this.appState.notes.setShowProtectedWarning(show)
   }
 
   async deleteNote(permanently: boolean) {
     if (this.controller.isTemplateNote) {
-      this.application.alertService.alert(STRING_DELETE_PLACEHOLDER_ATTEMPT);
-      return;
+      this.application.alertService.alert(STRING_DELETE_PLACEHOLDER_ATTEMPT).catch(console.error)
+      return
     }
     if (this.note.locked) {
-      this.application.alertService.alert(STRING_DELETE_LOCKED_ATTEMPT);
-      return;
+      this.application.alertService.alert(STRING_DELETE_LOCKED_ATTEMPT).catch(console.error)
+      return
     }
-    const title = this.note.title.length ? `'${this.note.title}'` : 'this note';
-    const text = StringDeleteNote(title, permanently);
+    const title = this.note.title.length ? `'${this.note.title}'` : 'this note'
+    const text = StringDeleteNote(title, permanently)
     if (
       await confirmDialog({
         text,
@@ -665,93 +644,88 @@ export class NoteView extends PureComponent<Props, State> {
       })
     ) {
       if (permanently) {
-        this.performNoteDeletion(this.note);
+        this.performNoteDeletion(this.note)
       } else {
-        this.controller.save({
-          editorValues: {
-            title: this.state.editorTitle,
-            text: this.state.editorText,
-          },
-          bypassDebouncer: true,
-          dontUpdatePreviews: true,
-          customMutate: (mutator) => {
-            mutator.trashed = true;
-          },
-        });
+        this.controller
+          .save({
+            editorValues: {
+              title: this.state.editorTitle,
+              text: this.state.editorText,
+            },
+            bypassDebouncer: true,
+            dontUpdatePreviews: true,
+            customMutate: (mutator) => {
+              mutator.trashed = true
+            },
+          })
+          .catch(console.error)
       }
     }
   }
 
   performNoteDeletion(note: SNNote) {
-    this.application.mutator.deleteItem(note);
+    this.application.mutator.deleteItem(note).catch(console.error)
   }
 
-  onPanelResizeFinish = async (
-    width: number,
-    left: number,
-    isMaxWidth: boolean
-  ) => {
+  onPanelResizeFinish = async (width: number, left: number, isMaxWidth: boolean) => {
     if (isMaxWidth) {
-      await this.application.setPreference(PrefKey.EditorWidth, null);
+      await this.application.setPreference(PrefKey.EditorWidth, null)
     } else {
       if (width !== undefined && width !== null) {
-        await this.application.setPreference(PrefKey.EditorWidth, width);
+        await this.application.setPreference(PrefKey.EditorWidth, width)
       }
     }
     if (left !== undefined && left !== null) {
-      await this.application.setPreference(PrefKey.EditorLeft, left);
+      await this.application.setPreference(PrefKey.EditorLeft, left)
     }
-    this.application.sync.sync();
-  };
+    this.application.sync.sync().catch(console.error)
+  }
 
   async reloadSpellcheck() {
-    const spellcheck = this.appState.notes.getSpellcheckStateForNote(this.note);
+    const spellcheck = this.appState.notes.getSpellcheckStateForNote(this.note)
 
     if (spellcheck !== this.state.spellcheck) {
-      this.setState({ textareaUnloading: true });
-      this.setState({ textareaUnloading: false });
-      reloadFont(this.state.monospaceFont);
+      this.setState({ textareaUnloading: true })
+      this.setState({ textareaUnloading: false })
+      reloadFont(this.state.monospaceFont)
 
       this.setState({
         spellcheck,
-      });
+      })
     }
   }
 
   async reloadPreferences() {
-    const monospaceFont = this.application.getPreference(
-      PrefKey.EditorMonospaceEnabled,
-      true
-    );
+    const monospaceFont = this.application.getPreference(PrefKey.EditorMonospaceEnabled, true)
 
     const marginResizersEnabled = this.application.getPreference(
       PrefKey.EditorResizersEnabled,
-      true
-    );
+      true,
+    )
 
-    await this.reloadSpellcheck();
+    await this.reloadSpellcheck()
 
     this.setState({
       monospaceFont,
       marginResizersEnabled,
-    });
+    })
 
-    reloadFont(monospaceFont);
+    reloadFont(monospaceFont)
 
     if (marginResizersEnabled) {
-      const width = this.application.getPreference(PrefKey.EditorWidth, null);
+      const width = this.application.getPreference(PrefKey.EditorWidth, null)
       if (width != null) {
         this.setState({
           leftResizerWidth: width,
           rightResizerWidth: width,
-        });
+        })
       }
-      const left = this.application.getPreference(PrefKey.EditorLeft, null);
+      const left = this.application.getPreference(PrefKey.EditorLeft, null)
       if (left != null) {
         this.setState({
           leftResizerOffset: left,
           rightResizerOffset: left,
-        });
+        })
       }
     }
   }
@@ -762,74 +736,67 @@ export class NoteView extends PureComponent<Props, State> {
     const stackComponents = sortAlphabetically(
       this.application.componentManager
         .componentsForArea(ComponentArea.EditorStack)
-        .filter((component) => component.active)
-    );
+        .filter((component) => component.active),
+    )
     const enabledComponents = stackComponents.filter((component) => {
-      return component.isExplicitlyEnabledForItem(this.note.uuid);
-    });
+      return component.isExplicitlyEnabledForItem(this.note.uuid)
+    })
 
     const needsNewViewer = enabledComponents.filter((component) => {
       const hasExistingViewer = this.state.stackComponentViewers.find(
-        (viewer) => viewer.componentUuid === component.uuid
-      );
-      return !hasExistingViewer;
-    });
+        (viewer) => viewer.componentUuid === component.uuid,
+      )
+      return !hasExistingViewer
+    })
 
-    const needsDestroyViewer = this.state.stackComponentViewers.filter(
-      (viewer) => {
-        const viewerComponentExistsInEnabledComponents = enabledComponents.find(
-          (component) => {
-            return component.uuid === viewer.componentUuid;
-          }
-        );
-        return !viewerComponentExistsInEnabledComponents;
-      }
-    );
+    const needsDestroyViewer = this.state.stackComponentViewers.filter((viewer) => {
+      const viewerComponentExistsInEnabledComponents = enabledComponents.find((component) => {
+        return component.uuid === viewer.componentUuid
+      })
+      return !viewerComponentExistsInEnabledComponents
+    })
 
-    const newViewers: ComponentViewer[] = [];
+    const newViewers: ComponentViewer[] = []
     for (const component of needsNewViewer) {
       newViewers.push(
-        this.application.componentManager.createComponentViewer(
-          component,
-          this.note.uuid
-        )
-      );
+        this.application.componentManager.createComponentViewer(component, this.note.uuid),
+      )
     }
 
     for (const viewer of needsDestroyViewer) {
-      this.application.componentManager.destroyComponentViewer(viewer);
+      this.application.componentManager.destroyComponentViewer(viewer)
     }
     this.setState({
       availableStackComponents: stackComponents,
       stackComponentViewers: newViewers,
-    });
+    })
   }
 
   stackComponentExpanded = (component: SNComponent): boolean => {
     return !!this.state.stackComponentViewers.find(
-      (viewer) => viewer.componentUuid === component.uuid
-    );
-  };
+      (viewer) => viewer.componentUuid === component.uuid,
+    )
+  }
 
   toggleStackComponent = async (component: SNComponent) => {
     if (!component.isExplicitlyEnabledForItem(this.note.uuid)) {
-      await this.associateComponentWithCurrentNote(component);
+      await this.associateComponentWithCurrentNote(component)
     } else {
-      await this.disassociateComponentWithCurrentNote(component);
+      await this.disassociateComponentWithCurrentNote(component)
     }
-    this.application.sync.sync();
-  };
+    this.application.sync.sync().catch(console.error)
+  }
 
   async disassociateComponentWithCurrentNote(component: SNComponent) {
     return this.application.mutator.runTransactionalMutation(
-      transactionForDisassociateComponentWithCurrentNote(component, this.note)
-    );
+      transactionForDisassociateComponentWithCurrentNote(component, this.note),
+    )
   }
 
   async associateComponentWithCurrentNote(component: SNComponent) {
     return this.application.mutator.runTransactionalMutation(
-      transactionForAssociateComponentWithCurrentNote(component, this.note)
-    );
+      transactionForAssociateComponentWithCurrentNote(component, this.note),
+    )
   }
 
   registerKeyboardShortcuts() {
@@ -838,28 +805,24 @@ export class NoteView extends PureComponent<Props, State> {
       notTags: ['INPUT', 'TEXTAREA'],
       modifiers: [KeyboardModifier.Meta],
       onKeyDown: () => {
-        this.deleteNote(false);
+        this.deleteNote(false).catch(console.error)
       },
-    });
+    })
   }
 
   setScrollPosition = () => {
-    const editor = document.getElementById(
-      ElementIds.NoteTextEditor
-    ) as HTMLInputElement;
-    this.scrollPosition = editor.scrollTop;
-  };
+    const editor = document.getElementById(ElementIds.NoteTextEditor) as HTMLInputElement
+    this.scrollPosition = editor.scrollTop
+  }
 
   resetScrollPosition = () => {
-    const editor = document.getElementById(
-      ElementIds.NoteTextEditor
-    ) as HTMLInputElement;
-    editor.scrollTop = this.scrollPosition;
-  };
+    const editor = document.getElementById(ElementIds.NoteTextEditor) as HTMLInputElement
+    editor.scrollTop = this.scrollPosition
+  }
 
   onSystemEditorLoad = (ref: HTMLTextAreaElement | null) => {
     if (this.removeTabObserver || !ref) {
-      return;
+      return
     }
     /**
      * Insert 4 spaces when a tab key is pressed,
@@ -867,13 +830,11 @@ export class NoteView extends PureComponent<Props, State> {
      * If the shift key is pressed first, this event is
      * not fired.
      */
-    const editor = document.getElementById(
-      ElementIds.NoteTextEditor
-    ) as HTMLInputElement;
+    const editor = document.getElementById(ElementIds.NoteTextEditor) as HTMLInputElement
 
     if (!editor) {
-      console.error('Editor is not yet mounted; unable to add tab observer.');
-      return;
+      console.error('Editor is not yet mounted; unable to add tab observer.')
+      return
     }
 
     this.removeTabObserver = this.application.io.addKeyObserver({
@@ -881,70 +842,65 @@ export class NoteView extends PureComponent<Props, State> {
       key: KeyboardKey.Tab,
       onKeyDown: (event) => {
         if (document.hidden || this.note.locked || event.shiftKey) {
-          return;
+          return
         }
-        event.preventDefault();
+        event.preventDefault()
         /** Using document.execCommand gives us undo support */
-        const insertSuccessful = document.execCommand(
-          'insertText',
-          false,
-          '\t'
-        );
+        const insertSuccessful = document.execCommand('insertText', false, '\t')
         if (!insertSuccessful) {
           /** document.execCommand works great on Chrome/Safari but not Firefox */
-          const start = editor.selectionStart || 0;
-          const end = editor.selectionEnd || 0;
-          const spaces = '    ';
+          const start = editor.selectionStart || 0
+          const end = editor.selectionEnd || 0
+          const spaces = '    '
           /** Insert 4 spaces */
-          editor.value =
-            editor.value.substring(0, start) +
-            spaces +
-            editor.value.substring(end);
+          editor.value = editor.value.substring(0, start) + spaces + editor.value.substring(end)
           /** Place cursor 4 spaces away from where the tab key was pressed */
-          editor.selectionStart = editor.selectionEnd = start + 4;
+          editor.selectionStart = editor.selectionEnd = start + 4
         }
         this.setState({
           editorText: editor.value,
-        });
+        })
 
-        this.controller.save({
-          editorValues: {
-            title: this.state.editorTitle,
-            text: this.state.editorText,
-          },
-          bypassDebouncer: true,
-        });
+        this.controller
+          .save({
+            editorValues: {
+              title: this.state.editorTitle,
+              text: this.state.editorText,
+            },
+            bypassDebouncer: true,
+          })
+          .catch(console.error)
       },
-    });
+    })
 
-    editor.addEventListener('scroll', this.setScrollPosition);
-    editor.addEventListener('input', this.resetScrollPosition);
+    editor.addEventListener('scroll', this.setScrollPosition)
+    editor.addEventListener('input', this.resetScrollPosition)
 
     const observer = new MutationObserver((records) => {
       for (const record of records) {
-        const removedNodes = record.removedNodes.values();
+        const removedNodes = record.removedNodes.values()
         for (const node of removedNodes) {
           if (node === editor) {
-            this.removeTabObserver?.();
-            this.removeTabObserver = undefined;
-            editor.removeEventListener('scroll', this.setScrollPosition);
-            editor.removeEventListener('scroll', this.resetScrollPosition);
-            this.scrollPosition = 0;
+            this.removeTabObserver?.()
+            this.removeTabObserver = undefined
+            editor.removeEventListener('scroll', this.setScrollPosition)
+            editor.removeEventListener('scroll', this.resetScrollPosition)
+            this.scrollPosition = 0
           }
         }
       }
-    });
+    })
 
-    observer.observe(editor.parentElement as HTMLElement, { childList: true });
-  };
+    observer.observe(editor.parentElement as HTMLElement, { childList: true })
+  }
 
   ensureNoteIsInsertedBeforeUIAction = async () => {
     if (this.controller.isTemplateNote) {
-      await this.controller.insertTemplatedNote();
+      await this.controller.insertTemplatedNote()
     }
-  };
+  }
 
-  render() {
+  override render() {
     if (this.state.showProtectedWarning) {
       return (
         <div aria-label="Note" className="section editor sn-component">
@@ -958,7 +914,7 @@ export class NoteView extends PureComponent<Props, State> {
             </div>
           )}
         </div>
-      );
+      )
     }
 
     return (
@@ -972,29 +928,22 @@ export class NoteView extends PureComponent<Props, State> {
                   this.setState({
                     lockText: 'Note Editing Disabled',
                     showLockedIcon: true,
-                  });
+                  })
                 }}
                 onMouseOver={() => {
                   this.setState({
                     lockText: 'Enable editing',
                     showLockedIcon: false,
-                  });
+                  })
                 }}
               >
                 <div
-                  onClick={() =>
-                    this.appState.notes.setLockSelectedNotes(
-                      !this.state.noteLocked
-                    )
-                  }
+                  onClick={() => this.appState.notes.setLockSelectedNotes(!this.state.noteLocked)}
                   className="sk-app-bar-item"
                 >
                   <div className="sk-label warning flex items-center">
                     {this.state.showLockedIcon && (
-                      <Icon
-                        type="pencil-off"
-                        className="flex fill-current mr-2"
-                      />
+                      <Icon type="pencil-off" className="flex fill-current mr-2" />
                     )}
                     {this.state.lockText}
                   </div>
@@ -1006,11 +955,7 @@ export class NoteView extends PureComponent<Props, State> {
           {this.note && (
             <div id="editor-title-bar" className="section-title-bar w-full">
               <div className="flex items-center justify-between h-8">
-                <div
-                  className={
-                    (this.state.noteLocked ? 'locked' : '') + ' flex-grow'
-                  }
-                >
+                <div className={(this.state.noteLocked ? 'locked' : '') + ' flex-grow'}>
                   <div className="title overflow-auto">
                     <input
                       className="input"
@@ -1018,11 +963,9 @@ export class NoteView extends PureComponent<Props, State> {
                       id={ElementIds.NoteTitleEditor}
                       onChange={this.onTitleChange}
                       onFocus={(event) => {
-                        (event.target as HTMLTextAreaElement).select();
+                        ;(event.target as HTMLTextAreaElement).select()
                       }}
-                      onKeyUp={(event) =>
-                        event.keyCode == 13 && this.onTitleEnter(event)
-                      }
+                      onKeyUp={(event) => event.keyCode == 13 && this.onTitleEnter(event)}
                       spellcheck={false}
                       value={this.state.editorTitle}
                       autocomplete="off"
@@ -1034,9 +977,7 @@ export class NoteView extends PureComponent<Props, State> {
                     <div id="save-status">
                       <div
                         className={
-                          (this.state.syncTakingTooLong
-                            ? 'warning sk-bold '
-                            : '') +
+                          (this.state.syncTakingTooLong ? 'warning sk-bold ' : '') +
                           (this.state.saveError ? 'danger sk-bold ' : '') +
                           ' message'
                         }
@@ -1053,9 +994,7 @@ export class NoteView extends PureComponent<Props, State> {
                       <AttachedFilesButton
                         application={this.application}
                         appState={this.appState}
-                        onClickPreprocessing={
-                          this.ensureNoteIsInsertedBeforeUIAction
-                        }
+                        onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
                       />
                     </div>
                   )}
@@ -1063,25 +1002,19 @@ export class NoteView extends PureComponent<Props, State> {
                     <ChangeEditorButton
                       application={this.application}
                       appState={this.appState}
-                      onClickPreprocessing={
-                        this.ensureNoteIsInsertedBeforeUIAction
-                      }
+                      onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
                     />
                   </div>
                   <div className="mr-3">
                     <PinNoteButton
                       appState={this.appState}
-                      onClickPreprocessing={
-                        this.ensureNoteIsInsertedBeforeUIAction
-                      }
+                      onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
                     />
                   </div>
                   <NotesOptionsPanel
                     application={this.application}
                     appState={this.appState}
-                    onClickPreprocessing={
-                      this.ensureNoteIsInsertedBeforeUIAction
-                    }
+                    onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
                   />
                 </div>
               </div>
@@ -1094,8 +1027,7 @@ export class NoteView extends PureComponent<Props, State> {
             className={ElementIds.EditorContent}
             ref={this.editorContentRef}
           >
-            {this.state.marginResizersEnabled &&
-            this.editorContentRef.current ? (
+            {this.state.marginResizersEnabled && this.editorContentRef.current ? (
               <PanelResizer
                 minWidth={300}
                 hoverable={true}
@@ -1138,8 +1070,7 @@ export class NoteView extends PureComponent<Props, State> {
                 ></textarea>
               )}
 
-            {this.state.marginResizersEnabled &&
-            this.editorContentRef.current ? (
+            {this.state.marginResizersEnabled && this.editorContentRef.current ? (
               <PanelResizer
                 minWidth={300}
                 hoverable={true}
@@ -1156,30 +1087,24 @@ export class NoteView extends PureComponent<Props, State> {
 
           <div id="editor-pane-component-stack">
             {this.state.availableStackComponents.length > 0 && (
-              <div
-                id="component-stack-menu-bar"
-                className="sk-app-bar no-edges"
-              >
+              <div id="component-stack-menu-bar" className="sk-app-bar no-edges">
                 <div className="left">
                   {this.state.availableStackComponents.map((component) => {
                     return (
                       <div
                         key={component.uuid}
                         onClick={() => {
-                          this.toggleStackComponent(component);
+                          this.toggleStackComponent(component).catch(console.error)
                         }}
                         className="sk-app-bar-item"
                       >
                         <div className="sk-app-bar-item-column">
                           <div
                             className={
-                              (this.stackComponentExpanded(component) &&
-                              component.active
+                              (this.stackComponentExpanded(component) && component.active
                                 ? 'info '
                                 : '') +
-                              (!this.stackComponentExpanded(component)
-                                ? 'neutral '
-                                : '') +
+                              (!this.stackComponentExpanded(component) ? 'neutral ' : '') +
                               ' sk-circle small'
                             }
                           />
@@ -1188,7 +1113,7 @@ export class NoteView extends PureComponent<Props, State> {
                           <div className="sk-label">{component.name}</div>
                         </div>
                       </div>
-                    );
+                    )
                   })}
                 </div>
               </div>
@@ -1206,12 +1131,12 @@ export class NoteView extends PureComponent<Props, State> {
                       appState={this.appState}
                     />
                   </div>
-                );
+                )
               })}
             </div>
           </div>
         </div>
       </div>
-    );
+    )
   }
 }
diff --git a/app/assets/javascripts/Components/NotesContextMenu/index.tsx b/app/assets/javascripts/Components/NotesContextMenu/index.tsx
new file mode 100644
index 000000000..55afb1f1d
--- /dev/null
+++ b/app/assets/javascripts/Components/NotesContextMenu/index.tsx
@@ -0,0 +1,47 @@
+import { AppState } from '@/UIModels/AppState'
+import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
+import { useCloseOnClickOutside } from '@/Hooks/useCloseOnClickOutside'
+import { observer } from 'mobx-react-lite'
+import { NotesOptions } from '@/Components/NotesOptions/NotesOptions'
+import { useCallback, useEffect, useRef } from 'preact/hooks'
+import { WebApplication } from '@/UIModels/Application'
+
+type Props = {
+  application: WebApplication
+  appState: AppState
+}
+
+export const NotesContextMenu = observer(({ application, appState }: Props) => {
+  const { contextMenuOpen, contextMenuPosition, contextMenuMaxHeight } = appState.notes
+
+  const contextMenuRef = useRef<HTMLDivElement>(null)
+  const [closeOnBlur] = useCloseOnBlur(contextMenuRef, (open: boolean) =>
+    appState.notes.setContextMenuOpen(open),
+  )
+
+  useCloseOnClickOutside(contextMenuRef, () => appState.notes.setContextMenuOpen(false))
+
+  const reloadContextMenuLayout = useCallback(() => {
+    appState.notes.reloadContextMenuLayout()
+  }, [appState.notes])
+
+  useEffect(() => {
+    window.addEventListener('resize', reloadContextMenuLayout)
+    return () => {
+      window.removeEventListener('resize', reloadContextMenuLayout)
+    }
+  }, [reloadContextMenuLayout])
+
+  return contextMenuOpen ? (
+    <div
+      ref={contextMenuRef}
+      className="sn-dropdown min-w-80 max-h-120 max-w-xs flex flex-col pt-2 overflow-y-auto fixed"
+      style={{
+        ...contextMenuPosition,
+        maxHeight: contextMenuMaxHeight,
+      }}
+    >
+      <NotesOptions application={application} appState={appState} closeOnBlur={closeOnBlur} />
+    </div>
+  ) : null
+})
diff --git a/app/assets/javascripts/components/NotesListItem.tsx b/app/assets/javascripts/Components/NotesList/NotesListItem.tsx
similarity index 70%
rename from app/assets/javascripts/components/NotesListItem.tsx
rename to app/assets/javascripts/Components/NotesList/NotesListItem.tsx
index cd11880ca..d9f3c025b 100644
--- a/app/assets/javascripts/components/NotesListItem.tsx
+++ b/app/assets/javascripts/Components/NotesList/NotesListItem.tsx
@@ -1,43 +1,43 @@
-import { WebApplication } from '@/ui_models/application';
+import { WebApplication } from '@/UIModels/Application'
 import {
   CollectionSort,
   CollectionSortProperty,
   sanitizeHtmlString,
   SNNote,
-} from '@standardnotes/snjs';
-import { FunctionComponent } from 'preact';
-import { Icon } from './Icon';
+} from '@standardnotes/snjs'
+import { FunctionComponent } from 'preact'
+import { Icon } from '@/Components/Icon'
 
 type Props = {
-  application: WebApplication;
-  note: SNNote;
-  tags: string[];
-  hideDate: boolean;
-  hidePreview: boolean;
-  hideTags: boolean;
-  hideEditorIcon: boolean;
-  onClick: () => void;
-  onContextMenu: (e: MouseEvent) => void;
-  selected: boolean;
-  sortedBy?: CollectionSortProperty;
-};
+  application: WebApplication
+  note: SNNote
+  tags: string[]
+  hideDate: boolean
+  hidePreview: boolean
+  hideTags: boolean
+  hideEditorIcon: boolean
+  onClick: () => void
+  onContextMenu: (e: MouseEvent) => void
+  selected: boolean
+  sortedBy?: CollectionSortProperty
+}
 
 type NoteFlag = {
-  text: string;
-  class: 'info' | 'neutral' | 'warning' | 'success' | 'danger';
-};
+  text: string
+  class: 'info' | 'neutral' | 'warning' | 'success' | 'danger'
+}
 
 const flagsForNote = (note: SNNote) => {
-  const flags = [] as NoteFlag[];
+  const flags = [] as NoteFlag[]
   if (note.conflictOf) {
     flags.push({
       text: 'Conflicted Copy',
       class: 'danger',
-    });
+    })
   }
 
-  return flags;
-};
+  return flags
+}
 
 export const NotesListItem: FunctionComponent<Props> = ({
   application,
@@ -52,13 +52,13 @@ export const NotesListItem: FunctionComponent<Props> = ({
   sortedBy,
   tags,
 }) => {
-  const flags = flagsForNote(note);
-  const showModifiedDate = sortedBy === CollectionSort.UpdatedAt;
-  const editorForNote = application.componentManager.editorForNote(note);
-  const editorName = editorForNote?.name ?? 'Plain editor';
+  const flags = flagsForNote(note)
+  const showModifiedDate = sortedBy === CollectionSort.UpdatedAt
+  const editorForNote = application.componentManager.editorForNote(note)
+  const editorName = editorForNote?.name ?? 'Plain editor'
   const [icon, tint] = application.iconsController.getIconAndTintForEditor(
-    editorForNote?.identifier
-  );
+    editorForNote?.identifier,
+  )
 
   return (
     <div
@@ -101,22 +101,15 @@ export const NotesListItem: FunctionComponent<Props> = ({
         {!hideDate || note.protected ? (
           <div className="bottom-info faded">
             {note.protected && <span>Protected {hideDate ? '' : ' • '}</span>}
-            {!hideDate && showModifiedDate && (
-              <span>Modified {note.updatedAtString || 'Now'}</span>
-            )}
-            {!hideDate && !showModifiedDate && (
-              <span>{note.createdAtString || 'Now'}</span>
-            )}
+            {!hideDate && showModifiedDate && <span>Modified {note.updatedAtString || 'Now'}</span>}
+            {!hideDate && !showModifiedDate && <span>{note.createdAtString || 'Now'}</span>}
           </div>
         ) : null}
         {!hideTags && tags.length ? (
           <div className="tags-string">
             {tags.map((tag) => (
               <span className="tag color-foreground">
-                <Icon
-                  type="hashtag"
-                  className="sn-icon--small color-grey-1 mr-1"
-                />
+                <Icon type="hashtag" className="sn-icon--small color-grey-1 mr-1" />
                 <span>{tag}</span>
               </span>
             ))}
@@ -144,11 +137,7 @@ export const NotesListItem: FunctionComponent<Props> = ({
         )}
         {note.trashed && (
           <span title="Trashed">
-            <Icon
-              ariaLabel="Trashed"
-              type="trash-filled"
-              className="sn-icon--small color-danger"
-            />
+            <Icon ariaLabel="Trashed" type="trash-filled" className="sn-icon--small color-danger" />
           </span>
         )}
         {note.archived && (
@@ -162,14 +151,10 @@ export const NotesListItem: FunctionComponent<Props> = ({
         )}
         {note.pinned && (
           <span title="Pinned">
-            <Icon
-              ariaLabel="Pinned"
-              type="pin-filled"
-              className="sn-icon--small color-info"
-            />
+            <Icon ariaLabel="Pinned" type="pin-filled" className="sn-icon--small color-info" />
           </span>
         )}
       </div>
     </div>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/components/NotesListOptionsMenu.tsx b/app/assets/javascripts/Components/NotesList/NotesListOptionsMenu.tsx
similarity index 80%
rename from app/assets/javascripts/components/NotesListOptionsMenu.tsx
rename to app/assets/javascripts/Components/NotesList/NotesListOptionsMenu.tsx
index 9002ab7ee..850e0c99a 100644
--- a/app/assets/javascripts/components/NotesListOptionsMenu.tsx
+++ b/app/assets/javascripts/Components/NotesList/NotesListOptionsMenu.tsx
@@ -1,121 +1,117 @@
-import { WebApplication } from '@/ui_models/application';
-import {
-  CollectionSort,
-  CollectionSortProperty,
-  PrefKey,
-} from '@standardnotes/snjs';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { useState } from 'preact/hooks';
-import { Icon } from './Icon';
-import { Menu } from './Menu/Menu';
-import { MenuItem, MenuItemSeparator, MenuItemType } from './Menu/MenuItem';
+import { WebApplication } from '@/UIModels/Application'
+import { CollectionSort, CollectionSortProperty, PrefKey } from '@standardnotes/snjs'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { useState } from 'preact/hooks'
+import { Icon } from '@/Components/Icon'
+import { Menu } from '@/Components/Menu/Menu'
+import { MenuItem, MenuItemSeparator, MenuItemType } from '@/Components/Menu/MenuItem'
 
 type Props = {
-  application: WebApplication;
-  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void;
-  closeDisplayOptionsMenu: () => void;
-  isOpen: boolean;
-};
+  application: WebApplication
+  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
+  closeDisplayOptionsMenu: () => void
+  isOpen: boolean
+}
 
 export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
   ({ closeDisplayOptionsMenu, closeOnBlur, application, isOpen }) => {
     const [sortBy, setSortBy] = useState(() =>
-      application.getPreference(PrefKey.SortNotesBy, CollectionSort.CreatedAt)
-    );
+      application.getPreference(PrefKey.SortNotesBy, CollectionSort.CreatedAt),
+    )
     const [sortReverse, setSortReverse] = useState(() =>
-      application.getPreference(PrefKey.SortNotesReverse, false)
-    );
+      application.getPreference(PrefKey.SortNotesReverse, false),
+    )
     const [hidePreview, setHidePreview] = useState(() =>
-      application.getPreference(PrefKey.NotesHideNotePreview, false)
-    );
+      application.getPreference(PrefKey.NotesHideNotePreview, false),
+    )
     const [hideDate, setHideDate] = useState(() =>
-      application.getPreference(PrefKey.NotesHideDate, false)
-    );
+      application.getPreference(PrefKey.NotesHideDate, false),
+    )
     const [hideTags, setHideTags] = useState(() =>
-      application.getPreference(PrefKey.NotesHideTags, true)
-    );
+      application.getPreference(PrefKey.NotesHideTags, true),
+    )
     const [hidePinned, setHidePinned] = useState(() =>
-      application.getPreference(PrefKey.NotesHidePinned, false)
-    );
+      application.getPreference(PrefKey.NotesHidePinned, false),
+    )
     const [showArchived, setShowArchived] = useState(() =>
-      application.getPreference(PrefKey.NotesShowArchived, false)
-    );
+      application.getPreference(PrefKey.NotesShowArchived, false),
+    )
     const [showTrashed, setShowTrashed] = useState(() =>
-      application.getPreference(PrefKey.NotesShowTrashed, false)
-    );
+      application.getPreference(PrefKey.NotesShowTrashed, false),
+    )
     const [hideProtected, setHideProtected] = useState(() =>
-      application.getPreference(PrefKey.NotesHideProtected, false)
-    );
+      application.getPreference(PrefKey.NotesHideProtected, false),
+    )
     const [hideEditorIcon, setHideEditorIcon] = useState(() =>
-      application.getPreference(PrefKey.NotesHideEditorIcon, false)
-    );
+      application.getPreference(PrefKey.NotesHideEditorIcon, false),
+    )
 
     const toggleSortReverse = () => {
-      application.setPreference(PrefKey.SortNotesReverse, !sortReverse);
-      setSortReverse(!sortReverse);
-    };
+      application.setPreference(PrefKey.SortNotesReverse, !sortReverse).catch(console.error)
+      setSortReverse(!sortReverse)
+    }
 
     const toggleSortBy = (sort: CollectionSortProperty) => {
       if (sortBy === sort) {
-        toggleSortReverse();
+        toggleSortReverse()
       } else {
-        setSortBy(sort);
-        application.setPreference(PrefKey.SortNotesBy, sort);
+        setSortBy(sort)
+        application.setPreference(PrefKey.SortNotesBy, sort).catch(console.error)
       }
-    };
+    }
 
     const toggleSortByDateModified = () => {
-      toggleSortBy(CollectionSort.UpdatedAt);
-    };
+      toggleSortBy(CollectionSort.UpdatedAt)
+    }
 
     const toggleSortByCreationDate = () => {
-      toggleSortBy(CollectionSort.CreatedAt);
-    };
+      toggleSortBy(CollectionSort.CreatedAt)
+    }
 
     const toggleSortByTitle = () => {
-      toggleSortBy(CollectionSort.Title);
-    };
+      toggleSortBy(CollectionSort.Title)
+    }
 
     const toggleHidePreview = () => {
-      setHidePreview(!hidePreview);
-      application.setPreference(PrefKey.NotesHideNotePreview, !hidePreview);
-    };
+      setHidePreview(!hidePreview)
+      application.setPreference(PrefKey.NotesHideNotePreview, !hidePreview).catch(console.error)
+    }
 
     const toggleHideDate = () => {
-      setHideDate(!hideDate);
-      application.setPreference(PrefKey.NotesHideDate, !hideDate);
-    };
+      setHideDate(!hideDate)
+      application.setPreference(PrefKey.NotesHideDate, !hideDate).catch(console.error)
+    }
 
     const toggleHideTags = () => {
-      setHideTags(!hideTags);
-      application.setPreference(PrefKey.NotesHideTags, !hideTags);
-    };
+      setHideTags(!hideTags)
+      application.setPreference(PrefKey.NotesHideTags, !hideTags).catch(console.error)
+    }
 
     const toggleHidePinned = () => {
-      setHidePinned(!hidePinned);
-      application.setPreference(PrefKey.NotesHidePinned, !hidePinned);
-    };
+      setHidePinned(!hidePinned)
+      application.setPreference(PrefKey.NotesHidePinned, !hidePinned).catch(console.error)
+    }
 
     const toggleShowArchived = () => {
-      setShowArchived(!showArchived);
-      application.setPreference(PrefKey.NotesShowArchived, !showArchived);
-    };
+      setShowArchived(!showArchived)
+      application.setPreference(PrefKey.NotesShowArchived, !showArchived).catch(console.error)
+    }
 
     const toggleShowTrashed = () => {
-      setShowTrashed(!showTrashed);
-      application.setPreference(PrefKey.NotesShowTrashed, !showTrashed);
-    };
+      setShowTrashed(!showTrashed)
+      application.setPreference(PrefKey.NotesShowTrashed, !showTrashed).catch(console.error)
+    }
 
     const toggleHideProtected = () => {
-      setHideProtected(!hideProtected);
-      application.setPreference(PrefKey.NotesHideProtected, !hideProtected);
-    };
+      setHideProtected(!hideProtected)
+      application.setPreference(PrefKey.NotesHideProtected, !hideProtected).catch(console.error)
+    }
 
     const toggleEditorIcon = () => {
-      setHideEditorIcon(!hideEditorIcon);
-      application.setPreference(PrefKey.NotesHideEditorIcon, !hideEditorIcon);
-    };
+      setHideEditorIcon(!hideEditorIcon)
+      application.setPreference(PrefKey.NotesHideEditorIcon, !hideEditorIcon).catch(console.error)
+    }
 
     return (
       <Menu
@@ -128,9 +124,7 @@ export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
         closeMenu={closeDisplayOptionsMenu}
         isOpen={isOpen}
       >
-        <div className="px-3 my-1 text-xs font-semibold color-text uppercase">
-          Sort by
-        </div>
+        <div className="px-3 my-1 text-xs font-semibold color-text uppercase">Sort by</div>
         <MenuItem
           className="py-2"
           type={MenuItemType.RadioButton}
@@ -186,9 +180,7 @@ export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
           </div>
         </MenuItem>
         <MenuItemSeparator />
-        <div className="px-3 py-1 text-xs font-semibold color-text uppercase">
-          View
-        </div>
+        <div className="px-3 py-1 text-xs font-semibold color-text uppercase">View</div>
         <MenuItem
           type={MenuItemType.SwitchButton}
           className="py-1 hover:bg-contrast focus:bg-info-backdrop"
@@ -226,9 +218,7 @@ export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
           Show editor icon
         </MenuItem>
         <div className="h-1px my-2 bg-border"></div>
-        <div className="px-3 py-1 text-xs font-semibold color-text uppercase">
-          Other
-        </div>
+        <div className="px-3 py-1 text-xs font-semibold color-text uppercase">Other</div>
         <MenuItem
           type={MenuItemType.SwitchButton}
           className="py-1 hover:bg-contrast focus:bg-info-backdrop"
@@ -266,6 +256,6 @@ export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
           Show trashed notes
         </MenuItem>
       </Menu>
-    );
-  }
-);
+    )
+  },
+)
diff --git a/app/assets/javascripts/Components/NotesList/index.tsx b/app/assets/javascripts/Components/NotesList/index.tsx
new file mode 100644
index 000000000..24dbdaf7d
--- /dev/null
+++ b/app/assets/javascripts/Components/NotesList/index.tsx
@@ -0,0 +1,104 @@
+import { WebApplication } from '@/UIModels/Application'
+import { KeyboardKey } from '@/Services/IOService'
+import { AppState } from '@/UIModels/AppState'
+import { DisplayOptions } from '@/UIModels/AppState/NotesViewState'
+import { SNNote, SNTag } from '@standardnotes/snjs'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { NotesListItem } from './NotesListItem'
+import { FOCUSABLE_BUT_NOT_TABBABLE, NOTES_LIST_SCROLL_THRESHOLD } from '@/Constants'
+
+type Props = {
+  application: WebApplication
+  appState: AppState
+  notes: SNNote[]
+  selectedNotes: Record<string, SNNote>
+  displayOptions: DisplayOptions
+  paginate: () => void
+}
+
+export const NotesList: FunctionComponent<Props> = observer(
+  ({ application, appState, notes, selectedNotes, displayOptions, paginate }) => {
+    const { selectPreviousNote, selectNextNote } = appState.notesView
+    const { hideTags, hideDate, hideNotePreview, hideEditorIcon, sortBy } = displayOptions
+
+    const tagsForNote = (note: SNNote): string[] => {
+      if (hideTags) {
+        return []
+      }
+      const selectedTag = appState.selectedTag
+      if (!selectedTag) {
+        return []
+      }
+      const tags = appState.getNoteTags(note)
+      if (selectedTag instanceof SNTag && tags.length === 1) {
+        return []
+      }
+      return tags.map((tag) => tag.title).sort()
+    }
+
+    const openNoteContextMenu = (posX: number, posY: number) => {
+      appState.notes.setContextMenuClickLocation({
+        x: posX,
+        y: posY,
+      })
+      appState.notes.reloadContextMenuLayout()
+      appState.notes.setContextMenuOpen(true)
+    }
+
+    const onContextMenu = (note: SNNote, posX: number, posY: number) => {
+      appState.notes.selectNote(note.uuid, true).catch(console.error)
+      openNoteContextMenu(posX, posY)
+    }
+
+    const onScroll = (e: Event) => {
+      const offset = NOTES_LIST_SCROLL_THRESHOLD
+      const element = e.target as HTMLElement
+      if (element.scrollTop + element.offsetHeight >= element.scrollHeight - offset) {
+        paginate()
+      }
+    }
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === KeyboardKey.Up) {
+        e.preventDefault()
+        selectPreviousNote()
+      } else if (e.key === KeyboardKey.Down) {
+        e.preventDefault()
+        selectNextNote()
+      }
+    }
+
+    return (
+      <div
+        className="infinite-scroll focus:shadow-none focus:outline-none"
+        id="notes-scrollable"
+        onScroll={onScroll}
+        onKeyDown={onKeyDown}
+        tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
+      >
+        {notes.map((note) => (
+          <NotesListItem
+            application={application}
+            key={note.uuid}
+            note={note}
+            tags={tagsForNote(note)}
+            selected={!!selectedNotes[note.uuid]}
+            hideDate={hideDate}
+            hidePreview={hideNotePreview}
+            hideTags={hideTags}
+            hideEditorIcon={hideEditorIcon}
+            sortedBy={sortBy}
+            onClick={() => {
+              appState.notes.selectNote(note.uuid, true).catch(console.error)
+            }}
+            onContextMenu={(e: MouseEvent) => {
+              e.preventDefault()
+              onContextMenu(note, e.clientX, e.clientY)
+            }}
+          />
+        ))}
+      </div>
+    )
+  },
+)
diff --git a/app/assets/javascripts/Components/NotesOptions/AddTagOption.tsx b/app/assets/javascripts/Components/NotesOptions/AddTagOption.tsx
new file mode 100644
index 000000000..4bfdb8cc2
--- /dev/null
+++ b/app/assets/javascripts/Components/NotesOptions/AddTagOption.tsx
@@ -0,0 +1,111 @@
+import { AppState } from '@/UIModels/AppState'
+import { calculateSubmenuStyle, SubmenuStyle } from '@/Utils/CalculateSubmenuStyle'
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
+import { Icon } from '@/Components/Icon'
+import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
+
+type Props = {
+  appState: AppState
+}
+
+export const AddTagOption: FunctionComponent<Props> = observer(({ appState }) => {
+  const menuContainerRef = useRef<HTMLDivElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+  const menuButtonRef = useRef<HTMLButtonElement>(null)
+
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const [menuStyle, setMenuStyle] = useState<SubmenuStyle>({
+    right: 0,
+    bottom: 0,
+    maxHeight: 'auto',
+  })
+
+  const [closeOnBlur] = useCloseOnBlur(menuContainerRef, setIsMenuOpen)
+
+  const toggleTagsMenu = () => {
+    if (!isMenuOpen) {
+      const menuPosition = calculateSubmenuStyle(menuButtonRef.current)
+      if (menuPosition) {
+        setMenuStyle(menuPosition)
+      }
+    }
+
+    setIsMenuOpen(!isMenuOpen)
+  }
+
+  const recalculateMenuStyle = useCallback(() => {
+    const newMenuPosition = calculateSubmenuStyle(menuButtonRef.current, menuRef.current)
+
+    if (newMenuPosition) {
+      setMenuStyle(newMenuPosition)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (isMenuOpen) {
+      setTimeout(() => {
+        recalculateMenuStyle()
+      })
+    }
+  }, [isMenuOpen, recalculateMenuStyle])
+
+  return (
+    <div ref={menuContainerRef}>
+      <Disclosure open={isMenuOpen} onChange={toggleTagsMenu}>
+        <DisclosureButton
+          onKeyDown={(event) => {
+            if (event.key === 'Escape') {
+              setIsMenuOpen(false)
+            }
+          }}
+          onBlur={closeOnBlur}
+          ref={menuButtonRef}
+          className="sn-dropdown-item justify-between"
+        >
+          <div className="flex items-center">
+            <Icon type="hashtag" className="mr-2 color-neutral" />
+            Add tag
+          </div>
+          <Icon type="chevron-right" className="color-neutral" />
+        </DisclosureButton>
+        <DisclosurePanel
+          ref={menuRef}
+          onKeyDown={(event) => {
+            if (event.key === 'Escape') {
+              setIsMenuOpen(false)
+              menuButtonRef.current?.focus()
+            }
+          }}
+          style={{
+            ...menuStyle,
+            position: 'fixed',
+          }}
+          className="sn-dropdown min-w-80 flex flex-col py-2 max-h-120 max-w-xs fixed overflow-y-auto"
+        >
+          {appState.tags.tags.map((tag) => (
+            <button
+              key={tag.title}
+              className="sn-dropdown-item sn-dropdown-item--no-icon max-w-80"
+              onBlur={closeOnBlur}
+              onClick={() => {
+                appState.notes.isTagInSelectedNotes(tag)
+                  ? appState.notes.removeTagFromSelectedNotes(tag).catch(console.error)
+                  : appState.notes.addTagToSelectedNotes(tag).catch(console.error)
+              }}
+            >
+              <span
+                className={`whitespace-nowrap overflow-hidden overflow-ellipsis
+                      ${appState.notes.isTagInSelectedNotes(tag) ? 'font-bold' : ''}`}
+              >
+                {appState.noteTags.getLongTitle(tag)}
+              </span>
+            </button>
+          ))}
+        </DisclosurePanel>
+      </Disclosure>
+    </div>
+  )
+})
diff --git a/app/assets/javascripts/components/NotesOptions/ChangeEditorOption.tsx b/app/assets/javascripts/Components/NotesOptions/ChangeEditorOption.tsx
similarity index 57%
rename from app/assets/javascripts/components/NotesOptions/ChangeEditorOption.tsx
rename to app/assets/javascripts/Components/NotesOptions/ChangeEditorOption.tsx
index efa4f98c4..f93774b23 100644
--- a/app/assets/javascripts/components/NotesOptions/ChangeEditorOption.tsx
+++ b/app/assets/javascripts/Components/NotesOptions/ChangeEditorOption.tsx
@@ -1,89 +1,79 @@
-import { KeyboardKey } from '@/services/ioService';
-import { WebApplication } from '@/ui_models/application';
-import { AppState } from '@/ui_models/app_state';
-import {
-  Disclosure,
-  DisclosureButton,
-  DisclosurePanel,
-} from '@reach/disclosure';
-import { IconType, SNComponent, SNNote } from '@standardnotes/snjs';
-import { FunctionComponent } from 'preact';
-import { useEffect, useRef, useState } from 'preact/hooks';
-import { Icon } from '../Icon';
-import { ChangeEditorMenu } from './changeEditor/ChangeEditorMenu';
-import {
-  calculateSubmenuStyle,
-  SubmenuStyle,
-} from '@/utils/calculateSubmenuStyle';
-import { useCloseOnBlur } from '../utils';
+import { KeyboardKey } from '@/Services/IOService'
+import { WebApplication } from '@/UIModels/Application'
+import { AppState } from '@/UIModels/AppState'
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
+import { IconType, SNComponent, SNNote } from '@standardnotes/snjs'
+import { FunctionComponent } from 'preact'
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { Icon } from '@/Components/Icon'
+import { ChangeEditorMenu } from '@/Components/ChangeEditor/ChangeEditorMenu'
+import { calculateSubmenuStyle, SubmenuStyle } from '@/Utils/CalculateSubmenuStyle'
+import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
 
 type ChangeEditorOptionProps = {
-  appState: AppState;
-  application: WebApplication;
-  note: SNNote;
-};
+  appState: AppState
+  application: WebApplication
+  note: SNNote
+}
 
 type AccordionMenuGroup<T> = {
-  icon?: IconType;
-  iconClassName?: string;
-  title: string;
-  items: Array<T>;
-};
+  icon?: IconType
+  iconClassName?: string
+  title: string
+  items: Array<T>
+}
 
 export type EditorMenuItem = {
-  name: string;
-  component?: SNComponent;
-  isEntitled: boolean;
-};
+  name: string
+  component?: SNComponent
+  isEntitled: boolean
+}
 
-export type EditorMenuGroup = AccordionMenuGroup<EditorMenuItem>;
+export type EditorMenuGroup = AccordionMenuGroup<EditorMenuItem>
 
 export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
   application,
   note,
 }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [isVisible, setIsVisible] = useState(false);
+  const [isOpen, setIsOpen] = useState(false)
+  const [isVisible, setIsVisible] = useState(false)
   const [menuStyle, setMenuStyle] = useState<SubmenuStyle>({
     right: 0,
     bottom: 0,
     maxHeight: 'auto',
-  });
-  const menuContainerRef = useRef<HTMLDivElement>(null);
-  const menuRef = useRef<HTMLDivElement>(null);
-  const buttonRef = useRef<HTMLButtonElement>(null);
+  })
+  const menuContainerRef = useRef<HTMLDivElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+  const buttonRef = useRef<HTMLButtonElement>(null)
 
   const [closeOnBlur] = useCloseOnBlur(menuContainerRef, (open: boolean) => {
-    setIsOpen(open);
-    setIsVisible(open);
-  });
+    setIsOpen(open)
+    setIsVisible(open)
+  })
 
   const toggleChangeEditorMenu = () => {
     if (!isOpen) {
-      const menuStyle = calculateSubmenuStyle(buttonRef.current);
+      const menuStyle = calculateSubmenuStyle(buttonRef.current)
       if (menuStyle) {
-        setMenuStyle(menuStyle);
+        setMenuStyle(menuStyle)
       }
     }
 
-    setIsOpen(!isOpen);
-  };
+    setIsOpen(!isOpen)
+  }
 
   useEffect(() => {
     if (isOpen) {
       setTimeout(() => {
-        const newMenuStyle = calculateSubmenuStyle(
-          buttonRef.current,
-          menuRef.current
-        );
+        const newMenuStyle = calculateSubmenuStyle(buttonRef.current, menuRef.current)
 
         if (newMenuStyle) {
-          setMenuStyle(newMenuStyle);
-          setIsVisible(true);
+          setMenuStyle(newMenuStyle)
+          setIsVisible(true)
         }
-      });
+      })
     }
-  }, [isOpen]);
+  }, [isOpen])
 
   return (
     <div ref={menuContainerRef}>
@@ -91,7 +81,7 @@ export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
         <DisclosureButton
           onKeyDown={(event) => {
             if (event.key === KeyboardKey.Escape) {
-              setIsOpen(false);
+              setIsOpen(false)
             }
           }}
           onBlur={closeOnBlur}
@@ -108,8 +98,8 @@ export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
           ref={menuRef}
           onKeyDown={(event) => {
             if (event.key === KeyboardKey.Escape) {
-              setIsOpen(false);
-              buttonRef.current?.focus();
+              setIsOpen(false)
+              buttonRef.current?.focus()
             }
           }}
           style={{
@@ -125,12 +115,12 @@ export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
               note={note}
               isVisible={isVisible}
               closeMenu={() => {
-                setIsOpen(false);
+                setIsOpen(false)
               }}
             />
           )}
         </DisclosurePanel>
       </Disclosure>
     </div>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/components/NotesOptions/ListedActionsOption.tsx b/app/assets/javascripts/Components/NotesOptions/ListedActionsOption.tsx
similarity index 68%
rename from app/assets/javascripts/components/NotesOptions/ListedActionsOption.tsx
rename to app/assets/javascripts/Components/NotesOptions/ListedActionsOption.tsx
index f9cdf0c49..674292c16 100644
--- a/app/assets/javascripts/components/NotesOptions/ListedActionsOption.tsx
+++ b/app/assets/javascripts/Components/NotesOptions/ListedActionsOption.tsx
@@ -1,37 +1,30 @@
-import { WebApplication } from '@/ui_models/application';
-import {
-  calculateSubmenuStyle,
-  SubmenuStyle,
-} from '@/utils/calculateSubmenuStyle';
-import {
-  Disclosure,
-  DisclosureButton,
-  DisclosurePanel,
-} from '@reach/disclosure';
-import { Action, ListedAccount, SNNote } from '@standardnotes/snjs';
-import { Fragment, FunctionComponent } from 'preact';
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
-import { Icon } from '../Icon';
-import { useCloseOnBlur } from '../utils';
+import { WebApplication } from '@/UIModels/Application'
+import { calculateSubmenuStyle, SubmenuStyle } from '@/Utils/CalculateSubmenuStyle'
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
+import { Action, ListedAccount, SNNote } from '@standardnotes/snjs'
+import { Fragment, FunctionComponent } from 'preact'
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
+import { Icon } from '@/Components/Icon'
+import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
 
 type Props = {
-  application: WebApplication;
-  note: SNNote;
-};
+  application: WebApplication
+  note: SNNote
+}
 
 type ListedMenuGroup = {
-  name: string;
-  account: ListedAccount;
-  actions: Action[];
-};
+  name: string
+  account: ListedAccount
+  actions: Action[]
+}
 
 type ListedMenuItemProps = {
-  action: Action;
-  note: SNNote;
-  group: ListedMenuGroup;
-  application: WebApplication;
-  reloadMenuGroup: (group: ListedMenuGroup) => Promise<void>;
-};
+  action: Action
+  note: SNNote
+  group: ListedMenuGroup
+  application: WebApplication
+  reloadMenuGroup: (group: ListedMenuGroup) => Promise<void>
+}
 
 const ListedMenuItem: FunctionComponent<ListedMenuItemProps> = ({
   action,
@@ -40,21 +33,21 @@ const ListedMenuItem: FunctionComponent<ListedMenuItemProps> = ({
   group,
   reloadMenuGroup,
 }) => {
-  const [isRunning, setIsRunning] = useState(false);
+  const [isRunning, setIsRunning] = useState(false)
 
   const handleClick = async () => {
     if (isRunning) {
-      return;
+      return
     }
 
-    setIsRunning(true);
+    setIsRunning(true)
 
-    await application.actionsManager.runAction(action, note);
+    await application.actionsManager.runAction(action, note)
 
-    setIsRunning(false);
+    setIsRunning(false)
 
-    reloadMenuGroup(group);
-  };
+    reloadMenuGroup(group).catch(console.error)
+  }
 
   return (
     <button
@@ -74,109 +67,100 @@ const ListedMenuItem: FunctionComponent<ListedMenuItemProps> = ({
       </div>
       {isRunning && <div className="sk-spinner spinner-info w-3 h-3" />}
     </button>
-  );
-};
+  )
+}
 
 type ListedActionsMenuProps = {
-  application: WebApplication;
-  note: SNNote;
-  recalculateMenuStyle: () => void;
-};
+  application: WebApplication
+  note: SNNote
+  recalculateMenuStyle: () => void
+}
 
 const ListedActionsMenu: FunctionComponent<ListedActionsMenuProps> = ({
   application,
   note,
   recalculateMenuStyle,
 }) => {
-  const [menuGroups, setMenuGroups] = useState<ListedMenuGroup[]>([]);
-  const [isFetchingAccounts, setIsFetchingAccounts] = useState(true);
+  const [menuGroups, setMenuGroups] = useState<ListedMenuGroup[]>([])
+  const [isFetchingAccounts, setIsFetchingAccounts] = useState(true)
 
   const reloadMenuGroup = async (group: ListedMenuGroup) => {
-    const updatedAccountInfo = await application.getListedAccountInfo(
-      group.account,
-      note.uuid
-    );
+    const updatedAccountInfo = await application.getListedAccountInfo(group.account, note.uuid)
 
     if (!updatedAccountInfo) {
-      return;
+      return
     }
 
     const updatedGroup: ListedMenuGroup = {
       name: updatedAccountInfo.display_name,
       account: group.account,
       actions: updatedAccountInfo.actions as Action[],
-    };
+    }
 
     const updatedGroups = menuGroups.map((group) => {
       if (updatedGroup.account.authorId === group.account.authorId) {
-        return updatedGroup;
+        return updatedGroup
       } else {
-        return group;
+        return group
       }
-    });
+    })
 
-    setMenuGroups(updatedGroups);
-  };
+    setMenuGroups(updatedGroups)
+  }
 
   useEffect(() => {
     const fetchListedAccounts = async () => {
       if (!application.hasAccount()) {
-        setIsFetchingAccounts(false);
-        return;
+        setIsFetchingAccounts(false)
+        return
       }
 
       try {
-        const listedAccountEntries = await application.getListedAccounts();
+        const listedAccountEntries = await application.getListedAccounts()
 
         if (!listedAccountEntries.length) {
-          throw new Error('No Listed accounts found');
+          throw new Error('No Listed accounts found')
         }
 
-        const menuGroups: ListedMenuGroup[] = [];
+        const menuGroups: ListedMenuGroup[] = []
 
         await Promise.all(
           listedAccountEntries.map(async (account) => {
-            const accountInfo = await application.getListedAccountInfo(
-              account,
-              note.uuid
-            );
+            const accountInfo = await application.getListedAccountInfo(account, note.uuid)
 
             if (accountInfo) {
               menuGroups.push({
                 name: accountInfo.display_name,
                 account,
                 actions: accountInfo.actions as Action[],
-              });
+              })
             } else {
               menuGroups.push({
                 name: account.authorId,
                 account,
                 actions: [],
-              });
+              })
             }
-          })
-        );
+          }),
+        )
 
         setMenuGroups(
           menuGroups.sort((a, b) => {
-            return a.name.toString().toLowerCase() <
-              b.name.toString().toLowerCase()
-              ? -1
-              : 1;
-          })
-        );
+            return a.name.toString().toLowerCase() < b.name.toString().toLowerCase() ? -1 : 1
+          }),
+        )
       } catch (err) {
-        console.error(err);
+        console.error(err)
       } finally {
-        setIsFetchingAccounts(false);
+        setIsFetchingAccounts(false)
         setTimeout(() => {
-          recalculateMenuStyle();
-        });
+          recalculateMenuStyle()
+        })
       }
-    };
+    }
 
-    fetchListedAccounts();
-  }, [application, note.uuid, recalculateMenuStyle]);
+    void fetchListedAccounts()
+  }, [application, note.uuid, recalculateMenuStyle])
 
   return (
     <>
@@ -208,9 +192,7 @@ const ListedActionsMenu: FunctionComponent<ListedActionsMenuProps> = ({
                   />
                 ))
               ) : (
-                <div className="px-3 py-2 color-grey-0 select-none">
-                  No actions available
-                </div>
+                <div className="px-3 py-2 color-grey-0 select-none">No actions available</div>
               )}
             </Fragment>
           ))}
@@ -218,61 +200,53 @@ const ListedActionsMenu: FunctionComponent<ListedActionsMenuProps> = ({
       ) : null}
       {!isFetchingAccounts && !menuGroups.length ? (
         <div className="w-full flex items-center justify-center px-4 py-6">
-          <div className="color-grey-0 select-none">
-            No Listed accounts found
-          </div>
+          <div className="color-grey-0 select-none">No Listed accounts found</div>
         </div>
       ) : null}
     </>
-  );
-};
+  )
+}
 
-export const ListedActionsOption: FunctionComponent<Props> = ({
-  application,
-  note,
-}) => {
-  const menuContainerRef = useRef<HTMLDivElement>(null);
-  const menuRef = useRef<HTMLDivElement>(null);
-  const menuButtonRef = useRef<HTMLButtonElement>(null);
+export const ListedActionsOption: FunctionComponent<Props> = ({ application, note }) => {
+  const menuContainerRef = useRef<HTMLDivElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+  const menuButtonRef = useRef<HTMLButtonElement>(null)
 
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [menuStyle, setMenuStyle] = useState<SubmenuStyle>({
     right: 0,
     bottom: 0,
     maxHeight: 'auto',
-  });
+  })
 
-  const [closeOnBlur] = useCloseOnBlur(menuContainerRef, setIsMenuOpen);
+  const [closeOnBlur] = useCloseOnBlur(menuContainerRef, setIsMenuOpen)
 
   const toggleListedMenu = () => {
     if (!isMenuOpen) {
-      const menuPosition = calculateSubmenuStyle(menuButtonRef.current);
+      const menuPosition = calculateSubmenuStyle(menuButtonRef.current)
       if (menuPosition) {
-        setMenuStyle(menuPosition);
+        setMenuStyle(menuPosition)
       }
     }
 
-    setIsMenuOpen(!isMenuOpen);
-  };
+    setIsMenuOpen(!isMenuOpen)
+  }
 
   const recalculateMenuStyle = useCallback(() => {
-    const newMenuPosition = calculateSubmenuStyle(
-      menuButtonRef.current,
-      menuRef.current
-    );
+    const newMenuPosition = calculateSubmenuStyle(menuButtonRef.current, menuRef.current)
 
     if (newMenuPosition) {
-      setMenuStyle(newMenuPosition);
+      setMenuStyle(newMenuPosition)
     }
-  }, []);
+  }, [])
 
   useEffect(() => {
     if (isMenuOpen) {
       setTimeout(() => {
-        recalculateMenuStyle();
-      });
+        recalculateMenuStyle()
+      })
     }
-  }, [isMenuOpen, recalculateMenuStyle]);
+  }, [isMenuOpen, recalculateMenuStyle])
 
   return (
     <div ref={menuContainerRef}>
@@ -306,5 +280,5 @@ export const ListedActionsOption: FunctionComponent<Props> = ({
         </DisclosurePanel>
       </Disclosure>
     </div>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/components/NotesOptions/NotesOptions.tsx b/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx
similarity index 66%
rename from app/assets/javascripts/components/NotesOptions/NotesOptions.tsx
rename to app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx
index 3c0c8da56..f27cf6ff5 100644
--- a/app/assets/javascripts/components/NotesOptions/NotesOptions.tsx
+++ b/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx
@@ -1,116 +1,109 @@
-import { AppState } from '@/ui_models/app_state';
-import { Icon } from '../Icon';
-import { Switch } from '../Switch';
-import { observer } from 'mobx-react-lite';
-import { useState, useEffect, useMemo } from 'preact/hooks';
-import { SNApplication, SNNote } from '@standardnotes/snjs';
-import { WebApplication } from '@/ui_models/application';
-import { KeyboardModifier } from '@/services/ioService';
-import { FunctionComponent } from 'preact';
-import { ChangeEditorOption } from './ChangeEditorOption';
-import { BYTES_IN_ONE_MEGABYTE } from '@/constants';
-import { ListedActionsOption } from './ListedActionsOption';
-import { AddTagOption } from './AddTagOption';
-import { addToast, dismissToast, ToastType } from '@standardnotes/stylekit';
+import { AppState } from '@/UIModels/AppState'
+import { Icon } from '@/Components/Icon'
+import { Switch } from '@/Components/Switch'
+import { observer } from 'mobx-react-lite'
+import { useState, useEffect, useMemo } from 'preact/hooks'
+import { SNApplication, SNNote } from '@standardnotes/snjs'
+import { WebApplication } from '@/UIModels/Application'
+import { KeyboardModifier } from '@/Services/IOService'
+import { FunctionComponent } from 'preact'
+import { ChangeEditorOption } from './ChangeEditorOption'
+import { BYTES_IN_ONE_MEGABYTE } from '@/Constants'
+import { ListedActionsOption } from './ListedActionsOption'
+import { AddTagOption } from './AddTagOption'
+import { addToast, dismissToast, ToastType } from '@standardnotes/stylekit'
 
 export type NotesOptionsProps = {
-  application: WebApplication;
-  appState: AppState;
-  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void;
-};
+  application: WebApplication
+  appState: AppState
+  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
+}
 
 type DeletePermanentlyButtonProps = {
-  closeOnBlur: NotesOptionsProps['closeOnBlur'];
-  onClick: () => void;
-};
+  closeOnBlur: NotesOptionsProps['closeOnBlur']
+  onClick: () => void
+}
 
-const DeletePermanentlyButton = ({
-  closeOnBlur,
-  onClick,
-}: DeletePermanentlyButtonProps) => (
+const DeletePermanentlyButton = ({ closeOnBlur, onClick }: DeletePermanentlyButtonProps) => (
   <button onBlur={closeOnBlur} className="sn-dropdown-item" onClick={onClick}>
     <Icon type="close" className="color-danger mr-2" />
     <span className="color-danger">Delete permanently</span>
   </button>
-);
+)
 
-const iconClass = 'color-neutral mr-2';
+const iconClass = 'color-neutral mr-2'
 
 const getWordCount = (text: string) => {
   if (text.trim().length === 0) {
-    return 0;
+    return 0
   }
-  return text.split(/\s+/).length;
-};
+  return text.split(/\s+/).length
+}
 
 const getParagraphCount = (text: string) => {
   if (text.trim().length === 0) {
-    return 0;
+    return 0
   }
-  return text.replace(/\n$/gm, '').split(/\n/).length;
-};
+  return text.replace(/\n$/gm, '').split(/\n/).length
+}
 
 const countNoteAttributes = (text: string) => {
   try {
-    JSON.parse(text);
+    JSON.parse(text)
     return {
       characters: 'N/A',
       words: 'N/A',
       paragraphs: 'N/A',
-    };
+    }
   } catch {
-    const characters = text.length;
-    const words = getWordCount(text);
-    const paragraphs = getParagraphCount(text);
+    const characters = text.length
+    const words = getWordCount(text)
+    const paragraphs = getParagraphCount(text)
 
     return {
       characters,
       words,
       paragraphs,
-    };
+    }
   }
-};
+}
 
 const calculateReadTime = (words: number) => {
-  const timeToRead = Math.round(words / 200);
+  const timeToRead = Math.round(words / 200)
   if (timeToRead === 0) {
-    return '< 1 minute';
+    return '< 1 minute'
   } else {
-    return `${timeToRead} ${timeToRead > 1 ? 'minutes' : 'minute'}`;
+    return `${timeToRead} ${timeToRead > 1 ? 'minutes' : 'minute'}`
   }
-};
+}
 
 const formatDate = (date: Date | undefined) => {
-  if (!date) return;
-  return `${date.toDateString()} ${date.toLocaleTimeString()}`;
-};
+  if (!date) {
+    return
+  }
+  return `${date.toDateString()} ${date.toLocaleTimeString()}`
+}
 
 const NoteAttributes: FunctionComponent<{
-  application: SNApplication;
-  note: SNNote;
+  application: SNApplication
+  note: SNNote
 }> = ({ application, note }) => {
   const { words, characters, paragraphs } = useMemo(
     () => countNoteAttributes(note.text),
-    [note.text]
-  );
+    [note.text],
+  )
 
   const readTime = useMemo(
     () => (typeof words === 'number' ? calculateReadTime(words) : 'N/A'),
-    [words]
-  );
+    [words],
+  )
 
-  const dateLastModified = useMemo(
-    () => formatDate(note.userModifiedDate),
-    [note.userModifiedDate]
-  );
+  const dateLastModified = useMemo(() => formatDate(note.userModifiedDate), [note.userModifiedDate])
 
-  const dateCreated = useMemo(
-    () => formatDate(note.created_at),
-    [note.created_at]
-  );
+  const dateCreated = useMemo(() => formatDate(note.created_at), [note.created_at])
 
-  const editor = application.componentManager.editorForNote(note);
-  const format = editor?.package_info?.file_type || 'txt';
+  const editor = application.componentManager.editorForNote(note)
+  const format = editor?.package_info?.file_type || 'txt'
 
   return (
     <div className="px-3 pt-1.5 pb-2.5 text-xs color-neutral font-medium">
@@ -134,29 +127,27 @@ const NoteAttributes: FunctionComponent<{
         <span className="font-semibold">Note ID:</span> {note.uuid}
       </div>
     </div>
-  );
-};
+  )
+}
 
 const SpellcheckOptions: FunctionComponent<{
-  appState: AppState;
-  note: SNNote;
+  appState: AppState
+  note: SNNote
 }> = ({ appState, note }) => {
-  const editor = appState.application.componentManager.editorForNote(note);
-  const spellcheckControllable = Boolean(
-    !editor || editor.package_info.spellcheckControl
-  );
+  const editor = appState.application.componentManager.editorForNote(note)
+  const spellcheckControllable = Boolean(!editor || editor.package_info.spellcheckControl)
   const noteSpellcheck = !spellcheckControllable
     ? true
     : note
     ? appState.notes.getSpellcheckStateForNote(note)
-    : undefined;
+    : undefined
 
   return (
     <div className="flex flex-col">
       <button
         className="sn-dropdown-item justify-between px-3 py-1"
         onClick={() => {
-          appState.notes.toggleGlobalSpellcheckForNote(note);
+          appState.notes.toggleGlobalSpellcheckForNote(note).catch(console.error)
         }}
         disabled={!spellcheckControllable}
       >
@@ -164,122 +155,110 @@ const SpellcheckOptions: FunctionComponent<{
           <Icon type="notes" className={iconClass} />
           Spellcheck
         </span>
-        <Switch
-          className="px-0"
-          checked={noteSpellcheck}
-          disabled={!spellcheckControllable}
-        />
+        <Switch className="px-0" checked={noteSpellcheck} disabled={!spellcheckControllable} />
       </button>
       {!spellcheckControllable && (
-        <p className="text-xs px-3 py-1.5">
-          Spellcheck cannot be controlled for this editor.
-        </p>
+        <p className="text-xs px-3 py-1.5">Spellcheck cannot be controlled for this editor.</p>
       )}
     </div>
-  );
-};
+  )
+}
 
-const NOTE_SIZE_WARNING_THRESHOLD = 0.5 * BYTES_IN_ONE_MEGABYTE;
+const NOTE_SIZE_WARNING_THRESHOLD = 0.5 * BYTES_IN_ONE_MEGABYTE
 
 const NoteSizeWarning: FunctionComponent<{
-  note: SNNote;
+  note: SNNote
 }> = ({ note }) =>
-  new Blob([note.text]).size > NOTE_SIZE_WARNING_THRESHOLD ? (
+  (new Blob([note.text]).size > NOTE_SIZE_WARNING_THRESHOLD ? (
     <div className="flex items-center px-3 py-3.5 relative bg-note-size-warning">
-      <Icon
-        type="warning"
-        className="color-accessory-tint-3 flex-shrink-0 mr-3"
-      />
+      <Icon type="warning" className="color-accessory-tint-3 flex-shrink-0 mr-3" />
       <div className="color-grey-0 select-none leading-140% max-w-80%">
-        This note may have trouble syncing to the mobile application due to its
-        size.
+        This note may have trouble syncing to the mobile application due to its size.
       </div>
     </div>
-  ) : null;
+  ) : null)
 
 export const NotesOptions = observer(
   ({ application, appState, closeOnBlur }: NotesOptionsProps) => {
-    const [altKeyDown, setAltKeyDown] = useState(false);
+    const [altKeyDown, setAltKeyDown] = useState(false)
 
     const toggleOn = (condition: (note: SNNote) => boolean) => {
-      const notesMatchingAttribute = notes.filter(condition);
-      const notesNotMatchingAttribute = notes.filter(
-        (note) => !condition(note)
-      );
-      return notesMatchingAttribute.length > notesNotMatchingAttribute.length;
-    };
+      const notesMatchingAttribute = notes.filter(condition)
+      const notesNotMatchingAttribute = notes.filter((note) => !condition(note))
+      return notesMatchingAttribute.length > notesNotMatchingAttribute.length
+    }
 
-    const notes = Object.values(appState.notes.selectedNotes);
-    const hidePreviews = toggleOn((note) => note.hidePreview);
-    const locked = toggleOn((note) => note.locked);
-    const protect = toggleOn((note) => note.protected);
-    const archived = notes.some((note) => note.archived);
-    const unarchived = notes.some((note) => !note.archived);
-    const trashed = notes.some((note) => note.trashed);
-    const notTrashed = notes.some((note) => !note.trashed);
-    const pinned = notes.some((note) => note.pinned);
-    const unpinned = notes.some((note) => !note.pinned);
+    const notes = Object.values(appState.notes.selectedNotes)
+    const hidePreviews = toggleOn((note) => note.hidePreview)
+    const locked = toggleOn((note) => note.locked)
+    const protect = toggleOn((note) => note.protected)
+    const archived = notes.some((note) => note.archived)
+    const unarchived = notes.some((note) => !note.archived)
+    const trashed = notes.some((note) => note.trashed)
+    const notTrashed = notes.some((note) => !note.trashed)
+    const pinned = notes.some((note) => note.pinned)
+    const unpinned = notes.some((note) => !note.pinned)
 
     useEffect(() => {
       const removeAltKeyObserver = application.io.addKeyObserver({
         modifiers: [KeyboardModifier.Alt],
         onKeyDown: () => {
-          setAltKeyDown(true);
+          setAltKeyDown(true)
         },
         onKeyUp: () => {
-          setAltKeyDown(false);
+          setAltKeyDown(false)
         },
-      });
+      })
 
       return () => {
-        removeAltKeyObserver();
-      };
-    }, [application]);
+        removeAltKeyObserver()
+      }
+    }, [application])
 
     const getNoteFileName = (note: SNNote): string => {
-      const editor = application.componentManager.editorForNote(note);
-      const format = editor?.package_info?.file_type || 'txt';
-      return `${note.title}.${format}`;
-    };
+      const editor = application.componentManager.editorForNote(note)
+      const format = editor?.package_info?.file_type || 'txt'
+      return `${note.title}.${format}`
+    }
 
     const downloadSelectedItems = async () => {
       if (notes.length === 1) {
         application
           .getArchiveService()
-          .downloadData(new Blob([notes[0].text]), getNoteFileName(notes[0]));
-        return;
+          .downloadData(new Blob([notes[0].text]), getNoteFileName(notes[0]))
+        return
       }
 
       if (notes.length > 1) {
         const loadingToastId = addToast({
           type: ToastType.Loading,
           message: `Exporting ${notes.length} notes...`,
-        });
+        })
         await application.getArchiveService().downloadDataAsZip(
           notes.map((note) => {
             return {
               filename: getNoteFileName(note),
               content: new Blob([note.text]),
-            };
-          })
-        );
-        dismissToast(loadingToastId);
+            }
+          }),
+        )
+        dismissToast(loadingToastId)
         addToast({
           type: ToastType.Success,
           message: `Exported ${notes.length} notes`,
-        });
+        })
       }
-    };
+    }
 
     const duplicateSelectedItems = () => {
       notes.forEach((note) => {
-        application.mutator.duplicateItem(note);
-      });
-    };
+        application.mutator.duplicateItem(note).catch(console.error)
+      })
+    }
 
     const openRevisionHistoryModal = () => {
-      appState.notes.setShowRevisionHistoryModal(true);
-    };
+      appState.notes.setShowRevisionHistoryModal(true)
+    }
 
     return (
       <>
@@ -299,7 +278,7 @@ export const NotesOptions = observer(
         <button
           className="sn-dropdown-item justify-between"
           onClick={() => {
-            appState.notes.setLockSelectedNotes(!locked);
+            appState.notes.setLockSelectedNotes(!locked)
           }}
           onBlur={closeOnBlur}
         >
@@ -312,7 +291,7 @@ export const NotesOptions = observer(
         <button
           className="sn-dropdown-item justify-between"
           onClick={() => {
-            appState.notes.setHideSelectedNotePreviews(!hidePreviews);
+            appState.notes.setHideSelectedNotePreviews(!hidePreviews)
           }}
           onBlur={closeOnBlur}
         >
@@ -325,7 +304,7 @@ export const NotesOptions = observer(
         <button
           className="sn-dropdown-item justify-between"
           onClick={() => {
-            appState.notes.setProtectSelectedNotes(!protect);
+            appState.notes.setProtectSelectedNotes(!protect).catch(console.error)
           }}
           onBlur={closeOnBlur}
         >
@@ -338,11 +317,7 @@ export const NotesOptions = observer(
         {notes.length === 1 && (
           <>
             <div className="min-h-1px my-2 bg-border"></div>
-            <ChangeEditorOption
-              appState={appState}
-              application={application}
-              note={notes[0]}
-            />
+            <ChangeEditorOption appState={appState} application={application} note={notes[0]} />
           </>
         )}
         <div className="min-h-1px my-2 bg-border"></div>
@@ -352,7 +327,7 @@ export const NotesOptions = observer(
             onBlur={closeOnBlur}
             className="sn-dropdown-item"
             onClick={() => {
-              appState.notes.setPinSelectedNotes(true);
+              appState.notes.setPinSelectedNotes(true)
             }}
           >
             <Icon type="pin" className={iconClass} />
@@ -364,26 +339,18 @@ export const NotesOptions = observer(
             onBlur={closeOnBlur}
             className="sn-dropdown-item"
             onClick={() => {
-              appState.notes.setPinSelectedNotes(false);
+              appState.notes.setPinSelectedNotes(false)
             }}
           >
             <Icon type="unpin" className={iconClass} />
             Unpin
           </button>
         )}
-        <button
-          onBlur={closeOnBlur}
-          className="sn-dropdown-item"
-          onClick={downloadSelectedItems}
-        >
+        <button onBlur={closeOnBlur} className="sn-dropdown-item" onClick={downloadSelectedItems}>
           <Icon type="download" className={iconClass} />
           Export
         </button>
-        <button
-          onBlur={closeOnBlur}
-          className="sn-dropdown-item"
-          onClick={duplicateSelectedItems}
-        >
+        <button onBlur={closeOnBlur} className="sn-dropdown-item" onClick={duplicateSelectedItems}>
           <Icon type="copy" className={iconClass} />
           Duplicate
         </button>
@@ -392,7 +359,7 @@ export const NotesOptions = observer(
             onBlur={closeOnBlur}
             className="sn-dropdown-item"
             onClick={() => {
-              appState.notes.setArchiveSelectedNotes(true);
+              appState.notes.setArchiveSelectedNotes(true).catch(console.error)
             }}
           >
             <Icon type="archive" className={iconClass} />
@@ -404,7 +371,7 @@ export const NotesOptions = observer(
             onBlur={closeOnBlur}
             className="sn-dropdown-item"
             onClick={() => {
-              appState.notes.setArchiveSelectedNotes(false);
+              appState.notes.setArchiveSelectedNotes(false).catch(console.error)
             }}
           >
             <Icon type="unarchive" className={iconClass} />
@@ -416,7 +383,7 @@ export const NotesOptions = observer(
             <DeletePermanentlyButton
               closeOnBlur={closeOnBlur}
               onClick={async () => {
-                await appState.notes.deleteNotesPermanently();
+                await appState.notes.deleteNotesPermanently()
               }}
             />
           ) : (
@@ -424,7 +391,7 @@ export const NotesOptions = observer(
               onBlur={closeOnBlur}
               className="sn-dropdown-item"
               onClick={async () => {
-                await appState.notes.setTrashSelectedNotes(true);
+                await appState.notes.setTrashSelectedNotes(true)
               }}
             >
               <Icon type="trash" className={iconClass} />
@@ -437,7 +404,7 @@ export const NotesOptions = observer(
               onBlur={closeOnBlur}
               className="sn-dropdown-item"
               onClick={async () => {
-                await appState.notes.setTrashSelectedNotes(false);
+                await appState.notes.setTrashSelectedNotes(false)
               }}
             >
               <Icon type="restore" className={iconClass} />
@@ -446,23 +413,21 @@ export const NotesOptions = observer(
             <DeletePermanentlyButton
               closeOnBlur={closeOnBlur}
               onClick={async () => {
-                await appState.notes.deleteNotesPermanently();
+                await appState.notes.deleteNotesPermanently()
               }}
             />
             <button
               onBlur={closeOnBlur}
               className="sn-dropdown-item"
               onClick={async () => {
-                await appState.notes.emptyTrash();
+                await appState.notes.emptyTrash()
               }}
             >
               <div className="flex items-start">
                 <Icon type="trash-sweep" className="color-danger mr-2" />
                 <div className="flex-row">
                   <div className="color-danger">Empty Trash</div>
-                  <div className="text-xs">
-                    {appState.notes.trashedNotesCount} notes in Trash
-                  </div>
+                  <div className="text-xs">{appState.notes.trashedNotesCount} notes in Trash</div>
                 </div>
               </div>
             </button>
@@ -480,6 +445,6 @@ export const NotesOptions = observer(
           </>
         ) : null}
       </>
-    );
-  }
-);
+    )
+  },
+)
diff --git a/app/assets/javascripts/components/NotesOptionsPanel.tsx b/app/assets/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx
similarity index 51%
rename from app/assets/javascripts/components/NotesOptionsPanel.tsx
rename to app/assets/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx
index 4719c2b13..f88309025 100644
--- a/app/assets/javascripts/components/NotesOptionsPanel.tsx
+++ b/app/assets/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx
@@ -1,66 +1,60 @@
-import { AppState } from '@/ui_models/app_state';
-import { Icon } from './Icon';
-import VisuallyHidden from '@reach/visually-hidden';
-import { useCloseOnBlur } from './utils';
-import {
-  Disclosure,
-  DisclosureButton,
-  DisclosurePanel,
-} from '@reach/disclosure';
-import { useRef, useState } from 'preact/hooks';
-import { observer } from 'mobx-react-lite';
-import { NotesOptions } from './NotesOptions/NotesOptions';
-import { WebApplication } from '@/ui_models/application';
-import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/constants';
+import { AppState } from '@/UIModels/AppState'
+import { Icon } from '@/Components/Icon'
+import VisuallyHidden from '@reach/visually-hidden'
+import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
+import { useRef, useState } from 'preact/hooks'
+import { observer } from 'mobx-react-lite'
+import { NotesOptions } from './NotesOptions'
+import { WebApplication } from '@/UIModels/Application'
+import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants'
 
 type Props = {
-  application: WebApplication;
-  appState: AppState;
-  onClickPreprocessing?: () => Promise<void>;
-};
+  application: WebApplication
+  appState: AppState
+  onClickPreprocessing?: () => Promise<void>
+}
 
 export const NotesOptionsPanel = observer(
   ({ application, appState, onClickPreprocessing }: Props) => {
-    const [open, setOpen] = useState(false);
+    const [open, setOpen] = useState(false)
     const [position, setPosition] = useState({
       top: 0,
       right: 0,
-    });
-    const [maxHeight, setMaxHeight] = useState<number | 'auto'>('auto');
-    const buttonRef = useRef<HTMLButtonElement>(null);
-    const panelRef = useRef<HTMLDivElement>(null);
-    const [closeOnBlur] = useCloseOnBlur(panelRef, setOpen);
+    })
+    const [maxHeight, setMaxHeight] = useState<number | 'auto'>('auto')
+    const buttonRef = useRef<HTMLButtonElement>(null)
+    const panelRef = useRef<HTMLDivElement>(null)
+    const [closeOnBlur] = useCloseOnBlur(panelRef, setOpen)
 
     return (
       <Disclosure
         open={open}
         onChange={async () => {
-          const rect = buttonRef.current?.getBoundingClientRect();
+          const rect = buttonRef.current?.getBoundingClientRect()
           if (rect) {
-            const { clientHeight } = document.documentElement;
-            const footerElementRect = document
-              .getElementById('footer-bar')
-              ?.getBoundingClientRect();
-            const footerHeightInPx = footerElementRect?.height;
+            const { clientHeight } = document.documentElement
+            const footerElementRect = document.getElementById('footer-bar')?.getBoundingClientRect()
+            const footerHeightInPx = footerElementRect?.height
             if (footerHeightInPx) {
-              setMaxHeight(clientHeight - rect.bottom - footerHeightInPx - 2);
+              setMaxHeight(clientHeight - rect.bottom - footerHeightInPx - 2)
             }
             setPosition({
               top: rect.bottom,
               right: document.body.clientWidth - rect.right,
-            });
-            const newOpenState = !open;
+            })
+            const newOpenState = !open
             if (newOpenState && onClickPreprocessing) {
-              await onClickPreprocessing();
+              await onClickPreprocessing()
             }
-            setOpen(newOpenState);
+            setOpen(newOpenState)
           }
         }}
       >
         <DisclosureButton
           onKeyDown={(event) => {
             if (event.key === 'Escape') {
-              setOpen(false);
+              setOpen(false)
             }
           }}
           onBlur={closeOnBlur}
@@ -73,8 +67,8 @@ export const NotesOptionsPanel = observer(
         <DisclosurePanel
           onKeyDown={(event) => {
             if (event.key === 'Escape') {
-              setOpen(false);
-              buttonRef.current?.focus();
+              setOpen(false)
+              buttonRef.current?.focus()
             }
           }}
           ref={panelRef}
@@ -87,14 +81,10 @@ export const NotesOptionsPanel = observer(
           tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
         >
           {open && (
-            <NotesOptions
-              application={application}
-              appState={appState}
-              closeOnBlur={closeOnBlur}
-            />
+            <NotesOptions application={application} appState={appState} closeOnBlur={closeOnBlur} />
           )}
         </DisclosurePanel>
       </Disclosure>
-    );
-  }
-);
+    )
+  },
+)
diff --git a/app/assets/javascripts/Components/NotesView/index.tsx b/app/assets/javascripts/Components/NotesView/index.tsx
new file mode 100644
index 000000000..305b4d4ef
--- /dev/null
+++ b/app/assets/javascripts/Components/NotesView/index.tsx
@@ -0,0 +1,260 @@
+import { KeyboardKey, KeyboardModifier } from '@/Services/IOService'
+import { WebApplication } from '@/UIModels/Application'
+import { AppState } from '@/UIModels/AppState'
+import { PANEL_NAME_NOTES } from '@/Constants'
+import { PrefKey } from '@standardnotes/snjs'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { NoAccountWarning } from '@/Components/NoAccountWarning'
+import { NotesList } from '@/Components/NotesList'
+import { NotesListOptionsMenu } from '@/Components/NotesList/NotesListOptionsMenu'
+import { SearchOptions } from '@/Components/SearchOptions'
+import { PanelSide, ResizeFinishCallback, PanelResizer, PanelResizeType } from '@/Components/PanelResizer'
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
+import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
+
+type Props = {
+  application: WebApplication
+  appState: AppState
+}
+
+export const NotesView: FunctionComponent<Props> = observer(({ application, appState }) => {
+  const notesViewPanelRef = useRef<HTMLDivElement>(null)
+  const displayOptionsMenuRef = useRef<HTMLDivElement>(null)
+
+  const {
+    completedFullSync,
+    createNewNote,
+    displayOptions,
+    noteFilterText,
+    optionsSubtitle,
+    panelTitle,
+    renderedNotes,
+    selectedNotes,
+    setNoteFilterText,
+    searchBarElement,
+    selectNextNote,
+    selectPreviousNote,
+    onFilterEnter,
+    handleFilterTextChanged,
+    clearFilterText,
+    paginate,
+    panelWidth,
+  } = appState.notesView
+
+  const [showDisplayOptionsMenu, setShowDisplayOptionsMenu] = useState(false)
+  const [focusedSearch, setFocusedSearch] = useState(false)
+
+  const [closeDisplayOptMenuOnBlur] = useCloseOnBlur(
+    displayOptionsMenuRef,
+    setShowDisplayOptionsMenu,
+  )
+
+  useEffect(() => {
+    handleFilterTextChanged()
+  }, [noteFilterText, handleFilterTextChanged])
+
+  useEffect(() => {
+    /**
+     * In the browser we're not allowed to override cmd/ctrl + n, so we have to
+     * use Control modifier as well. These rules don't apply to desktop, but
+     * probably better to be consistent.
+     */
+    const newNoteKeyObserver = application.io.addKeyObserver({
+      key: 'n',
+      modifiers: [KeyboardModifier.Meta, KeyboardModifier.Ctrl],
+      onKeyDown: (event) => {
+        event.preventDefault()
+        createNewNote().catch(console.error)
+      },
+    })
+
+    const nextNoteKeyObserver = application.io.addKeyObserver({
+      key: KeyboardKey.Down,
+      elements: [document.body, ...(searchBarElement ? [searchBarElement] : [])],
+      onKeyDown: () => {
+        if (searchBarElement === document.activeElement) {
+          searchBarElement?.blur()
+        }
+        selectNextNote()
+      },
+    })
+
+    const previousNoteKeyObserver = application.io.addKeyObserver({
+      key: KeyboardKey.Up,
+      element: document.body,
+      onKeyDown: () => {
+        selectPreviousNote()
+      },
+    })
+
+    const searchKeyObserver = application.io.addKeyObserver({
+      key: 'f',
+      modifiers: [KeyboardModifier.Meta, KeyboardModifier.Shift],
+      onKeyDown: () => {
+        if (searchBarElement) {
+          searchBarElement.focus()
+        }
+      },
+    })
+
+    return () => {
+      newNoteKeyObserver()
+      nextNoteKeyObserver()
+      previousNoteKeyObserver()
+      searchKeyObserver()
+    }
+  }, [application.io, createNewNote, searchBarElement, selectNextNote, selectPreviousNote])
+
+  const onNoteFilterTextChange = (e: Event) => {
+    setNoteFilterText((e.target as HTMLInputElement).value)
+  }
+
+  const onSearchFocused = () => setFocusedSearch(true)
+  const onSearchBlurred = () => setFocusedSearch(false)
+
+  const onNoteFilterKeyUp = (e: KeyboardEvent) => {
+    if (e.key === KeyboardKey.Enter) {
+      onFilterEnter()
+    }
+  }
+
+  const panelResizeFinishCallback: ResizeFinishCallback = (
+    width,
+    _lastLeft,
+    _isMaxWidth,
+    isCollapsed,
+  ) => {
+    application.setPreference(PrefKey.NotesPanelWidth, width).catch(console.error)
+    appState.noteTags.reloadTagsContainerMaxWidth()
+    appState.panelDidResize(PANEL_NAME_NOTES, isCollapsed)
+  }
+
+  const panelWidthEventCallback = () => {
+    appState.noteTags.reloadTagsContainerMaxWidth()
+  }
+
+  const toggleDisplayOptionsMenu = () => {
+    setShowDisplayOptionsMenu(!showDisplayOptionsMenu)
+  }
+
+  return (
+    <div
+      id="notes-column"
+      className="sn-component section notes app-column app-column-second"
+      aria-label="Notes"
+      ref={notesViewPanelRef}
+    >
+      <div className="content">
+        <div id="notes-title-bar" className="section-title-bar">
+          <div id="notes-title-bar-container">
+            <div className="section-title-bar-header">
+              <div className="sk-h2 font-semibold title">{panelTitle}</div>
+              <button
+                className="sk-button contrast wide"
+                title="Create a new note in the selected tag"
+                aria-label="Create new note"
+                onClick={() => createNewNote()}
+              >
+                <div className="sk-label">
+                  <i className="ion-plus add-button" aria-hidden></i>
+                </div>
+              </button>
+            </div>
+            <div className="filter-section" role="search">
+              <div>
+                <input
+                  type="text"
+                  id="search-bar"
+                  className="filter-bar"
+                  placeholder="Search"
+                  title="Searches notes in the currently selected tag"
+                  value={noteFilterText}
+                  onChange={onNoteFilterTextChange}
+                  onKeyUp={onNoteFilterKeyUp}
+                  onFocus={onSearchFocused}
+                  onBlur={onSearchBlurred}
+                  autocomplete="off"
+                />
+                {noteFilterText && (
+                  <button onClick={clearFilterText} aria-role="button" id="search-clear-button">
+                    ✕
+                  </button>
+                )}
+              </div>
+
+              {(focusedSearch || noteFilterText) && (
+                <div className="animate-fade-from-top">
+                  <SearchOptions application={application} appState={appState} />
+                </div>
+              )}
+            </div>
+            <NoAccountWarning appState={appState} />
+          </div>
+          <div id="notes-menu-bar" className="sn-component" ref={displayOptionsMenuRef}>
+            <div className="sk-app-bar no-edges">
+              <div className="left">
+                <Disclosure open={showDisplayOptionsMenu} onChange={toggleDisplayOptionsMenu}>
+                  <DisclosureButton
+                    className={`sk-app-bar-item bg-contrast color-text border-0 focus:shadow-none ${
+                      showDisplayOptionsMenu ? 'selected' : ''
+                    }`}
+                    onBlur={closeDisplayOptMenuOnBlur}
+                  >
+                    <div className="sk-app-bar-item-column">
+                      <div className="sk-label">Options</div>
+                    </div>
+                    <div className="sk-app-bar-item-column">
+                      <div className="sk-sublabel">{optionsSubtitle}</div>
+                    </div>
+                  </DisclosureButton>
+                  <DisclosurePanel onBlur={closeDisplayOptMenuOnBlur}>
+                    {showDisplayOptionsMenu && (
+                      <NotesListOptionsMenu
+                        application={application}
+                        closeDisplayOptionsMenu={toggleDisplayOptionsMenu}
+                        closeOnBlur={closeDisplayOptMenuOnBlur}
+                        isOpen={showDisplayOptionsMenu}
+                      />
+                    )}
+                  </DisclosurePanel>
+                </Disclosure>
+              </div>
+            </div>
+          </div>
+        </div>
+        {completedFullSync && !renderedNotes.length ? (
+          <p className="empty-notes-list faded">No notes.</p>
+        ) : null}
+        {!completedFullSync && !renderedNotes.length ? (
+          <p className="empty-notes-list faded">Loading notes...</p>
+        ) : null}
+        {renderedNotes.length ? (
+          <NotesList
+            notes={renderedNotes}
+            selectedNotes={selectedNotes}
+            application={application}
+            appState={appState}
+            displayOptions={displayOptions}
+            paginate={paginate}
+          />
+        ) : null}
+      </div>
+      {notesViewPanelRef.current && (
+        <PanelResizer
+          collapsable={true}
+          hoverable={true}
+          defaultWidth={300}
+          panel={notesViewPanelRef.current}
+          side={PanelSide.Right}
+          type={PanelResizeType.WidthOnly}
+          resizeFinishCallback={panelResizeFinishCallback}
+          widthEventCallback={panelWidthEventCallback}
+          width={panelWidth}
+          left={0}
+        />
+      )}
+    </div>
+  )
+})
diff --git a/app/assets/javascripts/Components/OtherSessionsSignOut/index.tsx b/app/assets/javascripts/Components/OtherSessionsSignOut/index.tsx
new file mode 100644
index 000000000..f0bbf9914
--- /dev/null
+++ b/app/assets/javascripts/Components/OtherSessionsSignOut/index.tsx
@@ -0,0 +1,70 @@
+import { useRef } from 'preact/hooks'
+import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
+import { WebApplication } from '@/UIModels/Application'
+import { AppState } from '@/UIModels/AppState'
+import { observer } from 'mobx-react-lite'
+
+type Props = {
+  application: WebApplication
+  appState: AppState
+}
+
+export const OtherSessionsSignOutContainer = observer((props: Props) => {
+  if (!props.appState.accountMenu.otherSessionsSignOut) {
+    return null
+  }
+  return <ConfirmOtherSessionsSignOut {...props} />
+})
+
+const ConfirmOtherSessionsSignOut = observer(({ application, appState }: Props) => {
+  const cancelRef = useRef<HTMLButtonElement>(null)
+  function closeDialog() {
+    appState.accountMenu.setOtherSessionsSignOut(false)
+  }
+
+  return (
+    <AlertDialog onDismiss={closeDialog} leastDestructiveRef={cancelRef}>
+      <div className="sk-modal-content">
+        <div className="sn-component">
+          <div className="sk-panel">
+            <div className="sk-panel-content">
+              <div className="sk-panel-section">
+                <AlertDialogLabel className="sk-h3 sk-panel-section-title capitalize">
+                  End all other sessions?
+                </AlertDialogLabel>
+                <AlertDialogDescription className="sk-panel-row">
+                  <p className="color-foreground">
+                    This action will sign out all other devices signed into your account, and remove
+                    your data from those devices when they next regain connection to the internet.
+                    You may sign back in on those devices at any time.
+                  </p>
+                </AlertDialogDescription>
+                <div className="flex my-1 mt-4">
+                  <button className="sn-button small neutral" ref={cancelRef} onClick={closeDialog}>
+                    Cancel
+                  </button>
+                  <button
+                    className="sn-button small danger ml-2"
+                    onClick={() => {
+                      application.revokeAllOtherSessions().catch(console.error)
+                      closeDialog()
+                      application.alertService
+                        .alert(
+                          'You have successfully revoked your sessions from other devices.',
+                          undefined,
+                          'Finish',
+                        )
+                        .catch(console.error)
+                    }}
+                  >
+                    End Sessions
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </AlertDialog>
+  )
+})
diff --git a/app/assets/javascripts/Components/PanelResizer/index.tsx b/app/assets/javascripts/Components/PanelResizer/index.tsx
new file mode 100644
index 000000000..407c5cdc3
--- /dev/null
+++ b/app/assets/javascripts/Components/PanelResizer/index.tsx
@@ -0,0 +1,326 @@
+import { Component, createRef } from 'preact'
+import { debounce } from '@/Utils'
+
+export type ResizeFinishCallback = (
+  lastWidth: number,
+  lastLeft: number,
+  isMaxWidth: boolean,
+  isCollapsed: boolean,
+) => void
+
+export enum PanelSide {
+  Right = 'right',
+  Left = 'left',
+}
+
+export enum PanelResizeType {
+  WidthOnly = 'WidthOnly',
+  OffsetAndWidth = 'OffsetAndWidth',
+}
+
+type Props = {
+  width: number
+  left: number
+  alwaysVisible?: boolean
+  collapsable?: boolean
+  defaultWidth?: number
+  hoverable?: boolean
+  minWidth?: number
+  panel: HTMLDivElement
+  side: PanelSide
+  type: PanelResizeType
+  resizeFinishCallback?: ResizeFinishCallback
+  widthEventCallback?: () => void
+}
+
+type State = {
+  collapsed: boolean
+  pressed: boolean
+}
+
+export class PanelResizer extends Component<Props, State> {
+  private overlay?: HTMLDivElement
+  private resizerElementRef = createRef<HTMLDivElement>()
+  private debouncedResizeHandler: () => void
+  private startLeft: number
+  private startWidth: number
+  private lastDownX: number
+  private lastLeft: number
+  private lastWidth: number
+  private widthBeforeLastDblClick: number
+  private minWidth: number
+
+  constructor(props: Props) {
+    super(props)
+    this.state = {
+      collapsed: false,
+      pressed: false,
+    }
+
+    this.minWidth = props.minWidth || 5
+    this.startLeft = props.panel.offsetLeft
+    this.startWidth = props.panel.scrollWidth
+    this.lastDownX = 0
+    this.lastLeft = props.panel.offsetLeft
+    this.lastWidth = props.panel.scrollWidth
+    this.widthBeforeLastDblClick = 0
+
+    this.setWidth(this.props.width)
+    this.setLeft(this.props.left)
+
+    document.addEventListener('mouseup', this.onMouseUp)
+    document.addEventListener('mousemove', this.onMouseMove)
+    this.debouncedResizeHandler = debounce(this.handleResize, 250)
+    if (this.props.type === PanelResizeType.OffsetAndWidth) {
+      window.addEventListener('resize', this.debouncedResizeHandler)
+    }
+  }
+
+  override componentDidUpdate(prevProps: Props) {
+    if (this.props.width != prevProps.width) {
+      this.setWidth(this.props.width)
+    }
+    if (this.props.left !== prevProps.left) {
+      this.setLeft(this.props.left)
+      this.setWidth(this.props.width)
+    }
+
+    const isCollapsed = this.isCollapsed()
+    if (isCollapsed !== this.state.collapsed) {
+      this.setState({ collapsed: isCollapsed })
+    }
+  }
+
+  override componentWillUnmount() {
+    document.removeEventListener('mouseup', this.onMouseUp)
+    document.removeEventListener('mousemove', this.onMouseMove)
+    window.removeEventListener('resize', this.debouncedResizeHandler)
+  }
+
+  get appFrame() {
+    return document.getElementById('app')?.getBoundingClientRect() as DOMRect
+  }
+
+  getParentRect() {
+    return (this.props.panel.parentNode as HTMLElement).getBoundingClientRect()
+  }
+
+  isAtMaxWidth = () => {
+    const marginOfError = 5
+    const difference = Math.abs(
+      Math.round(this.lastWidth + this.lastLeft) - Math.round(this.getParentRect().width),
+    )
+    return difference < marginOfError
+  }
+
+  isCollapsed() {
+    return this.lastWidth <= this.minWidth
+  }
+
+  finishSettingWidth = () => {
+    if (!this.props.collapsable) {
+      return
+    }
+
+    this.setState({
+      collapsed: this.isCollapsed(),
+    })
+  }
+
+  setWidth = (width: number, finish = false): void => {
+    if (width === 0) {
+      width = this.computeMaxWidth()
+    }
+    if (width < this.minWidth) {
+      width = this.minWidth
+    }
+
+    const parentRect = this.getParentRect()
+    if (width > parentRect.width) {
+      width = parentRect.width
+    }
+
+    const maxWidth = this.appFrame.width - this.props.panel.getBoundingClientRect().x
+    if (width > maxWidth) {
+      width = maxWidth
+    }
+
+    const isFullWidth = Math.round(width + this.lastLeft) === Math.round(parentRect.width)
+    if (isFullWidth) {
+      if (this.props.type === PanelResizeType.WidthOnly) {
+        this.props.panel.style.removeProperty('width')
+      } else {
+        this.props.panel.style.width = `calc(100% - ${this.lastLeft}px)`
+      }
+    } else {
+      this.props.panel.style.width = width + 'px'
+    }
+    this.lastWidth = width
+    if (finish) {
+      this.finishSettingWidth()
+      if (this.props.resizeFinishCallback) {
+        this.props.resizeFinishCallback(
+          this.lastWidth,
+          this.lastLeft,
+          this.isAtMaxWidth(),
+          this.isCollapsed(),
+        )
+      }
+    }
+  }
+
+  setLeft = (left: number) => {
+    this.props.panel.style.left = left + 'px'
+    this.lastLeft = left
+  }
+
+  onDblClick = () => {
+    const collapsed = this.isCollapsed()
+    if (collapsed) {
+      this.setWidth(this.widthBeforeLastDblClick || this.props.defaultWidth || 0)
+    } else {
+      this.widthBeforeLastDblClick = this.lastWidth
+      this.setWidth(this.minWidth)
+    }
+    this.finishSettingWidth()
+
+    this.props.resizeFinishCallback?.(
+      this.lastWidth,
+      this.lastLeft,
+      this.isAtMaxWidth(),
+      this.isCollapsed(),
+    )
+  }
+
+  handleWidthEvent(event?: MouseEvent) {
+    if (this.props.widthEventCallback) {
+      this.props.widthEventCallback()
+    }
+
+    let x
+    if (event) {
+      x = event.clientX
+    } else {
+      /** Coming from resize event */
+      x = 0
+      this.lastDownX = 0
+    }
+    const deltaX = x - this.lastDownX
+    const newWidth = this.startWidth + deltaX
+    this.setWidth(newWidth, false)
+  }
+
+  handleLeftEvent(event: MouseEvent) {
+    const panelRect = this.props.panel.getBoundingClientRect()
+    const x = event.clientX || panelRect.x
+    let deltaX = x - this.lastDownX
+    let newLeft = this.startLeft + deltaX
+    if (newLeft < 0) {
+      newLeft = 0
+      deltaX = -this.startLeft
+    }
+    const parentRect = this.getParentRect()
+    let newWidth = this.startWidth - deltaX
+    if (newWidth < this.minWidth) {
+      newWidth = this.minWidth
+    }
+    if (newWidth > parentRect.width) {
+      newWidth = parentRect.width
+    }
+    if (newLeft + newWidth > parentRect.width) {
+      newLeft = parentRect.width - newWidth
+    }
+    this.setLeft(newLeft)
+    this.setWidth(newWidth, false)
+  }
+
+  computeMaxWidth(): number {
+    const parentRect = this.getParentRect()
+    let width = parentRect.width - this.props.left
+    if (width < this.minWidth) {
+      width = this.minWidth
+    }
+    return width
+  }
+
+  handleResize = () => {
+    const startWidth = this.isAtMaxWidth() ? this.computeMaxWidth() : this.props.panel.scrollWidth
+
+    this.startWidth = startWidth
+    this.lastWidth = startWidth
+
+    this.handleWidthEvent()
+    this.finishSettingWidth()
+  }
+
+  onMouseDown = (event: MouseEvent) => {
+    this.addInvisibleOverlay()
+    this.lastDownX = event.clientX
+    this.startWidth = this.props.panel.scrollWidth
+    this.startLeft = this.props.panel.offsetLeft
+    this.setState({
+      pressed: true,
+    })
+  }
+
+  onMouseUp = () => {
+    this.removeInvisibleOverlay()
+    if (!this.state.pressed) {
+      return
+    }
+    this.setState({ pressed: false })
+    const isMaxWidth = this.isAtMaxWidth()
+    if (this.props.resizeFinishCallback) {
+      this.props.resizeFinishCallback(this.lastWidth, this.lastLeft, isMaxWidth, this.isCollapsed())
+    }
+    this.finishSettingWidth()
+  }
+
+  onMouseMove = (event: MouseEvent) => {
+    if (!this.state.pressed) {
+      return
+    }
+    event.preventDefault()
+    if (this.props.side === PanelSide.Left) {
+      this.handleLeftEvent(event)
+    } else {
+      this.handleWidthEvent(event)
+    }
+  }
+
+  /**
+   * If an iframe is displayed adjacent to our panel, and the mouse exits over the iframe,
+   * document[onmouseup] is not triggered because the document is no longer the same over
+   * the iframe. We add an invisible overlay while resizing so that the mouse context
+   * remains in our main document.
+   */
+  addInvisibleOverlay = () => {
+    if (this.overlay) {
+      return
+    }
+    const overlayElement = document.createElement('div')
+    overlayElement.id = 'resizer-overlay'
+    this.overlay = overlayElement
+    document.body.prepend(this.overlay)
+  }
+
+  removeInvisibleOverlay = () => {
+    if (this.overlay) {
+      this.overlay.remove()
+      this.overlay = undefined
+    }
+  }
+
+  render() {
+    return (
+      <div
+        className={`panel-resizer ${this.props.side} ${this.props.hoverable ? 'hoverable' : ''} ${
+          this.props.alwaysVisible ? 'alwaysVisible' : ''
+        } ${this.state.pressed ? 'dragging' : ''} ${this.state.collapsed ? 'collapsed' : ''}`}
+        onMouseDown={this.onMouseDown}
+        onDblClick={this.onDblClick}
+        ref={this.resizerElementRef}
+      ></div>
+    )
+  }
+}
diff --git a/app/assets/javascripts/components/PasswordWizard.tsx b/app/assets/javascripts/Components/PasswordWizard/index.tsx
similarity index 66%
rename from app/assets/javascripts/components/PasswordWizard.tsx
rename to app/assets/javascripts/Components/PasswordWizard/index.tsx
index beb01111a..3f490e2cc 100644
--- a/app/assets/javascripts/components/PasswordWizard.tsx
+++ b/app/assets/javascripts/Components/PasswordWizard/index.tsx
@@ -1,23 +1,23 @@
-import { WebApplication } from '@/ui_models/application';
-import { createRef, JSX } from 'preact';
-import { PureComponent } from './Abstract/PureComponent';
+import { WebApplication } from '@/UIModels/Application'
+import { createRef, JSX } from 'preact'
+import { PureComponent } from '@/Components/Abstract/PureComponent'
 
 interface Props {
-  application: WebApplication;
+  application: WebApplication
 }
 
 type State = {
-  continueTitle: string;
-  formData: FormData;
-  isContinuing?: boolean;
-  lockContinue?: boolean;
-  processing?: boolean;
-  showSpinner?: boolean;
-  step: Steps;
-  title: string;
-};
+  continueTitle: string
+  formData: FormData
+  isContinuing?: boolean
+  lockContinue?: boolean
+  processing?: boolean
+  showSpinner?: boolean
+  step: Steps
+  title: string
+}
 
-const DEFAULT_CONTINUE_TITLE = 'Continue';
+const DEFAULT_CONTINUE_TITLE = 'Continue'
 
 enum Steps {
   PasswordStep = 1,
@@ -25,40 +25,40 @@ enum Steps {
 }
 
 type FormData = {
-  currentPassword?: string;
-  newPassword?: string;
-  newPasswordConfirmation?: string;
-  status?: string;
-};
+  currentPassword?: string
+  newPassword?: string
+  newPasswordConfirmation?: string
+  status?: string
+}
 
 export class PasswordWizard extends PureComponent<Props, State> {
-  private currentPasswordInput = createRef<HTMLInputElement>();
+  private currentPasswordInput = createRef<HTMLInputElement>()
 
   constructor(props: Props) {
-    super(props, props.application);
-    this.registerWindowUnloadStopper();
+    super(props, props.application)
+    this.registerWindowUnloadStopper()
     this.state = {
       formData: {},
       continueTitle: DEFAULT_CONTINUE_TITLE,
       step: Steps.PasswordStep,
       title: 'Change Password',
-    };
+    }
   }
 
-  componentDidMount(): void {
-    super.componentDidMount();
-    this.currentPasswordInput.current?.focus();
+  override componentDidMount(): void {
+    super.componentDidMount()
+    this.currentPasswordInput.current?.focus()
   }
 
-  componentWillUnmount(): void {
-    super.componentWillUnmount();
-    window.onbeforeunload = null;
+  override componentWillUnmount(): void {
+    super.componentWillUnmount()
+    window.onbeforeunload = null
   }
 
   registerWindowUnloadStopper() {
     window.onbeforeunload = () => {
-      return true;
-    };
+      return true
+    }
   }
 
   resetContinueState() {
@@ -66,35 +66,35 @@ export class PasswordWizard extends PureComponent<Props, State> {
       showSpinner: false,
       continueTitle: DEFAULT_CONTINUE_TITLE,
       isContinuing: false,
-    });
+    })
   }
 
   nextStep = async () => {
     if (this.state.lockContinue || this.state.isContinuing) {
-      return;
+      return
     }
 
     if (this.state.step === Steps.FinishStep) {
-      this.dismiss();
-      return;
+      this.dismiss()
+      return
     }
 
     this.setState({
       isContinuing: true,
       showSpinner: true,
       continueTitle: 'Generating Keys...',
-    });
+    })
 
-    const valid = await this.validateCurrentPassword();
+    const valid = await this.validateCurrentPassword()
     if (!valid) {
-      this.resetContinueState();
-      return;
+      this.resetContinueState()
+      return
     }
 
-    const success = await this.processPasswordChange();
+    const success = await this.processPasswordChange()
     if (!success) {
-      this.resetContinueState();
-      return;
+      this.resetContinueState()
+      return
     }
 
     this.setState({
@@ -102,103 +102,105 @@ export class PasswordWizard extends PureComponent<Props, State> {
       showSpinner: false,
       continueTitle: 'Finish',
       step: Steps.FinishStep,
-    });
-  };
+    })
+  }
 
   async validateCurrentPassword() {
-    const currentPassword = this.state.formData.currentPassword;
-    const newPass = this.state.formData.newPassword;
+    const currentPassword = this.state.formData.currentPassword
+    const newPass = this.state.formData.newPassword
     if (!currentPassword || currentPassword.length === 0) {
-      this.application.alertService.alert(
-        'Please enter your current password.'
-      );
-      return false;
+      this.application.alertService
+        .alert('Please enter your current password.')
+        .catch(console.error)
+      return false
     }
 
     if (!newPass || newPass.length === 0) {
-      this.application.alertService.alert('Please enter a new password.');
-      return false;
+      this.application.alertService.alert('Please enter a new password.').catch(console.error)
+      return false
     }
     if (newPass !== this.state.formData.newPasswordConfirmation) {
-      this.application.alertService.alert(
-        'Your new password does not match its confirmation.'
-      );
+      this.application.alertService
+        .alert('Your new password does not match its confirmation.')
+        .catch(console.error)
       this.setFormDataState({
         status: undefined,
-      });
-      return false;
+      }).catch(console.error)
+      return false
     }
 
     if (!this.application.getUser()?.email) {
-      this.application.alertService.alert(
-        "We don't have your email stored. Please sign out then log back in to fix this issue."
-      );
+      this.application.alertService
+        .alert(
+          "We don't have your email stored. Please sign out then log back in to fix this issue.",
+        )
+        .catch(console.error)
       this.setFormDataState({
         status: undefined,
-      });
-      return false;
+      }).catch(console.error)
+      return false
     }
 
     /** Validate current password */
     const success = await this.application.validateAccountPassword(
-      this.state.formData.currentPassword!
-    );
+      this.state.formData.currentPassword as string,
+    )
     if (!success) {
-      this.application.alertService.alert(
-        'The current password you entered is not correct. Please try again.'
-      );
+      this.application.alertService
+        .alert('The current password you entered is not correct. Please try again.')
+        .catch(console.error)
     }
-    return success;
+    return success
   }
 
   async processPasswordChange() {
-    await this.application.downloadBackup();
+    await this.application.downloadBackup()
 
     this.setState({
       lockContinue: true,
       processing: true,
-    });
+    })
 
     await this.setFormDataState({
       status: 'Processing encryption keys…',
-    });
+    })
 
-    const newPassword = this.state.formData.newPassword;
+    const newPassword = this.state.formData.newPassword
     const response = await this.application.changePassword(
-      this.state.formData.currentPassword!,
-      newPassword!
-    );
+      this.state.formData.currentPassword as string,
+      newPassword as string,
+    )
 
-    const success = !response.error;
+    const success = !response.error
     this.setState({
       processing: false,
       lockContinue: false,
-    });
+    })
 
     if (!success) {
       this.setFormDataState({
         status: 'Unable to process your password. Please try again.',
-      });
+      }).catch(console.error)
     } else {
       this.setState({
         formData: {
           ...this.state.formData,
           status: 'Successfully changed password.',
         },
-      });
+      })
     }
-    return success;
+    return success
   }
 
   dismiss = () => {
     if (this.state.lockContinue) {
-      this.application.alertService.alert(
-        'Cannot close window until pending tasks are complete.'
-      );
+      this.application.alertService
+        .alert('Cannot close window until pending tasks are complete.')
+        .catch(console.error)
     } else {
-      this.dismissModal();
+      this.dismissModal()
     }
-  };
+  }
 
   async setFormDataState(formData: Partial<FormData>) {
     return this.setState({
@@ -206,7 +208,7 @@ export class PasswordWizard extends PureComponent<Props, State> {
         ...this.state.formData,
         ...formData,
       },
-    });
+    })
   }
 
   handleCurrentPasswordInputChange = ({
@@ -214,26 +216,26 @@ export class PasswordWizard extends PureComponent<Props, State> {
   }: JSX.TargetedEvent<HTMLInputElement, Event>) => {
     this.setFormDataState({
       currentPassword: currentTarget.value,
-    });
-  };
+    }).catch(console.error)
+  }
 
   handleNewPasswordInputChange = ({
     currentTarget,
   }: JSX.TargetedEvent<HTMLInputElement, Event>) => {
     this.setFormDataState({
       newPassword: currentTarget.value,
-    });
-  };
+    }).catch(console.error)
+  }
 
   handleNewPasswordConfirmationInputChange = ({
     currentTarget,
   }: JSX.TargetedEvent<HTMLInputElement, Event>) => {
     this.setFormDataState({
       newPasswordConfirmation: currentTarget.value,
-    });
-  };
+    }).catch(console.error)
+  }
 
-  render() {
+  override render() {
     return (
       <div className="sn-component">
         <div id="password-wizard" className="sk-modal small auto-height">
@@ -242,9 +244,7 @@ export class PasswordWizard extends PureComponent<Props, State> {
             <div className="sn-component">
               <div className="sk-panel">
                 <div className="sk-panel-header">
-                  <div className="sk-panel-header-title">
-                    {this.state.title}
-                  </div>
+                  <div className="sk-panel-header-title">{this.state.title}</div>
                   <a onClick={this.dismiss} className="sk-a info close-button">
                     Close
                   </a>
@@ -255,10 +255,7 @@ export class PasswordWizard extends PureComponent<Props, State> {
                       <div className="sk-panel-row">
                         <div className="sk-panel-column stretch">
                           <form className="sk-panel-form">
-                            <label
-                              htmlFor="password-wiz-current-password"
-                              className="block mb-1"
-                            >
+                            <label htmlFor="password-wiz-current-password" className="block mb-1">
                               Current Password
                             </label>
 
@@ -273,10 +270,7 @@ export class PasswordWizard extends PureComponent<Props, State> {
 
                             <div className="sk-panel-row" />
 
-                            <label
-                              htmlFor="password-wiz-new-password"
-                              className="block mb-1"
-                            >
+                            <label htmlFor="password-wiz-new-password" className="block mb-1">
                               New Password
                             </label>
 
@@ -298,12 +292,8 @@ export class PasswordWizard extends PureComponent<Props, State> {
 
                             <input
                               id="password-wiz-confirm-new-password"
-                              value={
-                                this.state.formData.newPasswordConfirmation
-                              }
-                              onChange={
-                                this.handleNewPasswordConfirmationInputChange
-                              }
+                              value={this.state.formData.newPasswordConfirmation}
+                              onChange={this.handleNewPasswordConfirmationInputChange}
                               type="password"
                               className="sk-input contrast"
                             />
@@ -318,9 +308,8 @@ export class PasswordWizard extends PureComponent<Props, State> {
                         Your password has been successfully changed.
                       </div>
                       <p className="sk-p">
-                        Please ensure you are running the latest version of
-                        Standard Notes on all platforms to ensure maximum
-                        compatibility.
+                        Please ensure you are running the latest version of Standard Notes on all
+                        platforms to ensure maximum compatibility.
                       </p>
                     </div>
                   )}
@@ -339,6 +328,6 @@ export class PasswordWizard extends PureComponent<Props, State> {
           </div>
         </div>
       </div>
-    );
+    )
   }
 }
diff --git a/app/assets/javascripts/components/PermissionsModal.tsx b/app/assets/javascripts/Components/PermissionsModal/index.tsx
similarity index 77%
rename from app/assets/javascripts/components/PermissionsModal.tsx
rename to app/assets/javascripts/Components/PermissionsModal/index.tsx
index 4cb016fd8..b6e273ffc 100644
--- a/app/assets/javascripts/components/PermissionsModal.tsx
+++ b/app/assets/javascripts/Components/PermissionsModal/index.tsx
@@ -1,43 +1,43 @@
-import { WebApplication } from '@/ui_models/application';
-import { SNComponent } from '@standardnotes/snjs';
-import { Component } from 'preact';
-import { findDOMNode, unmountComponentAtNode } from 'preact/compat';
+import { WebApplication } from '@/UIModels/Application'
+import { SNComponent } from '@standardnotes/snjs'
+import { Component } from 'preact'
+import { findDOMNode, unmountComponentAtNode } from 'preact/compat'
 
 interface Props {
-  application: WebApplication;
-  callback: (approved: boolean) => void;
-  component: SNComponent;
-  permissionsString: string;
+  application: WebApplication
+  callback: (approved: boolean) => void
+  component: SNComponent
+  permissionsString: string
 }
 
 export class PermissionsModal extends Component<Props> {
   getElement(): Element | null {
-    return findDOMNode(this);
+    return findDOMNode(this)
   }
 
   dismiss = () => {
-    const elem = this.getElement();
+    const elem = this.getElement()
     if (!elem) {
-      return;
+      return
     }
 
-    const parent = elem.parentElement;
+    const parent = elem.parentElement
     if (!parent) {
-      return;
+      return
     }
-    parent.remove();
-    unmountComponentAtNode(parent);
-  };
+    parent.remove()
+    unmountComponentAtNode(parent)
+  }
 
   accept = () => {
-    this.props.callback(true);
-    this.dismiss();
-  };
+    this.props.callback(true)
+    this.dismiss()
+  }
 
   deny = () => {
-    this.props.callback(false);
-    this.dismiss();
-  };
+    this.props.callback(false)
+    this.dismiss()
+  }
 
   render() {
     return (
@@ -63,8 +63,7 @@ export class PermissionsModal extends Component<Props> {
                   </div>
                   <div className="sk-panel-row">
                     <p className="sk-p">
-                      Components use an offline messaging system to communicate.
-                      Learn more at{' '}
+                      Components use an offline messaging system to communicate. Learn more at{' '}
                       <a
                         href="https://standardnotes.com/permissions"
                         rel="noopener"
@@ -89,6 +88,6 @@ export class PermissionsModal extends Component<Props> {
           </div>
         </div>
       </div>
-    );
+    )
   }
 }
diff --git a/app/assets/javascripts/Components/PinNoteButton/index.tsx b/app/assets/javascripts/Components/PinNoteButton/index.tsx
new file mode 100644
index 000000000..6ecf95ea9
--- /dev/null
+++ b/app/assets/javascripts/Components/PinNoteButton/index.tsx
@@ -0,0 +1,39 @@
+import { AppState } from '@/UIModels/AppState'
+import VisuallyHidden from '@reach/visually-hidden'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { Icon } from '@/Components/Icon'
+
+type Props = {
+  appState: AppState
+  className?: string
+  onClickPreprocessing?: () => Promise<void>
+}
+
+export const PinNoteButton: FunctionComponent<Props> = observer(
+  ({ appState, className = '', onClickPreprocessing }) => {
+    const notes = Object.values(appState.notes.selectedNotes)
+    const pinned = notes.some((note) => note.pinned)
+
+    const togglePinned = async () => {
+      if (onClickPreprocessing) {
+        await onClickPreprocessing()
+      }
+      if (!pinned) {
+        appState.notes.setPinSelectedNotes(true)
+      } else {
+        appState.notes.setPinSelectedNotes(false)
+      }
+    }
+
+    return (
+      <button
+        className={`sn-icon-button border-contrast ${pinned ? 'toggled' : ''} ${className}`}
+        onClick={togglePinned}
+      >
+        <VisuallyHidden>Pin selected notes</VisuallyHidden>
+        <Icon type="pin" className="block" />
+      </button>
+    )
+  },
+)
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/Advanced.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/Advanced.tsx
new file mode 100644
index 000000000..c07dded54
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/Advanced.tsx
@@ -0,0 +1,38 @@
+import { FunctionalComponent } from 'preact'
+import { PreferencesGroup, PreferencesSegment } from '@/Components/Preferences/PreferencesComponents'
+import { OfflineSubscription } from '@/Components/Preferences/Panes/Account/OfflineSubscription'
+import { WebApplication } from '@/UIModels/Application'
+import { observer } from 'mobx-react-lite'
+import { AppState } from '@/UIModels/AppState'
+import { Extensions } from '@/Components/Preferences/Panes/Extensions'
+import { ExtensionsLatestVersions } from '@/Components/Preferences/Panes/Extensions/ExtensionsLatestVersions'
+import { AccordionItem } from '@/Components/Shared/AccordionItem'
+
+interface IProps {
+  application: WebApplication
+  appState: AppState
+  extensionsLatestVersions: ExtensionsLatestVersions
+}
+
+export const Advanced: FunctionalComponent<IProps> = observer(
+  ({ application, appState, extensionsLatestVersions }) => {
+    return (
+      <PreferencesGroup>
+        <PreferencesSegment>
+          <AccordionItem title={'Advanced Settings'}>
+            <div className="flex flex-row items-center">
+              <div className="flex-grow flex flex-col">
+                <OfflineSubscription application={application} appState={appState} />
+                <Extensions
+                  className={'mt-3'}
+                  application={application}
+                  extensionsLatestVersions={extensionsLatestVersions}
+                />
+              </div>
+            </div>
+          </AccordionItem>
+        </PreferencesSegment>
+      </PreferencesGroup>
+    )
+  },
+)
diff --git a/app/assets/javascripts/components/Preferences/panes/account/Authentication.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/Authentication.tsx
similarity index 59%
rename from app/assets/javascripts/components/Preferences/panes/account/Authentication.tsx
rename to app/assets/javascripts/Components/Preferences/Panes/Account/Authentication.tsx
index fd04395d4..900f93163 100644
--- a/app/assets/javascripts/components/Preferences/panes/account/Authentication.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/Authentication.tsx
@@ -1,32 +1,32 @@
-import { AccountMenuPane } from '@/components/AccountMenu';
-import { Button } from '@/components/Button';
+import { AccountMenuPane } from '@/Components/AccountMenu'
+import { Button } from '@/Components/Button/Button'
 import {
   PreferencesGroup,
   PreferencesSegment,
   Text,
   Title,
-} from '@/components/Preferences/components';
-import { WebApplication } from '@/ui_models/application';
-import { AppState } from '@/ui_models/app_state';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { AccountIllustration } from '@standardnotes/stylekit';
+} from '@/Components/Preferences/PreferencesComponents'
+import { WebApplication } from '@/UIModels/Application'
+import { AppState } from '@/UIModels/AppState'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { AccountIllustration } from '@standardnotes/stylekit'
 
 export const Authentication: FunctionComponent<{
-  application: WebApplication;
-  appState: AppState;
+  application: WebApplication
+  appState: AppState
 }> = observer(({ appState }) => {
   const clickSignIn = () => {
-    appState.preferences.closePreferences();
-    appState.accountMenu.setCurrentPane(AccountMenuPane.SignIn);
-    appState.accountMenu.setShow(true);
-  };
+    appState.preferences.closePreferences()
+    appState.accountMenu.setCurrentPane(AccountMenuPane.SignIn)
+    appState.accountMenu.setShow(true)
+  }
 
   const clickRegister = () => {
-    appState.preferences.closePreferences();
-    appState.accountMenu.setCurrentPane(AccountMenuPane.Register);
-    appState.accountMenu.setShow(true);
-  };
+    appState.preferences.closePreferences()
+    appState.accountMenu.setCurrentPane(AccountMenuPane.Register)
+    appState.accountMenu.setShow(true)
+  }
 
   return (
     <PreferencesGroup>
@@ -35,8 +35,8 @@ export const Authentication: FunctionComponent<{
           <AccountIllustration className="mb-3" />
           <Title>You're not signed in</Title>
           <Text className="text-center mb-3">
-            Sign in to sync your notes and preferences across all your devices
-            and enable end-to-end encryption.
+            Sign in to sync your notes and preferences across all your devices and enable end-to-end
+            encryption.
           </Text>
           <Button
             variant="primary"
@@ -56,5 +56,5 @@ export const Authentication: FunctionComponent<{
         </div>
       </PreferencesSegment>
     </PreferencesGroup>
-  );
-});
+  )
+})
diff --git a/app/assets/javascripts/components/Preferences/panes/account/changeEmail/ChangeEmailForm.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmailForm.tsx
similarity index 74%
rename from app/assets/javascripts/components/Preferences/panes/account/changeEmail/ChangeEmailForm.tsx
rename to app/assets/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmailForm.tsx
index 9c6b8344a..51e50a1c0 100644
--- a/app/assets/javascripts/components/Preferences/panes/account/changeEmail/ChangeEmailForm.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmailForm.tsx
@@ -1,14 +1,14 @@
-import { StateUpdater } from 'preact/hooks';
-import { FunctionalComponent } from 'preact';
+import { StateUpdater } from 'preact/hooks'
+import { FunctionalComponent } from 'preact'
 
 type Props = {
-  setNewEmail: StateUpdater<string>;
-  setCurrentPassword: StateUpdater<string>;
-};
+  setNewEmail: StateUpdater<string>
+  setCurrentPassword: StateUpdater<string>
+}
 
-const labelClassName = `block mb-1`;
+const labelClassName = 'block mb-1'
 
-const inputClassName = 'sk-input contrast';
+const inputClassName = 'sk-input contrast'
 
 export const ChangeEmailForm: FunctionalComponent<Props> = ({
   setNewEmail,
@@ -25,7 +25,7 @@ export const ChangeEmailForm: FunctionalComponent<Props> = ({
           className={inputClassName}
           type="email"
           onChange={({ target }) => {
-            setNewEmail((target as HTMLInputElement).value);
+            setNewEmail((target as HTMLInputElement).value)
           }}
         />
       </div>
@@ -38,10 +38,10 @@ export const ChangeEmailForm: FunctionalComponent<Props> = ({
           className={inputClassName}
           type="password"
           onChange={({ target }) => {
-            setCurrentPassword((target as HTMLInputElement).value);
+            setCurrentPassword((target as HTMLInputElement).value)
           }}
         />
       </div>
     </div>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmailSuccess.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmailSuccess.tsx
new file mode 100644
index 000000000..9ba2713af
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmailSuccess.tsx
@@ -0,0 +1,13 @@
+import { FunctionalComponent } from 'preact'
+
+export const ChangeEmailSuccess: FunctionalComponent = () => {
+  return (
+    <div>
+      <div className={'sk-label sk-bold info mt-2'}>Your email has been successfully changed.</div>
+      <p className={'sk-p'}>
+        Please ensure you are running the latest version of Standard Notes on all platforms to
+        ensure maximum compatibility.
+      </p>
+    </div>
+  )
+}
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/ChangeEmail/index.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/ChangeEmail/index.tsx
new file mode 100644
index 000000000..f9b63ea09
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/ChangeEmail/index.tsx
@@ -0,0 +1,171 @@
+import { useState } from '@node_modules/preact/hooks'
+import {
+  ModalDialog,
+  ModalDialogButtons,
+  ModalDialogDescription,
+  ModalDialogLabel,
+} from '@/Components/Shared/ModalDialog'
+import { Button } from '@/Components/Button/Button'
+import { FunctionalComponent } from 'preact'
+import { WebApplication } from '@/UIModels/Application'
+import { useBeforeUnload } from '@/Hooks/useBeforeUnload'
+import { ChangeEmailForm } from './ChangeEmailForm'
+import { ChangeEmailSuccess } from './ChangeEmailSuccess'
+import { isEmailValid } from '@/Utils'
+
+enum SubmitButtonTitles {
+  Default = 'Continue',
+  GeneratingKeys = 'Generating Keys...',
+  Finish = 'Finish',
+}
+
+enum Steps {
+  InitialStep,
+  FinishStep,
+}
+
+type Props = {
+  onCloseDialog: () => void
+  application: WebApplication
+}
+
+export const ChangeEmail: FunctionalComponent<Props> = ({ onCloseDialog, application }) => {
+  const [currentPassword, setCurrentPassword] = useState('')
+  const [newEmail, setNewEmail] = useState('')
+  const [isContinuing, setIsContinuing] = useState(false)
+  const [lockContinue, setLockContinue] = useState(false)
+  const [submitButtonTitle, setSubmitButtonTitle] = useState(SubmitButtonTitles.Default)
+  const [currentStep, setCurrentStep] = useState(Steps.InitialStep)
+
+  useBeforeUnload()
+
+  const applicationAlertService = application.alertService
+
+  const validateCurrentPassword = async () => {
+    if (!currentPassword || currentPassword.length === 0) {
+      applicationAlertService.alert('Please enter your current password.').catch(console.error)
+
+      return false
+    }
+
+    const success = await application.validateAccountPassword(currentPassword)
+    if (!success) {
+      applicationAlertService
+        .alert('The current password you entered is not correct. Please try again.')
+        .catch(console.error)
+
+      return false
+    }
+
+    return success
+  }
+
+  const validateNewEmail = async () => {
+    if (!isEmailValid(newEmail)) {
+      applicationAlertService
+        .alert(
+          'The email you entered has an invalid format. Please review your input and try again.',
+        )
+        .catch(console.error)
+
+      return false
+    }
+
+    return true
+  }
+
+  const resetProgressState = () => {
+    setSubmitButtonTitle(SubmitButtonTitles.Default)
+    setIsContinuing(false)
+  }
+
+  const processEmailChange = async () => {
+    await application.downloadBackup()
+
+    setLockContinue(true)
+
+    const response = await application.changeEmail(newEmail, currentPassword)
+
+    const success = !response.error
+
+    setLockContinue(false)
+
+    return success
+  }
+
+  const dismiss = () => {
+    if (lockContinue) {
+      applicationAlertService
+        .alert('Cannot close window until pending tasks are complete.')
+        .catch(console.error)
+    } else {
+      onCloseDialog()
+    }
+  }
+
+  const handleSubmit = async () => {
+    if (lockContinue || isContinuing) {
+      return
+    }
+
+    if (currentStep === Steps.FinishStep) {
+      dismiss()
+
+      return
+    }
+
+    setIsContinuing(true)
+    setSubmitButtonTitle(SubmitButtonTitles.GeneratingKeys)
+
+    const valid = (await validateCurrentPassword()) && (await validateNewEmail())
+
+    if (!valid) {
+      resetProgressState()
+
+      return
+    }
+
+    const success = await processEmailChange()
+    if (!success) {
+      resetProgressState()
+
+      return
+    }
+
+    setIsContinuing(false)
+    setSubmitButtonTitle(SubmitButtonTitles.Finish)
+    setCurrentStep(Steps.FinishStep)
+  }
+
+  const handleDialogClose = () => {
+    if (lockContinue) {
+      applicationAlertService
+        .alert('Cannot close window until pending tasks are complete.')
+        .catch(console.error)
+    } else {
+      onCloseDialog()
+    }
+  }
+
+  return (
+    <div>
+      <ModalDialog>
+        <ModalDialogLabel closeDialog={handleDialogClose}>Change Email</ModalDialogLabel>
+        <ModalDialogDescription className="px-4.5">
+          {currentStep === Steps.InitialStep && (
+            <ChangeEmailForm setNewEmail={setNewEmail} setCurrentPassword={setCurrentPassword} />
+          )}
+          {currentStep === Steps.FinishStep && <ChangeEmailSuccess />}
+        </ModalDialogDescription>
+        <ModalDialogButtons className="px-4.5">
+          <Button
+            className="min-w-20"
+            variant="primary"
+            label={submitButtonTitle}
+            onClick={handleSubmit}
+          />
+        </ModalDialogButtons>
+      </ModalDialog>
+    </div>
+  )
+}
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/Credentials.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/Credentials.tsx
new file mode 100644
index 000000000..9cca4b4e6
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/Credentials.tsx
@@ -0,0 +1,75 @@
+import {
+  PreferencesGroup,
+  PreferencesSegment,
+  Subtitle,
+  Text,
+  Title,
+} from '@/Components/Preferences/PreferencesComponents'
+import { Button } from '@/Components/Button/Button'
+import { WebApplication } from '@/UIModels/Application'
+import { observer } from '@node_modules/mobx-react-lite'
+import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
+import { dateToLocalizedString } from '@standardnotes/snjs'
+import { useCallback, useState } from 'preact/hooks'
+import { ChangeEmail } from '@/Components/Preferences/Panes/Account/ChangeEmail'
+import { FunctionComponent, render } from 'preact'
+import { AppState } from '@/UIModels/AppState'
+import { PasswordWizard } from '@/Components/PasswordWizard'
+
+type Props = {
+  application: WebApplication
+  appState: AppState
+}
+
+export const Credentials: FunctionComponent<Props> = observer(({ application }: Props) => {
+  const [isChangeEmailDialogOpen, setIsChangeEmailDialogOpen] = useState(false)
+
+  const user = application.getUser()
+
+  const passwordCreatedAtTimestamp = application.getUserPasswordCreationDate() as Date
+  const passwordCreatedOn = dateToLocalizedString(passwordCreatedAtTimestamp)
+
+  const presentPasswordWizard = useCallback(() => {
+    render(
+      <PasswordWizard application={application} />,
+      document.body.appendChild(document.createElement('div')),
+    )
+  }, [application])
+
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>Credentials</Title>
+        <Subtitle>Email</Subtitle>
+        <Text>
+          You're signed in as <span className="font-bold wrap">{user?.email}</span>
+        </Text>
+        <Button
+          className="min-w-20 mt-3"
+          variant="normal"
+          label="Change email"
+          onClick={() => {
+            setIsChangeEmailDialogOpen(true)
+          }}
+        />
+        <HorizontalSeparator classes="mt-5 mb-3" />
+        <Subtitle>Password</Subtitle>
+        <Text>
+          Current password was set on <span className="font-bold">{passwordCreatedOn}</span>
+        </Text>
+        <Button
+          className="min-w-20 mt-3"
+          variant="normal"
+          label="Change password"
+          onClick={presentPasswordWizard}
+        />
+        {isChangeEmailDialogOpen && (
+          <ChangeEmail
+            onCloseDialog={() => setIsChangeEmailDialogOpen(false)}
+            application={application}
+          />
+        )}
+      </PreferencesSegment>
+    </PreferencesGroup>
+  )
+})
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/OfflineSubscription.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/OfflineSubscription.tsx
new file mode 100644
index 000000000..d9d327cdd
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/OfflineSubscription.tsx
@@ -0,0 +1,128 @@
+import { FunctionalComponent } from 'preact'
+import { Subtitle } from '@/Components/Preferences/PreferencesComponents'
+import { DecoratedInput } from '@/Components/Input/DecoratedInput'
+import { Button } from '@/Components/Button/Button'
+import { useEffect, useState } from 'preact/hooks'
+import { WebApplication } from '@/UIModels/Application'
+import { AppState } from '@/UIModels/AppState'
+import { observer } from 'mobx-react-lite'
+import { STRING_REMOVE_OFFLINE_KEY_CONFIRMATION } from '@/Strings'
+import { ButtonType, ClientDisplayableError } from '@standardnotes/snjs'
+import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
+
+interface IProps {
+  application: WebApplication
+  appState: AppState
+}
+
+export const OfflineSubscription: FunctionalComponent<IProps> = observer(({ application }) => {
+  const [activationCode, setActivationCode] = useState('')
+  const [isSuccessfullyActivated, setIsSuccessfullyActivated] = useState(false)
+  const [isSuccessfullyRemoved, setIsSuccessfullyRemoved] = useState(false)
+  const [hasUserPreviouslyStoredCode, setHasUserPreviouslyStoredCode] = useState(false)
+
+  useEffect(() => {
+    if (application.features.hasOfflineRepo()) {
+      setHasUserPreviouslyStoredCode(true)
+    }
+  }, [application])
+
+  const shouldShowOfflineSubscription = () => {
+    return (
+      !application.hasAccount() || application.isThirdPartyHostUsed() || hasUserPreviouslyStoredCode
+    )
+  }
+
+  const handleSubscriptionCodeSubmit = async (event: Event) => {
+    event.preventDefault()
+
+    const result = await application.features.setOfflineFeaturesCode(activationCode)
+
+    if (result instanceof ClientDisplayableError) {
+      await application.alertService.alert(result.text)
+    } else {
+      setIsSuccessfullyActivated(true)
+      setHasUserPreviouslyStoredCode(true)
+      setIsSuccessfullyRemoved(false)
+    }
+  }
+
+  const handleRemoveOfflineKey = async () => {
+    await application.features.deleteOfflineFeatureRepo()
+
+    setIsSuccessfullyActivated(false)
+    setHasUserPreviouslyStoredCode(false)
+    setActivationCode('')
+    setIsSuccessfullyRemoved(true)
+  }
+
+  const handleRemoveClick = async () => {
+    application.alertService
+      .confirm(
+        STRING_REMOVE_OFFLINE_KEY_CONFIRMATION,
+        'Remove offline key?',
+        'Remove Offline Key',
+        ButtonType.Danger,
+        'Cancel',
+      )
+      .then(async (shouldRemove: boolean) => {
+        if (shouldRemove) {
+          await handleRemoveOfflineKey()
+        }
+      })
+      .catch((err: string) => {
+        application.alertService.alert(err).catch(console.error)
+      })
+  }
+
+  if (!shouldShowOfflineSubscription()) {
+    return null
+  }
+
+  return (
+    <>
+      <div className="flex items-center justify-between">
+        <div className="flex flex-col mt-3 w-full">
+          <Subtitle>{!hasUserPreviouslyStoredCode && 'Activate'} Offline Subscription</Subtitle>
+          <form onSubmit={handleSubscriptionCodeSubmit}>
+            <div className={'mt-2'}>
+              {!hasUserPreviouslyStoredCode && (
+                <DecoratedInput
+                  onChange={(code) => setActivationCode(code)}
+                  placeholder={'Offline Subscription Code'}
+                  value={activationCode}
+                  disabled={isSuccessfullyActivated}
+                  className={'mb-3'}
+                />
+              )}
+            </div>
+            {(isSuccessfullyActivated || isSuccessfullyRemoved) && (
+              <div className={'mt-3 mb-3 info'}>
+                Your offline subscription code has been successfully{' '}
+                {isSuccessfullyActivated ? 'activated' : 'removed'}.
+              </div>
+            )}
+            {hasUserPreviouslyStoredCode && (
+              <Button
+                dangerStyle={true}
+                label="Remove offline key"
+                onClick={() => {
+                  handleRemoveClick().catch(console.error)
+                }}
+              />
+            )}
+            {!hasUserPreviouslyStoredCode && !isSuccessfullyActivated && (
+              <Button
+                label={'Submit'}
+                variant="primary"
+                disabled={activationCode === ''}
+                onClick={(event) => handleSubscriptionCodeSubmit(event)}
+              />
+            )}
+          </form>
+        </div>
+      </div>
+      <HorizontalSeparator classes="mt-8 mb-5" />
+    </>
+  )
+})
diff --git a/app/assets/javascripts/components/Preferences/panes/account/SignOutView.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/SignOutView.tsx
similarity index 63%
rename from app/assets/javascripts/components/Preferences/panes/account/SignOutView.tsx
rename to app/assets/javascripts/Components/Preferences/Panes/Account/SignOutView.tsx
index 0fe84cbba..db6436d78 100644
--- a/app/assets/javascripts/components/Preferences/panes/account/SignOutView.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/SignOutView.tsx
@@ -1,20 +1,20 @@
-import { Button } from '@/components/Button';
-import { OtherSessionsSignOutContainer } from '@/components/OtherSessionsSignOut';
+import { Button } from '@/Components/Button/Button'
+import { OtherSessionsSignOutContainer } from '@/Components/OtherSessionsSignOut'
 import {
   PreferencesGroup,
   PreferencesSegment,
   Subtitle,
   Text,
   Title,
-} from '@/components/Preferences/components';
-import { WebApplication } from '@/ui_models/application';
-import { AppState } from '@/ui_models/app_state';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
+} from '@/Components/Preferences/PreferencesComponents'
+import { WebApplication } from '@/UIModels/Application'
+import { AppState } from '@/UIModels/AppState'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
 
 const SignOutView: FunctionComponent<{
-  application: WebApplication;
-  appState: AppState;
+  application: WebApplication
+  appState: AppState
 }> = observer(({ application, appState }) => {
   return (
     <>
@@ -30,7 +30,7 @@ const SignOutView: FunctionComponent<{
               variant="normal"
               label="Sign out other sessions"
               onClick={() => {
-                appState.accountMenu.setOtherSessionsSignOut(true);
+                appState.accountMenu.setOtherSessionsSignOut(true)
               }}
             />
             <Button
@@ -42,57 +42,49 @@ const SignOutView: FunctionComponent<{
         </PreferencesSegment>
         <PreferencesSegment>
           <Subtitle>This workspace</Subtitle>
-          <Text>
-            Remove all data related to the current workspace from the
-            application.
-          </Text>
+          <Text>Remove all data related to the current workspace from the application.</Text>
           <div className="min-h-3" />
           <Button
             dangerStyle={true}
             label="Sign out workspace"
             onClick={() => {
-              appState.accountMenu.setSigningOut(true);
+              appState.accountMenu.setSigningOut(true)
             }}
           />
         </PreferencesSegment>
       </PreferencesGroup>
-      <OtherSessionsSignOutContainer
-        appState={appState}
-        application={application}
-      />
+      <OtherSessionsSignOutContainer appState={appState} application={application} />
     </>
-  );
-});
+  )
+})
 
 const ClearSessionDataView: FunctionComponent<{
-  appState: AppState;
+  appState: AppState
 }> = observer(({ appState }) => {
   return (
     <PreferencesGroup>
       <PreferencesSegment>
         <Title>Clear workspace</Title>
-        <Text>
-          Remove all data related to the current workspace from the application.
-        </Text>
+        <Text>Remove all data related to the current workspace from the application.</Text>
         <div className="min-h-3" />
         <Button
           dangerStyle={true}
           label="Clear workspace"
           onClick={() => {
-            appState.accountMenu.setSigningOut(true);
+            appState.accountMenu.setSigningOut(true)
           }}
         />
       </PreferencesSegment>
     </PreferencesGroup>
-  );
-});
+  )
+})
 
 export const SignOutWrapper: FunctionComponent<{
-  application: WebApplication;
-  appState: AppState;
+  application: WebApplication
+  appState: AppState
 }> = observer(({ application, appState }) => {
   if (!application.hasAccount()) {
-    return <ClearSessionDataView appState={appState} />;
+    return <ClearSessionDataView appState={appState} />
   }
-  return <SignOutView appState={appState} application={application} />;
-});
+  return <SignOutView appState={appState} application={application} />
+})
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx
new file mode 100644
index 000000000..ad5431544
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx
@@ -0,0 +1,51 @@
+import { FunctionalComponent } from 'preact'
+import { LinkButton, Text } from '@/Components/Preferences/PreferencesComponents'
+import { Button } from '@/Components/Button/Button'
+import { WebApplication } from '@/UIModels/Application'
+import { useState } from 'preact/hooks'
+import { loadPurchaseFlowUrl } from '@/Components/PurchaseFlow/PurchaseFlowWrapper'
+
+export const NoSubscription: FunctionalComponent<{
+  application: WebApplication
+}> = ({ application }) => {
+  const [isLoadingPurchaseFlow, setIsLoadingPurchaseFlow] = useState(false)
+  const [purchaseFlowError, setPurchaseFlowError] = useState<string | undefined>(undefined)
+
+  const onPurchaseClick = async () => {
+    const errorMessage =
+      'There was an error when attempting to redirect you to the subscription page.'
+    setIsLoadingPurchaseFlow(true)
+    try {
+      if (!(await loadPurchaseFlowUrl(application))) {
+        setPurchaseFlowError(errorMessage)
+      }
+    } catch (e) {
+      setPurchaseFlowError(errorMessage)
+    } finally {
+      setIsLoadingPurchaseFlow(false)
+    }
+  }
+
+  return (
+    <>
+      <Text>You don't have a Standard Notes subscription yet.</Text>
+      {isLoadingPurchaseFlow && <Text>Redirecting you to the subscription page...</Text>}
+      {purchaseFlowError && <Text className="color-danger">{purchaseFlowError}</Text>}
+      <div className="flex">
+        <LinkButton
+          className="min-w-20 mt-3 mr-3"
+          label="Learn More"
+          link={window.plansUrl as string}
+        />
+        {application.hasAccount() && (
+          <Button
+            className="min-w-20 mt-3"
+            variant="primary"
+            label="Subscribe"
+            onClick={onPurchaseClick}
+          />
+        )}
+      </div>
+    </>
+  )
+}
diff --git a/app/assets/javascripts/components/Preferences/panes/account/subscription/Subscription.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/Subscription.tsx
similarity index 59%
rename from app/assets/javascripts/components/Preferences/panes/account/subscription/Subscription.tsx
rename to app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/Subscription.tsx
index 21758701a..b440a211e 100644
--- a/app/assets/javascripts/components/Preferences/panes/account/subscription/Subscription.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/Subscription.tsx
@@ -1,26 +1,22 @@
-import {
-  PreferencesGroup,
-  PreferencesSegment,
-  Title,
-} from '@/components/Preferences/components';
-import { WebApplication } from '@/ui_models/application';
-import { SubscriptionInformation } from './SubscriptionInformation';
-import { NoSubscription } from './NoSubscription';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { AppState } from '@/ui_models/app_state';
+import { PreferencesGroup, PreferencesSegment, Title } from '@/Components/Preferences/PreferencesComponents'
+import { WebApplication } from '@/UIModels/Application'
+import { SubscriptionInformation } from './SubscriptionInformation'
+import { NoSubscription } from './NoSubscription'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { AppState } from '@/UIModels/AppState'
 
 type Props = {
-  application: WebApplication;
-  appState: AppState;
-};
+  application: WebApplication
+  appState: AppState
+}
 
 export const Subscription: FunctionComponent<Props> = observer(
   ({ application, appState }: Props) => {
-    const subscriptionState = appState.subscription;
-    const { userSubscription } = subscriptionState;
+    const subscriptionState = appState.subscription
+    const { userSubscription } = subscriptionState
 
-    const now = new Date().getTime();
+    const now = new Date().getTime()
 
     return (
       <PreferencesGroup>
@@ -40,6 +36,6 @@ export const Subscription: FunctionComponent<Props> = observer(
           </div>
         </PreferencesSegment>
       </PreferencesGroup>
-    );
-  }
-);
+    )
+  },
+)
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/SubscriptionInformation.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/SubscriptionInformation.tsx
new file mode 100644
index 000000000..3dcf52b79
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/SubscriptionInformation.tsx
@@ -0,0 +1,85 @@
+import { observer } from 'mobx-react-lite'
+import { SubscriptionState } from '@/UIModels/AppState/SubscriptionState'
+import { Text } from '@/Components/Preferences/PreferencesComponents'
+import { Button } from '@/Components/Button/Button'
+import { WebApplication } from '@/UIModels/Application'
+import { openSubscriptionDashboard } from '@/Utils/ManageSubscription'
+
+type Props = {
+  subscriptionState: SubscriptionState
+  application: WebApplication
+}
+
+const StatusText = observer(
+  ({ subscriptionState }: { subscriptionState: Props['subscriptionState'] }) => {
+    const {
+      userSubscriptionName,
+      userSubscriptionExpirationDate,
+      isUserSubscriptionExpired,
+      isUserSubscriptionCanceled,
+    } = subscriptionState
+    const expirationDateString = userSubscriptionExpirationDate?.toLocaleString()
+
+    if (isUserSubscriptionCanceled) {
+      return (
+        <Text className="mt-1">
+          Your{' '}
+          <span className="font-bold">
+            Standard Notes{userSubscriptionName ? ' ' : ''}
+            {userSubscriptionName}
+          </span>{' '}
+          subscription has been canceled{' '}
+          {isUserSubscriptionExpired ? (
+            <span className="font-bold">and expired on {expirationDateString}</span>
+          ) : (
+            <span className="font-bold">but will remain valid until {expirationDateString}</span>
+          )}
+          . You may resubscribe below if you wish.
+        </Text>
+      )
+    }
+
+    if (isUserSubscriptionExpired) {
+      return (
+        <Text className="mt-1">
+          Your{' '}
+          <span className="font-bold">
+            Standard Notes{userSubscriptionName ? ' ' : ''}
+            {userSubscriptionName}
+          </span>{' '}
+          subscription <span className="font-bold">expired on {expirationDateString}</span>. You may
+          resubscribe below if you wish.
+        </Text>
+      )
+    }
+
+    return (
+      <Text className="mt-1">
+        Your{' '}
+        <span className="font-bold">
+          Standard Notes{userSubscriptionName ? ' ' : ''}
+          {userSubscriptionName}
+        </span>{' '}
+        subscription will be <span className="font-bold">renewed on {expirationDateString}</span>.
+      </Text>
+    )
+  },
+)
+
+export const SubscriptionInformation = observer(({ subscriptionState, application }: Props) => {
+  const manageSubscription = async () => {
+    openSubscriptionDashboard(application)
+  }
+
+  return (
+    <>
+      <StatusText subscriptionState={subscriptionState} />
+      <Button
+        className="min-w-20 mt-3 mr-3"
+        variant="normal"
+        label="Manage subscription"
+        onClick={manageSubscription}
+      />
+    </>
+  )
+})
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/Sync.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/Sync.tsx
new file mode 100644
index 000000000..4f0ee4478
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/Sync.tsx
@@ -0,0 +1,65 @@
+import {
+  PreferencesGroup,
+  PreferencesSegment,
+  Text,
+  Title,
+} from '@/Components/Preferences/PreferencesComponents'
+import { Button } from '@/Components/Button/Button'
+import { SyncQueueStrategy, dateToLocalizedString } from '@standardnotes/snjs'
+import { STRING_GENERIC_SYNC_ERROR } from '@/Strings'
+import { useState } from '@node_modules/preact/hooks'
+import { observer } from 'mobx-react-lite'
+import { WebApplication } from '@/UIModels/Application'
+import { FunctionComponent } from 'preact'
+
+type Props = {
+  application: WebApplication
+}
+
+export const formatLastSyncDate = (lastUpdatedDate: Date) => {
+  return dateToLocalizedString(lastUpdatedDate)
+}
+
+export const Sync: FunctionComponent<Props> = observer(({ application }: Props) => {
+  const [isSyncingInProgress, setIsSyncingInProgress] = useState(false)
+  const [lastSyncDate, setLastSyncDate] = useState(
+    formatLastSyncDate(application.sync.getLastSyncDate() as Date),
+  )
+
+  const doSynchronization = async () => {
+    setIsSyncingInProgress(true)
+
+    const response = await application.sync.sync({
+      queueStrategy: SyncQueueStrategy.ForceSpawnNew,
+      checkIntegrity: true,
+    })
+    setIsSyncingInProgress(false)
+    if (response && (response as any).error) {
+      application.alertService.alert(STRING_GENERIC_SYNC_ERROR).catch(console.error)
+    } else {
+      setLastSyncDate(formatLastSyncDate(application.sync.getLastSyncDate() as Date))
+    }
+  }
+
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <div className="flex flex-row items-center">
+          <div className="flex-grow flex flex-col">
+            <Title>Sync</Title>
+            <Text>
+              Last synced <span className="font-bold">on {lastSyncDate}</span>
+            </Text>
+            <Button
+              className="min-w-20 mt-3"
+              variant="normal"
+              label="Sync now"
+              disabled={isSyncingInProgress}
+              onClick={doSynchronization}
+            />
+          </div>
+        </div>
+      </PreferencesSegment>
+    </PreferencesGroup>
+  )
+})
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx
new file mode 100644
index 000000000..ac39ef251
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx
@@ -0,0 +1,29 @@
+import { PreferencesPane } from '@/Components/Preferences/PreferencesComponents'
+import { observer } from 'mobx-react-lite'
+import { WebApplication } from '@/UIModels/Application'
+import { AppState } from '@/UIModels/AppState'
+import { Authentication } from './Authentication'
+import { Credentials } from './Credentials'
+import { Sync } from './Sync'
+import { Subscription } from './Subscription/Subscription'
+import { SignOutWrapper } from './SignOutView'
+
+type Props = {
+  application: WebApplication
+  appState: AppState
+}
+
+export const AccountPreferences = observer(({ application, appState }: Props) => (
+  <PreferencesPane>
+    {!application.hasAccount() ? (
+      <Authentication application={application} appState={appState} />
+    ) : (
+      <>
+        <Credentials application={application} appState={appState} />
+        <Sync application={application} />
+      </>
+    )}
+    <Subscription application={application} appState={appState} />
+    <SignOutWrapper application={application} appState={appState} />
+  </PreferencesPane>
+))
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Appearance.tsx b/app/assets/javascripts/Components/Preferences/Panes/Appearance.tsx
new file mode 100644
index 000000000..8d1468165
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/Appearance.tsx
@@ -0,0 +1,169 @@
+import { Dropdown, DropdownItem } from '@/Components/Dropdown'
+import { usePremiumModal } from '@/Hooks/usePremiumModal'
+import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
+import { Switch } from '@/Components/Switch'
+import { WebApplication } from '@/UIModels/Application'
+import {
+  ContentType,
+  FeatureIdentifier,
+  FeatureStatus,
+  PrefKey,
+  GetFeatures,
+  SNTheme,
+} from '@standardnotes/snjs'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { useEffect, useState } from 'preact/hooks'
+import {
+  PreferencesGroup,
+  PreferencesPane,
+  PreferencesSegment,
+  Subtitle,
+  Title,
+  Text,
+} from '@/Components/Preferences/PreferencesComponents'
+import { sortThemes } from '@/Utils/SortThemes'
+
+type Props = {
+  application: WebApplication
+}
+
+export const Appearance: FunctionComponent<Props> = observer(({ application }) => {
+  const premiumModal = usePremiumModal()
+  const isEntitledToMidnightTheme =
+    application.features.getFeatureStatus(FeatureIdentifier.MidnightTheme) ===
+    FeatureStatus.Entitled
+
+  const [themeItems, setThemeItems] = useState<DropdownItem[]>([])
+  const [autoLightTheme, setAutoLightTheme] = useState<string>(
+    () => application.getPreference(PrefKey.AutoLightThemeIdentifier, 'Default') as string,
+  )
+  const [autoDarkTheme, setAutoDarkTheme] = useState<string>(
+    () =>
+      application.getPreference(
+        PrefKey.AutoDarkThemeIdentifier,
+        isEntitledToMidnightTheme ? FeatureIdentifier.MidnightTheme : 'Default',
+      ) as string,
+  )
+  const [useDeviceSettings, setUseDeviceSettings] = useState(
+    () => application.getPreference(PrefKey.UseSystemColorScheme, false) as boolean,
+  )
+
+  useEffect(() => {
+    const themesAsItems: DropdownItem[] = application.items
+      .getDisplayableItems<SNTheme>(ContentType.Theme)
+      .filter((theme) => !theme.isLayerable())
+      .sort(sortThemes)
+      .map((theme) => {
+        return {
+          label: theme.name,
+          value: theme.identifier as string,
+        }
+      })
+
+    GetFeatures()
+      .filter((feature) => feature.content_type === ContentType.Theme && !feature.layerable)
+      .forEach((theme) => {
+        if (themesAsItems.findIndex((item) => item.value === theme.identifier) === -1) {
+          themesAsItems.push({
+            label: theme.name as string,
+            value: theme.identifier,
+            icon: 'premium-feature',
+          })
+        }
+      })
+
+    themesAsItems.unshift({
+      label: 'Default',
+      value: 'Default',
+    })
+
+    setThemeItems(themesAsItems)
+  }, [application])
+
+  const toggleUseDeviceSettings = () => {
+    application.setPreference(PrefKey.UseSystemColorScheme, !useDeviceSettings).catch(console.error)
+    if (!application.getPreference(PrefKey.AutoLightThemeIdentifier)) {
+      application
+        .setPreference(PrefKey.AutoLightThemeIdentifier, autoLightTheme as FeatureIdentifier)
+        .catch(console.error)
+    }
+    if (!application.getPreference(PrefKey.AutoDarkThemeIdentifier)) {
+      application
+        .setPreference(PrefKey.AutoDarkThemeIdentifier, autoDarkTheme as FeatureIdentifier)
+        .catch(console.error)
+    }
+    setUseDeviceSettings(!useDeviceSettings)
+  }
+
+  const changeAutoLightTheme = (value: string, item: DropdownItem) => {
+    if (item.icon === 'premium-feature') {
+      premiumModal.activate(`${item.label} theme`)
+    } else {
+      application
+        .setPreference(PrefKey.AutoLightThemeIdentifier, value as FeatureIdentifier)
+        .catch(console.error)
+      setAutoLightTheme(value)
+    }
+  }
+
+  const changeAutoDarkTheme = (value: string, item: DropdownItem) => {
+    if (item.icon === 'premium-feature') {
+      premiumModal.activate(`${item.label} theme`)
+    } else {
+      application
+        .setPreference(PrefKey.AutoDarkThemeIdentifier, value as FeatureIdentifier)
+        .catch(console.error)
+      setAutoDarkTheme(value)
+    }
+  }
+
+  return (
+    <PreferencesPane>
+      <PreferencesGroup>
+        <PreferencesSegment>
+          <Title>Themes</Title>
+          <div className="mt-2">
+            <div className="flex items-center justify-between">
+              <div className="flex flex-col">
+                <Subtitle>Use system color scheme</Subtitle>
+                <Text>Automatically change active theme based on your system settings.</Text>
+              </div>
+              <Switch onChange={toggleUseDeviceSettings} checked={useDeviceSettings} />
+            </div>
+            <HorizontalSeparator classes="mt-5 mb-3" />
+            <div>
+              <Subtitle>Automatic Light Theme</Subtitle>
+              <Text>Theme to be used for system light mode:</Text>
+              <div className="mt-2">
+                <Dropdown
+                  id="auto-light-theme-dropdown"
+                  label="Select the automatic light theme"
+                  items={themeItems}
+                  value={autoLightTheme}
+                  onChange={changeAutoLightTheme}
+                  disabled={!useDeviceSettings}
+                />
+              </div>
+            </div>
+            <HorizontalSeparator classes="mt-5 mb-3" />
+            <div>
+              <Subtitle>Automatic Dark Theme</Subtitle>
+              <Text>Theme to be used for system dark mode:</Text>
+              <div className="mt-2">
+                <Dropdown
+                  id="auto-dark-theme-dropdown"
+                  label="Select the automatic dark theme"
+                  items={themeItems}
+                  value={autoDarkTheme}
+                  onChange={changeAutoDarkTheme}
+                  disabled={!useDeviceSettings}
+                />
+              </div>
+            </div>
+          </div>
+        </PreferencesSegment>
+      </PreferencesGroup>
+    </PreferencesPane>
+  )
+})
diff --git a/app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/CloudBackupProvider.tsx b/app/assets/javascripts/Components/Preferences/Panes/Backups/CloudBackups/CloudBackupProvider.tsx
similarity index 52%
rename from app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/CloudBackupProvider.tsx
rename to app/assets/javascripts/Components/Preferences/Panes/Backups/CloudBackups/CloudBackupProvider.tsx
index 938c73911..90ad25d2b 100644
--- a/app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/CloudBackupProvider.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Backups/CloudBackups/CloudBackupProvider.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'preact/hooks';
+import { useCallback, useEffect, useState } from 'preact/hooks'
 import {
   ButtonType,
   SettingName,
@@ -6,34 +6,32 @@ import {
   DropboxBackupFrequency,
   GoogleDriveBackupFrequency,
   OneDriveBackupFrequency,
-} from '@standardnotes/snjs';
-import { WebApplication } from '@/ui_models/application';
-import { Button } from '@/components/Button';
-import { isDev, openInNewTab } from '@/utils';
-import { Subtitle } from '@/components/Preferences/components';
-import { KeyboardKey } from '@Services/ioService';
-import { FunctionComponent } from 'preact';
+} from '@standardnotes/snjs'
+import { WebApplication } from '@/UIModels/Application'
+import { Button } from '@/Components/Button/Button'
+import { isDev, openInNewTab } from '@/Utils'
+import { Subtitle } from '@/Components/Preferences/PreferencesComponents'
+import { KeyboardKey } from '@/Services/IOService'
+import { FunctionComponent } from 'preact'
 
 type Props = {
-  application: WebApplication;
-  providerName: CloudProvider;
-  isEntitledToCloudBackups: boolean;
-};
+  application: WebApplication
+  providerName: CloudProvider
+  isEntitledToCloudBackups: boolean
+}
 
 export const CloudBackupProvider: FunctionComponent<Props> = ({
   application,
   providerName,
   isEntitledToCloudBackups,
 }) => {
-  const [authBegan, setAuthBegan] = useState(false);
-  const [successfullyInstalled, setSuccessfullyInstalled] = useState(false);
-  const [backupFrequency, setBackupFrequency] = useState<string | undefined>(
-    undefined
-  );
-  const [confirmation, setConfirmation] = useState('');
+  const [authBegan, setAuthBegan] = useState(false)
+  const [successfullyInstalled, setSuccessfullyInstalled] = useState(false)
+  const [backupFrequency, setBackupFrequency] = useState<string | undefined>(undefined)
+  const [confirmation, setConfirmation] = useState('')
 
   const disable = async (event: Event) => {
-    event.stopPropagation();
+    event.stopPropagation()
 
     try {
       const shouldDisable = await application.alertService.confirm(
@@ -41,49 +39,48 @@ export const CloudBackupProvider: FunctionComponent<Props> = ({
         'Disable?',
         'Disable',
         ButtonType.Danger,
-        'Cancel'
-      );
+        'Cancel',
+      )
       if (shouldDisable) {
-        await application.settings.deleteSetting(backupFrequencySettingName);
-        await application.settings.deleteSetting(backupTokenSettingName);
+        await application.settings.deleteSetting(backupFrequencySettingName)
+        await application.settings.deleteSetting(backupTokenSettingName)
 
-        setBackupFrequency(undefined);
+        setBackupFrequency(undefined)
       }
     } catch (error) {
-      application.alertService.alert(error as string);
+      application.alertService.alert(error as string).catch(console.error)
     }
-  };
+  }
 
   const installIntegration = (event: Event) => {
     if (!isEntitledToCloudBackups) {
-      return;
+      return
     }
-    event.stopPropagation();
+    event.stopPropagation()
 
-    const authUrl = application.getCloudProviderIntegrationUrl(
-      providerName,
-      isDev
-    );
-    openInNewTab(authUrl);
-    setAuthBegan(true);
-  };
+    const authUrl = application.getCloudProviderIntegrationUrl(providerName, isDev)
+    openInNewTab(authUrl)
+    setAuthBegan(true)
+  }
 
   const performBackupNow = async () => {
     // A backup is performed anytime the setting is updated with the integration token, so just update it here
     try {
       await application.settings.updateSetting(
         backupFrequencySettingName,
-        backupFrequency as string
-      );
-      application.alertService.alert(
-        'A backup has been triggered for this provider. Please allow a couple minutes for your backup to be processed.'
-      );
+        backupFrequency as string,
+      )
+      void application.alertService.alert(
+        'A backup has been triggered for this provider. Please allow a couple minutes for your backup to be processed.',
+      )
     } catch (err) {
-      application.alertService.alert(
-        'There was an error while trying to trigger a backup for this provider. Please try again.'
-      );
+      application.alertService
+        .alert(
+          'There was an error while trying to trigger a backup for this provider. Please try again.',
+        )
+        .catch(console.error)
     }
-  };
+  }
 
   const backupSettingsData = {
     [CloudProvider.Dropbox]: {
@@ -101,115 +98,96 @@ export const CloudBackupProvider: FunctionComponent<Props> = ({
       backupFrequencySettingName: SettingName.OneDriveBackupFrequency,
       defaultBackupFrequency: OneDriveBackupFrequency.Daily,
     },
-  };
-  const {
-    backupTokenSettingName,
-    backupFrequencySettingName,
-    defaultBackupFrequency,
-  } = backupSettingsData[providerName];
+  }
+  const { backupTokenSettingName, backupFrequencySettingName, defaultBackupFrequency } =
+    backupSettingsData[providerName]
 
   const getCloudProviderIntegrationTokenFromUrl = (url: URL) => {
-    const urlSearchParams = new URLSearchParams(url.search);
-    let integrationTokenKeyInUrl = '';
+    const urlSearchParams = new URLSearchParams(url.search)
+    let integrationTokenKeyInUrl = ''
 
     switch (providerName) {
       case CloudProvider.Dropbox:
-        integrationTokenKeyInUrl = 'dbt';
-        break;
+        integrationTokenKeyInUrl = 'dbt'
+        break
       case CloudProvider.Google:
-        integrationTokenKeyInUrl = 'key';
-        break;
+        integrationTokenKeyInUrl = 'key'
+        break
       case CloudProvider.OneDrive:
-        integrationTokenKeyInUrl = 'key';
-        break;
+        integrationTokenKeyInUrl = 'key'
+        break
       default:
-        throw new Error('Invalid Cloud Provider name');
+        throw new Error('Invalid Cloud Provider name')
     }
-    return urlSearchParams.get(integrationTokenKeyInUrl);
-  };
+    return urlSearchParams.get(integrationTokenKeyInUrl)
+  }
 
   const handleKeyPress = async (event: KeyboardEvent) => {
     if (event.key === KeyboardKey.Enter) {
       try {
-        const decryptedCode = atob(confirmation);
-        const urlFromDecryptedCode = new URL(decryptedCode);
-        const cloudProviderToken =
-          getCloudProviderIntegrationTokenFromUrl(urlFromDecryptedCode);
+        const decryptedCode = atob(confirmation)
+        const urlFromDecryptedCode = new URL(decryptedCode)
+        const cloudProviderToken = getCloudProviderIntegrationTokenFromUrl(urlFromDecryptedCode)
 
         if (!cloudProviderToken) {
-          throw new Error();
+          throw new Error()
         }
-        await application.settings.updateSetting(
-          backupTokenSettingName,
-          cloudProviderToken
-        );
-        await application.settings.updateSetting(
-          backupFrequencySettingName,
-          defaultBackupFrequency
-        );
+        await application.settings.updateSetting(backupTokenSettingName, cloudProviderToken)
+        await application.settings.updateSetting(backupFrequencySettingName, defaultBackupFrequency)
 
-        setBackupFrequency(defaultBackupFrequency);
+        setBackupFrequency(defaultBackupFrequency)
 
-        setAuthBegan(false);
-        setSuccessfullyInstalled(true);
-        setConfirmation('');
+        setAuthBegan(false)
+        setSuccessfullyInstalled(true)
+        setConfirmation('')
 
         await application.alertService.alert(
-          `${providerName} has been successfully installed. Your first backup has also been queued and should be reflected in your external cloud's folder within the next few minutes.`
-        );
+          `${providerName} has been successfully installed. Your first backup has also been queued and should be reflected in your external cloud's folder within the next few minutes.`,
+        )
       } catch (e) {
-        await application.alertService.alert('Invalid code. Please try again.');
+        await application.alertService.alert('Invalid code. Please try again.')
       }
     }
-  };
+  }
 
   const handleChange = (event: Event) => {
-    setConfirmation((event.target as HTMLInputElement).value);
-  };
+    setConfirmation((event.target as HTMLInputElement).value)
+  }
 
   const getIntegrationStatus = useCallback(async () => {
     if (!application.getUser()) {
-      return;
+      return
     }
-    const frequency = await application.settings.getSetting(
-      backupFrequencySettingName
-    );
-    setBackupFrequency(frequency);
-  }, [application, backupFrequencySettingName]);
+    const frequency = await application.settings.getSetting(backupFrequencySettingName)
+    setBackupFrequency(frequency)
+  }, [application, backupFrequencySettingName])
 
   useEffect(() => {
-    getIntegrationStatus();
-  }, [getIntegrationStatus]);
+    getIntegrationStatus().catch(console.error)
+  }, [getIntegrationStatus])
 
-  const isExpanded = authBegan || successfullyInstalled;
-  const shouldShowEnableButton = !backupFrequency && !authBegan;
-  const additionalClass = isEntitledToCloudBackups
-    ? ''
-    : 'faded cursor-default pointer-events-none';
+  const isExpanded = authBegan || successfullyInstalled
+  const shouldShowEnableButton = !backupFrequency && !authBegan
+  const additionalClass = isEntitledToCloudBackups ? '' : 'faded cursor-default pointer-events-none'
 
   return (
     <div
       className={`mr-1 ${isExpanded ? 'expanded' : ' '} ${
-        shouldShowEnableButton || backupFrequency
-          ? 'flex justify-between items-center'
-          : ''
+        shouldShowEnableButton || backupFrequency ? 'flex justify-between items-center' : ''
       }`}
     >
       <div>
         <Subtitle className={additionalClass}>{providerName}</Subtitle>
 
-        {successfullyInstalled && (
-          <p>{providerName} has been successfully enabled.</p>
-        )}
+        {successfullyInstalled && <p>{providerName} has been successfully enabled.</p>}
       </div>
       {authBegan && (
         <div>
           <p className="sk-panel-row">
-            Complete authentication from the newly opened window. Upon
-            completion, a confirmation code will be displayed. Enter this code
-            below:
+            Complete authentication from the newly opened window. Upon completion, a confirmation
+            code will be displayed. Enter this code below:
           </p>
-          <div className={`mt-1`}>
+          <div className={'mt-1'}>
             <input
               className="sk-input sk-base center-text"
               placeholder="Enter confirmation code"
@@ -240,14 +218,9 @@ export const CloudBackupProvider: FunctionComponent<Props> = ({
             label="Perform Backup"
             onClick={performBackupNow}
           />
-          <Button
-            className="min-w-40"
-            variant="normal"
-            label="Disable"
-            onClick={disable}
-          />
+          <Button className="min-w-40" variant="normal" label="Disable" onClick={disable} />
         </div>
       )}
     </div>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/index.tsx b/app/assets/javascripts/Components/Preferences/Panes/Backups/CloudBackups/index.tsx
similarity index 62%
rename from app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/index.tsx
rename to app/assets/javascripts/Components/Preferences/Panes/Backups/CloudBackups/index.tsx
index a19b481fd..c2d5cb3a2 100644
--- a/app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/index.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Backups/CloudBackups/index.tsx
@@ -1,118 +1,111 @@
-import { CloudBackupProvider } from './CloudBackupProvider';
-import { useCallback, useEffect, useState } from 'preact/hooks';
-import { WebApplication } from '@/ui_models/application';
+import { CloudBackupProvider } from './CloudBackupProvider'
+import { useCallback, useEffect, useState } from 'preact/hooks'
+import { WebApplication } from '@/UIModels/Application'
 import {
   PreferencesGroup,
   PreferencesSegment,
   Subtitle,
   Text,
   Title,
-} from '@/components/Preferences/components';
-import { HorizontalSeparator } from '@/components/Shared/HorizontalSeparator';
+} from '@/Components/Preferences/PreferencesComponents'
+import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
 import {
   FeatureStatus,
   FeatureIdentifier,
   CloudProvider,
   MuteFailedCloudBackupsEmailsOption,
   SettingName,
-} from '@standardnotes/snjs';
-import { FunctionComponent } from 'preact';
+} from '@standardnotes/snjs'
+import { FunctionComponent } from 'preact'
 
-import { Switch } from '@/components/Switch';
-import { convertStringifiedBooleanToBoolean } from '@/utils';
-import { STRING_FAILED_TO_UPDATE_USER_SETTING } from '@/strings';
+import { Switch } from '@/Components/Switch'
+import { convertStringifiedBooleanToBoolean } from '@/Utils'
+import { STRING_FAILED_TO_UPDATE_USER_SETTING } from '@/Strings'
 
 const providerData = [
   { name: CloudProvider.Dropbox },
   { name: CloudProvider.Google },
   { name: CloudProvider.OneDrive },
-];
+]
 
 type Props = {
-  application: WebApplication;
-};
+  application: WebApplication
+}
 
 export const CloudLink: FunctionComponent<Props> = ({ application }) => {
-  const [isEntitledToCloudBackups, setIsEntitledToCloudBackups] =
-    useState(false);
-  const [isFailedCloudBackupEmailMuted, setIsFailedCloudBackupEmailMuted] =
-    useState(true);
-  const [isLoading, setIsLoading] = useState(false);
-  const additionalClass = isEntitledToCloudBackups
-    ? ''
-    : 'faded cursor-default pointer-events-none';
+  const [isEntitledToCloudBackups, setIsEntitledToCloudBackups] = useState(false)
+  const [isFailedCloudBackupEmailMuted, setIsFailedCloudBackupEmailMuted] = useState(true)
+  const [isLoading, setIsLoading] = useState(false)
+  const additionalClass = isEntitledToCloudBackups ? '' : 'faded cursor-default pointer-events-none'
 
   const loadIsFailedCloudBackupEmailMutedSetting = useCallback(async () => {
     if (!application.getUser()) {
-      return;
+      return
     }
-    setIsLoading(true);
+    setIsLoading(true)
 
     try {
-      const userSettings = await application.settings.listSettings();
+      const userSettings = await application.settings.listSettings()
       setIsFailedCloudBackupEmailMuted(
         convertStringifiedBooleanToBoolean(
           userSettings.getSettingValue(
             SettingName.MuteFailedCloudBackupsEmails,
-            MuteFailedCloudBackupsEmailsOption.NotMuted
-          )
-        )
-      );
+            MuteFailedCloudBackupsEmailsOption.NotMuted,
+          ),
+        ),
+      )
     } catch (error) {
-      console.error(error);
+      console.error(error)
     } finally {
-      setIsLoading(false);
+      setIsLoading(false)
     }
-  }, [application]);
+  }, [application])
 
   useEffect(() => {
     const dailyDropboxBackupStatus = application.features.getFeatureStatus(
-      FeatureIdentifier.DailyDropboxBackup
-    );
+      FeatureIdentifier.DailyDropboxBackup,
+    )
     const dailyGdriveBackupStatus = application.features.getFeatureStatus(
-      FeatureIdentifier.DailyGDriveBackup
-    );
+      FeatureIdentifier.DailyGDriveBackup,
+    )
     const dailyOneDriveBackupStatus = application.features.getFeatureStatus(
-      FeatureIdentifier.DailyOneDriveBackup
-    );
+      FeatureIdentifier.DailyOneDriveBackup,
+    )
     const isCloudBackupsAllowed = [
       dailyDropboxBackupStatus,
       dailyGdriveBackupStatus,
       dailyOneDriveBackupStatus,
-    ].every((status) => status === FeatureStatus.Entitled);
+    ].every((status) => status === FeatureStatus.Entitled)
 
-    setIsEntitledToCloudBackups(isCloudBackupsAllowed);
-    loadIsFailedCloudBackupEmailMutedSetting();
-  }, [application, loadIsFailedCloudBackupEmailMutedSetting]);
+    setIsEntitledToCloudBackups(isCloudBackupsAllowed)
+    loadIsFailedCloudBackupEmailMutedSetting().catch(console.error)
+  }, [application, loadIsFailedCloudBackupEmailMutedSetting])
 
-  const updateSetting = async (
-    settingName: SettingName,
-    payload: string
-  ): Promise<boolean> => {
+  const updateSetting = async (settingName: SettingName, payload: string): Promise<boolean> => {
     try {
-      await application.settings.updateSetting(settingName, payload);
-      return true;
+      await application.settings.updateSetting(settingName, payload)
+      return true
     } catch (e) {
-      application.alertService.alert(STRING_FAILED_TO_UPDATE_USER_SETTING);
-      return false;
+      application.alertService.alert(STRING_FAILED_TO_UPDATE_USER_SETTING).catch(console.error)
+      return false
     }
-  };
+  }
 
   const toggleMuteFailedCloudBackupEmails = async () => {
     if (!isEntitledToCloudBackups) {
-      return;
+      return
     }
-    const previousValue = isFailedCloudBackupEmailMuted;
-    setIsFailedCloudBackupEmailMuted(!isFailedCloudBackupEmailMuted);
+    const previousValue = isFailedCloudBackupEmailMuted
+    setIsFailedCloudBackupEmailMuted(!isFailedCloudBackupEmailMuted)
 
     const updateResult = await updateSetting(
       SettingName.MuteFailedCloudBackupsEmails,
-      `${!isFailedCloudBackupEmailMuted}`
-    );
+      `${!isFailedCloudBackupEmailMuted}`,
+    )
     if (!updateResult) {
-      setIsFailedCloudBackupEmailMuted(previousValue);
+      setIsFailedCloudBackupEmailMuted(previousValue)
     }
-  };
+  }
 
   return (
     <PreferencesGroup>
@@ -122,8 +115,8 @@ export const CloudLink: FunctionComponent<Props> = ({ application }) => {
           <>
             <Text>
               A <span className={'font-bold'}>Plus</span> or{' '}
-              <span className={'font-bold'}>Pro</span> subscription plan is
-              required to enable Cloud Backups.{' '}
+              <span className={'font-bold'}>Pro</span> subscription plan is required to enable Cloud
+              Backups.{' '}
               <a target="_blank" href="https://standardnotes.com/features">
                 Learn more
               </a>
@@ -134,8 +127,8 @@ export const CloudLink: FunctionComponent<Props> = ({ application }) => {
         )}
         <div>
           <Text className={additionalClass}>
-            Configure the integrations below to enable automatic daily backups
-            of your encrypted data set to your third-party cloud provider.
+            Configure the integrations below to enable automatic daily backups of your encrypted
+            data set to your third-party cloud provider.
           </Text>
           <div>
             <HorizontalSeparator classes={`mt-3 mb-3 ${additionalClass}`} />
@@ -147,9 +140,7 @@ export const CloudLink: FunctionComponent<Props> = ({ application }) => {
                     providerName={name}
                     isEntitledToCloudBackups={isEntitledToCloudBackups}
                   />
-                  <HorizontalSeparator
-                    classes={`mt-3 mb-3 ${additionalClass}`}
-                  />
+                  <HorizontalSeparator classes={`mt-3 mb-3 ${additionalClass}`} />
                 </>
               ))}
             </div>
@@ -159,9 +150,7 @@ export const CloudLink: FunctionComponent<Props> = ({ application }) => {
             <Subtitle>Email preferences</Subtitle>
             <div className="flex items-center justify-between mt-1">
               <div className="flex flex-col">
-                <Text>
-                  Receive a notification email if a cloud backup fails.
-                </Text>
+                <Text>Receive a notification email if a cloud backup fails.</Text>
               </div>
               {isLoading ? (
                 <div className={'sk-spinner info small'} />
@@ -177,5 +166,5 @@ export const CloudLink: FunctionComponent<Props> = ({ application }) => {
         </div>
       </PreferencesSegment>
     </PreferencesGroup>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/components/Preferences/panes/backups-segments/DataBackups.tsx b/app/assets/javascripts/Components/Preferences/Panes/Backups/DataBackups.tsx
similarity index 57%
rename from app/assets/javascripts/components/Preferences/panes/backups-segments/DataBackups.tsx
rename to app/assets/javascripts/Components/Preferences/Panes/Backups/DataBackups.tsx
index 9218952df..bd5f660b3 100644
--- a/app/assets/javascripts/components/Preferences/panes/backups-segments/DataBackups.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Backups/DataBackups.tsx
@@ -1,5 +1,5 @@
-import { isDesktopApplication } from '@/utils';
-import { alertDialog } from '@Services/alertService';
+import { isDesktopApplication } from '@/Utils'
+import { alertDialog } from '@/Services/AlertService'
 import {
   STRING_IMPORT_SUCCESS,
   STRING_INVALID_IMPORT_FILE,
@@ -9,158 +9,142 @@ import {
   STRING_E2E_ENABLED,
   STRING_LOCAL_ENC_ENABLED,
   STRING_ENC_NOT_ENABLED,
-} from '@/strings';
-import { BackupFile } from '@standardnotes/snjs';
-import { useCallback, useEffect, 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';
-import {
-  PreferencesGroup,
-  PreferencesSegment,
-  Title,
-  Text,
-  Subtitle,
-} from '../../components';
-import { Button } from '@/components/Button';
+} from '@/Strings'
+import { BackupFile } from '@standardnotes/snjs'
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
+import { WebApplication } from '@/UIModels/Application'
+import { JSXInternal } from 'preact/src/jsx'
+import TargetedEvent = JSXInternal.TargetedEvent
+import { AppState } from '@/UIModels/AppState'
+import { observer } from 'mobx-react-lite'
+import { PreferencesGroup, PreferencesSegment, Title, Text, Subtitle } from '@/Components/Preferences/PreferencesComponents'
+import { Button } from '@/Components/Button/Button'
 
 type Props = {
-  application: WebApplication;
-  appState: AppState;
-};
+  application: WebApplication
+  appState: AppState
+}
 
 export const DataBackups = observer(({ application, appState }: Props) => {
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const [isImportDataLoading, setIsImportDataLoading] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const [isImportDataLoading, setIsImportDataLoading] = useState(false)
   const {
     isBackupEncrypted,
     isEncryptionEnabled,
     setIsBackupEncrypted,
     setIsEncryptionEnabled,
     setEncryptionStatusString,
-  } = appState.accountMenu;
+  } = appState.accountMenu
 
   const refreshEncryptionStatus = useCallback(() => {
-    const hasUser = application.hasAccount();
-    const hasPasscode = application.hasPasscode();
+    const hasUser = application.hasAccount()
+    const hasPasscode = application.hasPasscode()
 
-    const encryptionEnabled = hasUser || hasPasscode;
+    const encryptionEnabled = hasUser || hasPasscode
 
     const encryptionStatusString = hasUser
       ? STRING_E2E_ENABLED
       : hasPasscode
       ? STRING_LOCAL_ENC_ENABLED
-      : STRING_ENC_NOT_ENABLED;
+      : STRING_ENC_NOT_ENABLED
 
-    setEncryptionStatusString(encryptionStatusString);
-    setIsEncryptionEnabled(encryptionEnabled);
-    setIsBackupEncrypted(encryptionEnabled);
-  }, [
-    application,
-    setEncryptionStatusString,
-    setIsBackupEncrypted,
-    setIsEncryptionEnabled,
-  ]);
+    setEncryptionStatusString(encryptionStatusString)
+    setIsEncryptionEnabled(encryptionEnabled)
+    setIsBackupEncrypted(encryptionEnabled)
+  }, [application, setEncryptionStatusString, setIsBackupEncrypted, setIsEncryptionEnabled])
 
   useEffect(() => {
-    refreshEncryptionStatus();
-  }, [refreshEncryptionStatus]);
+    refreshEncryptionStatus()
+  }, [refreshEncryptionStatus])
 
   const downloadDataArchive = () => {
-    application.getArchiveService().downloadBackup(isBackupEncrypted);
-  };
+    application.getArchiveService().downloadBackup(isBackupEncrypted).catch(console.error)
+  }
 
   const readFile = async (file: File): Promise<any> => {
     if (file.type === 'application/zip') {
-      application.alertService.alert(STRING_IMPORTING_ZIP_FILE);
-      return;
+      application.alertService.alert(STRING_IMPORTING_ZIP_FILE).catch(console.error)
+      return
     }
 
     return new Promise((resolve) => {
-      const reader = new FileReader();
+      const reader = new FileReader()
       reader.onload = (e) => {
         try {
-          const data = JSON.parse(e.target!.result as string);
-          resolve(data);
+          const data = JSON.parse(e.target?.result as string)
+          resolve(data)
         } catch (e) {
-          application.alertService.alert(STRING_INVALID_IMPORT_FILE);
+          application.alertService.alert(STRING_INVALID_IMPORT_FILE).catch(console.error)
         }
-      };
-      reader.readAsText(file);
-    });
-  };
+      }
+      reader.readAsText(file)
+    })
+  }
 
   const performImport = async (data: BackupFile) => {
-    setIsImportDataLoading(true);
+    setIsImportDataLoading(true)
 
-    const result = await application.mutator.importData(data);
+    const result = await application.mutator.importData(data)
 
-    setIsImportDataLoading(false);
+    setIsImportDataLoading(false)
 
     if (!result) {
-      return;
+      return
     }
 
-    let statusText = STRING_IMPORT_SUCCESS;
+    let statusText = STRING_IMPORT_SUCCESS
     if ('error' in result) {
-      statusText = result.error.text;
+      statusText = result.error.text
     } else if (result.errorCount) {
-      statusText = StringImportError(result.errorCount);
+      statusText = StringImportError(result.errorCount)
     }
     void alertDialog({
       text: statusText,
-    });
-  };
+    })
+  }
 
-  const importFileSelected = async (
-    event: TargetedEvent<HTMLInputElement, Event>
-  ) => {
-    const { files } = event.target as HTMLInputElement;
+  const importFileSelected = async (event: TargetedEvent<HTMLInputElement, Event>) => {
+    const { files } = event.target as HTMLInputElement
 
     if (!files) {
-      return;
+      return
     }
-    const file = files[0];
-    const data = await readFile(file);
+    const file = files[0]
+    const data = await readFile(file)
     if (!data) {
-      return;
+      return
     }
 
-    const version =
-      data.version || data.keyParams?.version || data.auth_params?.version;
+    const version = data.version || data.keyParams?.version || data.auth_params?.version
     if (!version) {
-      await performImport(data);
-      return;
+      await performImport(data)
+      return
     }
 
     if (application.protocolService.supportedVersions().includes(version)) {
-      await performImport(data);
+      await performImport(data)
     } else {
-      setIsImportDataLoading(false);
-      void alertDialog({ text: STRING_UNSUPPORTED_BACKUP_FILE_VERSION });
+      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
-  ) => {
+  const handleImportFile = (event: TargetedEvent<HTMLSpanElement, Event> | KeyboardEvent) => {
     if (event instanceof KeyboardEvent) {
-      const { code } = event;
+      const { code } = event
 
       // Process only when "Enter" or "Space" keys are pressed
       if (code !== 'Enter' && code !== 'Space') {
-        return;
+        return
       }
       // Don't proceed the event's default action
       // (like scrolling in case the "space" key is pressed)
-      event.preventDefault();
+      event.preventDefault()
     }
 
-    (fileInputRef.current as HTMLInputElement).click();
-  };
+    ;(fileInputRef.current as HTMLInputElement).click()
+  }
 
   return (
     <>
@@ -170,8 +154,8 @@ export const DataBackups = observer(({ application, appState }: Props) => {
 
           {!isDesktopApplication() && (
             <Text className="mb-3">
-              Backups are automatically created on desktop and can be managed
-              via the "Backups" top-level menu.
+              Backups are automatically created on desktop and can be managed via the "Backups"
+              top-level menu.
             </Text>
           )}
 
@@ -211,23 +195,17 @@ export const DataBackups = observer(({ application, appState }: Props) => {
           <Subtitle>Import a previously saved backup file</Subtitle>
 
           <div class="flex flex-row items-center mt-3">
-            <Button
-              variant="normal"
-              label="Import backup"
-              onClick={handleImportFile}
-            />
+            <Button variant="normal" label="Import backup" onClick={handleImportFile} />
             <input
               type="file"
               ref={fileInputRef}
               onChange={importFileSelected}
               className="hidden"
             />
-            {isImportDataLoading && (
-              <div className="sk-spinner normal info ml-4" />
-            )}
+            {isImportDataLoading && <div className="sk-spinner normal info ml-4" />}
           </div>
         </PreferencesSegment>
       </PreferencesGroup>
     </>
-  );
-});
+  )
+})
diff --git a/app/assets/javascripts/components/Preferences/panes/backups-segments/EmailBackups.tsx b/app/assets/javascripts/Components/Preferences/Panes/Backups/EmailBackups.tsx
similarity index 57%
rename from app/assets/javascripts/components/Preferences/panes/backups-segments/EmailBackups.tsx
rename to app/assets/javascripts/Components/Preferences/Panes/Backups/EmailBackups.tsx
index 16d634bcd..350c18801 100644
--- a/app/assets/javascripts/components/Preferences/panes/backups-segments/EmailBackups.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Backups/EmailBackups.tsx
@@ -1,148 +1,123 @@
-import {
-  convertStringifiedBooleanToBoolean,
-  isDesktopApplication,
-} from '@/utils';
-import { STRING_FAILED_TO_UPDATE_USER_SETTING } from '@/strings';
-import { useCallback, useEffect, useState } from 'preact/hooks';
-import { WebApplication } from '@/ui_models/application';
-import { observer } from 'mobx-react-lite';
-import {
-  PreferencesGroup,
-  PreferencesSegment,
-  Subtitle,
-  Text,
-  Title,
-} from '../../components';
-import { Dropdown, DropdownItem } from '@/components/Dropdown';
-import { Switch } from '@/components/Switch';
-import { HorizontalSeparator } from '@/components/Shared/HorizontalSeparator';
+import { convertStringifiedBooleanToBoolean, isDesktopApplication } from '@/Utils'
+import { STRING_FAILED_TO_UPDATE_USER_SETTING } from '@/Strings'
+import { useCallback, useEffect, useState } from 'preact/hooks'
+import { WebApplication } from '@/UIModels/Application'
+import { observer } from 'mobx-react-lite'
+import { PreferencesGroup, PreferencesSegment, Subtitle, Text, Title } from '@/Components/Preferences/PreferencesComponents'
+import { Dropdown, DropdownItem } from '@/Components/Dropdown'
+import { Switch } from '@/Components/Switch'
+import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
 import {
   FeatureStatus,
   FeatureIdentifier,
   EmailBackupFrequency,
   MuteFailedBackupsEmailsOption,
   SettingName,
-} from '@standardnotes/snjs';
+} from '@standardnotes/snjs'
 
 type Props = {
-  application: WebApplication;
-};
+  application: WebApplication
+}
 
 export const EmailBackups = observer(({ application }: Props) => {
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false)
   const [emailFrequency, setEmailFrequency] = useState<EmailBackupFrequency>(
-    EmailBackupFrequency.Disabled
-  );
-  const [emailFrequencyOptions, setEmailFrequencyOptions] = useState<
-    DropdownItem[]
-  >([]);
-  const [isFailedBackupEmailMuted, setIsFailedBackupEmailMuted] =
-    useState(true);
-  const [isEntitledToEmailBackups, setIsEntitledToEmailBackups] =
-    useState(false);
+    EmailBackupFrequency.Disabled,
+  )
+  const [emailFrequencyOptions, setEmailFrequencyOptions] = useState<DropdownItem[]>([])
+  const [isFailedBackupEmailMuted, setIsFailedBackupEmailMuted] = useState(true)
+  const [isEntitledToEmailBackups, setIsEntitledToEmailBackups] = useState(false)
 
   const loadEmailFrequencySetting = useCallback(async () => {
     if (!application.getUser()) {
-      return;
+      return
     }
-    setIsLoading(true);
+    setIsLoading(true)
 
     try {
-      const userSettings = await application.settings.listSettings();
+      const userSettings = await application.settings.listSettings()
       setEmailFrequency(
         userSettings.getSettingValue<EmailBackupFrequency>(
           SettingName.EmailBackupFrequency,
-          EmailBackupFrequency.Disabled
-        )
-      );
+          EmailBackupFrequency.Disabled,
+        ),
+      )
       setIsFailedBackupEmailMuted(
         convertStringifiedBooleanToBoolean(
           userSettings.getSettingValue<MuteFailedBackupsEmailsOption>(
             SettingName.MuteFailedBackupsEmails,
-            MuteFailedBackupsEmailsOption.NotMuted
-          )
-        )
-      );
+            MuteFailedBackupsEmailsOption.NotMuted,
+          ),
+        ),
+      )
     } catch (error) {
-      console.error(error);
+      console.error(error)
     } finally {
-      setIsLoading(false);
+      setIsLoading(false)
     }
-  }, [application]);
+  }, [application])
 
   useEffect(() => {
     const emailBackupsFeatureStatus = application.features.getFeatureStatus(
-      FeatureIdentifier.DailyEmailBackup
-    );
-    setIsEntitledToEmailBackups(
-      emailBackupsFeatureStatus === FeatureStatus.Entitled
-    );
+      FeatureIdentifier.DailyEmailBackup,
+    )
+    setIsEntitledToEmailBackups(emailBackupsFeatureStatus === FeatureStatus.Entitled)
 
-    const frequencyOptions = [];
+    const frequencyOptions = []
     for (const frequency in EmailBackupFrequency) {
-      const frequencyValue =
-        EmailBackupFrequency[frequency as keyof typeof EmailBackupFrequency];
+      const frequencyValue = EmailBackupFrequency[frequency as keyof typeof EmailBackupFrequency]
       frequencyOptions.push({
         value: frequencyValue,
-        label:
-          application.settings.getEmailBackupFrequencyOptionLabel(
-            frequencyValue
-          ),
-      });
+        label: application.settings.getEmailBackupFrequencyOptionLabel(frequencyValue),
+      })
     }
-    setEmailFrequencyOptions(frequencyOptions);
+    setEmailFrequencyOptions(frequencyOptions)
 
-    loadEmailFrequencySetting();
-  }, [application, loadEmailFrequencySetting]);
+    loadEmailFrequencySetting().catch(console.error)
+  }, [application, loadEmailFrequencySetting])
 
-  const updateSetting = async (
-    settingName: SettingName,
-    payload: string
-  ): Promise<boolean> => {
+  const updateSetting = async (settingName: SettingName, payload: string): Promise<boolean> => {
     try {
-      await application.settings.updateSetting(settingName, payload, false);
-      return true;
+      await application.settings.updateSetting(settingName, payload, false)
+      return true
     } catch (e) {
-      application.alertService.alert(STRING_FAILED_TO_UPDATE_USER_SETTING);
-      return false;
+      application.alertService.alert(STRING_FAILED_TO_UPDATE_USER_SETTING).catch(console.error)
+      return false
     }
-  };
+  }
 
   const updateEmailFrequency = async (frequency: EmailBackupFrequency) => {
-    const previousFrequency = emailFrequency;
-    setEmailFrequency(frequency);
+    const previousFrequency = emailFrequency
+    setEmailFrequency(frequency)
 
-    const updateResult = await updateSetting(
-      SettingName.EmailBackupFrequency,
-      frequency
-    );
+    const updateResult = await updateSetting(SettingName.EmailBackupFrequency, frequency)
     if (!updateResult) {
-      setEmailFrequency(previousFrequency);
+      setEmailFrequency(previousFrequency)
     }
-  };
+  }
 
   const toggleMuteFailedBackupEmails = async () => {
     if (!isEntitledToEmailBackups) {
-      return;
+      return
     }
-    const previousValue = isFailedBackupEmailMuted;
-    setIsFailedBackupEmailMuted(!isFailedBackupEmailMuted);
+    const previousValue = isFailedBackupEmailMuted
+    setIsFailedBackupEmailMuted(!isFailedBackupEmailMuted)
 
     const updateResult = await updateSetting(
       SettingName.MuteFailedBackupsEmails,
-      `${!isFailedBackupEmailMuted}`
-    );
+      `${!isFailedBackupEmailMuted}`,
+    )
     if (!updateResult) {
-      setIsFailedBackupEmailMuted(previousValue);
+      setIsFailedBackupEmailMuted(previousValue)
     }
-  };
+  }
 
   const handleEmailFrequencyChange = (item: string) => {
     if (!isEntitledToEmailBackups) {
-      return;
+      return
     }
-    updateEmailFrequency(item as EmailBackupFrequency);
-  };
+    updateEmailFrequency(item as EmailBackupFrequency).catch(console.error)
+  }
 
   return (
     <PreferencesGroup>
@@ -152,8 +127,8 @@ export const EmailBackups = observer(({ application }: Props) => {
           <>
             <Text>
               A <span className={'font-bold'}>Plus</span> or{' '}
-              <span className={'font-bold'}>Pro</span> subscription plan is
-              required to enable Email Backups.{' '}
+              <span className={'font-bold'}>Pro</span> subscription plan is required to enable Email
+              Backups.{' '}
               <a target="_blank" href="https://standardnotes.com/features">
                 Learn more
               </a>
@@ -162,17 +137,11 @@ export const EmailBackups = observer(({ application }: Props) => {
             <HorizontalSeparator classes="mt-3 mb-3" />
           </>
         )}
-        <div
-          className={
-            isEntitledToEmailBackups
-              ? ''
-              : 'faded cursor-default pointer-events-none'
-          }
-        >
+        <div className={isEntitledToEmailBackups ? '' : 'faded cursor-default pointer-events-none'}>
           {!isDesktopApplication() && (
             <Text className="mb-3">
-              Daily encrypted email backups of your entire data set delivered
-              directly to your inbox.
+              Daily encrypted email backups of your entire data set delivered directly to your
+              inbox.
             </Text>
           )}
           <Subtitle>Email frequency</Subtitle>
@@ -195,9 +164,7 @@ export const EmailBackups = observer(({ application }: Props) => {
           <Subtitle>Email preferences</Subtitle>
           <div className="flex items-center justify-between">
             <div className="flex flex-col">
-              <Text>
-                Receive a notification email if an email backup fails.
-              </Text>
+              <Text>Receive a notification email if an email backup fails.</Text>
             </div>
             {isLoading ? (
               <div className={'sk-spinner info small'} />
@@ -212,5 +179,5 @@ export const EmailBackups = observer(({ application }: Props) => {
         </div>
       </PreferencesSegment>
     </PreferencesGroup>
-  );
-});
+  )
+})
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Backups/index.tsx b/app/assets/javascripts/Components/Preferences/Panes/Backups/index.tsx
new file mode 100644
index 000000000..2912525c7
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/Backups/index.tsx
@@ -0,0 +1,22 @@
+import { WebApplication } from '@/UIModels/Application'
+import { AppState } from '@/UIModels/AppState'
+import { FunctionComponent } from 'preact'
+import { PreferencesPane } from '@/Components/Preferences/PreferencesComponents'
+import { CloudLink } from './CloudBackups'
+import { DataBackups } from './DataBackups'
+import { EmailBackups } from './EmailBackups'
+
+interface Props {
+  appState: AppState
+  application: WebApplication
+}
+
+export const Backups: FunctionComponent<Props> = ({ application, appState }) => {
+  return (
+    <PreferencesPane>
+      <DataBackups application={application} appState={appState} />
+      <EmailBackups application={application} />
+      <CloudLink application={application} />
+    </PreferencesPane>
+  )
+}
diff --git a/app/assets/javascripts/components/Preferences/panes/CloudLink.tsx b/app/assets/javascripts/Components/Preferences/Panes/CloudLink.tsx
similarity index 65%
rename from app/assets/javascripts/components/Preferences/panes/CloudLink.tsx
rename to app/assets/javascripts/Components/Preferences/Panes/CloudLink.tsx
index 930d37d15..a9c85db1f 100644
--- a/app/assets/javascripts/components/Preferences/panes/CloudLink.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/CloudLink.tsx
@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'preact';
+import { FunctionComponent } from 'preact'
 import {
   Title,
   Subtitle,
@@ -7,7 +7,7 @@ import {
   PreferencesGroup,
   PreferencesPane,
   PreferencesSegment,
-} from '../components';
+} from '@/Components/Preferences/PreferencesComponents'
 
 export const CloudLink: FunctionComponent = () => (
   <PreferencesPane>
@@ -17,11 +17,10 @@ export const CloudLink: FunctionComponent = () => (
         <div className="h-2 w-full" />
         <Subtitle>Who can read my private notes?</Subtitle>
         <Text>
-          Quite simply: no one but you. Not us, not your ISP, not a hacker, and
-          not a government agency. As long as you keep your password safe, and
-          your password is reasonably strong, then you are the only person in
-          the world with the ability to decrypt your notes. For more on how we
-          handle your privacy and security, check out our easy to read{' '}
+          Quite simply: no one but you. Not us, not your ISP, not a hacker, and not a government
+          agency. As long as you keep your password safe, and your password is reasonably strong,
+          then you are the only person in the world with the ability to decrypt your notes. For more
+          on how we handle your privacy and security, check out our easy to read{' '}
           <a target="_blank" href="https://standardnotes.com/privacy">
             Privacy Manifesto.
           </a>
@@ -30,18 +29,17 @@ export const CloudLink: FunctionComponent = () => (
       <PreferencesSegment>
         <Subtitle>Can I collaborate with others on a note?</Subtitle>
         <Text>
-          Because of our encrypted architecture, Standard Notes does not
-          currently provide a real-time collaboration solution. Multiple users
-          can share the same account however, but editing at the same time may
-          result in sync conflicts, which may result in the duplication of
-          notes.
+          Because of our encrypted architecture, Standard Notes does not currently provide a
+          real-time collaboration solution. Multiple users can share the same account however, but
+          editing at the same time may result in sync conflicts, which may result in the duplication
+          of notes.
         </Text>
       </PreferencesSegment>
       <PreferencesSegment>
         <Subtitle>Can I use Standard Notes totally offline?</Subtitle>
         <Text>
-          Standard Notes can be used totally offline without an account, and
-          without an internet connection. You can find{' '}
+          Standard Notes can be used totally offline without an account, and without an internet
+          connection. You can find{' '}
           <a
             target="_blank"
             href="https://standardnotes.com/help/59/can-i-use-standard-notes-totally-offline"
@@ -52,20 +50,15 @@ export const CloudLink: FunctionComponent = () => (
       </PreferencesSegment>
       <PreferencesSegment>
         <Subtitle>Can’t find your question here?</Subtitle>
-        <LinkButton
-          className="mt-3"
-          label="Open FAQ"
-          link="https://standardnotes.com/help"
-        />
+        <LinkButton className="mt-3" label="Open FAQ" link="https://standardnotes.com/help" />
       </PreferencesSegment>
     </PreferencesGroup>
     <PreferencesGroup>
       <PreferencesSegment>
         <Title>Community forum</Title>
         <Text>
-          If you have an issue, found a bug or want to suggest a feature, you
-          can browse or post to the forum. It’s recommended for non-account
-          related issues. Please read our{' '}
+          If you have an issue, found a bug or want to suggest a feature, you can browse or post to
+          the forum. It’s recommended for non-account related issues. Please read our{' '}
           <a target="_blank" href="https://standardnotes.com/longevity/">
             Longevity statement
           </a>{' '}
@@ -82,9 +75,9 @@ export const CloudLink: FunctionComponent = () => (
       <PreferencesSegment>
         <Title>Community groups</Title>
         <Text>
-          Want to meet other passionate note-takers and privacy enthusiasts?
-          Want to share your feedback with us? Join the Standard Notes community
-          groups for discussions on security, themes, editors and more.
+          Want to meet other passionate note-takers and privacy enthusiasts? Want to share your
+          feedback with us? Join the Standard Notes community groups for discussions on security,
+          themes, editors and more.
         </Text>
         <LinkButton
           className="mt-3"
@@ -101,15 +94,9 @@ export const CloudLink: FunctionComponent = () => (
     <PreferencesGroup>
       <PreferencesSegment>
         <Title>Account related issue?</Title>
-        <Text>
-          Send an email to help@standardnotes.com and we’ll sort it out.
-        </Text>
-        <LinkButton
-          className="mt-3"
-          link="mailto: help@standardnotes.com"
-          label="Email us"
-        />
+        <Text>Send an email to help@standardnotes.com and we’ll sort it out.</Text>
+        <LinkButton className="mt-3" link="mailto: help@standardnotes.com" label="Email us" />
       </PreferencesSegment>
     </PreferencesGroup>
   </PreferencesPane>
-);
+)
diff --git a/app/assets/javascripts/components/Preferences/panes/extensions-segments/ConfirmCustomExtension.tsx b/app/assets/javascripts/Components/Preferences/Panes/Extensions/ConfirmCustomExtension.tsx
similarity index 82%
rename from app/assets/javascripts/components/Preferences/panes/extensions-segments/ConfirmCustomExtension.tsx
rename to app/assets/javascripts/Components/Preferences/Panes/Extensions/ConfirmCustomExtension.tsx
index 60333b60d..887d4fe1f 100644
--- a/app/assets/javascripts/components/Preferences/panes/extensions-segments/ConfirmCustomExtension.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Extensions/ConfirmCustomExtension.tsx
@@ -1,11 +1,11 @@
-import { DisplayStringForContentType, SNComponent } from '@standardnotes/snjs';
-import { Button } from '@/components/Button';
-import { FunctionComponent } from 'preact';
-import { Title, Text, Subtitle, PreferencesSegment } from '../../components';
+import { DisplayStringForContentType, SNComponent } from '@standardnotes/snjs'
+import { Button } from '@/Components/Button/Button'
+import { FunctionComponent } from 'preact'
+import { Title, Text, Subtitle, PreferencesSegment } from '@/Components/Preferences/PreferencesComponents'
 
 export const ConfirmCustomExtension: FunctionComponent<{
-  component: SNComponent;
-  callback: (confirmed: boolean) => void;
+  component: SNComponent
+  callback: (confirmed: boolean) => void
 }> = ({ component, callback }) => {
   const fields = [
     {
@@ -32,7 +32,7 @@ export const ConfirmCustomExtension: FunctionComponent<{
       label: 'Extension Type',
       value: DisplayStringForContentType(component.content_type),
     },
-  ];
+  ]
 
   return (
     <PreferencesSegment>
@@ -40,7 +40,7 @@ export const ConfirmCustomExtension: FunctionComponent<{
 
       {fields.map((field) => {
         if (!field.value) {
-          return undefined;
+          return undefined
         }
         return (
           <>
@@ -48,7 +48,7 @@ export const ConfirmCustomExtension: FunctionComponent<{
             <Text className={'wrap'}>{field.value}</Text>
             <div className="min-h-2" />
           </>
-        );
+        )
       })}
 
       <div className="min-h-3" />
@@ -71,5 +71,5 @@ export const ConfirmCustomExtension: FunctionComponent<{
         />
       </div>
     </PreferencesSegment>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionItem.tsx b/app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionItem.tsx
new file mode 100644
index 000000000..deae4da31
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionItem.tsx
@@ -0,0 +1,104 @@
+import { FunctionComponent } from 'preact'
+import { SNComponent } from '@standardnotes/snjs'
+import { PreferencesSegment, SubtitleLight, Title } from '@/Components/Preferences/PreferencesComponents'
+import { Switch } from '@/Components/Switch'
+import { WebApplication } from '@/UIModels/Application'
+import { useState } from 'preact/hooks'
+import { Button } from '@/Components/Button/Button'
+import { RenameExtension } from './RenameExtension'
+
+const UseHosted: FunctionComponent<{
+  offlineOnly: boolean
+  toggleOfllineOnly: () => void
+}> = ({ offlineOnly, toggleOfllineOnly }) => (
+  <div className="flex flex-row">
+    <SubtitleLight className="flex-grow">Use hosted when local is unavailable</SubtitleLight>
+    <Switch onChange={toggleOfllineOnly} checked={!offlineOnly} />
+  </div>
+)
+
+export interface ExtensionItemProps {
+  application: WebApplication
+  extension: SNComponent
+  first: boolean
+  latestVersion: string | undefined
+  uninstall: (extension: SNComponent) => void
+  toggleActivate?: (extension: SNComponent) => void
+}
+
+export const ExtensionItem: FunctionComponent<ExtensionItemProps> = ({
+  application,
+  extension,
+  first,
+  uninstall,
+}) => {
+  const [offlineOnly, setOfflineOnly] = useState(extension.offlineOnly ?? false)
+  const [extensionName, setExtensionName] = useState(extension.name)
+
+  const toggleOffllineOnly = () => {
+    const newOfflineOnly = !offlineOnly
+    setOfflineOnly(newOfflineOnly)
+    application.mutator
+      .changeAndSaveItem(extension, (m: any) => {
+        if (m.content == undefined) {
+          m.content = {}
+        }
+        m.content.offlineOnly = newOfflineOnly
+      })
+      .then((item) => {
+        const component = item as SNComponent
+        setOfflineOnly(component.offlineOnly)
+      })
+      .catch((e) => {
+        console.error(e)
+      })
+  }
+
+  const changeExtensionName = (newName: string) => {
+    setExtensionName(newName)
+    application.mutator
+      .changeAndSaveItem(extension, (m: any) => {
+        if (m.content == undefined) {
+          m.content = {}
+        }
+        m.content.name = newName
+      })
+      .then((item) => {
+        const component = item as SNComponent
+        setExtensionName(component.name)
+      })
+      .catch(console.error)
+  }
+
+  const localInstallable = extension.package_info.download_url
+  const isThirParty = application.features.isThirdPartyFeature(extension.identifier)
+
+  return (
+    <PreferencesSegment classes={'mb-5'}>
+      {first && (
+        <>
+          <Title>Extensions</Title>
+        </>
+      )}
+
+      <RenameExtension extensionName={extensionName} changeName={changeExtensionName} />
+      <div className="min-h-2" />
+
+      {isThirParty && localInstallable && (
+        <UseHosted offlineOnly={offlineOnly} toggleOfllineOnly={toggleOffllineOnly} />
+      )}
+
+      <>
+        <div className="min-h-2" />
+        <div className="flex flex-row">
+          <Button
+            className="min-w-20"
+            variant="normal"
+            label="Uninstall"
+            onClick={() => uninstall(extension)}
+          />
+        </div>
+      </>
+    </PreferencesSegment>
+  )
+}
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionsLatestVersions.ts b/app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionsLatestVersions.ts
new file mode 100644
index 000000000..c24f8daa1
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionsLatestVersions.ts
@@ -0,0 +1,42 @@
+import { WebApplication } from '@/UIModels/Application'
+import { SNComponent, ClientDisplayableError, FeatureDescription } from '@standardnotes/snjs'
+import { makeAutoObservable, observable } from 'mobx'
+
+export class ExtensionsLatestVersions {
+  static async load(application: WebApplication): Promise<ExtensionsLatestVersions | undefined> {
+    const response = await application.getAvailableSubscriptions()
+
+    if (response instanceof ClientDisplayableError) {
+      return undefined
+    }
+
+    const versionMap: Map<string, string> = new Map()
+    collectFeatures(response.CORE_PLAN?.features as FeatureDescription[], versionMap)
+    collectFeatures(response.PLUS_PLAN?.features as FeatureDescription[], versionMap)
+    collectFeatures(response.PRO_PLAN?.features as FeatureDescription[], versionMap)
+
+    return new ExtensionsLatestVersions(versionMap)
+  }
+
+  constructor(private readonly latestVersionsMap: Map<string, string>) {
+    makeAutoObservable<ExtensionsLatestVersions, 'latestVersionsMap'>(this, {
+      latestVersionsMap: observable.ref,
+    })
+  }
+
+  getVersion(extension: SNComponent): string | undefined {
+    return this.latestVersionsMap.get(extension.package_info.identifier)
+  }
+}
+
+function collectFeatures(
+  features: FeatureDescription[] | undefined,
+  versionMap: Map<string, string>,
+) {
+  if (features == undefined) {
+    return
+  }
+  for (const feature of features) {
+    versionMap.set(feature.identifier, feature.version as string)
+  }
+}
diff --git a/app/assets/javascripts/components/Preferences/panes/extensions-segments/RenameExtension.tsx b/app/assets/javascripts/Components/Preferences/Panes/Extensions/RenameExtension.tsx
similarity index 57%
rename from app/assets/javascripts/components/Preferences/panes/extensions-segments/RenameExtension.tsx
rename to app/assets/javascripts/Components/Preferences/Panes/Extensions/RenameExtension.tsx
index a631a7630..796b37f7d 100644
--- a/app/assets/javascripts/components/Preferences/panes/extensions-segments/RenameExtension.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Extensions/RenameExtension.tsx
@@ -1,39 +1,38 @@
-import { FunctionComponent } from 'preact';
-import { useState, useRef, useEffect } from 'preact/hooks';
+import { FunctionComponent } from 'preact'
+import { useState, useRef, useEffect } from 'preact/hooks'
 
 export const RenameExtension: FunctionComponent<{
-  extensionName: string;
-  changeName: (newName: string) => void;
+  extensionName: string
+  changeName: (newName: string) => void
 }> = ({ extensionName, changeName }) => {
-  const [isRenaming, setIsRenaming] = useState(false);
-  const [newExtensionName, setNewExtensionName] =
-    useState<string>(extensionName);
+  const [isRenaming, setIsRenaming] = useState(false)
+  const [newExtensionName, setNewExtensionName] = useState<string>(extensionName)
 
-  const inputRef = useRef<HTMLInputElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
     if (isRenaming) {
-      inputRef.current!.focus();
+      inputRef.current?.focus()
     }
-  }, [inputRef, isRenaming]);
+  }, [inputRef, isRenaming])
 
   const startRenaming = () => {
-    setNewExtensionName(extensionName);
-    setIsRenaming(true);
-  };
+    setNewExtensionName(extensionName)
+    setIsRenaming(true)
+  }
 
   const cancelRename = () => {
-    setNewExtensionName(extensionName);
-    setIsRenaming(false);
-  };
+    setNewExtensionName(extensionName)
+    setIsRenaming(false)
+  }
 
   const confirmRename = () => {
     if (!newExtensionName) {
-      return;
+      return
     }
-    changeName(newExtensionName);
-    setIsRenaming(false);
-  };
+    changeName(newExtensionName)
+    setIsRenaming(false)
+  }
 
   return (
     <div className="flex flex-row mr-3 items-center">
@@ -44,9 +43,7 @@ export const RenameExtension: FunctionComponent<{
         className="flex-grow text-base font-bold no-border bg-default px-0 color-text"
         type="text"
         value={newExtensionName}
-        onChange={({ target: input }) =>
-          setNewExtensionName((input as HTMLInputElement)?.value)
-        }
+        onChange={({ target: input }) => setNewExtensionName((input as HTMLInputElement)?.value)}
       />
       <div className="min-w-3" />
       {isRenaming ? (
@@ -65,5 +62,5 @@ export const RenameExtension: FunctionComponent<{
         </a>
       )}
     </div>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/components/Preferences/panes/Extensions.tsx b/app/assets/javascripts/Components/Preferences/Panes/Extensions/index.tsx
similarity index 62%
rename from app/assets/javascripts/components/Preferences/panes/Extensions.tsx
rename to app/assets/javascripts/Components/Preferences/Panes/Extensions/index.tsx
index 99ef28307..f0b5476fd 100644
--- a/app/assets/javascripts/components/Preferences/panes/Extensions.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Extensions/index.tsx
@@ -1,42 +1,40 @@
-import { ButtonType, ContentType, SNComponent } from '@standardnotes/snjs';
-import { Button } from '@/components/Button';
-import { DecoratedInput } from '@/components/DecoratedInput';
-import { WebApplication } from '@/ui_models/application';
-import { FunctionComponent } from 'preact';
-import { Title, PreferencesSegment } from '../components';
-import {
-  ConfirmCustomExtension,
-  ExtensionItem,
-  ExtensionsLatestVersions,
-} from './extensions-segments';
-import { useEffect, useRef, useState } from 'preact/hooks';
-import { observer } from 'mobx-react-lite';
+import { ButtonType, ContentType, SNComponent } from '@standardnotes/snjs'
+import { Button } from '@/Components/Button/Button'
+import { DecoratedInput } from '@/Components/Input/DecoratedInput'
+import { WebApplication } from '@/UIModels/Application'
+import { FunctionComponent } from 'preact'
+import { Title, PreferencesSegment } from '@/Components/Preferences/PreferencesComponents'
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { observer } from 'mobx-react-lite'
+import { ExtensionsLatestVersions } from './ExtensionsLatestVersions'
+import { ExtensionItem } from './ExtensionItem'
+import { ConfirmCustomExtension } from './ConfirmCustomExtension'
 
 const loadExtensions = (application: WebApplication) =>
   application.items.getItems([
     ContentType.ActionsExtension,
     ContentType.Component,
     ContentType.Theme,
-  ]) as SNComponent[];
+  ]) as SNComponent[]
 
 export const Extensions: FunctionComponent<{
-  application: WebApplication;
-  extensionsLatestVersions: ExtensionsLatestVersions;
-  className?: string;
+  application: WebApplication
+  extensionsLatestVersions: ExtensionsLatestVersions
+  className?: string
 }> = observer(({ application, extensionsLatestVersions, className = '' }) => {
-  const [customUrl, setCustomUrl] = useState('');
-  const [confirmableExtension, setConfirmableExtension] = useState<
-    SNComponent | undefined
-  >(undefined);
-  const [extensions, setExtensions] = useState(loadExtensions(application));
+  const [customUrl, setCustomUrl] = useState('')
+  const [confirmableExtension, setConfirmableExtension] = useState<SNComponent | undefined>(
+    undefined,
+  )
+  const [extensions, setExtensions] = useState(loadExtensions(application))
 
-  const confirmableEnd = useRef<HTMLDivElement>(null);
+  const confirmableEnd = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     if (confirmableExtension) {
-      confirmableEnd.current!.scrollIntoView({ behavior: 'smooth' });
+      confirmableEnd.current?.scrollIntoView({ behavior: 'smooth' })
     }
-  }, [confirmableExtension, confirmableEnd]);
+  }, [confirmableExtension, confirmableEnd])
 
   const uninstallExtension = async (extension: SNComponent) => {
     application.alertService
@@ -45,55 +43,50 @@ export const Extensions: FunctionComponent<{
         'Uninstall Extension?',
         'Uninstall',
         ButtonType.Danger,
-        'Cancel'
+        'Cancel',
       )
       .then(async (shouldRemove: boolean) => {
         if (shouldRemove) {
-          await application.mutator.deleteItem(extension);
-          setExtensions(loadExtensions(application));
+          await application.mutator.deleteItem(extension)
+          setExtensions(loadExtensions(application))
         }
       })
       .catch((err: string) => {
-        application.alertService.alert(err);
-      });
-  };
+        application.alertService.alert(err).catch(console.error)
+      })
+  }
 
   const submitExtensionUrl = async (url: string) => {
-    const component = await application.features.downloadExternalFeature(url);
+    const component = await application.features.downloadExternalFeature(url)
     if (component) {
-      setConfirmableExtension(component);
+      setConfirmableExtension(component)
     }
-  };
+  }
 
   const handleConfirmExtensionSubmit = async (confirm: boolean) => {
     if (confirm) {
-      confirmExtension();
+      confirmExtension().catch(console.error)
     }
-    setConfirmableExtension(undefined);
-    setCustomUrl('');
-  };
+    setConfirmableExtension(undefined)
+    setCustomUrl('')
+  }
 
   const confirmExtension = async () => {
-    await application.mutator.insertItem(confirmableExtension as SNComponent);
-    application.sync.sync();
-    setExtensions(loadExtensions(application));
-  };
+    await application.mutator.insertItem(confirmableExtension as SNComponent)
+    application.sync.sync().catch(console.error)
+    setExtensions(loadExtensions(application))
+  }
 
   const visibleExtensions = extensions.filter((extension) => {
-    return (
-      extension.package_info != undefined &&
-      !['modal', 'rooms'].includes(extension.area)
-    );
-  });
+    return extension.package_info != undefined && !['modal', 'rooms'].includes(extension.area)
+  })
 
   return (
     <div className={className}>
       {visibleExtensions.length > 0 && (
         <div>
           {visibleExtensions
-            .sort((e1, e2) =>
-              e1.name?.toLowerCase().localeCompare(e2.name?.toLowerCase())
-            )
+            .sort((e1, e2) => e1.name?.toLowerCase().localeCompare(e2.name?.toLowerCase()))
             .map((extension, i) => (
               <ExtensionItem
                 key={extension.uuid}
@@ -115,7 +108,7 @@ export const Extensions: FunctionComponent<{
               placeholder={'Enter Extension URL'}
               value={customUrl}
               onChange={(value) => {
-                setCustomUrl(value);
+                setCustomUrl(value)
               }}
             />
             <div className="min-h-2" />
@@ -138,5 +131,5 @@ export const Extensions: FunctionComponent<{
         )}
       </div>
     </div>
-  );
-});
+  )
+})
diff --git a/app/assets/javascripts/components/Preferences/panes/general-segments/Defaults.tsx b/app/assets/javascripts/Components/Preferences/Panes/General/Defaults.tsx
similarity index 56%
rename from app/assets/javascripts/components/Preferences/panes/general-segments/Defaults.tsx
rename to app/assets/javascripts/Components/Preferences/Panes/General/Defaults.tsx
index fa5bd6c4e..2dd9ecb35 100644
--- a/app/assets/javascripts/components/Preferences/panes/general-segments/Defaults.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/General/Defaults.tsx
@@ -1,127 +1,123 @@
-import { Dropdown, DropdownItem } from '@/components/Dropdown';
-import { FeatureIdentifier, PrefKey } from '@standardnotes/snjs';
+import { Dropdown, DropdownItem } from '@/Components/Dropdown'
+import {
+  FeatureIdentifier,
+  PrefKey,
+  ComponentArea,
+  ComponentMutator,
+  SNComponent,
+} from '@standardnotes/snjs'
 import {
   PreferencesGroup,
   PreferencesSegment,
   Subtitle,
   Text,
   Title,
-} from '@/components/Preferences/components';
-import { WebApplication } from '@/ui_models/application';
-import {
-  ComponentArea,
-  ComponentMutator,
-  SNComponent,
-} from '@standardnotes/snjs';
-import { FunctionComponent } from 'preact';
-import { useEffect, useState } from 'preact/hooks';
-import { HorizontalSeparator } from '@/components/Shared/HorizontalSeparator';
-import { Switch } from '@/components/Switch';
+} from '@/Components/Preferences/PreferencesComponents'
+import { WebApplication } from '@/UIModels/Application'
+import { FunctionComponent } from 'preact'
+import { useEffect, useState } from 'preact/hooks'
+import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
+import { Switch } from '@/Components/Switch'
 
 type Props = {
-  application: WebApplication;
-};
+  application: WebApplication
+}
 
 type EditorOption = DropdownItem & {
-  value: FeatureIdentifier | 'plain-editor';
-};
+  value: FeatureIdentifier | 'plain-editor'
+}
 
 const makeEditorDefault = (
   application: WebApplication,
   component: SNComponent,
-  currentDefault: SNComponent
+  currentDefault: SNComponent,
 ) => {
   if (currentDefault) {
-    removeEditorDefault(application, currentDefault);
+    removeEditorDefault(application, currentDefault)
   }
-  application.mutator.changeAndSaveItem(component, (m) => {
-    const mutator = m as ComponentMutator;
-    mutator.defaultEditor = true;
-  });
-};
+  application.mutator
+    .changeAndSaveItem(component, (m) => {
+      const mutator = m as ComponentMutator
+      mutator.defaultEditor = true
+    })
+    .catch(console.error)
+}
 
-const removeEditorDefault = (
-  application: WebApplication,
-  component: SNComponent
-) => {
-  application.mutator.changeAndSaveItem(component, (m) => {
-    const mutator = m as ComponentMutator;
-    mutator.defaultEditor = false;
-  });
-};
+const removeEditorDefault = (application: WebApplication, component: SNComponent) => {
+  application.mutator
+    .changeAndSaveItem(component, (m) => {
+      const mutator = m as ComponentMutator
+      mutator.defaultEditor = false
+    })
+    .catch(console.error)
+}
 
 const getDefaultEditor = (application: WebApplication) => {
   return application.componentManager
     .componentsForArea(ComponentArea.Editor)
-    .filter((e) => e.isDefaultEditor())[0];
-};
+    .filter((e) => e.isDefaultEditor())[0]
+}
 
 export const Defaults: FunctionComponent<Props> = ({ application }) => {
-  const [editorItems, setEditorItems] = useState<DropdownItem[]>([]);
+  const [editorItems, setEditorItems] = useState<DropdownItem[]>([])
   const [defaultEditorValue, setDefaultEditorValue] = useState(
-    () =>
-      getDefaultEditor(application)?.package_info?.identifier || 'plain-editor'
-  );
+    () => getDefaultEditor(application)?.package_info?.identifier || 'plain-editor',
+  )
 
   const [spellcheck, setSpellcheck] = useState(() =>
-    application.getPreference(PrefKey.EditorSpellcheck, true)
-  );
+    application.getPreference(PrefKey.EditorSpellcheck, true),
+  )
 
   const [addNoteToParentFolders, setAddNoteToParentFolders] = useState(() =>
-    application.getPreference(PrefKey.NoteAddToParentFolders, true)
-  );
+    application.getPreference(PrefKey.NoteAddToParentFolders, true),
+  )
 
   const toggleSpellcheck = () => {
-    setSpellcheck(!spellcheck);
-    application.getAppState().toggleGlobalSpellcheck();
-  };
+    setSpellcheck(!spellcheck)
+    application.getAppState().toggleGlobalSpellcheck().catch(console.error)
+  }
 
   useEffect(() => {
     const editors = application.componentManager
       .componentsForArea(ComponentArea.Editor)
       .map((editor): EditorOption => {
-        const identifier = editor.package_info.identifier;
-        const [iconType, tint] =
-          application.iconsController.getIconAndTintForEditor(identifier);
+        const identifier = editor.package_info.identifier
+        const [iconType, tint] = application.iconsController.getIconAndTintForEditor(identifier)
 
         return {
           label: editor.name,
           value: identifier,
           ...(iconType ? { icon: iconType } : null),
           ...(tint ? { iconClassName: `color-accessory-tint-${tint}` } : null),
-        };
+        }
       })
       .concat([
         {
           icon: 'plain-text',
-          iconClassName: `color-accessory-tint-1`,
+          iconClassName: 'color-accessory-tint-1',
           label: 'Plain Editor',
           value: 'plain-editor',
         },
       ])
       .sort((a, b) => {
-        return a.label.toLowerCase() < b.label.toLowerCase() ? -1 : 1;
-      });
+        return a.label.toLowerCase() < b.label.toLowerCase() ? -1 : 1
+      })
 
-    setEditorItems(editors);
-  }, [application]);
+    setEditorItems(editors)
+  }, [application])
 
   const setDefaultEditor = (value: string) => {
-    setDefaultEditorValue(value as FeatureIdentifier);
-    const editors = application.componentManager.componentsForArea(
-      ComponentArea.Editor
-    );
-    const currentDefault = getDefaultEditor(application);
+    setDefaultEditorValue(value as FeatureIdentifier)
+    const editors = application.componentManager.componentsForArea(ComponentArea.Editor)
+    const currentDefault = getDefaultEditor(application)
 
     if (value !== 'plain-editor') {
-      const editorComponent = editors.filter(
-        (e) => e.package_info.identifier === value
-      )[0];
-      makeEditorDefault(application, editorComponent, currentDefault);
+      const editorComponent = editors.filter((e) => e.package_info.identifier === value)[0]
+      makeEditorDefault(application, editorComponent, currentDefault)
     } else {
-      removeEditorDefault(application, currentDefault);
+      removeEditorDefault(application, currentDefault)
     }
-  };
+  }
 
   return (
     <PreferencesGroup>
@@ -145,9 +141,9 @@ export const Defaults: FunctionComponent<Props> = ({ application }) => {
           <div className="flex flex-col">
             <Subtitle>Spellcheck</Subtitle>
             <Text>
-              The default spellcheck value for new notes. Spellcheck can be
-              configured per note from the note context menu. Spellcheck may
-              degrade overall typing performance with long notes.
+              The default spellcheck value for new notes. Spellcheck can be configured per note from
+              the note context menu. Spellcheck may degrade overall typing performance with long
+              notes.
             </Text>
           </div>
           <Switch onChange={toggleSpellcheck} checked={spellcheck} />
@@ -155,26 +151,23 @@ export const Defaults: FunctionComponent<Props> = ({ application }) => {
         <HorizontalSeparator classes="mt-5 mb-3" />
         <div className="flex items-center justify-between">
           <div className="flex flex-col">
-            <Subtitle>
-              Add all parent tags when adding a nested tag to a note
-            </Subtitle>
+            <Subtitle>Add all parent tags when adding a nested tag to a note</Subtitle>
             <Text>
-              When enabled, adding a nested tag to a note will automatically add
-              all associated parent tags.
+              When enabled, adding a nested tag to a note will automatically add all associated
+              parent tags.
             </Text>
           </div>
           <Switch
             onChange={() => {
-              application.setPreference(
-                PrefKey.NoteAddToParentFolders,
-                !addNoteToParentFolders
-              );
-              setAddNoteToParentFolders(!addNoteToParentFolders);
+              application
+                .setPreference(PrefKey.NoteAddToParentFolders, !addNoteToParentFolders)
+                .catch(console.error)
+              setAddNoteToParentFolders(!addNoteToParentFolders)
             }}
             checked={addNoteToParentFolders}
           />
         </div>
       </PreferencesSegment>
     </PreferencesGroup>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/components/Preferences/panes/general-segments/Labs.tsx b/app/assets/javascripts/Components/Preferences/Panes/General/Labs.tsx
similarity index 51%
rename from app/assets/javascripts/components/Preferences/panes/general-segments/Labs.tsx
rename to app/assets/javascripts/Components/Preferences/Panes/General/Labs.tsx
index 0c14f55fb..f32ccb657 100644
--- a/app/assets/javascripts/components/Preferences/panes/general-segments/Labs.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/General/Labs.tsx
@@ -1,65 +1,55 @@
-import { Switch } from '@/components/Switch';
+import { Switch } from '@/Components/Switch'
 import {
   PreferencesGroup,
   PreferencesSegment,
   Subtitle,
   Text,
   Title,
-} from '@/components/Preferences/components';
-import { WebApplication } from '@/ui_models/application';
-import {
-  FeatureIdentifier,
-  FeatureStatus,
-  FindNativeFeature,
-} from '@standardnotes/snjs';
-import { FunctionComponent } from 'preact';
-import { useCallback, useEffect, useState } from 'preact/hooks';
-import { usePremiumModal } from '@/components/Premium';
-import { HorizontalSeparator } from '@/components/Shared/HorizontalSeparator';
+} from '@/Components/Preferences/PreferencesComponents'
+import { WebApplication } from '@/UIModels/Application'
+import { FeatureIdentifier, FeatureStatus, FindNativeFeature } from '@standardnotes/snjs'
+import { FunctionComponent } from 'preact'
+import { useCallback, useEffect, useState } from 'preact/hooks'
+import { usePremiumModal } from '@/Hooks/usePremiumModal'
+import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
 
 type ExperimentalFeatureItem = {
-  identifier: FeatureIdentifier;
-  name: string;
-  description: string;
-  isEnabled: boolean;
-  isEntitled: boolean;
-};
+  identifier: FeatureIdentifier
+  name: string
+  description: string
+  isEnabled: boolean
+  isEntitled: boolean
+}
 
 type Props = {
-  application: WebApplication;
-};
+  application: WebApplication
+}
 
 export const LabsPane: FunctionComponent<Props> = ({ application }) => {
-  const [experimentalFeatures, setExperimentalFeatures] = useState<
-    ExperimentalFeatureItem[]
-  >([]);
+  const [experimentalFeatures, setExperimentalFeatures] = useState<ExperimentalFeatureItem[]>([])
 
   const reloadExperimentalFeatures = useCallback(() => {
     const experimentalFeatures = application.features
       .getExperimentalFeatures()
       .map((featureIdentifier) => {
-        const feature = FindNativeFeature(featureIdentifier);
+        const feature = FindNativeFeature(featureIdentifier)
         return {
           identifier: featureIdentifier,
           name: feature?.name ?? featureIdentifier,
           description: feature?.description ?? '',
-          isEnabled:
-            application.features.isExperimentalFeatureEnabled(
-              featureIdentifier
-            ),
+          isEnabled: application.features.isExperimentalFeatureEnabled(featureIdentifier),
           isEntitled:
-            application.features.getFeatureStatus(featureIdentifier) ===
-            FeatureStatus.Entitled,
-        };
-      });
-    setExperimentalFeatures(experimentalFeatures);
-  }, [application.features]);
+            application.features.getFeatureStatus(featureIdentifier) === FeatureStatus.Entitled,
+        }
+      })
+    setExperimentalFeatures(experimentalFeatures)
+  }, [application.features])
 
   useEffect(() => {
-    reloadExperimentalFeatures();
-  }, [reloadExperimentalFeatures]);
+    reloadExperimentalFeatures()
+  }, [reloadExperimentalFeatures])
 
-  const premiumModal = usePremiumModal();
+  const premiumModal = usePremiumModal()
 
   return (
     <PreferencesGroup>
@@ -67,23 +57,19 @@ export const LabsPane: FunctionComponent<Props> = ({ application }) => {
         <Title>Labs</Title>
         <div>
           {experimentalFeatures.map(
-            (
-              { identifier, name, description, isEnabled, isEntitled },
-              index: number
-            ) => {
+            ({ identifier, name, description, isEnabled, isEntitled }, index: number) => {
               const toggleFeature = () => {
                 if (!isEntitled) {
-                  premiumModal.activate(name);
-                  return;
+                  premiumModal.activate(name)
+                  return
                 }
 
-                application.features.toggleExperimentalFeature(identifier);
-                reloadExperimentalFeatures();
-              };
+                application.features.toggleExperimentalFeature(identifier)
+                reloadExperimentalFeatures()
+              }
 
               const showHorizontalSeparator =
-                experimentalFeatures.length > 1 &&
-                index !== experimentalFeatures.length - 1;
+                experimentalFeatures.length > 1 && index !== experimentalFeatures.length - 1
 
               return (
                 <>
@@ -94,12 +80,10 @@ export const LabsPane: FunctionComponent<Props> = ({ application }) => {
                     </div>
                     <Switch onChange={toggleFeature} checked={isEnabled} />
                   </div>
-                  {showHorizontalSeparator && (
-                    <HorizontalSeparator classes="mt-5 mb-3" />
-                  )}
+                  {showHorizontalSeparator && <HorizontalSeparator classes="mt-5 mb-3" />}
                 </>
-              );
-            }
+              )
+            },
           )}
           {experimentalFeatures.length === 0 && (
             <div className="flex items-center justify-between">
@@ -111,5 +95,5 @@ export const LabsPane: FunctionComponent<Props> = ({ application }) => {
         </div>
       </PreferencesSegment>
     </PreferencesGroup>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/Components/Preferences/Panes/General/Tools.tsx b/app/assets/javascripts/Components/Preferences/Panes/General/Tools.tsx
new file mode 100644
index 000000000..b08685335
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/General/Tools.tsx
@@ -0,0 +1,62 @@
+import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
+import { Switch } from '@/Components/Switch'
+import {
+  PreferencesGroup,
+  PreferencesSegment,
+  Subtitle,
+  Text,
+  Title,
+} from '@/Components/Preferences/PreferencesComponents'
+import { WebApplication } from '@/UIModels/Application'
+import { PrefKey } from '@standardnotes/snjs'
+import { observer } from 'mobx-react-lite'
+import { FunctionalComponent } from 'preact'
+import { useState } from 'preact/hooks'
+
+type Props = {
+  application: WebApplication
+}
+
+export const Tools: FunctionalComponent<Props> = observer(({ application }: Props) => {
+  const [monospaceFont, setMonospaceFont] = useState(() =>
+    application.getPreference(PrefKey.EditorMonospaceEnabled, true),
+  )
+  const [marginResizers, setMarginResizers] = useState(() =>
+    application.getPreference(PrefKey.EditorResizersEnabled, true),
+  )
+
+  const toggleMonospaceFont = () => {
+    setMonospaceFont(!monospaceFont)
+    application.setPreference(PrefKey.EditorMonospaceEnabled, !monospaceFont).catch(console.error)
+  }
+
+  const toggleMarginResizers = () => {
+    setMarginResizers(!marginResizers)
+    application.setPreference(PrefKey.EditorResizersEnabled, !marginResizers).catch(console.error)
+  }
+
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>Tools</Title>
+        <div>
+          <div className="flex items-center justify-between">
+            <div className="flex flex-col">
+              <Subtitle>Monospace Font</Subtitle>
+              <Text>Toggles the font style in the Plain Text editor.</Text>
+            </div>
+            <Switch onChange={toggleMonospaceFont} checked={monospaceFont} />
+          </div>
+          <HorizontalSeparator classes="mt-5 mb-3" />
+          <div className="flex items-center justify-between">
+            <div className="flex flex-col">
+              <Subtitle>Margin Resizers</Subtitle>
+              <Text>Allows left and right editor margins to be resized.</Text>
+            </div>
+            <Switch onChange={toggleMarginResizers} checked={marginResizers} />
+          </div>
+        </div>
+      </PreferencesSegment>
+    </PreferencesGroup>
+  )
+})
diff --git a/app/assets/javascripts/Components/Preferences/Panes/General/index.tsx b/app/assets/javascripts/Components/Preferences/Panes/General/index.tsx
new file mode 100644
index 000000000..adf637e00
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/General/index.tsx
@@ -0,0 +1,31 @@
+import { WebApplication } from '@/UIModels/Application'
+import { AppState } from '@/UIModels/AppState'
+import { FunctionComponent } from 'preact'
+import { PreferencesPane } from '@/Components/Preferences/PreferencesComponents'
+import { ExtensionsLatestVersions } from '@/Components/Preferences/Panes/Extensions/ExtensionsLatestVersions'
+import { observer } from 'mobx-react-lite'
+import { Tools } from './Tools'
+import { Defaults } from './Defaults'
+import { LabsPane } from './Labs'
+import { Advanced } from '@/Components/Preferences/Panes/Account/Advanced'
+
+interface GeneralProps {
+  appState: AppState
+  application: WebApplication
+  extensionsLatestVersions: ExtensionsLatestVersions
+}
+
+export const General: FunctionComponent<GeneralProps> = observer(
+  ({ appState, application, extensionsLatestVersions }) => (
+    <PreferencesPane>
+      <Tools application={application} />
+      <Defaults application={application} />
+      <LabsPane application={application} />
+      <Advanced
+        application={application}
+        appState={appState}
+        extensionsLatestVersions={extensionsLatestVersions}
+      />
+    </PreferencesPane>
+  ),
+)
diff --git a/app/assets/javascripts/components/Preferences/panes/HelpFeedback.tsx b/app/assets/javascripts/Components/Preferences/Panes/HelpFeedback.tsx
similarity index 65%
rename from app/assets/javascripts/components/Preferences/panes/HelpFeedback.tsx
rename to app/assets/javascripts/Components/Preferences/Panes/HelpFeedback.tsx
index 01f15ba9b..e8e630197 100644
--- a/app/assets/javascripts/components/Preferences/panes/HelpFeedback.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/HelpFeedback.tsx
@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'preact';
+import { FunctionComponent } from 'preact'
 import {
   Title,
   Subtitle,
@@ -7,7 +7,7 @@ import {
   PreferencesGroup,
   PreferencesPane,
   PreferencesSegment,
-} from '../components';
+} from '@/Components/Preferences/PreferencesComponents'
 
 export const HelpAndFeedback: FunctionComponent = () => (
   <PreferencesPane>
@@ -17,11 +17,10 @@ export const HelpAndFeedback: FunctionComponent = () => (
         <div className="h-2 w-full" />
         <Subtitle>Who can read my private notes?</Subtitle>
         <Text>
-          Quite simply: no one but you. Not us, not your ISP, not a hacker, and
-          not a government agency. As long as you keep your password safe, and
-          your password is reasonably strong, then you are the only person in
-          the world with the ability to decrypt your notes. For more on how we
-          handle your privacy and security, check out our easy to read{' '}
+          Quite simply: no one but you. Not us, not your ISP, not a hacker, and not a government
+          agency. As long as you keep your password safe, and your password is reasonably strong,
+          then you are the only person in the world with the ability to decrypt your notes. For more
+          on how we handle your privacy and security, check out our easy to read{' '}
           <a target="_blank" href="https://standardnotes.com/privacy">
             Privacy Manifesto.
           </a>
@@ -30,18 +29,17 @@ export const HelpAndFeedback: FunctionComponent = () => (
       <PreferencesSegment>
         <Subtitle>Can I collaborate with others on a note?</Subtitle>
         <Text>
-          Because of our encrypted architecture, Standard Notes does not
-          currently provide a real-time collaboration solution. Multiple users
-          can share the same account however, but editing at the same time may
-          result in sync conflicts, which may result in the duplication of
-          notes.
+          Because of our encrypted architecture, Standard Notes does not currently provide a
+          real-time collaboration solution. Multiple users can share the same account however, but
+          editing at the same time may result in sync conflicts, which may result in the duplication
+          of notes.
         </Text>
       </PreferencesSegment>
       <PreferencesSegment>
         <Subtitle>Can I use Standard Notes totally offline?</Subtitle>
         <Text>
-          Standard Notes can be used totally offline without an account, and
-          without an internet connection. You can find{' '}
+          Standard Notes can be used totally offline without an account, and without an internet
+          connection. You can find{' '}
           <a
             target="_blank"
             href="https://standardnotes.com/help/59/can-i-use-standard-notes-totally-offline"
@@ -52,20 +50,15 @@ export const HelpAndFeedback: FunctionComponent = () => (
       </PreferencesSegment>
       <PreferencesSegment>
         <Subtitle>Can’t find your question here?</Subtitle>
-        <LinkButton
-          className="mt-3"
-          label="Open FAQ"
-          link="https://standardnotes.com/help"
-        />
+        <LinkButton className="mt-3" label="Open FAQ" link="https://standardnotes.com/help" />
       </PreferencesSegment>
     </PreferencesGroup>
     <PreferencesGroup>
       <PreferencesSegment>
         <Title>Community forum</Title>
         <Text>
-          If you have an issue, found a bug or want to suggest a feature, you
-          can browse or post to the forum. It’s recommended for non-account
-          related issues. Please read our{' '}
+          If you have an issue, found a bug or want to suggest a feature, you can browse or post to
+          the forum. It’s recommended for non-account related issues. Please read our{' '}
           <a target="_blank" href="https://standardnotes.com/longevity/">
             Longevity statement
           </a>{' '}
@@ -82,9 +75,9 @@ export const HelpAndFeedback: FunctionComponent = () => (
       <PreferencesSegment>
         <Title>Community groups</Title>
         <Text>
-          Want to meet other passionate note-takers and privacy enthusiasts?
-          Want to share your feedback with us? Join the Standard Notes community
-          groups for discussions on security, themes, editors and more.
+          Want to meet other passionate note-takers and privacy enthusiasts? Want to share your
+          feedback with us? Join the Standard Notes community groups for discussions on security,
+          themes, editors and more.
         </Text>
         <LinkButton
           className="mt-3"
@@ -101,15 +94,9 @@ export const HelpAndFeedback: FunctionComponent = () => (
     <PreferencesGroup>
       <PreferencesSegment>
         <Title>Account related issue?</Title>
-        <Text>
-          Send an email to help@standardnotes.com and we’ll sort it out.
-        </Text>
-        <LinkButton
-          className="mt-3"
-          link="mailto: help@standardnotes.com"
-          label="Email us"
-        />
+        <Text>Send an email to help@standardnotes.com and we’ll sort it out.</Text>
+        <LinkButton className="mt-3" link="mailto: help@standardnotes.com" label="Email us" />
       </PreferencesSegment>
     </PreferencesGroup>
   </PreferencesPane>
-);
+)
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Listed/BlogItem.tsx b/app/assets/javascripts/Components/Preferences/Panes/Listed/BlogItem.tsx
new file mode 100644
index 000000000..b49119969
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/Listed/BlogItem.tsx
@@ -0,0 +1,48 @@
+import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
+import { LinkButton, Subtitle } from '@/Components/Preferences/PreferencesComponents'
+import { WebApplication } from '@/UIModels/Application'
+import { ListedAccount, ListedAccountInfo } from '@standardnotes/snjs'
+import { FunctionalComponent } from 'preact'
+import { useEffect, useState } from 'preact/hooks'
+
+type Props = {
+  account: ListedAccount
+  showSeparator: boolean
+  application: WebApplication
+}
+
+export const ListedAccountItem: FunctionalComponent<Props> = ({
+  account,
+  showSeparator,
+  application,
+}) => {
+  const [isLoading, setIsLoading] = useState(false)
+  const [accountInfo, setAccountInfo] = useState<ListedAccountInfo>()
+
+  useEffect(() => {
+    const loadAccount = async () => {
+      setIsLoading(true)
+      const info = await application.getListedAccountInfo(account)
+      setAccountInfo(info)
+      setIsLoading(false)
+    }
+    loadAccount().catch(console.error)
+  }, [account, application])
+
+  return (
+    <>
+      <Subtitle className="em">{accountInfo?.display_name}</Subtitle>
+      <div className="mb-2" />
+      <div className="flex">
+        {isLoading ? <div className="sk-spinner small info"></div> : null}
+        {accountInfo && (
+          <>
+            <LinkButton className="mr-2" label="Open Blog" link={accountInfo.author_url} />
+            <LinkButton className="mr-2" label="Settings" link={accountInfo.settings_url} />
+          </>
+        )}
+      </div>
+      {showSeparator && <HorizontalSeparator classes="mt-5 mb-3" />}
+    </>
+  )
+}
diff --git a/app/assets/javascripts/components/Preferences/panes/Listed.tsx b/app/assets/javascripts/Components/Preferences/Panes/Listed/index.tsx
similarity index 58%
rename from app/assets/javascripts/components/Preferences/panes/Listed.tsx
rename to app/assets/javascripts/Components/Preferences/Panes/Listed/index.tsx
index 5e9c8be48..4fdc9ef66 100644
--- a/app/assets/javascripts/components/Preferences/panes/Listed.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Listed/index.tsx
@@ -5,67 +5,65 @@ import {
   Title,
   Subtitle,
   Text,
-} from '../components';
-import { observer } from 'mobx-react-lite';
-import { WebApplication } from '@/ui_models/application';
-import { ButtonType, ListedAccount } from '@standardnotes/snjs';
-import { useCallback, useEffect, useState } from 'preact/hooks';
-import { ListedAccountItem } from './listed/BlogItem';
-import { Button } from '@/components/Button';
+} from '@/Components/Preferences/PreferencesComponents'
+import { observer } from 'mobx-react-lite'
+import { WebApplication } from '@/UIModels/Application'
+import { ButtonType, ListedAccount } from '@standardnotes/snjs'
+import { useCallback, useEffect, useState } from 'preact/hooks'
+import { ListedAccountItem } from './BlogItem'
+import { Button } from '@/Components/Button/Button'
 
 type Props = {
-  application: WebApplication;
-};
+  application: WebApplication
+}
 
 export const Listed = observer(({ application }: Props) => {
-  const [accounts, setAccounts] = useState<ListedAccount[]>([]);
-  const [requestingAccount, setRequestingAccount] = useState<boolean>();
+  const [accounts, setAccounts] = useState<ListedAccount[]>([])
+  const [requestingAccount, setRequestingAccount] = useState<boolean>()
 
   const reloadAccounts = useCallback(async () => {
-    setAccounts(await application.getListedAccounts());
-  }, [application]);
+    setAccounts(await application.getListedAccounts())
+  }, [application])
 
   useEffect(() => {
-    reloadAccounts();
-  }, [reloadAccounts]);
+    reloadAccounts().catch(console.error)
+  }, [reloadAccounts])
 
   const registerNewAccount = useCallback(() => {
-    setRequestingAccount(true);
+    setRequestingAccount(true)
 
     const requestAccount = async () => {
-      const account = await application.requestNewListedAccount();
+      const account = await application.requestNewListedAccount()
       if (account) {
         const openSettings = await application.alertService.confirm(
-          `Your new Listed blog has been successfully created!` +
-            ` You can publish a new post to your blog from Standard Notes via the` +
-            ` <i>Actions</i> menu in the editor pane. Open your blog settings to begin setting it up.`,
+          'Your new Listed blog has been successfully created!' +
+            ' You can publish a new post to your blog from Standard Notes via the' +
+            ' <i>Actions</i> menu in the editor pane. Open your blog settings to begin setting it up.',
           undefined,
           'Open Settings',
           ButtonType.Info,
-          'Later'
-        );
-        reloadAccounts();
+          'Later',
+        )
+        reloadAccounts().catch(console.error)
         if (openSettings) {
-          const info = await application.getListedAccountInfo(account);
+          const info = await application.getListedAccountInfo(account)
           if (info) {
-            application.deviceInterface.openUrl(info?.settings_url);
+            application.deviceInterface.openUrl(info?.settings_url)
           }
         }
       }
-      setRequestingAccount(false);
-    };
+      setRequestingAccount(false)
+    }
 
-    requestAccount();
-  }, [application, reloadAccounts]);
+    requestAccount().catch(console.error)
+  }, [application, reloadAccounts])
 
   return (
     <PreferencesPane>
       {accounts.length > 0 && (
         <PreferencesGroup>
           <PreferencesSegment>
-            <Title>
-              Your {accounts.length === 1 ? 'Blog' : 'Blogs'} on Listed
-            </Title>
+            <Title>Your {accounts.length === 1 ? 'Blog' : 'Blogs'} on Listed</Title>
             <div className="h-2 w-full" />
             {accounts.map((item, index, array) => {
               return (
@@ -75,7 +73,7 @@ export const Listed = observer(({ application }: Props) => {
                   key={item.authorId}
                   application={application}
                 />
-              );
+              )
             })}
           </PreferencesSegment>
         </PreferencesGroup>
@@ -86,13 +84,9 @@ export const Listed = observer(({ application }: Props) => {
           <div className="h-2 w-full" />
           <Subtitle>What is Listed?</Subtitle>
           <Text>
-            Listed is a free blogging platform that allows you to create a
-            public journal published directly from your notes.{' '}
-            <a
-              target="_blank"
-              href="https://listed.to"
-              rel="noreferrer noopener"
-            >
+            Listed is a free blogging platform that allows you to create a public journal published
+            directly from your notes.{' '}
+            <a target="_blank" href="https://listed.to" rel="noreferrer noopener">
               Learn more
             </a>
           </Text>
@@ -104,13 +98,11 @@ export const Listed = observer(({ application }: Props) => {
             className="mt-3"
             variant="normal"
             disabled={requestingAccount}
-            label={
-              requestingAccount ? 'Creating account...' : 'Create new author'
-            }
+            label={requestingAccount ? 'Creating account...' : 'Create new author'}
             onClick={registerNewAccount}
           />
         </PreferencesSegment>
       </PreferencesGroup>
     </PreferencesPane>
-  );
-});
+  )
+})
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Security/Encryption.tsx b/app/assets/javascripts/Components/Preferences/Panes/Security/Encryption.tsx
new file mode 100644
index 000000000..4ac4ce7f8
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/Security/Encryption.tsx
@@ -0,0 +1,72 @@
+import { Icon } from '@/Components/Icon'
+import { STRING_E2E_ENABLED, STRING_ENC_NOT_ENABLED, STRING_LOCAL_ENC_ENABLED } from '@/Strings'
+import { AppState } from '@/UIModels/AppState'
+import { observer } from 'mobx-react-lite'
+import { ComponentChild, FunctionComponent } from 'preact'
+import { PreferencesGroup, PreferencesSegment, Text, Title } from '@/Components/Preferences/PreferencesComponents'
+
+const formatCount = (count: number, itemType: string) => `${count} / ${count} ${itemType}`
+
+const EncryptionStatusItem: FunctionComponent<{
+  icon: ComponentChild
+  status: string
+}> = ({ icon, status }) => (
+  <div className="w-full rounded py-1.5 px-3 text-input my-1 h-8 flex flex-row items-center bg-contrast no-border focus-within:ring-info">
+    {icon}
+    <div className="min-w-3 min-h-1" />
+    <div className="flex-grow color-text text-sm">{status}</div>
+    <div className="min-w-3 min-h-1" />
+    <Icon className="success min-w-4 min-h-4" type="check-bold" />
+  </div>
+)
+
+const EncryptionEnabled: FunctionComponent<{ appState: AppState }> = observer(({ appState }) => {
+  const count = appState.accountMenu.structuredNotesAndTagsCount
+  const notes = formatCount(count.notes, 'notes')
+  const tags = formatCount(count.tags, 'tags')
+  const archived = formatCount(count.archived, 'archived notes')
+  const deleted = formatCount(count.deleted, 'trashed notes')
+
+  const noteIcon = <Icon type="rich-text" className="min-w-5 min-h-5" />
+  const tagIcon = <Icon type="hashtag" className="min-w-5 min-h-5" />
+  const archiveIcon = <Icon type="archive" className="min-w-5 min-h-5" />
+  const trashIcon = <Icon type="trash" className="min-w-5 min-h-5" />
+  return (
+    <>
+      <div className="flex flex-row pb-1 pt-1.5">
+        <EncryptionStatusItem status={notes} icon={[noteIcon]} />
+        <div className="min-w-3" />
+        <EncryptionStatusItem status={tags} icon={[tagIcon]} />
+      </div>
+      <div className="flex flex-row">
+        <EncryptionStatusItem status={archived} icon={[archiveIcon]} />
+        <div className="min-w-3" />
+        <EncryptionStatusItem status={deleted} icon={[trashIcon]} />
+      </div>
+    </>
+  )
+})
+
+export const Encryption: FunctionComponent<{ appState: AppState }> = observer(({ appState }) => {
+  const app = appState.application
+  const hasUser = app.hasAccount()
+  const hasPasscode = app.hasPasscode()
+  const isEncryptionEnabled = app.isEncryptionAvailable()
+
+  const encryptionStatusString = hasUser
+    ? STRING_E2E_ENABLED
+    : hasPasscode
+    ? STRING_LOCAL_ENC_ENABLED
+    : STRING_ENC_NOT_ENABLED
+
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>Encryption</Title>
+        <Text>{encryptionStatusString}</Text>
+
+        {isEncryptionEnabled && <EncryptionEnabled appState={appState} />}
+      </PreferencesSegment>
+    </PreferencesGroup>
+  )
+})
diff --git a/app/assets/javascripts/components/Preferences/panes/security-segments/PasscodeLock.tsx b/app/assets/javascripts/Components/Preferences/Panes/Security/PasscodeLock.tsx
similarity index 56%
rename from app/assets/javascripts/components/Preferences/panes/security-segments/PasscodeLock.tsx
rename to app/assets/javascripts/Components/Preferences/Panes/Security/PasscodeLock.tsx
index e44f411ba..895085a6e 100644
--- a/app/assets/javascripts/components/Preferences/panes/security-segments/PasscodeLock.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Security/PasscodeLock.tsx
@@ -7,203 +7,173 @@ import {
   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 TargetedMouseEvent = JSXInternal.TargetedMouseEvent;
-import { alertDialog } from '@Services/alertService';
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
-import { ApplicationEvent } from '@standardnotes/snjs';
-import { observer } from 'mobx-react-lite';
-import { AppState } from '@/ui_models/app_state';
+} from '@/Strings'
+import { WebApplication } from '@/UIModels/Application'
+import { preventRefreshing } from '@/Utils'
+import { JSXInternal } from 'preact/src/jsx'
+import TargetedEvent = JSXInternal.TargetedEvent
+import TargetedMouseEvent = JSXInternal.TargetedMouseEvent
+import { alertDialog } from '@/Services/AlertService'
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
+import { ApplicationEvent } from '@standardnotes/snjs'
+import { observer } from 'mobx-react-lite'
+import { AppState } from '@/UIModels/AppState'
 import {
   PreferencesSegment,
   Title,
   Text,
   PreferencesGroup,
-} from '@/components/Preferences/components';
-import { Button } from '@/components/Button';
+} from '@/Components/Preferences/PreferencesComponents'
+import { Button } from '@/Components/Button/Button'
 
 type Props = {
-  application: WebApplication;
-  appState: AppState;
-};
+  application: WebApplication
+  appState: AppState
+}
 
 export const PasscodeLock = observer(({ application, appState }: Props) => {
-  const keyStorageInfo = StringUtils.keyStorageInfo(application);
-  const passcodeAutoLockOptions = application
-    .getAutolockService()
-    .getAutoLockIntervalOptions();
+  const keyStorageInfo = StringUtils.keyStorageInfo(application)
+  const passcodeAutoLockOptions = application.getAutolockService().getAutoLockIntervalOptions()
 
-  const {
-    setIsEncryptionEnabled,
-    setIsBackupEncrypted,
-    setEncryptionStatusString,
-  } = appState.accountMenu;
+  const { setIsEncryptionEnabled, setIsBackupEncrypted, setEncryptionStatusString } =
+    appState.accountMenu
 
-  const passcodeInputRef = useRef<HTMLInputElement>(null);
+  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 [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);
-  };
+    setShowPasscodeForm(true)
+    setIsPasscodeFocused(true)
+  }
 
   const changePasscodePressed = () => {
-    handleAddPassCode();
-  };
+    handleAddPassCode()
+  }
 
   const reloadAutoLockInterval = useCallback(async () => {
-    const interval = await application
-      .getAutolockService()
-      .getAutoLockInterval();
-    setSelectedAutoLockInterval(interval);
-  }, [application]);
+    const interval = await application.getAutolockService().getAutoLockInterval()
+    setSelectedAutoLockInterval(interval)
+  }, [application])
 
   const refreshEncryptionStatus = useCallback(() => {
-    const hasUser = application.hasAccount();
-    const hasPasscode = application.hasPasscode();
+    const hasUser = application.hasAccount()
+    const hasPasscode = application.hasPasscode()
 
-    setHasPasscode(hasPasscode);
+    setHasPasscode(hasPasscode)
 
-    const encryptionEnabled = hasUser || hasPasscode;
+    const encryptionEnabled = hasUser || hasPasscode
 
     const encryptionStatusString = hasUser
       ? STRING_E2E_ENABLED
       : hasPasscode
       ? STRING_LOCAL_ENC_ENABLED
-      : STRING_ENC_NOT_ENABLED;
+      : STRING_ENC_NOT_ENABLED
 
-    setEncryptionStatusString(encryptionStatusString);
-    setIsEncryptionEnabled(encryptionEnabled);
-    setIsBackupEncrypted(encryptionEnabled);
-  }, [
-    application,
-    setEncryptionStatusString,
-    setIsBackupEncrypted,
-    setIsEncryptionEnabled,
-  ]);
+    setEncryptionStatusString(encryptionStatusString)
+    setIsEncryptionEnabled(encryptionEnabled)
+    setIsBackupEncrypted(encryptionEnabled)
+  }, [application, setEncryptionStatusString, setIsBackupEncrypted, setIsEncryptionEnabled])
 
   const selectAutoLockInterval = async (interval: number) => {
     if (!(await application.authorizeAutolockIntervalChange())) {
-      return;
+      return
     }
-    await application.getAutolockService().setAutoLockInterval(interval);
-    reloadAutoLockInterval();
-  };
+    await application.getAutolockService().setAutoLockInterval(interval)
+    reloadAutoLockInterval().catch(console.error)
+  }
 
   const removePasscodePressed = async () => {
-    await preventRefreshing(
-      STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_REMOVAL,
-      async () => {
-        if (await application.removePasscode()) {
-          await application.getAutolockService().deleteAutolockPreference();
-          await reloadAutoLockInterval();
-          refreshEncryptionStatus();
-        }
+    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 { value } = event.target as HTMLInputElement
+    setPasscode(value)
+  }
 
-  const handleConfirmPasscodeChange = (
-    event: TargetedEvent<HTMLInputElement>
-  ) => {
-    const { value } = event.target as HTMLInputElement;
-    setPasscodeConfirmation(value);
-  };
+  const handleConfirmPasscodeChange = (event: TargetedEvent<HTMLInputElement>) => {
+    const { value } = event.target as HTMLInputElement
+    setPasscodeConfirmation(value)
+  }
 
   const submitPasscodeForm = async (
-    event:
-      | TargetedEvent<HTMLFormElement>
-      | TargetedMouseEvent<HTMLButtonElement>
+    event: TargetedEvent<HTMLFormElement> | TargetedMouseEvent<HTMLButtonElement>,
   ) => {
-    event.preventDefault();
+    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;
+      })
+      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);
+    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);
-        }
+      if (!successful) {
+        setIsPasscodeFocused(true)
       }
-    );
+    })
 
-    setPasscode(undefined);
-    setPasscodeConfirmation(undefined);
-    setShowPasscodeForm(false);
+    setPasscode(undefined)
+    setPasscodeConfirmation(undefined)
+    setShowPasscodeForm(false)
 
-    refreshEncryptionStatus();
-  };
+    refreshEncryptionStatus()
+  }
 
   useEffect(() => {
-    refreshEncryptionStatus();
-  }, [refreshEncryptionStatus]);
+    refreshEncryptionStatus()
+  }, [refreshEncryptionStatus])
 
   // `reloadAutoLockInterval` gets interval asynchronously, therefore we call `useEffect` to set initial
   // value of `selectedAutoLockInterval`
   useEffect(() => {
-    reloadAutoLockInterval();
-  }, [reloadAutoLockInterval]);
+    reloadAutoLockInterval().catch(console.error)
+  }, [reloadAutoLockInterval])
 
   useEffect(() => {
     if (isPasscodeFocused) {
-      passcodeInputRef.current!.focus();
-      setIsPasscodeFocused(false);
+      passcodeInputRef.current?.focus()
+      setIsPasscodeFocused(false)
     }
-  }, [isPasscodeFocused]);
+  }, [isPasscodeFocused])
 
   // Add the required event observers
   useEffect(() => {
-    const removeKeyStatusChangedObserver = application.addEventObserver(
-      async () => {
-        setCanAddPasscode(!application.isEphemeralSession());
-        setHasPasscode(application.hasPasscode());
-        setShowPasscodeForm(false);
-      },
-      ApplicationEvent.KeyStatusChanged
-    );
+    const removeKeyStatusChangedObserver = application.addEventObserver(async () => {
+      setCanAddPasscode(!application.isEphemeralSession())
+      setHasPasscode(application.hasPasscode())
+      setShowPasscodeForm(false)
+    }, ApplicationEvent.KeyStatusChanged)
 
     return () => {
-      removeKeyStatusChangedObserver();
-    };
-  }, [application]);
+      removeKeyStatusChangedObserver()
+    }
+  }, [application])
 
   return (
     <>
@@ -214,27 +184,21 @@ export const PasscodeLock = observer(({ application, appState }: Props) => {
           {!hasPasscode && canAddPasscode && (
             <>
               <Text className="mb-3">
-                Add a passcode to lock the application and encrypt on-device key
-                storage.
+                Add a passcode to lock the application and encrypt on-device key storage.
               </Text>
 
               {keyStorageInfo && <Text className="mb-3">{keyStorageInfo}</Text>}
 
               {!showPasscodeForm && (
-                <Button
-                  label="Add passcode"
-                  onClick={handleAddPassCode}
-                  variant="primary"
-                />
+                <Button label="Add passcode" onClick={handleAddPassCode} variant="primary" />
               )}
             </>
           )}
 
           {!hasPasscode && !canAddPasscode && (
             <Text>
-              Adding a passcode is not supported in temporary sessions. Please
-              sign out, then sign back in with the "Stay signed in" option
-              checked.
+              Adding a passcode is not supported in temporary sessions. Please sign out, then sign
+              back in with the "Stay signed in" option checked.
             </Text>
           )}
 
@@ -263,11 +227,7 @@ export const PasscodeLock = observer(({ application, appState }: Props) => {
                 label="Set Passcode"
                 className="mr-3"
               />
-              <Button
-                variant="normal"
-                onClick={() => setShowPasscodeForm(false)}
-                label="Cancel"
-              />
+              <Button variant="normal" onClick={() => setShowPasscodeForm(false)} label="Cancel" />
             </form>
           )}
 
@@ -312,7 +272,7 @@ export const PasscodeLock = observer(({ application, appState }: Props) => {
                     >
                       {option.label}
                     </a>
-                  );
+                  )
                 })}
               </div>
             </PreferencesSegment>
@@ -320,5 +280,5 @@ export const PasscodeLock = observer(({ application, appState }: Props) => {
         </>
       )}
     </>
-  );
-});
+  )
+})
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Security/Privacy.tsx b/app/assets/javascripts/Components/Preferences/Panes/Security/Privacy.tsx
new file mode 100644
index 000000000..163d0784f
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/Security/Privacy.tsx
@@ -0,0 +1,146 @@
+import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
+import { Switch } from '@/Components/Switch'
+import {
+  PreferencesGroup,
+  PreferencesSegment,
+  Subtitle,
+  Text,
+  Title,
+} from '@/Components/Preferences/PreferencesComponents'
+import { WebApplication } from '@/UIModels/Application'
+import { MuteSignInEmailsOption, LogSessionUserAgentOption, SettingName } from '@standardnotes/snjs'
+import { observer } from 'mobx-react-lite'
+import { FunctionalComponent } from 'preact'
+import { useCallback, useEffect, useState } from 'preact/hooks'
+import { STRING_FAILED_TO_UPDATE_USER_SETTING } from '@/Strings'
+
+type Props = {
+  application: WebApplication
+}
+
+export const Privacy: FunctionalComponent<Props> = observer(({ application }: Props) => {
+  const [signInEmailsMutedValue, setSignInEmailsMutedValue] = useState<MuteSignInEmailsOption>(
+    MuteSignInEmailsOption.NotMuted,
+  )
+  const [sessionUaLoggingValue, setSessionUaLoggingValue] = useState<LogSessionUserAgentOption>(
+    LogSessionUserAgentOption.Enabled,
+  )
+  const [isLoading, setIsLoading] = useState(false)
+
+  const updateSetting = async (settingName: SettingName, payload: string): Promise<boolean> => {
+    try {
+      await application.settings.updateSetting(settingName, payload, false)
+      return true
+    } catch (e) {
+      application.alertService.alert(STRING_FAILED_TO_UPDATE_USER_SETTING).catch(console.error)
+      return false
+    }
+  }
+
+  const loadSettings = useCallback(async () => {
+    if (!application.getUser()) {
+      return
+    }
+    setIsLoading(true)
+
+    try {
+      const userSettings = await application.settings.listSettings()
+      setSignInEmailsMutedValue(
+        userSettings.getSettingValue<MuteSignInEmailsOption>(
+          SettingName.MuteSignInEmails,
+          MuteSignInEmailsOption.NotMuted,
+        ),
+      )
+      setSessionUaLoggingValue(
+        userSettings.getSettingValue<LogSessionUserAgentOption>(
+          SettingName.LogSessionUserAgent,
+          LogSessionUserAgentOption.Enabled,
+        ),
+      )
+    } catch (error) {
+      console.error(error)
+    } finally {
+      setIsLoading(false)
+    }
+  }, [application])
+
+  useEffect(() => {
+    loadSettings().catch(console.error)
+  }, [loadSettings])
+
+  const toggleMuteSignInEmails = async () => {
+    const previousValue = signInEmailsMutedValue
+    const newValue =
+      previousValue === MuteSignInEmailsOption.Muted
+        ? MuteSignInEmailsOption.NotMuted
+        : MuteSignInEmailsOption.Muted
+    setSignInEmailsMutedValue(newValue)
+
+    const updateResult = await updateSetting(SettingName.MuteSignInEmails, newValue)
+
+    if (!updateResult) {
+      setSignInEmailsMutedValue(previousValue)
+    }
+  }
+
+  const toggleSessionLogging = async () => {
+    const previousValue = sessionUaLoggingValue
+    const newValue =
+      previousValue === LogSessionUserAgentOption.Enabled
+        ? LogSessionUserAgentOption.Disabled
+        : LogSessionUserAgentOption.Enabled
+    setSessionUaLoggingValue(newValue)
+
+    const updateResult = await updateSetting(SettingName.LogSessionUserAgent, newValue)
+
+    if (!updateResult) {
+      setSessionUaLoggingValue(previousValue)
+    }
+  }
+
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>Privacy</Title>
+        <div>
+          <div className="flex items-center justify-between">
+            <div className="flex flex-col">
+              <Subtitle>Disable sign-in notification emails</Subtitle>
+              <Text>
+                Disables email notifications when a new sign-in occurs on your account. (Email
+                notifications are available to paid subscribers).
+              </Text>
+            </div>
+            {isLoading ? (
+              <div className={'sk-spinner info small'} />
+            ) : (
+              <Switch
+                onChange={toggleMuteSignInEmails}
+                checked={signInEmailsMutedValue === MuteSignInEmailsOption.Muted}
+              />
+            )}
+          </div>
+          <HorizontalSeparator classes="mt-5 mb-3" />
+          <div className="flex items-center justify-between">
+            <div className="flex flex-col">
+              <Subtitle>Session user agent logging</Subtitle>
+              <Text>
+                User agent logging allows you to identify the devices or browsers signed into your
+                account. For increased privacy, you can disable this feature, which will remove all
+                saved user agent values from our server, and disable future logging of this value.
+              </Text>
+            </div>
+            {isLoading ? (
+              <div className={'sk-spinner info small'} />
+            ) : (
+              <Switch
+                onChange={toggleSessionLogging}
+                checked={sessionUaLoggingValue === LogSessionUserAgentOption.Enabled}
+              />
+            )}
+          </div>
+        </div>
+      </PreferencesSegment>
+    </PreferencesGroup>
+  )
+})
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Security/Protections.tsx b/app/assets/javascripts/Components/Preferences/Panes/Security/Protections.tsx
new file mode 100644
index 000000000..f705ecc00
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/Security/Protections.tsx
@@ -0,0 +1,103 @@
+import { WebApplication } from '@/UIModels/Application'
+import { FunctionalComponent } from 'preact'
+import { useCallback, useState, useEffect } from 'preact/hooks'
+import { ApplicationEvent } from '@standardnotes/snjs'
+import { isSameDay } from '@/Utils'
+import {
+  PreferencesGroup,
+  PreferencesSegment,
+  Title,
+  Text,
+} from '@/Components/Preferences/PreferencesComponents'
+import { Button } from '@/Components/Button/Button'
+
+type Props = {
+  application: WebApplication
+}
+
+export const Protections: FunctionalComponent<Props> = ({ application }) => {
+  const enableProtections = () => {
+    application.clearProtectionSession().catch(console.error)
+  }
+
+  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 removeUnprotectedSessionBeginObserver = application.addEventObserver(async () => {
+      setProtectionsDisabledUntil(getProtectionsDisabledUntil())
+    }, ApplicationEvent.UnprotectedSessionBegan)
+
+    const removeUnprotectedSessionEndObserver = application.addEventObserver(async () => {
+      setProtectionsDisabledUntil(getProtectionsDisabledUntil())
+    }, ApplicationEvent.UnprotectedSessionExpired)
+
+    const removeKeyStatusChangedObserver = application.addEventObserver(async () => {
+      setHasProtections(application.hasProtectionSources())
+    }, ApplicationEvent.KeyStatusChanged)
+
+    return () => {
+      removeUnprotectedSessionBeginObserver()
+      removeUnprotectedSessionEndObserver()
+      removeKeyStatusChangedObserver()
+    }
+  }, [application, getProtectionsDisabledUntil])
+
+  if (!hasProtections) {
+    return null
+  }
+
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>Protections</Title>
+        {protectionsDisabledUntil ? (
+          <Text className="info">Unprotected access expires at {protectionsDisabledUntil}.</Text>
+        ) : (
+          <Text className="info">Protections are enabled.</Text>
+        )}
+        <Text className="mt-2">
+          Actions like viewing or searching protected notes, exporting decrypted backups, or
+          revoking an active session require additional authentication such as entering your account
+          password or application passcode.
+        </Text>
+        {protectionsDisabledUntil && (
+          <Button
+            className="mt-3"
+            variant="primary"
+            label="End Unprotected Access"
+            onClick={enableProtections}
+          />
+        )}
+      </PreferencesSegment>
+    </PreferencesGroup>
+  )
+}
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Security/index.tsx b/app/assets/javascripts/Components/Preferences/Panes/Security/index.tsx
new file mode 100644
index 000000000..b54e0117f
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/Security/index.tsx
@@ -0,0 +1,25 @@
+import { WebApplication } from '@/UIModels/Application'
+import { AppState } from '@/UIModels/AppState'
+import { FunctionComponent } from 'preact'
+import { PreferencesPane } from '@/Components/Preferences/PreferencesComponents'
+import { TwoFactorAuthWrapper } from '../TwoFactorAuth'
+import { MfaProps } from '../TwoFactorAuth/MfaProps'
+import { Encryption } from './Encryption'
+import { PasscodeLock } from './PasscodeLock'
+import { Privacy } from './Privacy'
+import { Protections } from './Protections'
+
+interface SecurityProps extends MfaProps {
+  appState: AppState
+  application: WebApplication
+}
+
+export const Security: FunctionComponent<SecurityProps> = (props) => (
+  <PreferencesPane>
+    <Encryption appState={props.appState} />
+    <Protections application={props.application} />
+    <TwoFactorAuthWrapper mfaProvider={props.mfaProvider} userProvider={props.userProvider} />
+    <PasscodeLock appState={props.appState} application={props.application} />
+    <Privacy application={props.application} />
+  </PreferencesPane>
+)
diff --git a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/AuthAppInfoPopup.tsx b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/AuthAppInfoPopup.tsx
similarity index 56%
rename from app/assets/javascripts/components/Preferences/panes/two-factor-auth/AuthAppInfoPopup.tsx
rename to app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/AuthAppInfoPopup.tsx
index 203783cfa..8cff061cf 100644
--- a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/AuthAppInfoPopup.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/AuthAppInfoPopup.tsx
@@ -1,19 +1,15 @@
-import { Icon } from '@/components/Icon';
-import {
-  Disclosure,
-  DisclosureButton,
-  DisclosurePanel,
-} from '@reach/disclosure';
-import { FunctionComponent } from 'preact';
-import { MouseEventHandler } from 'react';
-import { useState, useRef, useEffect } from 'preact/hooks';
-import { IconType } from '@standardnotes/snjs';
+import { Icon } from '@/Components/Icon'
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
+import { FunctionComponent } from 'preact'
+import { MouseEventHandler } from 'react'
+import { useState, useRef, useEffect } from 'preact/hooks'
+import { IconType } from '@standardnotes/snjs'
 
 const DisclosureIconButton: FunctionComponent<{
-  className?: string;
-  icon: IconType;
-  onMouseEnter?: MouseEventHandler;
-  onMouseLeave?: MouseEventHandler;
+  className?: string
+  icon: IconType
+  onMouseEnter?: MouseEventHandler
+  onMouseLeave?: MouseEventHandler
 }> = ({ className = '', icon, onMouseEnter, onMouseLeave }) => (
   <DisclosureButton
     onMouseEnter={onMouseEnter}
@@ -24,7 +20,7 @@ const DisclosureIconButton: FunctionComponent<{
   >
     <Icon type={icon} />
   </DisclosureButton>
-);
+)
 
 /**
  * AuthAppInfoPopup is an info icon that shows a tooltip when clicked
@@ -34,23 +30,20 @@ const DisclosureIconButton: FunctionComponent<{
  * @returns
  */
 export const AuthAppInfoTooltip: FunctionComponent = () => {
-  const [isClicked, setClicked] = useState(false);
-  const [isHover, setHover] = useState(false);
-  const ref = useRef(null);
+  const [isClicked, setClicked] = useState(false)
+  const [isHover, setHover] = useState(false)
+  const ref = useRef(null)
 
   useEffect(() => {
-    const dismiss = () => setClicked(false);
-    document.addEventListener('mousedown', dismiss);
+    const dismiss = () => setClicked(false)
+    document.addEventListener('mousedown', dismiss)
     return () => {
-      document.removeEventListener('mousedown', dismiss);
-    };
-  }, [ref]);
+      document.removeEventListener('mousedown', dismiss)
+    }
+  }, [ref])
 
   return (
-    <Disclosure
-      open={isClicked || isHover}
-      onChange={() => setClicked(!isClicked)}
-    >
+    <Disclosure open={isClicked || isHover} onChange={() => setClicked(!isClicked)}>
       <div className="relative">
         <DisclosureIconButton
           icon="info"
@@ -63,11 +56,11 @@ export const AuthAppInfoTooltip: FunctionComponent = () => {
             className={`bg-inverted-default color-inverted-default text-center rounded shadow-overlay 
 py-1.5 px-2 absolute w-103 -top-10 -left-51`}
           >
-            Some apps, like Google Authenticator, do not back up and restore
-            your secret keys if you lose your device or get a new one.
+            Some apps, like Google Authenticator, do not back up and restore your secret keys if you
+            lose your device or get a new one.
           </div>
         </DisclosurePanel>
       </div>
     </Disclosure>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/Bullet.tsx b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/Bullet.tsx
new file mode 100644
index 000000000..10772aa22
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/Bullet.tsx
@@ -0,0 +1,5 @@
+import { FunctionComponent } from 'preact'
+
+export const Bullet: FunctionComponent<{ className?: string }> = ({ className = '' }) => (
+  <div className={`min-w-1 min-h-1 rounded-full bg-inverted-default ${className} mr-2`} />
+)
diff --git a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/CopyButton.tsx b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/CopyButton.tsx
new file mode 100644
index 000000000..7274217f6
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/CopyButton.tsx
@@ -0,0 +1,21 @@
+import { FunctionComponent } from 'preact'
+
+import { IconButton } from '@/Components/Button/IconButton'
+
+import { useState } from 'preact/hooks'
+
+export const CopyButton: FunctionComponent<{ copyValue: string }> = ({ copyValue: secretKey }) => {
+  const [isCopied, setCopied] = useState(false)
+  return (
+    <IconButton
+      focusable={false}
+      title="Copy to clipboard"
+      icon={isCopied ? 'check' : 'copy'}
+      className={isCopied ? 'success' : undefined}
+      onClick={() => {
+        navigator?.clipboard?.writeText(secretKey).catch(console.error)
+        setCopied(() => true)
+      }}
+    />
+  )
+}
diff --git a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/MfaProps.ts b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/MfaProps.ts
new file mode 100644
index 000000000..1534e38cc
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/MfaProps.ts
@@ -0,0 +1,6 @@
+import { MfaProvider, UserProvider } from '@/Components/Preferences/Providers'
+
+export interface MfaProps {
+  userProvider: UserProvider
+  mfaProvider: MfaProvider
+}
diff --git a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/SaveSecretKey.tsx b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/SaveSecretKey.tsx
similarity index 77%
rename from app/assets/javascripts/components/Preferences/panes/two-factor-auth/SaveSecretKey.tsx
rename to app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/SaveSecretKey.tsx
index a52c746dc..b35768a25 100644
--- a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/SaveSecretKey.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/SaveSecretKey.tsx
@@ -1,21 +1,21 @@
-import { Button } from '@/components/Button';
-import { DecoratedInput } from '@/components/DecoratedInput';
-import { IconButton } from '@/components/IconButton';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { CopyButton } from './CopyButton';
-import { Bullet } from './Bullet';
-import { downloadSecretKey } from './download-secret-key';
-import { TwoFactorActivation } from './TwoFactorActivation';
+import { Button } from '@/Components/Button/Button'
+import { DecoratedInput } from '@/Components/Input/DecoratedInput'
+import { IconButton } from '@/Components/Button/IconButton'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { CopyButton } from './CopyButton'
+import { Bullet } from './Bullet'
+import { downloadSecretKey } from './download-secret-key'
+import { TwoFactorActivation } from './TwoFactorActivation'
 import {
   ModalDialog,
   ModalDialogButtons,
   ModalDialogDescription,
   ModalDialogLabel,
-} from '@/components/Shared/ModalDialog';
+} from '@/Components/Shared/ModalDialog'
 
 export const SaveSecretKey: FunctionComponent<{
-  activation: TwoFactorActivation;
+  activation: TwoFactorActivation
 }> = observer(({ activation: act }) => {
   const download = (
     <IconButton
@@ -23,15 +23,15 @@ export const SaveSecretKey: FunctionComponent<{
       title="Download"
       icon="download"
       onClick={() => {
-        downloadSecretKey(act.secretKey);
+        downloadSecretKey(act.secretKey)
       }}
     />
-  );
+  )
   return (
     <ModalDialog>
       <ModalDialogLabel
         closeDialog={() => {
-          act.cancelActivation();
+          act.cancelActivation()
         }}
       >
         Step 2 of 3 - Save secret key
@@ -63,8 +63,7 @@ export const SaveSecretKey: FunctionComponent<{
             <Bullet />
             <div className="min-w-1" />
             <div className="text-sm">
-              You can use this key to generate codes if you lose access to your
-              authenticator app.{' '}
+              You can use this key to generate codes if you lose access to your authenticator app.{' '}
               <a
                 target="_blank"
                 href="https://standardnotes.com/help/22/what-happens-if-i-lose-my-2fa-device-and-my-secret-key"
@@ -90,5 +89,5 @@ export const SaveSecretKey: FunctionComponent<{
         />
       </ModalDialogButtons>
     </ModalDialog>
-  );
-});
+  )
+})
diff --git a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/ScanQRCode.tsx b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/ScanQRCode.tsx
similarity index 79%
rename from app/assets/javascripts/components/Preferences/panes/two-factor-auth/ScanQRCode.tsx
rename to app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/ScanQRCode.tsx
index 73906a545..7516e2790 100644
--- a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/ScanQRCode.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/ScanQRCode.tsx
@@ -1,23 +1,21 @@
-import { FunctionComponent } from 'preact';
-import { observer } from 'mobx-react-lite';
-
-import QRCode from 'qrcode.react';
-
-import { DecoratedInput } from '@/components/DecoratedInput';
-import { Button } from '@/components/Button';
-import { TwoFactorActivation } from './TwoFactorActivation';
-import { AuthAppInfoTooltip } from './AuthAppInfoPopup';
+import { FunctionComponent } from 'preact'
+import { observer } from 'mobx-react-lite'
+import QRCode from 'qrcode.react'
+import { DecoratedInput } from '@/Components/Input/DecoratedInput'
+import { Button } from '@/Components/Button/Button'
+import { TwoFactorActivation } from './TwoFactorActivation'
+import { AuthAppInfoTooltip } from './AuthAppInfoPopup'
 import {
   ModalDialog,
   ModalDialogButtons,
   ModalDialogDescription,
   ModalDialogLabel,
-} from '@/components/Shared/ModalDialog';
-import { CopyButton } from './CopyButton';
-import { Bullet } from './Bullet';
+} from '@/Components/Shared/ModalDialog'
+import { CopyButton } from './CopyButton'
+import { Bullet } from './Bullet'
 
 export const ScanQRCode: FunctionComponent<{
-  activation: TwoFactorActivation;
+  activation: TwoFactorActivation
 }> = observer(({ activation: act }) => {
   return (
     <ModalDialog>
@@ -75,5 +73,5 @@ export const ScanQRCode: FunctionComponent<{
         />
       </ModalDialogButtons>
     </ModalDialog>
-  );
-});
+  )
+})
diff --git a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorActivation.ts b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorActivation.ts
similarity index 55%
rename from app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorActivation.ts
rename to app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorActivation.ts
index b9e3668cd..8e978d89b 100644
--- a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorActivation.ts
+++ b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorActivation.ts
@@ -1,35 +1,27 @@
-import { MfaProvider } from '../../providers';
-import { action, makeAutoObservable, observable } from 'mobx';
+import { MfaProvider } from '@/Components/Preferences/Providers'
+import { action, makeAutoObservable, observable } from 'mobx'
 
-type ActivationStep =
-  | 'scan-qr-code'
-  | 'save-secret-key'
-  | 'verification'
-  | 'success';
-type VerificationStatus =
-  | 'none'
-  | 'invalid-auth-code'
-  | 'invalid-secret'
-  | 'valid';
+type ActivationStep = 'scan-qr-code' | 'save-secret-key' | 'verification' | 'success'
+type VerificationStatus = 'none' | 'invalid-auth-code' | 'invalid-secret' | 'valid'
 
 export class TwoFactorActivation {
-  public readonly type = 'two-factor-activation' as const;
+  public readonly type = 'two-factor-activation' as const
 
-  private _activationStep: ActivationStep;
+  private _activationStep: ActivationStep
 
-  private _2FAVerification: VerificationStatus = 'none';
+  private _2FAVerification: VerificationStatus = 'none'
 
-  private inputSecretKey = '';
-  private inputOtpToken = '';
+  private inputSecretKey = ''
+  private inputOtpToken = ''
 
   constructor(
     private mfaProvider: MfaProvider,
     private readonly email: string,
     private readonly _secretKey: string,
     private _cancelActivation: () => void,
-    private _enabled2FA: () => void
+    private _enabled2FA: () => void,
   ) {
-    this._activationStep = 'scan-qr-code';
+    this._activationStep = 'scan-qr-code'
 
     makeAutoObservable<
       TwoFactorActivation,
@@ -49,90 +41,90 @@ export class TwoFactorActivation {
         inputOtpToken: observable,
         inputSecretKey: observable,
       },
-      { autoBind: true }
-    );
+      { autoBind: true },
+    )
   }
 
   get secretKey(): string {
-    return this._secretKey;
+    return this._secretKey
   }
 
   get activationStep(): ActivationStep {
-    return this._activationStep;
+    return this._activationStep
   }
 
   get verificationStatus(): VerificationStatus {
-    return this._2FAVerification;
+    return this._2FAVerification
   }
 
   get qrCode(): string {
-    return `otpauth://totp/2FA?secret=${this._secretKey}&issuer=Standard%20Notes&label=${this.email}`;
+    return `otpauth://totp/2FA?secret=${this._secretKey}&issuer=Standard%20Notes&label=${this.email}`
   }
 
   cancelActivation(): void {
-    this._cancelActivation();
+    this._cancelActivation()
   }
 
   openScanQRCode(): void {
     if (this._activationStep === 'save-secret-key') {
-      this._activationStep = 'scan-qr-code';
+      this._activationStep = 'scan-qr-code'
     }
   }
 
   openSaveSecretKey(): void {
-    const preconditions: ActivationStep[] = ['scan-qr-code', 'verification'];
+    const preconditions: ActivationStep[] = ['scan-qr-code', 'verification']
     if (preconditions.includes(this._activationStep)) {
-      this._activationStep = 'save-secret-key';
+      this._activationStep = 'save-secret-key'
     }
   }
 
   openVerification(): void {
-    this.inputOtpToken = '';
-    this.inputSecretKey = '';
+    this.inputOtpToken = ''
+    this.inputSecretKey = ''
     if (this._activationStep === 'save-secret-key') {
-      this._activationStep = 'verification';
-      this._2FAVerification = 'none';
+      this._activationStep = 'verification'
+      this._2FAVerification = 'none'
     }
   }
 
   openSuccess(): void {
     if (this._activationStep === 'verification') {
-      this._activationStep = 'success';
+      this._activationStep = 'success'
     }
   }
 
   setInputSecretKey(secretKey: string): void {
-    this.inputSecretKey = secretKey;
+    this.inputSecretKey = secretKey
   }
 
   setInputOtpToken(otpToken: string): void {
-    this.inputOtpToken = otpToken;
+    this.inputOtpToken = otpToken
   }
 
   enable2FA(): void {
     if (this.inputSecretKey !== this._secretKey) {
-      this._2FAVerification = 'invalid-secret';
-      return;
+      this._2FAVerification = 'invalid-secret'
+      return
     }
 
     this.mfaProvider
       .enableMfa(this.inputSecretKey, this.inputOtpToken)
       .then(
         action(() => {
-          this._2FAVerification = 'valid';
-          this.openSuccess();
-        })
+          this._2FAVerification = 'valid'
+          this.openSuccess()
+        }),
       )
       .catch(
         action(() => {
-          this._2FAVerification = 'invalid-auth-code';
-        })
-      );
+          this._2FAVerification = 'invalid-auth-code'
+        }),
+      )
   }
 
   finishActivation(): void {
     if (this._activationStep === 'success') {
-      this._enabled2FA();
+      this._enabled2FA()
     }
   }
 }
diff --git a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorActivationView.tsx b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorActivationView.tsx
new file mode 100644
index 000000000..2ac0aa94b
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorActivationView.tsx
@@ -0,0 +1,22 @@
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { TwoFactorActivation } from './TwoFactorActivation'
+import { SaveSecretKey } from './SaveSecretKey'
+import { ScanQRCode } from './ScanQRCode'
+import { Verification } from './Verification'
+import { TwoFactorSuccess } from './TwoFactorSuccess'
+
+export const TwoFactorActivationView: FunctionComponent<{
+  activation: TwoFactorActivation
+}> = observer(({ activation: act }) => {
+  switch (act.activationStep) {
+    case 'scan-qr-code':
+      return <ScanQRCode activation={act} />
+    case 'save-secret-key':
+      return <SaveSecretKey activation={act} />
+    case 'verification':
+      return <Verification activation={act} />
+    case 'success':
+      return <TwoFactorSuccess activation={act} />
+  }
+})
diff --git a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorAuth.ts b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuth.ts
similarity index 51%
rename from app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorAuth.ts
rename to app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuth.ts
index 854325e6b..f595d2f3f 100644
--- a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorAuth.ts
+++ b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuth.ts
@@ -1,34 +1,27 @@
-import { MfaProvider, UserProvider } from '@/components/Preferences/providers';
-import { action, makeAutoObservable, observable } from 'mobx';
-import { TwoFactorActivation } from './TwoFactorActivation';
+import { MfaProvider, UserProvider } from '@/Components/Preferences/Providers'
+import { action, makeAutoObservable, observable } from 'mobx'
+import { TwoFactorActivation } from './TwoFactorActivation'
 
-type TwoFactorStatus =
-  | 'two-factor-enabled'
-  | TwoFactorActivation
-  | 'two-factor-disabled';
+type TwoFactorStatus = 'two-factor-enabled' | TwoFactorActivation | 'two-factor-disabled'
 
-export const is2FADisabled = (
-  status: TwoFactorStatus
-): status is 'two-factor-disabled' => status === 'two-factor-disabled';
+export const is2FADisabled = (status: TwoFactorStatus): status is 'two-factor-disabled' =>
+  status === 'two-factor-disabled'
 
-export const is2FAActivation = (
-  status: TwoFactorStatus
-): status is TwoFactorActivation =>
-  (status as TwoFactorActivation)?.type === 'two-factor-activation';
+export const is2FAActivation = (status: TwoFactorStatus): status is TwoFactorActivation =>
+  (status as TwoFactorActivation)?.type === 'two-factor-activation'
 
-export const is2FAEnabled = (
-  status: TwoFactorStatus
-): status is 'two-factor-enabled' => status === 'two-factor-enabled';
+export const is2FAEnabled = (status: TwoFactorStatus): status is 'two-factor-enabled' =>
+  status === 'two-factor-enabled'
 
 export class TwoFactorAuth {
-  private _status: TwoFactorStatus | 'fetching' = 'fetching';
-  private _errorMessage: string | null;
+  private _status: TwoFactorStatus | 'fetching' = 'fetching'
+  private _errorMessage: string | null
 
   constructor(
     private readonly mfaProvider: MfaProvider,
-    private readonly userProvider: UserProvider
+    private readonly userProvider: UserProvider,
   ) {
-    this._errorMessage = null;
+    this._errorMessage = null
 
     makeAutoObservable<
       TwoFactorAuth,
@@ -41,34 +34,34 @@ export class TwoFactorAuth {
         deactivateMfa: action,
         startActivation: action,
       },
-      { autoBind: true }
-    );
+      { autoBind: true },
+    )
   }
 
   private startActivation(): void {
-    const setDisabled = action(() => (this._status = 'two-factor-disabled'));
+    const setDisabled = action(() => (this._status = 'two-factor-disabled'))
     const setEnabled = action(() => {
-      this._status = 'two-factor-enabled';
-      this.fetchStatus();
-    });
+      this._status = 'two-factor-enabled'
+      this.fetchStatus()
+    })
     this.mfaProvider
       .generateMfaSecret()
       .then(
         action((secret) => {
           this._status = new TwoFactorActivation(
             this.mfaProvider,
-            this.userProvider.getUser()!.email,
+            this.userProvider.getUser()?.email as string,
             secret,
             setDisabled,
-            setEnabled
-          );
-        })
+            setEnabled,
+          )
+        }),
       )
       .catch(
         action((e) => {
-          this.setError(e.message);
-        })
-      );
+          this.setError(e.message)
+        }),
+      )
   }
 
   private deactivate2FA(): void {
@@ -76,76 +69,76 @@ export class TwoFactorAuth {
       .disableMfa()
       .then(
         action(() => {
-          this.fetchStatus();
-        })
+          this.fetchStatus()
+        }),
       )
       .catch(
         action((e) => {
-          this.setError(e.message);
-        })
-      );
+          this.setError(e.message)
+        }),
+      )
   }
 
   isLoggedIn(): boolean {
-    return this.userProvider.getUser() != undefined;
+    return this.userProvider.getUser() != undefined
   }
 
   fetchStatus(): void {
     if (!this.isLoggedIn()) {
-      return;
+      return
     }
 
     if (!this.isMfaFeatureAvailable()) {
-      return;
+      return
     }
 
     this.mfaProvider
       .isMfaActivated()
       .then(
         action((active) => {
-          this._status = active ? 'two-factor-enabled' : 'two-factor-disabled';
-          this.setError(null);
-        })
+          this._status = active ? 'two-factor-enabled' : 'two-factor-disabled'
+          this.setError(null)
+        }),
       )
       .catch(
         action((e) => {
-          this._status = 'two-factor-disabled';
-          this.setError(e.message);
-        })
-      );
+          this._status = 'two-factor-disabled'
+          this.setError(e.message)
+        }),
+      )
   }
 
   private setError(errorMessage: string | null): void {
-    this._errorMessage = errorMessage;
+    this._errorMessage = errorMessage
   }
 
   toggle2FA(): void {
     if (!this.isLoggedIn()) {
-      return;
+      return
     }
 
     if (!this.isMfaFeatureAvailable()) {
-      return;
+      return
     }
 
     if (this._status === 'two-factor-disabled') {
-      return this.startActivation();
+      return this.startActivation()
     }
 
     if (this._status === 'two-factor-enabled') {
-      return this.deactivate2FA();
+      return this.deactivate2FA()
     }
   }
 
   get errorMessage(): string | null {
-    return this._errorMessage;
+    return this._errorMessage
   }
 
   get status(): TwoFactorStatus | 'fetching' {
-    return this._status;
+    return this._status
   }
 
   isMfaFeatureAvailable(): boolean {
-    return this.mfaProvider.isMfaFeatureAvailable();
+    return this.mfaProvider.isMfaFeatureAvailable()
   }
 }
diff --git a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView.tsx b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView.tsx
new file mode 100644
index 000000000..c9ab5fbfc
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView.tsx
@@ -0,0 +1,77 @@
+import { FunctionComponent } from 'preact'
+import { Title, Text, PreferencesGroup, PreferencesSegment } from '@/Components/Preferences/PreferencesComponents'
+import { Switch } from '@/Components/Switch'
+import { observer } from 'mobx-react-lite'
+import { is2FAActivation, is2FADisabled, TwoFactorAuth } from './TwoFactorAuth'
+import { TwoFactorActivationView } from './TwoFactorActivationView'
+
+const TwoFactorTitle: FunctionComponent<{ auth: TwoFactorAuth }> = observer(({ auth }) => {
+  if (!auth.isLoggedIn()) {
+    return <Title>Two-factor authentication not available</Title>
+  }
+  if (!auth.isMfaFeatureAvailable()) {
+    return <Title>Two-factor authentication not available</Title>
+  }
+  return <Title>Two-factor authentication</Title>
+})
+
+const TwoFactorDescription: FunctionComponent<{ auth: TwoFactorAuth }> = observer(({ auth }) => {
+  if (!auth.isLoggedIn()) {
+    return <Text>Sign in or register for an account to configure 2FA.</Text>
+  }
+  if (!auth.isMfaFeatureAvailable()) {
+    return (
+      <Text>
+        A paid subscription plan is required to enable 2FA.{' '}
+        <a target="_blank" href="https://standardnotes.com/features">
+          Learn more
+        </a>
+        .
+      </Text>
+    )
+  }
+  return <Text>An extra layer of security when logging in to your account.</Text>
+})
+
+const TwoFactorSwitch: FunctionComponent<{ auth: TwoFactorAuth }> = observer(({ auth }) => {
+  if (!(auth.isLoggedIn() && auth.isMfaFeatureAvailable())) {
+    return null
+  }
+
+  if (auth.status === 'fetching') {
+    return <div class="sk-spinner normal info" />
+  }
+
+  return <Switch checked={!is2FADisabled(auth.status)} onChange={auth.toggle2FA} />
+})
+
+export const TwoFactorAuthView: FunctionComponent<{
+  auth: TwoFactorAuth
+}> = observer(({ auth }) => {
+  return (
+    <>
+      <PreferencesGroup>
+        <PreferencesSegment>
+          <div className="flex flex-row items-center">
+            <div className="flex-grow flex flex-col">
+              <TwoFactorTitle auth={auth} />
+              <TwoFactorDescription auth={auth} />
+            </div>
+            <div className="flex flex-col justify-center items-center min-w-15">
+              <TwoFactorSwitch auth={auth} />
+            </div>
+          </div>
+        </PreferencesSegment>
+
+        {auth.errorMessage != null && (
+          <PreferencesSegment>
+            <Text className="color-danger">{auth.errorMessage}</Text>
+          </PreferencesSegment>
+        )}
+      </PreferencesGroup>
+      {auth.status !== 'fetching' && is2FAActivation(auth.status) && (
+        <TwoFactorActivationView activation={auth.status} />
+      )}
+    </>
+  )
+})
diff --git a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorSuccess.tsx b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorSuccess.tsx
similarity index 57%
rename from app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorSuccess.tsx
rename to app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorSuccess.tsx
index 956940153..be6716bc0 100644
--- a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorSuccess.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorSuccess.tsx
@@ -1,26 +1,23 @@
-import { Button } from '@/components/Button';
+import { Button } from '@/Components/Button/Button'
 import ModalDialog, {
   ModalDialogButtons,
   ModalDialogDescription,
   ModalDialogLabel,
-} from '@/components/Shared/ModalDialog';
-import { Subtitle } from '@/components/Preferences/components';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { TwoFactorActivation } from './TwoFactorActivation';
+} from '@/Components/Shared/ModalDialog'
+import { Subtitle } from '@/Components/Preferences/PreferencesComponents'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { TwoFactorActivation } from './TwoFactorActivation'
 
 export const TwoFactorSuccess: FunctionComponent<{
-  activation: TwoFactorActivation;
+  activation: TwoFactorActivation
 }> = observer(({ activation: act }) => (
   <ModalDialog>
-    <ModalDialogLabel closeDialog={act.finishActivation}>
-      Successfully Enabled
-    </ModalDialogLabel>
+    <ModalDialogLabel closeDialog={act.finishActivation}>Successfully Enabled</ModalDialogLabel>
     <ModalDialogDescription>
       <div className="flex flex-row items-center justify-center pt-2">
         <Subtitle>
-          Two-factor authentication has been successfully enabled for your
-          account.
+          Two-factor authentication has been successfully enabled for your account.
         </Subtitle>
       </div>
     </ModalDialogDescription>
@@ -33,4 +30,4 @@ export const TwoFactorSuccess: FunctionComponent<{
       />
     </ModalDialogButtons>
   </ModalDialog>
-));
+))
diff --git a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/Verification.tsx b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/Verification.tsx
similarity index 61%
rename from app/assets/javascripts/components/Preferences/panes/two-factor-auth/Verification.tsx
rename to app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/Verification.tsx
index 39f4f33d4..d337cad9f 100644
--- a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/Verification.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/Verification.tsx
@@ -1,23 +1,21 @@
-import { Button } from '@/components/Button';
-import { DecoratedInput } from '@/components/DecoratedInput';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { Bullet } from './Bullet';
-import { TwoFactorActivation } from './TwoFactorActivation';
+import { Button } from '@/Components/Button/Button'
+import { DecoratedInput } from '@/Components/Input/DecoratedInput'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { Bullet } from './Bullet'
+import { TwoFactorActivation } from './TwoFactorActivation'
 import {
   ModalDialog,
   ModalDialogButtons,
   ModalDialogDescription,
   ModalDialogLabel,
-} from '@/components/Shared/ModalDialog';
+} from '@/Components/Shared/ModalDialog'
 
 export const Verification: FunctionComponent<{
-  activation: TwoFactorActivation;
+  activation: TwoFactorActivation
 }> = observer(({ activation: act }) => {
-  const secretKeyClass =
-    act.verificationStatus === 'invalid-secret' ? 'border-danger' : '';
-  const authTokenClass =
-    act.verificationStatus === 'invalid-auth-code' ? 'border-danger' : '';
+  const secretKeyClass = act.verificationStatus === 'invalid-secret' ? 'border-danger' : ''
+  const authTokenClass = act.verificationStatus === 'invalid-auth-code' ? 'border-danger' : ''
   return (
     <ModalDialog>
       <ModalDialogLabel closeDialog={act.cancelActivation}>
@@ -32,23 +30,16 @@ export const Verification: FunctionComponent<{
               Enter your <b>secret key</b>:
             </div>
             <div className="min-w-2" />
-            <DecoratedInput
-              className={`w-92 ${secretKeyClass}`}
-              onChange={act.setInputSecretKey}
-            />
+            <DecoratedInput className={`w-92 ${secretKeyClass}`} onChange={act.setInputSecretKey} />
           </div>
           <div className="flex flex-row items-center">
             <Bullet />
             <div className="min-w-1" />
             <div className="text-sm">
-              Verify the <b>authentication code</b> generated by your
-              authenticator app:
+              Verify the <b>authentication code</b> generated by your authenticator app:
             </div>
             <div className="min-w-2" />
-            <DecoratedInput
-              className={`w-30 ${authTokenClass}`}
-              onChange={act.setInputOtpToken}
-            />
+            <DecoratedInput className={`w-30 ${authTokenClass}`} onChange={act.setInputOtpToken} />
           </div>
         </div>
       </ModalDialogDescription>
@@ -69,13 +60,8 @@ export const Verification: FunctionComponent<{
           label="Back"
           onClick={act.openSaveSecretKey}
         />
-        <Button
-          className="min-w-20"
-          variant="primary"
-          label="Next"
-          onClick={act.enable2FA}
-        />
+        <Button className="min-w-20" variant="primary" label="Next" onClick={act.enable2FA} />
       </ModalDialogButtons>
     </ModalDialog>
-  );
-});
+  )
+})
diff --git a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/download-secret-key.tsx b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/download-secret-key.tsx
new file mode 100644
index 000000000..bb472869e
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/download-secret-key.tsx
@@ -0,0 +1,13 @@
+// Temporary implementation until integration
+export function downloadSecretKey(text: string) {
+  const link = document.createElement('a')
+  const blob = new Blob([text], {
+    type: 'text/plain;charset=utf-8',
+  })
+  link.href = window.URL.createObjectURL(blob)
+  link.setAttribute('download', 'standardnotes_2fa_key.txt')
+  document.body.appendChild(link)
+  link.click()
+  link.remove()
+  window.URL.revokeObjectURL(link.href)
+}
diff --git a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/index.tsx b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/index.tsx
new file mode 100644
index 000000000..5d051d2e6
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/index.tsx
@@ -0,0 +1,11 @@
+import { FunctionComponent } from 'preact'
+import { useState } from 'preact/hooks'
+import { MfaProps } from './MfaProps'
+import { TwoFactorAuth } from './TwoFactorAuth'
+import { TwoFactorAuthView } from './TwoFactorAuthView'
+
+export const TwoFactorAuthWrapper: FunctionComponent<MfaProps> = (props) => {
+  const [auth] = useState(() => new TwoFactorAuth(props.mfaProvider, props.userProvider))
+  auth.fetchStatus()
+  return <TwoFactorAuthView auth={auth} />
+}
diff --git a/app/assets/javascripts/Components/Preferences/Panes/index.ts b/app/assets/javascripts/Components/Preferences/Panes/index.ts
new file mode 100644
index 000000000..bac3cabd2
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/index.ts
@@ -0,0 +1,5 @@
+export * from './HelpFeedback'
+export * from './Security'
+export * from './Account'
+export * from './Listed'
+export * from './General'
diff --git a/app/assets/javascripts/components/Preferences/components/Content.tsx b/app/assets/javascripts/Components/Preferences/PreferencesComponents/Content.tsx
similarity index 57%
rename from app/assets/javascripts/components/Preferences/components/Content.tsx
rename to app/assets/javascripts/Components/Preferences/PreferencesComponents/Content.tsx
index fe6d3a78d..6303dc6fc 100644
--- a/app/assets/javascripts/components/Preferences/components/Content.tsx
+++ b/app/assets/javascripts/Components/Preferences/PreferencesComponents/Content.tsx
@@ -1,41 +1,37 @@
-import { FunctionComponent } from 'preact';
+import { FunctionComponent } from 'preact'
 
 export const Title: FunctionComponent = ({ children }) => (
   <>
     <h2 className="text-base m-0 mb-1">{children}</h2>
     <div className="min-h-2" />
   </>
-);
+)
 
 export const Subtitle: FunctionComponent<{ className?: string }> = ({
   children,
   className = '',
-}) => (
-  <h4 className={`font-medium text-sm m-0 mb-1 ${className}`}>{children}</h4>
-);
+}) => <h4 className={`font-medium text-sm m-0 mb-1 ${className}`}>{children}</h4>
 
 export const SubtitleLight: FunctionComponent<{ className?: string }> = ({
   children,
   className = '',
-}) => (
-  <h4 className={`font-normal text-sm m-0 mb-1 ${className}`}>{children}</h4>
-);
+}) => <h4 className={`font-normal text-sm m-0 mb-1 ${className}`}>{children}</h4>
 
-export const Text: FunctionComponent<{ className?: string }> = ({
-  children,
-  className = '',
-}) => <p className={`${className} text-xs`}>{children}</p>;
+export const Text: FunctionComponent<{ className?: string }> = ({ children, className = '' }) => (
+  <p className={`${className} text-xs`}>{children}</p>
+)
 
-const buttonClasses = `block bg-default color-text rounded border-solid \
+const buttonClasses =
+  'block bg-default color-text rounded border-solid \
 border-1 px-4 py-1.75 font-bold text-sm fit-content \
-focus:bg-contrast hover:bg-contrast border-main`;
+focus:bg-contrast hover:bg-contrast border-main'
 
 export const LinkButton: FunctionComponent<{
-  label: string;
-  link: string;
-  className?: string;
+  label: string
+  link: string
+  className?: string
 }> = ({ label, link, className }) => (
   <a target="_blank" className={`${className} ${buttonClasses}`} href={link}>
     {label}
   </a>
-);
+)
diff --git a/app/assets/javascripts/Components/Preferences/PreferencesComponents/MenuItem.tsx b/app/assets/javascripts/Components/Preferences/PreferencesComponents/MenuItem.tsx
new file mode 100644
index 000000000..0898f2c3b
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/PreferencesComponents/MenuItem.tsx
@@ -0,0 +1,24 @@
+import { Icon } from '@/Components/Icon'
+import { FunctionComponent } from 'preact'
+import { IconType } from '@standardnotes/snjs'
+
+interface Props {
+  iconType: IconType
+  label: string
+  selected: boolean
+  onClick: () => void
+}
+
+export const MenuItem: FunctionComponent<Props> = ({ iconType, label, selected, onClick }) => (
+  <div
+    className={`preferences-menu-item select-none ${selected ? 'selected' : ''}`}
+    onClick={(e) => {
+      e.preventDefault()
+      onClick()
+    }}
+  >
+    <Icon className="icon" type={iconType} />
+    <div className="min-w-1" />
+    {label}
+  </div>
+)
diff --git a/app/assets/javascripts/components/Preferences/components/PreferencesGroup.tsx b/app/assets/javascripts/Components/Preferences/PreferencesComponents/PreferencesGroup.tsx
similarity index 58%
rename from app/assets/javascripts/components/Preferences/components/PreferencesGroup.tsx
rename to app/assets/javascripts/Components/Preferences/PreferencesComponents/PreferencesGroup.tsx
index 982b85904..5dd982d9f 100644
--- a/app/assets/javascripts/components/Preferences/components/PreferencesGroup.tsx
+++ b/app/assets/javascripts/Components/Preferences/PreferencesComponents/PreferencesGroup.tsx
@@ -1,18 +1,14 @@
-import { FunctionComponent } from 'preact';
-import { HorizontalSeparator } from '@/components/Shared/HorizontalSeparator';
+import { FunctionComponent } from 'preact'
+import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
 
-const HorizontalLine: FunctionComponent<{ index: number; length: number }> = ({
-  index,
-  length,
-}) => (index < length - 1 ? <HorizontalSeparator classes="my-4" /> : null);
+const HorizontalLine: FunctionComponent<{ index: number; length: number }> = ({ index, length }) =>
+  (index < length - 1 ? <HorizontalSeparator classes="my-4" /> : null)
 
 export const PreferencesGroup: FunctionComponent = ({ children }) => (
   <div className="bg-default border-1 border-solid rounded border-main px-6 py-6 flex flex-col mb-3">
     {Array.isArray(children)
       ? children
-          .filter(
-            (child) => child != undefined && child !== '' && child !== false
-          )
+          .filter((child) => child != undefined && child !== '' && child !== false)
           .map((child, i, arr) => (
             <>
               {child}
@@ -21,4 +17,4 @@ export const PreferencesGroup: FunctionComponent = ({ children }) => (
           ))
       : children}
   </div>
-);
+)
diff --git a/app/assets/javascripts/components/Preferences/components/PreferencesPane.tsx b/app/assets/javascripts/Components/Preferences/PreferencesComponents/PreferencesPane.tsx
similarity index 91%
rename from app/assets/javascripts/components/Preferences/components/PreferencesPane.tsx
rename to app/assets/javascripts/Components/Preferences/PreferencesComponents/PreferencesPane.tsx
index ad2b898c4..3b276179a 100644
--- a/app/assets/javascripts/components/Preferences/components/PreferencesPane.tsx
+++ b/app/assets/javascripts/Components/Preferences/PreferencesComponents/PreferencesPane.tsx
@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'preact';
+import { FunctionComponent } from 'preact'
 
 export const PreferencesPane: FunctionComponent = ({ children }) => (
   <div className="color-foreground flex-grow flex flex-row overflow-y-auto min-h-0">
@@ -11,4 +11,4 @@ export const PreferencesPane: FunctionComponent = ({ children }) => (
     </div>
     <div className="flex-basis-55 flex-shrink" />
   </div>
-);
+)
diff --git a/app/assets/javascripts/Components/Preferences/PreferencesComponents/PreferencesSegment.tsx b/app/assets/javascripts/Components/Preferences/PreferencesComponents/PreferencesSegment.tsx
new file mode 100644
index 000000000..8fa1e4ffd
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/PreferencesComponents/PreferencesSegment.tsx
@@ -0,0 +1,8 @@
+import { FunctionComponent } from 'preact'
+
+type Props = {
+  classes?: string
+}
+export const PreferencesSegment: FunctionComponent<Props> = ({ children, classes = '' }) => (
+  <div className={`flex flex-col ${classes}`}>{children}</div>
+)
diff --git a/app/assets/javascripts/Components/Preferences/PreferencesComponents/index.ts b/app/assets/javascripts/Components/Preferences/PreferencesComponents/index.ts
new file mode 100644
index 000000000..c41ad54ae
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/PreferencesComponents/index.ts
@@ -0,0 +1,5 @@
+export * from './Content'
+export * from './MenuItem'
+export * from './PreferencesPane'
+export * from './PreferencesGroup'
+export * from './PreferencesSegment'
diff --git a/app/assets/javascripts/components/Preferences/PreferencesMenu.ts b/app/assets/javascripts/Components/Preferences/PreferencesMenu.ts
similarity index 72%
rename from app/assets/javascripts/components/Preferences/PreferencesMenu.ts
rename to app/assets/javascripts/Components/Preferences/PreferencesMenu.ts
index f2a2843fb..0751b0ec1 100644
--- a/app/assets/javascripts/components/Preferences/PreferencesMenu.ts
+++ b/app/assets/javascripts/Components/Preferences/PreferencesMenu.ts
@@ -1,7 +1,7 @@
-import { action, makeAutoObservable, observable } from 'mobx';
-import { ExtensionsLatestVersions } from '@/components/Preferences/panes/extensions-segments';
-import { FeatureIdentifier, IconType } from '@standardnotes/snjs';
-import { WebApplication } from '@/ui_models/application';
+import { action, makeAutoObservable, observable } from 'mobx'
+import { FeatureIdentifier, IconType } from '@standardnotes/snjs'
+import { WebApplication } from '@/UIModels/Application'
+import { ExtensionsLatestVersions } from './Panes/Extensions/ExtensionsLatestVersions'
 
 const PREFERENCE_IDS = [
   'general',
@@ -14,17 +14,17 @@ const PREFERENCE_IDS = [
   'accessibility',
   'get-free-month',
   'help-feedback',
-] as const;
+] as const
 
-export type PreferenceId = typeof PREFERENCE_IDS[number];
+export type PreferenceId = typeof PREFERENCE_IDS[number]
 interface PreferencesMenuItem {
-  readonly id: PreferenceId | FeatureIdentifier;
-  readonly icon: IconType;
-  readonly label: string;
+  readonly id: PreferenceId | FeatureIdentifier
+  readonly icon: IconType
+  readonly label: string
 }
 
 interface SelectableMenuItem extends PreferencesMenuItem {
-  selected: boolean;
+  selected: boolean
 }
 
 /**
@@ -41,7 +41,7 @@ const PREFERENCES_MENU_ITEMS: PreferencesMenuItem[] = [
   { id: 'accessibility', label: 'Accessibility', icon: 'accessibility' },
   { id: 'get-free-month', label: 'Get a free month', icon: 'star' },
   { id: 'help-feedback', label: 'Help & feedback', icon: 'help' },
-];
+]
 
 const READY_PREFERENCES_MENU_ITEMS: PreferencesMenuItem[] = [
   { id: 'account', label: 'Account', icon: 'user' },
@@ -51,23 +51,24 @@ const READY_PREFERENCES_MENU_ITEMS: PreferencesMenuItem[] = [
   { id: 'backups', label: 'Backups', icon: 'restore' },
   { id: 'listed', label: 'Listed', icon: 'listed' },
   { id: 'help-feedback', label: 'Help & feedback', icon: 'help' },
-];
+]
 
 export class PreferencesMenu {
-  private _selectedPane: PreferenceId | FeatureIdentifier = 'account';
-  private _menu: PreferencesMenuItem[];
-  private _extensionLatestVersions: ExtensionsLatestVersions =
-    new ExtensionsLatestVersions(new Map());
+  private _selectedPane: PreferenceId | FeatureIdentifier = 'account'
+  private _menu: PreferencesMenuItem[]
+  private _extensionLatestVersions: ExtensionsLatestVersions = new ExtensionsLatestVersions(
+    new Map(),
+  )
 
   constructor(
     private application: WebApplication,
-    private readonly _enableUnfinishedFeatures: boolean
+    private readonly _enableUnfinishedFeatures: boolean,
   ) {
     this._menu = this._enableUnfinishedFeatures
       ? PREFERENCES_MENU_ITEMS
-      : READY_PREFERENCES_MENU_ITEMS;
+      : READY_PREFERENCES_MENU_ITEMS
 
-    this.loadLatestVersions();
+    this.loadLatestVersions()
 
     makeAutoObservable<
       PreferencesMenu,
@@ -82,43 +83,45 @@ export class PreferencesMenu {
       _extensionPanes: observable.ref,
       _extensionLatestVersions: observable.ref,
       loadLatestVersions: action,
-    });
+    })
   }
 
   private loadLatestVersions(): void {
-    ExtensionsLatestVersions.load(this.application).then((versions) => {
-      if (versions) {
-        this._extensionLatestVersions = versions;
-      }
-    });
+    ExtensionsLatestVersions.load(this.application)
+      .then((versions) => {
+        if (versions) {
+          this._extensionLatestVersions = versions
+        }
+      })
+      .catch(console.error)
   }
 
   get extensionsLatestVersions(): ExtensionsLatestVersions {
-    return this._extensionLatestVersions;
+    return this._extensionLatestVersions
   }
 
   get menuItems(): SelectableMenuItem[] {
     const menuItems = this._menu.map((preference) => ({
       ...preference,
       selected: preference.id === this._selectedPane,
-    }));
+    }))
 
-    return menuItems;
+    return menuItems
   }
 
   get selectedMenuItem(): PreferencesMenuItem | undefined {
-    return this._menu.find((item) => item.id === this._selectedPane);
+    return this._menu.find((item) => item.id === this._selectedPane)
   }
 
   get selectedPaneId(): PreferenceId | FeatureIdentifier {
     if (this.selectedMenuItem != undefined) {
-      return this.selectedMenuItem.id;
+      return this.selectedMenuItem.id
     }
 
-    return 'account';
+    return 'account'
   }
 
   selectPane(key: PreferenceId | FeatureIdentifier): void {
-    this._selectedPane = key;
+    this._selectedPane = key
   }
 }
diff --git a/app/assets/javascripts/components/Preferences/PreferencesMenuView.tsx b/app/assets/javascripts/Components/Preferences/PreferencesMenuView.tsx
similarity index 64%
rename from app/assets/javascripts/components/Preferences/PreferencesMenuView.tsx
rename to app/assets/javascripts/Components/Preferences/PreferencesMenuView.tsx
index 763227988..0fbff6205 100644
--- a/app/assets/javascripts/components/Preferences/PreferencesMenuView.tsx
+++ b/app/assets/javascripts/Components/Preferences/PreferencesMenuView.tsx
@@ -1,10 +1,10 @@
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { MenuItem } from './components';
-import { PreferencesMenu } from './PreferencesMenu';
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { MenuItem } from './PreferencesComponents'
+import { PreferencesMenu } from './PreferencesMenu'
 
 export const PreferencesMenuView: FunctionComponent<{
-  menu: PreferencesMenu;
+  menu: PreferencesMenu
 }> = observer(({ menu }) => (
   <div className="min-w-55 overflow-y-auto flex flex-col px-3 py-6">
     {menu.menuItems.map((pref) => (
@@ -17,4 +17,4 @@ export const PreferencesMenuView: FunctionComponent<{
       />
     ))}
   </div>
-));
+))
diff --git a/app/assets/javascripts/Components/Preferences/PreferencesView.tsx b/app/assets/javascripts/Components/Preferences/PreferencesView.tsx
new file mode 100644
index 000000000..794b93437
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/PreferencesView.tsx
@@ -0,0 +1,116 @@
+import { RoundIconButton } from '@/Components/Button/RoundIconButton'
+import { TitleBar } from '@/Components/TitleBar/TitleBar'
+import { Title } from '@/Components/TitleBar/Title'
+import { FunctionComponent } from 'preact'
+import { observer } from 'mobx-react-lite'
+import { AccountPreferences, HelpAndFeedback, Listed, General, Security } from './Panes'
+import { PreferencesMenu } from './PreferencesMenu'
+import { PreferencesMenuView } from './PreferencesMenuView'
+import { WebApplication } from '@/UIModels/Application'
+import { MfaProps } from './Panes/TwoFactorAuth/MfaProps'
+import { AppState } from '@/UIModels/AppState'
+import { useEffect, useMemo } from 'preact/hooks'
+import { Backups } from '@/Components/Preferences/Panes/Backups'
+import { Appearance } from './Panes/Appearance'
+
+interface PreferencesProps extends MfaProps {
+  application: WebApplication
+  appState: AppState
+  closePreferences: () => void
+}
+
+const PaneSelector: FunctionComponent<PreferencesProps & { menu: PreferencesMenu }> = observer(
+  ({ menu, appState, application, mfaProvider, userProvider }) => {
+    switch (menu.selectedPaneId) {
+      case 'general':
+        return (
+          <General
+            appState={appState}
+            application={application}
+            extensionsLatestVersions={menu.extensionsLatestVersions}
+          />
+        )
+      case 'account':
+        return <AccountPreferences application={application} appState={appState} />
+      case 'appearance':
+        return <Appearance application={application} />
+      case 'security':
+        return (
+          <Security
+            mfaProvider={mfaProvider}
+            userProvider={userProvider}
+            appState={appState}
+            application={application}
+          />
+        )
+      case 'backups':
+        return <Backups application={application} appState={appState} />
+      case 'listed':
+        return <Listed application={application} />
+      case 'shortcuts':
+        return null
+      case 'accessibility':
+        return null
+      case 'get-free-month':
+        return null
+      case 'help-feedback':
+        return <HelpAndFeedback />
+      default:
+        return (
+          <General
+            appState={appState}
+            application={application}
+            extensionsLatestVersions={menu.extensionsLatestVersions}
+          />
+        )
+    }
+  },
+)
+
+const PreferencesCanvas: FunctionComponent<PreferencesProps & { menu: PreferencesMenu }> = observer(
+  (props) => (
+    <div className="flex flex-row flex-grow min-h-0 justify-between">
+      <PreferencesMenuView menu={props.menu} />
+      <PaneSelector {...props} />
+    </div>
+  ),
+)
+
+export const PreferencesView: FunctionComponent<PreferencesProps> = observer((props) => {
+  const menu = useMemo(
+    () => new PreferencesMenu(props.application, props.appState.enableUnfinishedFeatures),
+    [props.appState.enableUnfinishedFeatures, props.application],
+  )
+
+  useEffect(() => {
+    menu.selectPane(props.appState.preferences.currentPane)
+    const removeEscKeyObserver = props.application.io.addKeyObserver({
+      key: 'Escape',
+      onKeyDown: (event) => {
+        event.preventDefault()
+        props.closePreferences()
+      },
+    })
+    return () => {
+      removeEscKeyObserver()
+    }
+  }, [props, menu])
+
+  return (
+    <div className="h-full w-full absolute top-left-0 flex flex-col bg-contrast z-index-preferences">
+      <TitleBar className="items-center justify-between">
+        {/* div is added so flex justify-between can center the title */}
+        <div className="h-8 w-8" />
+        <Title className="text-lg">Your preferences for Standard Notes</Title>
+        <RoundIconButton
+          onClick={() => {
+            props.closePreferences()
+          }}
+          type="normal"
+          icon="close"
+        />
+      </TitleBar>
+      <PreferencesCanvas {...props} menu={menu} />
+    </div>
+  )
+})
diff --git a/app/assets/javascripts/components/Preferences/PreferencesViewWrapper.tsx b/app/assets/javascripts/Components/Preferences/PreferencesViewWrapper.tsx
similarity index 50%
rename from app/assets/javascripts/components/Preferences/PreferencesViewWrapper.tsx
rename to app/assets/javascripts/Components/Preferences/PreferencesViewWrapper.tsx
index 03cc8623d..dd78f702e 100644
--- a/app/assets/javascripts/components/Preferences/PreferencesViewWrapper.tsx
+++ b/app/assets/javascripts/Components/Preferences/PreferencesViewWrapper.tsx
@@ -1,18 +1,18 @@
-import { FunctionComponent } from 'preact';
-import { observer } from 'mobx-react-lite';
-import { WebApplication } from '@/ui_models/application';
-import { PreferencesView } from './PreferencesView';
-import { AppState } from '@/ui_models/app_state';
+import { FunctionComponent } from 'preact'
+import { observer } from 'mobx-react-lite'
+import { WebApplication } from '@/UIModels/Application'
+import { PreferencesView } from './PreferencesView'
+import { AppState } from '@/UIModels/AppState'
 
 export interface PreferencesViewWrapperProps {
-  appState: AppState;
-  application: WebApplication;
+  appState: AppState
+  application: WebApplication
 }
 
-export const PreferencesViewWrapper: FunctionComponent<PreferencesViewWrapperProps> =
-  observer(({ appState, application }) => {
+export const PreferencesViewWrapper: FunctionComponent<PreferencesViewWrapperProps> = observer(
+  ({ appState, application }) => {
     if (!appState.preferences.isOpen) {
-      return null;
+      return null
     }
 
     return (
@@ -23,5 +23,6 @@ export const PreferencesViewWrapper: FunctionComponent<PreferencesViewWrapperPro
         mfaProvider={application}
         userProvider={application}
       />
-    );
-  });
+    )
+  },
+)
diff --git a/app/assets/javascripts/Components/Preferences/Providers/MfaProvider.ts b/app/assets/javascripts/Components/Preferences/Providers/MfaProvider.ts
new file mode 100644
index 000000000..1c71464ef
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Providers/MfaProvider.ts
@@ -0,0 +1,13 @@
+export interface MfaProvider {
+  isMfaActivated(): Promise<boolean>
+
+  generateMfaSecret(): Promise<string>
+
+  getOtpToken(secret: string): Promise<string>
+
+  enableMfa(secret: string, otpToken: string): Promise<void>
+
+  disableMfa(): Promise<void>
+
+  isMfaFeatureAvailable(): boolean
+}
diff --git a/app/assets/javascripts/Components/Preferences/Providers/UserProvider.ts b/app/assets/javascripts/Components/Preferences/Providers/UserProvider.ts
new file mode 100644
index 000000000..3f596b92d
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Providers/UserProvider.ts
@@ -0,0 +1,3 @@
+export interface UserProvider {
+  getUser(): { uuid: string; email: string } | undefined
+}
diff --git a/app/assets/javascripts/Components/Preferences/Providers/index.ts b/app/assets/javascripts/Components/Preferences/Providers/index.ts
new file mode 100644
index 000000000..12b055c13
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Providers/index.ts
@@ -0,0 +1,2 @@
+export * from './MfaProvider'
+export * from './UserProvider'
diff --git a/app/assets/javascripts/components/PremiumFeaturesModal.tsx b/app/assets/javascripts/Components/PremiumFeaturesModal/index.tsx
similarity index 57%
rename from app/assets/javascripts/components/PremiumFeaturesModal.tsx
rename to app/assets/javascripts/Components/PremiumFeaturesModal/index.tsx
index c261e8231..436311a41 100644
--- a/app/assets/javascripts/components/PremiumFeaturesModal.tsx
+++ b/app/assets/javascripts/Components/PremiumFeaturesModal/index.tsx
@@ -1,22 +1,18 @@
-import {
-  AlertDialog,
-  AlertDialogDescription,
-  AlertDialogLabel,
-} from '@reach/alert-dialog';
-import { FunctionalComponent } from 'preact';
-import { Icon } from './Icon';
-import { PremiumIllustration } from '@standardnotes/stylekit';
-import { useRef } from 'preact/hooks';
-import { WebApplication } from '@/ui_models/application';
-import { openSubscriptionDashboard } from '@/hooks/manageSubscription';
+import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
+import { FunctionalComponent } from 'preact'
+import { Icon } from '@/Components/Icon'
+import { PremiumIllustration } from '@standardnotes/stylekit'
+import { useRef } from 'preact/hooks'
+import { WebApplication } from '@/UIModels/Application'
+import { openSubscriptionDashboard } from '@/Utils/ManageSubscription'
 
 type Props = {
-  application: WebApplication;
-  featureName: string;
-  hasSubscription: boolean;
-  onClose: () => void;
-  showModal: boolean;
-};
+  application: WebApplication
+  featureName: string
+  hasSubscription: boolean
+  onClose: () => void
+  showModal: boolean
+}
 
 export const PremiumFeaturesModal: FunctionalComponent<Props> = ({
   application,
@@ -25,23 +21,20 @@ export const PremiumFeaturesModal: FunctionalComponent<Props> = ({
   onClose,
   showModal,
 }) => {
-  const plansButtonRef = useRef<HTMLButtonElement>(null);
+  const plansButtonRef = useRef<HTMLButtonElement>(null)
 
   const handleClick = () => {
     if (hasSubscription) {
-      openSubscriptionDashboard(application);
+      openSubscriptionDashboard(application)
     } else if (window.plansUrl) {
-      window.location.assign(window.plansUrl);
+      window.location.assign(window.plansUrl)
     }
-  };
+  }
 
   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"
-        >
+        <div tabIndex={0} className="max-w-89 bg-default rounded shadow-overlay p-4">
           <AlertDialogLabel>
             <div className="flex justify-end p-1">
               <button
@@ -52,20 +45,14 @@ export const PremiumFeaturesModal: FunctionalComponent<Props> = ({
                 <Icon className="color-neutral" type="close" />
               </button>
             </div>
-            <div
-              className="flex items-center justify-center p-1"
-              aria-hidden={true}
-            >
+            <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>
+            <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.
+            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
@@ -79,5 +66,5 @@ export const PremiumFeaturesModal: FunctionalComponent<Props> = ({
         </div>
       </div>
     </AlertDialog>
-  ) : null;
-};
+  ) : null
+}
diff --git a/app/assets/javascripts/components/ProtectedNoteOverlay.tsx b/app/assets/javascripts/Components/ProtectedNoteOverlay/index.tsx
similarity index 63%
rename from app/assets/javascripts/components/ProtectedNoteOverlay.tsx
rename to app/assets/javascripts/Components/ProtectedNoteOverlay/index.tsx
index 3897769b6..fbb0d56bc 100644
--- a/app/assets/javascripts/components/ProtectedNoteOverlay.tsx
+++ b/app/assets/javascripts/Components/ProtectedNoteOverlay/index.tsx
@@ -1,19 +1,15 @@
-import { AppState } from '@/ui_models/app_state';
+import { AppState } from '@/UIModels/AppState'
 
 type Props = {
-  appState: AppState;
-  onViewNote: () => void;
-  hasProtectionSources: boolean;
-};
+  appState: AppState
+  onViewNote: () => void
+  hasProtectionSources: boolean
+}
 
-export function ProtectedNoteOverlay({
-  appState,
-  onViewNote,
-  hasProtectionSources,
-}: Props) {
+export function ProtectedNoteOverlay({ appState, onViewNote, hasProtectionSources }: Props) {
   const instructionText = hasProtectionSources
     ? 'Authenticate to view this note.'
-    : 'Add a passcode or create an account to require authentication to view this note.';
+    : 'Add a passcode or create an account to require authentication to view this note.'
 
   return (
     <div className="flex flex-col items-center justify-center text-center max-w-md">
@@ -24,19 +20,16 @@ export function ProtectedNoteOverlay({
           <button
             className="sn-button small info"
             onClick={() => {
-              appState.accountMenu.setShow(true);
+              appState.accountMenu.setShow(true)
             }}
           >
             Open account menu
           </button>
         )}
-        <button
-          className="sn-button small outlined normal-focus-brightness"
-          onClick={onViewNote}
-        >
+        <button className="sn-button small outlined normal-focus-brightness" onClick={onViewNote}>
           {hasProtectionSources ? 'Authenticate' : 'View Note'}
         </button>
       </div>
     </div>
-  );
+  )
 }
diff --git a/app/assets/javascripts/Components/PurchaseFlow/Panes/CreateAccount.tsx b/app/assets/javascripts/Components/PurchaseFlow/Panes/CreateAccount.tsx
new file mode 100644
index 000000000..5f5196e6b
--- /dev/null
+++ b/app/assets/javascripts/Components/PurchaseFlow/Panes/CreateAccount.tsx
@@ -0,0 +1,206 @@
+import { Button } from '@/Components/Button/Button'
+import { WebApplication } from '@/UIModels/Application'
+import { AppState } from '@/UIModels/AppState'
+import { PurchaseFlowPane } from '@/UIModels/AppState/PurchaseFlowState'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { FloatingLabelInput } from '@/Components/Input/FloatingLabelInput'
+import { isEmailValid } from '@/Utils'
+import { loadPurchaseFlowUrl } from '@/Components/PurchaseFlow/PurchaseFlowWrapper'
+import {
+  BlueDotIcon,
+  CircleIcon,
+  DiamondIcon,
+  CreateAccountIllustration,
+} from '@standardnotes/stylekit'
+
+type Props = {
+  appState: AppState
+  application: WebApplication
+}
+
+export const CreateAccount: FunctionComponent<Props> = observer(({ appState, application }) => {
+  const { setCurrentPane } = appState.purchaseFlow
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [isCreatingAccount, setIsCreatingAccount] = useState(false)
+  const [isEmailInvalid, setIsEmailInvalid] = useState(false)
+  const [isPasswordNotMatching, setIsPasswordNotMatching] = useState(false)
+
+  const emailInputRef = useRef<HTMLInputElement>(null)
+  const passwordInputRef = useRef<HTMLInputElement>(null)
+  const confirmPasswordInputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (emailInputRef.current) {
+      emailInputRef.current?.focus()
+    }
+  }, [])
+
+  const handleEmailChange = (e: Event) => {
+    if (e.target instanceof HTMLInputElement) {
+      setEmail(e.target.value)
+      setIsEmailInvalid(false)
+    }
+  }
+
+  const handlePasswordChange = (e: Event) => {
+    if (e.target instanceof HTMLInputElement) {
+      setPassword(e.target.value)
+    }
+  }
+
+  const handleConfirmPasswordChange = (e: Event) => {
+    if (e.target instanceof HTMLInputElement) {
+      setConfirmPassword(e.target.value)
+      setIsPasswordNotMatching(false)
+    }
+  }
+
+  const handleSignInInstead = () => {
+    setCurrentPane(PurchaseFlowPane.SignIn)
+  }
+
+  const subscribeWithoutAccount = () => {
+    loadPurchaseFlowUrl(application).catch((err) => {
+      console.error(err)
+      application.alertService.alert(err).catch(console.error)
+    })
+  }
+
+  const handleCreateAccount = async () => {
+    if (!email) {
+      emailInputRef?.current?.focus()
+      return
+    }
+
+    if (!isEmailValid(email)) {
+      setIsEmailInvalid(true)
+      emailInputRef?.current?.focus()
+      return
+    }
+
+    if (!password) {
+      passwordInputRef?.current?.focus()
+      return
+    }
+
+    if (!confirmPassword) {
+      confirmPasswordInputRef?.current?.focus()
+      return
+    }
+
+    if (password !== confirmPassword) {
+      setConfirmPassword('')
+      setIsPasswordNotMatching(true)
+      confirmPasswordInputRef?.current?.focus()
+      return
+    }
+
+    setIsCreatingAccount(true)
+
+    try {
+      const response = await application.register(email, password)
+      if (response.error || response.data?.error) {
+        throw new Error(response.error?.message || response.data?.error?.message)
+      } else {
+        loadPurchaseFlowUrl(application).catch((err) => {
+          console.error(err)
+          application.alertService.alert(err).catch(console.error)
+        })
+      }
+    } catch (err) {
+      console.error(err)
+      application.alertService.alert(err as string).catch(console.error)
+    } finally {
+      setIsCreatingAccount(false)
+    }
+  }
+
+  return (
+    <div className="flex items-center">
+      <CircleIcon className="absolute w-8 h-8 top-40% -left-28" />
+      <BlueDotIcon className="absolute w-4 h-4 top-35% -left-10" />
+      <DiamondIcon className="absolute w-26 h-26 -bottom-5 left-0 -translate-x-1/2 -z-index-1" />
+
+      <CircleIcon className="absolute w-8 h-8 bottom-35% -right-20" />
+      <BlueDotIcon className="absolute w-4 h-4 bottom-25% -right-10" />
+      <DiamondIcon className="absolute w-18 h-18 top-0 -right-2 translate-x-1/2 -z-index-1" />
+
+      <div className="mr-12 md:mr-0">
+        <h1 className="mt-0 mb-2 text-2xl">Create your free account</h1>
+        <div className="mb-4 font-medium text-sm">to continue to Standard Notes.</div>
+        <form onSubmit={handleCreateAccount}>
+          <div className="flex flex-col">
+            <FloatingLabelInput
+              className={`min-w-90 xs:min-w-auto ${isEmailInvalid ? 'mb-2' : 'mb-4'}`}
+              id="purchase-sign-in-email"
+              type="email"
+              label="Email"
+              value={email}
+              onChange={handleEmailChange}
+              ref={emailInputRef}
+              disabled={isCreatingAccount}
+              isInvalid={isEmailInvalid}
+            />
+            {isEmailInvalid ? (
+              <div className="color-dark-red mb-4">Please provide a valid email.</div>
+            ) : null}
+            <FloatingLabelInput
+              className="min-w-90 xs:min-w-auto mb-4"
+              id="purchase-create-account-password"
+              type="password"
+              label="Password"
+              value={password}
+              onChange={handlePasswordChange}
+              ref={passwordInputRef}
+              disabled={isCreatingAccount}
+            />
+            <FloatingLabelInput
+              className={`min-w-90 xs:min-w-auto ${isPasswordNotMatching ? 'mb-2' : 'mb-4'}`}
+              id="create-account-confirm"
+              type="password"
+              label="Repeat password"
+              value={confirmPassword}
+              onChange={handleConfirmPasswordChange}
+              ref={confirmPasswordInputRef}
+              disabled={isCreatingAccount}
+              isInvalid={isPasswordNotMatching}
+            />
+            {isPasswordNotMatching ? (
+              <div className="color-dark-red mb-4">Passwords don't match. Please try again.</div>
+            ) : null}
+          </div>
+        </form>
+        <div className="flex xs:flex-col-reverse xs:items-start items-center justify-between">
+          <div className="flex flex-col">
+            <button
+              onClick={handleSignInInstead}
+              disabled={isCreatingAccount}
+              className="flex items-start p-0 mb-2 bg-default border-0 font-medium color-info cursor-pointer hover:underline"
+            >
+              Sign in instead
+            </button>
+            <button
+              onClick={subscribeWithoutAccount}
+              disabled={isCreatingAccount}
+              className="flex items-start p-0 bg-default border-0 font-medium color-info cursor-pointer hover:underline"
+            >
+              Subscribe without account
+            </button>
+          </div>
+          <Button
+            className="py-2.5 xs:mb-4"
+            variant="primary"
+            label={isCreatingAccount ? 'Creating account...' : 'Create account'}
+            onClick={handleCreateAccount}
+            disabled={isCreatingAccount}
+          />
+        </div>
+      </div>
+      <CreateAccountIllustration className="md:hidden" />
+    </div>
+  )
+})
diff --git a/app/assets/javascripts/Components/PurchaseFlow/Panes/SignIn.tsx b/app/assets/javascripts/Components/PurchaseFlow/Panes/SignIn.tsx
new file mode 100644
index 000000000..530d86e85
--- /dev/null
+++ b/app/assets/javascripts/Components/PurchaseFlow/Panes/SignIn.tsx
@@ -0,0 +1,167 @@
+import { Button } from '@/Components/Button/Button'
+import { WebApplication } from '@/UIModels/Application'
+import { AppState } from '@/UIModels/AppState'
+import { PurchaseFlowPane } from '@/UIModels/AppState/PurchaseFlowState'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { FloatingLabelInput } from '@/Components/Input/FloatingLabelInput'
+import { isEmailValid } from '@/Utils'
+import { loadPurchaseFlowUrl } from '@/Components/PurchaseFlow/PurchaseFlowWrapper'
+import { BlueDotIcon, CircleIcon, DiamondIcon } from '@standardnotes/stylekit'
+
+type Props = {
+  appState: AppState
+  application: WebApplication
+}
+
+export const SignIn: FunctionComponent<Props> = observer(({ appState, application }) => {
+  const { setCurrentPane } = appState.purchaseFlow
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [isSigningIn, setIsSigningIn] = useState(false)
+  const [isEmailInvalid, setIsEmailInvalid] = useState(false)
+  const [isPasswordInvalid, setIsPasswordInvalid] = useState(false)
+  const [otherErrorMessage, setOtherErrorMessage] = useState('')
+
+  const emailInputRef = useRef<HTMLInputElement>(null)
+  const passwordInputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (emailInputRef.current) {
+      emailInputRef.current?.focus()
+    }
+  }, [])
+
+  const handleEmailChange = (e: Event) => {
+    if (e.target instanceof HTMLInputElement) {
+      setEmail(e.target.value)
+      setIsEmailInvalid(false)
+    }
+  }
+
+  const handlePasswordChange = (e: Event) => {
+    if (e.target instanceof HTMLInputElement) {
+      setPassword(e.target.value)
+      setIsPasswordInvalid(false)
+      setOtherErrorMessage('')
+    }
+  }
+
+  const handleCreateAccountInstead = () => {
+    if (isSigningIn) {
+      return
+    }
+    setCurrentPane(PurchaseFlowPane.CreateAccount)
+  }
+
+  const handleSignIn = async () => {
+    if (!email) {
+      emailInputRef?.current?.focus()
+      return
+    }
+
+    if (!isEmailValid(email)) {
+      setIsEmailInvalid(true)
+      emailInputRef?.current?.focus()
+      return
+    }
+
+    if (!password) {
+      passwordInputRef?.current?.focus()
+      return
+    }
+
+    setIsSigningIn(true)
+
+    try {
+      const response = await application.signIn(email, password)
+      if (response.error || response.data?.error) {
+        throw new Error(response.error?.message || response.data?.error?.message)
+      } else {
+        loadPurchaseFlowUrl(application).catch((err) => {
+          console.error(err)
+          application.alertService.alert(err).catch(console.error)
+        })
+      }
+    } catch (err) {
+      console.error(err)
+      if ((err as Error).toString().includes('Invalid email or password')) {
+        setIsSigningIn(false)
+        setIsEmailInvalid(true)
+        setIsPasswordInvalid(true)
+        setOtherErrorMessage('Invalid email or password.')
+        setPassword('')
+      } else {
+        application.alertService.alert(err as string).catch(console.error)
+      }
+    }
+  }
+
+  return (
+    <div className="flex items-center">
+      <CircleIcon className="absolute w-8 h-8 top-35% -left-56" />
+      <BlueDotIcon className="absolute w-4 h-4 top-30% -left-40" />
+      <DiamondIcon className="absolute w-26 h-26 -bottom-5 left-0 -translate-x-1/2 -z-index-1" />
+
+      <CircleIcon className="absolute w-8 h-8 bottom-30% -right-56" />
+      <BlueDotIcon className="absolute w-4 h-4 bottom-20% -right-44" />
+      <DiamondIcon className="absolute w-18 h-18 top-0 -right-2 translate-x-1/2 -z-index-1" />
+
+      <div>
+        <h1 className="mt-0 mb-2 text-2xl">Sign in</h1>
+        <div className="mb-4 font-medium text-sm">to continue to Standard Notes.</div>
+        <form onSubmit={handleSignIn}>
+          <div className="flex flex-col">
+            <FloatingLabelInput
+              className={`min-w-90 xs:min-w-auto ${
+                isEmailInvalid && !otherErrorMessage ? 'mb-2' : 'mb-4'
+              }`}
+              id="purchase-sign-in-email"
+              type="email"
+              label="Email"
+              value={email}
+              onChange={handleEmailChange}
+              ref={emailInputRef}
+              disabled={isSigningIn}
+              isInvalid={isEmailInvalid}
+            />
+            {isEmailInvalid && !otherErrorMessage ? (
+              <div className="color-dark-red mb-4">Please provide a valid email.</div>
+            ) : null}
+            <FloatingLabelInput
+              className={`min-w-90 xs:min-w-auto ${otherErrorMessage ? 'mb-2' : 'mb-4'}`}
+              id="purchase-sign-in-password"
+              type="password"
+              label="Password"
+              value={password}
+              onChange={handlePasswordChange}
+              ref={passwordInputRef}
+              disabled={isSigningIn}
+              isInvalid={isPasswordInvalid}
+            />
+            {otherErrorMessage ? (
+              <div className="color-dark-red mb-4">{otherErrorMessage}</div>
+            ) : null}
+          </div>
+          <Button
+            className={`${isSigningIn ? 'min-w-30' : 'min-w-24'} py-2.5 mb-5`}
+            variant="primary"
+            label={isSigningIn ? 'Signing in...' : 'Sign in'}
+            onClick={handleSignIn}
+            disabled={isSigningIn}
+          />
+        </form>
+        <div className="text-sm font-medium color-grey-1">
+          Don’t have an account yet?{' '}
+          <a
+            className={`color-info ${isSigningIn ? 'cursor-not-allowed' : 'cursor-pointer '}`}
+            onClick={handleCreateAccountInstead}
+          >
+            Create account
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+})
diff --git a/app/assets/javascripts/components/PurchaseFlow/PurchaseFlowView.tsx b/app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowView.tsx
similarity index 70%
rename from app/assets/javascripts/components/PurchaseFlow/PurchaseFlowView.tsx
rename to app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowView.tsx
index 1de12fd0f..0697d08e7 100644
--- a/app/assets/javascripts/components/PurchaseFlow/PurchaseFlowView.tsx
+++ b/app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowView.tsx
@@ -1,20 +1,20 @@
-import { WebApplication } from '@/ui_models/application';
-import { AppState } from '@/ui_models/app_state';
-import { PurchaseFlowPane } from '@/ui_models/app_state/purchase_flow_state';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { CreateAccount } from './panes/CreateAccount';
-import { SignIn } from './panes/SignIn';
-import { SNLogoFull } from '@standardnotes/stylekit';
+import { WebApplication } from '@/UIModels/Application'
+import { AppState } from '@/UIModels/AppState'
+import { PurchaseFlowPane } from '@/UIModels/AppState/PurchaseFlowState'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { CreateAccount } from './Panes/CreateAccount'
+import { SignIn } from './Panes/SignIn'
+import { SNLogoFull } from '@standardnotes/stylekit'
 
 type PaneSelectorProps = {
-  currentPane: PurchaseFlowPane;
-} & PurchaseFlowViewProps;
+  currentPane: PurchaseFlowPane
+} & PurchaseFlowViewProps
 
 type PurchaseFlowViewProps = {
-  appState: AppState;
-  application: WebApplication;
-};
+  appState: AppState
+  application: WebApplication
+}
 
 const PurchaseFlowPaneSelector: FunctionComponent<PaneSelectorProps> = ({
   currentPane,
@@ -23,15 +23,15 @@ const PurchaseFlowPaneSelector: FunctionComponent<PaneSelectorProps> = ({
 }) => {
   switch (currentPane) {
     case PurchaseFlowPane.CreateAccount:
-      return <CreateAccount appState={appState} application={application} />;
+      return <CreateAccount appState={appState} application={application} />
     case PurchaseFlowPane.SignIn:
-      return <SignIn appState={appState} application={application} />;
+      return <SignIn appState={appState} application={application} />
   }
-};
+}
 
-export const PurchaseFlowView: FunctionComponent<PurchaseFlowViewProps> =
-  observer(({ appState, application }) => {
-    const { currentPane } = appState.purchaseFlow;
+export const PurchaseFlowView: FunctionComponent<PurchaseFlowViewProps> = observer(
+  ({ appState, application }) => {
+    const { currentPane } = appState.purchaseFlow
 
     return (
       <div className="flex items-center justify-center overflow-hidden h-full w-full absolute top-left-0 z-index-purchase-flow bg-grey-super-light">
@@ -64,5 +64,6 @@ export const PurchaseFlowView: FunctionComponent<PurchaseFlowViewProps> =
           </div>
         </div>
       </div>
-    );
-  });
+    )
+  },
+)
diff --git a/app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowWrapper.tsx b/app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowWrapper.tsx
new file mode 100644
index 000000000..3e22f8904
--- /dev/null
+++ b/app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowWrapper.tsx
@@ -0,0 +1,48 @@
+import { WebApplication } from '@/UIModels/Application'
+import { AppState } from '@/UIModels/AppState'
+import { getWindowUrlParams, isDesktopApplication } from '@/Utils'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { PurchaseFlowView } from './PurchaseFlowView'
+
+export type PurchaseFlowWrapperProps = {
+  appState: AppState
+  application: WebApplication
+}
+
+export const getPurchaseFlowUrl = async (
+  application: WebApplication,
+): Promise<string | undefined> => {
+  const currentUrl = window.location.origin
+  const successUrl = isDesktopApplication() ? 'standardnotes://' : currentUrl
+  if (application.noAccount()) {
+    return `${window.purchaseUrl}/offline?&success_url=${successUrl}`
+  }
+  const token = await application.getNewSubscriptionToken()
+  if (token) {
+    return `${window.purchaseUrl}?subscription_token=${token}&success_url=${successUrl}`
+  }
+  return undefined
+}
+
+export const loadPurchaseFlowUrl = async (application: WebApplication): Promise<boolean> => {
+  const url = await getPurchaseFlowUrl(application)
+  const params = getWindowUrlParams()
+  const period = params.get('period') ? `&period=${params.get('period')}` : ''
+  const plan = params.get('plan') ? `&plan=${params.get('plan')}` : ''
+  if (url) {
+    window.location.assign(`${url}${period}${plan}`)
+    return true
+  }
+  return false
+}
+
+export const PurchaseFlowWrapper: FunctionComponent<PurchaseFlowWrapperProps> = observer(
+  ({ appState, application }) => {
+    if (!appState.purchaseFlow.isOpen) {
+      return null
+    }
+
+    return <PurchaseFlowView appState={appState} application={application} />
+  },
+)
diff --git a/app/assets/javascripts/components/QuickSettingsMenu/eventHandlers.ts b/app/assets/javascripts/Components/QuickSettingsMenu/EventHandlers.ts
similarity index 56%
rename from app/assets/javascripts/components/QuickSettingsMenu/eventHandlers.ts
rename to app/assets/javascripts/Components/QuickSettingsMenu/EventHandlers.ts
index 33c985210..195f43301 100644
--- a/app/assets/javascripts/components/QuickSettingsMenu/eventHandlers.ts
+++ b/app/assets/javascripts/Components/QuickSettingsMenu/EventHandlers.ts
@@ -1,77 +1,75 @@
-import { RefObject } from 'preact';
-import { StateUpdater } from 'preact/hooks';
-import { JSXInternal } from 'preact/src/jsx';
+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
+  themesMenuOpen: boolean,
 ) => {
   if (quickSettingsMenuRef?.current) {
     const items: NodeListOf<HTMLButtonElement> =
-      quickSettingsMenuRef.current.querySelectorAll(':scope > button');
-    const currentFocusedIndex = Array.from(items).findIndex(
-      (btn) => btn === document.activeElement
-    );
+      quickSettingsMenuRef.current.querySelectorAll(':scope > button')
+    const currentFocusedIndex = Array.from(items).findIndex((btn) => btn === document.activeElement)
 
     if (!themesMenuOpen) {
       switch (event.key) {
         case 'Escape':
-          closeQuickSettingsMenu();
-          break;
+          closeQuickSettingsMenu()
+          break
         case 'ArrowDown':
           if (items[currentFocusedIndex + 1]) {
-            items[currentFocusedIndex + 1].focus();
+            items[currentFocusedIndex + 1].focus()
           } else {
-            items[0].focus();
+            items[0].focus()
           }
-          break;
+          break
         case 'ArrowUp':
           if (items[currentFocusedIndex - 1]) {
-            items[currentFocusedIndex - 1].focus();
+            items[currentFocusedIndex - 1].focus()
           } else {
-            items[items.length - 1].focus();
+            items[items.length - 1].focus()
           }
-          break;
+          break
       }
     }
   }
-};
+}
 
 export const themesMenuKeyDownHandler = (
   event: React.KeyboardEvent<HTMLDivElement>,
   themesMenuRef: RefObject<HTMLDivElement>,
   setThemesMenuOpen: StateUpdater<boolean>,
-  themesButtonRef: RefObject<HTMLButtonElement>
+  themesButtonRef: RefObject<HTMLButtonElement>,
 ) => {
   if (themesMenuRef?.current) {
-    const themes = themesMenuRef.current.querySelectorAll('button');
+    const themes = themesMenuRef.current.querySelectorAll('button')
     const currentFocusedIndex = Array.from(themes).findIndex(
-      (themeBtn) => themeBtn === document.activeElement
-    );
+      (themeBtn) => themeBtn === document.activeElement,
+    )
 
     switch (event.key) {
       case 'Escape':
       case 'ArrowLeft':
-        event.stopPropagation();
-        setThemesMenuOpen(false);
-        themesButtonRef.current?.focus();
-        break;
+        event.stopPropagation()
+        setThemesMenuOpen(false)
+        themesButtonRef.current?.focus()
+        break
       case 'ArrowDown':
         if (themes[currentFocusedIndex + 1]) {
-          themes[currentFocusedIndex + 1].focus();
+          themes[currentFocusedIndex + 1].focus()
         } else {
-          themes[0].focus();
+          themes[0].focus()
         }
-        break;
+        break
       case 'ArrowUp':
         if (themes[currentFocusedIndex - 1]) {
-          themes[currentFocusedIndex - 1].focus();
+          themes[currentFocusedIndex - 1].focus()
         } else {
-          themes[themes.length - 1].focus();
+          themes[themes.length - 1].focus()
         }
-        break;
+        break
     }
   }
-};
+}
diff --git a/app/assets/javascripts/components/QuickSettingsMenu/FocusModeSwitch.tsx b/app/assets/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx
similarity index 57%
rename from app/assets/javascripts/components/QuickSettingsMenu/FocusModeSwitch.tsx
rename to app/assets/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx
index 7d38f1c16..e70440c55 100644
--- a/app/assets/javascripts/components/QuickSettingsMenu/FocusModeSwitch.tsx
+++ b/app/assets/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx
@@ -1,18 +1,18 @@
-import { WebApplication } from '@/ui_models/application';
-import { FeatureStatus, FeatureIdentifier } from '@standardnotes/snjs';
-import { FunctionComponent } from 'preact';
-import { useCallback } from 'preact/hooks';
-import { JSXInternal } from 'preact/src/jsx';
-import { Icon } from '../Icon';
-import { usePremiumModal } from '../Premium';
-import { Switch } from '../Switch';
+import { WebApplication } from '@/UIModels/Application'
+import { FeatureStatus, FeatureIdentifier } from '@standardnotes/snjs'
+import { FunctionComponent } from 'preact'
+import { useCallback } from 'preact/hooks'
+import { JSXInternal } from 'preact/src/jsx'
+import { Icon } from '@/Components/Icon'
+import { usePremiumModal } from '@/Hooks/usePremiumModal'
+import { Switch } from '@/Components/Switch'
 
 type Props = {
-  application: WebApplication;
-  onToggle: (value: boolean) => void;
-  onClose: () => void;
-  isEnabled: boolean;
-};
+  application: WebApplication
+  onToggle: (value: boolean) => void
+  onClose: () => void
+  isEnabled: boolean
+}
 
 export const FocusModeSwitch: FunctionComponent<Props> = ({
   application,
@@ -20,24 +20,23 @@ export const FocusModeSwitch: FunctionComponent<Props> = ({
   onClose,
   isEnabled,
 }) => {
-  const premiumModal = usePremiumModal();
+  const premiumModal = usePremiumModal()
   const isEntitled =
-    application.features.getFeatureStatus(FeatureIdentifier.FocusMode) ===
-    FeatureStatus.Entitled;
+    application.features.getFeatureStatus(FeatureIdentifier.FocusMode) === FeatureStatus.Entitled
 
   const toggle = useCallback(
     (e: JSXInternal.TargetedMouseEvent<HTMLButtonElement>) => {
-      e.preventDefault();
+      e.preventDefault()
 
       if (isEntitled) {
-        onToggle(!isEnabled);
-        onClose();
+        onToggle(!isEnabled)
+        onClose()
       } else {
-        premiumModal.activate('Focused Writing');
+        premiumModal.activate('Focused Writing')
       }
     },
-    [isEntitled, onToggle, isEnabled, onClose, premiumModal]
-  );
+    [isEntitled, onToggle, isEnabled, onClose, premiumModal],
+  )
 
   return (
     <>
@@ -58,5 +57,5 @@ export const FocusModeSwitch: FunctionComponent<Props> = ({
         )}
       </button>
     </>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/Components/QuickSettingsMenu/ThemeItem.ts b/app/assets/javascripts/Components/QuickSettingsMenu/ThemeItem.ts
new file mode 100644
index 000000000..c45006a36
--- /dev/null
+++ b/app/assets/javascripts/Components/QuickSettingsMenu/ThemeItem.ts
@@ -0,0 +1,7 @@
+import { FeatureIdentifier, SNTheme } from '@standardnotes/snjs'
+
+export type ThemeItem = {
+  name: string
+  identifier: FeatureIdentifier
+  component?: SNTheme
+}
diff --git a/app/assets/javascripts/components/QuickSettingsMenu/ThemesMenuButton.tsx b/app/assets/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
similarity index 51%
rename from app/assets/javascripts/components/QuickSettingsMenu/ThemesMenuButton.tsx
rename to app/assets/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
index 569f41764..42cc3112a 100644
--- a/app/assets/javascripts/components/QuickSettingsMenu/ThemesMenuButton.tsx
+++ b/app/assets/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
@@ -1,59 +1,52 @@
-import { WebApplication } from '@/ui_models/application';
-import { FeatureStatus } from '@standardnotes/snjs';
-import { FunctionComponent } from 'preact';
-import { useMemo } from 'preact/hooks';
-import { JSXInternal } from 'preact/src/jsx';
-import { Icon } from '../Icon';
-import { usePremiumModal } from '../Premium';
-import { Switch } from '../Switch';
-import { ThemeItem } from './QuickSettingsMenu';
+import { WebApplication } from '@/UIModels/Application'
+import { FeatureStatus } from '@standardnotes/snjs'
+import { FunctionComponent } from 'preact'
+import { useMemo } from 'preact/hooks'
+import { JSXInternal } from 'preact/src/jsx'
+import { Icon } from '@/Components/Icon'
+import { usePremiumModal } from '@/Hooks/usePremiumModal'
+import { Switch } from '@/Components/Switch'
+import { ThemeItem } from './ThemeItem'
 
 type Props = {
-  item: ThemeItem;
-  application: WebApplication;
-  onBlur: (event: { relatedTarget: EventTarget | null }) => void;
-};
+  item: ThemeItem
+  application: WebApplication
+  onBlur: (event: { relatedTarget: EventTarget | null }) => void
+}
 
-export const ThemesMenuButton: FunctionComponent<Props> = ({
-  application,
-  item,
-  onBlur,
-}) => {
-  const premiumModal = usePremiumModal();
+export const ThemesMenuButton: FunctionComponent<Props> = ({ application, item, onBlur }) => {
+  const premiumModal = usePremiumModal()
 
   const isThirdPartyTheme = useMemo(
     () => application.features.isThirdPartyFeature(item.identifier),
-    [application, item.identifier]
-  );
+    [application, item.identifier],
+  )
   const isEntitledToTheme = useMemo(
-    () =>
-      application.features.getFeatureStatus(item.identifier) ===
-      FeatureStatus.Entitled,
-    [application, item.identifier]
-  );
+    () => application.features.getFeatureStatus(item.identifier) === FeatureStatus.Entitled,
+    [application, item.identifier],
+  )
   const canActivateTheme = useMemo(
     () => isEntitledToTheme || isThirdPartyTheme,
-    [isEntitledToTheme, isThirdPartyTheme]
-  );
+    [isEntitledToTheme, isThirdPartyTheme],
+  )
 
   const toggleTheme: JSXInternal.MouseEventHandler<HTMLButtonElement> = (e) => {
-    e.preventDefault();
+    e.preventDefault()
 
     if (item.component && canActivateTheme) {
-      const themeIsLayerableOrNotActive =
-        item.component.isLayerable() || !item.component.active;
+      const themeIsLayerableOrNotActive = item.component.isLayerable() || !item.component.active
 
       if (themeIsLayerableOrNotActive) {
-        application.mutator.toggleTheme(item.component);
+        application.mutator.toggleTheme(item.component).catch(console.error)
       }
     } else {
-      premiumModal.activate(`${item.name} theme`);
+      premiumModal.activate(`${item.name} theme`)
     }
-  };
+  }
 
   return (
     <button
-      className={`sn-dropdown-item focus:bg-info-backdrop focus:shadow-none justify-between`}
+      className={'sn-dropdown-item focus:bg-info-backdrop focus:shadow-none justify-between'}
       onClick={toggleTheme}
       onBlur={onBlur}
     >
@@ -73,9 +66,7 @@ export const ThemesMenuButton: FunctionComponent<Props> = ({
                 item.component?.active ? 'pseudo-radio-btn--checked' : ''
               } mr-2`}
             ></div>
-            <span
-              className={item.component?.active ? 'font-semibold' : undefined}
-            >
+            <span className={item.component?.active ? 'font-semibold' : undefined}>
               {item.name}
             </span>
           </div>
@@ -83,8 +74,7 @@ export const ThemesMenuButton: FunctionComponent<Props> = ({
             <div
               className="w-5 h-5 rounded-full"
               style={{
-                backgroundColor:
-                  item.component.package_info?.dock_icon?.background_color,
+                backgroundColor: item.component.package_info?.dock_icon?.background_color,
               }}
             ></div>
           ) : (
@@ -93,5 +83,5 @@ export const ThemesMenuButton: FunctionComponent<Props> = ({
         </>
       )}
     </button>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/components/QuickSettingsMenu/QuickSettingsMenu.tsx b/app/assets/javascripts/Components/QuickSettingsMenu/index.tsx
similarity index 57%
rename from app/assets/javascripts/components/QuickSettingsMenu/QuickSettingsMenu.tsx
rename to app/assets/javascripts/Components/QuickSettingsMenu/index.tsx
index daf69a3b2..96e7b56ca 100644
--- a/app/assets/javascripts/components/QuickSettingsMenu/QuickSettingsMenu.tsx
+++ b/app/assets/javascripts/Components/QuickSettingsMenu/index.tsx
@@ -1,10 +1,6 @@
-import { WebApplication } from '@/ui_models/application';
-import { AppState } from '@/ui_models/app_state';
-import {
-  Disclosure,
-  DisclosureButton,
-  DisclosurePanel,
-} from '@reach/disclosure';
+import { WebApplication } from '@/UIModels/Application'
+import { AppState } from '@/UIModels/AppState'
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
 import {
   ComponentArea,
   ContentType,
@@ -12,64 +8,45 @@ import {
   GetFeatures,
   SNComponent,
   SNTheme,
-} from '@standardnotes/snjs';
-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 { useCloseOnBlur, useCloseOnClickOutside } from '../utils';
-import {
-  quickSettingsKeyDownHandler,
-  themesMenuKeyDownHandler,
-} from './eventHandlers';
-import { FocusModeSwitch } from './FocusModeSwitch';
-import { ThemesMenuButton } from './ThemesMenuButton';
+} from '@standardnotes/snjs'
+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 '@/Components/Icon'
+import { Switch } from '@/Components/Switch'
+import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
+import { quickSettingsKeyDownHandler, themesMenuKeyDownHandler } from './EventHandlers'
+import { FocusModeSwitch } from './FocusModeSwitch'
+import { ThemesMenuButton } from './ThemesMenuButton'
+import { useCloseOnClickOutside } from '@/Hooks/useCloseOnClickOutside'
+import { ThemeItem } from './ThemeItem'
+import { sortThemes } from '@/Utils/SortThemes'
 
-const focusModeAnimationDuration = 1255;
+const focusModeAnimationDuration = 1255
 
 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';
-
-export type ThemeItem = {
-  name: string;
-  identifier: FeatureIdentifier;
-  component?: SNTheme;
-};
+  'sn-menu-border sn-dropdown min-w-80 max-h-120 max-w-xs flex flex-col py-2 overflow-y-auto'
 
 type MenuProps = {
-  appState: AppState;
-  application: WebApplication;
-  onClickOutside: () => void;
-};
+  appState: AppState
+  application: WebApplication
+  onClickOutside: () => void
+}
 
 const toggleFocusMode = (enabled: boolean) => {
   if (enabled) {
-    document.body.classList.add('focus-mode');
+    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');
+      document.body.classList.add('disable-focus-mode')
+      document.body.classList.remove('focus-mode')
       setTimeout(() => {
-        document.body.classList.remove('disable-focus-mode');
-      }, focusModeAnimationDuration);
+        document.body.classList.remove('disable-focus-mode')
+      }, focusModeAnimationDuration)
     }
   }
-};
-
-export const sortThemes = (a: ThemeItem, b: ThemeItem) => {
-  const aIsLayerable = a.component?.isLayerable();
-  const bIsLayerable = b.component?.isLayerable();
-
-  if (aIsLayerable && !bIsLayerable) {
-    return 1;
-  } else if (!aIsLayerable && bIsLayerable) {
-    return -1;
-  } else {
-    return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
-  }
-};
+}
 
 export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
   ({ application, appState, onClickOutside }) => {
@@ -78,29 +55,27 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
       shouldAnimateCloseMenu,
       focusModeEnabled,
       setFocusModeEnabled,
-    } = appState.quickSettingsMenu;
-    const [themes, setThemes] = useState<ThemeItem[]>([]);
-    const [toggleableComponents, setToggleableComponents] = useState<
-      SNComponent[]
-    >([]);
-    const [themesMenuOpen, setThemesMenuOpen] = useState(false);
-    const [themesMenuPosition, setThemesMenuPosition] = useState({});
-    const [defaultThemeOn, setDefaultThemeOn] = useState(false);
+    } = appState.quickSettingsMenu
+    const [themes, setThemes] = useState<ThemeItem[]>([])
+    const [toggleableComponents, setToggleableComponents] = useState<SNComponent[]>([])
+    const [themesMenuOpen, setThemesMenuOpen] = useState(false)
+    const [themesMenuPosition, setThemesMenuPosition] = useState({})
+    const [defaultThemeOn, setDefaultThemeOn] = useState(false)
 
-    const themesMenuRef = useRef<HTMLDivElement>(null);
-    const themesButtonRef = useRef<HTMLButtonElement>(null);
-    const prefsButtonRef = useRef<HTMLButtonElement>(null);
-    const quickSettingsMenuRef = useRef<HTMLDivElement>(null);
-    const defaultThemeButtonRef = useRef<HTMLButtonElement>(null);
+    const themesMenuRef = useRef<HTMLDivElement>(null)
+    const themesButtonRef = useRef<HTMLButtonElement>(null)
+    const prefsButtonRef = useRef<HTMLButtonElement>(null)
+    const quickSettingsMenuRef = useRef<HTMLDivElement>(null)
+    const defaultThemeButtonRef = useRef<HTMLButtonElement>(null)
 
-    const mainRef = useRef<HTMLDivElement>(null);
+    const mainRef = useRef<HTMLDivElement>(null)
     useCloseOnClickOutside(mainRef, () => {
-      onClickOutside();
-    });
+      onClickOutside()
+    })
 
     useEffect(() => {
-      toggleFocusMode(focusModeEnabled);
-    }, [focusModeEnabled]);
+      toggleFocusMode(focusModeEnabled)
+    }, [focusModeEnabled])
 
     const reloadThemes = useCallback(() => {
       const themes = application.items
@@ -110,34 +85,28 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
             name: item.name,
             identifier: item.identifier,
             component: item,
-          };
-        }) as ThemeItem[];
+          }
+        }) as ThemeItem[]
 
       GetFeatures()
-        .filter(
-          (feature) =>
-            feature.content_type === ContentType.Theme && !feature.layerable
-        )
+        .filter((feature) => feature.content_type === ContentType.Theme && !feature.layerable)
         .forEach((theme) => {
-          if (
-            themes.findIndex((item) => item.identifier === theme.identifier) ===
-            -1
-          ) {
+          if (themes.findIndex((item) => item.identifier === theme.identifier) === -1) {
             themes.push({
               name: theme.name as string,
               identifier: theme.identifier,
-            });
+            })
           }
-        });
+        })
 
-      setThemes(themes.sort(sortThemes));
+      setThemes(themes.sort(sortThemes))
 
       setDefaultThemeOn(
         !themes
           .map((item) => item?.component)
-          .find((theme) => theme?.active && !theme.isLayerable())
-      );
-    }, [application]);
+          .find((theme) => theme?.active && !theme.isLayerable()),
+      )
+    }, [application])
 
     const reloadToggleableComponents = useCallback(() => {
       const toggleableComponents = application.items
@@ -145,143 +114,123 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
         .filter(
           (component) =>
             [ComponentArea.EditorStack].includes(component.area) &&
-            component.identifier !==
-              FeatureIdentifier.DeprecatedFoldersComponent
-        );
+            component.identifier !== FeatureIdentifier.DeprecatedFoldersComponent,
+        )
 
-      setToggleableComponents(toggleableComponents);
-    }, [application]);
+      setToggleableComponents(toggleableComponents)
+    }, [application])
 
     useEffect(() => {
       if (!themes.length) {
-        reloadThemes();
+        reloadThemes()
       }
-    }, [reloadThemes, themes.length]);
+    }, [reloadThemes, themes.length])
 
     useEffect(() => {
-      const cleanupItemStream = application.streamItems(
-        ContentType.Theme,
-        () => {
-          reloadThemes();
-        }
-      );
+      const cleanupItemStream = application.streamItems(ContentType.Theme, () => {
+        reloadThemes()
+      })
 
       return () => {
-        cleanupItemStream();
-      };
-    }, [application, reloadThemes]);
+        cleanupItemStream()
+      }
+    }, [application, reloadThemes])
 
     useEffect(() => {
-      const cleanupItemStream = application.streamItems(
-        ContentType.Component,
-        () => {
-          reloadToggleableComponents();
-        }
-      );
+      const cleanupItemStream = application.streamItems(ContentType.Component, () => {
+        reloadToggleableComponents()
+      })
 
       return () => {
-        cleanupItemStream();
-      };
-    }, [application, reloadToggleableComponents]);
+        cleanupItemStream()
+      }
+    }, [application, reloadToggleableComponents])
 
     useEffect(() => {
       if (themesMenuOpen) {
-        defaultThemeButtonRef.current?.focus();
+        defaultThemeButtonRef.current?.focus()
       }
-    }, [themesMenuOpen]);
+    }, [themesMenuOpen])
 
     useEffect(() => {
-      prefsButtonRef.current?.focus();
-    }, []);
+      prefsButtonRef.current?.focus()
+    }, [])
 
-    const [closeOnBlur] = useCloseOnBlur(themesMenuRef, setThemesMenuOpen);
+    const [closeOnBlur] = useCloseOnBlur(themesMenuRef, setThemesMenuOpen)
 
     const toggleThemesMenu = () => {
       if (!themesMenuOpen && themesButtonRef.current) {
-        const themesButtonRect =
-          themesButtonRef.current.getBoundingClientRect();
+        const themesButtonRect = themesButtonRef.current.getBoundingClientRect()
         setThemesMenuPosition({
           left: themesButtonRect.right,
-          bottom:
-            document.documentElement.clientHeight - themesButtonRect.bottom,
-        });
-        setThemesMenuOpen(true);
+          bottom: document.documentElement.clientHeight - themesButtonRect.bottom,
+        })
+        setThemesMenuOpen(true)
       } else {
-        setThemesMenuOpen(false);
+        setThemesMenuOpen(false)
       }
-    };
+    }
 
     const openPreferences = () => {
-      closeQuickSettingsMenu();
-      appState.preferences.openPreferences();
-    };
+      closeQuickSettingsMenu()
+      appState.preferences.openPreferences()
+    }
 
     const toggleComponent = (component: SNComponent) => {
       if (component.isTheme()) {
-        application.mutator.toggleTheme(component);
+        application.mutator.toggleTheme(component).catch(console.error)
       } else {
-        application.mutator.toggleComponent(component);
+        application.mutator.toggleComponent(component).catch(console.error)
       }
-    };
+    }
 
-    const handleBtnKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = (
-      event
-    ) => {
+    const handleBtnKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = (event) => {
       switch (event.key) {
         case 'Escape':
-          setThemesMenuOpen(false);
-          themesButtonRef.current?.focus();
-          break;
+          setThemesMenuOpen(false)
+          themesButtonRef.current?.focus()
+          break
         case 'ArrowRight':
           if (!themesMenuOpen) {
-            toggleThemesMenu();
+            toggleThemesMenu()
           }
       }
-    };
+    }
 
-    const handleQuickSettingsKeyDown: JSXInternal.KeyboardEventHandler<
-      HTMLDivElement
-    > = (event) => {
+    const handleQuickSettingsKeyDown: JSXInternal.KeyboardEventHandler<HTMLDivElement> = (
+      event,
+    ) => {
       quickSettingsKeyDownHandler(
         closeQuickSettingsMenu,
         event,
         quickSettingsMenuRef,
-        themesMenuOpen
-      );
-    };
+        themesMenuOpen,
+      )
+    }
 
-    const handlePanelKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (
-      event
-    ) => {
-      themesMenuKeyDownHandler(
-        event,
-        themesMenuRef,
-        setThemesMenuOpen,
-        themesButtonRef
-      );
-    };
+    const handlePanelKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
+      themesMenuKeyDownHandler(event, themesMenuRef, setThemesMenuOpen, themesButtonRef)
+    }
 
     const toggleDefaultTheme = () => {
       const activeTheme = themes
         .map((item) => item.component)
-        .find((theme) => theme?.active && !theme.isLayerable());
-      if (activeTheme) application.mutator.toggleTheme(activeTheme);
-    };
+        .find((theme) => theme?.active && !theme.isLayerable())
+      if (activeTheme) {
+        application.mutator.toggleTheme(activeTheme).catch(console.error)
+      }
+    }
 
     return (
       <div ref={mainRef} className="sn-component">
         <div
           className={`sn-quick-settings-menu absolute ${MENU_CLASSNAME} ${
-            shouldAnimateCloseMenu
-              ? 'slide-up-animation'
-              : 'sn-dropdown--animated'
+            shouldAnimateCloseMenu ? 'slide-up-animation' : 'sn-dropdown--animated'
           }`}
           ref={quickSettingsMenuRef}
           onKeyDown={handleQuickSettingsKeyDown}
         >
-          <div className="px-3 mt-1 mb-2 font-semibold color-text uppercase">
-            Quick Settings
-          </div>
+          <div className="px-3 mt-1 mb-2 font-semibold color-text uppercase">Quick Settings</div>
           <Disclosure open={themesMenuOpen} onChange={toggleThemesMenu}>
             <DisclosureButton
               onKeyDown={handleBtnKeyDown}
@@ -304,9 +253,7 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
               }}
               className={`${MENU_CLASSNAME} fixed sn-dropdown--animated`}
             >
-              <div className="px-3 my-1 font-semibold color-text uppercase">
-                Themes
-              </div>
+              <div className="px-3 my-1 font-semibold color-text uppercase">Themes</div>
               <button
                 className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
                 onClick={toggleDefaultTheme}
@@ -334,7 +281,7 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
             <button
               className="sn-dropdown-item justify-between focus:bg-info-backdrop focus:shadow-none"
               onClick={() => {
-                toggleComponent(component);
+                toggleComponent(component)
               }}
             >
               <div className="flex items-center">
@@ -361,6 +308,6 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
           </button>
         </div>
       </div>
-    );
-  }
-);
+    )
+  },
+)
diff --git a/app/assets/javascripts/components/RevisionHistoryModal/HistoryListContainer.tsx b/app/assets/javascripts/Components/RevisionHistoryModal/HistoryListContainer.tsx
similarity index 57%
rename from app/assets/javascripts/components/RevisionHistoryModal/HistoryListContainer.tsx
rename to app/assets/javascripts/Components/RevisionHistoryModal/HistoryListContainer.tsx
index 6f16c6a21..3f4f1ceab 100644
--- a/app/assets/javascripts/components/RevisionHistoryModal/HistoryListContainer.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/HistoryListContainer.tsx
@@ -1,4 +1,4 @@
-import { WebApplication } from '@/ui_models/application';
+import { WebApplication } from '@/UIModels/Application'
 import {
   Action,
   ActionVerb,
@@ -6,19 +6,15 @@ import {
   NoteHistoryEntry,
   RevisionListEntry,
   SNNote,
-} from '@standardnotes/snjs';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { StateUpdater, useCallback, useState } from 'preact/hooks';
-import { useEffect } from 'react';
-import { LegacyHistoryList } from './LegacyHistoryList';
-import { RemoteHistoryList } from './RemoteHistoryList';
-import { SessionHistoryList } from './SessionHistoryList';
-import {
-  LegacyHistoryEntry,
-  RemoteRevisionListGroup,
-  sortRevisionListIntoGroups,
-} from './utils';
+} from '@standardnotes/snjs'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { StateUpdater, useCallback, useState } from 'preact/hooks'
+import { useEffect } from 'react'
+import { LegacyHistoryList } from './LegacyHistoryList'
+import { RemoteHistoryList } from './RemoteHistoryList'
+import { SessionHistoryList } from './SessionHistoryList'
+import { LegacyHistoryEntry, RemoteRevisionListGroup, sortRevisionListIntoGroups } from './utils'
 
 export enum RevisionListTabType {
   Session = 'Session',
@@ -27,17 +23,15 @@ export enum RevisionListTabType {
 }
 
 type Props = {
-  application: WebApplication;
-  isFetchingRemoteHistory: boolean;
-  note: SNNote;
-  remoteHistory: RemoteRevisionListGroup[] | undefined;
-  setIsFetchingSelectedRevision: StateUpdater<boolean>;
-  setSelectedRemoteEntry: StateUpdater<RevisionListEntry | undefined>;
-  setSelectedRevision: StateUpdater<
-    HistoryEntry | LegacyHistoryEntry | undefined
-  >;
-  setShowContentLockedScreen: StateUpdater<boolean>;
-};
+  application: WebApplication
+  isFetchingRemoteHistory: boolean
+  note: SNNote
+  remoteHistory: RemoteRevisionListGroup[] | undefined
+  setIsFetchingSelectedRevision: StateUpdater<boolean>
+  setSelectedRemoteEntry: StateUpdater<RevisionListEntry | undefined>
+  setSelectedRevision: StateUpdater<HistoryEntry | LegacyHistoryEntry | undefined>
+  setShowContentLockedScreen: StateUpdater<boolean>
+}
 
 export const HistoryListContainer: FunctionComponent<Props> = observer(
   ({
@@ -51,53 +45,48 @@ export const HistoryListContainer: FunctionComponent<Props> = observer(
     setShowContentLockedScreen,
   }) => {
     const sessionHistory = sortRevisionListIntoGroups<NoteHistoryEntry>(
-      application.historyManager.sessionHistoryForItem(
-        note
-      ) as NoteHistoryEntry[]
-    );
-    const [legacyHistory, setLegacyHistory] = useState<Action[]>();
+      application.historyManager.sessionHistoryForItem(note) as NoteHistoryEntry[],
+    )
+    const [legacyHistory, setLegacyHistory] = useState<Action[]>()
 
-    const [selectedTab, setSelectedTab] = useState<RevisionListTabType>(
-      RevisionListTabType.Remote
-    );
+    const [selectedTab, setSelectedTab] = useState<RevisionListTabType>(RevisionListTabType.Remote)
 
     useEffect(() => {
       const fetchLegacyHistory = async () => {
-        const actionExtensions = application.actionsManager.getExtensions();
+        const actionExtensions = application.actionsManager.getExtensions()
         actionExtensions.forEach(async (ext) => {
-          const actionExtension =
-            await application.actionsManager.loadExtensionInContextOfItem(
-              ext,
-              note
-            );
+          const actionExtension = await application.actionsManager.loadExtensionInContextOfItem(
+            ext,
+            note,
+          )
 
           if (!actionExtension) {
-            return;
+            return
           }
 
           const isLegacyNoteHistoryExt = actionExtension?.actions.some(
-            (action) => action.verb === ActionVerb.Nested
-          );
+            (action) => action.verb === ActionVerb.Nested,
+          )
 
           if (!isLegacyNoteHistoryExt) {
-            return;
+            return
           }
 
           const legacyHistoryEntries = actionExtension.actions.filter(
-            (action) => action.subactions?.[0]
-          );
+            (action) => action.subactions?.[0],
+          )
 
-          setLegacyHistory(legacyHistoryEntries);
-        });
-      };
+          setLegacyHistory(legacyHistoryEntries)
+        })
+      }
 
-      fetchLegacyHistory();
-    }, [application.actionsManager, note]);
+      fetchLegacyHistory().catch(console.error)
+    }, [application.actionsManager, note])
 
     const TabButton: FunctionComponent<{
-      type: RevisionListTabType;
+      type: RevisionListTabType
     }> = ({ type }) => {
-      const isSelected = selectedTab === type;
+      const isSelected = selectedTab === type
 
       return (
         <button
@@ -105,41 +94,41 @@ export const HistoryListContainer: FunctionComponent<Props> = observer(
             isSelected ? 'color-info font-medium shadow-bottom' : 'color-text'
           }`}
           onClick={() => {
-            setSelectedTab(type);
-            setSelectedRemoteEntry(undefined);
+            setSelectedTab(type)
+            setSelectedRemoteEntry(undefined)
           }}
         >
           {type}
         </button>
-      );
-    };
+      )
+    }
 
     const fetchAndSetLegacyRevision = useCallback(
       async (revisionListEntry: Action) => {
-        setSelectedRemoteEntry(undefined);
-        setSelectedRevision(undefined);
-        setIsFetchingSelectedRevision(true);
+        setSelectedRemoteEntry(undefined)
+        setSelectedRevision(undefined)
+        setIsFetchingSelectedRevision(true)
 
         try {
           if (!revisionListEntry.subactions?.[0]) {
-            throw new Error('Could not find revision action url');
+            throw new Error('Could not find revision action url')
           }
 
           const response = await application.actionsManager.runAction(
             revisionListEntry.subactions[0],
-            note
-          );
+            note,
+          )
 
           if (!response) {
-            throw new Error('Could not fetch revision');
+            throw new Error('Could not fetch revision')
           }
 
-          setSelectedRevision(response.item as unknown as HistoryEntry);
+          setSelectedRevision(response.item as unknown as HistoryEntry)
         } catch (error) {
-          console.error(error);
-          setSelectedRevision(undefined);
+          console.error(error)
+          setSelectedRevision(undefined)
         } finally {
-          setIsFetchingSelectedRevision(false);
+          setIsFetchingSelectedRevision(false)
         }
       },
       [
@@ -148,36 +137,33 @@ export const HistoryListContainer: FunctionComponent<Props> = observer(
         setIsFetchingSelectedRevision,
         setSelectedRemoteEntry,
         setSelectedRevision,
-      ]
-    );
+      ],
+    )
 
     const fetchAndSetRemoteRevision = useCallback(
       async (revisionListEntry: RevisionListEntry) => {
-        setShowContentLockedScreen(false);
+        setShowContentLockedScreen(false)
 
-        if (
-          application.features.hasMinimumRole(revisionListEntry.required_role)
-        ) {
-          setIsFetchingSelectedRevision(true);
-          setSelectedRevision(undefined);
-          setSelectedRemoteEntry(undefined);
+        if (application.features.hasMinimumRole(revisionListEntry.required_role)) {
+          setIsFetchingSelectedRevision(true)
+          setSelectedRevision(undefined)
+          setSelectedRemoteEntry(undefined)
 
           try {
-            const remoteRevision =
-              await application.historyManager.fetchRemoteRevision(
-                note,
-                revisionListEntry
-              );
-            setSelectedRevision(remoteRevision);
-            setSelectedRemoteEntry(revisionListEntry);
+            const remoteRevision = await application.historyManager.fetchRemoteRevision(
+              note,
+              revisionListEntry,
+            )
+            setSelectedRevision(remoteRevision)
+            setSelectedRemoteEntry(revisionListEntry)
           } catch (err) {
-            console.error(err);
+            console.error(err)
           } finally {
-            setIsFetchingSelectedRevision(false);
+            setIsFetchingSelectedRevision(false)
           }
         } else {
-          setShowContentLockedScreen(true);
-          setSelectedRevision(undefined);
+          setShowContentLockedScreen(true)
+          setSelectedRevision(undefined)
         }
       },
       [
@@ -187,12 +173,14 @@ export const HistoryListContainer: FunctionComponent<Props> = observer(
         setSelectedRemoteEntry,
         setSelectedRevision,
         setShowContentLockedScreen,
-      ]
-    );
+      ],
+    )
 
     return (
       <div
-        className={`flex flex-col min-w-60 border-0 border-r-1px border-solid border-main overflow-auto h-full`}
+        className={
+          'flex flex-col min-w-60 border-0 border-r-1px border-solid border-main overflow-auto h-full'
+        }
       >
         <div className="flex border-0 border-b-1 border-solid border-main">
           <TabButton type={RevisionListTabType.Remote} />
@@ -201,7 +189,7 @@ export const HistoryListContainer: FunctionComponent<Props> = observer(
             <TabButton type={RevisionListTabType.Legacy} />
           )}
         </div>
-        <div className={`min-h-0 overflow-auto py-1.5 h-full`}>
+        <div className={'min-h-0 overflow-auto py-1.5 h-full'}>
           {selectedTab === RevisionListTabType.Session && (
             <SessionHistoryList
               sessionHistory={sessionHistory}
@@ -227,6 +215,6 @@ export const HistoryListContainer: FunctionComponent<Props> = observer(
           )}
         </div>
       </div>
-    );
-  }
-);
+    )
+  },
+)
diff --git a/app/assets/javascripts/components/RevisionHistoryModal/HistoryListItem.tsx b/app/assets/javascripts/Components/RevisionHistoryModal/HistoryListItem.tsx
similarity index 63%
rename from app/assets/javascripts/components/RevisionHistoryModal/HistoryListItem.tsx
rename to app/assets/javascripts/Components/RevisionHistoryModal/HistoryListItem.tsx
index 073a1e7c7..aae3cc0ed 100644
--- a/app/assets/javascripts/components/RevisionHistoryModal/HistoryListItem.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/HistoryListItem.tsx
@@ -1,10 +1,10 @@
-import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/constants';
-import { FunctionComponent } from 'preact';
+import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants'
+import { FunctionComponent } from 'preact'
 
 type HistoryListItemProps = {
-  isSelected: boolean;
-  onClick: () => void;
-};
+  isSelected: boolean
+  onClick: () => void
+}
 
 export const HistoryListItem: FunctionComponent<HistoryListItemProps> = ({
   children,
@@ -21,11 +21,9 @@ export const HistoryListItem: FunctionComponent<HistoryListItemProps> = ({
       data-selected={isSelected}
     >
       <div
-        className={`pseudo-radio-btn ${
-          isSelected ? 'pseudo-radio-btn--checked' : ''
-        } mr-2`}
+        className={`pseudo-radio-btn ${isSelected ? 'pseudo-radio-btn--checked' : ''} mr-2`}
       ></div>
       {children}
     </button>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/components/RevisionHistoryModal/LegacyHistoryList.tsx b/app/assets/javascripts/Components/RevisionHistoryModal/LegacyHistoryList.tsx
similarity index 56%
rename from app/assets/javascripts/components/RevisionHistoryModal/LegacyHistoryList.tsx
rename to app/assets/javascripts/Components/RevisionHistoryModal/LegacyHistoryList.tsx
index aef7a2d15..30df06582 100644
--- a/app/assets/javascripts/components/RevisionHistoryModal/LegacyHistoryList.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/LegacyHistoryList.tsx
@@ -1,25 +1,16 @@
-import { Action, HistoryEntry, RevisionListEntry } from '@standardnotes/snjs';
-import { FunctionComponent } from 'preact';
-import {
-  StateUpdater,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'preact/hooks';
-import { useListKeyboardNavigation } from '../utils';
-import { HistoryListItem } from './HistoryListItem';
-import { LegacyHistoryEntry } from './utils';
+import { Action, HistoryEntry, RevisionListEntry } from '@standardnotes/snjs'
+import { FunctionComponent } from 'preact'
+import { StateUpdater, useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks'
+import { useListKeyboardNavigation } from '@/Hooks/useListKeyboardNavigation'
+import { HistoryListItem } from './HistoryListItem'
+import { LegacyHistoryEntry } from './utils'
 
 type Props = {
-  legacyHistory: Action[] | undefined;
-  setSelectedRevision: StateUpdater<
-    HistoryEntry | LegacyHistoryEntry | undefined
-  >;
-  setSelectedRemoteEntry: StateUpdater<RevisionListEntry | undefined>;
-  fetchAndSetLegacyRevision: (revisionListEntry: Action) => Promise<void>;
-};
+  legacyHistory: Action[] | undefined
+  setSelectedRevision: StateUpdater<HistoryEntry | LegacyHistoryEntry | undefined>
+  setSelectedRemoteEntry: StateUpdater<RevisionListEntry | undefined>
+  fetchAndSetLegacyRevision: (revisionListEntry: Action) => Promise<void>
+}
 
 export const LegacyHistoryList: FunctionComponent<Props> = ({
   legacyHistory,
@@ -27,31 +18,31 @@ export const LegacyHistoryList: FunctionComponent<Props> = ({
   setSelectedRemoteEntry,
   fetchAndSetLegacyRevision,
 }) => {
-  const legacyHistoryListRef = useRef<HTMLDivElement>(null);
+  const legacyHistoryListRef = useRef<HTMLDivElement>(null)
 
-  useListKeyboardNavigation(legacyHistoryListRef);
+  useListKeyboardNavigation(legacyHistoryListRef)
 
-  const [selectedItemUrl, setSelectedItemUrl] = useState<string>();
+  const [selectedItemUrl, setSelectedItemUrl] = useState<string>()
 
   const firstEntry = useMemo(() => {
-    return legacyHistory?.[0];
-  }, [legacyHistory]);
+    return legacyHistory?.[0]
+  }, [legacyHistory])
 
   const selectFirstEntry = useCallback(() => {
     if (firstEntry) {
-      setSelectedItemUrl(firstEntry.subactions?.[0].url);
-      setSelectedRevision(undefined);
-      fetchAndSetLegacyRevision(firstEntry);
+      setSelectedItemUrl(firstEntry.subactions?.[0].url)
+      setSelectedRevision(undefined)
+      fetchAndSetLegacyRevision(firstEntry).catch(console.error)
     }
-  }, [fetchAndSetLegacyRevision, firstEntry, setSelectedRevision]);
+  }, [fetchAndSetLegacyRevision, firstEntry, setSelectedRevision])
 
   useEffect(() => {
     if (firstEntry && !selectedItemUrl) {
-      selectFirstEntry();
+      selectFirstEntry()
     } else if (!firstEntry) {
-      setSelectedRevision(undefined);
+      setSelectedRevision(undefined)
     }
-  }, [firstEntry, selectFirstEntry, selectedItemUrl, setSelectedRevision]);
+  }, [firstEntry, selectFirstEntry, selectedItemUrl, setSelectedRevision])
 
   return (
     <div
@@ -61,25 +52,25 @@ export const LegacyHistoryList: FunctionComponent<Props> = ({
       ref={legacyHistoryListRef}
     >
       {legacyHistory?.map((entry) => {
-        const url = entry.subactions?.[0].url;
+        const url = entry.subactions?.[0].url
 
         return (
           <HistoryListItem
             key={url}
             isSelected={selectedItemUrl === url}
             onClick={() => {
-              setSelectedItemUrl(url);
-              setSelectedRemoteEntry(undefined);
-              fetchAndSetLegacyRevision(entry);
+              setSelectedItemUrl(url)
+              setSelectedRemoteEntry(undefined)
+              fetchAndSetLegacyRevision(entry).catch(console.error)
             }}
           >
             {entry.label}
           </HistoryListItem>
-        );
+        )
       })}
       {!legacyHistory?.length && (
         <div className="color-grey-0 select-none">No legacy history found</div>
       )}
     </div>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx b/app/assets/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx
new file mode 100644
index 000000000..4a23de6ce
--- /dev/null
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx
@@ -0,0 +1,94 @@
+import { WebApplication } from '@/UIModels/Application'
+import { RevisionListEntry } from '@standardnotes/snjs'
+import { observer } from 'mobx-react-lite'
+import { Fragment, FunctionComponent } from 'preact'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks'
+import { Icon } from '@/Components/Icon'
+import { useListKeyboardNavigation } from '@/Hooks/useListKeyboardNavigation'
+import { HistoryListItem } from './HistoryListItem'
+import { previewHistoryEntryTitle, RemoteRevisionListGroup } from './utils'
+
+type RemoteHistoryListProps = {
+  application: WebApplication
+  remoteHistory: RemoteRevisionListGroup[] | undefined
+  isFetchingRemoteHistory: boolean
+  fetchAndSetRemoteRevision: (revisionListEntry: RevisionListEntry) => Promise<void>
+}
+
+export const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> = observer(
+  ({ application, remoteHistory, isFetchingRemoteHistory, fetchAndSetRemoteRevision }) => {
+    const remoteHistoryListRef = useRef<HTMLDivElement>(null)
+
+    useListKeyboardNavigation(remoteHistoryListRef)
+
+    const remoteHistoryLength = useMemo(
+      () => remoteHistory?.map((group) => group.entries).flat().length,
+      [remoteHistory],
+    )
+
+    const [selectedEntryUuid, setSelectedEntryUuid] = useState('')
+
+    const firstEntry = useMemo(() => {
+      return remoteHistory?.find((group) => group.entries?.length)?.entries?.[0]
+    }, [remoteHistory])
+
+    const selectFirstEntry = useCallback(() => {
+      if (firstEntry) {
+        setSelectedEntryUuid(firstEntry.uuid)
+        fetchAndSetRemoteRevision(firstEntry).catch(console.error)
+      }
+    }, [fetchAndSetRemoteRevision, firstEntry])
+
+    useEffect(() => {
+      if (firstEntry && !selectedEntryUuid.length) {
+        selectFirstEntry()
+      }
+    }, [
+      fetchAndSetRemoteRevision,
+      firstEntry,
+      remoteHistory,
+      selectFirstEntry,
+      selectedEntryUuid.length,
+    ])
+
+    return (
+      <div
+        className={`flex flex-col w-full h-full focus:shadow-none ${
+          isFetchingRemoteHistory || !remoteHistoryLength ? 'items-center justify-center' : ''
+        }`}
+        ref={remoteHistoryListRef}
+      >
+        {isFetchingRemoteHistory && <div className="sk-spinner w-5 h-5 spinner-info"></div>}
+        {remoteHistory?.map((group) =>
+          (group.entries && group.entries.length ? (
+            <Fragment key={group.title}>
+              <div className="px-3 mt-2.5 mb-1 font-semibold color-text uppercase color-grey-0 select-none">
+                {group.title}
+              </div>
+              {group.entries.map((entry) => (
+                <HistoryListItem
+                  key={entry.uuid}
+                  isSelected={selectedEntryUuid === entry.uuid}
+                  onClick={() => {
+                    setSelectedEntryUuid(entry.uuid)
+                    fetchAndSetRemoteRevision(entry).catch(console.error)
+                  }}
+                >
+                  <div className="flex flex-grow items-center justify-between">
+                    <div>{previewHistoryEntryTitle(entry)}</div>
+                    {!application.features.hasMinimumRole(entry.required_role) && (
+                      <Icon type="premium-feature" />
+                    )}
+                  </div>
+                </HistoryListItem>
+              ))}
+            </Fragment>
+          ) : null),
+        )}
+        {!remoteHistoryLength && !isFetchingRemoteHistory && (
+          <div className="color-grey-0 select-none">No remote history found</div>
+        )}
+      </div>
+    )
+  },
+)
diff --git a/app/assets/javascripts/components/RevisionHistoryModal/RevisionContentLocked.tsx b/app/assets/javascripts/Components/RevisionHistoryModal/RevisionContentLocked.tsx
similarity index 62%
rename from app/assets/javascripts/components/RevisionHistoryModal/RevisionContentLocked.tsx
rename to app/assets/javascripts/Components/RevisionHistoryModal/RevisionContentLocked.tsx
index afc4a54d6..6d237d9a9 100644
--- a/app/assets/javascripts/components/RevisionHistoryModal/RevisionContentLocked.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/RevisionContentLocked.tsx
@@ -1,34 +1,29 @@
-import { AppState } from '@/ui_models/app_state';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import HistoryLockedIllustration from '../../../svg/il-history-locked.svg';
-import { Button } from '../Button';
+import { AppState } from '@/UIModels/AppState'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import HistoryLockedIllustration from '../../../svg/il-history-locked.svg'
+import { Button } from '@/Components/Button/Button'
 
 const getPlanHistoryDuration = (planName: string | undefined) => {
   switch (planName) {
     case 'Core':
-      return '30 days';
+      return '30 days'
     case 'Plus':
-      return '365 days';
+      return '365 days'
     default:
-      return "the current session's changes";
+      return "the current session's changes"
   }
-};
+}
 
 const getPremiumContentCopy = (planName: string | undefined) => {
-  return `Version history is limited to ${getPlanHistoryDuration(
-    planName
-  )} in the ${planName} plan`;
-};
+  return `Version history is limited to ${getPlanHistoryDuration(planName)} in the ${planName} plan`
+}
 
 export const RevisionContentLocked: FunctionComponent<{
-  appState: AppState;
+  appState: AppState
 }> = observer(({ appState }) => {
-  const {
-    userSubscriptionName,
-    isUserSubscriptionExpired,
-    isUserSubscriptionCanceled,
-  } = appState.subscription;
+  const { userSubscriptionName, isUserSubscriptionExpired, isUserSubscriptionCanceled } =
+    appState.subscription
 
   return (
     <div className="flex w-full h-full items-center justify-center">
@@ -37,11 +32,9 @@ export const RevisionContentLocked: FunctionComponent<{
         <div class="text-lg font-bold mt-2 mb-1">Can't access this version</div>
         <div className="mb-4 color-grey-0 leading-140%">
           {getPremiumContentCopy(
-            !isUserSubscriptionCanceled &&
-              !isUserSubscriptionExpired &&
-              userSubscriptionName
+            !isUserSubscriptionCanceled && !isUserSubscriptionExpired && userSubscriptionName
               ? userSubscriptionName
-              : 'free'
+              : 'free',
           )}
           . Learn more about our other plans to upgrade your history capacity.
         </div>
@@ -50,11 +43,11 @@ export const RevisionContentLocked: FunctionComponent<{
           label="Discover plans"
           onClick={() => {
             if (window.plansUrl) {
-              window.location.assign(window.plansUrl);
+              window.location.assign(window.plansUrl)
             }
           }}
         />
       </div>
     </div>
-  );
-});
+  )
+})
diff --git a/app/assets/javascripts/components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx b/app/assets/javascripts/Components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
similarity index 60%
rename from app/assets/javascripts/components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
rename to app/assets/javascripts/Components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
index 78ddfc537..4c619e359 100644
--- a/app/assets/javascripts/components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
@@ -1,9 +1,9 @@
-import { confirmDialog } from '@/services/alertService';
-import { STRING_RESTORE_LOCKED_ATTEMPT } from '@/strings';
-import { WebApplication } from '@/ui_models/application';
-import { AppState } from '@/ui_models/app_state';
-import { getPlatformString } from '@/utils';
-import { DialogContent, DialogOverlay } from '@reach/dialog';
+import { confirmDialog } from '@/Services/AlertService'
+import { STRING_RESTORE_LOCKED_ATTEMPT } from '@/Strings'
+import { WebApplication } from '@/UIModels/Application'
+import { AppState } from '@/UIModels/AppState'
+import { getPlatformString } from '@/Utils'
+import { DialogContent, DialogOverlay } from '@reach/dialog'
 import {
   ButtonType,
   ContentType,
@@ -11,59 +11,43 @@ import {
   PayloadSource,
   RevisionListEntry,
   SNNote,
-} from '@standardnotes/snjs';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'preact/hooks';
-import { Button } from '../Button';
-import { HistoryListContainer } from './HistoryListContainer';
-import { RevisionContentLocked } from './RevisionContentLocked';
-import { SelectedRevisionContent } from './SelectedRevisionContent';
-import {
-  LegacyHistoryEntry,
-  RemoteRevisionListGroup,
-  sortRevisionListIntoGroups,
-} from './utils';
+} from '@standardnotes/snjs'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks'
+import { Button } from '@/Components/Button/Button'
+import { HistoryListContainer } from './HistoryListContainer'
+import { RevisionContentLocked } from './RevisionContentLocked'
+import { SelectedRevisionContent } from './SelectedRevisionContent'
+import { LegacyHistoryEntry, RemoteRevisionListGroup, sortRevisionListIntoGroups } from './utils'
 
 type RevisionHistoryModalProps = {
-  application: WebApplication;
-  appState: AppState;
-};
+  application: WebApplication
+  appState: AppState
+}
 
-const ABSOLUTE_CENTER_CLASSNAME =
-  'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2';
+const ABSOLUTE_CENTER_CLASSNAME = 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'
 
 type RevisionContentPlaceholderProps = {
-  isFetchingSelectedRevision: boolean;
-  selectedRevision: HistoryEntry | LegacyHistoryEntry | undefined;
-  showContentLockedScreen: boolean;
-};
+  isFetchingSelectedRevision: boolean
+  selectedRevision: HistoryEntry | LegacyHistoryEntry | undefined
+  showContentLockedScreen: boolean
+}
 
-const RevisionContentPlaceholder: FunctionComponent<
-  RevisionContentPlaceholderProps
-> = ({
+const RevisionContentPlaceholder: FunctionComponent<RevisionContentPlaceholderProps> = ({
   isFetchingSelectedRevision,
   selectedRevision,
   showContentLockedScreen,
 }) => (
   <div
     className={`absolute w-full h-full top-0 left-0 ${
-      (isFetchingSelectedRevision || !selectedRevision) &&
-      !showContentLockedScreen
+      (isFetchingSelectedRevision || !selectedRevision) && !showContentLockedScreen
         ? 'z-index-1 bg-default'
         : '-z-index-1'
     }`}
   >
     {isFetchingSelectedRevision && (
-      <div
-        className={`sk-spinner w-5 h-5 spinner-info ${ABSOLUTE_CENTER_CLASSNAME}`}
-      />
+      <div className={`sk-spinner w-5 h-5 spinner-info ${ABSOLUTE_CENTER_CLASSNAME}`} />
     )}
     {!isFetchingSelectedRevision && !selectedRevision ? (
       <div className={`color-grey-0 select-none ${ABSOLUTE_CENTER_CLASSNAME}`}>
@@ -71,137 +55,123 @@ const RevisionContentPlaceholder: FunctionComponent<
       </div>
     ) : null}
   </div>
-);
+)
 
-export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps> =
-  observer(({ application, appState }) => {
-    const closeButtonRef = useRef<HTMLButtonElement>(null);
+export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps> = observer(
+  ({ application, appState }) => {
+    const closeButtonRef = useRef<HTMLButtonElement>(null)
 
     const dismissModal = () => {
-      appState.notes.setShowRevisionHistoryModal(false);
-    };
+      appState.notes.setShowRevisionHistoryModal(false)
+    }
 
-    const note = Object.values(appState.notes.selectedNotes)[0];
+    const note = Object.values(appState.notes.selectedNotes)[0]
     const editorForCurrentNote = useMemo(() => {
-      return application.componentManager.editorForNote(note);
-    }, [application.componentManager, note]);
+      return application.componentManager.editorForNote(note)
+    }, [application.componentManager, note])
 
-    const [isFetchingSelectedRevision, setIsFetchingSelectedRevision] =
-      useState(false);
-    const [selectedRevision, setSelectedRevision] = useState<
-      HistoryEntry | LegacyHistoryEntry
-    >();
-    const [selectedRemoteEntry, setSelectedRemoteEntry] =
-      useState<RevisionListEntry>();
-    const [isDeletingRevision, setIsDeletingRevision] = useState(false);
-    const [templateNoteForRevision, setTemplateNoteForRevision] =
-      useState<SNNote>();
-    const [showContentLockedScreen, setShowContentLockedScreen] =
-      useState(false);
+    const [isFetchingSelectedRevision, setIsFetchingSelectedRevision] = useState(false)
+    const [selectedRevision, setSelectedRevision] = useState<HistoryEntry | LegacyHistoryEntry>()
+    const [selectedRemoteEntry, setSelectedRemoteEntry] = useState<RevisionListEntry>()
+    const [isDeletingRevision, setIsDeletingRevision] = useState(false)
+    const [templateNoteForRevision, setTemplateNoteForRevision] = useState<SNNote>()
+    const [showContentLockedScreen, setShowContentLockedScreen] = useState(false)
 
-    const [remoteHistory, setRemoteHistory] =
-      useState<RemoteRevisionListGroup[]>();
-    const [isFetchingRemoteHistory, setIsFetchingRemoteHistory] =
-      useState(false);
+    const [remoteHistory, setRemoteHistory] = useState<RemoteRevisionListGroup[]>()
+    const [isFetchingRemoteHistory, setIsFetchingRemoteHistory] = useState(false)
 
     const fetchRemoteHistory = useCallback(async () => {
       if (note) {
-        setRemoteHistory(undefined);
-        setIsFetchingRemoteHistory(true);
+        setRemoteHistory(undefined)
+        setIsFetchingRemoteHistory(true)
         try {
-          const initialRemoteHistory =
-            await application.historyManager.remoteHistoryForItem(note);
+          const initialRemoteHistory = await application.historyManager.remoteHistoryForItem(note)
 
           const remoteHistoryAsGroups =
-            sortRevisionListIntoGroups<RevisionListEntry>(initialRemoteHistory);
+            sortRevisionListIntoGroups<RevisionListEntry>(initialRemoteHistory)
 
-          setRemoteHistory(remoteHistoryAsGroups);
+          setRemoteHistory(remoteHistoryAsGroups)
         } catch (err) {
-          console.error(err);
+          console.error(err)
         } finally {
-          setIsFetchingRemoteHistory(false);
+          setIsFetchingRemoteHistory(false)
         }
       }
-    }, [application.historyManager, note]);
+    }, [application.historyManager, note])
 
     useEffect(() => {
       if (!remoteHistory?.length) {
-        fetchRemoteHistory();
+        fetchRemoteHistory().catch(console.error)
       }
-    }, [fetchRemoteHistory, remoteHistory?.length]);
+    }, [fetchRemoteHistory, remoteHistory?.length])
 
     const restore = () => {
       if (selectedRevision) {
-        const originalNote = application.items.findItem(
-          selectedRevision.payload.uuid
-        ) as SNNote;
+        const originalNote = application.items.findItem(selectedRevision.payload.uuid) as SNNote
 
         if (originalNote.locked) {
-          application.alertService.alert(STRING_RESTORE_LOCKED_ATTEMPT);
-          return;
+          application.alertService.alert(STRING_RESTORE_LOCKED_ATTEMPT).catch(console.error)
+          return
         }
 
         confirmDialog({
           text: "Are you sure you want to replace the current note's contents with what you see in this preview?",
           confirmButtonStyle: 'danger',
-        }).then((confirmed) => {
-          if (confirmed) {
-            application.mutator.changeAndSaveItem(
-              originalNote,
-              (mutator) => {
-                mutator.unsafe_setCustomContent(
-                  selectedRevision.payload.content
-                );
-              },
-              true,
-              PayloadSource.RemoteActionRetrieved
-            );
-            dismissModal();
-          }
-        });
+        })
+          .then((confirmed) => {
+            if (confirmed) {
+              application.mutator
+                .changeAndSaveItem(
+                  originalNote,
+                  (mutator) => {
+                    mutator.unsafe_setCustomContent(selectedRevision.payload.content)
+                  },
+                  true,
+                  PayloadSource.RemoteActionRetrieved,
+                )
+                .catch(console.error)
+              dismissModal()
+            }
+          })
+          .catch(console.error)
       }
-    };
+    }
 
     const restoreAsCopy = async () => {
       if (selectedRevision) {
-        const originalNote = application.items.findSureItem<SNNote>(
-          selectedRevision.payload.uuid
-        );
+        const originalNote = application.items.findSureItem<SNNote>(selectedRevision.payload.uuid)
 
-        const duplicatedItem = await application.mutator.duplicateItem(
-          originalNote,
-          {
-            ...selectedRevision.payload.content,
-            title: selectedRevision.payload.content.title
-              ? selectedRevision.payload.content.title + ' (copy)'
-              : undefined,
-          }
-        );
+        const duplicatedItem = await application.mutator.duplicateItem(originalNote, {
+          ...selectedRevision.payload.content,
+          title: selectedRevision.payload.content.title
+            ? selectedRevision.payload.content.title + ' (copy)'
+            : undefined,
+        })
 
-        appState.notes.selectNote(duplicatedItem.uuid);
+        appState.notes.selectNote(duplicatedItem.uuid).catch(console.error)
 
-        dismissModal();
+        dismissModal()
       }
-    };
+    }
 
     useEffect(() => {
       const fetchTemplateNote = async () => {
         if (selectedRevision) {
           const newTemplateNote = application.mutator.createTemplateItem(
             ContentType.Note,
-            selectedRevision.payload.content
-          ) as SNNote;
+            selectedRevision.payload.content,
+          ) as SNNote
 
-          setTemplateNoteForRevision(newTemplateNote);
+          setTemplateNoteForRevision(newTemplateNote)
         }
-      };
+      }
 
-      fetchTemplateNote();
-    }, [application, selectedRevision]);
+      fetchTemplateNote().catch(console.error)
+    }, [application, selectedRevision])
 
     const deleteSelectedRevision = () => {
       if (!selectedRemoteEntry) {
-        return;
+        return
       }
 
       application.alertService
@@ -210,27 +180,27 @@ export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps>
           'Delete revision?',
           'Delete revision',
           ButtonType.Danger,
-          'Cancel'
+          'Cancel',
         )
         .then((shouldDelete) => {
           if (shouldDelete) {
-            setIsDeletingRevision(true);
+            setIsDeletingRevision(true)
 
             application.historyManager
               .deleteRemoteRevision(note, selectedRemoteEntry)
               .then((res) => {
                 if (res.error?.message) {
-                  throw new Error(res.error.message);
+                  throw new Error(res.error.message)
                 }
 
-                fetchRemoteHistory();
-                setIsDeletingRevision(false);
+                fetchRemoteHistory().catch(console.error)
+                setIsDeletingRevision(false)
               })
-              .catch(console.error);
+              .catch(console.error)
           }
         })
-        .catch(console.error);
-    };
+        .catch(console.error)
+    }
 
     return (
       <DialogOverlay
@@ -264,7 +234,7 @@ export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps>
                 setShowContentLockedScreen={setShowContentLockedScreen}
                 setIsFetchingSelectedRevision={setIsFetchingSelectedRevision}
               />
-              <div className={`flex flex-col flex-grow relative`}>
+              <div className={'flex flex-col flex-grow relative'}>
                 <RevisionContentPlaceholder
                   selectedRevision={selectedRevision}
                   isFetchingSelectedRevision={isFetchingSelectedRevision}
@@ -327,16 +297,16 @@ export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps>
           </div>
         </DialogContent>
       </DialogOverlay>
-    );
-  });
+    )
+  },
+)
 
-export const RevisionHistoryModalWrapper: FunctionComponent<RevisionHistoryModalProps> =
-  observer(({ application, appState }) => {
+export const RevisionHistoryModalWrapper: FunctionComponent<RevisionHistoryModalProps> = observer(
+  ({ application, appState }) => {
     if (!appState.notes.showRevisionHistoryModal) {
-      return null;
+      return null
     }
 
-    return (
-      <RevisionHistoryModal application={application} appState={appState} />
-    );
-  });
+    return <RevisionHistoryModal application={application} appState={appState} />
+  },
+)
diff --git a/app/assets/javascripts/Components/RevisionHistoryModal/SelectedRevisionContent.tsx b/app/assets/javascripts/Components/RevisionHistoryModal/SelectedRevisionContent.tsx
new file mode 100644
index 000000000..f95062d76
--- /dev/null
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/SelectedRevisionContent.tsx
@@ -0,0 +1,75 @@
+import { WebApplication } from '@/UIModels/Application'
+import { AppState } from '@/UIModels/AppState'
+import { HistoryEntry, SNComponent, SNNote } from '@standardnotes/snjs'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { useEffect, useMemo } from 'preact/hooks'
+import { ComponentView } from '@/Components/ComponentView'
+import { LegacyHistoryEntry } from './utils'
+
+const ABSOLUTE_CENTER_CLASSNAME = 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'
+
+type SelectedRevisionContentProps = {
+  application: WebApplication
+  appState: AppState
+  selectedRevision: HistoryEntry | LegacyHistoryEntry
+  editorForCurrentNote: SNComponent | undefined
+  templateNoteForRevision: SNNote
+}
+
+export const SelectedRevisionContent: FunctionComponent<SelectedRevisionContentProps> = observer(
+  ({ application, appState, selectedRevision, editorForCurrentNote, templateNoteForRevision }) => {
+    const componentViewer = useMemo(() => {
+      if (!editorForCurrentNote) {
+        return undefined
+      }
+
+      const componentViewer =
+        application.componentManager.createComponentViewer(editorForCurrentNote)
+      componentViewer.setReadonly(true)
+      componentViewer.lockReadonly = true
+      componentViewer.overrideContextItem = templateNoteForRevision
+      return componentViewer
+    }, [application.componentManager, editorForCurrentNote, templateNoteForRevision])
+
+    useEffect(() => {
+      return () => {
+        if (componentViewer) {
+          application.componentManager.destroyComponentViewer(componentViewer)
+        }
+      }
+    }, [application.componentManager, componentViewer])
+
+    return (
+      <div className="flex flex-col h-full overflow-hidden">
+        <div className="p-4 text-base font-bold w-full">
+          <div className="title">{selectedRevision.payload.content.title}</div>
+        </div>
+        {!componentViewer && (
+          <div className="relative flex-grow min-h-0 overflow-hidden">
+            {selectedRevision.payload.content.text.length ? (
+              <textarea
+                readOnly={true}
+                className="w-full h-full resize-none p-4 pt-0 border-0 bg-default color-text text-editor font-editor"
+              >
+                {selectedRevision.payload.content.text}
+              </textarea>
+            ) : (
+              <div className={`color-grey-0 ${ABSOLUTE_CENTER_CLASSNAME}`}>Empty note.</div>
+            )}
+          </div>
+        )}
+        {componentViewer && (
+          <div className="component-view">
+            <ComponentView
+              key={componentViewer.identifier}
+              componentViewer={componentViewer}
+              application={application}
+              appState={appState}
+            />
+          </div>
+        )}
+      </div>
+    )
+  },
+)
diff --git a/app/assets/javascripts/components/RevisionHistoryModal/SessionHistoryList.tsx b/app/assets/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx
similarity index 57%
rename from app/assets/javascripts/components/RevisionHistoryModal/SessionHistoryList.tsx
rename to app/assets/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx
index 75593da29..ed5fd31e3 100644
--- a/app/assets/javascripts/components/RevisionHistoryModal/SessionHistoryList.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx
@@ -1,68 +1,50 @@
-import {
-  HistoryEntry,
-  NoteHistoryEntry,
-  RevisionListEntry,
-} from '@standardnotes/snjs';
-import { Fragment, FunctionComponent } from 'preact';
-import {
-  StateUpdater,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'preact/hooks';
-import { useListKeyboardNavigation } from '../utils';
-import { HistoryListItem } from './HistoryListItem';
-import { LegacyHistoryEntry, ListGroup } from './utils';
+import { HistoryEntry, NoteHistoryEntry, RevisionListEntry } from '@standardnotes/snjs'
+import { Fragment, FunctionComponent } from 'preact'
+import { StateUpdater, useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks'
+import { useListKeyboardNavigation } from '@/Hooks/useListKeyboardNavigation'
+import { HistoryListItem } from './HistoryListItem'
+import { LegacyHistoryEntry, ListGroup } from './utils'
 
 type Props = {
-  sessionHistory: ListGroup<NoteHistoryEntry>[];
-  setSelectedRevision: StateUpdater<
-    HistoryEntry | LegacyHistoryEntry | undefined
-  >;
-  setSelectedRemoteEntry: StateUpdater<RevisionListEntry | undefined>;
-};
+  sessionHistory: ListGroup<NoteHistoryEntry>[]
+  setSelectedRevision: StateUpdater<HistoryEntry | LegacyHistoryEntry | undefined>
+  setSelectedRemoteEntry: StateUpdater<RevisionListEntry | undefined>
+}
 
 export const SessionHistoryList: FunctionComponent<Props> = ({
   sessionHistory,
   setSelectedRevision,
   setSelectedRemoteEntry,
 }) => {
-  const sessionHistoryListRef = useRef<HTMLDivElement>(null);
+  const sessionHistoryListRef = useRef<HTMLDivElement>(null)
 
-  useListKeyboardNavigation(sessionHistoryListRef);
+  useListKeyboardNavigation(sessionHistoryListRef)
 
   const sessionHistoryLength = useMemo(
     () => sessionHistory.map((group) => group.entries).flat().length,
-    [sessionHistory]
-  );
+    [sessionHistory],
+  )
 
-  const [selectedItemCreatedAt, setSelectedItemCreatedAt] = useState<Date>();
+  const [selectedItemCreatedAt, setSelectedItemCreatedAt] = useState<Date>()
 
   const firstEntry = useMemo(() => {
-    return sessionHistory?.find((group) => group.entries?.length)?.entries?.[0];
-  }, [sessionHistory]);
+    return sessionHistory?.find((group) => group.entries?.length)?.entries?.[0]
+  }, [sessionHistory])
 
   const selectFirstEntry = useCallback(() => {
     if (firstEntry) {
-      setSelectedItemCreatedAt(firstEntry.payload.created_at);
-      setSelectedRevision(firstEntry);
+      setSelectedItemCreatedAt(firstEntry.payload.created_at)
+      setSelectedRevision(firstEntry)
     }
-  }, [firstEntry, setSelectedRevision]);
+  }, [firstEntry, setSelectedRevision])
 
   useEffect(() => {
     if (firstEntry && !selectedItemCreatedAt) {
-      selectFirstEntry();
+      selectFirstEntry()
     } else if (!firstEntry) {
-      setSelectedRevision(undefined);
+      setSelectedRevision(undefined)
     }
-  }, [
-    firstEntry,
-    selectFirstEntry,
-    selectedItemCreatedAt,
-    setSelectedRevision,
-  ]);
+  }, [firstEntry, selectFirstEntry, selectedItemCreatedAt, setSelectedRevision])
 
   return (
     <div
@@ -72,7 +54,7 @@ export const SessionHistoryList: FunctionComponent<Props> = ({
       ref={sessionHistoryListRef}
     >
       {sessionHistory?.map((group) =>
-        group.entries && group.entries.length ? (
+        (group.entries && group.entries.length ? (
           <Fragment key={group.title}>
             <div className="px-3 mt-2.5 mb-1 font-semibold color-text uppercase color-grey-0 select-none">
               {group.title}
@@ -82,20 +64,20 @@ export const SessionHistoryList: FunctionComponent<Props> = ({
                 key={index}
                 isSelected={selectedItemCreatedAt === entry.payload.created_at}
                 onClick={() => {
-                  setSelectedItemCreatedAt(entry.payload.created_at);
-                  setSelectedRevision(entry);
-                  setSelectedRemoteEntry(undefined);
+                  setSelectedItemCreatedAt(entry.payload.created_at)
+                  setSelectedRevision(entry)
+                  setSelectedRemoteEntry(undefined)
                 }}
               >
                 {entry.previewTitle()}
               </HistoryListItem>
             ))}
           </Fragment>
-        ) : null
+        ) : null),
       )}
       {!sessionHistoryLength && (
         <div className="color-grey-0 select-none">No session history found</div>
       )}
     </div>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/components/RevisionHistoryModal/utils.ts b/app/assets/javascripts/Components/RevisionHistoryModal/utils.ts
similarity index 54%
rename from app/assets/javascripts/components/RevisionHistoryModal/utils.ts
rename to app/assets/javascripts/Components/RevisionHistoryModal/utils.ts
index 5be5a4200..be5ca333f 100644
--- a/app/assets/javascripts/components/RevisionHistoryModal/utils.ts
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/utils.ts
@@ -1,73 +1,59 @@
-import { DAYS_IN_A_WEEK, DAYS_IN_A_YEAR } from '@/constants';
-import {
-  HistoryEntry,
-  NoteHistoryEntry,
-  RevisionListEntry,
-} from '@standardnotes/snjs';
-import { calculateDifferenceBetweenDatesInDays } from '../utils';
+import { DAYS_IN_A_WEEK, DAYS_IN_A_YEAR } from '@/Constants'
+import { HistoryEntry, NoteHistoryEntry, RevisionListEntry } from '@standardnotes/snjs'
+import { calculateDifferenceBetweenDatesInDays } from '../../Utils/CalculateDifferenceBetweenDatesInDays'
 
 export type LegacyHistoryEntry = {
-  payload: HistoryEntry['payload'];
-  created_at: string;
-};
+  payload: HistoryEntry['payload']
+  created_at: string
+}
 
-type RevisionEntry = RevisionListEntry | NoteHistoryEntry | LegacyHistoryEntry;
+type RevisionEntry = RevisionListEntry | NoteHistoryEntry | LegacyHistoryEntry
 
 export type ListGroup<EntryType extends RevisionEntry> = {
-  title: string;
-  entries: EntryType[] | undefined;
-};
+  title: string
+  entries: EntryType[] | undefined
+}
 
-export type RemoteRevisionListGroup = ListGroup<RevisionListEntry>;
-export type SessionRevisionListGroup = ListGroup<NoteHistoryEntry>;
+export type RemoteRevisionListGroup = ListGroup<RevisionListEntry>
+export type SessionRevisionListGroup = ListGroup<NoteHistoryEntry>
 
 export const formatDateAsMonthYearString = (date: Date) =>
   date.toLocaleDateString(undefined, {
     month: 'long',
     year: 'numeric',
-  });
+  })
 
-export const getGroupIndexForEntry = (
-  entry: RevisionEntry,
-  groups: ListGroup<RevisionEntry>[]
-) => {
-  const todayAsDate = new Date();
+export const getGroupIndexForEntry = (entry: RevisionEntry, groups: ListGroup<RevisionEntry>[]) => {
+  const todayAsDate = new Date()
   const entryDate = new Date(
-    (entry as RevisionListEntry).created_at ??
-      (entry as NoteHistoryEntry).payload.created_at
-  );
+    (entry as RevisionListEntry).created_at ?? (entry as NoteHistoryEntry).payload.created_at,
+  )
 
-  const differenceBetweenDatesInDays = calculateDifferenceBetweenDatesInDays(
-    todayAsDate,
-    entryDate
-  );
+  const differenceBetweenDatesInDays = calculateDifferenceBetweenDatesInDays(todayAsDate, entryDate)
 
   if (differenceBetweenDatesInDays === 0) {
-    return groups.findIndex((group) => group.title === GROUP_TITLE_TODAY);
+    return groups.findIndex((group) => group.title === GROUP_TITLE_TODAY)
   }
 
-  if (
-    differenceBetweenDatesInDays > 0 &&
-    differenceBetweenDatesInDays < DAYS_IN_A_WEEK
-  ) {
-    return groups.findIndex((group) => group.title === GROUP_TITLE_WEEK);
+  if (differenceBetweenDatesInDays > 0 && differenceBetweenDatesInDays < DAYS_IN_A_WEEK) {
+    return groups.findIndex((group) => group.title === GROUP_TITLE_WEEK)
   }
 
   if (differenceBetweenDatesInDays > DAYS_IN_A_YEAR) {
-    return groups.findIndex((group) => group.title === GROUP_TITLE_YEAR);
+    return groups.findIndex((group) => group.title === GROUP_TITLE_YEAR)
   }
 
-  const formattedEntryMonthYear = formatDateAsMonthYearString(entryDate);
+  const formattedEntryMonthYear = formatDateAsMonthYearString(entryDate)
 
-  return groups.findIndex((group) => group.title === formattedEntryMonthYear);
-};
+  return groups.findIndex((group) => group.title === formattedEntryMonthYear)
+}
 
-const GROUP_TITLE_TODAY = 'Today';
-const GROUP_TITLE_WEEK = 'This Week';
-const GROUP_TITLE_YEAR = 'More Than A Year Ago';
+const GROUP_TITLE_TODAY = 'Today'
+const GROUP_TITLE_WEEK = 'This Week'
+const GROUP_TITLE_YEAR = 'More Than A Year Ago'
 
 export const sortRevisionListIntoGroups = <EntryType extends RevisionEntry>(
-  revisionList: EntryType[] | undefined
+  revisionList: EntryType[] | undefined,
 ) => {
   const sortedGroups: ListGroup<EntryType>[] = [
     {
@@ -82,35 +68,33 @@ export const sortRevisionListIntoGroups = <EntryType extends RevisionEntry>(
       title: GROUP_TITLE_YEAR,
       entries: [],
     },
-  ];
+  ]
 
   const addBeforeLastGroup = (group: ListGroup<EntryType>) => {
-    sortedGroups.splice(sortedGroups.length - 1, 0, group);
-  };
+    sortedGroups.splice(sortedGroups.length - 1, 0, group)
+  }
 
   revisionList?.forEach((entry) => {
-    const groupIndex = getGroupIndexForEntry(entry, sortedGroups);
+    const groupIndex = getGroupIndexForEntry(entry, sortedGroups)
 
     if (groupIndex > -1) {
-      sortedGroups[groupIndex]?.entries?.push(entry);
+      sortedGroups[groupIndex]?.entries?.push(entry)
     } else {
       addBeforeLastGroup({
         title: formatDateAsMonthYearString(
           new Date(
             (entry as RevisionListEntry).created_at ??
-              (entry as NoteHistoryEntry).payload.created_at
-          )
+              (entry as NoteHistoryEntry).payload.created_at,
+          ),
         ),
         entries: [entry],
-      });
+      })
     }
-  });
+  })
 
-  return sortedGroups;
-};
+  return sortedGroups
+}
 
-export const previewHistoryEntryTitle = (
-  revision: RevisionListEntry | LegacyHistoryEntry
-) => {
-  return new Date(revision.created_at).toLocaleString();
-};
+export const previewHistoryEntryTitle = (revision: RevisionListEntry | LegacyHistoryEntry) => {
+  return new Date(revision.created_at).toLocaleString()
+}
diff --git a/app/assets/javascripts/components/SearchOptions.tsx b/app/assets/javascripts/Components/SearchOptions/index.tsx
similarity index 67%
rename from app/assets/javascripts/components/SearchOptions.tsx
rename to app/assets/javascripts/Components/SearchOptions/index.tsx
index c6abf6e0e..934b50f24 100644
--- a/app/assets/javascripts/components/SearchOptions.tsx
+++ b/app/assets/javascripts/Components/SearchOptions/index.tsx
@@ -1,21 +1,20 @@
-import { AppState } from '@/ui_models/app_state';
-import { WebApplication } from '@/ui_models/application';
-import { observer } from 'mobx-react-lite';
-import Bubble from './Bubble';
+import { AppState } from '@/UIModels/AppState'
+import { WebApplication } from '@/UIModels/Application'
+import { observer } from 'mobx-react-lite'
+import Bubble from '@/Components/Bubble'
 
 type Props = {
-  appState: AppState;
-  application: WebApplication;
-};
+  appState: AppState
+  application: WebApplication
+}
 
 export const SearchOptions = observer(({ appState }: Props) => {
-  const { searchOptions } = appState;
+  const { searchOptions } = appState
 
-  const { includeProtectedContents, includeArchived, includeTrashed } =
-    searchOptions;
+  const { includeProtectedContents, includeArchived, includeTrashed } = searchOptions
 
   async function toggleIncludeProtectedContents() {
-    await searchOptions.toggleIncludeProtectedContents();
+    await searchOptions.toggleIncludeProtectedContents()
   }
 
   return (
@@ -42,5 +41,5 @@ export const SearchOptions = observer(({ appState }: Props) => {
         onSelect={searchOptions.toggleIncludeTrashed}
       />
     </div>
-  );
-});
+  )
+})
diff --git a/app/assets/javascripts/components/SessionsModal.tsx b/app/assets/javascripts/Components/SessionsModal/index.tsx
similarity index 65%
rename from app/assets/javascripts/components/SessionsModal.tsx
rename to app/assets/javascripts/Components/SessionsModal/index.tsx
index c2d157a7c..1ea7988c2 100644
--- a/app/assets/javascripts/components/SessionsModal.tsx
+++ b/app/assets/javascripts/Components/SessionsModal/index.tsx
@@ -1,109 +1,96 @@
-import { AppState } from '@/ui_models/app_state';
+import { AppState } from '@/UIModels/AppState'
 import {
   SNApplication,
   SessionStrings,
   UuidString,
   isNullOrUndefined,
   RemoteSession,
-} from '@standardnotes/snjs';
-import { FunctionComponent } from 'preact';
-import { useState, useEffect, useRef, useMemo } from 'preact/hooks';
-import { Dialog } from '@reach/dialog';
-import { Alert } from '@reach/alert';
-import {
-  AlertDialog,
-  AlertDialogDescription,
-  AlertDialogLabel,
-} from '@reach/alert-dialog';
-import { WebApplication } from '@/ui_models/application';
-import { observer } from 'mobx-react-lite';
+} from '@standardnotes/snjs'
+import { FunctionComponent } from 'preact'
+import { useState, useEffect, useRef, useMemo } from 'preact/hooks'
+import { Dialog } from '@reach/dialog'
+import { Alert } from '@reach/alert'
+import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
+import { WebApplication } from '@/UIModels/Application'
+import { observer } from 'mobx-react-lite'
 
 type Session = RemoteSession & {
-  revoking?: true;
-};
+  revoking?: true
+}
 
 function useSessions(
-  application: SNApplication
-): [
-  Session[],
-  () => void,
-  boolean,
-  (uuid: UuidString) => Promise<void>,
-  string
-] {
-  const [sessions, setSessions] = useState<Session[]>([]);
-  const [lastRefreshDate, setLastRefreshDate] = useState(Date.now());
-  const [refreshing, setRefreshing] = useState(true);
-  const [errorMessage, setErrorMessage] = useState('');
+  application: SNApplication,
+): [Session[], () => void, boolean, (uuid: UuidString) => Promise<void>, string] {
+  const [sessions, setSessions] = useState<Session[]>([])
+  const [lastRefreshDate, setLastRefreshDate] = useState(Date.now())
+  const [refreshing, setRefreshing] = useState(true)
+  const [errorMessage, setErrorMessage] = useState('')
 
   useEffect(() => {
-    (async () => {
-      setRefreshing(true);
-      const response = await application.getSessions();
+    ;(async () => {
+      setRefreshing(true)
+      const response = await application.getSessions()
       if ('error' in response || isNullOrUndefined(response.data)) {
         if (response.error?.message) {
-          setErrorMessage(response.error.message);
+          setErrorMessage(response.error.message)
         } else {
-          setErrorMessage('An unknown error occured while loading sessions.');
+          setErrorMessage('An unknown error occured while loading sessions.')
         }
       } else {
-        const sessions = response.data as RemoteSession[];
-        setSessions(sessions);
-        setErrorMessage('');
+        const sessions = response.data as RemoteSession[]
+        setSessions(sessions)
+        setErrorMessage('')
       }
-      setRefreshing(false);
-    })();
-  }, [application, lastRefreshDate]);
+      setRefreshing(false)
+    })().catch(console.error)
+  }, [application, lastRefreshDate])
 
   function refresh() {
-    setLastRefreshDate(Date.now());
+    setLastRefreshDate(Date.now())
   }
 
   async function revokeSession(uuid: UuidString) {
-    const sessionsBeforeRevoke = sessions;
+    const sessionsBeforeRevoke = sessions
 
-    const responsePromise = application.revokeSession(uuid);
+    const responsePromise = application.revokeSession(uuid)
 
-    const sessionsDuringRevoke = sessions.slice();
-    const toRemoveIndex = sessions.findIndex(
-      (session) => session.uuid === uuid
-    );
+    const sessionsDuringRevoke = sessions.slice()
+    const toRemoveIndex = sessions.findIndex((session) => session.uuid === uuid)
     sessionsDuringRevoke[toRemoveIndex] = {
       ...sessionsDuringRevoke[toRemoveIndex],
       revoking: true,
-    };
-    setSessions(sessionsDuringRevoke);
+    }
+    setSessions(sessionsDuringRevoke)
 
-    const response = await responsePromise;
+    const response = await responsePromise
     if (isNullOrUndefined(response)) {
-      setSessions(sessionsBeforeRevoke);
+      setSessions(sessionsBeforeRevoke)
     } else if ('error' in response) {
       if (response.error?.message) {
-        setErrorMessage(response.error?.message);
+        setErrorMessage(response.error?.message)
       } else {
-        setErrorMessage('An unknown error occured while revoking the session.');
+        setErrorMessage('An unknown error occured while revoking the session.')
       }
-      setSessions(sessionsBeforeRevoke);
+      setSessions(sessionsBeforeRevoke)
     } else {
-      setSessions(sessions.filter((session) => session.uuid !== uuid));
+      setSessions(sessions.filter((session) => session.uuid !== uuid))
     }
   }
 
-  return [sessions, refresh, refreshing, revokeSession, errorMessage];
+  return [sessions, refresh, refreshing, revokeSession, errorMessage]
 }
 
 const SessionsModalContent: FunctionComponent<{
-  appState: AppState;
-  application: SNApplication;
+  appState: AppState
+  application: SNApplication
 }> = ({ appState, application }) => {
-  const close = () => appState.closeSessionsModal();
+  const close = () => appState.closeSessionsModal()
 
-  const [sessions, refresh, refreshing, revokeSession, errorMessage] =
-    useSessions(application);
+  const [sessions, refresh, refreshing, revokeSession, errorMessage] = useSessions(application)
 
-  const [confirmRevokingSessionUuid, setRevokingSessionUuid] = useState('');
-  const closeRevokeSessionAlert = () => setRevokingSessionUuid('');
-  const cancelRevokeRef = useRef<HTMLButtonElement>(null);
+  const [confirmRevokingSessionUuid, setRevokingSessionUuid] = useState('')
+  const closeRevokeSessionAlert = () => setRevokingSessionUuid('')
+  const cancelRevokeRef = useRef<HTMLButtonElement>(null)
 
   const formatter = useMemo(
     () =>
@@ -115,8 +102,8 @@ const SessionsModalContent: FunctionComponent<{
         hour: 'numeric',
         minute: 'numeric',
       }),
-    []
-  );
+    [],
+  )
 
   return (
     <>
@@ -127,11 +114,7 @@ const SessionsModalContent: FunctionComponent<{
               <div class="sk-panel-header">
                 <div class="sk-panel-header-title">Active Sessions</div>
                 <div className="buttons">
-                  <button
-                    class="sk-a close-button info"
-                    disabled={refreshing}
-                    onClick={refresh}
-                  >
+                  <button class="sk-a close-button info" disabled={refreshing} onClick={refresh}>
                     Refresh
                   </button>
                   <button class="sk-a close-button info" onClick={close}>
@@ -143,15 +126,11 @@ const SessionsModalContent: FunctionComponent<{
                 {refreshing ? (
                   <>
                     <div class="sk-spinner small info"></div>
-                    <h2 className="sk-p sessions-modal-refreshing">
-                      Loading sessions
-                    </h2>
+                    <h2 className="sk-p sessions-modal-refreshing">Loading sessions</h2>
                   </>
                 ) : (
                   <>
-                    {errorMessage && (
-                      <Alert className="sk-p bold">{errorMessage}</Alert>
-                    )}
+                    {errorMessage && <Alert className="sk-p bold">{errorMessage}</Alert>}
                     {sessions.length > 0 && (
                       <ul>
                         {sessions.map((session) => (
@@ -161,16 +140,11 @@ const SessionsModalContent: FunctionComponent<{
                               <span className="info bold">Current session</span>
                             ) : (
                               <>
-                                <p>
-                                  Signed in on{' '}
-                                  {formatter.format(session.updated_at)}
-                                </p>
+                                <p>Signed in on {formatter.format(session.updated_at)}</p>
                                 <button
                                   className="sn-button small danger sk-label"
                                   disabled={session.revoking}
-                                  onClick={() =>
-                                    setRevokingSessionUuid(session.uuid)
-                                  }
+                                  onClick={() => setRevokingSessionUuid(session.uuid)}
                                 >
                                   <span>Revoke</span>
                                 </button>
@@ -190,7 +164,7 @@ const SessionsModalContent: FunctionComponent<{
       {confirmRevokingSessionUuid && (
         <AlertDialog
           onDismiss={() => {
-            setRevokingSessionUuid('');
+            setRevokingSessionUuid('')
           }}
           leastDestructiveRef={cancelRevokeRef}
         >
@@ -216,8 +190,8 @@ const SessionsModalContent: FunctionComponent<{
                       <button
                         className="sn-button small danger sk-label"
                         onClick={() => {
-                          closeRevokeSessionAlert();
-                          revokeSession(confirmRevokingSessionUuid);
+                          closeRevokeSessionAlert()
+                          revokeSession(confirmRevokingSessionUuid).catch(console.error)
                         }}
                       >
                         <span>{SessionStrings.RevokeConfirmButton}</span>
@@ -231,18 +205,16 @@ const SessionsModalContent: FunctionComponent<{
         </AlertDialog>
       )}
     </>
-  );
-};
+  )
+}
 
 export const SessionsModal: FunctionComponent<{
-  appState: AppState;
-  application: WebApplication;
+  appState: AppState
+  application: WebApplication
 }> = observer(({ appState, application }) => {
   if (appState.isSessionsModalVisible) {
-    return (
-      <SessionsModalContent application={application} appState={appState} />
-    );
+    return <SessionsModalContent application={application} appState={appState} />
   } else {
-    return null;
+    return null
   }
-});
+})
diff --git a/app/assets/javascripts/components/Shared/AccordionItem.tsx b/app/assets/javascripts/Components/Shared/AccordionItem.tsx
similarity index 58%
rename from app/assets/javascripts/components/Shared/AccordionItem.tsx
rename to app/assets/javascripts/Components/Shared/AccordionItem.tsx
index 3e364ae6b..2f88a3f87 100644
--- a/app/assets/javascripts/components/Shared/AccordionItem.tsx
+++ b/app/assets/javascripts/Components/Shared/AccordionItem.tsx
@@ -1,27 +1,23 @@
-import { FunctionalComponent } from 'preact';
-import { useRef, useState } from 'preact/hooks';
-import { ArrowDownCheckmarkIcon } from '@standardnotes/stylekit';
-import { Title } from '@/components/Preferences/components';
+import { FunctionalComponent } from 'preact'
+import { useRef, useState } from 'preact/hooks'
+import { ArrowDownCheckmarkIcon } from '@standardnotes/stylekit'
+import { Title } from '@/Components/Preferences/PreferencesComponents'
 
 type Props = {
-  title: string | JSX.Element;
-  className?: string;
-};
+  title: string | JSX.Element
+  className?: string
+}
 
-export const AccordionItem: FunctionalComponent<Props> = ({
-  title,
-  className = '',
-  children,
-}) => {
-  const elementRef = useRef<HTMLDivElement>(null);
-  const [isExpanded, setIsExpanded] = useState(false);
+export const AccordionItem: FunctionalComponent<Props> = ({ title, className = '', children }) => {
+  const elementRef = useRef<HTMLDivElement>(null)
+  const [isExpanded, setIsExpanded] = useState(false)
 
   return (
     <div className={className}>
       <div
         className={'relative flex cursor-pointer hover:underline'}
         onClick={() => {
-          setIsExpanded(!isExpanded);
+          setIsExpanded(!isExpanded)
         }}
       >
         <Title>{title}</Title>
@@ -40,5 +36,5 @@ export const AccordionItem: FunctionalComponent<Props> = ({
         {children}
       </div>
     </div>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/components/Shared/HorizontalSeparator.tsx b/app/assets/javascripts/Components/Shared/HorizontalSeparator.tsx
similarity index 56%
rename from app/assets/javascripts/components/Shared/HorizontalSeparator.tsx
rename to app/assets/javascripts/Components/Shared/HorizontalSeparator.tsx
index 6eb89f123..bf5ac0de8 100644
--- a/app/assets/javascripts/components/Shared/HorizontalSeparator.tsx
+++ b/app/assets/javascripts/Components/Shared/HorizontalSeparator.tsx
@@ -1,10 +1,8 @@
-import { FunctionalComponent } from 'preact';
+import { FunctionalComponent } from 'preact'
 
 type Props = {
-  classes?: string;
-};
-export const HorizontalSeparator: FunctionalComponent<Props> = ({
-  classes = '',
-}) => {
-  return <hr className={`h-1px w-full bg-border no-border ${classes}`} />;
-};
+  classes?: string
+}
+export const HorizontalSeparator: FunctionalComponent<Props> = ({ classes = '' }) => {
+  return <hr className={`h-1px w-full bg-border no-border ${classes}`} />
+}
diff --git a/app/assets/javascripts/components/Shared/ModalDialog.tsx b/app/assets/javascripts/Components/Shared/ModalDialog.tsx
similarity index 76%
rename from app/assets/javascripts/components/Shared/ModalDialog.tsx
rename to app/assets/javascripts/Components/Shared/ModalDialog.tsx
index 1e8649a68..03ea14eec 100644
--- a/app/assets/javascripts/components/Shared/ModalDialog.tsx
+++ b/app/assets/javascripts/Components/Shared/ModalDialog.tsx
@@ -1,13 +1,13 @@
-import { FunctionComponent } from 'preact';
+import { FunctionComponent } from 'preact'
 import {
   AlertDialog,
   AlertDialogDescription,
   AlertDialogLabel,
-} from '@node_modules/@reach/alert-dialog';
-import { useRef } from '@node_modules/preact/hooks';
+} from '@node_modules/@reach/alert-dialog'
+import { useRef } from '@node_modules/preact/hooks'
 
 export const ModalDialog: FunctionComponent = ({ children }) => {
-  const ldRef = useRef<HTMLButtonElement>(null);
+  const ldRef = useRef<HTMLButtonElement>(null)
 
   return (
     <AlertDialog leastDestructiveRef={ldRef}>
@@ -24,39 +24,31 @@ export const ModalDialog: FunctionComponent = ({ children }) => {
         </div>
       </div>
     </AlertDialog>
-  );
-};
+  )
+}
 
 export const ModalDialogLabel: FunctionComponent<{
-  closeDialog: () => void;
-  className?: string;
+  closeDialog: () => void
+  className?: string
 }> = ({ children, closeDialog, className }) => (
   <AlertDialogLabel className={`sk-panel-header px-4.5 ${className}`}>
     <div className="w-full flex flex-row justify-between items-center">
-      <div className="flex-grow color-text text-base font-medium">
-        {children}
-      </div>
-      <div
-        tabIndex={0}
-        className="font-bold color-info cursor-pointer"
-        onClick={closeDialog}
-      >
+      <div className="flex-grow color-text text-base font-medium">{children}</div>
+      <div tabIndex={0} className="font-bold color-info cursor-pointer" onClick={closeDialog}>
         Close
       </div>
     </div>
     <hr className="h-1px bg-border no-border m-0" />
   </AlertDialogLabel>
-);
+)
 
 export const ModalDialogDescription: FunctionComponent<{
-  className?: string;
+  className?: string
 }> = ({ children, className = '' }) => (
-  <AlertDialogDescription
-    className={`px-4 py-4 flex flex-row items-center ${className}`}
-  >
+  <AlertDialogDescription className={`px-4 py-4 flex flex-row items-center ${className}`}>
     {children}
   </AlertDialogDescription>
-);
+)
 
 export const ModalDialogButtons: FunctionComponent<{ className?: string }> = ({
   children,
@@ -75,6 +67,6 @@ export const ModalDialogButtons: FunctionComponent<{ className?: string }> = ({
         : children}
     </div>
   </>
-);
+)
 
-export default ModalDialog;
+export default ModalDialog
diff --git a/app/assets/javascripts/components/Switch.tsx b/app/assets/javascripts/Components/Switch/index.tsx
similarity index 55%
rename from app/assets/javascripts/components/Switch.tsx
rename to app/assets/javascripts/Components/Switch/index.tsx
index a9ba8dbef..2123b5599 100644
--- a/app/assets/javascripts/components/Switch.tsx
+++ b/app/assets/javascripts/Components/Switch/index.tsx
@@ -2,30 +2,28 @@ import {
   CustomCheckboxContainer,
   CustomCheckboxInput,
   CustomCheckboxInputProps,
-} from '@reach/checkbox';
-import '@reach/checkbox/styles.css';
-import { ComponentChildren, FunctionalComponent } from 'preact';
-import { useState } from 'preact/hooks';
-import { HTMLProps } from 'react';
+} from '@reach/checkbox'
+import '@reach/checkbox/styles.css'
+import { ComponentChildren, FunctionalComponent } from 'preact'
+import { useState } from 'preact/hooks'
+import { HTMLProps } from 'react'
 
 export type SwitchProps = HTMLProps<HTMLInputElement> & {
-  checked?: boolean;
+  checked?: boolean
   // Optional in case it is wrapped in a button (e.g. a menu item)
-  onChange?: (checked: boolean) => void;
-  className?: string;
-  children?: ComponentChildren;
-  role?: string;
-};
+  onChange?: (checked: boolean) => void
+  className?: string
+  children?: ComponentChildren
+  role?: string
+}
 
-export const Switch: FunctionalComponent<SwitchProps> = (
-  props: SwitchProps
-) => {
-  const [checkedState, setChecked] = useState(props.checked || false);
-  const checked = props.checked ?? checkedState;
-  const className = props.className ?? '';
+export const Switch: FunctionalComponent<SwitchProps> = (props: SwitchProps) => {
+  const [checkedState, setChecked] = useState(props.checked || false)
+  const checked = props.checked ?? checkedState
+  const className = props.className ?? ''
 
-  const isDisabled = !!props.disabled;
-  const isActive = checked && !isDisabled;
+  const isDisabled = !!props.disabled
+  const isActive = checked && !isDisabled
 
   return (
     <label
@@ -38,8 +36,8 @@ export const Switch: FunctionalComponent<SwitchProps> = (
       <CustomCheckboxContainer
         checked={checked}
         onChange={(event) => {
-          setChecked(event.target.checked);
-          props.onChange?.(event.target.checked);
+          setChecked(event.target.checked)
+          props.onChange?.(event.target.checked)
         }}
         className={`sn-switch ${isActive ? 'bg-info' : 'bg-neutral'}`}
         disabled={props.disabled}
@@ -53,11 +51,9 @@ export const Switch: FunctionalComponent<SwitchProps> = (
         />
         <span
           aria-hidden
-          className={`sn-switch-handle ${
-            checked ? 'sn-switch-handle--right' : ''
-          }`}
+          className={`sn-switch-handle ${checked ? 'sn-switch-handle--right' : ''}`}
         />
       </CustomCheckboxContainer>
     </label>
-  );
-};
+  )
+}
diff --git a/app/assets/javascripts/components/SyncResolutionMenu.tsx b/app/assets/javascripts/Components/SyncResolutionMenu/index.tsx
similarity index 59%
rename from app/assets/javascripts/components/SyncResolutionMenu.tsx
rename to app/assets/javascripts/Components/SyncResolutionMenu/index.tsx
index d2a058e82..31e8dc11b 100644
--- a/app/assets/javascripts/components/SyncResolutionMenu.tsx
+++ b/app/assets/javascripts/Components/SyncResolutionMenu/index.tsx
@@ -1,21 +1,21 @@
-import { WebApplication } from '@/ui_models/application';
-import { PureComponent } from './Abstract/PureComponent';
+import { WebApplication } from '@/UIModels/Application'
+import { PureComponent } from '@/Components/Abstract/PureComponent'
 
 type Props = {
-  application: WebApplication;
-  close: () => void;
-};
+  application: WebApplication
+  close: () => void
+}
 
 export class SyncResolutionMenu extends PureComponent<Props> {
   constructor(props: Props) {
-    super(props, props.application);
+    super(props, props.application)
   }
 
   close = () => {
-    this.props.close();
-  };
+    this.props.close()
+  }
 
-  render() {
+  override render() {
     return (
       <div className="sn-component">
         <div id="sync-resolution-menu" className="sk-panel sk-panel-right">
@@ -28,31 +28,25 @@ export class SyncResolutionMenu extends PureComponent<Props> {
           <div className="sk-panel-content">
             <div className="sk-panel-section">
               <div className="sk-panel-row sk-p">
-                We've detected that the data in the current application session
-                may not match the data on the server. An attempt was made to
-                auto-resolve the issue, but it was unable to reconcile the
-                differences.
+                We've detected that the data in the current application session may not match the
+                data on the server. An attempt was made to auto-resolve the issue, but it was unable
+                to reconcile the differences.
               </div>
               <div className="sk-p sk-panel-row">
                 <div className="sk-panel-column">
-                  <strong className="sk-panel-row">
-                    Option 1 — Restart Application:
-                  </strong>
+                  <strong className="sk-panel-row">Option 1 — Restart Application:</strong>
                   <div className="sk-p">
-                    Quit the application and re-open it. Sometimes, this may
-                    resolve the issue.
+                    Quit the application and re-open it. Sometimes, this may resolve the issue.
                   </div>
                 </div>
               </div>
               <div className="sk-p sk-panel-row">
                 <div className="sk-panel-column">
-                  <strong className="sk-panel-row">
-                    Option 2 — Sign Out and Back In:
-                  </strong>
+                  <strong className="sk-panel-row">Option 2 — Sign Out and Back In:</strong>
                   <div className="sk-p">
-                    Sign out of your account, then sign back in. This will
-                    ensure your data is consistent with the server. Be sure to
-                    download a backup of your data before doing so.
+                    Sign out of your account, then sign back in. This will ensure your data is
+                    consistent with the server. Be sure to download a backup of your data before
+                    doing so.
                   </div>
                 </div>
               </div>
@@ -60,6 +54,6 @@ export class SyncResolutionMenu extends PureComponent<Props> {
           </div>
         </div>
       </div>
-    );
+    )
   }
 }
diff --git a/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagHint.tsx b/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagHint.tsx
new file mode 100644
index 000000000..bf7926b51
--- /dev/null
+++ b/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagHint.tsx
@@ -0,0 +1,72 @@
+import { AppState } from '@/UIModels/AppState'
+import { observer } from 'mobx-react-lite'
+import { useRef, useEffect } from 'preact/hooks'
+import { Icon } from '@/Components/Icon'
+
+type Props = {
+  appState: AppState
+  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
+}
+
+export const AutocompleteTagHint = observer(({ appState, closeOnBlur }: Props) => {
+  const { autocompleteTagHintFocused } = appState.noteTags
+
+  const hintRef = useRef<HTMLButtonElement>(null)
+
+  const { autocompleteSearchQuery, autocompleteTagResults } = appState.noteTags
+
+  const onTagHintClick = async () => {
+    await appState.noteTags.createAndAddNewTag()
+    appState.noteTags.setAutocompleteInputFocused(true)
+  }
+
+  const onFocus = () => {
+    appState.noteTags.setAutocompleteTagHintFocused(true)
+  }
+
+  const onBlur = (event: FocusEvent) => {
+    closeOnBlur(event)
+    appState.noteTags.setAutocompleteTagHintFocused(false)
+  }
+
+  const onKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'ArrowUp') {
+      if (autocompleteTagResults.length > 0) {
+        const lastTagResult = autocompleteTagResults[autocompleteTagResults.length - 1]
+        appState.noteTags.setFocusedTagResultUuid(lastTagResult.uuid)
+      } else {
+        appState.noteTags.setAutocompleteInputFocused(true)
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (autocompleteTagHintFocused) {
+      hintRef.current?.focus()
+    }
+  }, [appState.noteTags, autocompleteTagHintFocused])
+
+  return (
+    <>
+      {autocompleteTagResults.length > 0 && <div className="h-1px my-2 bg-border"></div>}
+      <button
+        ref={hintRef}
+        type="button"
+        className="sn-dropdown-item focus:bg-info focus:color-info-contrast hover:color-foreground"
+        onClick={onTagHintClick}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        onKeyDown={onKeyDown}
+        tabIndex={-1}
+      >
+        <span>Create new tag:</span>
+        <span className="bg-contrast rounded text-xs color-text py-1 pl-1 pr-2 flex items-center ml-2">
+          <Icon type="hashtag" className="sn-icon--small color-neutral mr-1" />
+          <span className="max-w-40 whitespace-nowrap overflow-hidden overflow-ellipsis">
+            {autocompleteSearchQuery}
+          </span>
+        </span>
+      </button>
+    </>
+  )
+})
diff --git a/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagInput.tsx b/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagInput.tsx
new file mode 100644
index 000000000..aa7db862b
--- /dev/null
+++ b/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagInput.tsx
@@ -0,0 +1,146 @@
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { Disclosure, DisclosurePanel } from '@reach/disclosure'
+import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
+import { AppState } from '@/UIModels/AppState'
+import { AutocompleteTagResult } from './AutocompleteTagResult'
+import { AutocompleteTagHint } from './AutocompleteTagHint'
+import { observer } from 'mobx-react-lite'
+import { SNTag } from '@standardnotes/snjs'
+
+type Props = {
+  appState: AppState
+}
+
+export const AutocompleteTagInput = observer(({ appState }: Props) => {
+  const {
+    autocompleteInputFocused,
+    autocompleteSearchQuery,
+    autocompleteTagHintVisible,
+    autocompleteTagResults,
+    tags,
+    tagsContainerMaxWidth,
+  } = appState.noteTags
+
+  const [dropdownVisible, setDropdownVisible] = useState(false)
+  const [dropdownMaxHeight, setDropdownMaxHeight] = useState<number | 'auto'>('auto')
+
+  const containerRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const [closeOnBlur] = useCloseOnBlur(containerRef, (visible: boolean) => {
+    setDropdownVisible(visible)
+    appState.noteTags.clearAutocompleteSearch()
+  })
+
+  const showDropdown = () => {
+    const { clientHeight } = document.documentElement
+    const inputRect = inputRef.current?.getBoundingClientRect()
+    if (inputRect) {
+      setDropdownMaxHeight(clientHeight - inputRect.bottom - 32 * 2)
+      setDropdownVisible(true)
+    }
+  }
+
+  const onSearchQueryChange = (event: Event) => {
+    const query = (event.target as HTMLInputElement).value
+
+    if (query === '') {
+      appState.noteTags.clearAutocompleteSearch()
+    } else {
+      appState.noteTags.setAutocompleteSearchQuery(query)
+      appState.noteTags.searchActiveNoteAutocompleteTags()
+    }
+  }
+
+  const onFormSubmit = async (event: Event) => {
+    event.preventDefault()
+    if (autocompleteSearchQuery !== '') {
+      await appState.noteTags.createAndAddNewTag()
+    }
+  }
+
+  const onKeyDown = (event: KeyboardEvent) => {
+    switch (event.key) {
+      case 'Backspace':
+      case 'ArrowLeft':
+        if (autocompleteSearchQuery === '' && tags.length > 0) {
+          appState.noteTags.setFocusedTagUuid(tags[tags.length - 1].uuid)
+        }
+        break
+      case 'ArrowDown':
+        event.preventDefault()
+        if (autocompleteTagResults.length > 0) {
+          appState.noteTags.setFocusedTagResultUuid(autocompleteTagResults[0].uuid)
+        } else if (autocompleteTagHintVisible) {
+          appState.noteTags.setAutocompleteTagHintFocused(true)
+        }
+        break
+      default:
+        return
+    }
+  }
+
+  const onFocus = () => {
+    showDropdown()
+    appState.noteTags.setAutocompleteInputFocused(true)
+  }
+
+  const onBlur = (event: FocusEvent) => {
+    closeOnBlur(event)
+    appState.noteTags.setAutocompleteInputFocused(false)
+  }
+
+  useEffect(() => {
+    if (autocompleteInputFocused) {
+      inputRef.current?.focus()
+    }
+  }, [appState.noteTags, autocompleteInputFocused])
+
+  return (
+    <div ref={containerRef}>
+      <form onSubmit={onFormSubmit} className={`${tags.length > 0 ? 'mt-2' : ''}`}>
+        <Disclosure open={dropdownVisible} onChange={showDropdown}>
+          <input
+            ref={inputRef}
+            className={`${tags.length > 0 ? 'w-80' : 'w-70 mr-10'} bg-transparent text-xs
+            color-text no-border h-7 focus:outline-none focus:shadow-none focus:border-bottom`}
+            value={autocompleteSearchQuery}
+            onChange={onSearchQueryChange}
+            type="text"
+            placeholder="Add tag"
+            onBlur={onBlur}
+            onFocus={onFocus}
+            onKeyDown={onKeyDown}
+            tabIndex={tags.length === 0 ? 0 : -1}
+          />
+          {dropdownVisible && (autocompleteTagResults.length > 0 || autocompleteTagHintVisible) && (
+            <DisclosurePanel
+              className={`${
+                tags.length > 0 ? 'w-80' : 'w-70 mr-10'
+              } sn-dropdown flex flex-col py-2 absolute`}
+              style={{
+                maxHeight: dropdownMaxHeight,
+                maxWidth: tagsContainerMaxWidth,
+              }}
+              onBlur={closeOnBlur}
+            >
+              <div className="overflow-y-auto">
+                {autocompleteTagResults.map((tagResult: SNTag) => (
+                  <AutocompleteTagResult
+                    key={tagResult.uuid}
+                    appState={appState}
+                    tagResult={tagResult}
+                    closeOnBlur={closeOnBlur}
+                  />
+                ))}
+              </div>
+              {autocompleteTagHintVisible && (
+                <AutocompleteTagHint appState={appState} closeOnBlur={closeOnBlur} />
+              )}
+            </DisclosurePanel>
+          )}
+        </Disclosure>
+      </form>
+    </div>
+  )
+})
diff --git a/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagResult.tsx b/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagResult.tsx
new file mode 100644
index 000000000..ba552071d
--- /dev/null
+++ b/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagResult.tsx
@@ -0,0 +1,104 @@
+import { AppState } from '@/UIModels/AppState'
+import { splitQueryInString } from '@/Utils/StringUtils'
+import { SNTag } from '@standardnotes/snjs'
+import { observer } from 'mobx-react-lite'
+import { useEffect, useRef } from 'preact/hooks'
+import { Icon } from '@/Components/Icon'
+
+type Props = {
+  appState: AppState
+  tagResult: SNTag
+  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
+}
+
+export const AutocompleteTagResult = observer(({ appState, tagResult, closeOnBlur }: Props) => {
+  const {
+    autocompleteSearchQuery,
+    autocompleteTagHintVisible,
+    autocompleteTagResults,
+    focusedTagResultUuid,
+  } = appState.noteTags
+
+  const tagResultRef = useRef<HTMLButtonElement>(null)
+
+  const title = tagResult.title
+  const prefixTitle = appState.noteTags.getPrefixTitle(tagResult)
+
+  const onTagOptionClick = async (tag: SNTag) => {
+    await appState.noteTags.addTagToActiveNote(tag)
+    appState.noteTags.clearAutocompleteSearch()
+    appState.noteTags.setAutocompleteInputFocused(true)
+  }
+
+  const onKeyDown = (event: KeyboardEvent) => {
+    const tagResultIndex = appState.noteTags.getTagIndex(tagResult, autocompleteTagResults)
+    switch (event.key) {
+      case 'ArrowUp':
+        event.preventDefault()
+        if (tagResultIndex === 0) {
+          appState.noteTags.setAutocompleteInputFocused(true)
+        } else {
+          appState.noteTags.focusPreviousTagResult(tagResult)
+        }
+        break
+      case 'ArrowDown':
+        event.preventDefault()
+        if (tagResultIndex === autocompleteTagResults.length - 1 && autocompleteTagHintVisible) {
+          appState.noteTags.setAutocompleteTagHintFocused(true)
+        } else {
+          appState.noteTags.focusNextTagResult(tagResult)
+        }
+        break
+      default:
+        return
+    }
+  }
+
+  const onFocus = () => {
+    appState.noteTags.setFocusedTagResultUuid(tagResult.uuid)
+  }
+
+  const onBlur = (event: FocusEvent) => {
+    closeOnBlur(event)
+    appState.noteTags.setFocusedTagResultUuid(undefined)
+  }
+
+  useEffect(() => {
+    if (focusedTagResultUuid === tagResult.uuid) {
+      tagResultRef.current?.focus()
+      appState.noteTags.setFocusedTagResultUuid(undefined)
+    }
+  }, [appState.noteTags, focusedTagResultUuid, tagResult])
+
+  return (
+    <button
+      ref={tagResultRef}
+      type="button"
+      className="sn-dropdown-item focus:bg-info focus:color-info-contrast"
+      onClick={() => onTagOptionClick(tagResult)}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      onKeyDown={onKeyDown}
+      tabIndex={-1}
+    >
+      <Icon type="hashtag" className="color-neutral mr-2 min-h-5 min-w-5" />
+      <span className="whitespace-nowrap overflow-hidden overflow-ellipsis">
+        {prefixTitle && <span className="grey-2">{prefixTitle}</span>}
+        {autocompleteSearchQuery === ''
+          ? title
+          : splitQueryInString(title, autocompleteSearchQuery).map((substring, index) => (
+              <span
+                key={index}
+                className={`${
+                  substring.toLowerCase() === autocompleteSearchQuery.toLowerCase()
+                    ? 'font-bold whitespace-pre-wrap'
+                    : 'whitespace-pre-wrap '
+                }`}
+              >
+                {substring}
+              </span>
+            ))}
+      </span>
+    </button>
+  )
+})
diff --git a/app/assets/javascripts/Components/Tags/DragNDrop.ts b/app/assets/javascripts/Components/Tags/DragNDrop.ts
new file mode 100644
index 000000000..575f018ee
--- /dev/null
+++ b/app/assets/javascripts/Components/Tags/DragNDrop.ts
@@ -0,0 +1,9 @@
+export enum ItemTypes {
+  TAG = 'TAG',
+}
+
+export type DropItemTag = { uuid: string }
+
+export type DropItem = DropItemTag
+
+export type DropProps = { isOver: boolean; canDrop: boolean }
diff --git a/app/assets/javascripts/Components/Tags/RootTagDropZone.tsx b/app/assets/javascripts/Components/Tags/RootTagDropZone.tsx
new file mode 100644
index 000000000..4f2e00696
--- /dev/null
+++ b/app/assets/javascripts/Components/Tags/RootTagDropZone.tsx
@@ -0,0 +1,46 @@
+import { Icon } from '@/Components/Icon'
+import { usePremiumModal } from '@/Hooks/usePremiumModal'
+import { FeaturesState } from '@/UIModels/AppState/FeaturesState'
+import { TagsState } from '@/UIModels/AppState/TagsState'
+import { observer } from 'mobx-react-lite'
+import { useDrop } from 'react-dnd'
+import { DropItem, DropProps, ItemTypes } from './DragNDrop'
+
+type Props = {
+  tagsState: TagsState
+  featuresState: FeaturesState
+}
+
+export const RootTagDropZone: React.FC<Props> = observer(({ tagsState }) => {
+  const premiumModal = usePremiumModal()
+
+  const [{ isOver, canDrop }, dropRef] = useDrop<DropItem, void, DropProps>(
+    () => ({
+      accept: ItemTypes.TAG,
+      canDrop: (item) => {
+        return tagsState.hasParent(item.uuid)
+      },
+      drop: (item) => {
+        tagsState.assignParent(item.uuid, undefined).catch(console.error)
+      },
+      collect: (monitor) => ({
+        isOver: !!monitor.isOver(),
+        canDrop: !!monitor.canDrop(),
+      }),
+    }),
+    [tagsState, premiumModal],
+  )
+
+  return (
+    <div
+      ref={dropRef}
+      className={`root-drop ${canDrop ? 'active' : ''} ${isOver ? 'is-drag-over' : ''}`}
+    >
+      <Icon className="color-neutral" type="link-off" />
+      <p className="content">
+        Move the tag here to <br />
+        remove it from its folder.
+      </p>
+    </div>
+  )
+})
diff --git a/app/assets/javascripts/Components/Tags/SmartViewsList.tsx b/app/assets/javascripts/Components/Tags/SmartViewsList.tsx
new file mode 100644
index 000000000..27ac287d4
--- /dev/null
+++ b/app/assets/javascripts/Components/Tags/SmartViewsList.tsx
@@ -0,0 +1,27 @@
+import { AppState } from '@/UIModels/AppState'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { SmartViewsListItem } from './SmartViewsListItem'
+
+type Props = {
+  appState: AppState
+}
+
+export const SmartViewsList: FunctionComponent<Props> = observer(({ appState }) => {
+  const allViews = appState.tags.smartViews
+
+  return (
+    <>
+      {allViews.map((view) => {
+        return (
+          <SmartViewsListItem
+            key={view.uuid}
+            view={view}
+            tagsState={appState.tags}
+            features={appState.features}
+          />
+        )
+      })}
+    </>
+  )
+})
diff --git a/app/assets/javascripts/Components/Tags/SmartViewsListItem.tsx b/app/assets/javascripts/Components/Tags/SmartViewsListItem.tsx
new file mode 100644
index 000000000..86f768a6c
--- /dev/null
+++ b/app/assets/javascripts/Components/Tags/SmartViewsListItem.tsx
@@ -0,0 +1,153 @@
+import { Icon } from '@/Components/Icon'
+import { FeaturesState } from '@/UIModels/AppState/FeaturesState'
+import { TagsState } from '@/UIModels/AppState/TagsState'
+import '@reach/tooltip/styles.css'
+import { SmartView, SystemViewId, IconType, isSystemView } from '@standardnotes/snjs'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
+
+type Props = {
+  view: SmartView
+  tagsState: TagsState
+  features: FeaturesState
+}
+
+const PADDING_BASE_PX = 14
+const PADDING_PER_LEVEL_PX = 21
+
+const smartViewIconType = (view: SmartView): IconType => {
+  if (view.uuid === SystemViewId.AllNotes) {
+    return 'notes'
+  }
+  if (view.uuid === SystemViewId.ArchivedNotes) {
+    return 'archive'
+  }
+  if (view.uuid === SystemViewId.TrashedNotes) {
+    return 'trash'
+  }
+  if (view.uuid === SystemViewId.UntaggedNotes) {
+    return 'hashtag-off'
+  }
+
+  return 'hashtag'
+}
+
+export const SmartViewsListItem: FunctionComponent<Props> = observer(({ view, tagsState }) => {
+  const [title, setTitle] = useState(view.title || '')
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const level = 0
+  const isSelected = tagsState.selected === view
+  const isEditing = tagsState.editingTag === view
+
+  useEffect(() => {
+    setTitle(view.title || '')
+  }, [setTitle, view])
+
+  const selectCurrentTag = useCallback(() => {
+    tagsState.selected = view
+  }, [tagsState, view])
+
+  const onBlur = useCallback(() => {
+    tagsState.save(view, title).catch(console.error)
+    setTitle(view.title)
+  }, [tagsState, view, title, setTitle])
+
+  const onInput = useCallback(
+    (e: Event) => {
+      const value = (e.target as HTMLInputElement).value
+      setTitle(value)
+    },
+    [setTitle],
+  )
+
+  const onKeyUp = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.code === 'Enter') {
+        inputRef.current?.blur()
+        e.preventDefault()
+      }
+    },
+    [inputRef],
+  )
+
+  useEffect(() => {
+    if (isEditing) {
+      inputRef.current?.focus()
+    }
+  }, [inputRef, isEditing])
+
+  const onClickRename = useCallback(() => {
+    tagsState.editingTag = view
+  }, [tagsState, view])
+
+  const onClickSave = useCallback(() => {
+    inputRef.current?.blur()
+  }, [inputRef])
+
+  const onClickDelete = useCallback(() => {
+    tagsState.remove(view, true).catch(console.error)
+  }, [tagsState, view])
+
+  const isFaded = false
+  const iconType = smartViewIconType(view)
+
+  return (
+    <>
+      <div
+        className={`tag ${isSelected ? 'selected' : ''} ${isFaded ? 'faded' : ''}`}
+        onClick={selectCurrentTag}
+        style={{
+          paddingLeft: `${level * PADDING_PER_LEVEL_PX + PADDING_BASE_PX}px`,
+        }}
+      >
+        <div className="tag-info">
+          <div className={'tag-icon mr-1'}>
+            <Icon type={iconType} className={`${isSelected ? 'color-info' : 'color-neutral'}`} />
+          </div>
+          <input
+            className={`title ${isEditing ? 'editing' : ''}`}
+            disabled={!isEditing}
+            id={`react-tag-${view.uuid}`}
+            onBlur={onBlur}
+            onInput={onInput}
+            value={title}
+            onKeyUp={onKeyUp}
+            spellCheck={false}
+            ref={inputRef}
+          />
+          <div className="count">
+            {view.uuid === SystemViewId.AllNotes && tagsState.allNotesCount}
+          </div>
+        </div>
+
+        {!isSystemView(view) && (
+          <div className="meta">
+            {view.conflictOf && (
+              <div className="danger small-text font-bold">Conflicted Copy {view.conflictOf}</div>
+            )}
+
+            {isSelected && (
+              <div className="menu">
+                {!isEditing && (
+                  <a className="item" onClick={onClickRename}>
+                    Rename
+                  </a>
+                )}
+                {isEditing && (
+                  <a className="item" onClick={onClickSave}>
+                    Save
+                  </a>
+                )}
+                <a className="item" onClick={onClickDelete}>
+                  Delete
+                </a>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </>
+  )
+})
diff --git a/app/assets/javascripts/Components/Tags/SmartViewsSection.tsx b/app/assets/javascripts/Components/Tags/SmartViewsSection.tsx
new file mode 100644
index 000000000..872056e0f
--- /dev/null
+++ b/app/assets/javascripts/Components/Tags/SmartViewsSection.tsx
@@ -0,0 +1,16 @@
+import { AppState } from '@/UIModels/AppState'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { SmartViewsList } from './SmartViewsList'
+
+type Props = {
+  appState: AppState
+}
+
+export const SmartViewsSection: FunctionComponent<Props> = observer(({ appState }) => {
+  return (
+    <section>
+      <SmartViewsList appState={appState} />
+    </section>
+  )
+})
diff --git a/app/assets/javascripts/Components/Tags/TagContextMenu.tsx b/app/assets/javascripts/Components/Tags/TagContextMenu.tsx
new file mode 100644
index 000000000..460fcb807
--- /dev/null
+++ b/app/assets/javascripts/Components/Tags/TagContextMenu.tsx
@@ -0,0 +1,110 @@
+import { AppState } from '@/UIModels/AppState'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { useCallback, useEffect, useRef } from 'preact/hooks'
+import { Icon } from '@/Components/Icon'
+import { Menu } from '@/Components/Menu/Menu'
+import { MenuItem, MenuItemType } from '@/Components/Menu/MenuItem'
+import { usePremiumModal } from '@/Hooks/usePremiumModal'
+import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
+import { SNTag } from '@standardnotes/snjs'
+
+type Props = {
+  appState: AppState
+}
+
+export const TagsContextMenu: FunctionComponent<Props> = observer(({ appState }) => {
+  const premiumModal = usePremiumModal()
+  const selectedTag = appState.tags.selected
+
+  if (!selectedTag || !(selectedTag instanceof SNTag)) {
+    return null
+  }
+
+  const { contextMenuOpen, contextMenuPosition, contextMenuMaxHeight } = appState.tags
+
+  const contextMenuRef = useRef<HTMLDivElement>(null)
+  const [closeOnBlur] = useCloseOnBlur(contextMenuRef, (open: boolean) =>
+    appState.tags.setContextMenuOpen(open),
+  )
+
+  const reloadContextMenuLayout = useCallback(() => {
+    appState.tags.reloadContextMenuLayout()
+  }, [appState.tags])
+
+  useEffect(() => {
+    window.addEventListener('resize', reloadContextMenuLayout)
+    return () => {
+      window.removeEventListener('resize', reloadContextMenuLayout)
+    }
+  }, [reloadContextMenuLayout])
+
+  const onClickAddSubtag = useCallback(() => {
+    if (!appState.features.hasFolders) {
+      premiumModal.activate('Folders')
+      return
+    }
+
+    appState.tags.setContextMenuOpen(false)
+    appState.tags.setAddingSubtagTo(selectedTag)
+  }, [appState.features.hasFolders, appState.tags, premiumModal, selectedTag])
+
+  const onClickRename = useCallback(() => {
+    appState.tags.setContextMenuOpen(false)
+    appState.tags.editingTag = selectedTag
+  }, [appState.tags, selectedTag])
+
+  const onClickDelete = useCallback(() => {
+    appState.tags.remove(selectedTag, true).catch(console.error)
+  }, [appState.tags, selectedTag])
+
+  return contextMenuOpen ? (
+    <div
+      ref={contextMenuRef}
+      className="sn-dropdown min-w-60 max-h-120 max-w-xs flex flex-col py-2 overflow-y-auto fixed"
+      style={{
+        ...contextMenuPosition,
+        maxHeight: contextMenuMaxHeight,
+      }}
+    >
+      <Menu
+        a11yLabel="Tag context menu"
+        isOpen={contextMenuOpen}
+        closeMenu={() => {
+          appState.tags.setContextMenuOpen(false)
+        }}
+      >
+        <MenuItem
+          type={MenuItemType.IconButton}
+          onBlur={closeOnBlur}
+          className={'py-1.5 justify-between'}
+          onClick={onClickAddSubtag}
+        >
+          <div className="flex items-center">
+            <Icon type="add" className="color-neutral mr-2" />
+            Add subtag
+          </div>
+          {!appState.features.hasFolders && <Icon type="premium-feature" />}
+        </MenuItem>
+        <MenuItem
+          type={MenuItemType.IconButton}
+          onBlur={closeOnBlur}
+          className={'py-1.5'}
+          onClick={onClickRename}
+        >
+          <Icon type="pencil-filled" className="color-neutral mr-2" />
+          Rename
+        </MenuItem>
+        <MenuItem
+          type={MenuItemType.IconButton}
+          onBlur={closeOnBlur}
+          className={'py-1.5'}
+          onClick={onClickDelete}
+        >
+          <Icon type="trash" className="mr-2 color-danger" />
+          <span className="color-danger">Delete</span>
+        </MenuItem>
+      </Menu>
+    </div>
+  ) : null
+})
diff --git a/app/assets/javascripts/components/Tags/TagsList.tsx b/app/assets/javascripts/Components/Tags/TagsList.tsx
similarity index 51%
rename from app/assets/javascripts/components/Tags/TagsList.tsx
rename to app/assets/javascripts/Components/Tags/TagsList.tsx
index f5a0d3b8a..a570c4804 100644
--- a/app/assets/javascripts/components/Tags/TagsList.tsx
+++ b/app/assets/javascripts/Components/Tags/TagsList.tsx
@@ -1,37 +1,37 @@
-import { AppState } from '@/ui_models/app_state';
-import { isMobile } from '@/utils';
-import { SNTag } from '@standardnotes/snjs';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-import { TouchBackend } from 'react-dnd-touch-backend';
-import { RootTagDropZone } from './RootTagDropZone';
-import { TagsListItem } from './TagsListItem';
+import { AppState } from '@/UIModels/AppState'
+import { isMobile } from '@/Utils'
+import { SNTag } from '@standardnotes/snjs'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { DndProvider } from 'react-dnd'
+import { HTML5Backend } from 'react-dnd-html5-backend'
+import { TouchBackend } from 'react-dnd-touch-backend'
+import { RootTagDropZone } from './RootTagDropZone'
+import { TagsListItem } from './TagsListItem'
 
 type Props = {
-  appState: AppState;
-};
+  appState: AppState
+}
 
 export const TagsList: FunctionComponent<Props> = observer(({ appState }) => {
-  const tagsState = appState.tags;
-  const allTags = tagsState.allLocalRootTags;
+  const tagsState = appState.tags
+  const allTags = tagsState.allLocalRootTags
 
-  const backend = isMobile({ tablet: true }) ? TouchBackend : HTML5Backend;
+  const backend = isMobile({ tablet: true }) ? TouchBackend : HTML5Backend
 
   const openTagContextMenu = (posX: number, posY: number) => {
     appState.tags.setContextMenuClickLocation({
       x: posX,
       y: posY,
-    });
-    appState.tags.reloadContextMenuLayout();
-    appState.tags.setContextMenuOpen(true);
-  };
+    })
+    appState.tags.reloadContextMenuLayout()
+    appState.tags.setContextMenuOpen(true)
+  }
 
   const onContextMenu = (tag: SNTag, posX: number, posY: number) => {
-    appState.tags.selected = tag;
-    openTagContextMenu(posX, posY);
-  };
+    appState.tags.selected = tag
+    openTagContextMenu(posX, posY)
+  }
 
   return (
     <DndProvider backend={backend}>
@@ -51,14 +51,11 @@ export const TagsList: FunctionComponent<Props> = observer(({ appState }) => {
                 features={appState.features}
                 onContextMenu={onContextMenu}
               />
-            );
+            )
           })}
-          <RootTagDropZone
-            tagsState={appState.tags}
-            featuresState={appState.features}
-          />
+          <RootTagDropZone tagsState={appState.tags} featuresState={appState.features} />
         </>
       )}
     </DndProvider>
-  );
-});
+  )
+})
diff --git a/app/assets/javascripts/components/Tags/TagsListItem.tsx b/app/assets/javascripts/Components/Tags/TagsListItem.tsx
similarity index 55%
rename from app/assets/javascripts/components/Tags/TagsListItem.tsx
rename to app/assets/javascripts/Components/Tags/TagsListItem.tsx
index 93b44e5d1..1e116d342 100644
--- a/app/assets/javascripts/components/Tags/TagsListItem.tsx
+++ b/app/assets/javascripts/Components/Tags/TagsListItem.tsx
@@ -1,190 +1,184 @@
-import { Icon } from '@/components/Icon';
-import { usePremiumModal } from '@/components/Premium';
-import { KeyboardKey } from '@/services/ioService';
-import {
-  FeaturesState,
-  TAG_FOLDERS_FEATURE_NAME,
-} from '@/ui_models/app_state/features_state';
-import { TagsState } from '@/ui_models/app_state/tags_state';
-import '@reach/tooltip/styles.css';
-import { SNTag } from '@standardnotes/snjs';
-import { computed } from 'mobx';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent, JSX } from 'preact';
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
-import { useDrag, useDrop } from 'react-dnd';
-import { DropItem, DropProps, ItemTypes } from './dragndrop';
+import { Icon } from '@/Components/Icon'
+import { usePremiumModal } from '@/Hooks/usePremiumModal'
+import { KeyboardKey } from '@/Services/IOService'
+import { FeaturesState, TAG_FOLDERS_FEATURE_NAME } from '@/UIModels/AppState/FeaturesState'
+import { TagsState } from '@/UIModels/AppState/TagsState'
+import '@reach/tooltip/styles.css'
+import { SNTag } from '@standardnotes/snjs'
+import { computed } from 'mobx'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent, JSX } from 'preact'
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
+import { useDrag, useDrop } from 'react-dnd'
+import { DropItem, DropProps, ItemTypes } from './DragNDrop'
 
 type Props = {
-  tag: SNTag;
-  tagsState: TagsState;
-  features: FeaturesState;
-  level: number;
-  onContextMenu: (tag: SNTag, posX: number, posY: number) => void;
-};
+  tag: SNTag
+  tagsState: TagsState
+  features: FeaturesState
+  level: number
+  onContextMenu: (tag: SNTag, posX: number, posY: number) => void
+}
 
-const PADDING_BASE_PX = 14;
-const PADDING_PER_LEVEL_PX = 21;
+const PADDING_BASE_PX = 14
+const PADDING_PER_LEVEL_PX = 21
 
 export const TagsListItem: FunctionComponent<Props> = observer(
   ({ tag, features, tagsState, level, onContextMenu }) => {
-    const [title, setTitle] = useState(tag.title || '');
-    const [subtagTitle, setSubtagTitle] = useState('');
-    const inputRef = useRef<HTMLInputElement>(null);
-    const subtagInputRef = useRef<HTMLInputElement>(null);
-    const menuButtonRef = useRef<HTMLButtonElement>(null);
+    const [title, setTitle] = useState(tag.title || '')
+    const [subtagTitle, setSubtagTitle] = useState('')
+    const inputRef = useRef<HTMLInputElement>(null)
+    const subtagInputRef = useRef<HTMLInputElement>(null)
+    const menuButtonRef = useRef<HTMLButtonElement>(null)
 
-    const isSelected = tagsState.selected === tag;
-    const isEditing = tagsState.editingTag === tag;
-    const isAddingSubtag = tagsState.addingSubtagTo === tag;
-    const noteCounts = computed(() => tagsState.getNotesCount(tag));
+    const isSelected = tagsState.selected === tag
+    const isEditing = tagsState.editingTag === tag
+    const isAddingSubtag = tagsState.addingSubtagTo === tag
+    const noteCounts = computed(() => tagsState.getNotesCount(tag))
 
-    const childrenTags = computed(() => tagsState.getChildren(tag)).get();
-    const hasChildren = childrenTags.length > 0;
+    const childrenTags = computed(() => tagsState.getChildren(tag)).get()
+    const hasChildren = childrenTags.length > 0
 
-    const hasFolders = features.hasFolders;
-    const hasAtLeastOneFolder = tagsState.hasAtLeastOneFolder;
+    const hasFolders = features.hasFolders
+    const hasAtLeastOneFolder = tagsState.hasAtLeastOneFolder
 
-    const premiumModal = usePremiumModal();
+    const premiumModal = usePremiumModal()
 
-    const [showChildren, setShowChildren] = useState(tag.expanded);
-    const [hadChildren, setHadChildren] = useState(hasChildren);
+    const [showChildren, setShowChildren] = useState(tag.expanded)
+    const [hadChildren, setHadChildren] = useState(hasChildren)
 
     useEffect(() => {
       if (!hadChildren && hasChildren) {
-        setShowChildren(true);
+        setShowChildren(true)
       }
-      setHadChildren(hasChildren);
-    }, [hadChildren, hasChildren]);
+      setHadChildren(hasChildren)
+    }, [hadChildren, hasChildren])
 
     useEffect(() => {
-      setTitle(tag.title || '');
-    }, [setTitle, tag]);
+      setTitle(tag.title || '')
+    }, [setTitle, tag])
 
     const toggleChildren = useCallback(
       (e: MouseEvent) => {
-        e.stopPropagation();
+        e.stopPropagation()
         setShowChildren((x) => {
-          tagsState.setExpanded(tag, !x);
-          return !x;
-        });
+          tagsState.setExpanded(tag, !x)
+          return !x
+        })
       },
-      [setShowChildren, tag, tagsState]
-    );
+      [setShowChildren, tag, tagsState],
+    )
 
     const selectCurrentTag = useCallback(() => {
-      tagsState.selected = tag;
-    }, [tagsState, tag]);
+      tagsState.selected = tag
+    }, [tagsState, tag])
 
     const onBlur = useCallback(() => {
-      tagsState.save(tag, title);
-      setTitle(tag.title);
-    }, [tagsState, tag, title, setTitle]);
+      tagsState.save(tag, title).catch(console.error)
+      setTitle(tag.title)
+    }, [tagsState, tag, title, setTitle])
 
     const onInput = useCallback(
       (e: JSX.TargetedEvent<HTMLInputElement>) => {
-        const value = (e.target as HTMLInputElement).value;
-        setTitle(value);
+        const value = (e.target as HTMLInputElement).value
+        setTitle(value)
       },
-      [setTitle]
-    );
+      [setTitle],
+    )
 
     const onKeyDown = useCallback(
       (e: KeyboardEvent) => {
         if (e.key === KeyboardKey.Enter) {
-          inputRef.current?.blur();
-          e.preventDefault();
+          inputRef.current?.blur()
+          e.preventDefault()
         }
       },
-      [inputRef]
-    );
+      [inputRef],
+    )
 
     useEffect(() => {
       if (isEditing) {
-        inputRef.current?.focus();
+        inputRef.current?.focus()
       }
-    }, [inputRef, isEditing]);
+    }, [inputRef, isEditing])
 
-    const onSubtagInput = useCallback(
-      (e: JSX.TargetedEvent<HTMLInputElement>) => {
-        const value = (e.target as HTMLInputElement).value;
-        setSubtagTitle(value);
-      },
-      []
-    );
+    const onSubtagInput = useCallback((e: JSX.TargetedEvent<HTMLInputElement>) => {
+      const value = (e.target as HTMLInputElement).value
+      setSubtagTitle(value)
+    }, [])
 
     const onSubtagInputBlur = useCallback(() => {
-      tagsState.createSubtagAndAssignParent(tag, subtagTitle);
-      setSubtagTitle('');
-    }, [subtagTitle, tag, tagsState]);
+      tagsState.createSubtagAndAssignParent(tag, subtagTitle).catch(console.error)
+      setSubtagTitle('')
+    }, [subtagTitle, tag, tagsState])
 
     const onSubtagKeyDown = useCallback(
       (e: KeyboardEvent) => {
         if (e.key === KeyboardKey.Enter) {
-          e.preventDefault();
-          subtagInputRef.current?.blur();
+          e.preventDefault()
+          subtagInputRef.current?.blur()
         }
       },
-      [subtagInputRef]
-    );
+      [subtagInputRef],
+    )
 
     useEffect(() => {
       if (isAddingSubtag) {
-        subtagInputRef.current?.focus();
+        subtagInputRef.current?.focus()
       }
-    }, [subtagInputRef, isAddingSubtag]);
+    }, [subtagInputRef, isAddingSubtag])
 
     const [, dragRef] = useDrag(
       () => ({
         type: ItemTypes.TAG,
         item: { uuid: tag.uuid },
         canDrag: () => {
-          return true;
+          return true
         },
         collect: (monitor) => ({
           isDragging: !!monitor.isDragging(),
         }),
       }),
-      [tag]
-    );
+      [tag],
+    )
 
     const [{ isOver, canDrop }, dropRef] = useDrop<DropItem, void, DropProps>(
       () => ({
         accept: ItemTypes.TAG,
         canDrop: (item) => {
-          return tagsState.isValidTagParent(tag, item as SNTag);
+          return tagsState.isValidTagParent(tag, item as SNTag)
         },
         drop: (item) => {
           if (!hasFolders) {
-            premiumModal.activate(TAG_FOLDERS_FEATURE_NAME);
-            return;
+            premiumModal.activate(TAG_FOLDERS_FEATURE_NAME)
+            return
           }
-          tagsState.assignParent(item.uuid, tag.uuid);
+          tagsState.assignParent(item.uuid, tag.uuid).catch(console.error)
         },
         collect: (monitor) => ({
           isOver: !!monitor.isOver(),
           canDrop: !!monitor.canDrop(),
         }),
       }),
-      [tag, tagsState, hasFolders, premiumModal]
-    );
+      [tag, tagsState, hasFolders, premiumModal],
+    )
 
-    const readyToDrop = isOver && canDrop;
+    const readyToDrop = isOver && canDrop
 
     const toggleContextMenu = () => {
       if (!menuButtonRef.current) {
-        return;
+        return
       }
 
-      const contextMenuOpen = tagsState.contextMenuOpen;
-      const menuButtonRect = menuButtonRef.current?.getBoundingClientRect();
+      const contextMenuOpen = tagsState.contextMenuOpen
+      const menuButtonRect = menuButtonRef.current?.getBoundingClientRect()
 
       if (contextMenuOpen) {
-        tagsState.setContextMenuOpen(false);
+        tagsState.setContextMenuOpen(false)
       } else {
-        onContextMenu(tag, menuButtonRect.right, menuButtonRect.top);
+        onContextMenu(tag, menuButtonRect.right, menuButtonRect.top)
       }
-    };
+    }
 
     return (
       <>
@@ -198,33 +192,28 @@ export const TagsListItem: FunctionComponent<Props> = observer(
             paddingLeft: `${level * PADDING_PER_LEVEL_PX + PADDING_BASE_PX}px`,
           }}
           onContextMenu={(e: MouseEvent) => {
-            e.preventDefault();
-            onContextMenu(tag, e.clientX, e.clientY);
+            e.preventDefault()
+            onContextMenu(tag, e.clientX, e.clientY)
           }}
         >
           <div className="tag-info" title={title} ref={dropRef}>
             {hasAtLeastOneFolder && (
               <div className="tag-fold-container">
                 <button
-                  className={`tag-fold focus:shadow-inner ${
-                    showChildren ? 'opened' : 'closed'
-                  } ${!hasChildren ? 'invisible' : ''}`}
+                  className={`tag-fold focus:shadow-inner ${showChildren ? 'opened' : 'closed'} ${
+                    !hasChildren ? 'invisible' : ''
+                  }`}
                   onClick={hasChildren ? toggleChildren : undefined}
                 >
                   <Icon
-                    className={`color-neutral`}
-                    type={
-                      showChildren ? 'menu-arrow-down-alt' : 'menu-arrow-right'
-                    }
+                    className={'color-neutral'}
+                    type={showChildren ? 'menu-arrow-down-alt' : 'menu-arrow-right'}
                   />
                 </button>
               </div>
             )}
-            <div className={`tag-icon draggable mr-1`} ref={dragRef}>
-              <Icon
-                type="hashtag"
-                className={`${isSelected ? 'color-info' : 'color-neutral'}`}
-              />
+            <div className={'tag-icon draggable mr-1'} ref={dragRef}>
+              <Icon type="hashtag" className={`${isSelected ? 'color-info' : 'color-neutral'}`} />
             </div>
             <input
               className={`title ${isEditing ? 'editing' : ''}`}
@@ -253,9 +242,7 @@ export const TagsListItem: FunctionComponent<Props> = observer(
 
           <div className={`meta ${hasAtLeastOneFolder ? 'with-folders' : ''}`}>
             {tag.conflictOf && (
-              <div className="danger small-text font-bold">
-                Conflicted Copy {tag.conflictOf}
-              </div>
+              <div className="danger small-text font-bold">Conflicted Copy {tag.conflictOf}</div>
             )}
           </div>
         </button>
@@ -263,9 +250,7 @@ export const TagsListItem: FunctionComponent<Props> = observer(
           <div
             className="tag overflow-hidden"
             style={{
-              paddingLeft: `${
-                (level + 1) * PADDING_PER_LEVEL_PX + PADDING_BASE_PX
-              }px`,
+              paddingLeft: `${(level + 1) * PADDING_PER_LEVEL_PX + PADDING_BASE_PX}px`,
             }}
           >
             <div className="tag-info">
@@ -297,11 +282,11 @@ export const TagsListItem: FunctionComponent<Props> = observer(
                   features={features}
                   onContextMenu={onContextMenu}
                 />
-              );
+              )
             })}
           </>
         )}
       </>
-    );
-  }
-);
+    )
+  },
+)
diff --git a/app/assets/javascripts/Components/Tags/TagsSection.tsx b/app/assets/javascripts/Components/Tags/TagsSection.tsx
new file mode 100644
index 000000000..7b10f7343
--- /dev/null
+++ b/app/assets/javascripts/Components/Tags/TagsSection.tsx
@@ -0,0 +1,66 @@
+import { TagsList } from '@/Components/Tags/TagsList'
+import { AppState } from '@/UIModels/AppState'
+import { ApplicationEvent } from '@/__mocks__/@standardnotes/snjs'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { useCallback, useEffect, useState } from 'preact/hooks'
+import { TagsSectionAddButton } from './TagsSectionAddButton'
+import { TagsSectionTitle } from './TagsSectionTitle'
+
+type Props = {
+  appState: AppState
+}
+
+export const TagsSection: FunctionComponent<Props> = observer(({ appState }) => {
+  const [hasMigration, setHasMigration] = useState<boolean>(false)
+
+  const checkIfMigrationNeeded = useCallback(() => {
+    setHasMigration(appState.application.items.hasTagsNeedingFoldersMigration())
+  }, [appState.application])
+
+  useEffect(() => {
+    appState.application.addEventObserver(async (event) => {
+      const events = [ApplicationEvent.CompletedInitialSync, ApplicationEvent.SignedIn]
+      if (events.includes(event)) {
+        checkIfMigrationNeeded()
+      }
+    })
+  }, [appState.application, checkIfMigrationNeeded])
+
+  const runMigration = useCallback(async () => {
+    if (
+      await appState.application.alertService.confirm(
+        '<i>Introducing native, built-in nested tags without requiring the legacy Folders extension.</i><br/></br> ' +
+          " To get started, we'll need to migrate any tags containing a dot character to the new system.<br/></br> " +
+          ' This migration will convert any tags with dots appearing in their name into a natural' +
+          ' hierarchy that is compatible with the new nested tags feature.' +
+          ' Running this migration will remove any "." characters appearing in tag names.',
+        'New: Folders to Nested Tags',
+        'Run Migration',
+      )
+    ) {
+      appState.application.mutator
+        .migrateTagsToFolders()
+        .then(() => {
+          checkIfMigrationNeeded()
+        })
+        .catch(console.error)
+    }
+  }, [appState.application, checkIfMigrationNeeded])
+
+  return (
+    <section>
+      <div className="section-title-bar">
+        <div className="section-title-bar-header">
+          <TagsSectionTitle
+            features={appState.features}
+            hasMigration={hasMigration}
+            onClickMigration={runMigration}
+          />
+          <TagsSectionAddButton tags={appState.tags} features={appState.features} />
+        </div>
+      </div>
+      <TagsList appState={appState} />
+    </section>
+  )
+})
diff --git a/app/assets/javascripts/Components/Tags/TagsSectionAddButton.tsx b/app/assets/javascripts/Components/Tags/TagsSectionAddButton.tsx
new file mode 100644
index 000000000..eb70685d7
--- /dev/null
+++ b/app/assets/javascripts/Components/Tags/TagsSectionAddButton.tsx
@@ -0,0 +1,22 @@
+import { IconButton } from '@/Components/Button/IconButton'
+import { FeaturesState } from '@/UIModels/AppState/FeaturesState'
+import { TagsState } from '@/UIModels/AppState/TagsState'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+
+type Props = {
+  tags: TagsState
+  features: FeaturesState
+}
+
+export const TagsSectionAddButton: FunctionComponent<Props> = observer(({ tags }) => {
+  return (
+    <IconButton
+      focusable={true}
+      icon="add"
+      title="Create a new tag"
+      className="color-neutral"
+      onClick={() => tags.createNewTemplate()}
+    />
+  )
+})
diff --git a/app/assets/javascripts/Components/Tags/TagsSectionTitle.tsx b/app/assets/javascripts/Components/Tags/TagsSectionTitle.tsx
new file mode 100644
index 000000000..1250fc115
--- /dev/null
+++ b/app/assets/javascripts/Components/Tags/TagsSectionTitle.tsx
@@ -0,0 +1,55 @@
+import { usePremiumModal } from '@/Hooks/usePremiumModal'
+import {
+  FeaturesState,
+  TAG_FOLDERS_FEATURE_NAME,
+  TAG_FOLDERS_FEATURE_TOOLTIP,
+} from '@/UIModels/AppState/FeaturesState'
+import { Tooltip } from '@reach/tooltip'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { useCallback } from 'preact/hooks'
+
+type Props = {
+  features: FeaturesState
+  hasMigration: boolean
+  onClickMigration: () => void
+}
+
+export const TagsSectionTitle: FunctionComponent<Props> = observer(
+  ({ features, hasMigration, onClickMigration }) => {
+    const entitledToFolders = features.hasFolders
+    const modal = usePremiumModal()
+
+    const showPremiumAlert = useCallback(() => {
+      modal.activate(TAG_FOLDERS_FEATURE_NAME)
+    }, [modal])
+
+    if (entitledToFolders) {
+      return (
+        <>
+          <div className="sk-h3 title">
+            <span className="sk-bold">Folders</span>
+            {hasMigration && (
+              <label className="ml-1 sk-bold color-info cursor-pointer" onClick={onClickMigration}>
+                Migration Available
+              </label>
+            )}
+          </div>
+        </>
+      )
+    }
+
+    return (
+      <>
+        <div className="sk-h3 title">
+          <span className="sk-bold">Tags</span>
+          <Tooltip label={TAG_FOLDERS_FEATURE_TOOLTIP}>
+            <label className="ml-1 sk-bold color-grey-2 cursor-pointer" onClick={showPremiumAlert}>
+              Folders
+            </label>
+          </Tooltip>
+        </div>
+      </>
+    )
+  },
+)
diff --git a/app/assets/javascripts/Components/TitleBar/Title.tsx b/app/assets/javascripts/Components/TitleBar/Title.tsx
new file mode 100644
index 000000000..178766141
--- /dev/null
+++ b/app/assets/javascripts/Components/TitleBar/Title.tsx
@@ -0,0 +1,5 @@
+import { FunctionComponent } from 'preact'
+
+export const Title: FunctionComponent<{ className?: string }> = ({ children, className }) => {
+  return <div className={`sn-title ${className ?? ''}`}>{children}</div>
+}
diff --git a/app/assets/javascripts/Components/TitleBar/TitleBar.tsx b/app/assets/javascripts/Components/TitleBar/TitleBar.tsx
new file mode 100644
index 000000000..725513eab
--- /dev/null
+++ b/app/assets/javascripts/Components/TitleBar/TitleBar.tsx
@@ -0,0 +1,5 @@
+import { FunctionComponent } from 'preact'
+
+export const TitleBar: FunctionComponent<{ className?: string }> = ({ children, className }) => (
+  <div className={`sn-titlebar ${className ?? ''}`}>{children}</div>
+)
diff --git a/app/assets/javascripts/Constants.ts b/app/assets/javascripts/Constants.ts
new file mode 100644
index 000000000..e0975d24c
--- /dev/null
+++ b/app/assets/javascripts/Constants.ts
@@ -0,0 +1,18 @@
+export const PANEL_NAME_NOTES = 'notes'
+export const PANEL_NAME_NAVIGATION = 'navigation'
+
+export const EMAIL_REGEX =
+  /^([a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?)$/
+
+export const MENU_MARGIN_FROM_APP_BORDER = 5
+export const MAX_MENU_SIZE_MULTIPLIER = 30
+
+export const FOCUSABLE_BUT_NOT_TABBABLE = -1
+export const NOTES_LIST_SCROLL_THRESHOLD = 200
+
+export const MILLISECONDS_IN_A_DAY = 1000 * 60 * 60 * 24
+export const DAYS_IN_A_WEEK = 7
+export const DAYS_IN_A_YEAR = 365
+
+export const BYTES_IN_ONE_KILOBYTE = 1_000
+export const BYTES_IN_ONE_MEGABYTE = 1_000_000
diff --git a/app/assets/javascripts/Crypto.ts b/app/assets/javascripts/Crypto.ts
new file mode 100644
index 000000000..b587efb31
--- /dev/null
+++ b/app/assets/javascripts/Crypto.ts
@@ -0,0 +1,3 @@
+import { SNWebCrypto } from '@standardnotes/sncrypto-web'
+
+export const WebCrypto = new SNWebCrypto()
diff --git a/app/assets/javascripts/database.ts b/app/assets/javascripts/Database.ts
similarity index 50%
rename from app/assets/javascripts/database.ts
rename to app/assets/javascripts/Database.ts
index ef897968c..17239b8bf 100644
--- a/app/assets/javascripts/database.ts
+++ b/app/assets/javascripts/Database.ts
@@ -1,39 +1,36 @@
-import { SNAlertService } from '@standardnotes/snjs';
+import { SNAlertService } from '@standardnotes/snjs'
 
-const STORE_NAME = 'items';
-const READ_WRITE = 'readwrite';
+const STORE_NAME = 'items'
+const READ_WRITE = 'readwrite'
 
 const OUT_OF_SPACE =
   'Unable to save changes locally because your device is out of space. ' +
   'Please free up some disk space and try again, otherwise, your data may end ' +
-  'up in an inconsistent state.';
+  'up in an inconsistent state.'
 
 const DB_DELETION_BLOCKED =
   'Your browser is blocking Standard Notes from deleting the local database. ' +
   'Make sure there are no other open windows of this app and try again. ' +
-  'If the issue persists, please manually delete app data to sign out.';
+  'If the issue persists, please manually delete app data to sign out.'
 
-const QUOTE_EXCEEDED_ERROR = 'QuotaExceededError';
+const QUOTE_EXCEEDED_ERROR = 'QuotaExceededError'
 
 export class Database {
-  private locked = true;
-  private db?: IDBDatabase;
+  private locked = true
+  private db?: IDBDatabase
 
-  constructor(
-    public databaseName: string,
-    private alertService: SNAlertService
-  ) {}
+  constructor(public databaseName: string, private alertService: SNAlertService) {}
 
   public deinit() {
-    (this.alertService as any) = undefined;
-    this.db = undefined;
+    ;(this.alertService as any) = undefined
+    this.db = undefined
   }
 
   /**
    * Relinquishes the lock and allows db operations to proceed
    */
   public unlock() {
-    this.locked = false;
+    this.locked = false
   }
 
   /**
@@ -42,169 +39,161 @@ export class Database {
    * as part of the open process. This can happen on new application sessions, or if the
    * browser deleted the database without the user being aware.
    */
-  public async openDatabase(
-    onNewDatabase?: () => void
-  ): Promise<IDBDatabase | undefined> {
+  public async openDatabase(onNewDatabase?: () => void): Promise<IDBDatabase | undefined> {
     if (this.locked) {
-      throw Error('Attempting to open locked database');
+      throw Error('Attempting to open locked database')
     }
     if (this.db) {
-      return this.db;
+      return this.db
     }
-    const request = window.indexedDB.open(this.databaseName, 1);
+    const request = window.indexedDB.open(this.databaseName, 1)
     return new Promise((resolve, reject) => {
       request.onerror = (event) => {
-        const target = event!.target! as any;
+        const target = event.target as any
         if (target.errorCode) {
-          this.showAlert('Offline database issue: ' + target.errorCode);
+          this.showAlert('Offline database issue: ' + target.errorCode)
         } else {
-          this.displayOfflineAlert();
+          this.displayOfflineAlert()
         }
-        reject(new Error('Unable to open db'));
-      };
-      request.onblocked = (event) => {
-        reject(Error('IndexedDB open request blocked'));
-      };
+        reject(new Error('Unable to open db'))
+      }
+      request.onblocked = (_event) => {
+        reject(Error('IndexedDB open request blocked'))
+      }
       request.onsuccess = (event) => {
-        const target = event!.target! as IDBOpenDBRequest;
-        const db = target.result;
+        const target = event.target as IDBOpenDBRequest
+        const db = target.result
         db.onversionchange = () => {
-          db.close();
-        };
+          db.close()
+        }
         db.onerror = (errorEvent) => {
-          const target = errorEvent?.target as any;
-          throw Error('Database error: ' + target.errorCode);
-        };
-        this.db = db;
-        resolve(db);
-      };
+          const target = errorEvent?.target as any
+          throw Error('Database error: ' + target.errorCode)
+        }
+        this.db = db
+        resolve(db)
+      }
       request.onupgradeneeded = (event) => {
-        const target = event!.target! as IDBOpenDBRequest;
-        const db = target.result;
+        const target = event.target as IDBOpenDBRequest
+        const db = target.result
         db.onversionchange = () => {
-          db.close();
-        };
+          db.close()
+        }
         /* Create an objectStore for this database */
         const objectStore = db.createObjectStore(STORE_NAME, {
           keyPath: 'uuid',
-        });
-        objectStore.createIndex('uuid', 'uuid', { unique: true });
+        })
+        objectStore.createIndex('uuid', 'uuid', { unique: true })
         objectStore.transaction.oncomplete = () => {
           /* Ready to store values in the newly created objectStore. */
           if (db.version === 1 && onNewDatabase) {
-            onNewDatabase && onNewDatabase();
+            onNewDatabase && onNewDatabase()
           }
-        };
-      };
-    });
+        }
+      }
+    })
   }
 
   public async getAllPayloads(): Promise<any[]> {
-    const db = (await this.openDatabase())!;
+    const db = (await this.openDatabase()) as IDBDatabase
     return new Promise((resolve) => {
-      const objectStore = db.transaction(STORE_NAME).objectStore(STORE_NAME);
-      const payloads: any = [];
-      const cursorRequest = objectStore.openCursor();
+      const objectStore = db.transaction(STORE_NAME).objectStore(STORE_NAME)
+      const payloads: any = []
+      const cursorRequest = objectStore.openCursor()
       cursorRequest.onsuccess = (event) => {
-        const target = event!.target! as any;
-        const cursor = target.result;
+        const target = event.target as any
+        const cursor = target.result
         if (cursor) {
-          payloads.push(cursor.value);
-          cursor.continue();
+          payloads.push(cursor.value)
+          cursor.continue()
         } else {
-          resolve(payloads);
+          resolve(payloads)
         }
-      };
-    });
+      }
+    })
   }
 
   public async savePayload(payload: any): Promise<void> {
-    return this.savePayloads([payload]);
+    return this.savePayloads([payload])
   }
 
   public async savePayloads(payloads: any[]): Promise<void> {
     if (payloads.length === 0) {
-      return;
+      return
     }
-    const db = (await this.openDatabase())!;
-    const transaction = db.transaction(STORE_NAME, READ_WRITE);
+    const db = (await this.openDatabase()) as IDBDatabase
+    const transaction = db.transaction(STORE_NAME, READ_WRITE)
     return new Promise((resolve, reject) => {
       // eslint-disable-next-line @typescript-eslint/no-empty-function
-      transaction.oncomplete = () => {};
+      transaction.oncomplete = () => {}
       transaction.onerror = (event) => {
-        const target = event!.target! as any;
-        this.showGenericError(target.error);
-      };
+        const target = event.target as any
+        this.showGenericError(target.error)
+      }
       transaction.onabort = (event) => {
-        const target = event!.target! as any;
-        const error = target.error;
+        const target = event.target as any
+        const error = target.error
         if (error.name === QUOTE_EXCEEDED_ERROR) {
-          this.showAlert(OUT_OF_SPACE);
+          this.showAlert(OUT_OF_SPACE)
         } else {
-          this.showGenericError(error);
+          this.showGenericError(error)
         }
-        reject(error);
-      };
-      const objectStore = transaction.objectStore(STORE_NAME);
-      this.putItems(objectStore, payloads).then(resolve);
-    });
+        reject(error)
+      }
+      const objectStore = transaction.objectStore(STORE_NAME)
+      this.putItems(objectStore, payloads).then(resolve).catch(console.error)
+    })
   }
 
-  private async putItems(
-    objectStore: IDBObjectStore,
-    items: any[]
-  ): Promise<void> {
+  private async putItems(objectStore: IDBObjectStore, items: any[]): Promise<void> {
     await Promise.all(
       items.map((item) => {
         return new Promise((resolve) => {
-          const request = objectStore.put(item);
-          request.onerror = resolve;
-          request.onsuccess = resolve;
-        });
-      })
-    );
+          const request = objectStore.put(item)
+          request.onerror = resolve
+          request.onsuccess = resolve
+        })
+      }),
+    )
   }
 
   public async deletePayload(uuid: string): Promise<void> {
-    const db = (await this.openDatabase())!;
+    const db = (await this.openDatabase()) as IDBDatabase
     return new Promise((resolve, reject) => {
-      const request = db
-        .transaction(STORE_NAME, READ_WRITE)
-        .objectStore(STORE_NAME)
-        .delete(uuid);
+      const request = db.transaction(STORE_NAME, READ_WRITE).objectStore(STORE_NAME).delete(uuid)
       request.onsuccess = () => {
-        resolve();
-      };
-      request.onerror = reject;
-    });
+        resolve()
+      }
+      request.onerror = reject
+    })
   }
 
   public async clearAllPayloads(): Promise<void> {
-    const deleteRequest = window.indexedDB.deleteDatabase(this.databaseName);
+    const deleteRequest = window.indexedDB.deleteDatabase(this.databaseName)
     return new Promise((resolve, reject) => {
       deleteRequest.onerror = () => {
-        reject(Error('Error deleting database.'));
-      };
+        reject(Error('Error deleting database.'))
+      }
       deleteRequest.onsuccess = () => {
-        this.db = undefined;
-        resolve();
-      };
-      deleteRequest.onblocked = (event) => {
-        this.showAlert(DB_DELETION_BLOCKED);
-        reject(Error('Delete request blocked'));
-      };
-    });
+        this.db = undefined
+        resolve()
+      }
+      deleteRequest.onblocked = (_event) => {
+        this.showAlert(DB_DELETION_BLOCKED)
+        reject(Error('Delete request blocked'))
+      }
+    })
   }
 
   private showAlert(message: string) {
-    this.alertService!.alert(message);
+    this.alertService.alert(message).catch(console.error)
   }
 
   private showGenericError(error: { code: number; name: string }) {
     const message =
-      `Unable to save changes locally due to an unknown system issue. ` +
-      `Issue Code: ${error.code} Issue Name: ${error.name}.`;
-    this.showAlert(message);
+      'Unable to save changes locally due to an unknown system issue. ' +
+      `Issue Code: ${error.code} Issue Name: ${error.name}.`
+    this.showAlert(message)
   }
 
   private displayOfflineAlert() {
@@ -213,7 +202,7 @@ export class Database {
       "\n\n1. You're in a private window in your browser. We can't save your data without " +
       'access to the local database. Please use a non-private window.' +
       '\n\n2. You have two windows of the app open at the same time. ' +
-      'Please close any other app instances and reload the page.';
-    this.alertService!.alert(message);
+      'Please close any other app instances and reload the page.'
+    this.alertService.alert(message).catch(console.error)
   }
 }
diff --git a/app/assets/javascripts/element_ids.ts b/app/assets/javascripts/ElementIDs.ts
similarity index 98%
rename from app/assets/javascripts/element_ids.ts
rename to app/assets/javascripts/ElementIDs.ts
index 6ba2bacca..5170b995b 100644
--- a/app/assets/javascripts/element_ids.ts
+++ b/app/assets/javascripts/ElementIDs.ts
@@ -3,4 +3,4 @@ export const ElementIds = {
   NoteTitleEditor: 'note-title-editor',
   EditorContent: 'editor-content',
   EditorColumn: 'editor-column',
-};
+}
diff --git a/app/assets/javascripts/enums.ts b/app/assets/javascripts/Enums.ts
similarity index 100%
rename from app/assets/javascripts/enums.ts
rename to app/assets/javascripts/Enums.ts
diff --git a/app/assets/javascripts/Hooks/useBeforeUnload.tsx b/app/assets/javascripts/Hooks/useBeforeUnload.tsx
new file mode 100644
index 000000000..1fcc2391e
--- /dev/null
+++ b/app/assets/javascripts/Hooks/useBeforeUnload.tsx
@@ -0,0 +1,11 @@
+import { useEffect } from '@node_modules/preact/hooks'
+
+export const useBeforeUnload = (): void => {
+  useEffect(() => {
+    window.onbeforeunload = () => true
+
+    return () => {
+      window.onbeforeunload = null
+    }
+  }, [])
+}
diff --git a/app/assets/javascripts/Hooks/useCloseOnBlur.ts b/app/assets/javascripts/Hooks/useCloseOnBlur.ts
new file mode 100644
index 000000000..0396859c5
--- /dev/null
+++ b/app/assets/javascripts/Hooks/useCloseOnBlur.ts
@@ -0,0 +1,24 @@
+import { StateUpdater, useCallback, useState } from 'preact/hooks'
+
+/**
+ * @returns a callback that will close a dropdown if none of its children has
+ * focus. Use the returned function as the onBlur callback of children that need to be
+ * monitored.
+ */
+export function useCloseOnBlur(
+  container: { current?: HTMLDivElement | null },
+  setOpen: (open: boolean) => void,
+): [(event: { relatedTarget: EventTarget | null }) => void, StateUpdater<boolean>] {
+  const [locked, setLocked] = useState(false)
+  return [
+    useCallback(
+      function onBlur(event: { relatedTarget: EventTarget | null }) {
+        if (!locked && !container.current?.contains(event.relatedTarget as Node)) {
+          setOpen(false)
+        }
+      },
+      [container, setOpen, locked],
+    ),
+    setLocked,
+  ]
+}
diff --git a/app/assets/javascripts/Hooks/useCloseOnClickOutside.ts b/app/assets/javascripts/Hooks/useCloseOnClickOutside.ts
new file mode 100644
index 000000000..6129c8fa2
--- /dev/null
+++ b/app/assets/javascripts/Hooks/useCloseOnClickOutside.ts
@@ -0,0 +1,29 @@
+import { useCallback, useEffect } from 'preact/hooks'
+
+export function useCloseOnClickOutside(
+  container: { current: HTMLDivElement | null },
+  callback: () => void,
+): void {
+  const closeOnClickOutside = useCallback(
+    (event: { target: EventTarget | null }) => {
+      if (!container.current) {
+        return
+      }
+      const isDescendantOfContainer = container.current.contains(event.target as Node)
+      const isDescendantOfDialog = (event.target as HTMLElement).closest('[role="dialog"]')
+      if (!isDescendantOfContainer && !isDescendantOfDialog) {
+        callback()
+      }
+    },
+    [container, callback],
+  )
+
+  useEffect(() => {
+    document.addEventListener('click', closeOnClickOutside, { capture: true })
+    return () => {
+      document.removeEventListener('click', closeOnClickOutside, {
+        capture: true,
+      })
+    }
+  }, [closeOnClickOutside])
+}
diff --git a/app/assets/javascripts/Hooks/useListKeyboardNavigation.ts b/app/assets/javascripts/Hooks/useListKeyboardNavigation.ts
new file mode 100644
index 000000000..648dccbc7
--- /dev/null
+++ b/app/assets/javascripts/Hooks/useListKeyboardNavigation.ts
@@ -0,0 +1,96 @@
+import { KeyboardKey } from '@/Services/IOService'
+import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants'
+import { useCallback, useState, useEffect, Ref } from 'preact/hooks'
+
+export const useListKeyboardNavigation = (container: Ref<HTMLElement | null>, initialFocus = 0) => {
+  const [listItems, setListItems] = useState<HTMLButtonElement[]>()
+  const [focusedItemIndex, setFocusedItemIndex] = useState<number>(initialFocus)
+
+  const focusItemWithIndex = useCallback(
+    (index: number, items?: HTMLButtonElement[]) => {
+      setFocusedItemIndex(index)
+      if (items && items.length > 0) {
+        items[index]?.focus()
+      } else {
+        listItems?.[index]?.focus()
+      }
+    },
+    [listItems],
+  )
+
+  useEffect(() => {
+    if (container.current) {
+      container.current.tabIndex = FOCUSABLE_BUT_NOT_TABBABLE
+      setListItems(Array.from(container.current.querySelectorAll('button')))
+    }
+  }, [container])
+
+  const keyDownHandler = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === KeyboardKey.Up || e.key === KeyboardKey.Down) {
+        e.preventDefault()
+      } else {
+        return
+      }
+
+      if (!listItems?.length) {
+        setListItems(
+          Array.from(
+            container.current?.querySelectorAll('button') as NodeListOf<HTMLButtonElement>,
+          ),
+        )
+      }
+
+      if (listItems) {
+        if (e.key === KeyboardKey.Up) {
+          let previousIndex = focusedItemIndex - 1
+          if (previousIndex < 0) {
+            previousIndex = listItems.length - 1
+          }
+          focusItemWithIndex(previousIndex)
+        }
+
+        if (e.key === KeyboardKey.Down) {
+          let nextIndex = focusedItemIndex + 1
+          if (nextIndex > listItems.length - 1) {
+            nextIndex = 0
+          }
+          focusItemWithIndex(nextIndex)
+        }
+      }
+    },
+    [container, focusItemWithIndex, focusedItemIndex, listItems],
+  )
+
+  const FIRST_ITEM_FOCUS_TIMEOUT = 20
+
+  const containerFocusHandler = useCallback(() => {
+    let temporaryItems = listItems && listItems?.length > 0 ? listItems : []
+    if (!temporaryItems.length) {
+      temporaryItems = Array.from(
+        container.current?.querySelectorAll('button') as NodeListOf<HTMLButtonElement>,
+      )
+      setListItems(temporaryItems)
+    }
+    if (temporaryItems.length > 0) {
+      const selectedItemIndex = Array.from(temporaryItems).findIndex(
+        (item) => item.dataset.selected,
+      )
+      const indexToFocus = selectedItemIndex > -1 ? selectedItemIndex : initialFocus
+      setTimeout(() => {
+        focusItemWithIndex(indexToFocus, temporaryItems)
+      }, FIRST_ITEM_FOCUS_TIMEOUT)
+    }
+  }, [container, focusItemWithIndex, initialFocus, listItems])
+
+  useEffect(() => {
+    const containerElement = container.current
+    containerElement?.addEventListener('focus', containerFocusHandler)
+    containerElement?.addEventListener('keydown', keyDownHandler)
+
+    return () => {
+      containerElement?.removeEventListener('focus', containerFocusHandler)
+      containerElement?.removeEventListener('keydown', keyDownHandler)
+    }
+  }, [container, containerFocusHandler, keyDownHandler])
+}
diff --git a/app/assets/javascripts/Hooks/usePremiumModal.tsx b/app/assets/javascripts/Hooks/usePremiumModal.tsx
new file mode 100644
index 000000000..cdd067c8d
--- /dev/null
+++ b/app/assets/javascripts/Hooks/usePremiumModal.tsx
@@ -0,0 +1,61 @@
+import { WebApplication } from '@/UIModels/Application'
+import { AppState } from '@/UIModels/AppState'
+import { observer } from 'mobx-react-lite'
+import { FunctionalComponent } from 'preact'
+import { useContext } from 'preact/hooks'
+import { createContext } from 'react'
+import { PremiumFeaturesModal } from '@/Components/PremiumFeaturesModal'
+
+type PremiumModalContextData = {
+  activate: (featureName: string) => void
+}
+
+const PremiumModalContext = createContext<PremiumModalContextData | null>(null)
+
+const PremiumModalProvider_ = PremiumModalContext.Provider
+
+export const usePremiumModal = (): PremiumModalContextData => {
+  const value = useContext(PremiumModalContext)
+
+  if (!value) {
+    throw new Error('invalid PremiumModal context')
+  }
+
+  return value
+}
+
+interface Props {
+  application: WebApplication
+  appState: AppState
+}
+
+export const PremiumModalProvider: FunctionalComponent<Props> = observer(
+  ({ application, appState, children }) => {
+    const featureName = appState.features._premiumAlertFeatureName
+    const activate = appState.features.showPremiumAlert
+    const close = appState.features.closePremiumAlert
+
+    const showModal = !!featureName
+
+    const hasSubscription = Boolean(
+      appState.subscription.userSubscription &&
+        !appState.subscription.isUserSubscriptionExpired &&
+        !appState.subscription.isUserSubscriptionCanceled,
+    )
+
+    return (
+      <>
+        {showModal && (
+          <PremiumFeaturesModal
+            application={application}
+            featureName={featureName}
+            hasSubscription={hasSubscription}
+            onClose={close}
+            showModal={!!featureName}
+          />
+        )}
+        <PremiumModalProvider_ value={{ activate }}>{children}</PremiumModalProvider_>
+      </>
+    )
+  },
+)
diff --git a/app/assets/javascripts/services/alertService.ts b/app/assets/javascripts/Services/AlertService.ts
similarity index 71%
rename from app/assets/javascripts/services/alertService.ts
rename to app/assets/javascripts/Services/AlertService.ts
index b67bef491..f35b9d797 100644
--- a/app/assets/javascripts/services/alertService.ts
+++ b/app/assets/javascripts/Services/AlertService.ts
@@ -1,10 +1,6 @@
 /* eslint-disable prefer-promise-reject-errors */
-import {
-  SNAlertService,
-  ButtonType,
-  sanitizeHtmlString,
-} from '@standardnotes/snjs';
-import { SKAlert } from '@standardnotes/stylekit';
+import { SNAlertService, ButtonType, sanitizeHtmlString } from '@standardnotes/snjs'
+import { SKAlert } from '@standardnotes/stylekit'
 
 /** @returns a promise resolving to true if the user confirmed, false if they canceled */
 export function confirmDialog({
@@ -14,11 +10,11 @@ export function confirmDialog({
   cancelButtonText = 'Cancel',
   confirmButtonStyle = 'info',
 }: {
-  text: string;
-  title?: string;
-  confirmButtonText?: string;
-  cancelButtonText?: string;
-  confirmButtonStyle?: 'danger' | 'info';
+  text: string
+  title?: string
+  confirmButtonText?: string
+  cancelButtonText?: string
+  confirmButtonStyle?: 'danger' | 'info'
 }) {
   return new Promise<boolean>((resolve) => {
     const alert = new SKAlert({
@@ -29,20 +25,20 @@ export function confirmDialog({
           text: cancelButtonText,
           style: 'neutral',
           action() {
-            resolve(false);
+            resolve(false)
           },
         },
         {
           text: confirmButtonText,
           style: confirmButtonStyle,
           action() {
-            resolve(true);
+            resolve(true)
           },
         },
       ],
-    });
-    alert.present();
-  });
+    })
+    alert.present()
+  })
 }
 
 export function alertDialog({
@@ -50,9 +46,9 @@ export function alertDialog({
   text,
   closeButtonText = 'OK',
 }: {
-  title?: string;
-  text: string;
-  closeButtonText?: string;
+  title?: string
+  text: string
+  closeButtonText?: string
 }) {
   return new Promise<void>((resolve) => {
     const alert = new SKAlert({
@@ -65,9 +61,9 @@ export function alertDialog({
           action: resolve,
         },
       ],
-    });
-    alert.present();
-  });
+    })
+    alert.present()
+  })
 }
 
 export class AlertService implements SNAlertService {
@@ -75,7 +71,7 @@ export class AlertService implements SNAlertService {
    * @deprecated use the standalone `alertDialog` function instead
    */
   alert(text: string, title?: string, closeButtonText?: string) {
-    return alertDialog({ text, title, closeButtonText });
+    return alertDialog({ text, title, closeButtonText })
   }
 
   confirm(
@@ -83,16 +79,15 @@ export class AlertService implements SNAlertService {
     title?: string,
     confirmButtonText?: string,
     confirmButtonType?: ButtonType,
-    cancelButtonText?: string
+    cancelButtonText?: string,
   ): Promise<boolean> {
     return confirmDialog({
       text,
       title,
       confirmButtonText,
       cancelButtonText,
-      confirmButtonStyle:
-        confirmButtonType === ButtonType.Danger ? 'danger' : 'info',
-    });
+      confirmButtonStyle: confirmButtonType === ButtonType.Danger ? 'danger' : 'info',
+    })
   }
 
   blockingDialog(text: string, title?: string) {
@@ -100,10 +95,10 @@ export class AlertService implements SNAlertService {
       title: title && sanitizeHtmlString(title),
       text: sanitizeHtmlString(text),
       buttons: [],
-    });
-    alert.present();
+    })
+    alert.present()
     return () => {
-      alert.dismiss();
-    };
+      alert.dismiss()
+    }
   }
 }
diff --git a/app/assets/javascripts/Services/ArchiveManager.ts b/app/assets/javascripts/Services/ArchiveManager.ts
new file mode 100644
index 000000000..1f363bdf7
--- /dev/null
+++ b/app/assets/javascripts/Services/ArchiveManager.ts
@@ -0,0 +1,159 @@
+import { WebApplication } from '@/UIModels/Application'
+import { parseFileName } from '@standardnotes/filepicker'
+import {
+  ContentType,
+  BackupFile,
+  BackupFileDecryptedContextualPayload,
+  NoteContent,
+} from '@standardnotes/snjs'
+
+function sanitizeFileName(name: string): string {
+  return name.trim().replace(/[.\\/:"?*|<>]/g, '_')
+}
+
+function zippableFileName(name: string, suffix = '', format = 'txt'): string {
+  const sanitizedName = sanitizeFileName(name)
+  const nameEnd = suffix + '.' + format
+  const maxFileNameLength = 100
+  return sanitizedName.slice(0, maxFileNameLength - nameEnd.length) + nameEnd
+}
+
+type ZippableData = {
+  filename: string
+  content: Blob
+}[]
+
+type ObjectURL = string
+
+export class ArchiveManager {
+  private readonly application: WebApplication
+  private textFile?: string
+
+  constructor(application: WebApplication) {
+    this.application = application
+  }
+
+  public async getMimeType(ext: string) {
+    return (await import('@zip.js/zip.js')).getMimeType(ext)
+  }
+
+  public async downloadBackup(encrypted: boolean): Promise<void> {
+    const data = encrypted
+      ? await this.application.createEncryptedBackupFile(true)
+      : await this.application.createDecryptedBackupFile()
+
+    if (!data) {
+      return
+    }
+
+    const blobData = new Blob([JSON.stringify(data, null, 2)], {
+      type: 'text/json',
+    })
+
+    if (encrypted) {
+      this.downloadData(
+        blobData,
+        `Standard Notes Encrypted Backup and Import File - ${this.formattedDate()}.txt`,
+      )
+    } else {
+      this.downloadZippedDecryptedItems(data).catch(console.error)
+    }
+  }
+
+  private formattedDate() {
+    const string = `${new Date()}`
+    // Match up to the first parenthesis, i.e do not include '(Central Standard Time)'
+    const matches = string.match(/^(.*?) \(/)
+    if (matches && matches.length >= 2) {
+      return matches[1]
+    }
+    return string
+  }
+
+  private async downloadZippedDecryptedItems(data: BackupFile) {
+    const zip = await import('@zip.js/zip.js')
+    const zipWriter = new zip.ZipWriter(new zip.BlobWriter('application/zip'))
+    const items = data.items
+
+    const blob = new Blob([JSON.stringify(data, null, 2)], {
+      type: 'text/plain',
+    })
+
+    const fileName = zippableFileName('Standard Notes Backup and Import File')
+    await zipWriter.add(fileName, new zip.BlobReader(blob))
+
+    let index = 0
+    const nextFile = async () => {
+      const item = items[index]
+      let name, contents
+
+      if (item.content_type === ContentType.Note) {
+        const note = item as BackupFileDecryptedContextualPayload<NoteContent>
+        name = note.content.title
+        contents = note.content.text
+      } else {
+        name = item.content_type
+        contents = JSON.stringify(item.content, null, 2)
+      }
+
+      if (!name) {
+        name = ''
+      }
+
+      const blob = new Blob([contents], { type: 'text/plain' })
+      const fileName =
+        `Items/${sanitizeFileName(item.content_type)}/` +
+        zippableFileName(name, `-${item.uuid.split('-')[0]}`)
+      await zipWriter.add(fileName, new zip.BlobReader(blob))
+
+      index++
+      if (index < items.length) {
+        await nextFile()
+      } else {
+        const finalBlob = await zipWriter.close()
+        this.downloadData(finalBlob, `Standard Notes Backup - ${this.formattedDate()}.zip`)
+      }
+    }
+
+    await nextFile()
+  }
+
+  async zipData(data: ZippableData): Promise<Blob> {
+    const zip = await import('@zip.js/zip.js')
+    const writer = new zip.ZipWriter(new zip.BlobWriter('application/zip'))
+
+    for (let i = 0; i < data.length; i++) {
+      const { name, ext } = parseFileName(data[i].filename)
+      await writer.add(zippableFileName(name, '', ext), new zip.BlobReader(data[i].content))
+    }
+
+    const zipFileAsBlob = await writer.close()
+
+    return zipFileAsBlob
+  }
+
+  async downloadDataAsZip(data: ZippableData) {
+    const zipFileAsBlob = await this.zipData(data)
+    this.downloadData(zipFileAsBlob, `Standard Notes Export - ${this.formattedDate()}.zip`)
+  }
+
+  private hrefForData(data: Blob) {
+    // If we are replacing a previously generated file we need to
+    // manually revoke the object URL to avoid memory leaks.
+    if (this.textFile) {
+      window.URL.revokeObjectURL(this.textFile)
+    }
+    this.textFile = window.URL.createObjectURL(data)
+    // returns a URL you can use as a href
+    return this.textFile
+  }
+
+  downloadData(data: Blob | ObjectURL, fileName: string) {
+    const link = document.createElement('a')
+    link.setAttribute('download', fileName)
+    link.href = typeof data === 'string' ? data : this.hrefForData(data)
+    document.body.appendChild(link)
+    link.click()
+    link.remove()
+  }
+}
diff --git a/app/assets/javascripts/services/autolock_service.ts b/app/assets/javascripts/Services/AutolockService.ts
similarity index 59%
rename from app/assets/javascripts/services/autolock_service.ts
rename to app/assets/javascripts/Services/AutolockService.ts
index 7b59fd07e..d201e82cc 100644
--- a/app/assets/javascripts/services/autolock_service.ts
+++ b/app/assets/javascripts/Services/AutolockService.ts
@@ -1,7 +1,7 @@
-import { ApplicationService } from '@standardnotes/snjs';
+import { ApplicationService } from '@standardnotes/snjs'
 
-const MILLISECONDS_PER_SECOND = 1000;
-const POLL_INTERVAL = 50;
+const MILLISECONDS_PER_SECOND = 1000
+const POLL_INTERVAL = 50
 
 const LockInterval = {
   None: 0,
@@ -9,53 +9,51 @@ const LockInterval = {
   OneMinute: 60 * MILLISECONDS_PER_SECOND,
   FiveMinutes: 300 * MILLISECONDS_PER_SECOND,
   OneHour: 3600 * MILLISECONDS_PER_SECOND,
-};
+}
 
-const STORAGE_KEY_AUTOLOCK_INTERVAL = 'AutoLockIntervalKey';
+const STORAGE_KEY_AUTOLOCK_INTERVAL = 'AutoLockIntervalKey'
 
 export class AutolockService extends ApplicationService {
-  private pollInterval: any;
-  private lastFocusState?: 'hidden' | 'visible';
-  private lockAfterDate?: Date;
+  private pollInterval: any
+  private lastFocusState?: 'hidden' | 'visible'
+  private lockAfterDate?: Date
 
-  onAppLaunch() {
-    this.beginPolling();
-    return super.onAppLaunch();
+  override onAppLaunch() {
+    this.beginPolling()
+    return super.onAppLaunch()
   }
 
-  deinit() {
-    this.cancelAutoLockTimer();
+  override deinit() {
+    this.cancelAutoLockTimer()
     if (this.pollInterval) {
-      clearInterval(this.pollInterval);
+      clearInterval(this.pollInterval)
     }
-    super.deinit();
+    super.deinit()
   }
 
   private lockApplication() {
     if (!this.application.hasPasscode()) {
-      throw Error('Attempting to lock application with no passcode');
+      throw Error('Attempting to lock application with no passcode')
     }
-    this.application.lock();
+    this.application.lock().catch(console.error)
   }
 
   async setAutoLockInterval(interval: number) {
-    return this.application.setValue(STORAGE_KEY_AUTOLOCK_INTERVAL, interval);
+    return this.application.setValue(STORAGE_KEY_AUTOLOCK_INTERVAL, interval)
   }
 
   async getAutoLockInterval() {
-    const interval = (await this.application.getValue(
-      STORAGE_KEY_AUTOLOCK_INTERVAL
-    )) as number;
+    const interval = (await this.application.getValue(STORAGE_KEY_AUTOLOCK_INTERVAL)) as number
     if (interval) {
-      return interval;
+      return interval
     } else {
-      return LockInterval.None;
+      return LockInterval.None
     }
   }
 
   async deleteAutolockPreference() {
-    await this.application.removeValue(STORAGE_KEY_AUTOLOCK_INTERVAL);
-    this.cancelAutoLockTimer();
+    await this.application.removeValue(STORAGE_KEY_AUTOLOCK_INTERVAL)
+    this.cancelAutoLockTimer()
   }
 
   /**
@@ -64,19 +62,19 @@ export class AutolockService extends ApplicationService {
    */
   beginPolling() {
     this.pollInterval = setInterval(async () => {
-      const locked = await this.application.isLocked();
+      const locked = await this.application.isLocked()
       if (!locked && this.lockAfterDate && new Date() > this.lockAfterDate) {
-        this.lockApplication();
+        this.lockApplication()
       }
-      const hasFocus = document.hasFocus();
+      const hasFocus = document.hasFocus()
       if (hasFocus && this.lastFocusState === 'hidden') {
-        this.documentVisibilityChanged(true);
+        this.documentVisibilityChanged(true).catch(console.error)
       } else if (!hasFocus && this.lastFocusState === 'visible') {
-        this.documentVisibilityChanged(false);
+        this.documentVisibilityChanged(false).catch(console.error)
       }
       /* Save this to compare against next time around */
-      this.lastFocusState = hasFocus ? 'visible' : 'hidden';
-    }, POLL_INTERVAL);
+      this.lastFocusState = hasFocus ? 'visible' : 'hidden'
+    }, POLL_INTERVAL)
   }
 
   getAutoLockIntervalOptions() {
@@ -101,31 +99,31 @@ export class AutolockService extends ApplicationService {
         value: LockInterval.OneHour,
         label: '1h',
       },
-    ];
+    ]
   }
 
   async documentVisibilityChanged(visible: boolean) {
     if (visible) {
-      this.cancelAutoLockTimer();
+      this.cancelAutoLockTimer()
     } else {
-      this.beginAutoLockTimer();
+      this.beginAutoLockTimer().catch(console.error)
     }
   }
 
   async beginAutoLockTimer() {
-    const interval = await this.getAutoLockInterval();
+    const interval = await this.getAutoLockInterval()
     if (interval === LockInterval.None) {
-      return;
+      return
     }
     const addToNow = (seconds: number) => {
-      const date = new Date();
-      date.setSeconds(date.getSeconds() + seconds);
-      return date;
-    };
-    this.lockAfterDate = addToNow(interval / MILLISECONDS_PER_SECOND);
+      const date = new Date()
+      date.setSeconds(date.getSeconds() + seconds)
+      return date
+    }
+    this.lockAfterDate = addToNow(interval / MILLISECONDS_PER_SECOND)
   }
 
   cancelAutoLockTimer() {
-    this.lockAfterDate = undefined;
+    this.lockAfterDate = undefined
   }
 }
diff --git a/app/assets/javascripts/Services/Bridge.ts b/app/assets/javascripts/Services/Bridge.ts
new file mode 100644
index 000000000..fe78d0e29
--- /dev/null
+++ b/app/assets/javascripts/Services/Bridge.ts
@@ -0,0 +1,37 @@
+/**
+ * This file will be imported by desktop, so we make sure imports are carrying
+ * as little extra code as possible with them.
+ */
+import { Environment } from '@standardnotes/snjs'
+
+export interface ElectronDesktopCallbacks {
+  desktop_updateAvailable(): void
+  desktop_windowGainedFocus(): void
+  desktop_windowLostFocus(): void
+  desktop_onComponentInstallationComplete(componentData: any, error: any): Promise<void>
+  desktop_requestBackupFile(): Promise<string | undefined>
+  desktop_didBeginBackup(): void
+  desktop_didFinishBackup(success: boolean): void
+}
+
+/** Platform-specific (i-e Electron/browser) behavior is handled by a Bridge object. */
+export interface Bridge {
+  readonly appVersion: string
+  environment: Environment
+
+  getKeychainValue(): Promise<unknown>
+  setKeychainValue(value: unknown): Promise<void>
+  clearKeychainValue(): Promise<void>
+
+  localBackupsCount(): Promise<number>
+  viewlocalBackups(): void
+  deleteLocalBackups(): Promise<void>
+
+  extensionsServerHost?: string
+  syncComponents(payloads: unknown[]): void
+  onMajorDataChange(): void
+  onInitialDataLoad(): void
+  onSignOut(): void
+  onSearch(text?: string): void
+  downloadBackup(): void | Promise<void>
+}
diff --git a/app/assets/javascripts/services/browserBridge.ts b/app/assets/javascripts/Services/BrowserBridge.ts
similarity index 69%
rename from app/assets/javascripts/services/browserBridge.ts
rename to app/assets/javascripts/Services/BrowserBridge.ts
index 174b933bb..9d4c8b835 100644
--- a/app/assets/javascripts/services/browserBridge.ts
+++ b/app/assets/javascripts/Services/BrowserBridge.ts
@@ -1,30 +1,31 @@
-import { Bridge } from './bridge';
-import { Environment } from '@standardnotes/snjs';
+import { Bridge } from './Bridge'
+import { Environment } from '@standardnotes/snjs'
 
-const KEYCHAIN_STORAGE_KEY = 'keychain';
+const KEYCHAIN_STORAGE_KEY = 'keychain'
 
 export class BrowserBridge implements Bridge {
   constructor(public appVersion: string) {}
-  environment = Environment.Web;
+  environment = Environment.Web
 
   async getKeychainValue(): Promise<unknown> {
-    const value = localStorage.getItem(KEYCHAIN_STORAGE_KEY);
+    const value = localStorage.getItem(KEYCHAIN_STORAGE_KEY)
     if (value) {
-      return JSON.parse(value);
+      return JSON.parse(value)
     }
+    return undefined
   }
 
   async setKeychainValue(value: unknown): Promise<void> {
-    localStorage.setItem(KEYCHAIN_STORAGE_KEY, JSON.stringify(value));
+    localStorage.setItem(KEYCHAIN_STORAGE_KEY, JSON.stringify(value))
   }
 
   async clearKeychainValue(): Promise<void> {
-    localStorage.removeItem(KEYCHAIN_STORAGE_KEY);
+    localStorage.removeItem(KEYCHAIN_STORAGE_KEY)
   }
 
   async localBackupsCount(): Promise<number> {
     /** Browsers cannot save backups, only let you download one */
-    return 0;
+    return 0
   }
 
   /** No-ops */
diff --git a/app/assets/javascripts/services/desktopManager.ts b/app/assets/javascripts/Services/DesktopManager.ts
similarity index 58%
rename from app/assets/javascripts/services/desktopManager.ts
rename to app/assets/javascripts/Services/DesktopManager.ts
index cb3fb8127..e4d0659d4 100644
--- a/app/assets/javascripts/services/desktopManager.ts
+++ b/app/assets/javascripts/Services/DesktopManager.ts
@@ -9,10 +9,10 @@ import {
   DesktopManagerInterface,
   PayloadSource,
   InternalEventBus,
-} from '@standardnotes/snjs';
-import { WebAppEvent, WebApplication } from '@/ui_models/application';
-import { isDesktopApplication } from '@/utils';
-import { Bridge, ElectronDesktopCallbacks } from './bridge';
+} from '@standardnotes/snjs'
+import { WebAppEvent, WebApplication } from '@/UIModels/Application'
+import { isDesktopApplication } from '@/Utils'
+import { Bridge, ElectronDesktopCallbacks } from './Bridge'
 
 /**
  * An interface used by the Desktop application to interact with SN
@@ -22,44 +22,43 @@ export class DesktopManager
   implements DesktopManagerInterface, ElectronDesktopCallbacks
 {
   updateObservers: {
-    callback: (component: SNComponent) => void;
-  }[] = [];
+    callback: (component: SNComponent) => void
+  }[] = []
 
-  isDesktop = isDesktopApplication();
-  dataLoaded = false;
-  lastSearchedText?: string;
+  isDesktop = isDesktopApplication()
+  dataLoaded = false
+  lastSearchedText?: string
 
   constructor(application: WebApplication, private bridge: Bridge) {
-    super(application, new InternalEventBus());
+    super(application, new InternalEventBus())
   }
 
   get webApplication() {
-    return this.application as WebApplication;
+    return this.application as WebApplication
   }
 
-  deinit() {
-    this.updateObservers.length = 0;
-    super.deinit();
+  override deinit() {
+    this.updateObservers.length = 0
+    super.deinit()
   }
 
-  async onAppEvent(eventName: ApplicationEvent) {
-    super.onAppEvent(eventName);
-
+  override async onAppEvent(eventName: ApplicationEvent) {
+    super.onAppEvent(eventName).catch(console.error)
     if (eventName === ApplicationEvent.LocalDataLoaded) {
-      this.dataLoaded = true;
-      this.bridge.onInitialDataLoad();
+      this.dataLoaded = true
+      this.bridge.onInitialDataLoad()
     } else if (eventName === ApplicationEvent.MajorDataChange) {
-      this.bridge.onMajorDataChange();
+      this.bridge.onMajorDataChange()
     }
   }
 
   saveBackup() {
-    this.bridge.onMajorDataChange();
+    this.bridge.onMajorDataChange()
   }
 
   getExtServerHost(): string {
-    console.assert(!!this.bridge.extensionsServerHost, 'extServerHost is null');
-    return this.bridge.extensionsServerHost!;
+    console.assert(!!this.bridge.extensionsServerHost, 'extServerHost is null')
+    return this.bridge.extensionsServerHost as string
   }
 
   /**
@@ -67,105 +66,106 @@ export class DesktopManager
    * Keys are not passed into ItemParams, so the result is not encrypted
    */
   convertComponentForTransmission(component: SNComponent) {
-    return component.payloadRepresentation().ejected();
+    return component.payloadRepresentation().ejected()
   }
 
   // All `components` should be installed
   syncComponentsInstallation(components: SNComponent[]) {
     if (!this.isDesktop) {
-      return;
+      return
     }
 
     Promise.all(
       components.map((component) => {
-        return this.convertComponentForTransmission(component);
+        return this.convertComponentForTransmission(component)
+      }),
+    )
+      .then((payloads) => {
+        this.bridge.syncComponents(payloads)
       })
-    ).then((payloads) => {
-      this.bridge.syncComponents(payloads);
-    });
+      .catch(console.error)
   }
 
   registerUpdateObserver(callback: (component: SNComponent) => void) {
     const observer = {
       callback: callback,
-    };
-    this.updateObservers.push(observer);
+    }
+    this.updateObservers.push(observer)
     return () => {
-      removeFromArray(this.updateObservers, observer);
-    };
+      removeFromArray(this.updateObservers, observer)
+    }
   }
 
   searchText(text?: string) {
     if (!this.isDesktop) {
-      return;
+      return
     }
-    this.lastSearchedText = text;
-    this.bridge.onSearch(text);
+    this.lastSearchedText = text
+    this.bridge.onSearch(text)
   }
 
   redoSearch() {
     if (this.lastSearchedText) {
-      this.searchText(this.lastSearchedText);
+      this.searchText(this.lastSearchedText)
     }
   }
 
   desktop_updateAvailable(): void {
-    this.webApplication.notifyWebEvent(WebAppEvent.NewUpdateAvailable);
+    this.webApplication.notifyWebEvent(WebAppEvent.NewUpdateAvailable)
   }
 
   desktop_windowGainedFocus(): void {
-    this.webApplication.notifyWebEvent(WebAppEvent.DesktopWindowGainedFocus);
+    this.webApplication.notifyWebEvent(WebAppEvent.DesktopWindowGainedFocus)
   }
 
   desktop_windowLostFocus(): void {
-    this.webApplication.notifyWebEvent(WebAppEvent.DesktopWindowLostFocus);
+    this.webApplication.notifyWebEvent(WebAppEvent.DesktopWindowLostFocus)
   }
 
-  async desktop_onComponentInstallationComplete(
-    componentData: any,
-    error: any
-  ) {
-    const component = this.application.items.findItem(componentData.uuid);
+  async desktop_onComponentInstallationComplete(componentData: any, error: any) {
+    const component = this.application.items.findItem(componentData.uuid)
     if (!component) {
-      return;
+      return
     }
     const updatedComponent = await this.application.mutator.changeAndSaveItem(
       component,
       (m) => {
-        const mutator = m as ComponentMutator;
+        const mutator = m as ComponentMutator
         if (error) {
-          mutator.setAppDataItem(AppDataField.ComponentInstallError, error);
+          mutator.setAppDataItem(AppDataField.ComponentInstallError, error)
         } else {
-          mutator.local_url = componentData.content.local_url;
-          mutator.package_info = componentData.content.package_info;
-          mutator.setAppDataItem(AppDataField.ComponentInstallError, undefined);
+          mutator.local_url = componentData.content.local_url
+          mutator.package_info = componentData.content.package_info
+          mutator.setAppDataItem(AppDataField.ComponentInstallError, undefined)
         }
       },
       undefined,
-      PayloadSource.DesktopInstalled
-    );
+      PayloadSource.DesktopInstalled,
+    )
 
     for (const observer of this.updateObservers) {
-      observer.callback(updatedComponent as SNComponent);
+      observer.callback(updatedComponent as SNComponent)
     }
   }
 
   async desktop_requestBackupFile(): Promise<string | undefined> {
-    const encrypted = this.application.hasProtectionSources();
+    const encrypted = this.application.hasProtectionSources()
     const data = encrypted
       ? await this.application.createEncryptedBackupFile(false)
-      : await this.application.createDecryptedBackupFile();
+      : await this.application.createDecryptedBackupFile()
 
     if (data) {
-      return JSON.stringify(data, null, 2);
+      return JSON.stringify(data, null, 2)
     }
+
+    return undefined
   }
 
   desktop_didBeginBackup() {
-    this.webApplication.getAppState().beganBackupDownload();
+    this.webApplication.getAppState().beganBackupDownload()
   }
 
   desktop_didFinishBackup(success: boolean) {
-    this.webApplication.getAppState().endedBackupDownload(success);
+    this.webApplication.getAppState().endedBackupDownload(success)
   }
 }
diff --git a/app/assets/javascripts/services/ioService.ts b/app/assets/javascripts/Services/IOService.ts
similarity index 50%
rename from app/assets/javascripts/services/ioService.ts
rename to app/assets/javascripts/Services/IOService.ts
index b9415c62c..f5fadee2f 100644
--- a/app/assets/javascripts/services/ioService.ts
+++ b/app/assets/javascripts/Services/IOService.ts
@@ -1,4 +1,5 @@
-import { removeFromArray } from '@standardnotes/snjs';
+import { removeFromArray } from '@standardnotes/snjs'
+
 export enum KeyboardKey {
   Tab = 'Tab',
   Backspace = 'Backspace',
@@ -24,112 +25,104 @@ enum KeyboardKeyEvent {
 }
 
 type KeyboardObserver = {
-  key?: KeyboardKey | string;
-  modifiers?: KeyboardModifier[];
-  onKeyDown?: (event: KeyboardEvent) => void;
-  onKeyUp?: (event: KeyboardEvent) => void;
-  element?: HTMLElement;
-  elements?: HTMLElement[];
-  notElement?: HTMLElement;
-  notElementIds?: string[];
-  notTags?: string[];
-};
+  key?: KeyboardKey | string
+  modifiers?: KeyboardModifier[]
+  onKeyDown?: (event: KeyboardEvent) => void
+  onKeyUp?: (event: KeyboardEvent) => void
+  element?: HTMLElement
+  elements?: HTMLElement[]
+  notElement?: HTMLElement
+  notElementIds?: string[]
+  notTags?: string[]
+}
 
 export class IOService {
-  readonly activeModifiers = new Set<KeyboardModifier>();
-  private observers: KeyboardObserver[] = [];
+  readonly activeModifiers = new Set<KeyboardModifier>()
+  private observers: KeyboardObserver[] = []
 
   constructor(private isMac: boolean) {
-    window.addEventListener('keydown', this.handleKeyDown);
-    window.addEventListener('keyup', this.handleKeyUp);
-    window.addEventListener('blur', this.handleWindowBlur);
+    window.addEventListener('keydown', this.handleKeyDown)
+    window.addEventListener('keyup', this.handleKeyUp)
+    window.addEventListener('blur', this.handleWindowBlur)
   }
 
   public deinit() {
-    this.observers.length = 0;
-    window.removeEventListener('keydown', this.handleKeyDown);
-    window.removeEventListener('keyup', this.handleKeyUp);
-    window.removeEventListener('blur', this.handleWindowBlur);
-    (this.handleKeyDown as unknown) = undefined;
-    (this.handleKeyUp as unknown) = undefined;
-    (this.handleWindowBlur as unknown) = undefined;
+    this.observers.length = 0
+    window.removeEventListener('keydown', this.handleKeyDown)
+    window.removeEventListener('keyup', this.handleKeyUp)
+    window.removeEventListener('blur', this.handleWindowBlur)
+    ;(this.handleKeyDown as unknown) = undefined
+    ;(this.handleKeyUp as unknown) = undefined
+    ;(this.handleWindowBlur as unknown) = undefined
   }
 
-  private addActiveModifier = (
-    modifier: KeyboardModifier | undefined
-  ): void => {
+  private addActiveModifier = (modifier: KeyboardModifier | undefined): void => {
     if (!modifier) {
-      return;
+      return
     }
     switch (modifier) {
       case KeyboardModifier.Meta: {
         if (this.isMac) {
-          this.activeModifiers.add(modifier);
+          this.activeModifiers.add(modifier)
         }
-        break;
+        break
       }
       case KeyboardModifier.Ctrl: {
         if (!this.isMac) {
-          this.activeModifiers.add(modifier);
+          this.activeModifiers.add(modifier)
         }
-        break;
+        break
       }
       default: {
-        this.activeModifiers.add(modifier);
-        break;
+        this.activeModifiers.add(modifier)
+        break
       }
     }
-  };
+  }
 
-  private removeActiveModifier = (
-    modifier: KeyboardModifier | undefined
-  ): void => {
+  private removeActiveModifier = (modifier: KeyboardModifier | undefined): void => {
     if (!modifier) {
-      return;
+      return
     }
-    this.activeModifiers.delete(modifier);
-  };
+    this.activeModifiers.delete(modifier)
+  }
 
-  public handleComponentKeyDown = (
-    modifier: KeyboardModifier | undefined
-  ): void => {
-    this.addActiveModifier(modifier);
-  };
+  public handleComponentKeyDown = (modifier: KeyboardModifier | undefined): void => {
+    this.addActiveModifier(modifier)
+  }
 
-  public handleComponentKeyUp = (
-    modifier: KeyboardModifier | undefined
-  ): void => {
-    this.removeActiveModifier(modifier);
-  };
+  public handleComponentKeyUp = (modifier: KeyboardModifier | undefined): void => {
+    this.removeActiveModifier(modifier)
+  }
 
   private handleKeyDown = (event: KeyboardEvent): void => {
-    this.updateAllModifiersFromEvent(event);
-    this.notifyObserver(event, KeyboardKeyEvent.Down);
-  };
+    this.updateAllModifiersFromEvent(event)
+    this.notifyObserver(event, KeyboardKeyEvent.Down)
+  }
 
   private handleKeyUp = (event: KeyboardEvent): void => {
-    this.updateAllModifiersFromEvent(event);
-    this.notifyObserver(event, KeyboardKeyEvent.Up);
-  };
+    this.updateAllModifiersFromEvent(event)
+    this.notifyObserver(event, KeyboardKeyEvent.Up)
+  }
 
   private updateAllModifiersFromEvent(event: KeyboardEvent): void {
     for (const modifier of Object.values(KeyboardModifier)) {
       if (event.getModifierState(modifier)) {
-        this.addActiveModifier(modifier);
+        this.addActiveModifier(modifier)
       } else {
-        this.removeActiveModifier(modifier);
+        this.removeActiveModifier(modifier)
       }
     }
   }
 
   handleWindowBlur = (): void => {
     for (const modifier of this.activeModifiers) {
-      this.activeModifiers.delete(modifier);
+      this.activeModifiers.delete(modifier)
     }
-  };
+  }
 
   modifiersForEvent(event: KeyboardEvent): KeyboardModifier[] {
-    const allModifiers = Object.values(KeyboardModifier);
+    const allModifiers = Object.values(KeyboardModifier)
     const eventModifiers = allModifiers.filter((modifier) => {
       // For a modifier like ctrlKey, must check both event.ctrlKey and event.key.
       // That's because on keyup, event.ctrlKey would be false, but event.key == Control would be true.
@@ -141,85 +134,76 @@ export class IOService {
         ((event.altKey || event.key === KeyboardModifier.Alt) &&
           modifier === KeyboardModifier.Alt) ||
         ((event.shiftKey || event.key === KeyboardModifier.Shift) &&
-          modifier === KeyboardModifier.Shift);
+          modifier === KeyboardModifier.Shift)
 
-      return matches;
-    });
+      return matches
+    })
 
-    return eventModifiers;
+    return eventModifiers
   }
 
   private eventMatchesKeyAndModifiers(
     event: KeyboardEvent,
     key: KeyboardKey | string,
-    modifiers: KeyboardModifier[] = []
+    modifiers: KeyboardModifier[] = [],
   ): boolean {
-    const eventModifiers = this.modifiersForEvent(event);
+    const eventModifiers = this.modifiersForEvent(event)
     if (eventModifiers.length !== modifiers.length) {
-      return false;
+      return false
     }
     for (const modifier of modifiers) {
       if (!eventModifiers.includes(modifier)) {
-        return false;
+        return false
       }
     }
     // Modifers match, check key
     if (!key) {
-      return true;
+      return true
     }
     // In the browser, shift + f results in key 'f', but in Electron, shift + f results in 'F'
     // In our case we don't differentiate between the two.
-    return key.toLowerCase() === event.key.toLowerCase();
+    return key.toLowerCase() === event.key.toLowerCase()
   }
 
   notifyObserver(event: KeyboardEvent, keyEvent: KeyboardKeyEvent): void {
-    const target = event.target as HTMLElement;
+    const target = event.target as HTMLElement
     for (const observer of this.observers) {
       if (observer.element && event.target !== observer.element) {
-        continue;
+        continue
       }
 
       if (observer.elements && !observer.elements.includes(target)) {
-        continue;
+        continue
       }
 
       if (observer.notElement && observer.notElement === event.target) {
-        continue;
+        continue
       }
 
-      if (
-        observer.notElementIds &&
-        observer.notElementIds.includes(target.id)
-      ) {
-        continue;
+      if (observer.notElementIds && observer.notElementIds.includes(target.id)) {
+        continue
       }
 
       if (observer.notTags && observer.notTags.includes(target.tagName)) {
-        continue;
+        continue
       }
 
       if (
-        this.eventMatchesKeyAndModifiers(
-          event,
-          observer.key!,
-          observer.modifiers
-        )
+        observer.key &&
+        this.eventMatchesKeyAndModifiers(event, observer.key, observer.modifiers)
       ) {
-        const callback =
-          keyEvent === KeyboardKeyEvent.Down
-            ? observer.onKeyDown
-            : observer.onKeyUp;
+        const callback = keyEvent === KeyboardKeyEvent.Down ? observer.onKeyDown : observer.onKeyUp
         if (callback) {
-          callback(event);
+          callback(event)
         }
       }
     }
   }
 
   addKeyObserver(observer: KeyboardObserver): () => void {
-    this.observers.push(observer);
+    this.observers.push(observer)
     return () => {
-      removeFromArray(this.observers, observer);
-    };
+      removeFromArray(this.observers, observer)
+    }
   }
 }
diff --git a/app/assets/javascripts/services/localStorage.ts b/app/assets/javascripts/Services/LocalStorage.ts
similarity index 55%
rename from app/assets/javascripts/services/localStorage.ts
rename to app/assets/javascripts/Services/LocalStorage.ts
index 635589415..0bb11fd19 100644
--- a/app/assets/javascripts/services/localStorage.ts
+++ b/app/assets/javascripts/Services/LocalStorage.ts
@@ -5,20 +5,20 @@ export enum StorageKey {
 }
 
 export type StorageValue = {
-  [StorageKey.AnonymousUserId]: string;
-  [StorageKey.ShowBetaWarning]: boolean;
-  [StorageKey.ShowNoAccountWarning]: boolean;
-};
+  [StorageKey.AnonymousUserId]: string
+  [StorageKey.ShowBetaWarning]: boolean
+  [StorageKey.ShowNoAccountWarning]: boolean
+}
 
 export const storage = {
   get<K extends StorageKey>(key: K): StorageValue[K] | null {
-    const value = localStorage.getItem(key);
-    return value ? JSON.parse(value) : null;
+    const value = localStorage.getItem(key)
+    return value ? JSON.parse(value) : null
   },
   set<K extends StorageKey>(key: K, value: StorageValue[K]): void {
-    localStorage.setItem(key, JSON.stringify(value));
+    localStorage.setItem(key, JSON.stringify(value))
   },
   remove(key: StorageKey): void {
-    localStorage.removeItem(key);
+    localStorage.removeItem(key)
   },
-};
+}
diff --git a/app/assets/javascripts/Services/StatusManager.ts b/app/assets/javascripts/Services/StatusManager.ts
new file mode 100644
index 000000000..5b606aa30
--- /dev/null
+++ b/app/assets/javascripts/Services/StatusManager.ts
@@ -0,0 +1,30 @@
+import { removeFromArray } from '@standardnotes/snjs'
+
+type StatusCallback = (string: string) => void
+
+export class StatusManager {
+  private _message = ''
+  private observers: StatusCallback[] = []
+
+  get message(): string {
+    return this._message
+  }
+
+  setMessage(message: string) {
+    this._message = message
+    this.notifyObservers()
+  }
+
+  onStatusChange(callback: StatusCallback) {
+    this.observers.push(callback)
+    return () => {
+      removeFromArray(this.observers, callback)
+    }
+  }
+
+  private notifyObservers() {
+    for (const observer of this.observers) {
+      observer(this._message)
+    }
+  }
+}
diff --git a/app/assets/javascripts/Services/ThemeManager.ts b/app/assets/javascripts/Services/ThemeManager.ts
new file mode 100644
index 000000000..8c306b029
--- /dev/null
+++ b/app/assets/javascripts/Services/ThemeManager.ts
@@ -0,0 +1,318 @@
+import { WebApplication } from '@/UIModels/Application'
+import {
+  StorageValueModes,
+  ApplicationService,
+  SNTheme,
+  removeFromArray,
+  ApplicationEvent,
+  ContentType,
+  UuidString,
+  FeatureStatus,
+  PayloadSource,
+  PrefKey,
+  CreateDecryptedLocalStorageContextPayload,
+  InternalEventBus,
+} from '@standardnotes/snjs'
+import { dismissToast, ToastType, addTimedToast } from '@standardnotes/stylekit'
+
+const CachedThemesKey = 'cachedThemes'
+const TimeBeforeApplyingColorScheme = 5
+const DefaultThemeIdentifier = 'Default'
+
+export class ThemeManager extends ApplicationService {
+  private activeThemes: UuidString[] = []
+  private unregisterDesktop!: () => void
+  private unregisterStream!: () => void
+  private lastUseDeviceThemeSettings = false
+
+  constructor(application: WebApplication) {
+    super(application, new InternalEventBus())
+    this.colorSchemeEventHandler = this.colorSchemeEventHandler.bind(this)
+  }
+
+  override async onAppStart() {
+    super.onAppStart().catch(console.error)
+    this.registerObservers()
+  }
+
+  override async onAppEvent(event: ApplicationEvent) {
+    super.onAppEvent(event).catch(console.error)
+    switch (event) {
+      case ApplicationEvent.SignedOut: {
+        this.deactivateAllThemes()
+        this.activeThemes = []
+        this.application
+          ?.removeValue(CachedThemesKey, StorageValueModes.Nonwrapped)
+          .catch(console.error)
+        break
+      }
+      case ApplicationEvent.StorageReady: {
+        await this.activateCachedThemes()
+        break
+      }
+      case ApplicationEvent.FeaturesUpdated: {
+        this.handleFeaturesUpdated()
+        break
+      }
+      case ApplicationEvent.Launched: {
+        window
+          .matchMedia('(prefers-color-scheme: dark)')
+          .addEventListener('change', this.colorSchemeEventHandler)
+        break
+      }
+      case ApplicationEvent.PreferencesChanged: {
+        this.handlePreferencesChangeEvent()
+        break
+      }
+    }
+  }
+
+  private handlePreferencesChangeEvent(): void {
+    const useDeviceThemeSettings = this.application.getPreference(
+      PrefKey.UseSystemColorScheme,
+      false,
+    )
+
+    if (useDeviceThemeSettings !== this.lastUseDeviceThemeSettings) {
+      this.lastUseDeviceThemeSettings = useDeviceThemeSettings
+    }
+
+    if (useDeviceThemeSettings) {
+      const prefersDarkColorScheme = window.matchMedia('(prefers-color-scheme: dark)')
+
+      this.setThemeAsPerColorScheme(prefersDarkColorScheme.matches)
+    }
+  }
+
+  get webApplication() {
+    return this.application as WebApplication
+  }
+
+  override deinit() {
+    this.activeThemes.length = 0
+    this.unregisterDesktop()
+    this.unregisterStream()
+    ;(this.unregisterDesktop as unknown) = undefined
+    ;(this.unregisterStream as unknown) = undefined
+    window
+      .matchMedia('(prefers-color-scheme: dark)')
+      .removeEventListener('change', this.colorSchemeEventHandler)
+    super.deinit()
+  }
+
+  private handleFeaturesUpdated(): void {
+    let hasChange = false
+    for (const themeUuid of this.activeThemes) {
+      const theme = this.application.items.findItem(themeUuid) as SNTheme
+      if (!theme) {
+        this.deactivateTheme(themeUuid)
+        hasChange = true
+      } else {
+        const status = this.application.features.getFeatureStatus(theme.identifier)
+        if (status !== FeatureStatus.Entitled) {
+          if (theme.active) {
+            this.application.mutator.toggleTheme(theme).catch(console.error)
+          } else {
+            this.deactivateTheme(theme.uuid)
+          }
+          hasChange = true
+        }
+      }
+    }
+
+    const activeThemes = (this.application.items.getItems(ContentType.Theme) as SNTheme[]).filter(
+      (theme) => theme.active,
+    )
+
+    for (const theme of activeThemes) {
+      if (!this.activeThemes.includes(theme.uuid)) {
+        this.activateTheme(theme)
+        hasChange = true
+      }
+    }
+
+    if (hasChange) {
+      this.cacheThemeState().catch(console.error)
+    }
+  }
+
+  private colorSchemeEventHandler(event: MediaQueryListEvent) {
+    this.setThemeAsPerColorScheme(event.matches)
+  }
+
+  private showColorSchemeToast(setThemeCallback: () => void) {
+    const [toastId, intervalId] = addTimedToast(
+      {
+        type: ToastType.Regular,
+        message: (timeRemaining) => `Applying system color scheme in ${timeRemaining}s...`,
+        actions: [
+          {
+            label: 'Keep current theme',
+            handler: () => {
+              dismissToast(toastId)
+              clearInterval(intervalId)
+            },
+          },
+          {
+            label: 'Apply now',
+            handler: () => {
+              dismissToast(toastId)
+              clearInterval(intervalId)
+              setThemeCallback()
+            },
+          },
+        ],
+      },
+      setThemeCallback,
+      TimeBeforeApplyingColorScheme,
+    )
+  }
+
+  private setThemeAsPerColorScheme(prefersDarkColorScheme: boolean) {
+    const preference = prefersDarkColorScheme
+      ? PrefKey.AutoDarkThemeIdentifier
+      : PrefKey.AutoLightThemeIdentifier
+
+    const themes = this.application.items.getDisplayableItems(ContentType.Theme) as SNTheme[]
+
+    const activeTheme = themes.find((theme) => theme.active && !theme.isLayerable())
+
+    const themeIdentifier = this.application.getPreference(
+      preference,
+      DefaultThemeIdentifier,
+    ) as string
+
+    const setTheme = () => {
+      if (themeIdentifier === DefaultThemeIdentifier && activeTheme) {
+        this.application.mutator.toggleTheme(activeTheme).catch(console.error)
+      } else {
+        const theme = themes.find((theme) => theme.package_info.identifier === themeIdentifier)
+        if (theme && !theme.active) {
+          this.application.mutator.toggleTheme(theme).catch(console.error)
+        }
+      }
+    }
+
+    const isPreferredThemeNotActive = activeTheme?.identifier !== themeIdentifier
+
+    const isDefaultThemePreferredAndNotActive =
+      themeIdentifier === DefaultThemeIdentifier && activeTheme
+
+    if (isPreferredThemeNotActive || isDefaultThemePreferredAndNotActive) {
+      this.showColorSchemeToast(setTheme)
+    }
+  }
+
+  private async activateCachedThemes() {
+    const cachedThemes = await this.getCachedThemes()
+    for (const theme of cachedThemes) {
+      this.activateTheme(theme, true)
+    }
+  }
+
+  private registerObservers() {
+    this.unregisterDesktop = this.webApplication
+      .getDesktopService()
+      .registerUpdateObserver((component) => {
+        if (component.active && component.isTheme()) {
+          this.deactivateTheme(component.uuid)
+          setTimeout(() => {
+            this.activateTheme(component as SNTheme)
+            this.cacheThemeState().catch(console.error)
+          }, 10)
+        }
+      })
+
+    this.unregisterStream = this.application.streamItems(
+      ContentType.Theme,
+      ({ changed, inserted, source }) => {
+        const items = changed.concat(inserted)
+        const themes = items as SNTheme[]
+        for (const theme of themes) {
+          if (theme.active) {
+            this.activateTheme(theme)
+          } else {
+            this.deactivateTheme(theme.uuid)
+          }
+        }
+        if (source !== PayloadSource.LocalRetrieved) {
+          this.cacheThemeState().catch(console.error)
+        }
+      },
+    )
+  }
+
+  public deactivateAllThemes() {
+    const activeThemes = this.activeThemes.slice()
+    for (const uuid of activeThemes) {
+      this.deactivateTheme(uuid)
+    }
+  }
+
+  private activateTheme(theme: SNTheme, skipEntitlementCheck = false) {
+    if (this.activeThemes.find((uuid) => uuid === theme.uuid)) {
+      return
+    }
+
+    if (
+      !skipEntitlementCheck &&
+      this.application.features.getFeatureStatus(theme.identifier) !== FeatureStatus.Entitled
+    ) {
+      return
+    }
+
+    const url = this.application.componentManager.urlForComponent(theme)
+    if (!url) {
+      return
+    }
+
+    this.activeThemes.push(theme.uuid)
+
+    const link = document.createElement('link')
+    link.href = url
+    link.type = 'text/css'
+    link.rel = 'stylesheet'
+    link.media = 'screen,print'
+    link.id = theme.uuid
+    document.getElementsByTagName('head')[0].appendChild(link)
+  }
+
+  private deactivateTheme(uuid: string) {
+    const element = document.getElementById(uuid) as HTMLLinkElement
+    if (element) {
+      element.disabled = true
+      element.parentNode?.removeChild(element)
+    }
+
+    removeFromArray(this.activeThemes, uuid)
+  }
+
+  private async cacheThemeState() {
+    const themes = this.application.items.findItems(this.activeThemes) as SNTheme[]
+
+    const mapped = themes.map((theme) => {
+      const payload = theme.payloadRepresentation()
+      return CreateDecryptedLocalStorageContextPayload(payload)
+    })
+
+    return this.application.setValue(CachedThemesKey, mapped, StorageValueModes.Nonwrapped)
+  }
+
+  private async getCachedThemes() {
+    const cachedThemes = (await this.application.getValue(
+      CachedThemesKey,
+      StorageValueModes.Nonwrapped,
+    )) as SNTheme[]
+    if (cachedThemes) {
+      const themes = []
+      for (const cachedTheme of cachedThemes) {
+        const payload = this.application.items.createPayloadFromObject(cachedTheme)
+        const theme = this.application.items.createItemFromPayload(payload) as SNTheme
+        themes.push(theme)
+      }
+      return themes
+    } else {
+      return []
+    }
+  }
+}
diff --git a/app/assets/javascripts/startApplication.ts b/app/assets/javascripts/StartApplication.ts
similarity index 58%
rename from app/assets/javascripts/startApplication.ts
rename to app/assets/javascripts/StartApplication.ts
index c4c5fa1b2..cc18be2c2 100644
--- a/app/assets/javascripts/startApplication.ts
+++ b/app/assets/javascripts/StartApplication.ts
@@ -1,8 +1,8 @@
-import { Bridge } from './services/bridge';
+import { Bridge } from './Services/Bridge'
 
 export type StartApplication = (
   defaultSyncServerHost: string,
   bridge: Bridge,
   enableUnfinishedFeatures: boolean,
-  webSocketUrl: string
-) => Promise<void>;
+  webSocketUrl: string,
+) => Promise<void>
diff --git a/app/assets/javascripts/strings.ts b/app/assets/javascripts/Strings.ts
similarity index 75%
rename from app/assets/javascripts/strings.ts
rename to app/assets/javascripts/Strings.ts
index a5cde2dab..dd616ac14 100644
--- a/app/assets/javascripts/strings.ts
+++ b/app/assets/javascripts/Strings.ts
@@ -1,118 +1,115 @@
-import { Platform, SNApplication } from '@standardnotes/snjs';
-import { getPlatform, isDesktopApplication } from './utils';
+import { Platform, SNApplication } from '@standardnotes/snjs'
+import { getPlatform, isDesktopApplication } from './Utils'
 
 /** @generic */
 export const STRING_SESSION_EXPIRED =
-  'Your session has expired. New changes will not be pulled in. Please sign in to refresh your session.';
+  'Your session has expired. New changes will not be pulled in. Please sign in to refresh your session.'
 export const STRING_DEFAULT_FILE_ERROR =
-  'Please use FileSafe or the Bold Editor to attach images and files. Learn more at standardnotes.com/filesafe.';
+  'Please use FileSafe or the Bold Editor to attach images and files. Learn more at standardnotes.com/filesafe.'
 export const STRING_GENERIC_SYNC_ERROR =
-  'There was an error syncing. Please try again. If all else fails, try signing out and signing back in.';
+  'There was an error syncing. Please try again. If all else fails, try signing out and signing back in.'
 export function StringSyncException(data: any) {
   return `There was an error while trying to save your items. Please contact support and share this message: ${JSON.stringify(
-    data
-  )}.`;
+    data,
+  )}.`
 }
 
 /** @footer */
 export const STRING_NEW_UPDATE_READY =
-  "A new update is ready to install. Please use the top-level 'Updates' menu to manage installation.";
+  "A new update is ready to install. Please use the top-level 'Updates' menu to manage installation."
 
 /** @tags */
 export const STRING_DELETE_TAG =
-  'Are you sure you want to delete this tag? Deleting a tag will not delete its subtags or its notes.';
+  'Are you sure you want to delete this tag? Deleting a tag will not delete its subtags or its notes.'
 
-export const STRING_MISSING_SYSTEM_TAG = 'We are missing a System Tag.';
+export const STRING_MISSING_SYSTEM_TAG = 'We are missing a System Tag.'
 
 /** @editor */
-export const STRING_GENERIC_SAVE_ERROR =
-  'There was an error saving your note. Please try again.';
+export const STRING_GENERIC_SAVE_ERROR = 'There was an error saving your note. Please try again.'
 export const STRING_DELETE_PLACEHOLDER_ATTEMPT =
-  'This note is a placeholder and cannot be deleted. To remove from your list, simply navigate to a different note.';
+  'This note is a placeholder and cannot be deleted. To remove from your list, simply navigate to a different note.'
 export const STRING_ARCHIVE_LOCKED_ATTEMPT =
-  "This note has editing disabled. If you'd like to archive it, enable editing, and try again.";
+  "This note has editing disabled. If you'd like to archive it, enable editing, and try again."
 export const STRING_UNARCHIVE_LOCKED_ATTEMPT =
-  "This note has editing disabled. If you'd like to unarchive it, enable editing, and try again.";
+  "This note has editing disabled. If you'd like to unarchive it, enable editing, and try again."
 export const STRING_DELETE_LOCKED_ATTEMPT =
-  "This note had editing disabled. If you'd like to delete it, enable editing, and try again.";
+  "This note had editing disabled. If you'd like to delete it, enable editing, and try again."
 export const STRING_EDIT_LOCKED_ATTEMPT =
-  "This note has editing disabled. If you'd like to edit its options, enable editing, and try again.";
+  "This note has editing disabled. If you'd like to edit its options, enable editing, and try again."
 export const STRING_RESTORE_LOCKED_ATTEMPT =
-  "This note has editing disabled. If you'd like to restore it to a previous revision, enable editing and try again.";
+  "This note has editing disabled. If you'd like to restore it to a previous revision, enable editing and try again."
 export function StringDeleteNote(title: string, permanently: boolean) {
   return permanently
     ? `Are you sure you want to permanently delete ${title}?`
-    : `Are you sure you want to move ${title} to the trash?`;
+    : `Are you sure you want to move ${title} to the trash?`
 }
 export function StringEmptyTrash(count: number) {
-  return `Are you sure you want to permanently delete ${count} note(s)?`;
+  return `Are you sure you want to permanently delete ${count} note(s)?`
 }
 
 /** @account */
 export const STRING_ACCOUNT_MENU_UNCHECK_MERGE =
-  'Unchecking this option means any of the notes you have written while you were signed out will be deleted. Are you sure you want to discard these notes?';
+  'Unchecking this option means any of the notes you have written while you were signed out will be deleted. Are you sure you want to discard these notes?'
 export const STRING_SIGN_OUT_CONFIRMATION =
-  'This action will remove this workspace and its related data from the application.';
+  'This action will remove this workspace and its related data from the application.'
 export const STRING_ERROR_DECRYPTING_IMPORT =
-  'There was an error decrypting your items. Make sure the password you entered is correct and try again.';
+  'There was an error decrypting your items. Make sure the password you entered is correct and try again.'
 export const STRING_E2E_ENABLED =
-  'End-to-end encryption is enabled. Your data is encrypted on your device first, then synced to your private cloud.';
+  'End-to-end encryption is enabled. Your data is encrypted on your device first, then synced to your private cloud.'
 export const STRING_LOCAL_ENC_ENABLED =
-  'Encryption is enabled. Your data is encrypted using your passcode before it is saved to your device storage.';
+  'Encryption is enabled. Your data is encrypted using your passcode before it is saved to your device storage.'
 export const STRING_ENC_NOT_ENABLED =
-  'Encryption is not enabled. Sign in, register, or add a passcode lock to enable encryption.';
-export const STRING_IMPORT_SUCCESS =
-  'Your data has been successfully imported.';
+  'Encryption is not enabled. Sign in, register, or add a passcode lock to enable encryption.'
+export const STRING_IMPORT_SUCCESS = 'Your data has been successfully imported.'
 export const STRING_REMOVE_PASSCODE_CONFIRMATION =
-  'Are you sure you want to remove your application passcode?';
+  'Are you sure you want to remove your application passcode?'
 export const STRING_REMOVE_PASSCODE_OFFLINE_ADDENDUM =
-  ' This will remove encryption from your local data.';
+  ' This will remove encryption from your local data.'
 export const STRING_NON_MATCHING_PASSCODES =
-  'The two passcodes you entered do not match. Please try again.';
+  'The two passcodes you entered do not match. Please try again.'
 export const STRING_NON_MATCHING_PASSWORDS =
-  'The two passwords you entered do not match. Please try again.';
-export const STRING_GENERATING_LOGIN_KEYS = 'Generating Login Keys...';
-export const STRING_GENERATING_REGISTER_KEYS = 'Generating Account Keys...';
+  'The two passwords you entered do not match. Please try again.'
+export const STRING_GENERATING_LOGIN_KEYS = 'Generating Login Keys...'
+export const STRING_GENERATING_REGISTER_KEYS = 'Generating Account Keys...'
 export const STRING_INVALID_IMPORT_FILE =
-  'Unable to open file. Ensure it is a proper JSON file and try again.';
+  'Unable to open file. Ensure it is a proper JSON file and try again.'
 export const STRING_IMPORTING_ZIP_FILE =
-  'The file you selected is not a valid backup file. Please extract the contents of the zip file, then upload the contained .txt file.';
+  'The file you selected is not a valid backup file. Please extract the contents of the zip file, then upload the contained .txt file.'
 export function StringImportError(errorCount: number) {
-  return `Import complete. ${errorCount} items were not imported because there was an error decrypting them. Make sure the password is correct and try again.`;
+  return `Import complete. ${errorCount} items were not imported because there was an error decrypting them. Make sure the password is correct and try again.`
 }
 export const STRING_UNSUPPORTED_BACKUP_FILE_VERSION =
-  'This backup file was created using an unsupported version of the application and cannot be imported here. Please update your application and try again.';
+  'This backup file was created using an unsupported version of the application and cannot be imported here. Please update your application and try again.'
 
 /** @password_change */
 export const STRING_FAILED_PASSWORD_CHANGE =
-  'There was an error re-encrypting your items. Your password was changed, but not all your items were properly re-encrypted and synced. You should try syncing again. If all else fails, you should restore your notes from backup.';
+  'There was an error re-encrypting your items. Your password was changed, but not all your items were properly re-encrypted and synced. You should try syncing again. If all else fails, you should restore your notes from backup.'
 
 export const STRING_CONFIRM_APP_QUIT_DURING_UPGRADE =
   'The encryption upgrade is in progress. You may lose data if you quit the app. ' +
-  'Are you sure you want to quit?';
+  'Are you sure you want to quit?'
 
 export const STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_CHANGE =
   'A passcode change is in progress. You may lose data if you quit the app. ' +
-  'Are you sure you want to quit?';
+  'Are you sure you want to quit?'
 
 export const STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_REMOVAL =
   'A passcode removal is in progress. You may lose data if you quit the app. ' +
-  'Are you sure you want to quit?';
+  'Are you sure you want to quit?'
 
-export const STRING_UPGRADE_ACCOUNT_CONFIRM_TITLE =
-  'Encryption upgrade available';
+export const STRING_UPGRADE_ACCOUNT_CONFIRM_TITLE = 'Encryption upgrade available'
 export const STRING_UPGRADE_ACCOUNT_CONFIRM_TEXT =
   'Encryption version 004 is available. ' +
   'This version strengthens the encryption algorithms your account and ' +
   'local storage use. To learn more about this upgrade, visit our ' +
-  '<a href="https://standardnotes.com/help/security" target="_blank">Security Upgrade page.</a>';
-export const STRING_UPGRADE_ACCOUNT_CONFIRM_BUTTON = 'Upgrade';
+  '<a href="https://standardnotes.com/help/security" target="_blank">Security Upgrade page.</a>'
+export const STRING_UPGRADE_ACCOUNT_CONFIRM_BUTTON = 'Upgrade'
 
 export const STRING_REMOVE_OFFLINE_KEY_CONFIRMATION =
-  'This will delete the previously saved offline key.';
+  'This will delete the previously saved offline key.'
 
 export const STRING_FAILED_TO_UPDATE_USER_SETTING =
-  'There was an error while trying to update your settings. Please try again.';
+  'There was an error while trying to update your settings. Please try again.'
 
 export const Strings = {
   protectingNoteWithoutProtectionSources:
@@ -121,45 +118,45 @@ export const Strings = {
   trashNotesTitle: 'Move to Trash',
   trashNotesText: 'Are you sure you want to move these notes to the trash?',
   enterPasscode: 'Please enter a passcode.',
-};
+}
 
 export const StringUtils = {
   keyStorageInfo(application: SNApplication): string | null {
     if (!isDesktopApplication()) {
-      return null;
+      return null
     }
     if (!application.hasAccount()) {
-      return null;
+      return null
     }
-    const platform = getPlatform();
+    const platform = getPlatform()
     const keychainName =
       platform === Platform.WindowsDesktop
         ? 'credential manager'
         : platform === Platform.MacDesktop
         ? 'keychain'
-        : 'password manager';
-    return `Your keys are currently stored in your operating system's ${keychainName}. Adding a passcode prevents even your operating system from reading them.`;
+        : 'password manager'
+    return `Your keys are currently stored in your operating system's ${keychainName}. Adding a passcode prevents even your operating system from reading them.`
   },
   deleteNotes(permanently: boolean, notesCount = 1, title?: string): string {
     if (notesCount === 1) {
       return permanently
         ? `Are you sure you want to permanently delete ${title}?`
-        : `Are you sure you want to move ${title} to the trash?`;
+        : `Are you sure you want to move ${title} to the trash?`
     } else {
       return permanently
-        ? `Are you sure you want to permanently delete these notes?`
-        : `Are you sure you want to move these notes to the trash?`;
+        ? 'Are you sure you want to permanently delete these notes?'
+        : 'Are you sure you want to move these notes to the trash?'
     }
   },
   archiveLockedNotesAttempt(archive: boolean, notesCount = 1): string {
-    const archiveString = archive ? 'archive' : 'unarchive';
+    const archiveString = archive ? 'archive' : 'unarchive'
     return notesCount === 1
       ? `This note has editing disabled. If you'd like to ${archiveString} it, enable editing, and try again.`
-      : `One or more of these notes have editing disabled. If you'd like to ${archiveString} them, make sure editing is enabled on all of them, and try again.`;
+      : `One or more of these notes have editing disabled. If you'd like to ${archiveString} them, make sure editing is enabled on all of them, and try again.`
   },
   deleteLockedNotesAttempt(notesCount = 1): string {
     return notesCount === 1
       ? "This note has editing disabled. If you'd like to delete it, enable editing, and try again."
-      : "One or more of these notes have editing disabled. If you'd like to delete them, make sure editing is enabled on all of them, and try again.";
+      : "One or more of these notes have editing disabled. If you'd like to delete them, make sure editing is enabled on all of them, and try again."
   },
-};
+}
diff --git a/app/assets/javascripts/Types.ts b/app/assets/javascripts/Types.ts
new file mode 100644
index 000000000..bc8c8085b
--- /dev/null
+++ b/app/assets/javascripts/Types.ts
@@ -0,0 +1,12 @@
+export type PanelPuppet = {
+  onReady?: () => void
+  ready?: boolean
+  setWidth?: (width: number) => void
+  setLeft?: (left: number) => void
+  isCollapsed?: () => boolean
+  flash?: () => void
+}
+
+export type FooterStatus = {
+  string: string
+}
diff --git a/app/assets/javascripts/typings/hoist-non-react-statics.d.ts b/app/assets/javascripts/Typings/hoist-non-react-statics.d.ts
similarity index 61%
rename from app/assets/javascripts/typings/hoist-non-react-statics.d.ts
rename to app/assets/javascripts/Typings/hoist-non-react-statics.d.ts
index 4a0f7856f..a4019f8db 100644
--- a/app/assets/javascripts/typings/hoist-non-react-statics.d.ts
+++ b/app/assets/javascripts/Typings/hoist-non-react-statics.d.ts
@@ -9,51 +9,51 @@
 
 declare module 'hoist-non-react-statics' {
   interface REACT_STATICS {
-    childContextTypes: true;
-    contextType: true;
-    contextTypes: true;
-    defaultProps: true;
-    displayName: true;
-    getDefaultProps: true;
-    getDerivedStateFromError: true;
-    getDerivedStateFromProps: true;
-    mixins: true;
-    propTypes: true;
-    type: true;
+    childContextTypes: true
+    contextType: true
+    contextTypes: true
+    defaultProps: true
+    displayName: true
+    getDefaultProps: true
+    getDerivedStateFromError: true
+    getDerivedStateFromProps: true
+    mixins: true
+    propTypes: true
+    type: true
   }
 
   interface KNOWN_STATICS {
-    name: true;
-    length: true;
-    prototype: true;
-    caller: true;
-    callee: true;
-    arguments: true;
-    arity: true;
+    name: true
+    length: true
+    prototype: true
+    caller: true
+    callee: true
+    arguments: true
+    arity: true
   }
 
   interface MEMO_STATICS {
-    $$typeof: true;
-    compare: true;
-    defaultProps: true;
-    displayName: true;
-    propTypes: true;
-    type: true;
+    $$typeof: true
+    compare: true
+    defaultProps: true
+    displayName: true
+    propTypes: true
+    type: true
   }
 
   interface FORWARD_REF_STATICS {
-    $$typeof: true;
-    render: true;
-    defaultProps: true;
-    displayName: true;
-    propTypes: true;
+    $$typeof: true
+    render: true
+    defaultProps: true
+    displayName: true
+    propTypes: true
   }
 
   export type NonReactStatics<
     S extends React.ComponentType<any>,
     C extends {
-      [key: string]: true;
-    } = {}
+      [key: string]: true
+    } = {},
   > = {
     [key in Exclude<
       keyof S,
@@ -62,6 +62,6 @@ declare module 'hoist-non-react-statics' {
         : S extends React.ForwardRefExoticComponent<any>
         ? keyof FORWARD_REF_STATICS | keyof C
         : keyof REACT_STATICS | keyof KNOWN_STATICS | keyof C
-    >]: S[key];
-  };
+    >]: S[key]
+  }
 }
diff --git a/app/assets/javascripts/ui_models/app_state/account_menu_state.ts b/app/assets/javascripts/UIModels/AppState/AccountMenuState.ts
similarity index 54%
rename from app/assets/javascripts/ui_models/app_state/account_menu_state.ts
rename to app/assets/javascripts/UIModels/AppState/AccountMenuState.ts
index 5bb879a6b..5fe5b3ee1 100644
--- a/app/assets/javascripts/ui_models/app_state/account_menu_state.ts
+++ b/app/assets/javascripts/UIModels/AppState/AccountMenuState.ts
@@ -1,46 +1,32 @@
-import { isDev } from '@/utils';
-import {
-  action,
-  computed,
-  makeObservable,
-  observable,
-  runInAction,
-} from 'mobx';
-import {
-  ApplicationEvent,
-  ContentType,
-  SNNote,
-  SNTag,
-} from '@standardnotes/snjs';
-import { WebApplication } from '@/ui_models/application';
-import { AccountMenuPane } from '@/components/AccountMenu';
+import { isDev } from '@/Utils'
+import { action, computed, makeObservable, observable, runInAction } from 'mobx'
+import { ApplicationEvent, ContentType, SNNote, SNTag } from '@standardnotes/snjs'
+import { WebApplication } from '@/UIModels/Application'
+import { AccountMenuPane } from '@/Components/AccountMenu'
 
 type StructuredItemsCount = {
-  notes: number;
-  tags: number;
-  deleted: number;
-  archived: number;
-};
+  notes: number
+  tags: number
+  deleted: number
+  archived: number
+}
 
 export class AccountMenuState {
-  show = false;
-  signingOut = false;
-  otherSessionsSignOut = false;
-  server: string | undefined = undefined;
-  enableServerOption = false;
-  notesAndTags: (SNNote | SNTag)[] = [];
-  isEncryptionEnabled = false;
-  encryptionStatusString = '';
-  isBackupEncrypted = false;
-  showSignIn = false;
-  showRegister = false;
-  shouldAnimateCloseMenu = false;
-  currentPane = AccountMenuPane.GeneralMenu;
+  show = false
+  signingOut = false
+  otherSessionsSignOut = false
+  server: string | undefined = undefined
+  enableServerOption = false
+  notesAndTags: (SNNote | SNTag)[] = []
+  isEncryptionEnabled = false
+  encryptionStatusString = ''
+  isBackupEncrypted = false
+  showSignIn = false
+  showRegister = false
+  shouldAnimateCloseMenu = false
+  currentPane = AccountMenuPane.GeneralMenu
 
-  constructor(
-    private application: WebApplication,
-    private appEventListeners: (() => void)[]
-  ) {
+  constructor(private application: WebApplication, private appEventListeners: (() => void)[]) {
     makeObservable(this, {
       show: observable,
       signingOut: observable,
@@ -69,10 +55,10 @@ export class AccountMenuState {
       setServer: action,
 
       notesAndTagsCount: computed,
-    });
+    })
 
-    this.addAppLaunchedEventObserver();
-    this.streamNotesAndTags();
+    this.addAppLaunchedEventObserver()
+    this.streamNotesAndTags()
   }
 
   addAppLaunchedEventObserver = (): void => {
@@ -80,96 +66,93 @@ export class AccountMenuState {
       this.application.addEventObserver(async () => {
         runInAction(() => {
           if (isDev && window.devAccountServer) {
-            this.setServer(window.devAccountServer);
-            this.application.setCustomHost(window.devAccountServer);
+            this.setServer(window.devAccountServer)
+            this.application.setCustomHost(window.devAccountServer).catch(console.error)
           } else {
-            this.setServer(this.application.getHost());
+            this.setServer(this.application.getHost())
           }
-        });
-      }, ApplicationEvent.Launched)
-    );
-  };
+        })
+      }, ApplicationEvent.Launched),
+    )
+  }
 
   streamNotesAndTags = (): void => {
     this.appEventListeners.push(
       this.application.streamItems([ContentType.Note, ContentType.Tag], () => {
         runInAction(() => {
-          this.notesAndTags = this.application.items.getItems([
-            ContentType.Note,
-            ContentType.Tag,
-          ]);
-        });
-      })
-    );
-  };
+          this.notesAndTags = this.application.items.getItems([ContentType.Note, ContentType.Tag])
+        })
+      }),
+    )
+  }
 
   setShow = (show: boolean): void => {
-    this.show = show;
-  };
+    this.show = show
+  }
 
   setShouldAnimateClose = (shouldAnimateCloseMenu: boolean): void => {
-    this.shouldAnimateCloseMenu = shouldAnimateCloseMenu;
-  };
+    this.shouldAnimateCloseMenu = shouldAnimateCloseMenu
+  }
 
   closeAccountMenu = (): void => {
-    this.setShouldAnimateClose(true);
+    this.setShouldAnimateClose(true)
     setTimeout(() => {
-      this.setShow(false);
-      this.setShouldAnimateClose(false);
-      this.setCurrentPane(AccountMenuPane.GeneralMenu);
-    }, 150);
-  };
+      this.setShow(false)
+      this.setShouldAnimateClose(false)
+      this.setCurrentPane(AccountMenuPane.GeneralMenu)
+    }, 150)
+  }
 
   setSigningOut = (signingOut: boolean): void => {
-    this.signingOut = signingOut;
-  };
+    this.signingOut = signingOut
+  }
 
   setServer = (server: string | undefined): void => {
-    this.server = server;
-  };
+    this.server = server
+  }
 
   setEnableServerOption = (enableServerOption: boolean): void => {
-    this.enableServerOption = enableServerOption;
-  };
+    this.enableServerOption = enableServerOption
+  }
 
   setIsEncryptionEnabled = (isEncryptionEnabled: boolean): void => {
-    this.isEncryptionEnabled = isEncryptionEnabled;
-  };
+    this.isEncryptionEnabled = isEncryptionEnabled
+  }
 
   setEncryptionStatusString = (encryptionStatusString: string): void => {
-    this.encryptionStatusString = encryptionStatusString;
-  };
+    this.encryptionStatusString = encryptionStatusString
+  }
 
   setIsBackupEncrypted = (isBackupEncrypted: boolean): void => {
-    this.isBackupEncrypted = isBackupEncrypted;
-  };
+    this.isBackupEncrypted = isBackupEncrypted
+  }
 
   setShowSignIn = (showSignIn: boolean): void => {
-    this.showSignIn = showSignIn;
-  };
+    this.showSignIn = showSignIn
+  }
 
   setShowRegister = (showRegister: boolean): void => {
-    this.showRegister = showRegister;
-  };
+    this.showRegister = showRegister
+  }
 
   toggleShow = (): void => {
     if (this.show) {
-      this.closeAccountMenu();
+      this.closeAccountMenu()
     } else {
-      this.setShow(true);
+      this.setShow(true)
     }
-  };
+  }
 
   setOtherSessionsSignOut = (otherSessionsSignOut: boolean): void => {
-    this.otherSessionsSignOut = otherSessionsSignOut;
-  };
+    this.otherSessionsSignOut = otherSessionsSignOut
+  }
 
   setCurrentPane = (pane: AccountMenuPane): void => {
-    this.currentPane = pane;
-  };
+    this.currentPane = pane
+  }
 
   get notesAndTagsCount(): number {
-    return this.notesAndTags.length;
+    return this.notesAndTags.length
   }
 
   get structuredNotesAndTagsCount(): StructuredItemsCount {
@@ -178,24 +161,24 @@ export class AccountMenuState {
       archived: 0,
       deleted: 0,
       tags: 0,
-    };
+    }
     for (const item of this.notesAndTags) {
       if (item.archived) {
-        count.archived++;
+        count.archived++
       }
 
       if (item.trashed) {
-        count.deleted++;
+        count.deleted++
       }
 
       if (item.content_type === ContentType.Note) {
-        count.notes++;
+        count.notes++
       }
 
       if (item.content_type === ContentType.Tag) {
-        count.tags++;
+        count.tags++
       }
     }
-    return count;
+    return count
   }
 }
diff --git a/app/assets/javascripts/UIModels/AppState/ActionsMenuState.ts b/app/assets/javascripts/UIModels/AppState/ActionsMenuState.ts
new file mode 100644
index 000000000..7f5018dd2
--- /dev/null
+++ b/app/assets/javascripts/UIModels/AppState/ActionsMenuState.ts
@@ -0,0 +1,22 @@
+import { UuidString } from '@standardnotes/snjs'
+import { action, makeObservable, observable } from 'mobx'
+
+export class ActionsMenuState {
+  hiddenSections: Record<UuidString, boolean> = {}
+
+  constructor() {
+    makeObservable(this, {
+      hiddenSections: observable,
+      toggleSectionVisibility: action,
+      reset: action,
+    })
+  }
+
+  toggleSectionVisibility = (uuid: UuidString): void => {
+    this.hiddenSections[uuid] = !this.hiddenSections[uuid]
+  }
+
+  reset = (): void => {
+    this.hiddenSections = {}
+  }
+}
diff --git a/app/assets/javascripts/UIModels/AppState/AppState.ts b/app/assets/javascripts/UIModels/AppState/AppState.ts
new file mode 100644
index 000000000..e6736b932
--- /dev/null
+++ b/app/assets/javascripts/UIModels/AppState/AppState.ts
@@ -0,0 +1,429 @@
+import { Bridge } from '@/Services/Bridge'
+import { storage, StorageKey } from '@/Services/LocalStorage'
+import { WebApplication, WebAppEvent } from '@/UIModels/Application'
+import { AccountMenuState } from '@/UIModels/AppState/AccountMenuState'
+import { isDesktopApplication } from '@/Utils'
+import {
+  ApplicationEvent,
+  ContentType,
+  DeinitSource,
+  NoteViewController,
+  PrefKey,
+  SNNote,
+  SmartView,
+  SNTag,
+  SystemViewId,
+  removeFromArray,
+  PayloadSource,
+  Uuid,
+} from '@standardnotes/snjs'
+import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'
+import { ActionsMenuState } from './ActionsMenuState'
+import { FeaturesState } from './FeaturesState'
+import { FilesState } from './FilesState'
+import { NotesState } from './NotesState'
+import { NotesViewState } from './NotesViewState'
+import { NoteTagsState } from './NoteTagsState'
+import { NoAccountWarningState } from './NoAccountWarningState'
+import { PreferencesState } from './PreferencesState'
+import { PurchaseFlowState } from './PurchaseFlowState'
+import { QuickSettingsState } from './QuickSettingsState'
+import { SearchOptionsState } from './SearchOptionsState'
+import { SubscriptionState } from './SubscriptionState'
+import { SyncState } from './SyncState'
+import { TagsState } from './TagsState'
+
+export enum AppStateEvent {
+  TagChanged,
+  ActiveEditorChanged,
+  PanelResized,
+  EditorFocused,
+  BeganBackupDownload,
+  EndedBackupDownload,
+  WindowDidFocus,
+  WindowDidBlur,
+}
+
+export type PanelResizedData = {
+  panel: string
+  collapsed: boolean
+}
+
+export enum EventSource {
+  UserInteraction,
+  Script,
+}
+
+type ObserverCallback = (event: AppStateEvent, data?: any) => Promise<void>
+
+export class AppState {
+  readonly enableUnfinishedFeatures: boolean = window?.enabledUnfinishedFeatures
+
+  application: WebApplication
+  observers: ObserverCallback[] = []
+  locked = true
+  unsubApp: any
+  webAppEventDisposer?: () => void
+  onVisibilityChange: any
+  showBetaWarning: boolean
+
+  private multiEditorSupport = false
+
+  readonly quickSettingsMenu = new QuickSettingsState()
+  readonly accountMenu: AccountMenuState
+  readonly actionsMenu = new ActionsMenuState()
+  readonly preferences = new PreferencesState()
+  readonly purchaseFlow: PurchaseFlowState
+  readonly noAccountWarning: NoAccountWarningState
+  readonly noteTags: NoteTagsState
+  readonly sync = new SyncState()
+  readonly searchOptions: SearchOptionsState
+  readonly notes: NotesState
+  readonly features: FeaturesState
+  readonly tags: TagsState
+  readonly notesView: NotesViewState
+  readonly subscription: SubscriptionState
+  readonly files: FilesState
+
+  isSessionsModalVisible = false
+
+  private appEventObserverRemovers: (() => void)[] = []
+
+  private readonly tagChangedDisposer: IReactionDisposer
+
+  constructor(application: WebApplication, private bridge: Bridge) {
+    this.application = application
+    this.notes = new NotesState(
+      application,
+      this,
+      async () => {
+        await this.notifyEvent(AppStateEvent.ActiveEditorChanged)
+      },
+      this.appEventObserverRemovers,
+    )
+    this.noteTags = new NoteTagsState(application, this, this.appEventObserverRemovers)
+    this.features = new FeaturesState(application)
+    this.tags = new TagsState(application, this.appEventObserverRemovers, this.features)
+    this.noAccountWarning = new NoAccountWarningState(application, this.appEventObserverRemovers)
+    this.accountMenu = new AccountMenuState(application, this.appEventObserverRemovers)
+    this.searchOptions = new SearchOptionsState(application, this.appEventObserverRemovers)
+    this.subscription = new SubscriptionState(application, this.appEventObserverRemovers)
+    this.purchaseFlow = new PurchaseFlowState(application)
+    this.notesView = new NotesViewState(application, this, this.appEventObserverRemovers)
+    this.files = new FilesState(application)
+    this.addAppEventObserver()
+    this.streamNotesAndTags()
+    this.onVisibilityChange = () => {
+      const visible = document.visibilityState === 'visible'
+      const event = visible ? AppStateEvent.WindowDidFocus : AppStateEvent.WindowDidBlur
+      this.notifyEvent(event).catch(console.error)
+    }
+    this.registerVisibilityObservers()
+
+    if (this.bridge.appVersion.includes('-beta')) {
+      this.showBetaWarning = storage.get(StorageKey.ShowBetaWarning) ?? true
+    } else {
+      this.showBetaWarning = false
+    }
+
+    makeObservable(this, {
+      selectedTag: computed,
+
+      showBetaWarning: observable,
+      isSessionsModalVisible: observable,
+      preferences: observable,
+
+      enableBetaWarning: action,
+      disableBetaWarning: action,
+      openSessionsModal: action,
+      closeSessionsModal: action,
+    })
+
+    this.tagChangedDisposer = this.tagChangedNotifier()
+  }
+
+  deinit(source: DeinitSource): void {
+    if (source === DeinitSource.SignOut) {
+      storage.remove(StorageKey.ShowBetaWarning)
+      this.noAccountWarning.reset()
+    }
+    ;(this.application as unknown) = undefined
+    this.actionsMenu.reset()
+    this.unsubApp?.()
+    this.unsubApp = undefined
+    this.observers.length = 0
+
+    this.appEventObserverRemovers.forEach((remover) => remover())
+    this.appEventObserverRemovers.length = 0
+
+    this.features.deinit()
+    ;(this.features as unknown) = undefined
+
+    this.webAppEventDisposer?.()
+    this.webAppEventDisposer = undefined
+    ;(this.quickSettingsMenu as unknown) = undefined
+    ;(this.accountMenu as unknown) = undefined
+    ;(this.actionsMenu as unknown) = undefined
+    ;(this.preferences as unknown) = undefined
+    ;(this.purchaseFlow as unknown) = undefined
+    ;(this.noteTags as unknown) = undefined
+    ;(this.sync as unknown) = undefined
+    ;(this.searchOptions as unknown) = undefined
+    ;(this.notes as unknown) = undefined
+    ;(this.features as unknown) = undefined
+    ;(this.tags as unknown) = undefined
+    ;(this.notesView as unknown) = undefined
+
+    document.removeEventListener('visibilitychange', this.onVisibilityChange)
+    this.onVisibilityChange = undefined
+
+    this.tagChangedDisposer()
+    ;(this.tagChangedDisposer as unknown) = undefined
+  }
+
+  openSessionsModal(): void {
+    this.isSessionsModalVisible = true
+  }
+
+  closeSessionsModal(): void {
+    this.isSessionsModalVisible = false
+  }
+
+  disableBetaWarning() {
+    this.showBetaWarning = false
+    storage.set(StorageKey.ShowBetaWarning, false)
+  }
+
+  enableBetaWarning() {
+    this.showBetaWarning = true
+    storage.set(StorageKey.ShowBetaWarning, true)
+  }
+
+  public get version(): string {
+    return this.bridge.appVersion
+  }
+
+  async openNewNote(title?: string) {
+    if (!this.multiEditorSupport) {
+      this.closeActiveNoteController()
+    }
+
+    const selectedTag = this.selectedTag
+
+    const activeRegularTagUuid =
+      selectedTag && selectedTag instanceof SNTag ? selectedTag.uuid : undefined
+
+    await this.application.noteControllerGroup.createNoteView(
+      undefined,
+      title,
+      activeRegularTagUuid,
+    )
+  }
+
+  getActiveNoteController() {
+    return this.application.noteControllerGroup.noteControllers[0]
+  }
+
+  getNoteControllers() {
+    return this.application.noteControllerGroup.noteControllers
+  }
+
+  closeNoteController(controller: NoteViewController) {
+    this.application.noteControllerGroup.closeNoteView(controller)
+  }
+
+  closeActiveNoteController() {
+    this.application.noteControllerGroup.closeActiveNoteView()
+  }
+
+  closeAllNoteControllers() {
+    this.application.noteControllerGroup.closeAllNoteViews()
+  }
+
+  noteControllerForNote(uuid: Uuid) {
+    for (const controller of this.getNoteControllers()) {
+      if (controller.note.uuid === uuid) {
+        return controller
+      }
+    }
+    return undefined
+  }
+
+  isGlobalSpellcheckEnabled(): boolean {
+    return this.application.getPreference(PrefKey.EditorSpellcheck, true)
+  }
+
+  async toggleGlobalSpellcheck() {
+    const currentValue = this.isGlobalSpellcheckEnabled()
+    return this.application.setPreference(PrefKey.EditorSpellcheck, !currentValue)
+  }
+
+  private tagChangedNotifier(): IReactionDisposer {
+    return reaction(
+      () => this.tags.selectedUuid,
+      () => {
+        const tag = this.tags.selected
+        const previousTag = this.tags.previouslySelected
+
+        if (!tag) {
+          return
+        }
+
+        if (this.application.items.isTemplateItem(tag)) {
+          return
+        }
+
+        this.notifyEvent(AppStateEvent.TagChanged, {
+          tag,
+          previousTag,
+        }).catch(console.error)
+      },
+    )
+  }
+
+  public get selectedTag(): SNTag | SmartView | undefined {
+    return this.tags.selected
+  }
+
+  public set selectedTag(tag: SNTag | SmartView | undefined) {
+    this.tags.selected = tag
+  }
+
+  streamNotesAndTags() {
+    this.application.streamItems<SNNote | SNTag>(
+      [ContentType.Note, ContentType.Tag],
+      async ({ changed, inserted, removed, source }) => {
+        if (![PayloadSource.PreSyncSave, PayloadSource.RemoteRetrieved].includes(source)) {
+          return
+        }
+
+        const removedNotes = removed.filter((i) => i.content_type === ContentType.Note)
+
+        for (const removedNote of removedNotes) {
+          const noteController = this.noteControllerForNote(removedNote.uuid)
+          if (noteController) {
+            this.closeNoteController(noteController)
+          }
+        }
+
+        const changedOrInserted = [...changed, ...inserted].filter(
+          (i) => i.content_type === ContentType.Note,
+        )
+
+        const selectedTag = this.tags.selected
+
+        const isBrowswingTrashedNotes =
+          selectedTag instanceof SmartView && selectedTag.uuid === SystemViewId.TrashedNotes
+
+        const isBrowsingArchivedNotes =
+          selectedTag instanceof SmartView && selectedTag.uuid === SystemViewId.ArchivedNotes
+
+        for (const note of changedOrInserted) {
+          const noteController = this.noteControllerForNote(note.uuid)
+          if (!noteController) {
+            continue
+          }
+
+          if (note.trashed && !isBrowswingTrashedNotes && !this.searchOptions.includeTrashed) {
+            this.closeNoteController(noteController)
+          } else if (
+            note.archived &&
+            !isBrowsingArchivedNotes &&
+            !this.searchOptions.includeArchived &&
+            !this.application.getPreference(PrefKey.NotesShowArchived, false)
+          ) {
+            this.closeNoteController(noteController)
+          }
+        }
+      },
+    )
+  }
+
+  addAppEventObserver() {
+    this.unsubApp = this.application.addEventObserver(async (eventName) => {
+      switch (eventName) {
+        case ApplicationEvent.Started:
+          this.locked = true
+          break
+        case ApplicationEvent.Launched:
+          this.locked = false
+          if (window.location.search.includes('purchase=true')) {
+            this.purchaseFlow.openPurchaseFlow()
+          }
+          break
+        case ApplicationEvent.SyncStatusChanged:
+          this.sync.update(this.application.sync.getSyncStatus())
+          break
+      }
+    })
+  }
+
+  isLocked() {
+    return this.locked
+  }
+
+  registerVisibilityObservers() {
+    if (isDesktopApplication()) {
+      this.webAppEventDisposer = this.application.addWebEventObserver((event) => {
+        if (event === WebAppEvent.DesktopWindowGainedFocus) {
+          this.notifyEvent(AppStateEvent.WindowDidFocus).catch(console.error)
+        } else if (event === WebAppEvent.DesktopWindowLostFocus) {
+          this.notifyEvent(AppStateEvent.WindowDidBlur).catch(console.error)
+        }
+      })
+    } else {
+      /* Tab visibility listener, web only */
+      document.addEventListener('visibilitychange', this.onVisibilityChange)
+    }
+  }
+
+  /** @returns  A function that unregisters this observer */
+  addObserver(callback: ObserverCallback) {
+    this.observers.push(callback)
+    return () => {
+      removeFromArray(this.observers, callback)
+    }
+  }
+
+  async notifyEvent(eventName: AppStateEvent, data?: any) {
+    /**
+     * Timeout is particularly important so we can give all initial
+     * controllers a chance to construct before propogting any events *
+     */
+    return new Promise<void>((resolve) => {
+      setTimeout(async () => {
+        for (const callback of this.observers) {
+          await callback(eventName, data)
+        }
+        resolve()
+      })
+    })
+  }
+
+  /** Returns the tags that are referncing this note */
+  public getNoteTags(note: SNNote) {
+    return this.application.items.itemsReferencingItem(note).filter((ref) => {
+      return ref.content_type === ContentType.Tag
+    }) as SNTag[]
+  }
+
+  panelDidResize(name: string, collapsed: boolean) {
+    const data: PanelResizedData = {
+      panel: name,
+      collapsed: collapsed,
+    }
+    this.notifyEvent(AppStateEvent.PanelResized, data).catch(console.error)
+  }
+
+  editorDidFocus(eventSource: EventSource) {
+    this.notifyEvent(AppStateEvent.EditorFocused, { eventSource: eventSource }).catch(console.error)
+  }
+
+  beganBackupDownload() {
+    this.notifyEvent(AppStateEvent.BeganBackupDownload).catch(console.error)
+  }
+
+  endedBackupDownload(success: boolean) {
+    this.notifyEvent(AppStateEvent.EndedBackupDownload, { success: success }).catch(console.error)
+  }
+}
diff --git a/app/assets/javascripts/UIModels/AppState/FeaturesState.ts b/app/assets/javascripts/UIModels/AppState/FeaturesState.ts
new file mode 100644
index 000000000..24217545a
--- /dev/null
+++ b/app/assets/javascripts/UIModels/AppState/FeaturesState.ts
@@ -0,0 +1,87 @@
+import { ApplicationEvent, FeatureIdentifier, FeatureStatus } from '@standardnotes/snjs'
+import { action, computed, makeObservable, observable, runInAction, when } from 'mobx'
+import { WebApplication } from '../Application'
+
+export const TAG_FOLDERS_FEATURE_NAME = 'Tag folders'
+export const TAG_FOLDERS_FEATURE_TOOLTIP = 'A Plus or Pro plan is required to enable Tag folders.'
+
+export const SMART_TAGS_FEATURE_NAME = 'Smart Tags'
+
+/**
+ * Holds state for premium/non premium features for the current user features,
+ * and eventually for in-development features (feature flags).
+ */
+export class FeaturesState {
+  readonly enableUnfinishedFeatures: boolean = window?.enabledUnfinishedFeatures
+
+  _hasFolders = false
+  _hasSmartViews = false
+  _premiumAlertFeatureName: string | undefined
+
+  private unsub: () => void
+
+  constructor(private application: WebApplication) {
+    this._hasFolders = this.hasNativeFolders()
+    this._hasSmartViews = this.hasNativeSmartViews()
+    this._premiumAlertFeatureName = undefined
+
+    makeObservable(this, {
+      _hasFolders: observable,
+      _hasSmartViews: observable,
+      hasFolders: computed,
+      _premiumAlertFeatureName: observable,
+      showPremiumAlert: action,
+      closePremiumAlert: action,
+    })
+
+    this.showPremiumAlert = this.showPremiumAlert.bind(this)
+    this.closePremiumAlert = this.closePremiumAlert.bind(this)
+
+    this.unsub = this.application.addEventObserver(async (eventName) => {
+      switch (eventName) {
+        case ApplicationEvent.FeaturesUpdated:
+        case ApplicationEvent.Launched:
+          runInAction(() => {
+            this._hasFolders = this.hasNativeFolders()
+            this._hasSmartViews = this.hasNativeSmartViews()
+          })
+          break
+        default:
+          break
+      }
+    })
+  }
+
+  public deinit() {
+    this.unsub()
+  }
+
+  public get hasFolders(): boolean {
+    return this._hasFolders
+  }
+
+  public get hasSmartViews(): boolean {
+    return this._hasSmartViews
+  }
+
+  public async showPremiumAlert(featureName: string): Promise<void> {
+    this._premiumAlertFeatureName = featureName
+    return when(() => this._premiumAlertFeatureName === undefined)
+  }
+
+  public async closePremiumAlert(): Promise<void> {
+    this._premiumAlertFeatureName = undefined
+  }
+
+  private hasNativeFolders(): boolean {
+    const status = this.application.features.getFeatureStatus(FeatureIdentifier.TagNesting)
+
+    return status === FeatureStatus.Entitled
+  }
+
+  private hasNativeSmartViews(): boolean {
+    const status = this.application.features.getFeatureStatus(FeatureIdentifier.SmartFilters)
+
+    return status === FeatureStatus.Entitled
+  }
+}
diff --git a/app/assets/javascripts/UIModels/AppState/FilesState.ts b/app/assets/javascripts/UIModels/AppState/FilesState.ts
new file mode 100644
index 000000000..d1a8b1bf2
--- /dev/null
+++ b/app/assets/javascripts/UIModels/AppState/FilesState.ts
@@ -0,0 +1,169 @@
+import { BYTES_IN_ONE_MEGABYTE } from '@/Constants'
+import { concatenateUint8Arrays } from '@/Utils/ConcatenateUint8Arrays'
+import {
+  ClassicFileReader,
+  StreamingFileReader,
+  StreamingFileSaver,
+  ClassicFileSaver,
+  parseFileName,
+} from '@standardnotes/filepicker'
+import { ClientDisplayableError, SNFile } from '@standardnotes/snjs'
+import { addToast, dismissToast, ToastType } from '@standardnotes/stylekit'
+
+import { WebApplication } from '../Application'
+
+export class FilesState {
+  constructor(private application: WebApplication) {}
+
+  public async downloadFile(file: SNFile): Promise<void> {
+    let downloadingToastId = ''
+
+    try {
+      const saver = StreamingFileSaver.available()
+        ? new StreamingFileSaver(file.name)
+        : new ClassicFileSaver()
+
+      const isUsingStreamingSaver = saver instanceof StreamingFileSaver
+
+      if (isUsingStreamingSaver) {
+        await saver.selectFileToSaveTo()
+      }
+
+      downloadingToastId = addToast({
+        type: ToastType.Loading,
+        message: 'Downloading file...',
+      })
+
+      const decryptedBytesArray: Uint8Array[] = []
+
+      await this.application.files.downloadFile(file, async (decryptedBytes: Uint8Array) => {
+        if (isUsingStreamingSaver) {
+          await saver.pushBytes(decryptedBytes)
+        } else {
+          decryptedBytesArray.push(decryptedBytes)
+        }
+      })
+
+      if (isUsingStreamingSaver) {
+        await saver.finish()
+      } else {
+        const finalBytes = concatenateUint8Arrays(decryptedBytesArray)
+        saver.saveFile(file.name, finalBytes)
+      }
+
+      addToast({
+        type: ToastType.Success,
+        message: 'Successfully downloaded file',
+      })
+    } catch (error) {
+      console.error(error)
+
+      addToast({
+        type: ToastType.Error,
+        message: 'There was an error while downloading the file',
+      })
+    }
+
+    if (downloadingToastId.length > 0) {
+      dismissToast(downloadingToastId)
+    }
+  }
+
+  public async uploadNewFile(fileOrHandle?: File | FileSystemFileHandle) {
+    let toastId = ''
+
+    try {
+      const minimumChunkSize = this.application.files.minimumChunkSize()
+
+      const shouldUseStreamingReader = StreamingFileReader.available()
+
+      const picker = shouldUseStreamingReader ? StreamingFileReader : ClassicFileReader
+      const maxFileSize = picker.maximumFileSize()
+
+      const selectedFiles =
+        fileOrHandle instanceof File
+          ? [fileOrHandle]
+          : StreamingFileReader.available() && fileOrHandle instanceof FileSystemFileHandle
+          ? await StreamingFileReader.getFilesFromHandles([fileOrHandle])
+          : await picker.selectFiles()
+
+      if (selectedFiles.length === 0) {
+        return
+      }
+
+      const uploadedFiles: SNFile[] = []
+
+      for (const file of selectedFiles) {
+        if (!shouldUseStreamingReader && maxFileSize && file.size >= maxFileSize) {
+          this.application.alertService
+            .alert(
+              `This file exceeds the limits supported in this browser. To upload files greater than ${
+                maxFileSize / BYTES_IN_ONE_MEGABYTE
+              }MB, please use the desktop application or the Chrome browser.`,
+              `Cannot upload file "${file.name}"`,
+            )
+            .catch(console.error)
+          continue
+        }
+
+        toastId = addToast({
+          type: ToastType.Loading,
+          message: `Uploading file "${file.name}"...`,
+        })
+
+        const operation = await this.application.files.beginNewFileUpload()
+
+        if (operation instanceof ClientDisplayableError) {
+          addToast({
+            type: ToastType.Error,
+            message: 'Unable to start upload session',
+          })
+          throw new Error('Unable to start upload session')
+        }
+
+        const onChunk = async (chunk: Uint8Array, index: number, isLast: boolean) => {
+          await this.application.files.pushBytesForUpload(operation, chunk, index, isLast)
+        }
+
+        const fileResult = await picker.readFile(file, minimumChunkSize, onChunk)
+
+        if (!fileResult.mimeType) {
+          const { ext } = parseFileName(file.name)
+          fileResult.mimeType = await this.application.getArchiveService().getMimeType(ext)
+        }
+
+        const uploadedFile = await this.application.files.finishUpload(operation, fileResult)
+
+        if (uploadedFile instanceof ClientDisplayableError) {
+          addToast({
+            type: ToastType.Error,
+            message: 'Unable to close upload session',
+          })
+          throw new Error('Unable to close upload session')
+        }
+
+        uploadedFiles.push(uploadedFile)
+
+        dismissToast(toastId)
+        addToast({
+          type: ToastType.Success,
+          message: `Uploaded file "${uploadedFile.name}"`,
+        })
+      }
+
+      return uploadedFiles
+    } catch (error) {
+      console.error(error)
+
+      if (toastId.length > 0) {
+        dismissToast(toastId)
+      }
+      addToast({
+        type: ToastType.Error,
+        message: 'There was an error while uploading the file',
+      })
+    }
+
+    return undefined
+  }
+}
diff --git a/app/assets/javascripts/ui_models/app_state/no_account_warning_state.ts b/app/assets/javascripts/UIModels/AppState/NoAccountWarningState.ts
similarity index 61%
rename from app/assets/javascripts/ui_models/app_state/no_account_warning_state.ts
rename to app/assets/javascripts/UIModels/AppState/NoAccountWarningState.ts
index 654c15054..a0725211d 100644
--- a/app/assets/javascripts/ui_models/app_state/no_account_warning_state.ts
+++ b/app/assets/javascripts/UIModels/AppState/NoAccountWarningState.ts
@@ -1,41 +1,41 @@
-import { storage, StorageKey } from '@/services/localStorage';
-import { SNApplication, ApplicationEvent } from '@standardnotes/snjs';
-import { runInAction, makeObservable, observable, action } from 'mobx';
+import { storage, StorageKey } from '@/Services/LocalStorage'
+import { SNApplication, ApplicationEvent } from '@standardnotes/snjs'
+import { runInAction, makeObservable, observable, action } from 'mobx'
 
 export class NoAccountWarningState {
-  show: boolean;
+  show: boolean
   constructor(application: SNApplication, appObservers: (() => void)[]) {
     this.show = application.hasAccount()
       ? false
-      : storage.get(StorageKey.ShowNoAccountWarning) ?? true;
+      : storage.get(StorageKey.ShowNoAccountWarning) ?? true
 
     appObservers.push(
       application.addEventObserver(async () => {
         runInAction(() => {
-          this.show = false;
-        });
+          this.show = false
+        })
       }, ApplicationEvent.SignedIn),
       application.addEventObserver(async () => {
         if (application.hasAccount()) {
           runInAction(() => {
-            this.show = false;
-          });
+            this.show = false
+          })
         }
-      }, ApplicationEvent.Started)
-    );
+      }, ApplicationEvent.Started),
+    )
 
     makeObservable(this, {
       show: observable,
       hide: action,
-    });
+    })
   }
 
   hide = (): void => {
-    this.show = false;
-    storage.set(StorageKey.ShowNoAccountWarning, false);
-  };
+    this.show = false
+    storage.set(StorageKey.ShowNoAccountWarning, false)
+  }
 
   reset = (): void => {
-    storage.remove(StorageKey.ShowNoAccountWarning);
-  };
+    storage.remove(StorageKey.ShowNoAccountWarning)
+  }
 }
diff --git a/app/assets/javascripts/ui_models/app_state/note_tags_state.ts b/app/assets/javascripts/UIModels/AppState/NoteTagsState.ts
similarity index 50%
rename from app/assets/javascripts/ui_models/app_state/note_tags_state.ts
rename to app/assets/javascripts/UIModels/AppState/NoteTagsState.ts
index a5f26c786..a776dedfb 100644
--- a/app/assets/javascripts/ui_models/app_state/note_tags_state.ts
+++ b/app/assets/javascripts/UIModels/AppState/NoteTagsState.ts
@@ -1,31 +1,31 @@
-import { ElementIds } from '@/element_ids';
-import { ApplicationEvent } from '@standardnotes/snjs';
+import { ElementIds } from '@/ElementIDs'
 import {
+  ApplicationEvent,
   ContentType,
   PrefKey,
   SNNote,
   SNTag,
   UuidString,
-} from '@standardnotes/snjs';
-import { action, computed, makeObservable, observable } from 'mobx';
-import { WebApplication } from '../application';
-import { AppState } from './app_state';
+} from '@standardnotes/snjs'
+import { action, computed, makeObservable, observable } from 'mobx'
+import { WebApplication } from '../Application'
+import { AppState } from './AppState'
 
 export class NoteTagsState {
-  autocompleteInputFocused = false;
-  autocompleteSearchQuery = '';
-  autocompleteTagHintFocused = false;
-  autocompleteTagResults: SNTag[] = [];
-  focusedTagResultUuid: UuidString | undefined = undefined;
-  focusedTagUuid: UuidString | undefined = undefined;
-  tags: SNTag[] = [];
-  tagsContainerMaxWidth: number | 'auto' = 0;
-  addNoteToParentFolders: boolean;
+  autocompleteInputFocused = false
+  autocompleteSearchQuery = ''
+  autocompleteTagHintFocused = false
+  autocompleteTagResults: SNTag[] = []
+  focusedTagResultUuid: UuidString | undefined = undefined
+  focusedTagUuid: UuidString | undefined = undefined
+  tags: SNTag[] = []
+  tagsContainerMaxWidth: number | 'auto' = 0
+  addNoteToParentFolders: boolean
 
   constructor(
     private application: WebApplication,
     private appState: AppState,
-    appEventListeners: (() => void)[]
+    appEventListeners: (() => void)[],
   ) {
     makeObservable(this, {
       autocompleteInputFocused: observable,
@@ -47,206 +47,186 @@ export class NoteTagsState {
       setFocusedTagUuid: action,
       setTags: action,
       setTagsContainerMaxWidth: action,
-    });
+    })
 
-    this.addNoteToParentFolders = application.getPreference(
-      PrefKey.NoteAddToParentFolders,
-      true
-    );
+    this.addNoteToParentFolders = application.getPreference(PrefKey.NoteAddToParentFolders, true)
 
     appEventListeners.push(
       application.streamItems(ContentType.Tag, () => {
-        this.reloadTags();
+        this.reloadTags()
       }),
-      application.addSingleEventObserver(
-        ApplicationEvent.PreferencesChanged,
-        async () => {
-          this.addNoteToParentFolders = application.getPreference(
-            PrefKey.NoteAddToParentFolders,
-            true
-          );
-        }
-      )
-    );
+      application.addSingleEventObserver(ApplicationEvent.PreferencesChanged, async () => {
+        this.addNoteToParentFolders = application.getPreference(
+          PrefKey.NoteAddToParentFolders,
+          true,
+        )
+      }),
+    )
   }
 
   get activeNote(): SNNote | undefined {
-    return this.appState.notes.activeNoteController?.note;
+    return this.appState.notes.activeNoteController?.note
   }
 
   get autocompleteTagHintVisible(): boolean {
     return (
       this.autocompleteSearchQuery !== '' &&
       !this.autocompleteTagResults.some(
-        (tagResult) => tagResult.title === this.autocompleteSearchQuery
+        (tagResult) => tagResult.title === this.autocompleteSearchQuery,
       )
-    );
+    )
   }
 
   setAutocompleteInputFocused(focused: boolean): void {
-    this.autocompleteInputFocused = focused;
+    this.autocompleteInputFocused = focused
   }
 
   setAutocompleteSearchQuery(query: string): void {
-    this.autocompleteSearchQuery = query;
+    this.autocompleteSearchQuery = query
   }
 
   setAutocompleteTagHintFocused(focused: boolean): void {
-    this.autocompleteTagHintFocused = focused;
+    this.autocompleteTagHintFocused = focused
   }
 
   setAutocompleteTagResults(results: SNTag[]): void {
-    this.autocompleteTagResults = results;
+    this.autocompleteTagResults = results
   }
 
   setFocusedTagUuid(tagUuid: UuidString | undefined): void {
-    this.focusedTagUuid = tagUuid;
+    this.focusedTagUuid = tagUuid
   }
 
   setFocusedTagResultUuid(tagUuid: UuidString | undefined): void {
-    this.focusedTagResultUuid = tagUuid;
+    this.focusedTagResultUuid = tagUuid
   }
 
   setTags(tags: SNTag[]): void {
-    this.tags = tags;
+    this.tags = tags
   }
 
   setTagsContainerMaxWidth(width: number): void {
-    this.tagsContainerMaxWidth = width;
+    this.tagsContainerMaxWidth = width
   }
 
   clearAutocompleteSearch(): void {
-    this.setAutocompleteSearchQuery('');
-    this.setAutocompleteTagResults([]);
+    this.setAutocompleteSearchQuery('')
+    this.setAutocompleteTagResults([])
   }
 
   async createAndAddNewTag(): Promise<void> {
-    const newTag = await this.application.mutator.findOrCreateTag(
-      this.autocompleteSearchQuery
-    );
-    await this.addTagToActiveNote(newTag);
-    this.clearAutocompleteSearch();
+    const newTag = await this.application.mutator.findOrCreateTag(this.autocompleteSearchQuery)
+    await this.addTagToActiveNote(newTag)
+    this.clearAutocompleteSearch()
   }
 
   focusNextTag(tag: SNTag): void {
-    const nextTagIndex = this.getTagIndex(tag, this.tags) + 1;
+    const nextTagIndex = this.getTagIndex(tag, this.tags) + 1
     if (nextTagIndex > -1 && this.tags.length > nextTagIndex) {
-      const nextTag = this.tags[nextTagIndex];
-      this.setFocusedTagUuid(nextTag.uuid);
+      const nextTag = this.tags[nextTagIndex]
+      this.setFocusedTagUuid(nextTag.uuid)
     }
   }
 
   focusNextTagResult(tagResult: SNTag): void {
-    const nextTagResultIndex =
-      this.getTagIndex(tagResult, this.autocompleteTagResults) + 1;
-    if (
-      nextTagResultIndex > -1 &&
-      this.autocompleteTagResults.length > nextTagResultIndex
-    ) {
-      const nextTagResult = this.autocompleteTagResults[nextTagResultIndex];
-      this.setFocusedTagResultUuid(nextTagResult.uuid);
+    const nextTagResultIndex = this.getTagIndex(tagResult, this.autocompleteTagResults) + 1
+    if (nextTagResultIndex > -1 && this.autocompleteTagResults.length > nextTagResultIndex) {
+      const nextTagResult = this.autocompleteTagResults[nextTagResultIndex]
+      this.setFocusedTagResultUuid(nextTagResult.uuid)
     }
   }
 
   focusPreviousTag(tag: SNTag): void {
-    const previousTagIndex = this.getTagIndex(tag, this.tags) - 1;
+    const previousTagIndex = this.getTagIndex(tag, this.tags) - 1
     if (previousTagIndex > -1 && this.tags.length > previousTagIndex) {
-      const previousTag = this.tags[previousTagIndex];
-      this.setFocusedTagUuid(previousTag.uuid);
+      const previousTag = this.tags[previousTagIndex]
+      this.setFocusedTagUuid(previousTag.uuid)
     }
   }
 
   focusPreviousTagResult(tagResult: SNTag): void {
-    const previousTagResultIndex =
-      this.getTagIndex(tagResult, this.autocompleteTagResults) - 1;
+    const previousTagResultIndex = this.getTagIndex(tagResult, this.autocompleteTagResults) - 1
     if (
       previousTagResultIndex > -1 &&
       this.autocompleteTagResults.length > previousTagResultIndex
     ) {
-      const previousTagResult =
-        this.autocompleteTagResults[previousTagResultIndex];
-      this.setFocusedTagResultUuid(previousTagResult.uuid);
+      const previousTagResult = this.autocompleteTagResults[previousTagResultIndex]
+      this.setFocusedTagResultUuid(previousTagResult.uuid)
     }
   }
 
   searchActiveNoteAutocompleteTags(): void {
     const newResults = this.application.items.searchTags(
       this.autocompleteSearchQuery,
-      this.activeNote
-    );
-    this.setAutocompleteTagResults(newResults);
+      this.activeNote,
+    )
+    this.setAutocompleteTagResults(newResults)
   }
 
   getTagIndex(tag: SNTag, tagsArr: SNTag[]): number {
-    return tagsArr.findIndex((t) => t.uuid === tag.uuid);
+    return tagsArr.findIndex((t) => t.uuid === tag.uuid)
   }
 
   reloadTags(): void {
-    const { activeNote } = this;
+    const { activeNote } = this
     if (activeNote) {
-      const tags = this.application.items.getSortedTagsForNote(activeNote);
-      this.setTags(tags);
+      const tags = this.application.items.getSortedTagsForNote(activeNote)
+      this.setTags(tags)
     }
   }
 
   reloadTagsContainerMaxWidth(): void {
-    const editorWidth = document.getElementById(
-      ElementIds.EditorColumn
-    )?.clientWidth;
+    const editorWidth = document.getElementById(ElementIds.EditorColumn)?.clientWidth
     if (editorWidth) {
-      this.setTagsContainerMaxWidth(editorWidth);
+      this.setTagsContainerMaxWidth(editorWidth)
     }
   }
 
   async addTagToActiveNote(tag: SNTag): Promise<void> {
-    const { activeNote } = this;
+    const { activeNote } = this
 
     if (activeNote) {
-      await this.application.items.addTagToNote(
-        activeNote,
-        tag,
-        this.addNoteToParentFolders
-      );
-      this.application.sync.sync();
-      this.reloadTags();
+      await this.application.items.addTagToNote(activeNote, tag, this.addNoteToParentFolders)
+      this.application.sync.sync().catch(console.error)
+      this.reloadTags()
     }
   }
 
   async removeTagFromActiveNote(tag: SNTag): Promise<void> {
-    const { activeNote } = this;
+    const { activeNote } = this
     if (activeNote) {
       await this.application.mutator.changeItem(tag, (mutator) => {
-        mutator.removeItemAsRelationship(activeNote);
-      });
-      this.application.sync.sync();
-      this.reloadTags();
+        mutator.removeItemAsRelationship(activeNote)
+      })
+      this.application.sync.sync().catch(console.error)
+      this.reloadTags()
     }
   }
 
   getSortedTagsForNote(note: SNNote): SNTag[] {
-    const tags = this.application.items.getSortedTagsForNote(note);
+    const tags = this.application.items.getSortedTagsForNote(note)
 
     const sortFunction = (tagA: SNTag, tagB: SNTag): number => {
-      const a = this.getLongTitle(tagA);
-      const b = this.getLongTitle(tagB);
+      const a = this.getLongTitle(tagA)
+      const b = this.getLongTitle(tagB)
 
       if (a < b) {
-        return -1;
+        return -1
       }
       if (b > a) {
-        return 1;
+        return 1
       }
-      return 0;
-    };
+      return 0
+    }
 
-    return tags.sort(sortFunction);
+    return tags.sort(sortFunction)
   }
 
   getPrefixTitle(tag: SNTag): string | undefined {
-    return this.application.items.getTagPrefixTitle(tag);
+    return this.application.items.getTagPrefixTitle(tag)
   }
 
   getLongTitle(tag: SNTag): string {
-    return this.application.items.getTagLongTitle(tag);
+    return this.application.items.getTagLongTitle(tag)
   }
 }
diff --git a/app/assets/javascripts/ui_models/app_state/notes_state.ts b/app/assets/javascripts/UIModels/AppState/NotesState.ts
similarity index 51%
rename from app/assets/javascripts/ui_models/app_state/notes_state.ts
rename to app/assets/javascripts/UIModels/AppState/NotesState.ts
index c01ecc378..d85a45c48 100644
--- a/app/assets/javascripts/ui_models/app_state/notes_state.ts
+++ b/app/assets/javascripts/UIModels/AppState/NotesState.ts
@@ -1,7 +1,7 @@
-import { confirmDialog } from '@/services/alertService';
-import { KeyboardModifier } from '@/services/ioService';
-import { StringEmptyTrash, Strings, StringUtils } from '@/strings';
-import { MENU_MARGIN_FROM_APP_BORDER } from '@/constants';
+import { confirmDialog } from '@/Services/AlertService'
+import { KeyboardModifier } from '@/Services/IOService'
+import { StringEmptyTrash, Strings, StringUtils } from '@/Strings'
+import { MENU_MARGIN_FROM_APP_BORDER } from '@/Constants'
 import {
   UuidString,
   SNNote,
@@ -10,35 +10,29 @@ import {
   SNTag,
   ChallengeReason,
   NoteViewController,
-} from '@standardnotes/snjs';
-import {
-  makeObservable,
-  observable,
-  action,
-  computed,
-  runInAction,
-} from 'mobx';
-import { WebApplication } from '../application';
-import { AppState } from './app_state';
+} from '@standardnotes/snjs'
+import { makeObservable, observable, action, computed, runInAction } from 'mobx'
+import { WebApplication } from '../Application'
+import { AppState } from './AppState'
 
 export class NotesState {
-  lastSelectedNote: SNNote | undefined;
-  selectedNotes: Record<UuidString, SNNote> = {};
-  contextMenuOpen = false;
+  lastSelectedNote: SNNote | undefined
+  selectedNotes: Record<UuidString, SNNote> = {}
+  contextMenuOpen = false
   contextMenuPosition: { top?: number; left: number; bottom?: number } = {
     top: 0,
     left: 0,
-  };
-  contextMenuClickLocation: { x: number; y: number } = { x: 0, y: 0 };
-  contextMenuMaxHeight: number | 'auto' = 'auto';
-  showProtectedWarning = false;
-  showRevisionHistoryModal = false;
+  }
+  contextMenuClickLocation: { x: number; y: number } = { x: 0, y: 0 }
+  contextMenuMaxHeight: number | 'auto' = 'auto'
+  showProtectedWarning = false
+  showRevisionHistoryModal = false
 
   constructor(
     private application: WebApplication,
     private appState: AppState,
     private onActiveEditorChanged: () => Promise<void>,
-    appEventListeners: (() => void)[]
+    appEventListeners: (() => void)[],
   ) {
     makeObservable(this, {
       selectedNotes: observable,
@@ -57,194 +51,171 @@ export class NotesState {
       setShowProtectedWarning: action,
       setShowRevisionHistoryModal: action,
       unselectNotes: action,
-    });
+    })
 
     appEventListeners.push(
-      application.streamItems<SNNote>(
-        ContentType.Note,
-        ({ changed, inserted, removed }) => {
-          runInAction(() => {
-            for (const removedNote of removed) {
-              delete this.selectedNotes[removedNote.uuid];
-            }
+      application.streamItems<SNNote>(ContentType.Note, ({ changed, inserted, removed }) => {
+        runInAction(() => {
+          for (const removedNote of removed) {
+            delete this.selectedNotes[removedNote.uuid]
+          }
 
-            for (const note of [...changed, ...inserted]) {
-              if (this.selectedNotes[note.uuid]) {
-                this.selectedNotes[note.uuid] = note;
-              }
+          for (const note of [...changed, ...inserted]) {
+            if (this.selectedNotes[note.uuid]) {
+              this.selectedNotes[note.uuid] = note
             }
-          });
-        }
-      )
-    );
+          }
+        })
+      }),
+    )
   }
 
   get activeNoteController(): NoteViewController | undefined {
-    return this.application.noteControllerGroup.noteControllers[0];
+    return this.application.noteControllerGroup.noteControllers[0]
   }
 
   get selectedNotesCount(): number {
-    return Object.keys(this.selectedNotes).length;
+    return Object.keys(this.selectedNotes).length
   }
 
   get trashedNotesCount(): number {
-    return this.application.items.trashedItems.length;
+    return this.application.items.trashedItems.length
   }
 
   private async selectNotesRange(selectedNote: SNNote): Promise<void> {
-    const notes = this.application.items.getDisplayableNotes();
+    const notes = this.application.items.getDisplayableNotes()
 
     const lastSelectedNoteIndex = notes.findIndex(
-      (note) => note.uuid == this.lastSelectedNote?.uuid
-    );
-    const selectedNoteIndex = notes.findIndex(
-      (note) => note.uuid == selectedNote.uuid
-    );
+      (note) => note.uuid == this.lastSelectedNote?.uuid,
+    )
+    const selectedNoteIndex = notes.findIndex((note) => note.uuid == selectedNote.uuid)
 
-    let notesToSelect = [];
+    let notesToSelect = []
     if (selectedNoteIndex > lastSelectedNoteIndex) {
-      notesToSelect = notes.slice(lastSelectedNoteIndex, selectedNoteIndex + 1);
+      notesToSelect = notes.slice(lastSelectedNoteIndex, selectedNoteIndex + 1)
     } else {
-      notesToSelect = notes.slice(selectedNoteIndex, lastSelectedNoteIndex + 1);
+      notesToSelect = notes.slice(selectedNoteIndex, lastSelectedNoteIndex + 1)
     }
 
-    const authorizedNotes =
-      await this.application.authorizeProtectedActionForNotes(
-        notesToSelect,
-        ChallengeReason.SelectProtectedNote
-      );
+    const authorizedNotes = await this.application.authorizeProtectedActionForNotes(
+      notesToSelect,
+      ChallengeReason.SelectProtectedNote,
+    )
 
     for (const note of authorizedNotes) {
       runInAction(() => {
-        this.selectedNotes[note.uuid] = note;
-        this.lastSelectedNote = note;
-      });
+        this.selectedNotes[note.uuid] = note
+        this.lastSelectedNote = note
+      })
     }
   }
 
   async selectNote(uuid: UuidString, userTriggered?: boolean): Promise<void> {
-    const note = this.application.items.findItem(uuid) as SNNote;
+    const note = this.application.items.findItem(uuid) as SNNote
     if (!note) {
-      return;
+      return
     }
 
-    const hasMeta = this.io.activeModifiers.has(KeyboardModifier.Meta);
-    const hasCtrl = this.io.activeModifiers.has(KeyboardModifier.Ctrl);
-    const hasShift = this.io.activeModifiers.has(KeyboardModifier.Shift);
+    const hasMeta = this.io.activeModifiers.has(KeyboardModifier.Meta)
+    const hasCtrl = this.io.activeModifiers.has(KeyboardModifier.Ctrl)
+    const hasShift = this.io.activeModifiers.has(KeyboardModifier.Shift)
 
     if (userTriggered && (hasMeta || hasCtrl)) {
       if (this.selectedNotes[uuid]) {
-        delete this.selectedNotes[uuid];
+        delete this.selectedNotes[uuid]
       } else if (await this.application.authorizeNoteAccess(note)) {
         runInAction(() => {
-          this.selectedNotes[uuid] = note;
-          this.lastSelectedNote = note;
-        });
+          this.selectedNotes[uuid] = note
+          this.lastSelectedNote = note
+        })
       }
     } else if (userTriggered && hasShift) {
-      await this.selectNotesRange(note);
+      await this.selectNotesRange(note)
     } else {
-      const shouldSelectNote =
-        this.selectedNotesCount > 1 || !this.selectedNotes[uuid];
-      if (
-        shouldSelectNote &&
-        (await this.application.authorizeNoteAccess(note))
-      ) {
+      const shouldSelectNote = this.selectedNotesCount > 1 || !this.selectedNotes[uuid]
+      if (shouldSelectNote && (await this.application.authorizeNoteAccess(note))) {
         runInAction(() => {
           this.selectedNotes = {
             [note.uuid]: note,
-          };
-          this.lastSelectedNote = note;
-        });
+          }
+          this.lastSelectedNote = note
+        })
       }
     }
 
     if (this.selectedNotesCount === 1) {
-      await this.openNote(Object.keys(this.selectedNotes)[0]);
+      await this.openNote(Object.keys(this.selectedNotes)[0])
     }
   }
 
   private async openNote(noteUuid: string): Promise<void> {
     if (this.activeNoteController?.note?.uuid === noteUuid) {
-      return;
+      return
     }
 
-    const note = this.application.items.findItem(noteUuid) as
-      | SNNote
-      | undefined;
+    const note = this.application.items.findItem(noteUuid) as SNNote | undefined
     if (!note) {
-      console.warn('Tried accessing a non-existant note of UUID ' + noteUuid);
-      return;
+      console.warn('Tried accessing a non-existant note of UUID ' + noteUuid)
+      return
     }
 
     if (this.activeNoteController) {
-      this.application.noteControllerGroup.closeActiveNoteView();
+      this.application.noteControllerGroup.closeActiveNoteView()
     }
 
-    await this.application.noteControllerGroup.createNoteView(noteUuid);
+    await this.application.noteControllerGroup.createNoteView(noteUuid)
 
-    this.appState.noteTags.reloadTags();
-    await this.onActiveEditorChanged();
+    this.appState.noteTags.reloadTags()
+    await this.onActiveEditorChanged()
   }
 
   setContextMenuOpen(open: boolean): void {
-    this.contextMenuOpen = open;
+    this.contextMenuOpen = open
   }
 
   setContextMenuClickLocation(location: { x: number; y: number }): void {
-    this.contextMenuClickLocation = location;
+    this.contextMenuClickLocation = location
   }
 
-  setContextMenuPosition(position: {
-    top?: number;
-    left: number;
-    bottom?: number;
-  }): void {
-    this.contextMenuPosition = position;
+  setContextMenuPosition(position: { top?: number; left: number; bottom?: number }): void {
+    this.contextMenuPosition = position
   }
 
   setContextMenuMaxHeight(maxHeight: number | 'auto'): void {
-    this.contextMenuMaxHeight = maxHeight;
+    this.contextMenuMaxHeight = maxHeight
   }
 
   reloadContextMenuLayout(): void {
-    const { clientHeight } = document.documentElement;
-    const defaultFontSize = window.getComputedStyle(
-      document.documentElement
-    ).fontSize;
-    const maxContextMenuHeight = parseFloat(defaultFontSize) * 30;
-    const footerElementRect = document
-      .getElementById('footer-bar')
-      ?.getBoundingClientRect();
-    const footerHeightInPx = footerElementRect?.height;
+    const { clientHeight } = document.documentElement
+    const defaultFontSize = window.getComputedStyle(document.documentElement).fontSize
+    const maxContextMenuHeight = parseFloat(defaultFontSize) * 30
+    const footerElementRect = document.getElementById('footer-bar')?.getBoundingClientRect()
+    const footerHeightInPx = footerElementRect?.height
 
     // Open up-bottom is default behavior
-    let openUpBottom = true;
+    let openUpBottom = true
 
     if (footerHeightInPx) {
-      const bottomSpace =
-        clientHeight - footerHeightInPx - this.contextMenuClickLocation.y;
-      const upSpace = this.contextMenuClickLocation.y;
+      const bottomSpace = clientHeight - footerHeightInPx - this.contextMenuClickLocation.y
+      const upSpace = this.contextMenuClickLocation.y
 
       // If not enough space to open up-bottom
       if (maxContextMenuHeight > bottomSpace) {
         // If there's enough space, open bottom-up
         if (upSpace > maxContextMenuHeight) {
-          openUpBottom = false;
-          this.setContextMenuMaxHeight('auto');
+          openUpBottom = false
+          this.setContextMenuMaxHeight('auto')
           // Else, reduce max height (menu will be scrollable) and open in whichever direction there's more space
         } else {
           if (upSpace > bottomSpace) {
-            this.setContextMenuMaxHeight(upSpace - MENU_MARGIN_FROM_APP_BORDER);
-            openUpBottom = false;
+            this.setContextMenuMaxHeight(upSpace - MENU_MARGIN_FROM_APP_BORDER)
+            openUpBottom = false
           } else {
-            this.setContextMenuMaxHeight(
-              bottomSpace - MENU_MARGIN_FROM_APP_BORDER
-            );
+            this.setContextMenuMaxHeight(bottomSpace - MENU_MARGIN_FROM_APP_BORDER)
           }
         }
       } else {
-        this.setContextMenuMaxHeight('auto');
+        this.setContextMenuMaxHeight('auto')
       }
     }
 
@@ -252,84 +223,70 @@ export class NotesState {
       this.setContextMenuPosition({
         top: this.contextMenuClickLocation.y,
         left: this.contextMenuClickLocation.x,
-      });
+      })
     } else {
       this.setContextMenuPosition({
         bottom: clientHeight - this.contextMenuClickLocation.y,
         left: this.contextMenuClickLocation.x,
-      });
+      })
     }
   }
 
-  async changeSelectedNotes(
-    mutate: (mutator: NoteMutator) => void
-  ): Promise<void> {
-    await this.application.mutator.changeItems(
-      Object.values(this.selectedNotes),
-      mutate,
-      false
-    );
-    this.application.sync.sync();
+  async changeSelectedNotes(mutate: (mutator: NoteMutator) => void): Promise<void> {
+    await this.application.mutator.changeItems(Object.values(this.selectedNotes), mutate, false)
+    this.application.sync.sync().catch(console.error)
   }
 
   setHideSelectedNotePreviews(hide: boolean): void {
     this.changeSelectedNotes((mutator) => {
-      mutator.hidePreview = hide;
-    });
+      mutator.hidePreview = hide
+    }).catch(console.error)
   }
 
   setLockSelectedNotes(lock: boolean): void {
     this.changeSelectedNotes((mutator) => {
-      mutator.locked = lock;
-    });
+      mutator.locked = lock
+    }).catch(console.error)
   }
 
   async setTrashSelectedNotes(trashed: boolean): Promise<void> {
     if (trashed) {
-      const notesDeleted = await this.deleteNotes(false);
+      const notesDeleted = await this.deleteNotes(false)
       if (notesDeleted) {
         runInAction(() => {
-          this.unselectNotes();
-          this.contextMenuOpen = false;
-        });
+          this.unselectNotes()
+          this.contextMenuOpen = false
+        })
       }
     } else {
       await this.changeSelectedNotes((mutator) => {
-        mutator.trashed = trashed;
-      });
+        mutator.trashed = trashed
+      })
       runInAction(() => {
-        this.unselectNotes();
-        this.contextMenuOpen = false;
-      });
+        this.unselectNotes()
+        this.contextMenuOpen = false
+      })
     }
   }
 
   async deleteNotesPermanently(): Promise<void> {
-    await this.deleteNotes(true);
+    await this.deleteNotes(true)
   }
 
   async deleteNotes(permanently: boolean): Promise<boolean> {
     if (Object.values(this.selectedNotes).some((note) => note.locked)) {
-      const text = StringUtils.deleteLockedNotesAttempt(
-        this.selectedNotesCount
-      );
-      this.application.alertService.alert(text);
-      return false;
+      const text = StringUtils.deleteLockedNotesAttempt(this.selectedNotesCount)
+      this.application.alertService.alert(text).catch(console.error)
+      return false
     }
 
-    const title = Strings.trashNotesTitle;
-    let noteTitle = undefined;
+    const title = Strings.trashNotesTitle
+    let noteTitle = undefined
     if (this.selectedNotesCount === 1) {
-      const selectedNote = Object.values(this.selectedNotes)[0];
-      noteTitle = selectedNote.title.length
-        ? `'${selectedNote.title}'`
-        : 'this note';
+      const selectedNote = Object.values(this.selectedNotes)[0]
+      noteTitle = selectedNote.title.length ? `'${selectedNote.title}'` : 'this note'
     }
-    const text = StringUtils.deleteNotes(
-      permanently,
-      this.selectedNotesCount,
-      noteTitle
-    );
+    const text = StringUtils.deleteNotes(permanently, this.selectedNotesCount, noteTitle)
 
     if (
       await confirmDialog({
@@ -340,113 +297,111 @@ export class NotesState {
     ) {
       if (permanently) {
         for (const note of Object.values(this.selectedNotes)) {
-          await this.application.mutator.deleteItem(note);
-          delete this.selectedNotes[note.uuid];
+          await this.application.mutator.deleteItem(note)
+          delete this.selectedNotes[note.uuid]
         }
       } else {
         await this.changeSelectedNotes((mutator) => {
-          mutator.trashed = true;
-        });
+          mutator.trashed = true
+        })
       }
-      return true;
+      return true
     }
 
-    return false;
+    return false
   }
 
   setPinSelectedNotes(pinned: boolean): void {
     this.changeSelectedNotes((mutator) => {
-      mutator.pinned = pinned;
-    });
+      mutator.pinned = pinned
+    }).catch(console.error)
   }
 
   async setArchiveSelectedNotes(archived: boolean): Promise<void> {
     if (Object.values(this.selectedNotes).some((note) => note.locked)) {
-      this.application.alertService.alert(
-        StringUtils.archiveLockedNotesAttempt(archived, this.selectedNotesCount)
-      );
-      return;
+      this.application.alertService
+        .alert(StringUtils.archiveLockedNotesAttempt(archived, this.selectedNotesCount))
+        .catch(console.error)
+      return
     }
 
     await this.changeSelectedNotes((mutator) => {
-      mutator.archived = archived;
-    });
+      mutator.archived = archived
+    })
 
     runInAction(() => {
-      this.selectedNotes = {};
-      this.contextMenuOpen = false;
-    });
+      this.selectedNotes = {}
+      this.contextMenuOpen = false
+    })
   }
 
   async setProtectSelectedNotes(protect: boolean): Promise<void> {
-    const selectedNotes = Object.values(this.selectedNotes);
+    const selectedNotes = Object.values(this.selectedNotes)
     if (protect) {
-      await this.application.mutator.protectNotes(selectedNotes);
-      this.setShowProtectedWarning(true);
+      await this.application.mutator.protectNotes(selectedNotes)
+      this.setShowProtectedWarning(true)
     } else {
-      await this.application.mutator.unprotectNotes(selectedNotes);
-      this.setShowProtectedWarning(false);
+      await this.application.mutator.unprotectNotes(selectedNotes)
+      this.setShowProtectedWarning(false)
     }
   }
 
   unselectNotes(): void {
-    this.selectedNotes = {};
+    this.selectedNotes = {}
   }
 
   getSpellcheckStateForNote(note: SNNote) {
     return note.spellcheck != undefined
       ? note.spellcheck
-      : this.appState.isGlobalSpellcheckEnabled();
+      : this.appState.isGlobalSpellcheckEnabled()
   }
 
   async toggleGlobalSpellcheckForNote(note: SNNote) {
     await this.application.mutator.changeItem<NoteMutator>(
       note,
       (mutator) => {
-        mutator.toggleSpellcheck();
+        mutator.toggleSpellcheck()
       },
-      false
-    );
-    this.application.sync.sync();
+      false,
+    )
+    this.application.sync.sync().catch(console.error)
   }
 
   async addTagToSelectedNotes(tag: SNTag): Promise<void> {
-    const selectedNotes = Object.values(this.selectedNotes);
-    const parentChainTags = this.application.items.getTagParentChain(tag);
-    const tagsToAdd = [...parentChainTags, tag];
+    const selectedNotes = Object.values(this.selectedNotes)
+    const parentChainTags = this.application.items.getTagParentChain(tag)
+    const tagsToAdd = [...parentChainTags, tag]
     await Promise.all(
       tagsToAdd.map(async (tag) => {
         await this.application.mutator.changeItem(tag, (mutator) => {
           for (const note of selectedNotes) {
-            mutator.addItemAsRelationship(note);
+            mutator.addItemAsRelationship(note)
           }
-        });
-      })
-    );
-    this.application.sync.sync();
+        })
+      }),
+    )
+    this.application.sync.sync().catch(console.error)
   }
 
   async removeTagFromSelectedNotes(tag: SNTag): Promise<void> {
-    const selectedNotes = Object.values(this.selectedNotes);
+    const selectedNotes = Object.values(this.selectedNotes)
     await this.application.mutator.changeItem(tag, (mutator) => {
       for (const note of selectedNotes) {
-        mutator.removeItemAsRelationship(note);
+        mutator.removeItemAsRelationship(note)
       }
-    });
-    this.application.sync.sync();
+    })
+    this.application.sync.sync().catch(console.error)
   }
 
   isTagInSelectedNotes(tag: SNTag): boolean {
-    const selectedNotes = Object.values(this.selectedNotes);
+    const selectedNotes = Object.values(this.selectedNotes)
     return selectedNotes.every((note) =>
-      this.appState
-        .getNoteTags(note)
-        .find((noteTag) => noteTag.uuid === tag.uuid)
-    );
+      this.appState.getNoteTags(note).find((noteTag) => noteTag.uuid === tag.uuid),
+    )
   }
 
   setShowProtectedWarning(show: boolean): void {
-    this.showProtectedWarning = show;
+    this.showProtectedWarning = show
   }
 
   async emptyTrash(): Promise<void> {
@@ -456,16 +411,16 @@ export class NotesState {
         confirmButtonStyle: 'danger',
       })
     ) {
-      this.application.mutator.emptyTrash();
-      this.application.sync.sync();
+      this.application.mutator.emptyTrash().catch(console.error)
+      this.application.sync.sync().catch(console.error)
     }
   }
 
   private get io() {
-    return this.application.io;
+    return this.application.io
   }
 
   setShowRevisionHistoryModal(show: boolean): void {
-    this.showRevisionHistoryModal = show;
+    this.showRevisionHistoryModal = show
   }
 }
diff --git a/app/assets/javascripts/ui_models/app_state/notes_view_state.ts b/app/assets/javascripts/UIModels/AppState/NotesViewState.ts
similarity index 54%
rename from app/assets/javascripts/ui_models/app_state/notes_view_state.ts
rename to app/assets/javascripts/UIModels/AppState/NotesViewState.ts
index 1130d3534..a576db3f2 100644
--- a/app/assets/javascripts/ui_models/app_state/notes_view_state.ts
+++ b/app/assets/javascripts/UIModels/AppState/NotesViewState.ts
@@ -11,48 +11,41 @@ import {
   SNTag,
   SystemViewId,
   UuidString,
-} from '@standardnotes/snjs';
-import {
-  action,
-  autorun,
-  computed,
-  makeObservable,
-  observable,
-  reaction,
-} from 'mobx';
-import { AppState, AppStateEvent } from '.';
-import { WebApplication } from '../application';
+} from '@standardnotes/snjs'
+import { action, autorun, computed, makeObservable, observable, reaction } from 'mobx'
+import { AppState, AppStateEvent } from '.'
+import { WebApplication } from '../Application'
 
-const MIN_NOTE_CELL_HEIGHT = 51.0;
-const DEFAULT_LIST_NUM_NOTES = 20;
-const ELEMENT_ID_SEARCH_BAR = 'search-bar';
-const ELEMENT_ID_SCROLL_CONTAINER = 'notes-scrollable';
+const MIN_NOTE_CELL_HEIGHT = 51.0
+const DEFAULT_LIST_NUM_NOTES = 20
+const ELEMENT_ID_SEARCH_BAR = 'search-bar'
+const ELEMENT_ID_SCROLL_CONTAINER = 'notes-scrollable'
 
 export type DisplayOptions = {
-  sortBy: CollectionSortProperty;
-  sortReverse: boolean;
-  hidePinned: boolean;
-  showArchived: boolean;
-  showTrashed: boolean;
-  hideProtected: boolean;
-  hideTags: boolean;
-  hideNotePreview: boolean;
-  hideDate: boolean;
-  hideEditorIcon: boolean;
-};
+  sortBy: CollectionSortProperty
+  sortReverse: boolean
+  hidePinned: boolean
+  showArchived: boolean
+  showTrashed: boolean
+  hideProtected: boolean
+  hideTags: boolean
+  hideNotePreview: boolean
+  hideDate: boolean
+  hideEditorIcon: boolean
+}
 
 export class NotesViewState {
-  completedFullSync = false;
-  noteFilterText = '';
-  notes: SNNote[] = [];
-  notesToDisplay = 0;
-  pageSize = 0;
-  panelTitle = 'All Notes';
-  panelWidth = 0;
-  renderedNotes: SNNote[] = [];
-  searchSubmitted = false;
-  selectedNotes: Record<UuidString, SNNote> = {};
-  showDisplayOptionsMenu = false;
+  completedFullSync = false
+  noteFilterText = ''
+  notes: SNNote[] = []
+  notesToDisplay = 0
+  pageSize = 0
+  panelTitle = 'All Notes'
+  panelWidth = 0
+  renderedNotes: SNNote[] = []
+  searchSubmitted = false
+  selectedNotes: Record<UuidString, SNNote> = {}
+  showDisplayOptionsMenu = false
   displayOptions = {
     sortBy: CollectionSort.CreatedAt,
     sortReverse: false,
@@ -64,69 +57,66 @@ export class NotesViewState {
     hideDate: false,
     hideNotePreview: false,
     hideEditorIcon: false,
-  };
+  }
 
   constructor(
     private application: WebApplication,
     private appState: AppState,
-    appObservers: (() => void)[]
+    appObservers: (() => void)[],
   ) {
-    this.resetPagination();
+    this.resetPagination()
 
     appObservers.push(
       application.streamItems<SNNote>(ContentType.Note, () => {
-        this.reloadNotes();
+        this.reloadNotes()
 
-        const activeNote = this.appState.notes.activeNoteController?.note;
+        const activeNote = this.appState.notes.activeNoteController?.note
 
         if (this.application.getAppState().notes.selectedNotesCount < 2) {
           if (activeNote) {
             const browsingTrashedNotes =
               this.appState.selectedTag instanceof SmartView &&
-              this.appState.selectedTag?.uuid === SystemViewId.TrashedNotes;
+              this.appState.selectedTag?.uuid === SystemViewId.TrashedNotes
 
             if (
               activeNote.trashed &&
               !browsingTrashedNotes &&
               !this.appState?.searchOptions.includeTrashed
             ) {
-              this.selectNextOrCreateNew();
+              this.selectNextOrCreateNew()
             } else if (!this.selectedNotes[activeNote.uuid]) {
-              this.selectNote(activeNote);
+              this.selectNote(activeNote).catch(console.error)
             }
           } else {
-            this.selectFirstNote();
+            this.selectFirstNote()
           }
         }
       }),
 
-      application.streamItems<SNTag>(
-        [ContentType.Tag],
-        async ({ changed, inserted }) => {
-          const tags = [...changed, ...inserted];
-          /** A tag could have changed its relationships, so we need to reload the filter */
-          this.reloadNotesDisplayOptions();
-          this.reloadNotes();
+      application.streamItems<SNTag>([ContentType.Tag], async ({ changed, inserted }) => {
+        const tags = [...changed, ...inserted]
+        /** A tag could have changed its relationships, so we need to reload the filter */
+        this.reloadNotesDisplayOptions()
+        this.reloadNotes()
 
-          if (
-            this.appState.selectedTag &&
-            findInArray(tags, 'uuid', this.appState.selectedTag.uuid)
-          ) {
-            /** Tag title could have changed */
-            this.reloadPanelTitle();
-          }
+        if (
+          this.appState.selectedTag &&
+          findInArray(tags, 'uuid', this.appState.selectedTag.uuid)
+        ) {
+          /** Tag title could have changed */
+          this.reloadPanelTitle()
         }
-      ),
+      }),
       application.addEventObserver(async () => {
-        this.reloadPreferences();
+        this.reloadPreferences()
       }, ApplicationEvent.PreferencesChanged),
       application.addEventObserver(async () => {
-        this.appState.closeAllNoteControllers();
-        this.selectFirstNote();
-        this.setCompletedFullSync(false);
+        this.appState.closeAllNoteControllers()
+        this.selectFirstNote()
+        this.setCompletedFullSync(false)
       }, ApplicationEvent.SignedIn),
       application.addEventObserver(async () => {
-        this.reloadNotes();
+        this.reloadNotes()
         if (
           this.notes.length === 0 &&
           this.appState.selectedTag instanceof SmartView &&
@@ -134,13 +124,13 @@ export class NotesViewState {
           this.noteFilterText === '' &&
           !this.appState.notes.activeNoteController
         ) {
-          this.createPlaceholderNote();
+          this.createPlaceholderNote()?.catch(console.error)
         }
-        this.setCompletedFullSync(true);
+        this.setCompletedFullSync(true)
       }, ApplicationEvent.CompletedFullSync),
       autorun(() => {
         if (appState.notes.selectedNotes) {
-          this.syncSelectedNotes();
+          this.syncSelectedNotes()
         }
       }),
       reaction(
@@ -150,20 +140,20 @@ export class NotesViewState {
           appState.searchOptions.includeTrashed,
         ],
         () => {
-          this.reloadNotesDisplayOptions();
-          this.reloadNotes();
-        }
+          this.reloadNotesDisplayOptions()
+          this.reloadNotes()
+        },
       ),
       appState.addObserver(async (eventName) => {
         if (eventName === AppStateEvent.TagChanged) {
-          this.handleTagChange();
+          this.handleTagChange()
         } else if (eventName === AppStateEvent.ActiveEditorChanged) {
-          this.handleEditorChange();
+          this.handleEditorChange().catch(console.error)
         } else if (eventName === AppStateEvent.EditorFocused) {
-          this.setShowDisplayOptionsMenu(false);
+          this.setShowDisplayOptionsMenu(false)
         }
-      })
-    );
+      }),
+    )
 
     makeObservable(this, {
       completedFullSync: observable,
@@ -188,71 +178,71 @@ export class NotesViewState {
       handleFilterTextChanged: action,
 
       optionsSubtitle: computed,
-    });
+    })
 
     window.onresize = () => {
-      this.resetPagination(true);
-    };
+      this.resetPagination(true)
+    }
   }
 
   setCompletedFullSync = (completed: boolean) => {
-    this.completedFullSync = completed;
-  };
+    this.completedFullSync = completed
+  }
 
   setShowDisplayOptionsMenu = (enabled: boolean) => {
-    this.showDisplayOptionsMenu = enabled;
-  };
+    this.showDisplayOptionsMenu = enabled
+  }
 
   get searchBarElement() {
-    return document.getElementById(ELEMENT_ID_SEARCH_BAR);
+    return document.getElementById(ELEMENT_ID_SEARCH_BAR)
   }
 
   get isFiltering(): boolean {
-    return !!this.noteFilterText && this.noteFilterText.length > 0;
+    return !!this.noteFilterText && this.noteFilterText.length > 0
   }
 
   get activeEditorNote() {
-    return this.appState.notes.activeNoteController?.note;
+    return this.appState.notes.activeNoteController?.note
   }
 
   reloadPanelTitle = () => {
-    let title = this.panelTitle;
+    let title = this.panelTitle
     if (this.isFiltering) {
-      const resultCount = this.notes.length;
-      title = `${resultCount} search results`;
+      const resultCount = this.notes.length
+      title = `${resultCount} search results`
     } else if (this.appState.selectedTag) {
-      title = `${this.appState.selectedTag.title}`;
+      title = `${this.appState.selectedTag.title}`
     }
-    this.panelTitle = title;
-  };
+    this.panelTitle = title
+  }
 
   reloadNotes = () => {
-    const tag = this.appState.selectedTag;
+    const tag = this.appState.selectedTag
     if (!tag) {
-      return;
+      return
     }
-    const notes = this.application.items.getDisplayableNotes();
-    const renderedNotes = notes.slice(0, this.notesToDisplay);
+    const notes = this.application.items.getDisplayableNotes()
+    const renderedNotes = notes.slice(0, this.notesToDisplay)
 
-    this.notes = notes;
-    this.renderedNotes = renderedNotes;
-    this.reloadPanelTitle();
-  };
+    this.notes = notes
+    this.renderedNotes = renderedNotes
+    this.reloadPanelTitle()
+  }
 
   reloadNotesDisplayOptions = () => {
-    const tag = this.appState.selectedTag;
+    const tag = this.appState.selectedTag
 
-    const searchText = this.noteFilterText.toLowerCase();
-    const isSearching = searchText.length;
-    let includeArchived: boolean;
-    let includeTrashed: boolean;
+    const searchText = this.noteFilterText.toLowerCase()
+    const isSearching = searchText.length
+    let includeArchived: boolean
+    let includeTrashed: boolean
 
     if (isSearching) {
-      includeArchived = this.appState.searchOptions.includeArchived;
-      includeTrashed = this.appState.searchOptions.includeTrashed;
+      includeArchived = this.appState.searchOptions.includeArchived
+      includeTrashed = this.appState.searchOptions.includeTrashed
     } else {
-      includeArchived = this.displayOptions.showArchived ?? false;
-      includeTrashed = this.displayOptions.showTrashed ?? false;
+      includeArchived = this.displayOptions.showArchived ?? false
+      includeTrashed = this.displayOptions.showTrashed ?? false
     }
 
     const criteria = NotesDisplayCriteria.Create({
@@ -266,64 +256,48 @@ export class NotesViewState {
       includeProtected: !this.displayOptions.hideProtected,
       searchQuery: {
         query: searchText,
-        includeProtectedNoteText:
-          this.appState.searchOptions.includeProtectedContents,
+        includeProtectedNoteText: this.appState.searchOptions.includeProtectedContents,
       },
-    });
-    this.application.items.setNotesDisplayCriteria(criteria);
-  };
+    })
+    this.application.items.setNotesDisplayCriteria(criteria)
+  }
 
   reloadPreferences = () => {
-    const freshDisplayOptions = {} as DisplayOptions;
-    const currentSortBy = this.displayOptions.sortBy;
-    let sortBy = this.application.getPreference(
-      PrefKey.SortNotesBy,
-      CollectionSort.CreatedAt
-    );
-    if (
-      sortBy === CollectionSort.UpdatedAt ||
-      (sortBy as string) === 'client_updated_at'
-    ) {
+    const freshDisplayOptions = {} as DisplayOptions
+    const currentSortBy = this.displayOptions.sortBy
+    let sortBy = this.application.getPreference(PrefKey.SortNotesBy, CollectionSort.CreatedAt)
+    if (sortBy === CollectionSort.UpdatedAt || (sortBy as string) === 'client_updated_at') {
       /** Use UserUpdatedAt instead */
-      sortBy = CollectionSort.UpdatedAt;
+      sortBy = CollectionSort.UpdatedAt
     }
-    freshDisplayOptions.sortBy = sortBy;
+    freshDisplayOptions.sortBy = sortBy
     freshDisplayOptions.sortReverse = this.application.getPreference(
       PrefKey.SortNotesReverse,
-      false
-    );
+      false,
+    )
     freshDisplayOptions.showArchived = this.application.getPreference(
       PrefKey.NotesShowArchived,
-      false
-    );
+      false,
+    )
     freshDisplayOptions.showTrashed = this.application.getPreference(
       PrefKey.NotesShowTrashed,
-      false
-    ) as boolean;
-    freshDisplayOptions.hidePinned = this.application.getPreference(
-      PrefKey.NotesHidePinned,
-      false
-    );
+      false,
+    ) as boolean
+    freshDisplayOptions.hidePinned = this.application.getPreference(PrefKey.NotesHidePinned, false)
     freshDisplayOptions.hideProtected = this.application.getPreference(
       PrefKey.NotesHideProtected,
-      false
-    );
+      false,
+    )
     freshDisplayOptions.hideNotePreview = this.application.getPreference(
       PrefKey.NotesHideNotePreview,
-      false
-    );
-    freshDisplayOptions.hideDate = this.application.getPreference(
-      PrefKey.NotesHideDate,
-      false
-    );
-    freshDisplayOptions.hideTags = this.application.getPreference(
-      PrefKey.NotesHideTags,
-      true
-    );
+      false,
+    )
+    freshDisplayOptions.hideDate = this.application.getPreference(PrefKey.NotesHideDate, false)
+    freshDisplayOptions.hideTags = this.application.getPreference(PrefKey.NotesHideTags, true)
     freshDisplayOptions.hideEditorIcon = this.application.getPreference(
       PrefKey.NotesHideEditorIcon,
-      false
-    );
+      false,
+    )
     const displayOptionsChanged =
       freshDisplayOptions.sortBy !== this.displayOptions.sortBy ||
       freshDisplayOptions.sortReverse !== this.displayOptions.sortReverse ||
@@ -331,221 +305,218 @@ export class NotesViewState {
       freshDisplayOptions.showArchived !== this.displayOptions.showArchived ||
       freshDisplayOptions.showTrashed !== this.displayOptions.showTrashed ||
       freshDisplayOptions.hideProtected !== this.displayOptions.hideProtected ||
-      freshDisplayOptions.hideEditorIcon !==
-        this.displayOptions.hideEditorIcon ||
-      freshDisplayOptions.hideTags !== this.displayOptions.hideTags;
-    this.displayOptions = freshDisplayOptions;
+      freshDisplayOptions.hideEditorIcon !== this.displayOptions.hideEditorIcon ||
+      freshDisplayOptions.hideTags !== this.displayOptions.hideTags
+    this.displayOptions = freshDisplayOptions
     if (displayOptionsChanged) {
-      this.reloadNotesDisplayOptions();
+      this.reloadNotesDisplayOptions()
     }
 
-    this.reloadNotes();
+    this.reloadNotes()
 
-    const width = this.application.getPreference(PrefKey.NotesPanelWidth);
+    const width = this.application.getPreference(PrefKey.NotesPanelWidth)
     if (width) {
-      this.panelWidth = width;
+      this.panelWidth = width
     }
 
     if (freshDisplayOptions.sortBy !== currentSortBy) {
-      this.selectFirstNote();
+      this.selectFirstNote()
     }
-  };
+  }
 
   createNewNote = async () => {
-    this.appState.notes.unselectNotes();
-    let title = `Note ${this.notes.length + 1}`;
+    this.appState.notes.unselectNotes()
+    let title = `Note ${this.notes.length + 1}`
     if (this.isFiltering) {
-      title = this.noteFilterText;
+      title = this.noteFilterText
     }
 
-    await this.appState.openNewNote(title);
+    await this.appState.openNewNote(title)
 
-    this.reloadNotes();
-    this.appState.noteTags.reloadTags();
-  };
+    this.reloadNotes()
+    this.appState.noteTags.reloadTags()
+  }
 
   createPlaceholderNote = () => {
-    const selectedTag = this.appState.selectedTag;
+    const selectedTag = this.appState.selectedTag
     if (
       selectedTag &&
       selectedTag instanceof SmartView &&
       selectedTag.uuid !== SystemViewId.AllNotes
     ) {
-      return;
+      return
     }
-    return this.createNewNote();
-  };
+    return this.createNewNote()
+  }
 
   get optionsSubtitle(): string {
-    let base = '';
+    let base = ''
     if (this.displayOptions.sortBy === CollectionSort.CreatedAt) {
-      base += ' Date Added';
+      base += ' Date Added'
     } else if (this.displayOptions.sortBy === CollectionSort.UpdatedAt) {
-      base += ' Date Modified';
+      base += ' Date Modified'
     } else if (this.displayOptions.sortBy === CollectionSort.Title) {
-      base += ' Title';
+      base += ' Title'
     }
     if (this.displayOptions.showArchived) {
-      base += ' | + Archived';
+      base += ' | + Archived'
     }
     if (this.displayOptions.showTrashed) {
-      base += ' | + Trashed';
+      base += ' | + Trashed'
     }
     if (this.displayOptions.hidePinned) {
-      base += ' | – Pinned';
+      base += ' | – Pinned'
     }
     if (this.displayOptions.hideProtected) {
-      base += ' | – Protected';
+      base += ' | – Protected'
     }
     if (this.displayOptions.sortReverse) {
-      base += ' | Reversed';
+      base += ' | Reversed'
     }
-    return base;
+    return base
   }
 
   paginate = () => {
-    this.notesToDisplay += this.pageSize;
-    this.reloadNotes();
+    this.notesToDisplay += this.pageSize
+    this.reloadNotes()
     if (this.searchSubmitted) {
-      this.application.getDesktopService().searchText(this.noteFilterText);
+      this.application.getDesktopService().searchText(this.noteFilterText)
     }
-  };
+  }
 
   resetPagination = (keepCurrentIfLarger = false) => {
-    const clientHeight = document.documentElement.clientHeight;
-    this.pageSize = Math.ceil(clientHeight / MIN_NOTE_CELL_HEIGHT);
+    const clientHeight = document.documentElement.clientHeight
+    this.pageSize = Math.ceil(clientHeight / MIN_NOTE_CELL_HEIGHT)
     if (this.pageSize === 0) {
-      this.pageSize = DEFAULT_LIST_NUM_NOTES;
+      this.pageSize = DEFAULT_LIST_NUM_NOTES
     }
     if (keepCurrentIfLarger && this.notesToDisplay > this.pageSize) {
-      return;
+      return
     }
-    this.notesToDisplay = this.pageSize;
-  };
+    this.notesToDisplay = this.pageSize
+  }
 
   getFirstNonProtectedNote = () => {
-    return this.notes.find((note) => !note.protected);
-  };
+    return this.notes.find((note) => !note.protected)
+  }
 
   get notesListScrollContainer() {
-    return document.getElementById(ELEMENT_ID_SCROLL_CONTAINER);
+    return document.getElementById(ELEMENT_ID_SCROLL_CONTAINER)
   }
 
   selectNote = async (
     note: SNNote,
     userTriggered?: boolean,
-    scrollIntoView = true
+    scrollIntoView = true,
   ): Promise<void> => {
-    await this.appState.notes.selectNote(note.uuid, userTriggered);
+    await this.appState.notes.selectNote(note.uuid, userTriggered)
     if (scrollIntoView) {
-      const noteElement = document.getElementById(`note-${note.uuid}`);
+      const noteElement = document.getElementById(`note-${note.uuid}`)
       noteElement?.scrollIntoView({
         behavior: 'smooth',
-      });
+      })
     }
-  };
+  }
 
   selectFirstNote = () => {
-    const note = this.getFirstNonProtectedNote();
+    const note = this.getFirstNonProtectedNote()
     if (note) {
-      this.selectNote(note, false, false);
-      this.resetScrollPosition();
+      this.selectNote(note, false, false).catch(console.error)
+      this.resetScrollPosition()
     }
-  };
+  }
 
   selectNextNote = () => {
-    const displayableNotes = this.notes;
+    const displayableNotes = this.notes
     const currentIndex = displayableNotes.findIndex((candidate) => {
-      return candidate.uuid === this.activeEditorNote?.uuid;
-    });
+      return candidate.uuid === this.activeEditorNote?.uuid
+    })
     if (currentIndex + 1 < displayableNotes.length) {
-      const nextNote = displayableNotes[currentIndex + 1];
-      this.selectNote(nextNote);
-      const nextNoteElement = document.getElementById(`note-${nextNote.uuid}`);
-      nextNoteElement?.focus();
+      const nextNote = displayableNotes[currentIndex + 1]
+      this.selectNote(nextNote).catch(console.error)
+      const nextNoteElement = document.getElementById(`note-${nextNote.uuid}`)
+      nextNoteElement?.focus()
     }
-  };
+  }
 
   selectNextOrCreateNew = () => {
-    const note = this.getFirstNonProtectedNote();
+    const note = this.getFirstNonProtectedNote()
     if (note) {
-      this.selectNote(note, false, false);
+      this.selectNote(note, false, false).catch(console.error)
     } else {
-      this.appState.closeActiveNoteController();
+      this.appState.closeActiveNoteController()
     }
-  };
+  }
 
   selectPreviousNote = () => {
-    const displayableNotes = this.notes;
+    const displayableNotes = this.notes
     if (this.activeEditorNote) {
-      const currentIndex = displayableNotes.indexOf(this.activeEditorNote);
+      const currentIndex = displayableNotes.indexOf(this.activeEditorNote)
       if (currentIndex - 1 >= 0) {
-        const previousNote = displayableNotes[currentIndex - 1];
-        this.selectNote(previousNote);
-        const previousNoteElement = document.getElementById(
-          `note-${previousNote.uuid}`
-        );
-        previousNoteElement?.focus();
-        return true;
+        const previousNote = displayableNotes[currentIndex - 1]
+        this.selectNote(previousNote).catch(console.error)
+        const previousNoteElement = document.getElementById(`note-${previousNote.uuid}`)
+        previousNoteElement?.focus()
+        return true
       } else {
-        return false;
+        return false
       }
     }
-  };
+    return undefined
+  }
 
   setNoteFilterText = (text: string) => {
-    this.noteFilterText = text;
-  };
+    this.noteFilterText = text
+  }
 
   syncSelectedNotes = () => {
-    this.selectedNotes = this.appState.notes.selectedNotes;
-  };
+    this.selectedNotes = this.appState.notes.selectedNotes
+  }
 
   handleEditorChange = async () => {
-    const activeNote = this.appState.getActiveNoteController()?.note;
+    const activeNote = this.appState.getActiveNoteController()?.note
     if (activeNote && activeNote.conflictOf) {
-      this.application.mutator.changeAndSaveItem(activeNote, (mutator) => {
-        mutator.conflictOf = undefined;
-      });
+      this.application.mutator
+        .changeAndSaveItem(activeNote, (mutator) => {
+          mutator.conflictOf = undefined
+        })
+        .catch(console.error)
     }
     if (this.isFiltering) {
-      this.application.getDesktopService().searchText(this.noteFilterText);
+      this.application.getDesktopService().searchText(this.noteFilterText)
     }
-  };
+  }
 
   resetScrollPosition = () => {
     if (this.notesListScrollContainer) {
-      this.notesListScrollContainer.scrollTop = 0;
-      this.notesListScrollContainer.scrollLeft = 0;
+      this.notesListScrollContainer.scrollTop = 0
+      this.notesListScrollContainer.scrollLeft = 0
     }
-  };
+  }
 
   handleTagChange = () => {
-    this.resetScrollPosition();
-    this.setShowDisplayOptionsMenu(false);
-    this.setNoteFilterText('');
-    this.application.getDesktopService().searchText();
-    this.resetPagination();
+    this.resetScrollPosition()
+    this.setShowDisplayOptionsMenu(false)
+    this.setNoteFilterText('')
+    this.application.getDesktopService().searchText()
+    this.resetPagination()
 
     /* Capture db load state before beginning reloadNotes,
       since this status may change during reload */
-    const dbLoaded = this.application.isDatabaseLoaded();
-    this.reloadNotesDisplayOptions();
-    this.reloadNotes();
+    const dbLoaded = this.application.isDatabaseLoaded()
+    this.reloadNotesDisplayOptions()
+    this.reloadNotes()
 
-    const hasSomeNotes = this.notes.length > 0;
+    const hasSomeNotes = this.notes.length > 0
 
     if (hasSomeNotes) {
-      this.selectFirstNote();
+      this.selectFirstNote()
     } else if (dbLoaded) {
-      if (
-        this.activeEditorNote &&
-        !this.notes.includes(this.activeEditorNote)
-      ) {
-        this.appState.closeActiveNoteController();
+      if (this.activeEditorNote && !this.notes.includes(this.activeEditorNote)) {
+        this.appState.closeActiveNoteController()
       }
     }
-  };
+  }
 
   onFilterEnter = () => {
     /**
@@ -553,22 +524,22 @@ export class NotesViewState {
      * input to lose focus. We wait until user explicity hits
      * enter before highlighting desktop search results.
      */
-    this.searchSubmitted = true;
-    this.application.getDesktopService().searchText(this.noteFilterText);
-  };
+    this.searchSubmitted = true
+    this.application.getDesktopService().searchText(this.noteFilterText)
+  }
 
   handleFilterTextChanged = () => {
     if (this.searchSubmitted) {
-      this.searchSubmitted = false;
+      this.searchSubmitted = false
     }
-    this.reloadNotesDisplayOptions();
-    this.reloadNotes();
-  };
+    this.reloadNotesDisplayOptions()
+    this.reloadNotes()
+  }
 
   clearFilterText = () => {
-    this.setNoteFilterText('');
-    this.onFilterEnter();
-    this.handleFilterTextChanged();
-    this.resetPagination();
-  };
+    this.setNoteFilterText('')
+    this.onFilterEnter()
+    this.handleFilterTextChanged()
+    this.resetPagination()
+  }
 }
diff --git a/app/assets/javascripts/ui_models/app_state/preferences_state.ts b/app/assets/javascripts/UIModels/AppState/PreferencesState.ts
similarity index 59%
rename from app/assets/javascripts/ui_models/app_state/preferences_state.ts
rename to app/assets/javascripts/UIModels/AppState/PreferencesState.ts
index 8d77b23f8..a576c770e 100644
--- a/app/assets/javascripts/ui_models/app_state/preferences_state.ts
+++ b/app/assets/javascripts/UIModels/AppState/PreferencesState.ts
@@ -1,11 +1,11 @@
-import { PreferenceId } from '@/components/Preferences/PreferencesMenu';
-import { action, computed, makeObservable, observable } from 'mobx';
+import { PreferenceId } from '@/Components/Preferences/PreferencesMenu'
+import { action, computed, makeObservable, observable } from 'mobx'
 
-const DEFAULT_PANE = 'account';
+const DEFAULT_PANE = 'account'
 
 export class PreferencesState {
-  private _open = false;
-  currentPane: PreferenceId = DEFAULT_PANE;
+  private _open = false
+  currentPane: PreferenceId = DEFAULT_PANE
 
   constructor() {
     makeObservable<PreferencesState, '_open'>(this, {
@@ -15,23 +15,23 @@ export class PreferencesState {
       closePreferences: action,
       setCurrentPane: action,
       isOpen: computed,
-    });
+    })
   }
 
   setCurrentPane = (prefId: PreferenceId): void => {
-    this.currentPane = prefId;
-  };
+    this.currentPane = prefId
+  }
 
   openPreferences = (): void => {
-    this._open = true;
-  };
+    this._open = true
+  }
 
   closePreferences = (): void => {
-    this._open = false;
-    this.currentPane = DEFAULT_PANE;
-  };
+    this._open = false
+    this.currentPane = DEFAULT_PANE
+  }
 
   get isOpen(): boolean {
-    return this._open;
+    return this._open
   }
 }
diff --git a/app/assets/javascripts/ui_models/app_state/purchase_flow_state.ts b/app/assets/javascripts/UIModels/AppState/PurchaseFlowState.ts
similarity index 52%
rename from app/assets/javascripts/ui_models/app_state/purchase_flow_state.ts
rename to app/assets/javascripts/UIModels/AppState/PurchaseFlowState.ts
index e527077e1..5008ab2ff 100644
--- a/app/assets/javascripts/ui_models/app_state/purchase_flow_state.ts
+++ b/app/assets/javascripts/UIModels/AppState/PurchaseFlowState.ts
@@ -1,6 +1,6 @@
-import { loadPurchaseFlowUrl } from '@/components/PurchaseFlow/PurchaseFlowWrapper';
-import { action, makeObservable, observable } from 'mobx';
-import { WebApplication } from '../application';
+import { loadPurchaseFlowUrl } from '@/Components/PurchaseFlow/PurchaseFlowWrapper'
+import { action, makeObservable, observable } from 'mobx'
+import { WebApplication } from '../Application'
 
 export enum PurchaseFlowPane {
   SignIn,
@@ -8,8 +8,8 @@ export enum PurchaseFlowPane {
 }
 
 export class PurchaseFlowState {
-  isOpen = false;
-  currentPane = PurchaseFlowPane.CreateAccount;
+  isOpen = false
+  currentPane = PurchaseFlowPane.CreateAccount
 
   constructor(private application: WebApplication) {
     makeObservable(this, {
@@ -19,23 +19,23 @@ export class PurchaseFlowState {
       setCurrentPane: action,
       openPurchaseFlow: action,
       closePurchaseFlow: action,
-    });
+    })
   }
 
   setCurrentPane = (currentPane: PurchaseFlowPane): void => {
-    this.currentPane = currentPane;
-  };
+    this.currentPane = currentPane
+  }
 
   openPurchaseFlow = (): void => {
-    const user = this.application.getUser();
+    const user = this.application.getUser()
     if (!user) {
-      this.isOpen = true;
+      this.isOpen = true
     } else {
-      loadPurchaseFlowUrl(this.application);
+      loadPurchaseFlowUrl(this.application).catch(console.error)
     }
-  };
+  }
 
   closePurchaseFlow = (): void => {
-    this.isOpen = false;
-  };
+    this.isOpen = false
+  }
 }
diff --git a/app/assets/javascripts/ui_models/app_state/quick_settings_state.ts b/app/assets/javascripts/UIModels/AppState/QuickSettingsState.ts
similarity index 57%
rename from app/assets/javascripts/ui_models/app_state/quick_settings_state.ts
rename to app/assets/javascripts/UIModels/AppState/QuickSettingsState.ts
index 733ccc74a..1e43bbf0f 100644
--- a/app/assets/javascripts/ui_models/app_state/quick_settings_state.ts
+++ b/app/assets/javascripts/UIModels/AppState/QuickSettingsState.ts
@@ -1,9 +1,9 @@
-import { action, makeObservable, observable } from 'mobx';
+import { action, makeObservable, observable } from 'mobx'
 
 export class QuickSettingsState {
-  open = false;
-  shouldAnimateCloseMenu = false;
-  focusModeEnabled = false;
+  open = false
+  shouldAnimateCloseMenu = false
+  focusModeEnabled = false
 
   constructor() {
     makeObservable(this, {
@@ -16,34 +16,34 @@ export class QuickSettingsState {
       setFocusModeEnabled: action,
       toggle: action,
       closeQuickSettingsMenu: action,
-    });
+    })
   }
 
   setOpen = (open: boolean): void => {
-    this.open = open;
-  };
+    this.open = open
+  }
 
   setShouldAnimateCloseMenu = (shouldAnimate: boolean): void => {
-    this.shouldAnimateCloseMenu = shouldAnimate;
-  };
+    this.shouldAnimateCloseMenu = shouldAnimate
+  }
 
   setFocusModeEnabled = (enabled: boolean): void => {
-    this.focusModeEnabled = enabled;
-  };
+    this.focusModeEnabled = enabled
+  }
 
   toggle = (): void => {
     if (this.open) {
-      this.closeQuickSettingsMenu();
+      this.closeQuickSettingsMenu()
     } else {
-      this.setOpen(true);
+      this.setOpen(true)
     }
-  };
+  }
 
   closeQuickSettingsMenu = (): void => {
-    this.setShouldAnimateCloseMenu(true);
+    this.setShouldAnimateCloseMenu(true)
     setTimeout(() => {
-      this.setOpen(false);
-      this.setShouldAnimateCloseMenu(false);
-    }, 150);
-  };
+      this.setOpen(false)
+      this.setShouldAnimateCloseMenu(false)
+    }, 150)
+  }
 }
diff --git a/app/assets/javascripts/ui_models/app_state/search_options_state.ts b/app/assets/javascripts/UIModels/AppState/SearchOptionsState.ts
similarity index 54%
rename from app/assets/javascripts/ui_models/app_state/search_options_state.ts
rename to app/assets/javascripts/UIModels/AppState/SearchOptionsState.ts
index b65dd574a..9af20e472 100644
--- a/app/assets/javascripts/ui_models/app_state/search_options_state.ts
+++ b/app/assets/javascripts/UIModels/AppState/SearchOptionsState.ts
@@ -1,16 +1,13 @@
-import { ApplicationEvent } from '@standardnotes/snjs';
-import { makeObservable, observable, action, runInAction } from 'mobx';
-import { WebApplication } from '../application';
+import { ApplicationEvent } from '@standardnotes/snjs'
+import { makeObservable, observable, action, runInAction } from 'mobx'
+import { WebApplication } from '../Application'
 
 export class SearchOptionsState {
-  includeProtectedContents = false;
-  includeArchived = false;
-  includeTrashed = false;
+  includeProtectedContents = false
+  includeArchived = false
+  includeTrashed = false
 
-  constructor(
-    private application: WebApplication,
-    appObservers: (() => void)[]
-  ) {
+  constructor(private application: WebApplication, appObservers: (() => void)[]) {
     makeObservable(this, {
       includeProtectedContents: observable,
       includeTrashed: observable,
@@ -20,39 +17,38 @@ export class SearchOptionsState {
       toggleIncludeTrashed: action,
       toggleIncludeProtectedContents: action,
       refreshIncludeProtectedContents: action,
-    });
+    })
 
     appObservers.push(
       this.application.addEventObserver(async () => {
-        this.refreshIncludeProtectedContents();
+        this.refreshIncludeProtectedContents()
       }, ApplicationEvent.UnprotectedSessionBegan),
       this.application.addEventObserver(async () => {
-        this.refreshIncludeProtectedContents();
-      }, ApplicationEvent.UnprotectedSessionExpired)
-    );
+        this.refreshIncludeProtectedContents()
+      }, ApplicationEvent.UnprotectedSessionExpired),
+    )
   }
 
   toggleIncludeArchived = (): void => {
-    this.includeArchived = !this.includeArchived;
-  };
+    this.includeArchived = !this.includeArchived
+  }
 
   toggleIncludeTrashed = (): void => {
-    this.includeTrashed = !this.includeTrashed;
-  };
+    this.includeTrashed = !this.includeTrashed
+  }
 
   refreshIncludeProtectedContents = (): void => {
-    this.includeProtectedContents =
-      this.application.hasUnprotectedAccessSession();
-  };
+    this.includeProtectedContents = this.application.hasUnprotectedAccessSession()
+  }
 
   toggleIncludeProtectedContents = async (): Promise<void> => {
     if (this.includeProtectedContents) {
-      this.includeProtectedContents = false;
+      this.includeProtectedContents = false
     } else {
-      await this.application.authorizeSearchingProtectedNotesText();
+      await this.application.authorizeSearchingProtectedNotesText()
       runInAction(() => {
-        this.refreshIncludeProtectedContents();
-      });
+        this.refreshIncludeProtectedContents()
+      })
     }
-  };
+  }
 }
diff --git a/app/assets/javascripts/ui_models/app_state/subscription_state.ts b/app/assets/javascripts/UIModels/AppState/SubscriptionState.ts
similarity index 64%
rename from app/assets/javascripts/ui_models/app_state/subscription_state.ts
rename to app/assets/javascripts/UIModels/AppState/SubscriptionState.ts
index d1db6c66c..2a16df98b 100644
--- a/app/assets/javascripts/ui_models/app_state/subscription_state.ts
+++ b/app/assets/javascripts/UIModels/AppState/SubscriptionState.ts
@@ -2,30 +2,27 @@ import {
   ApplicationEvent,
   ClientDisplayableError,
   convertTimestampToMilliseconds,
-} from '@standardnotes/snjs';
-import { action, computed, makeObservable, observable } from 'mobx';
-import { WebApplication } from '../application';
+} from '@standardnotes/snjs'
+import { action, computed, makeObservable, observable } from 'mobx'
+import { WebApplication } from '../Application'
 
 type Subscription = {
-  planName: string;
-  cancelled: boolean;
-  endsAt: number;
-};
+  planName: string
+  cancelled: boolean
+  endsAt: number
+}
 
 type AvailableSubscriptions = {
   [key: string]: {
-    name: string;
-  };
-};
+    name: string
+  }
+}
 
 export class SubscriptionState {
-  userSubscription: Subscription | undefined = undefined;
-  availableSubscriptions: AvailableSubscriptions | undefined = undefined;
+  userSubscription: Subscription | undefined = undefined
+  availableSubscriptions: AvailableSubscriptions | undefined = undefined
 
-  constructor(
-    private application: WebApplication,
-    appObservers: (() => void)[]
-  ) {
+  constructor(private application: WebApplication, appObservers: (() => void)[]) {
     makeObservable(this, {
       userSubscription: observable,
       availableSubscriptions: observable,
@@ -37,21 +34,21 @@ export class SubscriptionState {
 
       setUserSubscription: action,
       setAvailableSubscriptions: action,
-    });
+    })
 
     appObservers.push(
       application.addEventObserver(async () => {
         if (application.hasAccount()) {
-          this.getSubscriptionInfo();
+          this.getSubscriptionInfo().catch(console.error)
         }
       }, ApplicationEvent.Launched),
       application.addEventObserver(async () => {
-        this.getSubscriptionInfo();
+        this.getSubscriptionInfo().catch(console.error)
       }, ApplicationEvent.SignedIn),
       application.addEventObserver(async () => {
-        this.getSubscriptionInfo();
-      }, ApplicationEvent.UserRolesChanged)
-    );
+        this.getSubscriptionInfo().catch(console.error)
+      }, ApplicationEvent.UserRolesChanged),
+    )
   }
 
   get userSubscriptionName(): string {
@@ -60,67 +57,63 @@ export class SubscriptionState {
       this.userSubscription &&
       this.availableSubscriptions[this.userSubscription.planName]
     ) {
-      return this.availableSubscriptions[this.userSubscription.planName].name;
+      return this.availableSubscriptions[this.userSubscription.planName].name
     }
-    return '';
+    return ''
   }
 
   get userSubscriptionExpirationDate(): Date | undefined {
     if (!this.userSubscription) {
-      return undefined;
+      return undefined
     }
 
-    return new Date(
-      convertTimestampToMilliseconds(this.userSubscription.endsAt)
-    );
+    return new Date(convertTimestampToMilliseconds(this.userSubscription.endsAt))
   }
 
   get isUserSubscriptionExpired(): boolean {
     if (!this.userSubscriptionExpirationDate) {
-      return false;
+      return false
     }
 
-    return this.userSubscriptionExpirationDate.getTime() < new Date().getTime();
+    return this.userSubscriptionExpirationDate.getTime() < new Date().getTime()
   }
 
   get isUserSubscriptionCanceled(): boolean {
-    return Boolean(this.userSubscription?.cancelled);
+    return Boolean(this.userSubscription?.cancelled)
   }
 
   public setUserSubscription(subscription: Subscription): void {
-    this.userSubscription = subscription;
+    this.userSubscription = subscription
   }
 
-  public setAvailableSubscriptions(
-    subscriptions: AvailableSubscriptions
-  ): void {
-    this.availableSubscriptions = subscriptions;
+  public setAvailableSubscriptions(subscriptions: AvailableSubscriptions): void {
+    this.availableSubscriptions = subscriptions
   }
 
   private async getAvailableSubscriptions() {
     try {
-      const subscriptions = await this.application.getAvailableSubscriptions();
+      const subscriptions = await this.application.getAvailableSubscriptions()
       if (!(subscriptions instanceof ClientDisplayableError)) {
-        this.setAvailableSubscriptions(subscriptions);
+        this.setAvailableSubscriptions(subscriptions)
       }
     } catch (error) {
-      console.error(error);
+      console.error(error)
     }
   }
 
   private async getSubscription() {
     try {
-      const subscription = await this.application.getUserSubscription();
+      const subscription = await this.application.getUserSubscription()
       if (!(subscription instanceof ClientDisplayableError)) {
-        this.setUserSubscription(subscription);
+        this.setUserSubscription(subscription)
       }
     } catch (error) {
-      console.error(error);
+      console.error(error)
     }
   }
 
   private async getSubscriptionInfo() {
-    await this.getSubscription();
-    await this.getAvailableSubscriptions();
+    await this.getSubscription()
+    await this.getAvailableSubscriptions()
   }
 }
diff --git a/app/assets/javascripts/UIModels/AppState/SyncState.ts b/app/assets/javascripts/UIModels/AppState/SyncState.ts
new file mode 100644
index 000000000..3cbf1c141
--- /dev/null
+++ b/app/assets/javascripts/UIModels/AppState/SyncState.ts
@@ -0,0 +1,33 @@
+import { SyncOpStatus } from '@standardnotes/snjs'
+import { action, makeObservable, observable } from 'mobx'
+
+export class SyncState {
+  inProgress = false
+  errorMessage?: string = undefined
+  humanReadablePercentage?: string = undefined
+
+  constructor() {
+    makeObservable(this, {
+      inProgress: observable,
+      errorMessage: observable,
+      humanReadablePercentage: observable,
+      update: action,
+    })
+  }
+
+  update = (status: SyncOpStatus): void => {
+    this.errorMessage = status.error?.message
+    this.inProgress = status.syncInProgress
+    const stats = status.getStats()
+    const completionPercentage =
+      stats.uploadCompletionCount === 0 ? 0 : stats.uploadCompletionCount / stats.uploadTotalCount
+
+    if (completionPercentage === 0) {
+      this.humanReadablePercentage = undefined
+    } else {
+      this.humanReadablePercentage = completionPercentage.toLocaleString(undefined, {
+        style: 'percent',
+      })
+    }
+  }
+}
diff --git a/app/assets/javascripts/ui_models/app_state/tags_state.ts b/app/assets/javascripts/UIModels/AppState/TagsState.ts
similarity index 52%
rename from app/assets/javascripts/ui_models/app_state/tags_state.ts
rename to app/assets/javascripts/UIModels/AppState/TagsState.ts
index acf1fee80..79c1e9f5c 100644
--- a/app/assets/javascripts/ui_models/app_state/tags_state.ts
+++ b/app/assets/javascripts/UIModels/AppState/TagsState.ts
@@ -1,9 +1,6 @@
-import { confirmDialog } from '@/services/alertService';
-import { STRING_DELETE_TAG } from '@/strings';
-import {
-  MAX_MENU_SIZE_MULTIPLIER,
-  MENU_MARGIN_FROM_APP_BORDER,
-} from '@/constants';
+import { confirmDialog } from '@/Services/AlertService'
+import { STRING_DELETE_TAG } from '@/Strings'
+import { MAX_MENU_SIZE_MULTIPLIER, MENU_MARGIN_FROM_APP_BORDER } from '@/Constants'
 import {
   ComponentAction,
   ContentType,
@@ -15,95 +12,87 @@ import {
   UuidString,
   isSystemView,
   FindItem,
-} from '@standardnotes/snjs';
-import {
-  action,
-  computed,
-  makeAutoObservable,
-  makeObservable,
-  observable,
-  runInAction,
-} from 'mobx';
-import { WebApplication } from '../application';
-import { FeaturesState, SMART_TAGS_FEATURE_NAME } from './features_state';
+} from '@standardnotes/snjs'
+import { action, computed, makeAutoObservable, makeObservable, observable, runInAction } from 'mobx'
+import { WebApplication } from '../Application'
+import { FeaturesState, SMART_TAGS_FEATURE_NAME } from './FeaturesState'
 
-type AnyTag = SNTag | SmartView;
+type AnyTag = SNTag | SmartView
 
 const rootTags = (application: SNApplication): SNTag[] => {
-  const hasNoParent = (tag: SNTag) => !application.items.getTagParent(tag);
+  const hasNoParent = (tag: SNTag) => !application.items.getTagParent(tag)
 
-  const allTags = application.items.getDisplayableItems<SNTag>(ContentType.Tag);
-  const rootTags = allTags.filter(hasNoParent);
+  const allTags = application.items.getDisplayableItems<SNTag>(ContentType.Tag)
+  const rootTags = allTags.filter(hasNoParent)
 
-  return rootTags;
-};
+  return rootTags
+}
 
 const tagSiblings = (application: SNApplication, tag: SNTag): SNTag[] => {
-  const withoutCurrentTag = (tags: SNTag[]) =>
-    tags.filter((other) => other.uuid !== tag.uuid);
+  const withoutCurrentTag = (tags: SNTag[]) => tags.filter((other) => other.uuid !== tag.uuid)
 
-  const isTemplateTag = application.items.isTemplateItem(tag);
-  const parentTag = !isTemplateTag && application.items.getTagParent(tag);
+  const isTemplateTag = application.items.isTemplateItem(tag)
+  const parentTag = !isTemplateTag && application.items.getTagParent(tag)
 
   if (parentTag) {
-    const siblingsAndTag = application.items.getTagChildren(parentTag);
-    return withoutCurrentTag(siblingsAndTag);
+    const siblingsAndTag = application.items.getTagChildren(parentTag)
+    return withoutCurrentTag(siblingsAndTag)
   }
 
-  return withoutCurrentTag(rootTags(application));
-};
+  return withoutCurrentTag(rootTags(application))
+}
 
 const isValidFutureSiblings = (
   application: SNApplication,
   futureSiblings: SNTag[],
-  tag: SNTag
+  tag: SNTag,
 ): boolean => {
-  const siblingWithSameName = futureSiblings.find(
-    (otherTag) => otherTag.title === tag.title
-  );
+  const siblingWithSameName = futureSiblings.find((otherTag) => otherTag.title === tag.title)
 
   if (siblingWithSameName) {
-    application.alertService?.alert(
-      `A tag with the name ${tag.title} already exists at this destination. Please rename this tag before moving and try again.`
-    );
-    return false;
+    application.alertService
+      ?.alert(
+        `A tag with the name ${tag.title} already exists at this destination. Please rename this tag before moving and try again.`,
+      )
+      .catch(console.error)
+    return false
   }
-  return true;
-};
+  return true
+}
 
 export class TagsState {
-  tags: SNTag[] = [];
-  smartViews: SmartView[] = [];
-  allNotesCount_ = 0;
-  selected_: AnyTag | undefined;
-  previouslySelected_: AnyTag | undefined;
-  editing_: SNTag | SmartView | undefined;
-  addingSubtagTo: SNTag | undefined;
+  tags: SNTag[] = []
+  smartViews: SmartView[] = []
+  allNotesCount_ = 0
+  selected_: AnyTag | undefined
+  previouslySelected_: AnyTag | undefined
+  editing_: SNTag | SmartView | undefined
+  addingSubtagTo: SNTag | undefined
 
-  contextMenuOpen = false;
+  contextMenuOpen = false
   contextMenuPosition: { top?: number; left: number; bottom?: number } = {
     top: 0,
     left: 0,
-  };
-  contextMenuClickLocation: { x: number; y: number } = { x: 0, y: 0 };
-  contextMenuMaxHeight: number | 'auto' = 'auto';
+  }
+  contextMenuClickLocation: { x: number; y: number } = { x: 0, y: 0 }
+  contextMenuMaxHeight: number | 'auto' = 'auto'
 
-  private readonly tagsCountsState: TagsCountsState;
+  private readonly tagsCountsState: TagsCountsState
 
   constructor(
     private application: WebApplication,
     appEventListeners: (() => void)[],
-    private features: FeaturesState
+    private features: FeaturesState,
   ) {
-    this.tagsCountsState = new TagsCountsState(this.application);
+    this.tagsCountsState = new TagsCountsState(this.application)
 
-    this.selected_ = undefined;
-    this.previouslySelected_ = undefined;
-    this.editing_ = undefined;
-    this.addingSubtagTo = undefined;
+    this.selected_ = undefined
+    this.previouslySelected_ = undefined
+    this.editing_ = undefined
+    this.addingSubtagTo = undefined
 
-    this.smartViews = this.application.items.getSmartViews();
-    this.selected_ = this.smartViews[0];
+    this.smartViews = this.application.items.getSmartViews()
+    this.selected_ = this.smartViews[0]
 
     makeObservable(this, {
       tags: observable.ref,
@@ -142,147 +131,127 @@ export class TagsState {
       setContextMenuClickLocation: action,
       setContextMenuPosition: action,
       setContextMenuMaxHeight: action,
-    });
+    })
 
     appEventListeners.push(
       this.application.streamItems(
         [ContentType.Tag, ContentType.SmartView],
         ({ changed, removed }) => {
           runInAction(() => {
-            this.tags = this.application.items.getDisplayableItems<SNTag>(
-              ContentType.Tag
-            );
+            this.tags = this.application.items.getDisplayableItems<SNTag>(ContentType.Tag)
 
-            this.smartViews = this.application.items.getSmartViews();
+            this.smartViews = this.application.items.getSmartViews()
 
-            const selectedTag = this.selected_;
+            const selectedTag = this.selected_
 
             if (selectedTag && !isSystemView(selectedTag as SmartView)) {
               if (FindItem(removed, selectedTag.uuid)) {
-                this.selected_ = this.smartViews[0];
+                this.selected_ = this.smartViews[0]
               }
 
-              const updated = FindItem(changed, selectedTag.uuid);
+              const updated = FindItem(changed, selectedTag.uuid)
               if (updated) {
-                this.selected_ = updated as AnyTag;
+                this.selected_ = updated as AnyTag
               }
             } else {
-              this.selected_ = this.smartViews[0];
+              this.selected_ = this.smartViews[0]
             }
-          });
-        }
-      )
-    );
+          })
+        },
+      ),
+    )
 
     appEventListeners.push(
       this.application.items.addNoteCountChangeObserver((tagUuid) => {
         if (!tagUuid) {
-          this.setAllNotesCount(
-            this.application.items.allCountableNotesCount()
-          );
+          this.setAllNotesCount(this.application.items.allCountableNotesCount())
         } else {
-          this.tagsCountsState.update([
-            this.application.items.findItem(tagUuid) as SNTag,
-          ]);
+          this.tagsCountsState.update([this.application.items.findItem(tagUuid) as SNTag])
         }
-      })
-    );
+      }),
+    )
   }
 
   async createSubtagAndAssignParent(parent: SNTag, title: string) {
-    const hasEmptyTitle = title.length === 0;
+    const hasEmptyTitle = title.length === 0
 
     if (hasEmptyTitle) {
-      this.setAddingSubtagTo(undefined);
-      return;
+      this.setAddingSubtagTo(undefined)
+      return
     }
 
-    const createdTag = (await this.application.mutator.createTagOrSmartView(
-      title
-    )) as SNTag;
+    const createdTag = (await this.application.mutator.createTagOrSmartView(title)) as SNTag
 
-    const futureSiblings = this.application.items.getTagChildren(parent);
+    const futureSiblings = this.application.items.getTagChildren(parent)
 
     if (!isValidFutureSiblings(this.application, futureSiblings, createdTag)) {
-      this.setAddingSubtagTo(undefined);
-      this.remove(createdTag, false);
-      return;
+      this.setAddingSubtagTo(undefined)
+      this.remove(createdTag, false).catch(console.error)
+      return
     }
 
-    this.assignParent(createdTag.uuid, parent.uuid);
+    this.assignParent(createdTag.uuid, parent.uuid).catch(console.error)
 
-    this.application.sync.sync();
+    this.application.sync.sync().catch(console.error)
 
     runInAction(() => {
-      this.selected = createdTag as SNTag;
-    });
+      this.selected = createdTag as SNTag
+    })
 
-    this.setAddingSubtagTo(undefined);
+    this.setAddingSubtagTo(undefined)
   }
 
   setAddingSubtagTo(tag: SNTag | undefined): void {
-    this.addingSubtagTo = tag;
+    this.addingSubtagTo = tag
   }
 
   setContextMenuOpen(open: boolean): void {
-    this.contextMenuOpen = open;
+    this.contextMenuOpen = open
   }
 
   setContextMenuClickLocation(location: { x: number; y: number }): void {
-    this.contextMenuClickLocation = location;
+    this.contextMenuClickLocation = location
   }
 
-  setContextMenuPosition(position: {
-    top?: number;
-    left: number;
-    bottom?: number;
-  }): void {
-    this.contextMenuPosition = position;
+  setContextMenuPosition(position: { top?: number; left: number; bottom?: number }): void {
+    this.contextMenuPosition = position
   }
 
   setContextMenuMaxHeight(maxHeight: number | 'auto'): void {
-    this.contextMenuMaxHeight = maxHeight;
+    this.contextMenuMaxHeight = maxHeight
   }
 
   reloadContextMenuLayout(): void {
-    const { clientHeight } = document.documentElement;
-    const defaultFontSize = window.getComputedStyle(
-      document.documentElement
-    ).fontSize;
-    const maxContextMenuHeight =
-      parseFloat(defaultFontSize) * MAX_MENU_SIZE_MULTIPLIER;
-    const footerElementRect = document
-      .getElementById('footer-bar')
-      ?.getBoundingClientRect();
-    const footerHeightInPx = footerElementRect?.height;
+    const { clientHeight } = document.documentElement
+    const defaultFontSize = window.getComputedStyle(document.documentElement).fontSize
+    const maxContextMenuHeight = parseFloat(defaultFontSize) * MAX_MENU_SIZE_MULTIPLIER
+    const footerElementRect = document.getElementById('footer-bar')?.getBoundingClientRect()
+    const footerHeightInPx = footerElementRect?.height
 
     // Open up-bottom is default behavior
-    let openUpBottom = true;
+    let openUpBottom = true
 
     if (footerHeightInPx) {
-      const bottomSpace =
-        clientHeight - footerHeightInPx - this.contextMenuClickLocation.y;
-      const upSpace = this.contextMenuClickLocation.y;
+      const bottomSpace = clientHeight - footerHeightInPx - this.contextMenuClickLocation.y
+      const upSpace = this.contextMenuClickLocation.y
 
       // If not enough space to open up-bottom
       if (maxContextMenuHeight > bottomSpace) {
         // If there's enough space, open bottom-up
         if (upSpace > maxContextMenuHeight) {
-          openUpBottom = false;
-          this.setContextMenuMaxHeight('auto');
+          openUpBottom = false
+          this.setContextMenuMaxHeight('auto')
           // Else, reduce max height (menu will be scrollable) and open in whichever direction there's more space
         } else {
           if (upSpace > bottomSpace) {
-            this.setContextMenuMaxHeight(upSpace - MENU_MARGIN_FROM_APP_BORDER);
-            openUpBottom = false;
+            this.setContextMenuMaxHeight(upSpace - MENU_MARGIN_FROM_APP_BORDER)
+            openUpBottom = false
           } else {
-            this.setContextMenuMaxHeight(
-              bottomSpace - MENU_MARGIN_FROM_APP_BORDER
-            );
+            this.setContextMenuMaxHeight(bottomSpace - MENU_MARGIN_FROM_APP_BORDER)
           }
         }
       } else {
-        this.setContextMenuMaxHeight('auto');
+        this.setContextMenuMaxHeight('auto')
       }
     }
 
@@ -290,296 +259,272 @@ export class TagsState {
       this.setContextMenuPosition({
         top: this.contextMenuClickLocation.y,
         left: this.contextMenuClickLocation.x,
-      });
+      })
     } else {
       this.setContextMenuPosition({
         bottom: clientHeight - this.contextMenuClickLocation.y,
         left: this.contextMenuClickLocation.x,
-      });
+      })
     }
   }
 
   public get allLocalRootTags(): SNTag[] {
-    if (
-      this.editing_ instanceof SNTag &&
-      this.application.items.isTemplateItem(this.editing_)
-    ) {
-      return [this.editing_, ...this.rootTags];
+    if (this.editing_ instanceof SNTag && this.application.items.isTemplateItem(this.editing_)) {
+      return [this.editing_, ...this.rootTags]
     }
-    return this.rootTags;
+    return this.rootTags
   }
 
   public getNotesCount(tag: SNTag): number {
-    return this.tagsCountsState.counts[tag.uuid] || 0;
+    return this.tagsCountsState.counts[tag.uuid] || 0
   }
 
   getChildren(tag: SNTag): SNTag[] {
     if (this.application.items.isTemplateItem(tag)) {
-      return [];
+      return []
     }
 
-    const children = this.application.items.getTagChildren(tag);
+    const children = this.application.items.getTagChildren(tag)
 
-    const childrenUuids = children.map((childTag) => childTag.uuid);
-    const childrenTags = this.tags.filter((tag) =>
-      childrenUuids.includes(tag.uuid)
-    );
-    return childrenTags;
+    const childrenUuids = children.map((childTag) => childTag.uuid)
+    const childrenTags = this.tags.filter((tag) => childrenUuids.includes(tag.uuid))
+    return childrenTags
   }
 
   isValidTagParent(parent: SNTag, tag: SNTag): boolean {
-    return this.application.items.isValidTagParent(parent, tag);
+    return this.application.items.isValidTagParent(parent, tag)
   }
 
   public hasParent(tagUuid: UuidString): boolean {
-    const item = this.application.items.findItem(tagUuid);
-    return !!item && !!(item as SNTag).parentId;
+    const item = this.application.items.findItem(tagUuid)
+    return !!item && !!(item as SNTag).parentId
   }
 
-  public async assignParent(
-    tagUuid: string,
-    futureParentUuid: string | undefined
-  ): Promise<void> {
-    const tag = this.application.items.findItem(tagUuid) as SNTag;
+  public async assignParent(tagUuid: string, futureParentUuid: string | undefined): Promise<void> {
+    const tag = this.application.items.findItem(tagUuid) as SNTag
 
-    const currentParent = this.application.items.getTagParent(tag);
-    const currentParentUuid = currentParent?.uuid;
+    const currentParent = this.application.items.getTagParent(tag)
+    const currentParentUuid = currentParent?.uuid
 
     if (currentParentUuid === futureParentUuid) {
-      return;
+      return
     }
 
     const futureParent =
-      futureParentUuid &&
-      (this.application.items.findItem(futureParentUuid) as SNTag);
+      futureParentUuid && (this.application.items.findItem(futureParentUuid) as SNTag)
 
     if (!futureParent) {
-      const futureSiblings = rootTags(this.application);
+      const futureSiblings = rootTags(this.application)
       if (!isValidFutureSiblings(this.application, futureSiblings, tag)) {
-        return;
+        return
       }
-      await this.application.mutator.unsetTagParent(tag);
+      await this.application.mutator.unsetTagParent(tag)
     } else {
-      const futureSiblings =
-        this.application.items.getTagChildren(futureParent);
+      const futureSiblings = this.application.items.getTagChildren(futureParent)
       if (!isValidFutureSiblings(this.application, futureSiblings, tag)) {
-        return;
+        return
       }
-      await this.application.mutator.setTagParent(futureParent, tag);
+      await this.application.mutator.setTagParent(futureParent, tag)
     }
 
-    await this.application.sync.sync();
+    await this.application.sync.sync()
   }
 
   get rootTags(): SNTag[] {
-    return this.tags.filter((tag) => !this.application.items.getTagParent(tag));
+    return this.tags.filter((tag) => !this.application.items.getTagParent(tag))
   }
 
   get tagsCount(): number {
-    return this.tags.length;
+    return this.tags.length
   }
 
   setAllNotesCount(allNotesCount: number) {
-    this.allNotesCount_ = allNotesCount;
+    this.allNotesCount_ = allNotesCount
   }
 
   public get allNotesCount(): number {
-    return this.allNotesCount_;
+    return this.allNotesCount_
   }
 
   public get previouslySelected(): AnyTag | undefined {
-    return this.previouslySelected_;
+    return this.previouslySelected_
   }
 
   public get selected(): AnyTag | undefined {
-    return this.selected_;
+    return this.selected_
   }
 
   public set selected(tag: AnyTag | undefined) {
     if (tag && tag.conflictOf) {
-      this.application.mutator.changeAndSaveItem(tag, (mutator) => {
-        mutator.conflictOf = undefined;
-      });
+      this.application.mutator
+        .changeAndSaveItem(tag, (mutator) => {
+          mutator.conflictOf = undefined
+        })
+        .catch(console.error)
     }
 
-    const selectionHasNotChanged = this.selected_?.uuid === tag?.uuid;
+    const selectionHasNotChanged = this.selected_?.uuid === tag?.uuid
 
     if (selectionHasNotChanged) {
-      return;
+      return
     }
 
-    this.previouslySelected_ = this.selected_;
-    this.selected_ = tag;
+    this.previouslySelected_ = this.selected_
+    this.selected_ = tag
   }
 
   public setExpanded(tag: SNTag, expanded: boolean) {
-    this.application.mutator.changeAndSaveItem<TagMutator>(tag, (mutator) => {
-      mutator.expanded = expanded;
-    });
+    this.application.mutator
+      .changeAndSaveItem<TagMutator>(tag, (mutator) => {
+        mutator.expanded = expanded
+      })
+      .catch(console.error)
   }
 
   public get selectedUuid(): UuidString | undefined {
-    return this.selected_?.uuid;
+    return this.selected_?.uuid
   }
 
   public get editingTag(): SNTag | SmartView | undefined {
-    return this.editing_;
+    return this.editing_
   }
 
   public set editingTag(editingTag: SNTag | SmartView | undefined) {
-    this.editing_ = editingTag;
-    this.selected = editingTag;
+    this.editing_ = editingTag
+    this.selected = editingTag
   }
 
   public async createNewTemplate() {
     const isAlreadyEditingATemplate =
-      this.editing_ && this.application.items.isTemplateItem(this.editing_);
+      this.editing_ && this.application.items.isTemplateItem(this.editing_)
 
     if (isAlreadyEditingATemplate) {
-      return;
+      return
     }
 
-    const newTag = (await this.application.mutator.createTemplateItem(
-      ContentType.Tag
-    )) as SNTag;
+    const newTag = (await this.application.mutator.createTemplateItem(ContentType.Tag)) as SNTag
 
     runInAction(() => {
-      this.editing_ = newTag;
-    });
+      this.editing_ = newTag
+    })
   }
 
   public undoCreateNewTag() {
-    this.editing_ = undefined;
-    const previousTag = this.previouslySelected_ || this.smartViews[0];
-    this.selected = previousTag;
+    this.editing_ = undefined
+    const previousTag = this.previouslySelected_ || this.smartViews[0]
+    this.selected = previousTag
   }
 
   public async remove(tag: SNTag | SmartView, userTriggered: boolean) {
-    let shouldDelete = !userTriggered;
+    let shouldDelete = !userTriggered
     if (userTriggered) {
       shouldDelete = await confirmDialog({
         text: STRING_DELETE_TAG,
         confirmButtonStyle: 'danger',
-      });
+      })
     }
     if (shouldDelete) {
-      this.application.mutator.deleteItem(tag);
-      this.selected = this.smartViews[0];
+      this.application.mutator.deleteItem(tag).catch(console.error)
+      this.selected = this.smartViews[0]
     }
   }
 
   public async save(tag: SNTag | SmartView, newTitle: string) {
-    const hasEmptyTitle = newTitle.length === 0;
-    const hasNotChangedTitle = newTitle === tag.title;
-    const isTemplateChange = this.application.items.isTemplateItem(tag);
+    const hasEmptyTitle = newTitle.length === 0
+    const hasNotChangedTitle = newTitle === tag.title
+    const isTemplateChange = this.application.items.isTemplateItem(tag)
 
-    const siblings =
-      tag instanceof SNTag ? tagSiblings(this.application, tag) : [];
+    const siblings = tag instanceof SNTag ? tagSiblings(this.application, tag) : []
     const hasDuplicatedTitle = siblings.some(
-      (other) => other.title.toLowerCase() === newTitle.toLowerCase()
-    );
+      (other) => other.title.toLowerCase() === newTitle.toLowerCase(),
+    )
 
     runInAction(() => {
-      this.editing_ = undefined;
-    });
+      this.editing_ = undefined
+    })
 
     if (hasEmptyTitle || hasNotChangedTitle) {
       if (isTemplateChange) {
-        this.undoCreateNewTag();
+        this.undoCreateNewTag()
       }
-      return;
+      return
     }
 
     if (hasDuplicatedTitle) {
       if (isTemplateChange) {
-        this.undoCreateNewTag();
+        this.undoCreateNewTag()
       }
-      this.application.alertService?.alert(
-        'A tag with this name already exists.'
-      );
-      return;
+      this.application.alertService
+        ?.alert('A tag with this name already exists.')
+        .catch(console.error)
+      return
     }
 
     if (isTemplateChange) {
-      const isSmartViewTitle =
-        this.application.items.isSmartViewTitle(newTitle);
+      const isSmartViewTitle = this.application.items.isSmartViewTitle(newTitle)
 
       if (isSmartViewTitle) {
         if (!this.features.hasSmartViews) {
-          await this.features.showPremiumAlert(SMART_TAGS_FEATURE_NAME);
-          return;
+          await this.features.showPremiumAlert(SMART_TAGS_FEATURE_NAME)
+          return
         }
       }
 
-      const insertedTag = await this.application.mutator.createTagOrSmartView(
-        newTitle
-      );
-      this.application.sync.sync();
+      const insertedTag = await this.application.mutator.createTagOrSmartView(newTitle)
+      this.application.sync.sync().catch(console.error)
       runInAction(() => {
-        this.selected = insertedTag as SNTag;
-      });
+        this.selected = insertedTag as SNTag
+      })
     } else {
-      await this.application.mutator.changeAndSaveItem<TagMutator>(
-        tag,
-        (mutator) => {
-          mutator.title = newTitle;
-        }
-      );
+      await this.application.mutator.changeAndSaveItem<TagMutator>(tag, (mutator) => {
+        mutator.title = newTitle
+      })
     }
   }
 
-  public onFoldersComponentMessage(
-    action: ComponentAction,
-    data: MessageData
-  ): void {
+  public onFoldersComponentMessage(action: ComponentAction, data: MessageData): void {
     if (action === ComponentAction.SelectItem) {
-      const item = data.item;
+      const item = data.item
 
       if (!item) {
-        return;
+        return
       }
 
-      if (
-        item.content_type === ContentType.Tag ||
-        item.content_type === ContentType.SmartView
-      ) {
-        const matchingTag = this.application.items.findItem(item.uuid);
+      if (item.content_type === ContentType.Tag || item.content_type === ContentType.SmartView) {
+        const matchingTag = this.application.items.findItem(item.uuid)
 
         if (matchingTag) {
-          this.selected = matchingTag as AnyTag;
-          return;
+          this.selected = matchingTag as AnyTag
+          return
         }
       }
     } else if (action === ComponentAction.ClearSelection) {
-      this.selected = this.smartViews[0];
+      this.selected = this.smartViews[0]
     }
   }
 
   public get hasAtLeastOneFolder(): boolean {
-    return this.tags.some((tag) => !!this.application.items.getTagParent(tag));
+    return this.tags.some((tag) => !!this.application.items.getTagParent(tag))
   }
 }
 
 class TagsCountsState {
-  public counts: { [uuid: string]: number } = {};
+  public counts: { [uuid: string]: number } = {}
 
   public constructor(private application: WebApplication) {
     makeAutoObservable(this, {
       counts: observable.ref,
       update: action,
-    });
+    })
   }
 
   public update(tags: SNTag[]) {
-    const newCounts: { [uuid: string]: number } = Object.assign(
-      {},
-      this.counts
-    );
+    const newCounts: { [uuid: string]: number } = Object.assign({}, this.counts)
 
     tags.forEach((tag) => {
-      newCounts[tag.uuid] = this.application.items.countableNotesForTag(tag);
-    });
+      newCounts[tag.uuid] = this.application.items.countableNotesForTag(tag)
+    })
 
-    this.counts = newCounts;
+    this.counts = newCounts
   }
 }
diff --git a/app/assets/javascripts/UIModels/AppState/index.ts b/app/assets/javascripts/UIModels/AppState/index.ts
new file mode 100644
index 000000000..ec0d94421
--- /dev/null
+++ b/app/assets/javascripts/UIModels/AppState/index.ts
@@ -0,0 +1 @@
+export { AppState, AppStateEvent, EventSource, PanelResizedData } from './AppState'
diff --git a/app/assets/javascripts/UIModels/Application.ts b/app/assets/javascripts/UIModels/Application.ts
new file mode 100644
index 000000000..eb0d4b9ea
--- /dev/null
+++ b/app/assets/javascripts/UIModels/Application.ts
@@ -0,0 +1,155 @@
+import { WebCrypto } from '@/Crypto'
+import { AlertService } from '@/Services/AlertService'
+import { ArchiveManager } from '@/Services/ArchiveManager'
+import { AutolockService } from '@/Services/AutolockService'
+import { Bridge } from '@/Services/Bridge'
+import { DesktopManager } from '@/Services/DesktopManager'
+import { IOService } from '@/Services/IOService'
+import { StatusManager } from '@/Services/StatusManager'
+import { ThemeManager } from '@/Services/ThemeManager'
+import { AppState } from '@/UIModels/AppState'
+import { WebDeviceInterface } from '@/WebDeviceInterface'
+import {
+  DeinitSource,
+  Platform,
+  SNApplication,
+  NoteGroupController,
+  removeFromArray,
+  IconsController,
+  Runtime,
+} from '@standardnotes/snjs'
+
+type WebServices = {
+  appState: AppState
+  desktopService: DesktopManager
+  autolockService: AutolockService
+  archiveService: ArchiveManager
+  statusManager: StatusManager
+  themeService: ThemeManager
+  io: IOService
+}
+
+export enum WebAppEvent {
+  NewUpdateAvailable = 'NewUpdateAvailable',
+  DesktopWindowGainedFocus = 'DesktopWindowGainedFocus',
+  DesktopWindowLostFocus = 'DesktopWindowLostFocus',
+}
+
+export type WebEventObserver = (event: WebAppEvent) => void
+
+export class WebApplication extends SNApplication {
+  private webServices!: WebServices
+  private webEventObservers: WebEventObserver[] = []
+  public noteControllerGroup: NoteGroupController
+  public iconsController: IconsController
+
+  constructor(
+    deviceInterface: WebDeviceInterface,
+    platform: Platform,
+    identifier: string,
+    defaultSyncServerHost: string,
+    public bridge: Bridge,
+    webSocketUrl: string,
+    runtime: Runtime,
+  ) {
+    super({
+      environment: bridge.environment,
+      platform: platform,
+      deviceInterface: deviceInterface,
+      crypto: WebCrypto,
+      alertService: new AlertService(),
+      identifier,
+      defaultHost: defaultSyncServerHost,
+      appVersion: bridge.appVersion,
+      webSocketUrl: webSocketUrl,
+      runtime,
+    })
+    deviceInterface.setApplication(this)
+    this.noteControllerGroup = new NoteGroupController(this)
+    this.iconsController = new IconsController()
+  }
+
+  override deinit(source: DeinitSource): void {
+    super.deinit(source)
+    try {
+      if (source === DeinitSource.AppGroupUnload) {
+        this.getThemeService().deactivateAllThemes()
+      }
+
+      for (const service of Object.values(this.webServices)) {
+        if ('deinit' in service) {
+          service.deinit?.(source)
+        }
+        ;(service as any).application = undefined
+      }
+
+      this.webServices = {} as WebServices
+      this.noteControllerGroup.deinit()
+      this.webEventObservers.length = 0
+
+      if (source === DeinitSource.SignOut) {
+        this.bridge.onSignOut()
+      }
+    } catch (error) {
+      console.error('Error while deiniting application', error)
+    }
+  }
+
+  setWebServices(services: WebServices): void {
+    this.webServices = services
+  }
+
+  public addWebEventObserver(observer: WebEventObserver): () => void {
+    this.webEventObservers.push(observer)
+    return () => {
+      removeFromArray(this.webEventObservers, observer)
+    }
+  }
+
+  public notifyWebEvent(event: WebAppEvent): void {
+    for (const observer of this.webEventObservers) {
+      observer(event)
+    }
+  }
+
+  public getAppState(): AppState {
+    return this.webServices.appState
+  }
+
+  public getDesktopService(): DesktopManager {
+    return this.webServices.desktopService
+  }
+
+  public getAutolockService() {
+    return this.webServices.autolockService
+  }
+
+  public getArchiveService() {
+    return this.webServices.archiveService
+  }
+
+  getStatusManager() {
+    return this.webServices.statusManager
+  }
+
+  public getThemeService() {
+    return this.webServices.themeService
+  }
+
+  public get io() {
+    return this.webServices.io
+  }
+
+  async checkForSecurityUpdate() {
+    return this.protocolUpgradeAvailable()
+  }
+
+  downloadBackup(): void | Promise<void> {
+    return this.bridge.downloadBackup()
+  }
+
+  async signOutAndDeleteLocalBackups(): Promise<void> {
+    await this.bridge.deleteLocalBackups()
+    return this.user.signOut()
+  }
+}
diff --git a/app/assets/javascripts/UIModels/ApplicationGroup.ts b/app/assets/javascripts/UIModels/ApplicationGroup.ts
new file mode 100644
index 000000000..2a2c4dc7c
--- /dev/null
+++ b/app/assets/javascripts/UIModels/ApplicationGroup.ts
@@ -0,0 +1,75 @@
+import { WebDeviceInterface } from '@/WebDeviceInterface'
+import { WebApplication } from './Application'
+import {
+  ApplicationDescriptor,
+  SNApplicationGroup,
+  DeviceInterface,
+  Platform,
+  Runtime,
+  InternalEventBus,
+} from '@standardnotes/snjs'
+import { AppState } from '@/UIModels/AppState'
+import { Bridge } from '@/Services/Bridge'
+import { getPlatform, isDesktopApplication } from '@/Utils'
+import { ArchiveManager } from '@/Services/ArchiveManager'
+import { DesktopManager } from '@/Services/DesktopManager'
+import { IOService } from '@/Services/IOService'
+import { AutolockService } from '@/Services/AutolockService'
+import { StatusManager } from '@/Services/StatusManager'
+import { ThemeManager } from '@/Services/ThemeManager'
+
+export class ApplicationGroup extends SNApplicationGroup {
+  constructor(
+    private defaultSyncServerHost: string,
+    private bridge: Bridge,
+    private runtime: Runtime,
+    private webSocketUrl: string,
+  ) {
+    super(new WebDeviceInterface(bridge))
+  }
+
+  override async initialize(): Promise<void> {
+    await super.initialize({
+      applicationCreator: this.createApplication,
+    })
+
+    if (isDesktopApplication()) {
+      Object.defineProperty(window, 'desktopManager', {
+        get: () => (this.primaryApplication as WebApplication).getDesktopService(),
+      })
+    }
+  }
+
+  private createApplication = (
+    descriptor: ApplicationDescriptor,
+    deviceInterface: DeviceInterface,
+  ) => {
+    const platform = getPlatform()
+    const application = new WebApplication(
+      deviceInterface as WebDeviceInterface,
+      platform,
+      descriptor.identifier,
+      this.defaultSyncServerHost,
+      this.bridge,
+      this.webSocketUrl,
+      this.runtime,
+    )
+    const appState = new AppState(application, this.bridge)
+    const archiveService = new ArchiveManager(application)
+    const desktopService = new DesktopManager(application, this.bridge)
+    const io = new IOService(platform === Platform.MacWeb || platform === Platform.MacDesktop)
+    const autolockService = new AutolockService(application, new InternalEventBus())
+    const statusManager = new StatusManager()
+    const themeService = new ThemeManager(application)
+    application.setWebServices({
+      appState,
+      archiveService,
+      desktopService,
+      io,
+      autolockService,
+      statusManager,
+      themeService,
+    })
+    return application
+  }
+}
diff --git a/app/assets/javascripts/Utils/CalculateDifferenceBetweenDatesInDays.ts b/app/assets/javascripts/Utils/CalculateDifferenceBetweenDatesInDays.ts
new file mode 100644
index 000000000..c7a6b3ed2
--- /dev/null
+++ b/app/assets/javascripts/Utils/CalculateDifferenceBetweenDatesInDays.ts
@@ -0,0 +1,19 @@
+import { MILLISECONDS_IN_A_DAY } from '@/Constants'
+
+export const calculateDifferenceBetweenDatesInDays = (firstDate: Date, secondDate: Date) => {
+  const firstDateAsUTCMilliseconds = Date.UTC(
+    firstDate.getFullYear(),
+    firstDate.getMonth(),
+    firstDate.getDate(),
+  )
+
+  const secondDateAsUTCMilliseconds = Date.UTC(
+    secondDate.getFullYear(),
+    secondDate.getMonth(),
+    secondDate.getDate(),
+  )
+
+  return Math.round(
+    (firstDateAsUTCMilliseconds - secondDateAsUTCMilliseconds) / MILLISECONDS_IN_A_DAY,
+  )
+}
diff --git a/app/assets/javascripts/Utils/CalculateSubmenuStyle.tsx b/app/assets/javascripts/Utils/CalculateSubmenuStyle.tsx
new file mode 100644
index 000000000..5ad77e12c
--- /dev/null
+++ b/app/assets/javascripts/Utils/CalculateSubmenuStyle.tsx
@@ -0,0 +1,64 @@
+import { MAX_MENU_SIZE_MULTIPLIER, MENU_MARGIN_FROM_APP_BORDER } from '@/Constants'
+
+export type SubmenuStyle = {
+  top?: number | 'auto'
+  right?: number | 'auto'
+  bottom: number | 'auto'
+  left?: number | 'auto'
+  visibility?: 'hidden' | 'visible'
+  maxHeight: number | 'auto'
+}
+
+export const calculateSubmenuStyle = (
+  button: HTMLButtonElement | null,
+  menu?: HTMLDivElement | HTMLMenuElement | null,
+): SubmenuStyle | undefined => {
+  const defaultFontSize = window.getComputedStyle(document.documentElement).fontSize
+  const maxChangeEditorMenuSize = parseFloat(defaultFontSize) * MAX_MENU_SIZE_MULTIPLIER
+  const { clientWidth, clientHeight } = document.documentElement
+  const buttonRect = button?.getBoundingClientRect()
+  const buttonParentRect = button?.parentElement?.getBoundingClientRect()
+  const menuBoundingRect = menu?.getBoundingClientRect()
+  const footerElementRect = document.getElementById('footer-bar')?.getBoundingClientRect()
+  const footerHeightInPx = footerElementRect?.height ?? 0
+
+  let position: SubmenuStyle = {
+    bottom: 'auto',
+    maxHeight: 'auto',
+  }
+
+  if (buttonRect && buttonParentRect) {
+    let positionBottom = clientHeight - buttonRect.bottom - buttonRect.height / 2
+
+    if (positionBottom < footerHeightInPx) {
+      positionBottom = footerHeightInPx + MENU_MARGIN_FROM_APP_BORDER
+    }
+
+    position = {
+      bottom: positionBottom,
+      visibility: 'hidden',
+      maxHeight: 'auto',
+    }
+
+    if (buttonRect.right + maxChangeEditorMenuSize > clientWidth) {
+      position.right = clientWidth - buttonRect.left
+    } else {
+      position.left = buttonRect.right
+    }
+  }
+
+  if (menuBoundingRect?.height && buttonRect && position.bottom !== 'auto') {
+    position.visibility = 'visible'
+
+    if (menuBoundingRect.y < MENU_MARGIN_FROM_APP_BORDER) {
+      position.bottom = position.bottom + menuBoundingRect.y - MENU_MARGIN_FROM_APP_BORDER * 2
+    }
+
+    if (footerElementRect && menuBoundingRect.height > footerElementRect.y) {
+      position.bottom = footerElementRect.height + MENU_MARGIN_FROM_APP_BORDER
+      position.maxHeight = clientHeight - footerElementRect.height - MENU_MARGIN_FROM_APP_BORDER * 2
+    }
+  }
+
+  return position
+}
diff --git a/app/assets/javascripts/Utils/ConcatenateUint8Arrays.ts b/app/assets/javascripts/Utils/ConcatenateUint8Arrays.ts
new file mode 100644
index 000000000..ababd3a55
--- /dev/null
+++ b/app/assets/javascripts/Utils/ConcatenateUint8Arrays.ts
@@ -0,0 +1,12 @@
+export const concatenateUint8Arrays = (arrays: Uint8Array[]) => {
+  const totalLength = arrays.map((array) => array.length).reduce((prev, next) => prev + next, 0)
+
+  const concatenatedArray = new Uint8Array(totalLength)
+  let offset = 0
+  arrays.forEach((array) => {
+    concatenatedArray.set(array, offset)
+    offset += array.length
+  })
+
+  return concatenatedArray
+}
diff --git a/app/assets/javascripts/utils/isMobile.ts b/app/assets/javascripts/Utils/IsMobile.ts
similarity index 91%
rename from app/assets/javascripts/utils/isMobile.ts
rename to app/assets/javascripts/Utils/IsMobile.ts
index 5167dc0a3..96912dd51 100644
--- a/app/assets/javascripts/utils/isMobile.ts
+++ b/app/assets/javascripts/Utils/IsMobile.ts
@@ -9,20 +9,20 @@
  */
 
 const mobileRE =
-  /(android|bb\d+|meego).+mobile|armv7l|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series[46]0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i;
+  /(android|bb\d+|meego).+mobile|armv7l|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series[46]0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i
 
-const tabletRE = /android|ipad|playbook|silk/i;
+const tabletRE = /android|ipad|playbook|silk/i
 
 export type Opts = {
-  tablet?: boolean;
-};
+  tablet?: boolean
+}
 
 export const isMobile = (opts: Opts = {}) => {
-  const ua = navigator.userAgent || navigator.vendor;
+  const ua = navigator.userAgent || navigator.vendor
 
   if (typeof ua !== 'string') {
-    return false;
+    return false
   }
 
-  return mobileRE.test(ua) || (!!opts.tablet && tabletRE.test(ua));
-};
+  return mobileRE.test(ua) || (!!opts.tablet && tabletRE.test(ua))
+}
diff --git a/app/assets/javascripts/Utils/ManageSubscription.ts b/app/assets/javascripts/Utils/ManageSubscription.ts
new file mode 100644
index 000000000..66d27b2ad
--- /dev/null
+++ b/app/assets/javascripts/Utils/ManageSubscription.ts
@@ -0,0 +1,13 @@
+import { SNApplication } from '@standardnotes/snjs'
+
+export function openSubscriptionDashboard(application: SNApplication): void {
+  application
+    .getNewSubscriptionToken()
+    .then((token) => {
+      if (!token) {
+        return
+      }
+      window.open(`${window.dashboardUrl}?subscription_token=${token}`)
+    })
+    .catch(console.error)
+}
diff --git a/app/assets/javascripts/Utils/SortThemes.ts b/app/assets/javascripts/Utils/SortThemes.ts
new file mode 100644
index 000000000..7dc7ea01e
--- /dev/null
+++ b/app/assets/javascripts/Utils/SortThemes.ts
@@ -0,0 +1,14 @@
+import { ThemeItem } from '@/Components/QuickSettingsMenu/ThemeItem'
+
+export const sortThemes = (a: ThemeItem, b: ThemeItem) => {
+  const aIsLayerable = a.component?.isLayerable()
+  const bIsLayerable = b.component?.isLayerable()
+
+  if (aIsLayerable && !bIsLayerable) {
+    return 1
+  } else if (!aIsLayerable && bIsLayerable) {
+    return -1
+  } else {
+    return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1
+  }
+}
diff --git a/app/assets/javascripts/Utils/StringUtils.spec.ts b/app/assets/javascripts/Utils/StringUtils.spec.ts
new file mode 100644
index 000000000..fea482234
--- /dev/null
+++ b/app/assets/javascripts/Utils/StringUtils.spec.ts
@@ -0,0 +1,61 @@
+import { getIndexOfQueryInString, splitQueryInString, splitRangeWithinString } from './StringUtils'
+
+describe('string utils', () => {
+  describe('splitRangeWithinString', () => {
+    it('should return whole string if range is invalid or out of bounds', () => {
+      const string = 'test-string'
+
+      const outOfBoundsStartResult = splitRangeWithinString(string, 15, 0)
+      expect(outOfBoundsStartResult).toStrictEqual(['test-string'])
+
+      const outOfBoundsEndResult = splitRangeWithinString(string, 0, -15)
+      expect(outOfBoundsEndResult).toStrictEqual(['test-string'])
+
+      const invalidRangeResult = splitRangeWithinString(string, 15, 0)
+      expect(invalidRangeResult).toStrictEqual(['test-string'])
+    })
+
+    it('should return split string if range is valid', () => {
+      const string = 'test-string'
+
+      const case1 = splitRangeWithinString(string, 0, 3)
+      expect(case1).toStrictEqual(['tes', 't-string'])
+
+      const case2 = splitRangeWithinString(string, 2, 6)
+      expect(case2).toStrictEqual(['te', 'st-s', 'tring'])
+
+      const case3 = splitRangeWithinString(string, 4, 9)
+      expect(case3).toStrictEqual(['test', '-stri', 'ng'])
+    })
+  })
+
+  describe('getIndexOfQueryInString', () => {
+    it('should get correct index of query in string', () => {
+      const string = 'tEsT-sTrInG'
+
+      const indexOfQuery1 = getIndexOfQueryInString(string, 'tRi')
+      expect(indexOfQuery1).toBe(6)
+
+      const indexOfQuery2 = getIndexOfQueryInString(string, 'StR')
+      expect(indexOfQuery2).toBe(5)
+
+      const indexOfQuery3 = getIndexOfQueryInString(string, 'stringUtils')
+      expect(indexOfQuery3).toBe(-1)
+    })
+  })
+
+  describe('splitQueryInString', () => {
+    it('should split string if it includes the query', () => {
+      const string = 'TeSt-StRiNg'
+
+      const query1Result = splitQueryInString(string, 'T-sTr')
+      expect(query1Result).toStrictEqual(['TeS', 't-StR', 'iNg'])
+
+      const query2Result = splitQueryInString(string, 'InG')
+      expect(query2Result).toStrictEqual(['TeSt-StR', 'iNg'])
+
+      const query3Result = splitQueryInString(string, 'invalid query')
+      expect(query3Result).toStrictEqual(['TeSt-StRiNg'])
+    })
+  })
+})
diff --git a/app/assets/javascripts/Utils/StringUtils.ts b/app/assets/javascripts/Utils/StringUtils.ts
new file mode 100644
index 000000000..8b93649e8
--- /dev/null
+++ b/app/assets/javascripts/Utils/StringUtils.ts
@@ -0,0 +1,29 @@
+export const splitRangeWithinString = (string: string, start: number, end: number) => {
+  const isStartOutOfBounds = start > string.length || start < 0
+  const isEndOutOfBounds = end > string.length || end < 0
+  const isInvalidRange = start > end
+
+  if (isStartOutOfBounds || isEndOutOfBounds || isInvalidRange) {
+    return [string]
+  } else {
+    return [string.slice(0, start), string.slice(start, end), string.slice(end)].filter(
+      (slice) => slice.length > 0,
+    )
+  }
+}
+
+export const getIndexOfQueryInString = (string: string, query: string) => {
+  const lowercasedTitle = string.toLowerCase()
+  const lowercasedQuery = query.toLowerCase()
+  return lowercasedTitle.indexOf(lowercasedQuery)
+}
+
+export const splitQueryInString = (string: string, query: string) => {
+  const indexOfQueryInTitle = getIndexOfQueryInString(string, query)
+
+  if (indexOfQueryInTitle < 0) {
+    return [string]
+  }
+
+  return splitRangeWithinString(string, indexOfQueryInTitle, indexOfQueryInTitle + query.length)
+}
diff --git a/app/assets/javascripts/utils/utils.ts b/app/assets/javascripts/Utils/Utils.ts
similarity index 55%
rename from app/assets/javascripts/utils/utils.ts
rename to app/assets/javascripts/Utils/Utils.ts
index 920baa69c..3f14170b9 100644
--- a/app/assets/javascripts/utils/utils.ts
+++ b/app/assets/javascripts/Utils/Utils.ts
@@ -1,38 +1,38 @@
-import { Platform, platformFromString } from '@standardnotes/snjs';
-import { IsDesktopPlatform, IsWebPlatform } from '@/version';
-import { EMAIL_REGEX } from '../constants';
-export { isMobile } from './isMobile';
+import { Platform, platformFromString } from '@standardnotes/snjs'
+import { IsDesktopPlatform, IsWebPlatform } from '@/Version'
+import { EMAIL_REGEX } from '../Constants'
+export { isMobile } from './IsMobile'
 
 declare const process: {
   env: {
-    NODE_ENV: string | null | undefined;
-  };
-};
+    NODE_ENV: string | null | undefined
+  }
+}
 
-export const isDev = process.env.NODE_ENV === 'development';
+export const isDev = process.env.NODE_ENV === 'development'
 
 export function getPlatformString() {
   try {
-    const platform = navigator.platform.toLowerCase();
-    let trimmed = '';
+    const platform = navigator.platform.toLowerCase()
+    let trimmed = ''
     if (platform.includes('mac')) {
-      trimmed = 'mac';
+      trimmed = 'mac'
     } else if (platform.includes('win')) {
-      trimmed = 'windows';
+      trimmed = 'windows'
     } else if (platform.includes('linux')) {
-      trimmed = 'linux';
+      trimmed = 'linux'
     } else {
       /** Treat other platforms as linux */
-      trimmed = 'linux';
+      trimmed = 'linux'
     }
-    return trimmed + (isDesktopApplication() ? '-desktop' : '-web');
+    return trimmed + (isDesktopApplication() ? '-desktop' : '-web')
   } catch (e) {
-    return 'linux-web';
+    return 'linux-web'
   }
 }
 
 export function getPlatform(): Platform {
-  return platformFromString(getPlatformString());
+  return platformFromString(getPlatformString())
 }
 
 export function isSameDay(dateA: Date, dateB: Date): boolean {
@@ -40,31 +40,32 @@ export function isSameDay(dateA: Date, dateB: Date): boolean {
     dateA.getFullYear() === dateB.getFullYear() &&
     dateA.getMonth() === dateB.getMonth() &&
     dateA.getDate() === dateB.getDate()
-  );
+  )
 }
 
 /** Via https://davidwalsh.name/javascript-debounce-function */
-export function debounce(
-  this: any,
-  func: any,
-  wait: number,
-  immediate = false
-) {
-  let timeout: any;
+export function debounce(this: any, func: any, wait: number, immediate = false) {
+  let timeout: NodeJS.Timeout | null
   return () => {
     // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const context = this;
+    const context = this
     // eslint-disable-next-line prefer-rest-params
-    const args = arguments;
+    const args = arguments
     const later = function () {
-      timeout = null;
-      if (!immediate) func.apply(context, args);
-    };
-    const callNow = immediate && !timeout;
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-    if (callNow) func.apply(context, args);
-  };
+      timeout = null
+      if (!immediate) {
+        func.apply(context, args)
+      }
+    }
+    const callNow = immediate && !timeout
+    if (timeout) {
+      clearTimeout(timeout)
+    }
+    timeout = setTimeout(later, wait)
+    if (callNow) {
+      func.apply(context, args)
+    }
+  }
 }
 
 // https://tc39.github.io/ecma262/#sec-array.prototype.includes
@@ -73,39 +74,33 @@ if (!Array.prototype.includes) {
   Object.defineProperty(Array.prototype, 'includes', {
     value: function (searchElement: any, fromIndex: number) {
       if (this == null) {
-        throw new TypeError('"this" is null or not defined');
+        throw new TypeError('"this" is null or not defined')
       }
 
       // 1. Let O be ? ToObject(this value).
-      const o = Object(this);
+      const o = Object(this)
 
       // 2. Let len be ? ToLength(? Get(O, "length")).
-      const len = o.length >>> 0;
+      const len = o.length >>> 0
 
       // 3. If len is 0, return false.
       if (len === 0) {
-        return false;
+        return false
       }
 
       // 4. Let n be ? ToInteger(fromIndex).
       //    (If fromIndex is undefined, this step produces the value 0.)
-      const n = fromIndex | 0;
+      const n = fromIndex | 0
 
       // 5. If n ≥ 0, then
       //  a. Let k be n.
       // 6. Else n < 0,
       //  a. Let k be len + n.
       //  b. If k < 0, let k be 0.
-      let k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
+      let k = Math.max(n >= 0 ? n : len - Math.abs(n), 0)
 
       function sameValueZero(x: number, y: number) {
-        return (
-          x === y ||
-          (typeof x === 'number' &&
-            typeof y === 'number' &&
-            isNaN(x) &&
-            isNaN(y))
-        );
+        return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y))
       }
 
       // 7. Repeat, while k < len
@@ -113,58 +108,55 @@ if (!Array.prototype.includes) {
         // a. Let elementK be the result of ? Get(O, ! ToString(k)).
         // b. If SameValueZero(searchElement, elementK) is true, return true.
         if (sameValueZero(o[k], searchElement)) {
-          return true;
+          return true
         }
         // c. Increase k by 1.
-        k++;
+        k++
       }
 
       // 8. Return false
-      return false;
+      return false
     },
-  });
+  })
 }
 
-export async function preventRefreshing(
-  message: string,
-  operation: () => Promise<void> | void
-) {
-  const onBeforeUnload = window.onbeforeunload;
+export async function preventRefreshing(message: string, operation: () => Promise<void> | void) {
+  const onBeforeUnload = window.onbeforeunload
   try {
-    window.onbeforeunload = () => message;
-    await operation();
+    window.onbeforeunload = () => message
+    await operation()
   } finally {
-    window.onbeforeunload = onBeforeUnload;
+    window.onbeforeunload = onBeforeUnload
   }
 }
 
 if (!IsWebPlatform && !IsDesktopPlatform) {
-  throw Error(
-    'Neither __WEB__ nor __DESKTOP__ is true. Check your configuration files.'
-  );
+  throw Error('Neither __WEB__ nor __DESKTOP__ is true. Check your configuration files.')
 }
 
 export function isDesktopApplication() {
-  return IsDesktopPlatform;
+  return IsDesktopPlatform
 }
 
 export function getDesktopVersion() {
-  return (window as any).electronAppVersion;
+  return window.electronAppVersion
 }
 
 export const isEmailValid = (email: string): boolean => {
-  return EMAIL_REGEX.test(email);
-};
+  return EMAIL_REGEX.test(email)
+}
 
 export const getWindowUrlParams = (): URLSearchParams => {
-  return new URLSearchParams(window.location.search);
-};
+  return new URLSearchParams(window.location.search)
+}
 
 export const openInNewTab = (url: string) => {
-  const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
-  if (newWindow) newWindow.opener = null;
-};
+  const newWindow = window.open(url, '_blank', 'noopener,noreferrer')
+  if (newWindow) {
+    newWindow.opener = null
+  }
+}
 
 export const convertStringifiedBooleanToBoolean = (value: string) => {
-  return value !== 'false';
-};
+  return value !== 'false'
+}
diff --git a/app/assets/javascripts/Utils/index.ts b/app/assets/javascripts/Utils/index.ts
new file mode 100644
index 000000000..31ddeac61
--- /dev/null
+++ b/app/assets/javascripts/Utils/index.ts
@@ -0,0 +1,5 @@
+export * from './CalculateSubmenuStyle'
+export * from './ConcatenateUint8Arrays'
+export * from './IsMobile'
+export * from './StringUtils'
+export * from './Utils'
diff --git a/app/assets/javascripts/Version.ts b/app/assets/javascripts/Version.ts
new file mode 100644
index 000000000..be49915d5
--- /dev/null
+++ b/app/assets/javascripts/Version.ts
@@ -0,0 +1,8 @@
+/** Declared in webpack config */
+declare const __VERSION__: string
+declare const __DESKTOP__: boolean
+declare const __WEB__: boolean
+
+export const WebAppVersion = __VERSION__
+export const IsDesktopPlatform = __DESKTOP__
+export const IsWebPlatform = __WEB__
diff --git a/app/assets/javascripts/web_device_interface.ts b/app/assets/javascripts/WebDeviceInterface.ts
similarity index 50%
rename from app/assets/javascripts/web_device_interface.ts
rename to app/assets/javascripts/WebDeviceInterface.ts
index c44371d70..6a728708e 100644
--- a/app/assets/javascripts/web_device_interface.ts
+++ b/app/assets/javascripts/WebDeviceInterface.ts
@@ -3,161 +3,141 @@ import {
   SNApplication,
   ApplicationIdentifier,
   AbstractDevice,
-} from '@standardnotes/snjs';
-import { Database } from '@/database';
-import { Bridge } from './services/bridge';
+} from '@standardnotes/snjs'
+import { Database } from '@/Database'
+import { Bridge } from './Services/Bridge'
 
 export class WebDeviceInterface extends AbstractDevice {
-  private databases: Database[] = [];
+  private databases: Database[] = []
 
   constructor(private bridge: Bridge) {
-    super(
-      setTimeout.bind(getGlobalScope()),
-      setInterval.bind(getGlobalScope())
-    );
+    super(setTimeout.bind(getGlobalScope()), setInterval.bind(getGlobalScope()))
   }
 
   setApplication(application: SNApplication) {
-    const database = new Database(
-      application.identifier,
-      application.alertService
-    );
-    this.databases.push(database);
+    const database = new Database(application.identifier, application.alertService)
+    this.databases.push(database)
   }
 
   private databaseForIdentifier(identifier: ApplicationIdentifier) {
-    return this.databases.find(
-      (database) => database.databaseName === identifier
-    )!;
+    return this.databases.find((database) => database.databaseName === identifier) as Database
   }
 
-  deinit() {
-    super.deinit();
+  override deinit() {
+    super.deinit()
     for (const database of this.databases) {
-      database.deinit();
+      database.deinit()
     }
-    this.databases = [];
+    this.databases = []
   }
 
   async getRawStorageValue(key: string) {
-    return localStorage.getItem(key) as any;
+    return localStorage.getItem(key) as any
   }
 
   async getAllRawStorageKeyValues() {
-    const results = [];
+    const results = []
     for (const key of Object.keys(localStorage)) {
       results.push({
         key: key,
         value: localStorage[key],
-      });
+      })
     }
-    return results;
+    return results
   }
 
   async setRawStorageValue(key: string, value: any) {
-    localStorage.setItem(key, value);
+    localStorage.setItem(key, value)
   }
 
   async removeRawStorageValue(key: string) {
-    localStorage.removeItem(key);
+    localStorage.removeItem(key)
   }
 
   async removeAllRawStorageValues() {
-    localStorage.clear();
+    localStorage.clear()
   }
 
   async openDatabase(identifier: ApplicationIdentifier) {
-    this.databaseForIdentifier(identifier).unlock();
+    this.databaseForIdentifier(identifier).unlock()
     return new Promise((resolve, reject) => {
       this.databaseForIdentifier(identifier)
         .openDatabase(() => {
-          resolve({ isNewDatabase: true });
+          resolve({ isNewDatabase: true })
         })
         .then(() => {
-          resolve({ isNewDatabase: false });
+          resolve({ isNewDatabase: false })
         })
         .catch((error) => {
-          reject(error);
-        });
-    }) as Promise<{ isNewDatabase?: boolean } | undefined>;
+          reject(error)
+        })
+    }) as Promise<{ isNewDatabase?: boolean } | undefined>
   }
 
   async getAllRawDatabasePayloads(identifier: ApplicationIdentifier) {
-    return this.databaseForIdentifier(identifier).getAllPayloads();
+    return this.databaseForIdentifier(identifier).getAllPayloads()
   }
 
-  async saveRawDatabasePayload(
-    payload: any,
-    identifier: ApplicationIdentifier
-  ) {
-    return this.databaseForIdentifier(identifier).savePayload(payload);
+  async saveRawDatabasePayload(payload: any, identifier: ApplicationIdentifier) {
+    return this.databaseForIdentifier(identifier).savePayload(payload)
   }
 
-  async saveRawDatabasePayloads(
-    payloads: any[],
-    identifier: ApplicationIdentifier
-  ) {
-    return this.databaseForIdentifier(identifier).savePayloads(payloads);
+  async saveRawDatabasePayloads(payloads: any[], identifier: ApplicationIdentifier) {
+    return this.databaseForIdentifier(identifier).savePayloads(payloads)
   }
 
-  async removeRawDatabasePayloadWithId(
-    id: string,
-    identifier: ApplicationIdentifier
-  ) {
-    return this.databaseForIdentifier(identifier).deletePayload(id);
+  async removeRawDatabasePayloadWithId(id: string, identifier: ApplicationIdentifier) {
+    return this.databaseForIdentifier(identifier).deletePayload(id)
   }
 
   async removeAllRawDatabasePayloads(identifier: ApplicationIdentifier) {
-    return this.databaseForIdentifier(identifier).clearAllPayloads();
+    return this.databaseForIdentifier(identifier).clearAllPayloads()
   }
 
   async getNamespacedKeychainValue(identifier: ApplicationIdentifier) {
-    const keychain = await this.getRawKeychainValue();
+    const keychain = await this.getRawKeychainValue()
     if (!keychain) {
-      return;
+      return
     }
-    return keychain[identifier];
+    return keychain[identifier]
   }
 
-  async setNamespacedKeychainValue(
-    value: any,
-    identifier: ApplicationIdentifier
-  ) {
-    let keychain = await this.getRawKeychainValue();
+  async setNamespacedKeychainValue(value: any, identifier: ApplicationIdentifier) {
+    let keychain = await this.getRawKeychainValue()
     if (!keychain) {
-      keychain = {};
+      keychain = {}
     }
     return this.bridge.setKeychainValue({
       ...keychain,
       [identifier]: value,
-    });
+    })
   }
 
   async clearNamespacedKeychainValue(identifier: ApplicationIdentifier) {
-    const keychain = await this.getRawKeychainValue();
+    const keychain = await this.getRawKeychainValue()
     if (!keychain) {
-      return;
+      return
     }
-    delete keychain[identifier];
-    return this.bridge.setKeychainValue(keychain);
+    delete keychain[identifier]
+    return this.bridge.setKeychainValue(keychain)
   }
 
   getRawKeychainValue(): Promise<any> {
-    return this.bridge.getKeychainValue();
+    return this.bridge.getKeychainValue()
   }
 
   legacy_setRawKeychainValue(value: unknown): Promise<any> {
-    return this.bridge.setKeychainValue(value);
+    return this.bridge.setKeychainValue(value)
   }
 
   clearRawKeychainValue() {
-    return this.bridge.clearKeychainValue();
+    return this.bridge.clearKeychainValue()
   }
 
   openUrl(url: string) {
-    const win = window.open(url, '_blank');
+    const win = window.open(url, '_blank')
     if (win) {
-      win.focus();
+      win.focus()
     }
   }
 }
diff --git a/app/assets/javascripts/__mocks__/@standardnotes/snjs.js b/app/assets/javascripts/__mocks__/@standardnotes/snjs.js
index a89d29416..e512f92c2 100644
--- a/app/assets/javascripts/__mocks__/@standardnotes/snjs.js
+++ b/app/assets/javascripts/__mocks__/@standardnotes/snjs.js
@@ -2,10 +2,10 @@ const {
   ApplicationEvent,
   ProtectionSessionDurations,
   ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction,
-} = require('@standardnotes/snjs');
+} = require('@standardnotes/snjs')
 
 module.exports = {
   ApplicationEvent: ApplicationEvent,
   ProtectionSessionDurations: ProtectionSessionDurations,
   ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction,
-};
+}
diff --git a/app/assets/javascripts/app.tsx b/app/assets/javascripts/app.tsx
deleted file mode 100644
index 6a9b88137..000000000
--- a/app/assets/javascripts/app.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-'use strict';
-
-declare global {
-  interface Window {
-    dashboardUrl?: string;
-    defaultSyncServer: string;
-    devAccountEmail?: string;
-    devAccountPassword?: string;
-    devAccountServer?: string;
-    enabledUnfinishedFeatures: boolean;
-    plansUrl?: string;
-    purchaseUrl?: string;
-    startApplication?: StartApplication;
-    websocketUrl: string;
-  }
-}
-
-import { IsWebPlatform, WebAppVersion } from '@/version';
-import { Runtime, SNLog } from '@standardnotes/snjs';
-import { render } from 'preact';
-import { ApplicationGroupView } from './components/ApplicationGroupView';
-import { Bridge } from './services/bridge';
-import { BrowserBridge } from './services/browserBridge';
-import { StartApplication } from './startApplication';
-import { ApplicationGroup } from './ui_models/application_group';
-import { isDev } from './utils';
-
-const startApplication: StartApplication = async function startApplication(
-  defaultSyncServerHost: string,
-  bridge: Bridge,
-  enableUnfinishedFeatures: boolean,
-  webSocketUrl: string
-) {
-  SNLog.onLog = console.log;
-  SNLog.onError = console.error;
-
-  const mainApplicationGroup = new ApplicationGroup(
-    defaultSyncServerHost,
-    bridge,
-    enableUnfinishedFeatures ? Runtime.Dev : Runtime.Prod,
-    webSocketUrl
-  );
-
-  if (isDev) {
-    Object.defineProperties(window, {
-      application: {
-        get: () => mainApplicationGroup.primaryApplication,
-      },
-    });
-  }
-
-  const renderApp = () => {
-    render(
-      <ApplicationGroupView mainApplicationGroup={mainApplicationGroup} />,
-      document.body.appendChild(document.createElement('div'))
-    );
-  };
-
-  const domReady =
-    document.readyState === 'complete' || document.readyState === 'interactive';
-  if (domReady) {
-    renderApp();
-  } else {
-    window.addEventListener('DOMContentLoaded', () => {
-      renderApp();
-    });
-  }
-};
-
-if (IsWebPlatform) {
-  startApplication(
-    window.defaultSyncServer,
-    new BrowserBridge(WebAppVersion),
-    window.enabledUnfinishedFeatures,
-    window.websocketUrl
-  );
-} else {
-  window.startApplication = startApplication;
-}
diff --git a/app/assets/javascripts/components/Abstract/PureComponent.tsx b/app/assets/javascripts/components/Abstract/PureComponent.tsx
deleted file mode 100644
index ef6fac1f4..000000000
--- a/app/assets/javascripts/components/Abstract/PureComponent.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import { ApplicationEvent } from '@standardnotes/snjs';
-import { WebApplication } from '@/ui_models/application';
-import { AppState } from '@/ui_models/app_state';
-import { autorun, IReactionDisposer, IReactionPublic } from 'mobx';
-import { Component } from 'preact';
-import { findDOMNode, unmountComponentAtNode } from 'preact/compat';
-
-export type PureComponentState = Partial<Record<string, any>>;
-export type PureComponentProps = Partial<Record<string, any>>;
-
-export abstract class PureComponent<
-  P = PureComponentProps,
-  S = PureComponentState
-> extends Component<P, S> {
-  private unsubApp!: () => void;
-  private unsubState!: () => void;
-  private reactionDisposers: IReactionDisposer[] = [];
-
-  constructor(props: P, protected application: WebApplication) {
-    super(props);
-  }
-
-  componentDidMount() {
-    this.addAppEventObserver();
-    this.addAppStateObserver();
-  }
-
-  deinit(): void {
-    this.unsubApp?.();
-    this.unsubState?.();
-    for (const disposer of this.reactionDisposers) {
-      disposer();
-    }
-    this.reactionDisposers.length = 0;
-    (this.unsubApp as unknown) = undefined;
-    (this.unsubState as unknown) = undefined;
-  }
-
-  protected dismissModal(): void {
-    const elem = this.getElement();
-    if (!elem) {
-      return;
-    }
-
-    const parent = elem.parentElement;
-    if (!parent) {
-      return;
-    }
-    parent.remove();
-    unmountComponentAtNode(parent);
-  }
-
-  componentWillUnmount(): void {
-    this.deinit();
-  }
-
-  render() {
-    return <div>Must override</div>;
-  }
-
-  public get appState(): AppState {
-    return this.application.getAppState();
-  }
-
-  protected getElement(): Element | null {
-    return findDOMNode(this);
-  }
-
-  autorun(view: (r: IReactionPublic) => void): void {
-    this.reactionDisposers.push(autorun(view));
-  }
-
-  addAppStateObserver() {
-    this.unsubState = this.application!.getAppState().addObserver(
-      async (eventName, data) => {
-        this.onAppStateEvent(eventName, data);
-      }
-    );
-  }
-
-  onAppStateEvent(_eventName: any, _data: any) {
-    /** Optional override */
-  }
-
-  addAppEventObserver() {
-    if (this.application!.isStarted()) {
-      this.onAppStart();
-    }
-    if (this.application!.isLaunched()) {
-      this.onAppLaunch();
-    }
-    this.unsubApp = this.application!.addEventObserver(
-      async (eventName, data: any) => {
-        this.onAppEvent(eventName, data);
-        if (eventName === ApplicationEvent.Started) {
-          await this.onAppStart();
-        } else if (eventName === ApplicationEvent.Launched) {
-          await this.onAppLaunch();
-        } else if (eventName === ApplicationEvent.CompletedIncrementalSync) {
-          this.onAppIncrementalSync();
-        } else if (eventName === ApplicationEvent.CompletedFullSync) {
-          this.onAppFullSync();
-        } else if (eventName === ApplicationEvent.KeyStatusChanged) {
-          this.onAppKeyChange();
-        } else if (eventName === ApplicationEvent.LocalDataLoaded) {
-          this.onLocalDataLoaded();
-        }
-      }
-    );
-  }
-
-  onAppEvent(eventName: ApplicationEvent, data?: any) {
-    /** Optional override */
-  }
-
-  /** @override */
-  async onAppStart() {
-    /** Optional override */
-  }
-
-  onLocalDataLoaded() {
-    /** Optional override */
-  }
-
-  async onAppLaunch() {
-    /** Optional override */
-  }
-
-  async onAppKeyChange() {
-    /** Optional override */
-  }
-
-  onAppIncrementalSync() {
-    /** Optional override */
-  }
-
-  onAppFullSync() {
-    /** Optional override */
-  }
-}
diff --git a/app/assets/javascripts/components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx b/app/assets/javascripts/components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx
deleted file mode 100644
index 1679cf80f..000000000
--- a/app/assets/javascripts/components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { ApplicationGroup } from '@/ui_models/application_group';
-import { AppState } from '@/ui_models/app_state';
-import { ApplicationDescriptor } from '@standardnotes/snjs';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { useEffect, useState } from 'preact/hooks';
-import { Icon } from '../../Icon';
-import { Menu } from '../../Menu/Menu';
-import { MenuItem, MenuItemSeparator, MenuItemType } from '../../Menu/MenuItem';
-import { WorkspaceMenuItem } from './WorkspaceMenuItem';
-
-type Props = {
-  mainApplicationGroup: ApplicationGroup;
-  appState: AppState;
-  isOpen: boolean;
-};
-
-export const WorkspaceSwitcherMenu: FunctionComponent<Props> = observer(
-  ({ mainApplicationGroup, appState, isOpen }) => {
-    const [applicationDescriptors, setApplicationDescriptors] = useState<
-      ApplicationDescriptor[]
-    >([]);
-
-    useEffect(() => {
-      const removeAppGroupObserver =
-        mainApplicationGroup.addApplicationChangeObserver(() => {
-          const applicationDescriptors = mainApplicationGroup.getDescriptors();
-          setApplicationDescriptors(applicationDescriptors);
-        });
-
-      return () => {
-        removeAppGroupObserver();
-      };
-    }, [mainApplicationGroup]);
-
-    return (
-      <Menu
-        a11yLabel="Workspace switcher menu"
-        className="px-0 focus:shadow-none"
-        isOpen={isOpen}
-      >
-        {applicationDescriptors.map((descriptor) => (
-          <WorkspaceMenuItem
-            descriptor={descriptor}
-            onDelete={() => {
-              appState.accountMenu.setSigningOut(true);
-            }}
-            onClick={() => {
-              mainApplicationGroup.loadApplicationForDescriptor(descriptor);
-            }}
-            renameDescriptor={(label: string) =>
-              mainApplicationGroup.renameDescriptor(descriptor, label)
-            }
-          />
-        ))}
-        <MenuItemSeparator />
-        <MenuItem
-          type={MenuItemType.IconButton}
-          onClick={() => {
-            mainApplicationGroup.addNewApplication();
-          }}
-        >
-          <Icon type="user-add" className="color-neutral mr-2" />
-          Add another workspace
-        </MenuItem>
-      </Menu>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/ApplicationView.tsx b/app/assets/javascripts/components/ApplicationView.tsx
deleted file mode 100644
index 56c522bf0..000000000
--- a/app/assets/javascripts/components/ApplicationView.tsx
+++ /dev/null
@@ -1,250 +0,0 @@
-import { ApplicationGroup } from '@/ui_models/application_group';
-import { getPlatformString, getWindowUrlParams } from '@/utils';
-import { AppStateEvent, PanelResizedData } from '@/ui_models/app_state';
-import {
-  ApplicationEvent,
-  Challenge,
-  PermissionDialog,
-  removeFromArray,
-} from '@standardnotes/snjs';
-import { PANEL_NAME_NOTES, PANEL_NAME_NAVIGATION } from '@/constants';
-import { alertDialog } from '@/services/alertService';
-import { WebAppEvent, WebApplication } from '@/ui_models/application';
-import { PureComponent } from '@/components/Abstract/PureComponent';
-import { Navigation } from '@/components/Navigation';
-import { NotesView } from '@/components/NotesView';
-import { NoteGroupView } from '@/components/NoteGroupView';
-import { Footer } from '@/components/Footer';
-import { SessionsModal } from '@/components/SessionsModal';
-import { PreferencesViewWrapper } from '@/components/Preferences/PreferencesViewWrapper';
-import { ChallengeModal } from '@/components/ChallengeModal/ChallengeModal';
-import { NotesContextMenu } from '@/components/NotesContextMenu';
-import { PurchaseFlowWrapper } from '@/components/PurchaseFlow/PurchaseFlowWrapper';
-import { render } from 'preact';
-import { PermissionsModal } from './PermissionsModal';
-import { RevisionHistoryModalWrapper } from './RevisionHistoryModal/RevisionHistoryModalWrapper';
-import { PremiumModalProvider } from './Premium';
-import { ConfirmSignoutContainer } from './ConfirmSignoutModal';
-import { TagsContextMenu } from './Tags/TagContextMenu';
-import { ToastContainer } from '@standardnotes/stylekit';
-import { FilePreviewModalProvider } from './Files/FilePreviewModalProvider';
-
-type Props = {
-  application: WebApplication;
-  mainApplicationGroup: ApplicationGroup;
-};
-
-type State = {
-  started?: boolean;
-  launched?: boolean;
-  needsUnlock?: boolean;
-  appClass: string;
-  challenges: Challenge[];
-};
-
-export class ApplicationView extends PureComponent<Props, State> {
-  public readonly platformString = getPlatformString();
-
-  constructor(props: Props) {
-    super(props, props.application);
-    this.state = {
-      appClass: '',
-      challenges: [],
-    };
-  }
-
-  deinit() {
-    (this.application as unknown) = undefined;
-    super.deinit();
-  }
-
-  componentDidMount(): void {
-    super.componentDidMount();
-    this.loadApplication();
-  }
-
-  async loadApplication() {
-    this.application.componentManager.setDesktopManager(
-      this.application.getDesktopService()
-    );
-    await this.application.prepareForLaunch({
-      receiveChallenge: async (challenge) => {
-        const challenges = this.state.challenges.slice();
-        challenges.push(challenge);
-        this.setState({ challenges: challenges });
-      },
-    });
-    await this.application.launch();
-  }
-
-  public removeChallenge = async (challenge: Challenge) => {
-    const challenges = this.state.challenges.slice();
-    removeFromArray(challenges, challenge);
-    this.setState({ challenges: challenges });
-  };
-
-  async onAppStart() {
-    super.onAppStart();
-    this.setState({
-      started: true,
-      needsUnlock: this.application.hasPasscode(),
-    });
-
-    this.application.componentManager.presentPermissionsDialog =
-      this.presentPermissionsDialog;
-  }
-
-  async onAppLaunch() {
-    super.onAppLaunch();
-    this.setState({
-      launched: true,
-      needsUnlock: false,
-    });
-    this.handleDemoSignInFromParams();
-  }
-
-  onUpdateAvailable() {
-    this.application.notifyWebEvent(WebAppEvent.NewUpdateAvailable);
-  }
-
-  /** @override */
-  async onAppEvent(eventName: ApplicationEvent) {
-    super.onAppEvent(eventName);
-    switch (eventName) {
-      case ApplicationEvent.LocalDatabaseReadError:
-        alertDialog({
-          text: 'Unable to load local database. Please restart the app and try again.',
-        });
-        break;
-      case ApplicationEvent.LocalDatabaseWriteError:
-        alertDialog({
-          text: 'Unable to write to local database. Please restart the app and try again.',
-        });
-        break;
-    }
-  }
-
-  /** @override */
-  async onAppStateEvent(eventName: AppStateEvent, data?: unknown) {
-    if (eventName === AppStateEvent.PanelResized) {
-      const { panel, collapsed } = data as PanelResizedData;
-      let appClass = '';
-      if (panel === PANEL_NAME_NOTES && collapsed) {
-        appClass += 'collapsed-notes';
-      }
-      if (panel === PANEL_NAME_NAVIGATION && collapsed) {
-        appClass += ' collapsed-navigation';
-      }
-      this.setState({ appClass });
-    } else if (eventName === AppStateEvent.WindowDidFocus) {
-      if (!(await this.application.isLocked())) {
-        this.application.sync.sync();
-      }
-    }
-  }
-
-  async handleDemoSignInFromParams() {
-    const token = getWindowUrlParams().get('demo-token');
-    if (!token || this.application.hasAccount()) {
-      return;
-    }
-
-    await this.application.sessions.populateSessionFromDemoShareToken(token);
-  }
-
-  presentPermissionsDialog = (dialog: PermissionDialog) => {
-    render(
-      <PermissionsModal
-        application={this.application}
-        callback={dialog.callback}
-        component={dialog.component}
-        permissionsString={dialog.permissionsString}
-      />,
-      document.body.appendChild(document.createElement('div'))
-    );
-  };
-
-  render() {
-    if (this.application['dealloced'] === true) {
-      console.error('Attempting to render dealloced application');
-      return <div></div>;
-    }
-
-    const renderAppContents = !this.state.needsUnlock && this.state.launched;
-
-    return (
-      <FilePreviewModalProvider application={this.application}>
-        <PremiumModalProvider
-          application={this.application}
-          appState={this.appState}
-        >
-          <div className={this.platformString + ' main-ui-view sn-component'}>
-            {renderAppContents && (
-              <div
-                id="app"
-                className={this.state.appClass + ' app app-column-container'}
-              >
-                <Navigation application={this.application} />
-                <NotesView
-                  application={this.application}
-                  appState={this.appState}
-                />
-                <NoteGroupView application={this.application} />
-              </div>
-            )}
-            {renderAppContents && (
-              <>
-                <Footer
-                  application={this.application}
-                  applicationGroup={this.props.mainApplicationGroup}
-                />
-                <SessionsModal
-                  application={this.application}
-                  appState={this.appState}
-                />
-                <PreferencesViewWrapper
-                  appState={this.appState}
-                  application={this.application}
-                />
-                <RevisionHistoryModalWrapper
-                  application={this.application}
-                  appState={this.appState}
-                />
-              </>
-            )}
-            {this.state.challenges.map((challenge) => {
-              return (
-                <div className="sk-modal">
-                  <ChallengeModal
-                    key={challenge.id}
-                    application={this.application}
-                    challenge={challenge}
-                    onDismiss={this.removeChallenge}
-                  />
-                </div>
-              );
-            })}
-            {renderAppContents && (
-              <>
-                <NotesContextMenu
-                  application={this.application}
-                  appState={this.appState}
-                />
-                <TagsContextMenu appState={this.appState} />
-                <PurchaseFlowWrapper
-                  application={this.application}
-                  appState={this.appState}
-                />
-                <ConfirmSignoutContainer
-                  appState={this.appState}
-                  application={this.application}
-                />
-                <ToastContainer />
-              </>
-            )}
-          </div>
-        </PremiumModalProvider>
-      </FilePreviewModalProvider>
-    );
-  }
-}
diff --git a/app/assets/javascripts/components/AttachedFilesPopover/AttachedFilesButton.tsx b/app/assets/javascripts/components/AttachedFilesPopover/AttachedFilesButton.tsx
deleted file mode 100644
index f78d3e2e1..000000000
--- a/app/assets/javascripts/components/AttachedFilesPopover/AttachedFilesButton.tsx
+++ /dev/null
@@ -1,401 +0,0 @@
-import { WebApplication } from '@/ui_models/application';
-import { AppState } from '@/ui_models/app_state';
-import { MENU_MARGIN_FROM_APP_BORDER } from '@/constants';
-import {
-  Disclosure,
-  DisclosureButton,
-  DisclosurePanel,
-} from '@reach/disclosure';
-import VisuallyHidden from '@reach/visually-hidden';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
-import { Icon } from '../Icon';
-import { useCloseOnBlur } from '../utils';
-import {
-  ChallengeReason,
-  ContentType,
-  FeatureIdentifier,
-  FeatureStatus,
-  SNFile,
-} from '@standardnotes/snjs';
-import { confirmDialog } from '@/services/alertService';
-import { addToast, dismissToast, ToastType } from '@standardnotes/stylekit';
-import { StreamingFileReader } from '@standardnotes/filepicker';
-import {
-  PopoverFileItemAction,
-  PopoverFileItemActionType,
-} from './PopoverFileItemAction';
-import { AttachedFilesPopover, PopoverTabs } from './AttachedFilesPopover';
-import { usePremiumModal } from '../Premium/usePremiumModal';
-
-type Props = {
-  application: WebApplication;
-  appState: AppState;
-  onClickPreprocessing?: () => Promise<void>;
-};
-
-const createDragOverlay = () => {
-  if (document.getElementById('drag-overlay')) {
-    return;
-  }
-
-  const overlayElementTemplate =
-    '<div class="sn-component" id="drag-overlay"><div class="absolute top-0 left-0 w-full h-full z-index-1001"></div></div>';
-  const overlayFragment = document
-    .createRange()
-    .createContextualFragment(overlayElementTemplate);
-  document.body.appendChild(overlayFragment);
-};
-
-const removeDragOverlay = () => {
-  document.getElementById('drag-overlay')?.remove();
-};
-
-export const AttachedFilesButton: FunctionComponent<Props> = observer(
-  ({ application, appState, onClickPreprocessing }) => {
-    const premiumModal = usePremiumModal();
-    const note = Object.values(appState.notes.selectedNotes)[0];
-
-    const [open, setOpen] = useState(false);
-    const [position, setPosition] = useState({
-      top: 0,
-      right: 0,
-    });
-    const [maxHeight, setMaxHeight] = useState<number | 'auto'>('auto');
-    const buttonRef = useRef<HTMLButtonElement>(null);
-    const panelRef = useRef<HTMLDivElement>(null);
-    const containerRef = useRef<HTMLDivElement>(null);
-    const [closeOnBlur, keepMenuOpen] = useCloseOnBlur(containerRef, setOpen);
-
-    const [attachedFilesCount, setAttachedFilesCount] = useState(
-      note ? application.items.getFilesForNote(note).length : 0
-    );
-
-    const reloadAttachedFilesCount = useCallback(() => {
-      setAttachedFilesCount(
-        note ? application.items.getFilesForNote(note).length : 0
-      );
-    }, [application.items, note]);
-
-    useEffect(() => {
-      const unregisterFileStream = application.streamItems(
-        ContentType.File,
-        () => {
-          reloadAttachedFilesCount();
-        }
-      );
-
-      return () => {
-        unregisterFileStream();
-      };
-    }, [application, reloadAttachedFilesCount]);
-
-    const toggleAttachedFilesMenu = useCallback(async () => {
-      if (
-        application.features.getFeatureStatus(FeatureIdentifier.Files) !==
-        FeatureStatus.Entitled
-      ) {
-        premiumModal.activate('Files');
-        return;
-      }
-
-      const rect = buttonRef.current?.getBoundingClientRect();
-      if (rect) {
-        const { clientHeight } = document.documentElement;
-        const footerElementRect = document
-          .getElementById('footer-bar')
-          ?.getBoundingClientRect();
-        const footerHeightInPx = footerElementRect?.height;
-
-        if (footerHeightInPx) {
-          setMaxHeight(
-            clientHeight -
-              rect.bottom -
-              footerHeightInPx -
-              MENU_MARGIN_FROM_APP_BORDER
-          );
-        }
-
-        setPosition({
-          top: rect.bottom,
-          right: document.body.clientWidth - rect.right,
-        });
-
-        const newOpenState = !open;
-        if (newOpenState && onClickPreprocessing) {
-          await onClickPreprocessing();
-        }
-
-        setOpen(newOpenState);
-      }
-    }, [application.features, onClickPreprocessing, open, premiumModal]);
-
-    const deleteFile = async (file: SNFile) => {
-      const shouldDelete = await confirmDialog({
-        text: `Are you sure you want to permanently delete "${file.name}"?`,
-        confirmButtonStyle: 'danger',
-      });
-      if (shouldDelete) {
-        const deletingToastId = addToast({
-          type: ToastType.Loading,
-          message: `Deleting file "${file.name}"...`,
-        });
-        await application.files.deleteFile(file);
-        addToast({
-          type: ToastType.Success,
-          message: `Deleted file "${file.name}"`,
-        });
-        dismissToast(deletingToastId);
-      }
-    };
-
-    const downloadFile = async (file: SNFile) => {
-      appState.files.downloadFile(file);
-    };
-
-    const attachFileToNote = useCallback(
-      async (file: SNFile) => {
-        await application.items.associateFileWithNote(file, note);
-      },
-      [application.items, note]
-    );
-
-    const detachFileFromNote = async (file: SNFile) => {
-      await application.items.disassociateFileWithNote(file, note);
-    };
-
-    const toggleFileProtection = async (file: SNFile) => {
-      let result: SNFile | undefined;
-      if (file.protected) {
-        keepMenuOpen(true);
-        result = await application.mutator.unprotectFile(file);
-        keepMenuOpen(false);
-        buttonRef.current?.focus();
-      } else {
-        result = await application.mutator.protectFile(file);
-      }
-      const isProtected = result ? result.protected : file.protected;
-      return isProtected;
-    };
-
-    const authorizeProtectedActionForFile = async (
-      file: SNFile,
-      challengeReason: ChallengeReason
-    ) => {
-      const authorizedFiles =
-        await application.protections.authorizeProtectedActionForFiles(
-          [file],
-          challengeReason
-        );
-      const isAuthorized =
-        authorizedFiles.length > 0 && authorizedFiles.includes(file);
-      return isAuthorized;
-    };
-
-    const renameFile = async (file: SNFile, fileName: string) => {
-      await application.items.renameFile(file, fileName);
-    };
-
-    const handleFileAction = async (action: PopoverFileItemAction) => {
-      const file =
-        action.type !== PopoverFileItemActionType.RenameFile
-          ? action.payload
-          : action.payload.file;
-      let isAuthorizedForAction = true;
-
-      if (
-        file.protected &&
-        action.type !== PopoverFileItemActionType.ToggleFileProtection
-      ) {
-        keepMenuOpen(true);
-        isAuthorizedForAction = await authorizeProtectedActionForFile(
-          file,
-          ChallengeReason.AccessProtectedFile
-        );
-        keepMenuOpen(false);
-        buttonRef.current?.focus();
-      }
-
-      if (!isAuthorizedForAction) {
-        return false;
-      }
-
-      switch (action.type) {
-        case PopoverFileItemActionType.AttachFileToNote:
-          await attachFileToNote(file);
-          break;
-        case PopoverFileItemActionType.DetachFileToNote:
-          await detachFileFromNote(file);
-          break;
-        case PopoverFileItemActionType.DeleteFile:
-          await deleteFile(file);
-          break;
-        case PopoverFileItemActionType.DownloadFile:
-          await downloadFile(file);
-          break;
-        case PopoverFileItemActionType.ToggleFileProtection: {
-          const isProtected = await toggleFileProtection(file);
-          action.callback(isProtected);
-          break;
-        }
-        case PopoverFileItemActionType.RenameFile:
-          await renameFile(file, action.payload.name);
-          break;
-      }
-
-      application.sync.sync();
-
-      return true;
-    };
-
-    const [isDraggingFiles, setIsDraggingFiles] = useState(false);
-    const [currentTab, setCurrentTab] = useState(PopoverTabs.AttachedFiles);
-    const dragCounter = useRef(0);
-
-    const handleDrag = (event: DragEvent) => {
-      event.preventDefault();
-      event.stopPropagation();
-    };
-
-    const handleDragIn = useCallback(
-      (event: DragEvent) => {
-        event.preventDefault();
-        event.stopPropagation();
-
-        dragCounter.current = dragCounter.current + 1;
-
-        if (event.dataTransfer?.items.length) {
-          setIsDraggingFiles(true);
-          createDragOverlay();
-          if (!open) {
-            toggleAttachedFilesMenu();
-          }
-        }
-      },
-      [open, toggleAttachedFilesMenu]
-    );
-
-    const handleDragOut = (event: DragEvent) => {
-      event.preventDefault();
-      event.stopPropagation();
-
-      dragCounter.current = dragCounter.current - 1;
-
-      if (dragCounter.current > 0) {
-        return;
-      }
-
-      removeDragOverlay();
-
-      setIsDraggingFiles(false);
-    };
-
-    const handleDrop = useCallback(
-      (event: DragEvent) => {
-        event.preventDefault();
-        event.stopPropagation();
-
-        setIsDraggingFiles(false);
-        removeDragOverlay();
-
-        if (event.dataTransfer?.items.length) {
-          Array.from(event.dataTransfer.items).forEach(async (item) => {
-            const fileOrHandle = StreamingFileReader.available()
-              ? ((await item.getAsFileSystemHandle()) as FileSystemFileHandle)
-              : item.getAsFile();
-
-            if (!fileOrHandle) {
-              return;
-            }
-
-            const uploadedFiles = await appState.files.uploadNewFile(
-              fileOrHandle
-            );
-
-            if (!uploadedFiles) {
-              return;
-            }
-
-            if (currentTab === PopoverTabs.AttachedFiles) {
-              uploadedFiles.forEach((file) => {
-                attachFileToNote(file);
-              });
-            }
-          });
-
-          event.dataTransfer.clearData();
-          dragCounter.current = 0;
-        }
-      },
-      [appState.files, attachFileToNote, currentTab]
-    );
-
-    useEffect(() => {
-      window.addEventListener('dragenter', handleDragIn);
-      window.addEventListener('dragleave', handleDragOut);
-      window.addEventListener('dragover', handleDrag);
-      window.addEventListener('drop', handleDrop);
-
-      return () => {
-        window.removeEventListener('dragenter', handleDragIn);
-        window.removeEventListener('dragleave', handleDragOut);
-        window.removeEventListener('dragover', handleDrag);
-        window.removeEventListener('drop', handleDrop);
-      };
-    }, [handleDragIn, handleDrop]);
-
-    return (
-      <div ref={containerRef}>
-        <Disclosure open={open} onChange={toggleAttachedFilesMenu}>
-          <DisclosureButton
-            onKeyDown={(event) => {
-              if (event.key === 'Escape') {
-                setOpen(false);
-              }
-            }}
-            ref={buttonRef}
-            className={`sn-icon-button border-contrast ${
-              attachedFilesCount > 0 ? 'py-1 px-3' : ''
-            }`}
-            onBlur={closeOnBlur}
-          >
-            <VisuallyHidden>Attached files</VisuallyHidden>
-            <Icon type="attachment-file" className="block" />
-            {attachedFilesCount > 0 && (
-              <span className="ml-2">{attachedFilesCount}</span>
-            )}
-          </DisclosureButton>
-          <DisclosurePanel
-            onKeyDown={(event) => {
-              if (event.key === 'Escape') {
-                setOpen(false);
-                buttonRef.current?.focus();
-              }
-            }}
-            ref={panelRef}
-            style={{
-              ...position,
-              maxHeight,
-            }}
-            className="sn-dropdown sn-dropdown--animated min-w-80 max-h-120 max-w-xs flex flex-col overflow-y-auto fixed"
-            onBlur={closeOnBlur}
-          >
-            {open && (
-              <AttachedFilesPopover
-                application={application}
-                appState={appState}
-                note={note}
-                handleFileAction={handleFileAction}
-                currentTab={currentTab}
-                closeOnBlur={closeOnBlur}
-                setCurrentTab={setCurrentTab}
-                isDraggingFiles={isDraggingFiles}
-              />
-            )}
-          </DisclosurePanel>
-        </Disclosure>
-      </div>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/AttachedFilesPopover/PopoverFileItemAction.tsx b/app/assets/javascripts/components/AttachedFilesPopover/PopoverFileItemAction.tsx
deleted file mode 100644
index dd10b01ef..000000000
--- a/app/assets/javascripts/components/AttachedFilesPopover/PopoverFileItemAction.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { SNFile } from '@standardnotes/snjs';
-
-export enum PopoverFileItemActionType {
-  AttachFileToNote,
-  DetachFileToNote,
-  DeleteFile,
-  DownloadFile,
-  RenameFile,
-  ToggleFileProtection,
-}
-
-export type PopoverFileItemAction =
-  | {
-      type: Exclude<
-        PopoverFileItemActionType,
-        | PopoverFileItemActionType.RenameFile
-        | PopoverFileItemActionType.ToggleFileProtection
-      >;
-      payload: SNFile;
-    }
-  | {
-      type: PopoverFileItemActionType.ToggleFileProtection;
-      payload: SNFile;
-      callback: (isProtected: boolean) => void;
-    }
-  | {
-      type: PopoverFileItemActionType.RenameFile;
-      payload: {
-        file: SNFile;
-        name: string;
-      };
-    };
diff --git a/app/assets/javascripts/components/AutocompleteTagHint.tsx b/app/assets/javascripts/components/AutocompleteTagHint.tsx
deleted file mode 100644
index 5250b8f8c..000000000
--- a/app/assets/javascripts/components/AutocompleteTagHint.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { AppState } from '@/ui_models/app_state';
-import { observer } from 'mobx-react-lite';
-import { useRef, useEffect } from 'preact/hooks';
-import { Icon } from './Icon';
-
-type Props = {
-  appState: AppState;
-  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void;
-};
-
-export const AutocompleteTagHint = observer(
-  ({ appState, closeOnBlur }: Props) => {
-    const { autocompleteTagHintFocused } = appState.noteTags;
-
-    const hintRef = useRef<HTMLButtonElement>(null);
-
-    const { autocompleteSearchQuery, autocompleteTagResults } =
-      appState.noteTags;
-
-    const onTagHintClick = async () => {
-      await appState.noteTags.createAndAddNewTag();
-      appState.noteTags.setAutocompleteInputFocused(true);
-    };
-
-    const onFocus = () => {
-      appState.noteTags.setAutocompleteTagHintFocused(true);
-    };
-
-    const onBlur = (event: FocusEvent) => {
-      closeOnBlur(event);
-      appState.noteTags.setAutocompleteTagHintFocused(false);
-    };
-
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'ArrowUp') {
-        if (autocompleteTagResults.length > 0) {
-          const lastTagResult =
-            autocompleteTagResults[autocompleteTagResults.length - 1];
-          appState.noteTags.setFocusedTagResultUuid(lastTagResult.uuid);
-        } else {
-          appState.noteTags.setAutocompleteInputFocused(true);
-        }
-      }
-    };
-
-    useEffect(() => {
-      if (autocompleteTagHintFocused) {
-        hintRef.current!.focus();
-      }
-    }, [appState.noteTags, autocompleteTagHintFocused]);
-
-    return (
-      <>
-        {autocompleteTagResults.length > 0 && (
-          <div className="h-1px my-2 bg-border"></div>
-        )}
-        <button
-          ref={hintRef}
-          type="button"
-          className="sn-dropdown-item focus:bg-info focus:color-info-contrast hover:color-foreground"
-          onClick={onTagHintClick}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          onKeyDown={onKeyDown}
-          tabIndex={-1}
-        >
-          <span>Create new tag:</span>
-          <span className="bg-contrast rounded text-xs color-text py-1 pl-1 pr-2 flex items-center ml-2">
-            <Icon
-              type="hashtag"
-              className="sn-icon--small color-neutral mr-1"
-            />
-            <span className="max-w-40 whitespace-nowrap overflow-hidden overflow-ellipsis">
-              {autocompleteSearchQuery}
-            </span>
-          </span>
-        </button>
-      </>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/AutocompleteTagInput.tsx b/app/assets/javascripts/components/AutocompleteTagInput.tsx
deleted file mode 100644
index c3cb2c363..000000000
--- a/app/assets/javascripts/components/AutocompleteTagInput.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-import { useEffect, useRef, useState } from 'preact/hooks';
-import { Disclosure, DisclosurePanel } from '@reach/disclosure';
-import { useCloseOnBlur } from './utils';
-import { AppState } from '@/ui_models/app_state';
-import { AutocompleteTagResult } from './AutocompleteTagResult';
-import { AutocompleteTagHint } from './AutocompleteTagHint';
-import { observer } from 'mobx-react-lite';
-import { SNTag } from '@standardnotes/snjs';
-
-type Props = {
-  appState: AppState;
-};
-
-export const AutocompleteTagInput = observer(({ appState }: Props) => {
-  const {
-    autocompleteInputFocused,
-    autocompleteSearchQuery,
-    autocompleteTagHintVisible,
-    autocompleteTagResults,
-    tags,
-    tagsContainerMaxWidth,
-  } = appState.noteTags;
-
-  const [dropdownVisible, setDropdownVisible] = useState(false);
-  const [dropdownMaxHeight, setDropdownMaxHeight] = useState<number | 'auto'>(
-    'auto'
-  );
-
-  const containerRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const [closeOnBlur] = useCloseOnBlur(containerRef, (visible: boolean) => {
-    setDropdownVisible(visible);
-    appState.noteTags.clearAutocompleteSearch();
-  });
-
-  const showDropdown = () => {
-    const { clientHeight } = document.documentElement;
-    const inputRect = inputRef.current?.getBoundingClientRect();
-    if (inputRect) {
-      setDropdownMaxHeight(clientHeight - inputRect.bottom - 32 * 2);
-      setDropdownVisible(true);
-    }
-  };
-
-  const onSearchQueryChange = (event: Event) => {
-    const query = (event.target as HTMLInputElement).value;
-
-    if (query === '') {
-      appState.noteTags.clearAutocompleteSearch();
-    } else {
-      appState.noteTags.setAutocompleteSearchQuery(query);
-      appState.noteTags.searchActiveNoteAutocompleteTags();
-    }
-  };
-
-  const onFormSubmit = async (event: Event) => {
-    event.preventDefault();
-    if (autocompleteSearchQuery !== '') {
-      await appState.noteTags.createAndAddNewTag();
-    }
-  };
-
-  const onKeyDown = (event: KeyboardEvent) => {
-    switch (event.key) {
-      case 'Backspace':
-      case 'ArrowLeft':
-        if (autocompleteSearchQuery === '' && tags.length > 0) {
-          appState.noteTags.setFocusedTagUuid(tags[tags.length - 1].uuid);
-        }
-        break;
-      case 'ArrowDown':
-        event.preventDefault();
-        if (autocompleteTagResults.length > 0) {
-          appState.noteTags.setFocusedTagResultUuid(
-            autocompleteTagResults[0].uuid
-          );
-        } else if (autocompleteTagHintVisible) {
-          appState.noteTags.setAutocompleteTagHintFocused(true);
-        }
-        break;
-      default:
-        return;
-    }
-  };
-
-  const onFocus = () => {
-    showDropdown();
-    appState.noteTags.setAutocompleteInputFocused(true);
-  };
-
-  const onBlur = (event: FocusEvent) => {
-    closeOnBlur(event);
-    appState.noteTags.setAutocompleteInputFocused(false);
-  };
-
-  useEffect(() => {
-    if (autocompleteInputFocused) {
-      inputRef.current?.focus();
-    }
-  }, [appState.noteTags, autocompleteInputFocused]);
-
-  return (
-    <div ref={containerRef}>
-      <form
-        onSubmit={onFormSubmit}
-        className={`${tags.length > 0 ? 'mt-2' : ''}`}
-      >
-        <Disclosure open={dropdownVisible} onChange={showDropdown}>
-          <input
-            ref={inputRef}
-            className={`${
-              tags.length > 0 ? 'w-80' : 'w-70 mr-10'
-            } bg-transparent text-xs
-            color-text no-border h-7 focus:outline-none focus:shadow-none focus:border-bottom`}
-            value={autocompleteSearchQuery}
-            onChange={onSearchQueryChange}
-            type="text"
-            placeholder="Add tag"
-            onBlur={onBlur}
-            onFocus={onFocus}
-            onKeyDown={onKeyDown}
-            tabIndex={tags.length === 0 ? 0 : -1}
-          />
-          {dropdownVisible &&
-            (autocompleteTagResults.length > 0 ||
-              autocompleteTagHintVisible) && (
-              <DisclosurePanel
-                className={`${
-                  tags.length > 0 ? 'w-80' : 'w-70 mr-10'
-                } sn-dropdown flex flex-col py-2 absolute`}
-                style={{
-                  maxHeight: dropdownMaxHeight,
-                  maxWidth: tagsContainerMaxWidth,
-                }}
-                onBlur={closeOnBlur}
-              >
-                <div className="overflow-y-auto">
-                  {autocompleteTagResults.map((tagResult: SNTag) => (
-                    <AutocompleteTagResult
-                      key={tagResult.uuid}
-                      appState={appState}
-                      tagResult={tagResult}
-                      closeOnBlur={closeOnBlur}
-                    />
-                  ))}
-                </div>
-                {autocompleteTagHintVisible && (
-                  <AutocompleteTagHint
-                    appState={appState}
-                    closeOnBlur={closeOnBlur}
-                  />
-                )}
-              </DisclosurePanel>
-            )}
-        </Disclosure>
-      </form>
-    </div>
-  );
-});
diff --git a/app/assets/javascripts/components/AutocompleteTagResult.tsx b/app/assets/javascripts/components/AutocompleteTagResult.tsx
deleted file mode 100644
index d2c43fbea..000000000
--- a/app/assets/javascripts/components/AutocompleteTagResult.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { AppState } from '@/ui_models/app_state';
-import { splitQueryInString } from '@/utils/stringUtils';
-import { SNTag } from '@standardnotes/snjs';
-import { observer } from 'mobx-react-lite';
-import { useEffect, useRef } from 'preact/hooks';
-import { Icon } from './Icon';
-
-type Props = {
-  appState: AppState;
-  tagResult: SNTag;
-  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void;
-};
-
-export const AutocompleteTagResult = observer(
-  ({ appState, tagResult, closeOnBlur }: Props) => {
-    const {
-      autocompleteSearchQuery,
-      autocompleteTagHintVisible,
-      autocompleteTagResults,
-      focusedTagResultUuid,
-    } = appState.noteTags;
-
-    const tagResultRef = useRef<HTMLButtonElement>(null);
-
-    const title = tagResult.title;
-    const prefixTitle = appState.noteTags.getPrefixTitle(tagResult);
-
-    const onTagOptionClick = async (tag: SNTag) => {
-      await appState.noteTags.addTagToActiveNote(tag);
-      appState.noteTags.clearAutocompleteSearch();
-      appState.noteTags.setAutocompleteInputFocused(true);
-    };
-
-    const onKeyDown = (event: KeyboardEvent) => {
-      const tagResultIndex = appState.noteTags.getTagIndex(
-        tagResult,
-        autocompleteTagResults
-      );
-      switch (event.key) {
-        case 'ArrowUp':
-          event.preventDefault();
-          if (tagResultIndex === 0) {
-            appState.noteTags.setAutocompleteInputFocused(true);
-          } else {
-            appState.noteTags.focusPreviousTagResult(tagResult);
-          }
-          break;
-        case 'ArrowDown':
-          event.preventDefault();
-          if (
-            tagResultIndex === autocompleteTagResults.length - 1 &&
-            autocompleteTagHintVisible
-          ) {
-            appState.noteTags.setAutocompleteTagHintFocused(true);
-          } else {
-            appState.noteTags.focusNextTagResult(tagResult);
-          }
-          break;
-        default:
-          return;
-      }
-    };
-
-    const onFocus = () => {
-      appState.noteTags.setFocusedTagResultUuid(tagResult.uuid);
-    };
-
-    const onBlur = (event: FocusEvent) => {
-      closeOnBlur(event);
-      appState.noteTags.setFocusedTagResultUuid(undefined);
-    };
-
-    useEffect(() => {
-      if (focusedTagResultUuid === tagResult.uuid) {
-        tagResultRef.current?.focus();
-        appState.noteTags.setFocusedTagResultUuid(undefined);
-      }
-    }, [appState.noteTags, focusedTagResultUuid, tagResult]);
-
-    return (
-      <button
-        ref={tagResultRef}
-        type="button"
-        className="sn-dropdown-item focus:bg-info focus:color-info-contrast"
-        onClick={() => onTagOptionClick(tagResult)}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        onKeyDown={onKeyDown}
-        tabIndex={-1}
-      >
-        <Icon type="hashtag" className="color-neutral mr-2 min-h-5 min-w-5" />
-        <span className="whitespace-nowrap overflow-hidden overflow-ellipsis">
-          {prefixTitle && <span className="grey-2">{prefixTitle}</span>}
-          {autocompleteSearchQuery === ''
-            ? title
-            : splitQueryInString(title, autocompleteSearchQuery).map(
-                (substring, index) => (
-                  <span
-                    key={index}
-                    className={`${
-                      substring.toLowerCase() ===
-                      autocompleteSearchQuery.toLowerCase()
-                        ? 'font-bold whitespace-pre-wrap'
-                        : 'whitespace-pre-wrap '
-                    }`}
-                  >
-                    {substring}
-                  </span>
-                )
-              )}
-        </span>
-      </button>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/ComponentView/index.tsx b/app/assets/javascripts/components/ComponentView/index.tsx
deleted file mode 100644
index 25da0d34a..000000000
--- a/app/assets/javascripts/components/ComponentView/index.tsx
+++ /dev/null
@@ -1,250 +0,0 @@
-import {
-  ComponentAction,
-  FeatureStatus,
-  SNComponent,
-  dateToLocalizedString,
-  ComponentViewer,
-  ComponentViewerEvent,
-  ComponentViewerError,
-} from '@standardnotes/snjs';
-import { WebApplication } from '@/ui_models/application';
-import { FunctionalComponent } from 'preact';
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'preact/hooks';
-import { observer } from 'mobx-react-lite';
-import { OfflineRestricted } from '@/components/ComponentView/OfflineRestricted';
-import { UrlMissing } from '@/components/ComponentView/UrlMissing';
-import { IsDeprecated } from '@/components/ComponentView/IsDeprecated';
-import { IsExpired } from '@/components/ComponentView/IsExpired';
-import { IssueOnLoading } from '@/components/ComponentView/IssueOnLoading';
-import { AppState } from '@/ui_models/app_state';
-import { openSubscriptionDashboard } from '@/hooks/manageSubscription';
-
-interface IProps {
-  application: WebApplication;
-  appState: AppState;
-  componentViewer: ComponentViewer;
-  requestReload?: (viewer: ComponentViewer, force?: boolean) => void;
-  onLoad?: (component: SNComponent) => void;
-  manualDealloc?: boolean;
-}
-
-/**
- * The maximum amount of time we'll wait for a component
- * to load before displaying error
- */
-const MaxLoadThreshold = 4000;
-const VisibilityChangeKey = 'visibilitychange';
-const MSToWaitAfterIframeLoadToAvoidFlicker = 35;
-
-export const ComponentView: FunctionalComponent<IProps> = observer(
-  ({ application, onLoad, componentViewer, requestReload }) => {
-    const iframeRef = useRef<HTMLIFrameElement>(null);
-    const excessiveLoadingTimeout = useRef<
-      ReturnType<typeof setTimeout> | undefined
-    >(undefined);
-
-    const [hasIssueLoading, setHasIssueLoading] = useState(false);
-    const [isLoading, setIsLoading] = useState(true);
-    const [featureStatus, setFeatureStatus] = useState<FeatureStatus>(
-      componentViewer.getFeatureStatus()
-    );
-    const [isComponentValid, setIsComponentValid] = useState(true);
-    const [error, setError] = useState<ComponentViewerError | undefined>(
-      undefined
-    );
-    const [deprecationMessage, setDeprecationMessage] = useState<
-      string | undefined
-    >(undefined);
-    const [isDeprecationMessageDismissed, setIsDeprecationMessageDismissed] =
-      useState(false);
-    const [didAttemptReload, setDidAttemptReload] = useState(false);
-
-    const component = componentViewer.component;
-
-    const manageSubscription = useCallback(() => {
-      openSubscriptionDashboard(application);
-    }, [application]);
-
-    const reloadValidityStatus = useCallback(() => {
-      setFeatureStatus(componentViewer.getFeatureStatus());
-      if (!componentViewer.lockReadonly) {
-        componentViewer.setReadonly(featureStatus !== FeatureStatus.Entitled);
-      }
-      setIsComponentValid(componentViewer.shouldRender());
-
-      if (isLoading && !isComponentValid) {
-        setIsLoading(false);
-      }
-
-      setError(componentViewer.getError());
-      setDeprecationMessage(component.deprecationMessage);
-    }, [
-      componentViewer,
-      component.deprecationMessage,
-      featureStatus,
-      isComponentValid,
-      isLoading,
-    ]);
-
-    useEffect(() => {
-      reloadValidityStatus();
-    }, [reloadValidityStatus]);
-
-    const dismissDeprecationMessage = () => {
-      setIsDeprecationMessageDismissed(true);
-    };
-
-    const onVisibilityChange = useCallback(() => {
-      if (document.visibilityState === 'hidden') {
-        return;
-      }
-      if (hasIssueLoading) {
-        requestReload?.(componentViewer);
-      }
-    }, [hasIssueLoading, componentViewer, requestReload]);
-
-    const handleIframeTakingTooLongToLoad = useCallback(async () => {
-      setIsLoading(false);
-      setHasIssueLoading(true);
-
-      if (!didAttemptReload) {
-        setDidAttemptReload(true);
-        requestReload?.(componentViewer);
-      } else {
-        document.addEventListener(VisibilityChangeKey, onVisibilityChange);
-      }
-    }, [didAttemptReload, onVisibilityChange, componentViewer, requestReload]);
-
-    useMemo(() => {
-      const loadTimeout = setTimeout(() => {
-        handleIframeTakingTooLongToLoad();
-      }, MaxLoadThreshold);
-
-      excessiveLoadingTimeout.current = loadTimeout;
-
-      return () => {
-        excessiveLoadingTimeout.current &&
-          clearTimeout(excessiveLoadingTimeout.current);
-      };
-    }, [handleIframeTakingTooLongToLoad]);
-
-    const onIframeLoad = useCallback(() => {
-      const iframe = iframeRef.current as HTMLIFrameElement;
-      const contentWindow = iframe.contentWindow as Window;
-      excessiveLoadingTimeout.current &&
-        clearTimeout(excessiveLoadingTimeout.current);
-
-      componentViewer.setWindow(contentWindow);
-
-      setTimeout(() => {
-        setIsLoading(false);
-        setHasIssueLoading(false);
-        onLoad?.(component);
-      }, MSToWaitAfterIframeLoadToAvoidFlicker);
-    }, [componentViewer, onLoad, component, excessiveLoadingTimeout]);
-
-    useEffect(() => {
-      const removeFeaturesChangedObserver = componentViewer.addEventObserver(
-        (event) => {
-          if (event === ComponentViewerEvent.FeatureStatusUpdated) {
-            setFeatureStatus(componentViewer.getFeatureStatus());
-          }
-        }
-      );
-
-      return () => {
-        removeFeaturesChangedObserver();
-      };
-    }, [componentViewer]);
-
-    useEffect(() => {
-      const removeActionObserver = componentViewer.addActionObserver(
-        (action, data) => {
-          switch (action) {
-            case ComponentAction.KeyDown:
-              application.io.handleComponentKeyDown(data.keyboardModifier);
-              break;
-            case ComponentAction.KeyUp:
-              application.io.handleComponentKeyUp(data.keyboardModifier);
-              break;
-            case ComponentAction.Click:
-              application.getAppState().notes.setContextMenuOpen(false);
-              break;
-            default:
-              return;
-          }
-        }
-      );
-      return () => {
-        removeActionObserver();
-      };
-    }, [componentViewer, application]);
-
-    useEffect(() => {
-      const unregisterDesktopObserver = application
-        .getDesktopService()
-        .registerUpdateObserver((component: SNComponent) => {
-          if (component.uuid === component.uuid && component.active) {
-            requestReload?.(componentViewer);
-          }
-        });
-
-      return () => {
-        unregisterDesktopObserver();
-      };
-    }, [application, requestReload, componentViewer]);
-
-    return (
-      <>
-        {hasIssueLoading && (
-          <IssueOnLoading
-            componentName={component.name}
-            reloadIframe={() => {
-              reloadValidityStatus(), requestReload?.(componentViewer, true);
-            }}
-          />
-        )}
-
-        {featureStatus !== FeatureStatus.Entitled && (
-          <IsExpired
-            expiredDate={dateToLocalizedString(component.valid_until)}
-            featureStatus={featureStatus}
-            componentName={component.name}
-            manageSubscription={manageSubscription}
-          />
-        )}
-        {deprecationMessage && !isDeprecationMessageDismissed && (
-          <IsDeprecated
-            deprecationMessage={deprecationMessage}
-            dismissDeprecationMessage={dismissDeprecationMessage}
-          />
-        )}
-        {error === ComponentViewerError.OfflineRestricted && (
-          <OfflineRestricted />
-        )}
-        {error === ComponentViewerError.MissingUrl && (
-          <UrlMissing componentName={component.name} />
-        )}
-        {component.uuid && isComponentValid && (
-          <iframe
-            ref={iframeRef}
-            onLoad={onIframeLoad}
-            data-component-viewer-id={componentViewer.identifier}
-            frameBorder={0}
-            src={componentViewer.url || ''}
-            sandbox="allow-scripts allow-top-navigation-by-user-activation allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-modals allow-forms allow-downloads"
-          >
-            Loading
-          </iframe>
-        )}
-        {isLoading && <div className={'loading-overlay'} />}
-      </>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/ConfirmSignoutModal.tsx b/app/assets/javascripts/components/ConfirmSignoutModal.tsx
deleted file mode 100644
index 1a286ea39..000000000
--- a/app/assets/javascripts/components/ConfirmSignoutModal.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import { useEffect, useRef, useState } from 'preact/hooks';
-import {
-  AlertDialog,
-  AlertDialogDescription,
-  AlertDialogLabel,
-} from '@reach/alert-dialog';
-import { STRING_SIGN_OUT_CONFIRMATION } from '@/strings';
-import { WebApplication } from '@/ui_models/application';
-import { AppState } from '@/ui_models/app_state';
-import { observer } from 'mobx-react-lite';
-
-type Props = {
-  application: WebApplication;
-  appState: AppState;
-};
-
-export const ConfirmSignoutContainer = observer((props: Props) => {
-  if (!props.appState.accountMenu.signingOut) {
-    return null;
-  }
-  return <ConfirmSignoutModal {...props} />;
-});
-
-export const ConfirmSignoutModal = observer(
-  ({ application, appState }: Props) => {
-    const [deleteLocalBackups, setDeleteLocalBackups] = useState(false);
-
-    const cancelRef = useRef<HTMLButtonElement>(null);
-    function closeDialog() {
-      appState.accountMenu.setSigningOut(false);
-    }
-
-    const [localBackupsCount, setLocalBackupsCount] = useState(0);
-
-    useEffect(() => {
-      application.bridge.localBackupsCount().then(setLocalBackupsCount);
-    }, [appState.accountMenu.signingOut, application.bridge]);
-
-    return (
-      <AlertDialog onDismiss={closeDialog} leastDestructiveRef={cancelRef}>
-        <div className="sk-modal-content">
-          <div className="sn-component">
-            <div className="sk-panel">
-              <div className="sk-panel-content">
-                <div className="sk-panel-section">
-                  <AlertDialogLabel className="sk-h3 sk-panel-section-title">
-                    Sign out workspace?
-                  </AlertDialogLabel>
-                  <AlertDialogDescription className="sk-panel-row">
-                    <p className="color-foreground">
-                      {STRING_SIGN_OUT_CONFIRMATION}
-                    </p>
-                  </AlertDialogDescription>
-                  {localBackupsCount > 0 && (
-                    <div className="flex">
-                      <div className="sk-panel-row"></div>
-                      <label className="flex items-center">
-                        <input
-                          type="checkbox"
-                          checked={deleteLocalBackups}
-                          onChange={(event) => {
-                            setDeleteLocalBackups(
-                              (event.target as HTMLInputElement).checked
-                            );
-                          }}
-                        />
-                        <span className="ml-2">
-                          Delete {localBackupsCount} local backup file
-                          {localBackupsCount > 1 ? 's' : ''}
-                        </span>
-                      </label>
-                      <button
-                        className="capitalize sk-a ml-1.5 p-0 rounded cursor-pointer"
-                        onClick={() => {
-                          application.bridge.viewlocalBackups();
-                        }}
-                      >
-                        View backup files
-                      </button>
-                    </div>
-                  )}
-                  <div className="flex my-1 mt-4">
-                    <button
-                      className="sn-button small neutral"
-                      ref={cancelRef}
-                      onClick={closeDialog}
-                    >
-                      Cancel
-                    </button>
-                    <button
-                      className="sn-button small danger ml-2"
-                      onClick={() => {
-                        if (deleteLocalBackups) {
-                          application.signOutAndDeleteLocalBackups();
-                        } else {
-                          application.user.signOut();
-                        }
-                        closeDialog();
-                      }}
-                    >
-                      {application.hasAccount()
-                        ? 'Sign Out'
-                        : 'Clear Session Data'}
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </AlertDialog>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/ConfirmationDialog.tsx b/app/assets/javascripts/components/ConfirmationDialog.tsx
deleted file mode 100644
index 03c632f8c..000000000
--- a/app/assets/javascripts/components/ConfirmationDialog.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { ComponentChildren, FunctionComponent } from 'preact';
-import {
-  AlertDialog,
-  AlertDialogDescription,
-  AlertDialogLabel,
-} from '@reach/alert-dialog';
-import { useRef } from 'preact/hooks';
-
-export const ConfirmationDialog: FunctionComponent<{
-  title: string | ComponentChildren;
-}> = ({ title, children }) => {
-  const ldRef = useRef<HTMLButtonElement>(null);
-
-  return (
-    <AlertDialog leastDestructiveRef={ldRef}>
-      {/* sn-component is focusable by default, but doesn't stretch to child width
-          resulting in a badly focused dialog. Utility classes are not available
-          at the sn-component level, only below it. tabIndex -1 disables focus
-          and enables it on the child component */}
-      <div tabIndex={-1} className="sn-component">
-        <div
-          tabIndex={0}
-          className="max-w-89 bg-default rounded shadow-overlay focus:padded-ring-info px-9 py-9 flex flex-col items-center"
-        >
-          <AlertDialogLabel>{title}</AlertDialogLabel>
-          <div className="min-h-2" />
-
-          <AlertDialogDescription className="flex flex-col items-center">
-            {children}
-          </AlertDialogDescription>
-        </div>
-      </div>
-    </AlertDialog>
-  );
-};
diff --git a/app/assets/javascripts/components/DecoratedInput.tsx b/app/assets/javascripts/components/DecoratedInput.tsx
deleted file mode 100644
index b8a73c689..000000000
--- a/app/assets/javascripts/components/DecoratedInput.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { FunctionalComponent, ComponentChild, Ref } from 'preact';
-import { forwardRef } from 'preact/compat';
-
-export type DecoratedInputProps = {
-  type?: 'text' | 'email' | 'password';
-  className?: string;
-  disabled?: boolean;
-  left?: ComponentChild[];
-  right?: ComponentChild[];
-  value?: string;
-  placeholder?: string;
-  onChange?: (text: string) => void;
-  onFocus?: (event: FocusEvent) => void;
-  onKeyDown?: (event: KeyboardEvent) => void;
-  autocomplete?: boolean;
-};
-
-const getClassNames = (
-  hasLeftDecorations: boolean,
-  hasRightDecorations: boolean
-) => {
-  return {
-    container: `flex items-stretch position-relative bg-default border-1 border-solid border-main rounded focus-within:ring-info overflow-hidden ${
-      !hasLeftDecorations && !hasRightDecorations ? 'px-2 py-1.5' : ''
-    }`,
-    input: `w-full border-0 focus:shadow-none bg-transparent color-text ${
-      !hasLeftDecorations && hasRightDecorations ? 'pl-2' : ''
-    } ${hasRightDecorations ? 'pr-2' : ''}`,
-    disabled: 'bg-grey-5 cursor-not-allowed',
-  };
-};
-
-/**
- * Input that can be decorated on the left and right side
- */
-export const DecoratedInput: FunctionalComponent<DecoratedInputProps> =
-  forwardRef(
-    (
-      {
-        type = 'text',
-        className = '',
-        disabled = false,
-        left,
-        right,
-        value,
-        placeholder = '',
-        onChange,
-        onFocus,
-        onKeyDown,
-        autocomplete = false,
-      }: DecoratedInputProps,
-      ref: Ref<HTMLInputElement>
-    ) => {
-      const hasLeftDecorations = Boolean(left?.length);
-      const hasRightDecorations = Boolean(right?.length);
-      const classNames = getClassNames(hasLeftDecorations, hasRightDecorations);
-
-      return (
-        <div
-          className={`${classNames.container} ${
-            disabled ? classNames.disabled : ''
-          } ${className}`}
-        >
-          {left && (
-            <div className="flex items-center px-2 py-1.5">
-              {left.map((leftChild) => (
-                <>{leftChild}</>
-              ))}
-            </div>
-          )}
-          <input
-            type={type}
-            className={`${classNames.input} ${
-              disabled ? classNames.disabled : ''
-            }`}
-            disabled={disabled}
-            value={value}
-            placeholder={placeholder}
-            onChange={(e) =>
-              onChange && onChange((e.target as HTMLInputElement).value)
-            }
-            onFocus={onFocus}
-            onKeyDown={onKeyDown}
-            data-lpignore={type !== 'password' ? true : false}
-            autocomplete={autocomplete ? 'on' : 'off'}
-            ref={ref}
-          />
-          {right && (
-            <div className="flex items-center px-2 py-1.5">
-              {right.map((rightChild, index) => (
-                <div className={index > 0 ? 'ml-3' : ''}>{rightChild}</div>
-              ))}
-            </div>
-          )}
-        </div>
-      );
-    }
-  );
diff --git a/app/assets/javascripts/components/DecoratedPasswordInput.tsx b/app/assets/javascripts/components/DecoratedPasswordInput.tsx
deleted file mode 100644
index 22fdaf514..000000000
--- a/app/assets/javascripts/components/DecoratedPasswordInput.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { FunctionComponent, Ref } from 'preact';
-import { forwardRef } from 'preact/compat';
-import { StateUpdater, useState } from 'preact/hooks';
-import { DecoratedInput, DecoratedInputProps } from './DecoratedInput';
-import { IconButton } from './IconButton';
-
-const Toggle: FunctionComponent<{
-  isToggled: boolean;
-  setIsToggled: StateUpdater<boolean>;
-}> = ({ isToggled, setIsToggled }) => (
-  <IconButton
-    className="w-5 h-5 justify-center sk-circle hover:bg-grey-4 color-neutral"
-    icon={isToggled ? 'eye-off' : 'eye'}
-    iconClassName="sn-icon--small"
-    title="Show/hide password"
-    onClick={() => setIsToggled((isToggled) => !isToggled)}
-    focusable={true}
-  />
-);
-
-/**
- * Password input that has a toggle to show/hide password and can be decorated on the left and right side
- */
-export const DecoratedPasswordInput: FunctionComponent<
-  Omit<DecoratedInputProps, 'type'>
-> = forwardRef((props, ref: Ref<HTMLInputElement>) => {
-  const [isToggled, setIsToggled] = useState(false);
-
-  const rightSideDecorations = props.right ? [...props.right] : [];
-
-  return (
-    <DecoratedInput
-      {...props}
-      ref={ref}
-      type={isToggled ? 'text' : 'password'}
-      right={[
-        ...rightSideDecorations,
-        <Toggle isToggled={isToggled} setIsToggled={setIsToggled} />,
-      ]}
-    />
-  );
-});
diff --git a/app/assets/javascripts/components/Files/FilePreviewModalProvider.tsx b/app/assets/javascripts/components/Files/FilePreviewModalProvider.tsx
deleted file mode 100644
index 02aa3157a..000000000
--- a/app/assets/javascripts/components/Files/FilePreviewModalProvider.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { WebApplication } from '@/ui_models/application';
-import { SNFile } from '@standardnotes/snjs';
-import { createContext, FunctionComponent } from 'preact';
-import { useContext, useState } from 'preact/hooks';
-import { FilePreviewModal } from './FilePreviewModal';
-
-type FilePreviewModalContextData = {
-  activate: (file: SNFile) => void;
-};
-
-const FilePreviewModalContext =
-  createContext<FilePreviewModalContextData | null>(null);
-
-export const useFilePreviewModal = (): FilePreviewModalContextData => {
-  const value = useContext(FilePreviewModalContext);
-
-  if (!value) {
-    throw new Error('FilePreviewModalProvider not found.');
-  }
-
-  return value;
-};
-
-export const FilePreviewModalProvider: FunctionComponent<{
-  application: WebApplication;
-}> = ({ application, children }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [file, setFile] = useState<SNFile>();
-
-  const activate = (file: SNFile) => {
-    setFile(file);
-    setIsOpen(true);
-  };
-
-  const close = () => {
-    setIsOpen(false);
-  };
-
-  return (
-    <>
-      {isOpen && file && (
-        <FilePreviewModal
-          application={application}
-          file={file}
-          onDismiss={close}
-        />
-      )}
-      <FilePreviewModalContext.Provider value={{ activate }}>
-        {children}
-      </FilePreviewModalContext.Provider>
-    </>
-  );
-};
diff --git a/app/assets/javascripts/components/Files/isFilePreviewable.ts b/app/assets/javascripts/components/Files/isFilePreviewable.ts
deleted file mode 100644
index 8813d9884..000000000
--- a/app/assets/javascripts/components/Files/isFilePreviewable.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export const isFileTypePreviewable = (fileType: string) => {
-  const isImage = fileType.startsWith('image/');
-  const isVideo = fileType.startsWith('video/');
-  const isAudio = fileType.startsWith('audio/');
-  const isPdf = fileType === 'application/pdf';
-
-  if (isImage || isVideo || isAudio || isPdf) {
-    return true;
-  }
-
-  return false;
-};
diff --git a/app/assets/javascripts/components/Input.tsx b/app/assets/javascripts/components/Input.tsx
deleted file mode 100644
index 5be48f875..000000000
--- a/app/assets/javascripts/components/Input.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { FunctionalComponent } from 'preact';
-
-interface Props {
-  text?: string;
-  disabled?: boolean;
-  className?: string;
-}
-
-export const Input: FunctionalComponent<Props> = ({
-  className = '',
-  disabled = false,
-  text,
-}) => {
-  const base = `rounded py-1.5 px-3 text-input my-1 h-8 bg-contrast`;
-  const stateClasses = disabled
-    ? 'no-border'
-    : 'border-solid border-1 border-main';
-  const classes = `${base} ${stateClasses} ${className}`;
-  return (
-    <input type="text" className={classes} disabled={disabled} value={text} />
-  );
-};
diff --git a/app/assets/javascripts/components/MenuRow.tsx b/app/assets/javascripts/components/MenuRow.tsx
deleted file mode 100644
index 082102dae..000000000
--- a/app/assets/javascripts/components/MenuRow.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { Component } from 'preact';
-
-export type MenuRowProps = {
-  action?: () => void;
-  buttonAction?: () => void;
-  buttonClass?: string;
-  buttonText?: string;
-  desc?: string;
-  disabled?: boolean;
-  circle?: string;
-  circleAlign?: string;
-  faded?: boolean;
-  hasButton?: boolean;
-  label: string;
-  spinnerClass?: string;
-  stylekitClass?: string;
-  subRows?: MenuRowProps[];
-  subtitle?: string;
-};
-
-type Props = MenuRowProps;
-
-export class MenuRow extends Component<Props> {
-  onClick = ($event: Event) => {
-    if (this.props.disabled || !this.props.action) {
-      return;
-    }
-
-    $event.stopPropagation();
-
-    this.props.action();
-  };
-
-  clickAccessoryButton = ($event: Event) => {
-    if (this.props.disabled) {
-      return;
-    }
-    $event.stopPropagation();
-    this.props.buttonAction?.();
-  };
-
-  render() {
-    return (
-      <div
-        title={this.props.desc}
-        onClick={this.onClick}
-        className="sk-menu-panel-row row"
-      >
-        <div className="sk-menu-panel-column">
-          <div className="left">
-            {this.props.circle &&
-              (!this.props.circleAlign || this.props.circleAlign == 'left') && (
-                <div className="sk-menu-panel-column">
-                  <div className={this.props.circle + ' sk-circle small'} />
-                </div>
-              )}
-
-            <div
-              className={
-                (this.props.faded || this.props.disabled ? 'faded' : '') +
-                ' sk-menu-panel-column'
-              }
-            >
-              <div className={this.props.stylekitClass + ' sk-label'}>
-                {this.props.label}
-              </div>
-              {this.props.subtitle && (
-                <div className="sk-sublabel">{this.props.subtitle}</div>
-              )}
-              {this.props.children}
-            </div>
-          </div>
-
-          {this.props.subRows && this.props.subRows.length > 0 && (
-            <div className="sk-menu-panel-subrows">
-              {this.props.subRows.map((row) => {
-                return (
-                  <MenuRow
-                    action={row.action}
-                    label={row.label}
-                    spinnerClass={row.spinnerClass}
-                    subtitle={row.subtitle}
-                  />
-                );
-              })}
-            </div>
-          )}
-        </div>
-
-        {this.props.circle && this.props.circleAlign == 'right' && (
-          <div className="sk-menu-panel-column">
-            <div className={this.props.circle + ' sk-circle small'} />
-          </div>
-        )}
-
-        {this.props.hasButton && (
-          <div className="sk-menu-panel-column">
-            <button
-              className={this.props.buttonClass + ' sn-button small'}
-              onClick={this.props.buttonAction!}
-            >
-              {this.props.buttonText}
-            </button>
-          </div>
-        )}
-
-        {this.props.spinnerClass && (
-          <div className="sk-menu-panel-column">
-            <div className={this.props.spinnerClass + ' sk-spinner small'} />
-          </div>
-        )}
-      </div>
-    );
-  }
-}
diff --git a/app/assets/javascripts/components/MultipleSelectedNotes.tsx b/app/assets/javascripts/components/MultipleSelectedNotes.tsx
deleted file mode 100644
index 0a88069b2..000000000
--- a/app/assets/javascripts/components/MultipleSelectedNotes.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { AppState } from '@/ui_models/app_state';
-import { IlNotesIcon } from '@standardnotes/stylekit';
-import { observer } from 'mobx-react-lite';
-import { NotesOptionsPanel } from './NotesOptionsPanel';
-import { WebApplication } from '@/ui_models/application';
-import { PinNoteButton } from './PinNoteButton';
-
-type Props = {
-  application: WebApplication;
-  appState: AppState;
-};
-
-export const MultipleSelectedNotes = observer(
-  ({ application, appState }: Props) => {
-    const count = appState.notes.selectedNotesCount;
-
-    return (
-      <div className="flex flex-col h-full items-center">
-        <div className="flex items-center justify-between p-4 w-full">
-          <h1 className="sk-h1 font-bold m-0">{count} selected notes</h1>
-          <div className="flex">
-            <div className="mr-3">
-              <PinNoteButton appState={appState} />
-            </div>
-            <NotesOptionsPanel application={application} appState={appState} />
-          </div>
-        </div>
-        <div className="flex-grow flex flex-col justify-center items-center w-full max-w-md">
-          <IlNotesIcon className="block" />
-          <h2 className="text-lg m-0 text-center mt-4">
-            {count} selected notes
-          </h2>
-          <p className="text-sm mt-2 text-center max-w-60">
-            Actions will be performed on all selected notes.
-          </p>
-        </div>
-      </div>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/Navigation.tsx b/app/assets/javascripts/components/Navigation.tsx
deleted file mode 100644
index d5b235b04..000000000
--- a/app/assets/javascripts/components/Navigation.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { SmartViewsSection } from '@/components/Tags/SmartViewsSection';
-import { TagsSection } from '@/components/Tags/TagsSection';
-import { WebApplication } from '@/ui_models/application';
-import { PANEL_NAME_NAVIGATION } from '@/constants';
-import { ApplicationEvent, PrefKey } from '@standardnotes/snjs';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { useCallback, useEffect, useMemo, useState } from 'preact/hooks';
-import {
-  PanelSide,
-  ResizeFinishCallback,
-  PanelResizer,
-  PanelResizeType,
-} from './PanelResizer';
-
-type Props = {
-  application: WebApplication;
-};
-
-export const Navigation: FunctionComponent<Props> = observer(
-  ({ application }) => {
-    const appState = useMemo(() => application.getAppState(), [application]);
-    const [ref, setRef] = useState<HTMLDivElement | null>();
-    const [panelWidth, setPanelWidth] = useState<number>(0);
-
-    useEffect(() => {
-      const removeObserver = application.addEventObserver(async () => {
-        const width = application.getPreference(PrefKey.TagsPanelWidth);
-        if (width) {
-          setPanelWidth(width);
-        }
-      }, ApplicationEvent.PreferencesChanged);
-
-      return () => {
-        removeObserver();
-      };
-    }, [application]);
-
-    const panelResizeFinishCallback: ResizeFinishCallback = useCallback(
-      (width, _lastLeft, _isMaxWidth, isCollapsed) => {
-        application.setPreference(PrefKey.TagsPanelWidth, width);
-        appState.noteTags.reloadTagsContainerMaxWidth();
-        appState.panelDidResize(PANEL_NAME_NAVIGATION, isCollapsed);
-      },
-      [application, appState]
-    );
-
-    const panelWidthEventCallback = useCallback(() => {
-      appState.noteTags.reloadTagsContainerMaxWidth();
-    }, [appState]);
-
-    return (
-      <div
-        id="navigation"
-        className="sn-component section app-column app-column-first"
-        data-aria-label="Navigation"
-        ref={setRef}
-      >
-        <div id="navigation-content" className="content">
-          <div className="section-title-bar">
-            <div className="section-title-bar-header">
-              <div className="sk-h3 title">
-                <span className="sk-bold">Views</span>
-              </div>
-            </div>
-          </div>
-          <div className="scrollable">
-            <SmartViewsSection appState={appState} />
-            <TagsSection appState={appState} />
-          </div>
-        </div>
-        {ref && (
-          <PanelResizer
-            collapsable={true}
-            defaultWidth={150}
-            panel={ref}
-            hoverable={true}
-            side={PanelSide.Right}
-            type={PanelResizeType.WidthOnly}
-            resizeFinishCallback={panelResizeFinishCallback}
-            widthEventCallback={panelWidthEventCallback}
-            width={panelWidth}
-            left={0}
-          />
-        )}
-      </div>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/NoteGroupView.tsx b/app/assets/javascripts/components/NoteGroupView.tsx
deleted file mode 100644
index 7ba477c45..000000000
--- a/app/assets/javascripts/components/NoteGroupView.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { NoteViewController } from '@standardnotes/snjs';
-import { PureComponent } from '@/components/Abstract/PureComponent';
-import { WebApplication } from '@/ui_models/application';
-import { MultipleSelectedNotes } from '@/components/MultipleSelectedNotes';
-import { NoteView } from '@/components/NoteView/NoteView';
-import { ElementIds } from '@/element_ids';
-
-type State = {
-  showMultipleSelectedNotes: boolean;
-  controllers: NoteViewController[];
-};
-
-type Props = {
-  application: WebApplication;
-};
-
-export class NoteGroupView extends PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props, props.application);
-    this.state = {
-      showMultipleSelectedNotes: false,
-      controllers: [],
-    };
-  }
-
-  componentDidMount(): void {
-    super.componentDidMount();
-    this.application.noteControllerGroup.addActiveControllerChangeObserver(
-      () => {
-        this.setState({
-          controllers: this.application.noteControllerGroup.noteControllers,
-        });
-      }
-    );
-    this.autorun(() => {
-      this.setState({
-        showMultipleSelectedNotes: this.appState.notes.selectedNotesCount > 1,
-      });
-    });
-  }
-
-  render() {
-    return (
-      <div
-        id={ElementIds.EditorColumn}
-        className="h-full app-column app-column-third"
-      >
-        {this.state.showMultipleSelectedNotes && (
-          <MultipleSelectedNotes
-            application={this.application}
-            appState={this.appState}
-          />
-        )}
-
-        {!this.state.showMultipleSelectedNotes && (
-          <>
-            {this.state.controllers.map((controller) => {
-              return (
-                <NoteView
-                  application={this.application}
-                  controller={controller}
-                />
-              );
-            })}
-          </>
-        )}
-      </div>
-    );
-  }
-}
diff --git a/app/assets/javascripts/components/NotesContextMenu.tsx b/app/assets/javascripts/components/NotesContextMenu.tsx
deleted file mode 100644
index 9b8e63ed4..000000000
--- a/app/assets/javascripts/components/NotesContextMenu.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { AppState } from '@/ui_models/app_state';
-import { useCloseOnBlur, useCloseOnClickOutside } from './utils';
-import { observer } from 'mobx-react-lite';
-import { NotesOptions } from './NotesOptions/NotesOptions';
-import { useCallback, useEffect, useRef } from 'preact/hooks';
-import { WebApplication } from '@/ui_models/application';
-
-type Props = {
-  application: WebApplication;
-  appState: AppState;
-};
-
-export const NotesContextMenu = observer(({ application, appState }: Props) => {
-  const { contextMenuOpen, contextMenuPosition, contextMenuMaxHeight } =
-    appState.notes;
-
-  const contextMenuRef = useRef<HTMLDivElement>(null);
-  const [closeOnBlur] = useCloseOnBlur(contextMenuRef, (open: boolean) =>
-    appState.notes.setContextMenuOpen(open)
-  );
-
-  useCloseOnClickOutside(contextMenuRef, () =>
-    appState.notes.setContextMenuOpen(false)
-  );
-
-  const reloadContextMenuLayout = useCallback(() => {
-    appState.notes.reloadContextMenuLayout();
-  }, [appState.notes]);
-
-  useEffect(() => {
-    window.addEventListener('resize', reloadContextMenuLayout);
-    return () => {
-      window.removeEventListener('resize', reloadContextMenuLayout);
-    };
-  }, [reloadContextMenuLayout]);
-
-  return contextMenuOpen ? (
-    <div
-      ref={contextMenuRef}
-      className="sn-dropdown min-w-80 max-h-120 max-w-xs flex flex-col pt-2 overflow-y-auto fixed"
-      style={{
-        ...contextMenuPosition,
-        maxHeight: contextMenuMaxHeight,
-      }}
-    >
-      <NotesOptions
-        application={application}
-        appState={appState}
-        closeOnBlur={closeOnBlur}
-      />
-    </div>
-  ) : null;
-});
diff --git a/app/assets/javascripts/components/NotesList.tsx b/app/assets/javascripts/components/NotesList.tsx
deleted file mode 100644
index 69b1f1c0d..000000000
--- a/app/assets/javascripts/components/NotesList.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { WebApplication } from '@/ui_models/application';
-import { KeyboardKey } from '@/services/ioService';
-import { AppState } from '@/ui_models/app_state';
-import { DisplayOptions } from '@/ui_models/app_state/notes_view_state';
-import { SNNote, SNTag } from '@standardnotes/snjs';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { NotesListItem } from './NotesListItem';
-import {
-  FOCUSABLE_BUT_NOT_TABBABLE,
-  NOTES_LIST_SCROLL_THRESHOLD,
-} from '@/constants';
-
-type Props = {
-  application: WebApplication;
-  appState: AppState;
-  notes: SNNote[];
-  selectedNotes: Record<string, SNNote>;
-  displayOptions: DisplayOptions;
-  paginate: () => void;
-};
-
-export const NotesList: FunctionComponent<Props> = observer(
-  ({
-    application,
-    appState,
-    notes,
-    selectedNotes,
-    displayOptions,
-    paginate,
-  }) => {
-    const { selectPreviousNote, selectNextNote } = appState.notesView;
-    const { hideTags, hideDate, hideNotePreview, hideEditorIcon, sortBy } =
-      displayOptions;
-
-    const tagsForNote = (note: SNNote): string[] => {
-      if (hideTags) {
-        return [];
-      }
-      const selectedTag = appState.selectedTag;
-      if (!selectedTag) {
-        return [];
-      }
-      const tags = appState.getNoteTags(note);
-      if (selectedTag instanceof SNTag && tags.length === 1) {
-        return [];
-      }
-      return tags.map((tag) => tag.title).sort();
-    };
-
-    const openNoteContextMenu = (posX: number, posY: number) => {
-      appState.notes.setContextMenuClickLocation({
-        x: posX,
-        y: posY,
-      });
-      appState.notes.reloadContextMenuLayout();
-      appState.notes.setContextMenuOpen(true);
-    };
-
-    const onContextMenu = (note: SNNote, posX: number, posY: number) => {
-      appState.notes.selectNote(note.uuid, true);
-      openNoteContextMenu(posX, posY);
-    };
-
-    const onScroll = (e: Event) => {
-      const offset = NOTES_LIST_SCROLL_THRESHOLD;
-      const element = e.target as HTMLElement;
-      if (
-        element.scrollTop + element.offsetHeight >=
-        element.scrollHeight - offset
-      ) {
-        paginate();
-      }
-    };
-
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === KeyboardKey.Up) {
-        e.preventDefault();
-        selectPreviousNote();
-      } else if (e.key === KeyboardKey.Down) {
-        e.preventDefault();
-        selectNextNote();
-      }
-    };
-
-    return (
-      <div
-        className="infinite-scroll focus:shadow-none focus:outline-none"
-        id="notes-scrollable"
-        onScroll={onScroll}
-        onKeyDown={onKeyDown}
-        tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
-      >
-        {notes.map((note) => (
-          <NotesListItem
-            application={application}
-            key={note.uuid}
-            note={note}
-            tags={tagsForNote(note)}
-            selected={!!selectedNotes[note.uuid]}
-            hideDate={hideDate}
-            hidePreview={hideNotePreview}
-            hideTags={hideTags}
-            hideEditorIcon={hideEditorIcon}
-            sortedBy={sortBy}
-            onClick={() => {
-              appState.notes.selectNote(note.uuid, true);
-            }}
-            onContextMenu={(e: MouseEvent) => {
-              e.preventDefault();
-              onContextMenu(note, e.clientX, e.clientY);
-            }}
-          />
-        ))}
-      </div>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/NotesOptions/AddTagOption.tsx b/app/assets/javascripts/components/NotesOptions/AddTagOption.tsx
deleted file mode 100644
index 545d7e9c6..000000000
--- a/app/assets/javascripts/components/NotesOptions/AddTagOption.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import { AppState } from '@/ui_models/app_state';
-import {
-  calculateSubmenuStyle,
-  SubmenuStyle,
-} from '@/utils/calculateSubmenuStyle';
-import {
-  Disclosure,
-  DisclosureButton,
-  DisclosurePanel,
-} from '@reach/disclosure';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
-import { Icon } from '../Icon';
-import { useCloseOnBlur } from '../utils';
-
-type Props = {
-  appState: AppState;
-};
-
-export const AddTagOption: FunctionComponent<Props> = observer(
-  ({ appState }) => {
-    const menuContainerRef = useRef<HTMLDivElement>(null);
-    const menuRef = useRef<HTMLDivElement>(null);
-    const menuButtonRef = useRef<HTMLButtonElement>(null);
-
-    const [isMenuOpen, setIsMenuOpen] = useState(false);
-    const [menuStyle, setMenuStyle] = useState<SubmenuStyle>({
-      right: 0,
-      bottom: 0,
-      maxHeight: 'auto',
-    });
-
-    const [closeOnBlur] = useCloseOnBlur(menuContainerRef, setIsMenuOpen);
-
-    const toggleTagsMenu = () => {
-      if (!isMenuOpen) {
-        const menuPosition = calculateSubmenuStyle(menuButtonRef.current);
-        if (menuPosition) {
-          setMenuStyle(menuPosition);
-        }
-      }
-
-      setIsMenuOpen(!isMenuOpen);
-    };
-
-    const recalculateMenuStyle = useCallback(() => {
-      const newMenuPosition = calculateSubmenuStyle(
-        menuButtonRef.current,
-        menuRef.current
-      );
-
-      if (newMenuPosition) {
-        setMenuStyle(newMenuPosition);
-      }
-    }, []);
-
-    useEffect(() => {
-      if (isMenuOpen) {
-        setTimeout(() => {
-          recalculateMenuStyle();
-        });
-      }
-    }, [isMenuOpen, recalculateMenuStyle]);
-
-    return (
-      <div ref={menuContainerRef}>
-        <Disclosure open={isMenuOpen} onChange={toggleTagsMenu}>
-          <DisclosureButton
-            onKeyDown={(event) => {
-              if (event.key === 'Escape') {
-                setIsMenuOpen(false);
-              }
-            }}
-            onBlur={closeOnBlur}
-            ref={menuButtonRef}
-            className="sn-dropdown-item justify-between"
-          >
-            <div className="flex items-center">
-              <Icon type="hashtag" className="mr-2 color-neutral" />
-              Add tag
-            </div>
-            <Icon type="chevron-right" className="color-neutral" />
-          </DisclosureButton>
-          <DisclosurePanel
-            ref={menuRef}
-            onKeyDown={(event) => {
-              if (event.key === 'Escape') {
-                setIsMenuOpen(false);
-                menuButtonRef.current?.focus();
-              }
-            }}
-            style={{
-              ...menuStyle,
-              position: 'fixed',
-            }}
-            className="sn-dropdown min-w-80 flex flex-col py-2 max-h-120 max-w-xs fixed overflow-y-auto"
-          >
-            {appState.tags.tags.map((tag) => (
-              <button
-                key={tag.title}
-                className="sn-dropdown-item sn-dropdown-item--no-icon max-w-80"
-                onBlur={closeOnBlur}
-                onClick={() => {
-                  appState.notes.isTagInSelectedNotes(tag)
-                    ? appState.notes.removeTagFromSelectedNotes(tag)
-                    : appState.notes.addTagToSelectedNotes(tag);
-                }}
-              >
-                <span
-                  className={`whitespace-nowrap overflow-hidden overflow-ellipsis
-                      ${
-                        appState.notes.isTagInSelectedNotes(tag)
-                          ? 'font-bold'
-                          : ''
-                      }`}
-                >
-                  {appState.noteTags.getLongTitle(tag)}
-                </span>
-              </button>
-            ))}
-          </DisclosurePanel>
-        </Disclosure>
-      </div>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/NotesView.tsx b/app/assets/javascripts/components/NotesView.tsx
deleted file mode 100644
index 657eb3ec9..000000000
--- a/app/assets/javascripts/components/NotesView.tsx
+++ /dev/null
@@ -1,294 +0,0 @@
-import { KeyboardKey, KeyboardModifier } from '@/services/ioService';
-import { WebApplication } from '@/ui_models/application';
-import { AppState } from '@/ui_models/app_state';
-import { PANEL_NAME_NOTES } from '@/constants';
-import { PrefKey } from '@standardnotes/snjs';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { useEffect, useRef, useState } from 'preact/hooks';
-import { NoAccountWarning } from './NoAccountWarning';
-import { NotesList } from './NotesList';
-import { NotesListOptionsMenu } from './NotesListOptionsMenu';
-import { SearchOptions } from './SearchOptions';
-import {
-  PanelSide,
-  ResizeFinishCallback,
-  PanelResizer,
-  PanelResizeType,
-} from './PanelResizer';
-import {
-  Disclosure,
-  DisclosureButton,
-  DisclosurePanel,
-} from '@reach/disclosure';
-import { useCloseOnBlur } from './utils';
-
-type Props = {
-  application: WebApplication;
-  appState: AppState;
-};
-
-export const NotesView: FunctionComponent<Props> = observer(
-  ({ application, appState }) => {
-    const notesViewPanelRef = useRef<HTMLDivElement>(null);
-    const displayOptionsMenuRef = useRef<HTMLDivElement>(null);
-
-    const {
-      completedFullSync,
-      createNewNote,
-      displayOptions,
-      noteFilterText,
-      optionsSubtitle,
-      panelTitle,
-      renderedNotes,
-      selectedNotes,
-      setNoteFilterText,
-      searchBarElement,
-      selectNextNote,
-      selectPreviousNote,
-      onFilterEnter,
-      handleFilterTextChanged,
-      clearFilterText,
-      paginate,
-      panelWidth,
-    } = appState.notesView;
-
-    const [showDisplayOptionsMenu, setShowDisplayOptionsMenu] = useState(false);
-    const [focusedSearch, setFocusedSearch] = useState(false);
-
-    const [closeDisplayOptMenuOnBlur] = useCloseOnBlur(
-      displayOptionsMenuRef,
-      setShowDisplayOptionsMenu
-    );
-
-    useEffect(() => {
-      handleFilterTextChanged();
-    }, [noteFilterText, handleFilterTextChanged]);
-
-    useEffect(() => {
-      /**
-       * In the browser we're not allowed to override cmd/ctrl + n, so we have to
-       * use Control modifier as well. These rules don't apply to desktop, but
-       * probably better to be consistent.
-       */
-      const newNoteKeyObserver = application.io.addKeyObserver({
-        key: 'n',
-        modifiers: [KeyboardModifier.Meta, KeyboardModifier.Ctrl],
-        onKeyDown: (event) => {
-          event.preventDefault();
-          createNewNote();
-        },
-      });
-
-      const nextNoteKeyObserver = application.io.addKeyObserver({
-        key: KeyboardKey.Down,
-        elements: [
-          document.body,
-          ...(searchBarElement ? [searchBarElement] : []),
-        ],
-        onKeyDown: () => {
-          if (searchBarElement === document.activeElement) {
-            searchBarElement?.blur();
-          }
-          selectNextNote();
-        },
-      });
-
-      const previousNoteKeyObserver = application.io.addKeyObserver({
-        key: KeyboardKey.Up,
-        element: document.body,
-        onKeyDown: () => {
-          selectPreviousNote();
-        },
-      });
-
-      const searchKeyObserver = application.io.addKeyObserver({
-        key: 'f',
-        modifiers: [KeyboardModifier.Meta, KeyboardModifier.Shift],
-        onKeyDown: () => {
-          if (searchBarElement) {
-            searchBarElement.focus();
-          }
-        },
-      });
-
-      return () => {
-        newNoteKeyObserver();
-        nextNoteKeyObserver();
-        previousNoteKeyObserver();
-        searchKeyObserver();
-      };
-    }, [
-      application.io,
-      createNewNote,
-      searchBarElement,
-      selectNextNote,
-      selectPreviousNote,
-    ]);
-
-    const onNoteFilterTextChange = (e: Event) => {
-      setNoteFilterText((e.target as HTMLInputElement).value);
-    };
-
-    const onSearchFocused = () => setFocusedSearch(true);
-    const onSearchBlurred = () => setFocusedSearch(false);
-
-    const onNoteFilterKeyUp = (e: KeyboardEvent) => {
-      if (e.key === KeyboardKey.Enter) {
-        onFilterEnter();
-      }
-    };
-
-    const panelResizeFinishCallback: ResizeFinishCallback = (
-      width,
-      _lastLeft,
-      _isMaxWidth,
-      isCollapsed
-    ) => {
-      application.setPreference(PrefKey.NotesPanelWidth, width);
-      appState.noteTags.reloadTagsContainerMaxWidth();
-      appState.panelDidResize(PANEL_NAME_NOTES, isCollapsed);
-    };
-
-    const panelWidthEventCallback = () => {
-      appState.noteTags.reloadTagsContainerMaxWidth();
-    };
-
-    const toggleDisplayOptionsMenu = () => {
-      setShowDisplayOptionsMenu(!showDisplayOptionsMenu);
-    };
-
-    return (
-      <div
-        id="notes-column"
-        className="sn-component section notes app-column app-column-second"
-        aria-label="Notes"
-        ref={notesViewPanelRef}
-      >
-        <div className="content">
-          <div id="notes-title-bar" className="section-title-bar">
-            <div id="notes-title-bar-container">
-              <div className="section-title-bar-header">
-                <div className="sk-h2 font-semibold title">{panelTitle}</div>
-                <button
-                  className="sk-button contrast wide"
-                  title="Create a new note in the selected tag"
-                  aria-label="Create new note"
-                  onClick={() => createNewNote()}
-                >
-                  <div className="sk-label">
-                    <i className="ion-plus add-button" aria-hidden></i>
-                  </div>
-                </button>
-              </div>
-              <div className="filter-section" role="search">
-                <div>
-                  <input
-                    type="text"
-                    id="search-bar"
-                    className="filter-bar"
-                    placeholder="Search"
-                    title="Searches notes in the currently selected tag"
-                    value={noteFilterText}
-                    onChange={onNoteFilterTextChange}
-                    onKeyUp={onNoteFilterKeyUp}
-                    onFocus={onSearchFocused}
-                    onBlur={onSearchBlurred}
-                    autocomplete="off"
-                  />
-                  {noteFilterText && (
-                    <button
-                      onClick={clearFilterText}
-                      aria-role="button"
-                      id="search-clear-button"
-                    >
-                      ✕
-                    </button>
-                  )}
-                </div>
-
-                {(focusedSearch || noteFilterText) && (
-                  <div className="animate-fade-from-top">
-                    <SearchOptions
-                      application={application}
-                      appState={appState}
-                    />
-                  </div>
-                )}
-              </div>
-              <NoAccountWarning appState={appState} />
-            </div>
-            <div
-              id="notes-menu-bar"
-              className="sn-component"
-              ref={displayOptionsMenuRef}
-            >
-              <div className="sk-app-bar no-edges">
-                <div className="left">
-                  <Disclosure
-                    open={showDisplayOptionsMenu}
-                    onChange={toggleDisplayOptionsMenu}
-                  >
-                    <DisclosureButton
-                      className={`sk-app-bar-item bg-contrast color-text border-0 focus:shadow-none ${
-                        showDisplayOptionsMenu ? 'selected' : ''
-                      }`}
-                      onBlur={closeDisplayOptMenuOnBlur}
-                    >
-                      <div className="sk-app-bar-item-column">
-                        <div className="sk-label">Options</div>
-                      </div>
-                      <div className="sk-app-bar-item-column">
-                        <div className="sk-sublabel">{optionsSubtitle}</div>
-                      </div>
-                    </DisclosureButton>
-                    <DisclosurePanel onBlur={closeDisplayOptMenuOnBlur}>
-                      {showDisplayOptionsMenu && (
-                        <NotesListOptionsMenu
-                          application={application}
-                          closeDisplayOptionsMenu={toggleDisplayOptionsMenu}
-                          closeOnBlur={closeDisplayOptMenuOnBlur}
-                          isOpen={showDisplayOptionsMenu}
-                        />
-                      )}
-                    </DisclosurePanel>
-                  </Disclosure>
-                </div>
-              </div>
-            </div>
-          </div>
-          {completedFullSync && !renderedNotes.length ? (
-            <p className="empty-notes-list faded">No notes.</p>
-          ) : null}
-          {!completedFullSync && !renderedNotes.length ? (
-            <p className="empty-notes-list faded">Loading notes...</p>
-          ) : null}
-          {renderedNotes.length ? (
-            <NotesList
-              notes={renderedNotes}
-              selectedNotes={selectedNotes}
-              application={application}
-              appState={appState}
-              displayOptions={displayOptions}
-              paginate={paginate}
-            />
-          ) : null}
-        </div>
-        {notesViewPanelRef.current && (
-          <PanelResizer
-            collapsable={true}
-            hoverable={true}
-            defaultWidth={300}
-            panel={notesViewPanelRef.current}
-            side={PanelSide.Right}
-            type={PanelResizeType.WidthOnly}
-            resizeFinishCallback={panelResizeFinishCallback}
-            widthEventCallback={panelWidthEventCallback}
-            width={panelWidth}
-            left={0}
-          />
-        )}
-      </div>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/OtherSessionsSignOut.tsx b/app/assets/javascripts/components/OtherSessionsSignOut.tsx
deleted file mode 100644
index 129e6d6ad..000000000
--- a/app/assets/javascripts/components/OtherSessionsSignOut.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { useRef } from 'preact/hooks';
-import {
-  AlertDialog,
-  AlertDialogDescription,
-  AlertDialogLabel,
-} from '@reach/alert-dialog';
-import { WebApplication } from '@/ui_models/application';
-import { AppState } from '@/ui_models/app_state';
-import { observer } from 'mobx-react-lite';
-
-type Props = {
-  application: WebApplication;
-  appState: AppState;
-};
-
-export const OtherSessionsSignOutContainer = observer((props: Props) => {
-  if (!props.appState.accountMenu.otherSessionsSignOut) {
-    return null;
-  }
-  return <ConfirmOtherSessionsSignOut {...props} />;
-});
-
-const ConfirmOtherSessionsSignOut = observer(
-  ({ application, appState }: Props) => {
-    const cancelRef = useRef<HTMLButtonElement>(null);
-    function closeDialog() {
-      appState.accountMenu.setOtherSessionsSignOut(false);
-    }
-
-    return (
-      <AlertDialog onDismiss={closeDialog} leastDestructiveRef={cancelRef}>
-        <div className="sk-modal-content">
-          <div className="sn-component">
-            <div className="sk-panel">
-              <div className="sk-panel-content">
-                <div className="sk-panel-section">
-                  <AlertDialogLabel className="sk-h3 sk-panel-section-title capitalize">
-                    End all other sessions?
-                  </AlertDialogLabel>
-                  <AlertDialogDescription className="sk-panel-row">
-                    <p className="color-foreground">
-                      This action will sign out all other devices signed into
-                      your account, and remove your data from those devices when
-                      they next regain connection to the internet. You may sign
-                      back in on those devices at any time.
-                    </p>
-                  </AlertDialogDescription>
-                  <div className="flex my-1 mt-4">
-                    <button
-                      className="sn-button small neutral"
-                      ref={cancelRef}
-                      onClick={closeDialog}
-                    >
-                      Cancel
-                    </button>
-                    <button
-                      className="sn-button small danger ml-2"
-                      onClick={() => {
-                        application.revokeAllOtherSessions();
-                        closeDialog();
-                        application.alertService.alert(
-                          'You have successfully revoked your sessions from other devices.',
-                          undefined,
-                          'Finish'
-                        );
-                      }}
-                    >
-                      End Sessions
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </AlertDialog>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/PanelResizer.tsx b/app/assets/javascripts/components/PanelResizer.tsx
deleted file mode 100644
index 11210ca76..000000000
--- a/app/assets/javascripts/components/PanelResizer.tsx
+++ /dev/null
@@ -1,340 +0,0 @@
-import { Component, createRef } from 'preact';
-import { debounce } from '@/utils';
-
-export type ResizeFinishCallback = (
-  lastWidth: number,
-  lastLeft: number,
-  isMaxWidth: boolean,
-  isCollapsed: boolean
-) => void;
-
-export enum PanelSide {
-  Right = 'right',
-  Left = 'left',
-}
-
-export enum PanelResizeType {
-  WidthOnly = 'WidthOnly',
-  OffsetAndWidth = 'OffsetAndWidth',
-}
-
-type Props = {
-  width: number;
-  left: number;
-  alwaysVisible?: boolean;
-  collapsable?: boolean;
-  defaultWidth?: number;
-  hoverable?: boolean;
-  minWidth?: number;
-  panel: HTMLDivElement;
-  side: PanelSide;
-  type: PanelResizeType;
-  resizeFinishCallback?: ResizeFinishCallback;
-  widthEventCallback?: () => void;
-};
-
-type State = {
-  collapsed: boolean;
-  pressed: boolean;
-};
-
-export class PanelResizer extends Component<Props, State> {
-  private overlay?: HTMLDivElement;
-  private resizerElementRef = createRef<HTMLDivElement>();
-  private debouncedResizeHandler: () => void;
-  private startLeft: number;
-  private startWidth: number;
-  private lastDownX: number;
-  private lastLeft: number;
-  private lastWidth: number;
-  private widthBeforeLastDblClick: number;
-  private minWidth: number;
-
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      collapsed: false,
-      pressed: false,
-    };
-
-    this.minWidth = props.minWidth || 5;
-    this.startLeft = props.panel.offsetLeft;
-    this.startWidth = props.panel.scrollWidth;
-    this.lastDownX = 0;
-    this.lastLeft = props.panel.offsetLeft;
-    this.lastWidth = props.panel.scrollWidth;
-    this.widthBeforeLastDblClick = 0;
-
-    this.setWidth(this.props.width);
-    this.setLeft(this.props.left);
-
-    document.addEventListener('mouseup', this.onMouseUp);
-    document.addEventListener('mousemove', this.onMouseMove);
-    this.debouncedResizeHandler = debounce(this.handleResize, 250);
-    if (this.props.type === PanelResizeType.OffsetAndWidth) {
-      window.addEventListener('resize', this.debouncedResizeHandler);
-    }
-  }
-
-  componentDidUpdate(prevProps: Props) {
-    if (this.props.width != prevProps.width) {
-      this.setWidth(this.props.width);
-    }
-    if (this.props.left !== prevProps.left) {
-      this.setLeft(this.props.left);
-      this.setWidth(this.props.width);
-    }
-
-    const isCollapsed = this.isCollapsed();
-    if (isCollapsed !== this.state.collapsed) {
-      this.setState({ collapsed: isCollapsed });
-    }
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('mouseup', this.onMouseUp);
-    document.removeEventListener('mousemove', this.onMouseMove);
-    window.removeEventListener('resize', this.debouncedResizeHandler);
-  }
-
-  get appFrame() {
-    return document.getElementById('app')?.getBoundingClientRect() as DOMRect;
-  }
-
-  getParentRect() {
-    return (this.props.panel.parentNode as HTMLElement).getBoundingClientRect();
-  }
-
-  isAtMaxWidth = () => {
-    const marginOfError = 5;
-    const difference = Math.abs(
-      Math.round(this.lastWidth + this.lastLeft) -
-        Math.round(this.getParentRect().width)
-    );
-    return difference < marginOfError;
-  };
-
-  isCollapsed() {
-    return this.lastWidth <= this.minWidth;
-  }
-
-  finishSettingWidth = () => {
-    if (!this.props.collapsable) {
-      return;
-    }
-
-    this.setState({
-      collapsed: this.isCollapsed(),
-    });
-  };
-
-  setWidth = (width: number, finish = false): void => {
-    if (width === 0) {
-      width = this.computeMaxWidth();
-    }
-    if (width < this.minWidth) {
-      width = this.minWidth;
-    }
-
-    const parentRect = this.getParentRect();
-    if (width > parentRect.width) {
-      width = parentRect.width;
-    }
-
-    const maxWidth =
-      this.appFrame.width - this.props.panel.getBoundingClientRect().x;
-    if (width > maxWidth) {
-      width = maxWidth;
-    }
-
-    const isFullWidth =
-      Math.round(width + this.lastLeft) === Math.round(parentRect.width);
-    if (isFullWidth) {
-      if (this.props.type === PanelResizeType.WidthOnly) {
-        this.props.panel.style.removeProperty('width');
-      } else {
-        this.props.panel.style.width = `calc(100% - ${this.lastLeft}px)`;
-      }
-    } else {
-      this.props.panel.style.width = width + 'px';
-    }
-    this.lastWidth = width;
-    if (finish) {
-      this.finishSettingWidth();
-      if (this.props.resizeFinishCallback) {
-        this.props.resizeFinishCallback(
-          this.lastWidth,
-          this.lastLeft,
-          this.isAtMaxWidth(),
-          this.isCollapsed()
-        );
-      }
-    }
-  };
-
-  setLeft = (left: number) => {
-    this.props.panel.style.left = left + 'px';
-    this.lastLeft = left;
-  };
-
-  onDblClick = () => {
-    const collapsed = this.isCollapsed();
-    if (collapsed) {
-      this.setWidth(
-        this.widthBeforeLastDblClick || this.props.defaultWidth || 0
-      );
-    } else {
-      this.widthBeforeLastDblClick = this.lastWidth;
-      this.setWidth(this.minWidth);
-    }
-    this.finishSettingWidth();
-
-    this.props.resizeFinishCallback?.(
-      this.lastWidth,
-      this.lastLeft,
-      this.isAtMaxWidth(),
-      this.isCollapsed()
-    );
-  };
-
-  handleWidthEvent(event?: MouseEvent) {
-    if (this.props.widthEventCallback) {
-      this.props.widthEventCallback();
-    }
-
-    let x;
-    if (event) {
-      x = event.clientX;
-    } else {
-      /** Coming from resize event */
-      x = 0;
-      this.lastDownX = 0;
-    }
-    const deltaX = x - this.lastDownX;
-    const newWidth = this.startWidth + deltaX;
-    this.setWidth(newWidth, false);
-  }
-
-  handleLeftEvent(event: MouseEvent) {
-    const panelRect = this.props.panel.getBoundingClientRect();
-    const x = event.clientX || panelRect.x;
-    let deltaX = x - this.lastDownX;
-    let newLeft = this.startLeft + deltaX;
-    if (newLeft < 0) {
-      newLeft = 0;
-      deltaX = -this.startLeft;
-    }
-    const parentRect = this.getParentRect();
-    let newWidth = this.startWidth - deltaX;
-    if (newWidth < this.minWidth) {
-      newWidth = this.minWidth;
-    }
-    if (newWidth > parentRect.width) {
-      newWidth = parentRect.width;
-    }
-    if (newLeft + newWidth > parentRect.width) {
-      newLeft = parentRect.width - newWidth;
-    }
-    this.setLeft(newLeft);
-    this.setWidth(newWidth, false);
-  }
-
-  computeMaxWidth(): number {
-    const parentRect = this.getParentRect();
-    let width = parentRect.width - this.props.left;
-    if (width < this.minWidth) {
-      width = this.minWidth;
-    }
-    return width;
-  }
-
-  handleResize = () => {
-    const startWidth = this.isAtMaxWidth()
-      ? this.computeMaxWidth()
-      : this.props.panel.scrollWidth;
-
-    this.startWidth = startWidth;
-    this.lastWidth = startWidth;
-
-    this.handleWidthEvent();
-    this.finishSettingWidth();
-  };
-
-  onMouseDown = (event: MouseEvent) => {
-    this.addInvisibleOverlay();
-    this.lastDownX = event.clientX;
-    this.startWidth = this.props.panel.scrollWidth;
-    this.startLeft = this.props.panel.offsetLeft;
-    this.setState({
-      pressed: true,
-    });
-  };
-
-  onMouseUp = () => {
-    this.removeInvisibleOverlay();
-    if (!this.state.pressed) {
-      return;
-    }
-    this.setState({ pressed: false });
-    const isMaxWidth = this.isAtMaxWidth();
-    if (this.props.resizeFinishCallback) {
-      this.props.resizeFinishCallback(
-        this.lastWidth,
-        this.lastLeft,
-        isMaxWidth,
-        this.isCollapsed()
-      );
-    }
-    this.finishSettingWidth();
-  };
-
-  onMouseMove = (event: MouseEvent) => {
-    if (!this.state.pressed) {
-      return;
-    }
-    event.preventDefault();
-    if (this.props.side === PanelSide.Left) {
-      this.handleLeftEvent(event);
-    } else {
-      this.handleWidthEvent(event);
-    }
-  };
-
-  /**
-   * If an iframe is displayed adjacent to our panel, and the mouse exits over the iframe,
-   * document[onmouseup] is not triggered because the document is no longer the same over
-   * the iframe. We add an invisible overlay while resizing so that the mouse context
-   * remains in our main document.
-   */
-  addInvisibleOverlay = () => {
-    if (this.overlay) {
-      return;
-    }
-    const overlayElement = document.createElement('div');
-    overlayElement.id = 'resizer-overlay';
-    this.overlay = overlayElement;
-    document.body.prepend(this.overlay);
-  };
-
-  removeInvisibleOverlay = () => {
-    if (this.overlay) {
-      this.overlay.remove();
-      this.overlay = undefined;
-    }
-  };
-
-  render() {
-    return (
-      <div
-        className={`panel-resizer ${this.props.side} ${
-          this.props.hoverable ? 'hoverable' : ''
-        } ${this.props.alwaysVisible ? 'alwaysVisible' : ''} ${
-          this.state.pressed ? 'dragging' : ''
-        } ${this.state.collapsed ? 'collapsed' : ''}`}
-        onMouseDown={this.onMouseDown}
-        onDblClick={this.onDblClick}
-        ref={this.resizerElementRef}
-      ></div>
-    );
-  }
-}
diff --git a/app/assets/javascripts/components/PinNoteButton.tsx b/app/assets/javascripts/components/PinNoteButton.tsx
deleted file mode 100644
index 354f3df3a..000000000
--- a/app/assets/javascripts/components/PinNoteButton.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { AppState } from '@/ui_models/app_state';
-import VisuallyHidden from '@reach/visually-hidden';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { Icon } from './Icon';
-
-type Props = {
-  appState: AppState;
-  className?: string;
-  onClickPreprocessing?: () => Promise<void>;
-};
-
-export const PinNoteButton: FunctionComponent<Props> = observer(
-  ({ appState, className = '', onClickPreprocessing }) => {
-    const notes = Object.values(appState.notes.selectedNotes);
-    const pinned = notes.some((note) => note.pinned);
-
-    const togglePinned = async () => {
-      if (onClickPreprocessing) {
-        await onClickPreprocessing();
-      }
-      if (!pinned) {
-        appState.notes.setPinSelectedNotes(true);
-      } else {
-        appState.notes.setPinSelectedNotes(false);
-      }
-    };
-
-    return (
-      <button
-        className={`sn-icon-button border-contrast ${
-          pinned ? 'toggled' : ''
-        } ${className}`}
-        onClick={togglePinned}
-      >
-        <VisuallyHidden>Pin selected notes</VisuallyHidden>
-        <Icon type="pin" className="block" />
-      </button>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/Preferences/PreferencesView.tsx b/app/assets/javascripts/components/Preferences/PreferencesView.tsx
deleted file mode 100644
index f808c6458..000000000
--- a/app/assets/javascripts/components/Preferences/PreferencesView.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import { RoundIconButton } from '@/components/RoundIconButton';
-import { TitleBar, Title } from '@/components/TitleBar';
-import { FunctionComponent } from 'preact';
-import { observer } from 'mobx-react-lite';
-
-import {
-  AccountPreferences,
-  HelpAndFeedback,
-  Listed,
-  General,
-  Security,
-} from './panes';
-import { PreferencesMenu } from './PreferencesMenu';
-import { PreferencesMenuView } from './PreferencesMenuView';
-import { WebApplication } from '@/ui_models/application';
-import { MfaProps } from './panes/two-factor-auth/MfaProps';
-import { AppState } from '@/ui_models/app_state';
-import { useEffect, useMemo } from 'preact/hooks';
-import { Backups } from '@/components/Preferences/panes/Backups';
-import { Appearance } from './panes/Appearance';
-
-interface PreferencesProps extends MfaProps {
-  application: WebApplication;
-  appState: AppState;
-  closePreferences: () => void;
-}
-
-const PaneSelector: FunctionComponent<
-  PreferencesProps & { menu: PreferencesMenu }
-> = observer(({ menu, appState, application, mfaProvider, userProvider }) => {
-  switch (menu.selectedPaneId) {
-    case 'general':
-      return (
-        <General
-          appState={appState}
-          application={application}
-          extensionsLatestVersions={menu.extensionsLatestVersions}
-        />
-      );
-    case 'account':
-      return (
-        <AccountPreferences application={application} appState={appState} />
-      );
-    case 'appearance':
-      return <Appearance application={application} />;
-    case 'security':
-      return (
-        <Security
-          mfaProvider={mfaProvider}
-          userProvider={userProvider}
-          appState={appState}
-          application={application}
-        />
-      );
-    case 'backups':
-      return <Backups application={application} appState={appState} />;
-    case 'listed':
-      return <Listed application={application} />;
-    case 'shortcuts':
-      return null;
-    case 'accessibility':
-      return null;
-    case 'get-free-month':
-      return null;
-    case 'help-feedback':
-      return <HelpAndFeedback />;
-    default:
-      return (
-        <General
-          appState={appState}
-          application={application}
-          extensionsLatestVersions={menu.extensionsLatestVersions}
-        />
-      );
-  }
-});
-
-const PreferencesCanvas: FunctionComponent<
-  PreferencesProps & { menu: PreferencesMenu }
-> = observer((props) => (
-  <div className="flex flex-row flex-grow min-h-0 justify-between">
-    <PreferencesMenuView menu={props.menu} />
-    <PaneSelector {...props} />
-  </div>
-));
-
-export const PreferencesView: FunctionComponent<PreferencesProps> = observer(
-  (props) => {
-    const menu = useMemo(
-      () =>
-        new PreferencesMenu(
-          props.application,
-          props.appState.enableUnfinishedFeatures
-        ),
-      [props.appState.enableUnfinishedFeatures, props.application]
-    );
-
-    useEffect(() => {
-      menu.selectPane(props.appState.preferences.currentPane);
-      const removeEscKeyObserver = props.application.io.addKeyObserver({
-        key: 'Escape',
-        onKeyDown: (event) => {
-          event.preventDefault();
-          props.closePreferences();
-        },
-      });
-      return () => {
-        removeEscKeyObserver();
-      };
-    }, [props, menu]);
-
-    return (
-      <div className="h-full w-full absolute top-left-0 flex flex-col bg-contrast z-index-preferences">
-        <TitleBar className="items-center justify-between">
-          {/* div is added so flex justify-between can center the title */}
-          <div className="h-8 w-8" />
-          <Title className="text-lg">Your preferences for Standard Notes</Title>
-          <RoundIconButton
-            onClick={() => {
-              props.closePreferences();
-            }}
-            type="normal"
-            icon="close"
-          />
-        </TitleBar>
-        <PreferencesCanvas {...props} menu={menu} />
-      </div>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/Preferences/components/MenuItem.tsx b/app/assets/javascripts/components/Preferences/components/MenuItem.tsx
deleted file mode 100644
index f13a27866..000000000
--- a/app/assets/javascripts/components/Preferences/components/MenuItem.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Icon } from '@/components/Icon';
-import { FunctionComponent } from 'preact';
-import { IconType } from '@standardnotes/snjs';
-
-interface Props {
-  iconType: IconType;
-  label: string;
-  selected: boolean;
-  onClick: () => void;
-}
-
-export const MenuItem: FunctionComponent<Props> = ({
-  iconType,
-  label,
-  selected,
-  onClick,
-}) => (
-  <div
-    className={`preferences-menu-item select-none ${
-      selected ? 'selected' : ''
-    }`}
-    onClick={(e) => {
-      e.preventDefault();
-      onClick();
-    }}
-  >
-    <Icon className="icon" type={iconType} />
-    <div className="min-w-1" />
-    {label}
-  </div>
-);
diff --git a/app/assets/javascripts/components/Preferences/components/PreferencesSegment.tsx b/app/assets/javascripts/components/Preferences/components/PreferencesSegment.tsx
deleted file mode 100644
index e5e5b18eb..000000000
--- a/app/assets/javascripts/components/Preferences/components/PreferencesSegment.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { FunctionComponent } from 'preact';
-
-type Props = {
-  classes?: string;
-};
-export const PreferencesSegment: FunctionComponent<Props> = ({
-  children,
-  classes = '',
-}) => <div className={`flex flex-col ${classes}`}>{children}</div>;
diff --git a/app/assets/javascripts/components/Preferences/components/index.ts b/app/assets/javascripts/components/Preferences/components/index.ts
deleted file mode 100644
index 04139c83d..000000000
--- a/app/assets/javascripts/components/Preferences/components/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './Content';
-export * from './MenuItem';
-export * from './PreferencesPane';
-export * from './PreferencesGroup';
-export * from './PreferencesSegment';
diff --git a/app/assets/javascripts/components/Preferences/panes/AccountPreferences.tsx b/app/assets/javascripts/components/Preferences/panes/AccountPreferences.tsx
deleted file mode 100644
index 41e752e34..000000000
--- a/app/assets/javascripts/components/Preferences/panes/AccountPreferences.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import {
-  Sync,
-  Subscription,
-  Credentials,
-  SignOutWrapper,
-  Authentication,
-} from '@/components/Preferences/panes/account';
-import { PreferencesPane } from '@/components/Preferences/components';
-import { observer } from 'mobx-react-lite';
-import { WebApplication } from '@/ui_models/application';
-import { AppState } from '@/ui_models/app_state';
-
-type Props = {
-  application: WebApplication;
-  appState: AppState;
-};
-
-export const AccountPreferences = observer(
-  ({ application, appState }: Props) => (
-    <PreferencesPane>
-      {!application.hasAccount() ? (
-        <Authentication application={application} appState={appState} />
-      ) : (
-        <>
-          <Credentials application={application} appState={appState} />
-          <Sync application={application} />
-        </>
-      )}
-      <Subscription application={application} appState={appState} />
-      <SignOutWrapper application={application} appState={appState} />
-    </PreferencesPane>
-  )
-);
diff --git a/app/assets/javascripts/components/Preferences/panes/Appearance.tsx b/app/assets/javascripts/components/Preferences/panes/Appearance.tsx
deleted file mode 100644
index 5f7f16259..000000000
--- a/app/assets/javascripts/components/Preferences/panes/Appearance.tsx
+++ /dev/null
@@ -1,201 +0,0 @@
-import { Dropdown, DropdownItem } from '@/components/Dropdown';
-import { usePremiumModal } from '@/components/Premium';
-import { sortThemes } from '@/components/QuickSettingsMenu/QuickSettingsMenu';
-import { HorizontalSeparator } from '@/components/Shared/HorizontalSeparator';
-import { Switch } from '@/components/Switch';
-import { WebApplication } from '@/ui_models/application';
-import {
-  ContentType,
-  FeatureIdentifier,
-  FeatureStatus,
-  PrefKey,
-  GetFeatures,
-  SNTheme,
-} from '@standardnotes/snjs';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { useEffect, useState } from 'preact/hooks';
-import {
-  PreferencesGroup,
-  PreferencesPane,
-  PreferencesSegment,
-  Subtitle,
-  Title,
-  Text,
-} from '../components';
-
-type Props = {
-  application: WebApplication;
-};
-
-export const Appearance: FunctionComponent<Props> = observer(
-  ({ application }) => {
-    const premiumModal = usePremiumModal();
-    const isEntitledToMidnightTheme =
-      application.features.getFeatureStatus(FeatureIdentifier.MidnightTheme) ===
-      FeatureStatus.Entitled;
-
-    const [themeItems, setThemeItems] = useState<DropdownItem[]>([]);
-    const [autoLightTheme, setAutoLightTheme] = useState<string>(
-      () =>
-        application.getPreference(
-          PrefKey.AutoLightThemeIdentifier,
-          'Default'
-        ) as string
-    );
-    const [autoDarkTheme, setAutoDarkTheme] = useState<string>(
-      () =>
-        application.getPreference(
-          PrefKey.AutoDarkThemeIdentifier,
-          isEntitledToMidnightTheme
-            ? FeatureIdentifier.MidnightTheme
-            : 'Default'
-        ) as string
-    );
-    const [useDeviceSettings, setUseDeviceSettings] = useState(
-      () =>
-        application.getPreference(
-          PrefKey.UseSystemColorScheme,
-          false
-        ) as boolean
-    );
-
-    useEffect(() => {
-      const themesAsItems: DropdownItem[] = application.items
-        .getDisplayableItems<SNTheme>(ContentType.Theme)
-        .filter((theme) => !theme.isLayerable())
-        .sort(sortThemes)
-        .map((theme) => {
-          return {
-            label: theme.name,
-            value: theme.identifier as string,
-          };
-        });
-
-      GetFeatures()
-        .filter(
-          (feature) =>
-            feature.content_type === ContentType.Theme && !feature.layerable
-        )
-        .forEach((theme) => {
-          if (
-            themesAsItems.findIndex(
-              (item) => item.value === theme.identifier
-            ) === -1
-          ) {
-            themesAsItems.push({
-              label: theme.name as string,
-              value: theme.identifier,
-              icon: 'premium-feature',
-            });
-          }
-        });
-
-      themesAsItems.unshift({
-        label: 'Default',
-        value: 'Default',
-      });
-
-      setThemeItems(themesAsItems);
-    }, [application]);
-
-    const toggleUseDeviceSettings = () => {
-      application.setPreference(
-        PrefKey.UseSystemColorScheme,
-        !useDeviceSettings
-      );
-      if (!application.getPreference(PrefKey.AutoLightThemeIdentifier)) {
-        application.setPreference(
-          PrefKey.AutoLightThemeIdentifier,
-          autoLightTheme as FeatureIdentifier
-        );
-      }
-      if (!application.getPreference(PrefKey.AutoDarkThemeIdentifier)) {
-        application.setPreference(
-          PrefKey.AutoDarkThemeIdentifier,
-          autoDarkTheme as FeatureIdentifier
-        );
-      }
-      setUseDeviceSettings(!useDeviceSettings);
-    };
-
-    const changeAutoLightTheme = (value: string, item: DropdownItem) => {
-      if (item.icon === 'premium-feature') {
-        premiumModal.activate(`${item.label} theme`);
-      } else {
-        application.setPreference(
-          PrefKey.AutoLightThemeIdentifier,
-          value as FeatureIdentifier
-        );
-        setAutoLightTheme(value);
-      }
-    };
-
-    const changeAutoDarkTheme = (value: string, item: DropdownItem) => {
-      if (item.icon === 'premium-feature') {
-        premiumModal.activate(`${item.label} theme`);
-      } else {
-        application.setPreference(
-          PrefKey.AutoDarkThemeIdentifier,
-          value as FeatureIdentifier
-        );
-        setAutoDarkTheme(value);
-      }
-    };
-
-    return (
-      <PreferencesPane>
-        <PreferencesGroup>
-          <PreferencesSegment>
-            <Title>Themes</Title>
-            <div className="mt-2">
-              <div className="flex items-center justify-between">
-                <div className="flex flex-col">
-                  <Subtitle>Use system color scheme</Subtitle>
-                  <Text>
-                    Automatically change active theme based on your system
-                    settings.
-                  </Text>
-                </div>
-                <Switch
-                  onChange={toggleUseDeviceSettings}
-                  checked={useDeviceSettings}
-                />
-              </div>
-              <HorizontalSeparator classes="mt-5 mb-3" />
-              <div>
-                <Subtitle>Automatic Light Theme</Subtitle>
-                <Text>Theme to be used for system light mode:</Text>
-                <div className="mt-2">
-                  <Dropdown
-                    id="auto-light-theme-dropdown"
-                    label="Select the automatic light theme"
-                    items={themeItems}
-                    value={autoLightTheme}
-                    onChange={changeAutoLightTheme}
-                    disabled={!useDeviceSettings}
-                  />
-                </div>
-              </div>
-              <HorizontalSeparator classes="mt-5 mb-3" />
-              <div>
-                <Subtitle>Automatic Dark Theme</Subtitle>
-                <Text>Theme to be used for system dark mode:</Text>
-                <div className="mt-2">
-                  <Dropdown
-                    id="auto-dark-theme-dropdown"
-                    label="Select the automatic dark theme"
-                    items={themeItems}
-                    value={autoDarkTheme}
-                    onChange={changeAutoDarkTheme}
-                    disabled={!useDeviceSettings}
-                  />
-                </div>
-              </div>
-            </div>
-          </PreferencesSegment>
-        </PreferencesGroup>
-      </PreferencesPane>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/Preferences/panes/Backups.tsx b/app/assets/javascripts/components/Preferences/panes/Backups.tsx
deleted file mode 100644
index e4b5c03d6..000000000
--- a/app/assets/javascripts/components/Preferences/panes/Backups.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { WebApplication } from '@/ui_models/application';
-import { AppState } from '@/ui_models/app_state';
-import { FunctionComponent } from 'preact';
-import { PreferencesPane } from '../components';
-import { CloudLink, DataBackups, EmailBackups } from './backups-segments';
-
-interface Props {
-  appState: AppState;
-  application: WebApplication;
-}
-
-export const Backups: FunctionComponent<Props> = ({
-  application,
-  appState,
-}) => {
-  return (
-    <PreferencesPane>
-      <DataBackups application={application} appState={appState} />
-      <EmailBackups application={application} />
-      <CloudLink application={application} />
-    </PreferencesPane>
-  );
-};
diff --git a/app/assets/javascripts/components/Preferences/panes/General.tsx b/app/assets/javascripts/components/Preferences/panes/General.tsx
deleted file mode 100644
index 1d8c902cf..000000000
--- a/app/assets/javascripts/components/Preferences/panes/General.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { WebApplication } from '@/ui_models/application';
-import { AppState } from '@/ui_models/app_state';
-import { FunctionComponent } from 'preact';
-import { PreferencesPane } from '../components';
-import { Tools, Defaults, LabsPane } from './general-segments';
-import { ExtensionsLatestVersions } from '@/components/Preferences/panes/extensions-segments';
-import { Advanced } from '@/components/Preferences/panes/account';
-import { observer } from 'mobx-react-lite';
-
-interface GeneralProps {
-  appState: AppState;
-  application: WebApplication;
-  extensionsLatestVersions: ExtensionsLatestVersions;
-}
-
-export const General: FunctionComponent<GeneralProps> = observer(
-  ({ appState, application, extensionsLatestVersions }) => (
-    <PreferencesPane>
-      <Tools application={application} />
-      <Defaults application={application} />
-      <LabsPane application={application} />
-      <Advanced
-        application={application}
-        appState={appState}
-        extensionsLatestVersions={extensionsLatestVersions}
-      />
-    </PreferencesPane>
-  )
-);
diff --git a/app/assets/javascripts/components/Preferences/panes/Security.tsx b/app/assets/javascripts/components/Preferences/panes/Security.tsx
deleted file mode 100644
index af3588ab1..000000000
--- a/app/assets/javascripts/components/Preferences/panes/Security.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { WebApplication } from '@/ui_models/application';
-import { AppState } from '@/ui_models/app_state';
-import { FunctionComponent } from 'preact';
-import { PreferencesPane } from '../components';
-import { Encryption, PasscodeLock, Protections } from './security-segments';
-import { Privacy } from './security-segments/Privacy';
-import { TwoFactorAuthWrapper } from './two-factor-auth';
-import { MfaProps } from './two-factor-auth/MfaProps';
-
-interface SecurityProps extends MfaProps {
-  appState: AppState;
-  application: WebApplication;
-}
-
-export const Security: FunctionComponent<SecurityProps> = (props) => (
-  <PreferencesPane>
-    <Encryption appState={props.appState} />
-    <Protections application={props.application} />
-    <TwoFactorAuthWrapper
-      mfaProvider={props.mfaProvider}
-      userProvider={props.userProvider}
-    />
-    <PasscodeLock appState={props.appState} application={props.application} />
-    <Privacy application={props.application} />
-  </PreferencesPane>
-);
diff --git a/app/assets/javascripts/components/Preferences/panes/account/Advanced.tsx b/app/assets/javascripts/components/Preferences/panes/account/Advanced.tsx
deleted file mode 100644
index dae8189b6..000000000
--- a/app/assets/javascripts/components/Preferences/panes/account/Advanced.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { FunctionalComponent } from 'preact';
-import {
-  PreferencesGroup,
-  PreferencesSegment,
-} from '@/components/Preferences/components';
-import { OfflineSubscription } from '@/components/Preferences/panes/account/offlineSubscription';
-import { WebApplication } from '@/ui_models/application';
-import { observer } from 'mobx-react-lite';
-import { AppState } from '@/ui_models/app_state';
-import { Extensions } from '@/components/Preferences/panes/Extensions';
-import { ExtensionsLatestVersions } from '@/components/Preferences/panes/extensions-segments';
-import { AccordionItem } from '@/components/Shared/AccordionItem';
-
-interface IProps {
-  application: WebApplication;
-  appState: AppState;
-  extensionsLatestVersions: ExtensionsLatestVersions;
-}
-
-export const Advanced: FunctionalComponent<IProps> = observer(
-  ({ application, appState, extensionsLatestVersions }) => {
-    return (
-      <PreferencesGroup>
-        <PreferencesSegment>
-          <AccordionItem title={'Advanced Settings'}>
-            <div className="flex flex-row items-center">
-              <div className="flex-grow flex flex-col">
-                <OfflineSubscription
-                  application={application}
-                  appState={appState}
-                />
-                <Extensions
-                  className={'mt-3'}
-                  application={application}
-                  extensionsLatestVersions={extensionsLatestVersions}
-                />
-              </div>
-            </div>
-          </AccordionItem>
-        </PreferencesSegment>
-      </PreferencesGroup>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/Preferences/panes/account/Credentials.tsx b/app/assets/javascripts/components/Preferences/panes/account/Credentials.tsx
deleted file mode 100644
index 397c57c28..000000000
--- a/app/assets/javascripts/components/Preferences/panes/account/Credentials.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import {
-  PreferencesGroup,
-  PreferencesSegment,
-  Subtitle,
-  Text,
-  Title,
-} from '@/components/Preferences/components';
-import { Button } from '@/components/Button';
-import { WebApplication } from '@/ui_models/application';
-import { observer } from '@node_modules/mobx-react-lite';
-import { HorizontalSeparator } from '@/components/Shared/HorizontalSeparator';
-import { dateToLocalizedString } from '@standardnotes/snjs';
-import { useCallback, useState } from 'preact/hooks';
-import { ChangeEmail } from '@/components/Preferences/panes/account/changeEmail';
-import { FunctionComponent, render } from 'preact';
-import { AppState } from '@/ui_models/app_state';
-import { PasswordWizard } from '@/components/PasswordWizard';
-
-type Props = {
-  application: WebApplication;
-  appState: AppState;
-};
-
-export const Credentials: FunctionComponent<Props> = observer(
-  ({ application }: Props) => {
-    const [isChangeEmailDialogOpen, setIsChangeEmailDialogOpen] =
-      useState(false);
-
-    const user = application.getUser();
-
-    const passwordCreatedAtTimestamp =
-      application.getUserPasswordCreationDate() as Date;
-    const passwordCreatedOn = dateToLocalizedString(passwordCreatedAtTimestamp);
-
-    const presentPasswordWizard = useCallback(() => {
-      render(
-        <PasswordWizard application={application} />,
-        document.body.appendChild(document.createElement('div'))
-      );
-    }, [application]);
-
-    return (
-      <PreferencesGroup>
-        <PreferencesSegment>
-          <Title>Credentials</Title>
-          <Subtitle>Email</Subtitle>
-          <Text>
-            You're signed in as{' '}
-            <span className="font-bold wrap">{user?.email}</span>
-          </Text>
-          <Button
-            className="min-w-20 mt-3"
-            variant="normal"
-            label="Change email"
-            onClick={() => {
-              setIsChangeEmailDialogOpen(true);
-            }}
-          />
-          <HorizontalSeparator classes="mt-5 mb-3" />
-          <Subtitle>Password</Subtitle>
-          <Text>
-            Current password was set on{' '}
-            <span className="font-bold">{passwordCreatedOn}</span>
-          </Text>
-          <Button
-            className="min-w-20 mt-3"
-            variant="normal"
-            label="Change password"
-            onClick={presentPasswordWizard}
-          />
-          {isChangeEmailDialogOpen && (
-            <ChangeEmail
-              onCloseDialog={() => setIsChangeEmailDialogOpen(false)}
-              application={application}
-            />
-          )}
-        </PreferencesSegment>
-      </PreferencesGroup>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/Preferences/panes/account/Sync.tsx b/app/assets/javascripts/components/Preferences/panes/account/Sync.tsx
deleted file mode 100644
index 6b29553ac..000000000
--- a/app/assets/javascripts/components/Preferences/panes/account/Sync.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import {
-  PreferencesGroup,
-  PreferencesSegment,
-  Text,
-  Title,
-} from '@/components/Preferences/components';
-import { Button } from '@/components/Button';
-import { SyncQueueStrategy, dateToLocalizedString } from '@standardnotes/snjs';
-import { STRING_GENERIC_SYNC_ERROR } from '@/strings';
-import { useState } from '@node_modules/preact/hooks';
-import { observer } from 'mobx-react-lite';
-import { WebApplication } from '@/ui_models/application';
-import { FunctionComponent } from 'preact';
-
-type Props = {
-  application: WebApplication;
-};
-
-export const formatLastSyncDate = (lastUpdatedDate: Date) => {
-  return dateToLocalizedString(lastUpdatedDate);
-};
-
-export const Sync: FunctionComponent<Props> = observer(
-  ({ application }: Props) => {
-    const [isSyncingInProgress, setIsSyncingInProgress] = useState(false);
-    const [lastSyncDate, setLastSyncDate] = useState(
-      formatLastSyncDate(application.sync.getLastSyncDate() as Date)
-    );
-
-    const doSynchronization = async () => {
-      setIsSyncingInProgress(true);
-
-      const response = await application.sync.sync({
-        queueStrategy: SyncQueueStrategy.ForceSpawnNew,
-        checkIntegrity: true,
-      });
-      setIsSyncingInProgress(false);
-      if (response && (response as any).error) {
-        application.alertService.alert(STRING_GENERIC_SYNC_ERROR);
-      } else {
-        setLastSyncDate(
-          formatLastSyncDate(application.sync.getLastSyncDate() as Date)
-        );
-      }
-    };
-
-    return (
-      <PreferencesGroup>
-        <PreferencesSegment>
-          <div className="flex flex-row items-center">
-            <div className="flex-grow flex flex-col">
-              <Title>Sync</Title>
-              <Text>
-                Last synced <span className="font-bold">on {lastSyncDate}</span>
-              </Text>
-              <Button
-                className="min-w-20 mt-3"
-                variant="normal"
-                label="Sync now"
-                disabled={isSyncingInProgress}
-                onClick={doSynchronization}
-              />
-            </div>
-          </div>
-        </PreferencesSegment>
-      </PreferencesGroup>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/Preferences/panes/account/changeEmail/ChangeEmailSuccess.tsx b/app/assets/javascripts/components/Preferences/panes/account/changeEmail/ChangeEmailSuccess.tsx
deleted file mode 100644
index 49e45c9c2..000000000
--- a/app/assets/javascripts/components/Preferences/panes/account/changeEmail/ChangeEmailSuccess.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { FunctionalComponent } from 'preact';
-
-export const ChangeEmailSuccess: FunctionalComponent = () => {
-  return (
-    <div>
-      <div className={'sk-label sk-bold info mt-2'}>
-        Your email has been successfully changed.
-      </div>
-      <p className={'sk-p'}>
-        Please ensure you are running the latest version of Standard Notes on
-        all platforms to ensure maximum compatibility.
-      </p>
-    </div>
-  );
-};
diff --git a/app/assets/javascripts/components/Preferences/panes/account/changeEmail/index.tsx b/app/assets/javascripts/components/Preferences/panes/account/changeEmail/index.tsx
deleted file mode 100644
index 9dc0e45ae..000000000
--- a/app/assets/javascripts/components/Preferences/panes/account/changeEmail/index.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import { useState } from '@node_modules/preact/hooks';
-import {
-  ModalDialog,
-  ModalDialogButtons,
-  ModalDialogDescription,
-  ModalDialogLabel,
-} from '@/components/Shared/ModalDialog';
-import { Button } from '@/components/Button';
-import { FunctionalComponent } from 'preact';
-import { WebApplication } from '@/ui_models/application';
-import { useBeforeUnload } from '@/hooks/useBeforeUnload';
-import { ChangeEmailForm } from './ChangeEmailForm';
-import { ChangeEmailSuccess } from './ChangeEmailSuccess';
-import { isEmailValid } from '@/utils';
-
-enum SubmitButtonTitles {
-  Default = 'Continue',
-  GeneratingKeys = 'Generating Keys...',
-  Finish = 'Finish',
-}
-
-enum Steps {
-  InitialStep,
-  FinishStep,
-}
-
-type Props = {
-  onCloseDialog: () => void;
-  application: WebApplication;
-};
-
-export const ChangeEmail: FunctionalComponent<Props> = ({
-  onCloseDialog,
-  application,
-}) => {
-  const [currentPassword, setCurrentPassword] = useState('');
-  const [newEmail, setNewEmail] = useState('');
-  const [isContinuing, setIsContinuing] = useState(false);
-  const [lockContinue, setLockContinue] = useState(false);
-  const [submitButtonTitle, setSubmitButtonTitle] = useState(
-    SubmitButtonTitles.Default
-  );
-  const [currentStep, setCurrentStep] = useState(Steps.InitialStep);
-
-  useBeforeUnload();
-
-  const applicationAlertService = application.alertService;
-
-  const validateCurrentPassword = async () => {
-    if (!currentPassword || currentPassword.length === 0) {
-      applicationAlertService.alert('Please enter your current password.');
-
-      return false;
-    }
-
-    const success = await application.validateAccountPassword(currentPassword);
-    if (!success) {
-      applicationAlertService.alert(
-        'The current password you entered is not correct. Please try again.'
-      );
-
-      return false;
-    }
-
-    return success;
-  };
-
-  const validateNewEmail = async () => {
-    if (!isEmailValid(newEmail)) {
-      applicationAlertService.alert(
-        'The email you entered has an invalid format. Please review your input and try again.'
-      );
-
-      return false;
-    }
-
-    return true;
-  };
-
-  const resetProgressState = () => {
-    setSubmitButtonTitle(SubmitButtonTitles.Default);
-    setIsContinuing(false);
-  };
-
-  const processEmailChange = async () => {
-    await application.downloadBackup();
-
-    setLockContinue(true);
-
-    const response = await application.changeEmail(newEmail, currentPassword);
-
-    const success = !response.error;
-
-    setLockContinue(false);
-
-    return success;
-  };
-
-  const dismiss = () => {
-    if (lockContinue) {
-      applicationAlertService.alert(
-        'Cannot close window until pending tasks are complete.'
-      );
-    } else {
-      onCloseDialog();
-    }
-  };
-
-  const handleSubmit = async () => {
-    if (lockContinue || isContinuing) {
-      return;
-    }
-
-    if (currentStep === Steps.FinishStep) {
-      dismiss();
-
-      return;
-    }
-
-    setIsContinuing(true);
-    setSubmitButtonTitle(SubmitButtonTitles.GeneratingKeys);
-
-    const valid =
-      (await validateCurrentPassword()) && (await validateNewEmail());
-
-    if (!valid) {
-      resetProgressState();
-
-      return;
-    }
-
-    const success = await processEmailChange();
-    if (!success) {
-      resetProgressState();
-
-      return;
-    }
-
-    setIsContinuing(false);
-    setSubmitButtonTitle(SubmitButtonTitles.Finish);
-    setCurrentStep(Steps.FinishStep);
-  };
-
-  const handleDialogClose = () => {
-    if (lockContinue) {
-      applicationAlertService.alert(
-        'Cannot close window until pending tasks are complete.'
-      );
-    } else {
-      onCloseDialog();
-    }
-  };
-
-  return (
-    <div>
-      <ModalDialog>
-        <ModalDialogLabel closeDialog={handleDialogClose}>
-          Change Email
-        </ModalDialogLabel>
-        <ModalDialogDescription className="px-4.5">
-          {currentStep === Steps.InitialStep && (
-            <ChangeEmailForm
-              setNewEmail={setNewEmail}
-              setCurrentPassword={setCurrentPassword}
-            />
-          )}
-          {currentStep === Steps.FinishStep && <ChangeEmailSuccess />}
-        </ModalDialogDescription>
-        <ModalDialogButtons className="px-4.5">
-          <Button
-            className="min-w-20"
-            variant="primary"
-            label={submitButtonTitle}
-            onClick={handleSubmit}
-          />
-        </ModalDialogButtons>
-      </ModalDialog>
-    </div>
-  );
-};
diff --git a/app/assets/javascripts/components/Preferences/panes/account/index.ts b/app/assets/javascripts/components/Preferences/panes/account/index.ts
deleted file mode 100644
index bc74bd926..000000000
--- a/app/assets/javascripts/components/Preferences/panes/account/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export { Subscription } from './subscription/Subscription';
-export { Sync } from './Sync';
-export { Credentials } from './Credentials';
-export { SignOutWrapper } from './SignOutView';
-export { Authentication } from './Authentication';
-export { Advanced } from './Advanced';
diff --git a/app/assets/javascripts/components/Preferences/panes/account/offlineSubscription.tsx b/app/assets/javascripts/components/Preferences/panes/account/offlineSubscription.tsx
deleted file mode 100644
index eac3c9e9b..000000000
--- a/app/assets/javascripts/components/Preferences/panes/account/offlineSubscription.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import { FunctionalComponent } from 'preact';
-import { Subtitle } from '@/components/Preferences/components';
-import { DecoratedInput } from '@/components/DecoratedInput';
-import { Button } from '@/components/Button';
-import { useEffect, useState } from 'preact/hooks';
-import { WebApplication } from '@/ui_models/application';
-import { AppState } from '@/ui_models/app_state';
-import { observer } from 'mobx-react-lite';
-import { STRING_REMOVE_OFFLINE_KEY_CONFIRMATION } from '@/strings';
-import { ButtonType, ClientDisplayableError } from '@standardnotes/snjs';
-import { HorizontalSeparator } from '@/components/Shared/HorizontalSeparator';
-
-interface IProps {
-  application: WebApplication;
-  appState: AppState;
-}
-
-export const OfflineSubscription: FunctionalComponent<IProps> = observer(
-  ({ application }) => {
-    const [activationCode, setActivationCode] = useState('');
-    const [isSuccessfullyActivated, setIsSuccessfullyActivated] =
-      useState(false);
-    const [isSuccessfullyRemoved, setIsSuccessfullyRemoved] = useState(false);
-    const [hasUserPreviouslyStoredCode, setHasUserPreviouslyStoredCode] =
-      useState(false);
-
-    useEffect(() => {
-      if (application.features.hasOfflineRepo()) {
-        setHasUserPreviouslyStoredCode(true);
-      }
-    }, [application]);
-
-    const shouldShowOfflineSubscription = () => {
-      return (
-        !application.hasAccount() ||
-        application.isThirdPartyHostUsed() ||
-        hasUserPreviouslyStoredCode
-      );
-    };
-
-    const handleSubscriptionCodeSubmit = async (event: Event) => {
-      event.preventDefault();
-
-      const result = await application.features.setOfflineFeaturesCode(
-        activationCode
-      );
-
-      if (result instanceof ClientDisplayableError) {
-        await application.alertService.alert(result.text);
-      } else {
-        setIsSuccessfullyActivated(true);
-        setHasUserPreviouslyStoredCode(true);
-        setIsSuccessfullyRemoved(false);
-      }
-    };
-
-    const handleRemoveOfflineKey = async () => {
-      await application.features.deleteOfflineFeatureRepo();
-
-      setIsSuccessfullyActivated(false);
-      setHasUserPreviouslyStoredCode(false);
-      setActivationCode('');
-      setIsSuccessfullyRemoved(true);
-    };
-
-    const handleRemoveClick = async () => {
-      application.alertService
-        .confirm(
-          STRING_REMOVE_OFFLINE_KEY_CONFIRMATION,
-          'Remove offline key?',
-          'Remove Offline Key',
-          ButtonType.Danger,
-          'Cancel'
-        )
-        .then(async (shouldRemove: boolean) => {
-          if (shouldRemove) {
-            await handleRemoveOfflineKey();
-          }
-        })
-        .catch((err: string) => {
-          application.alertService.alert(err);
-        });
-    };
-
-    if (!shouldShowOfflineSubscription()) {
-      return null;
-    }
-
-    return (
-      <>
-        <div className="flex items-center justify-between">
-          <div className="flex flex-col mt-3 w-full">
-            <Subtitle>
-              {!hasUserPreviouslyStoredCode && 'Activate'} Offline Subscription
-            </Subtitle>
-            <form onSubmit={handleSubscriptionCodeSubmit}>
-              <div className={'mt-2'}>
-                {!hasUserPreviouslyStoredCode && (
-                  <DecoratedInput
-                    onChange={(code) => setActivationCode(code)}
-                    placeholder={'Offline Subscription Code'}
-                    value={activationCode}
-                    disabled={isSuccessfullyActivated}
-                    className={'mb-3'}
-                  />
-                )}
-              </div>
-              {(isSuccessfullyActivated || isSuccessfullyRemoved) && (
-                <div className={'mt-3 mb-3 info'}>
-                  Your offline subscription code has been successfully{' '}
-                  {isSuccessfullyActivated ? 'activated' : 'removed'}.
-                </div>
-              )}
-              {hasUserPreviouslyStoredCode && (
-                <Button
-                  dangerStyle={true}
-                  label="Remove offline key"
-                  onClick={() => {
-                    handleRemoveClick();
-                  }}
-                />
-              )}
-              {!hasUserPreviouslyStoredCode && !isSuccessfullyActivated && (
-                <Button
-                  label={'Submit'}
-                  variant="primary"
-                  disabled={activationCode === ''}
-                  onClick={(event) => handleSubscriptionCodeSubmit(event)}
-                />
-              )}
-            </form>
-          </div>
-        </div>
-        <HorizontalSeparator classes="mt-8 mb-5" />
-      </>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/Preferences/panes/account/subscription/NoSubscription.tsx b/app/assets/javascripts/components/Preferences/panes/account/subscription/NoSubscription.tsx
deleted file mode 100644
index b10834f69..000000000
--- a/app/assets/javascripts/components/Preferences/panes/account/subscription/NoSubscription.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { FunctionalComponent } from 'preact';
-import { LinkButton, Text } from '@/components/Preferences/components';
-import { Button } from '@/components/Button';
-import { WebApplication } from '@/ui_models/application';
-import { useState } from 'preact/hooks';
-import { loadPurchaseFlowUrl } from '@/components/PurchaseFlow/PurchaseFlowWrapper';
-
-export const NoSubscription: FunctionalComponent<{
-  application: WebApplication;
-}> = ({ application }) => {
-  const [isLoadingPurchaseFlow, setIsLoadingPurchaseFlow] = useState(false);
-  const [purchaseFlowError, setPurchaseFlowError] = useState<
-    string | undefined
-  >(undefined);
-
-  const onPurchaseClick = async () => {
-    const errorMessage =
-      'There was an error when attempting to redirect you to the subscription page.';
-    setIsLoadingPurchaseFlow(true);
-    try {
-      if (!(await loadPurchaseFlowUrl(application))) {
-        setPurchaseFlowError(errorMessage);
-      }
-    } catch (e) {
-      setPurchaseFlowError(errorMessage);
-    } finally {
-      setIsLoadingPurchaseFlow(false);
-    }
-  };
-
-  return (
-    <>
-      <Text>You don't have a Standard Notes subscription yet.</Text>
-      {isLoadingPurchaseFlow && (
-        <Text>Redirecting you to the subscription page...</Text>
-      )}
-      {purchaseFlowError && (
-        <Text className="color-danger">{purchaseFlowError}</Text>
-      )}
-      <div className="flex">
-        <LinkButton
-          className="min-w-20 mt-3 mr-3"
-          label="Learn More"
-          link={window.plansUrl as string}
-        />
-        {application.hasAccount() && (
-          <Button
-            className="min-w-20 mt-3"
-            variant="primary"
-            label="Subscribe"
-            onClick={onPurchaseClick}
-          />
-        )}
-      </div>
-    </>
-  );
-};
diff --git a/app/assets/javascripts/components/Preferences/panes/account/subscription/SubscriptionInformation.tsx b/app/assets/javascripts/components/Preferences/panes/account/subscription/SubscriptionInformation.tsx
deleted file mode 100644
index fab42d9a0..000000000
--- a/app/assets/javascripts/components/Preferences/panes/account/subscription/SubscriptionInformation.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { observer } from 'mobx-react-lite';
-import { SubscriptionState } from '../../../../../ui_models/app_state/subscription_state';
-import { Text } from '@/components/Preferences/components';
-import { Button } from '@/components/Button';
-import { WebApplication } from '@/ui_models/application';
-import { openSubscriptionDashboard } from '@/hooks/manageSubscription';
-
-type Props = {
-  subscriptionState: SubscriptionState;
-  application?: WebApplication;
-};
-
-const StatusText = observer(({ subscriptionState }: Props) => {
-  const {
-    userSubscriptionName,
-    userSubscriptionExpirationDate,
-    isUserSubscriptionExpired,
-    isUserSubscriptionCanceled,
-  } = subscriptionState;
-  const expirationDateString = userSubscriptionExpirationDate?.toLocaleString();
-
-  if (isUserSubscriptionCanceled) {
-    return (
-      <Text className="mt-1">
-        Your{' '}
-        <span className="font-bold">
-          Standard Notes{userSubscriptionName ? ' ' : ''}
-          {userSubscriptionName}
-        </span>{' '}
-        subscription has been canceled{' '}
-        {isUserSubscriptionExpired ? (
-          <span className="font-bold">
-            and expired on {expirationDateString}
-          </span>
-        ) : (
-          <span className="font-bold">
-            but will remain valid until {expirationDateString}
-          </span>
-        )}
-        . You may resubscribe below if you wish.
-      </Text>
-    );
-  }
-
-  if (isUserSubscriptionExpired) {
-    return (
-      <Text className="mt-1">
-        Your{' '}
-        <span className="font-bold">
-          Standard Notes{userSubscriptionName ? ' ' : ''}
-          {userSubscriptionName}
-        </span>{' '}
-        subscription{' '}
-        <span className="font-bold">expired on {expirationDateString}</span>.
-        You may resubscribe below if you wish.
-      </Text>
-    );
-  }
-
-  return (
-    <Text className="mt-1">
-      Your{' '}
-      <span className="font-bold">
-        Standard Notes{userSubscriptionName ? ' ' : ''}
-        {userSubscriptionName}
-      </span>{' '}
-      subscription will be{' '}
-      <span className="font-bold">renewed on {expirationDateString}</span>.
-    </Text>
-  );
-});
-
-export const SubscriptionInformation = observer(
-  ({ subscriptionState, application }: Props) => {
-    const manageSubscription = async () => {
-      openSubscriptionDashboard(application!);
-    };
-
-    return (
-      <>
-        <StatusText subscriptionState={subscriptionState} />
-        <Button
-          className="min-w-20 mt-3 mr-3"
-          variant="normal"
-          label="Manage subscription"
-          onClick={manageSubscription}
-        />
-      </>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/Preferences/panes/backups-segments/index.ts b/app/assets/javascripts/components/Preferences/panes/backups-segments/index.ts
deleted file mode 100644
index a890d9b94..000000000
--- a/app/assets/javascripts/components/Preferences/panes/backups-segments/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './DataBackups';
-export * from './EmailBackups';
-export * from './cloud-backups';
diff --git a/app/assets/javascripts/components/Preferences/panes/extensions-segments/ExtensionItem.tsx b/app/assets/javascripts/components/Preferences/panes/extensions-segments/ExtensionItem.tsx
deleted file mode 100644
index 316ee59a7..000000000
--- a/app/assets/javascripts/components/Preferences/panes/extensions-segments/ExtensionItem.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { FunctionComponent } from 'preact';
-import { SNComponent } from '@standardnotes/snjs';
-import {
-  PreferencesSegment,
-  SubtitleLight,
-  Title,
-} from '@/components/Preferences/components';
-import { Switch } from '@/components/Switch';
-import { WebApplication } from '@/ui_models/application';
-import { useState } from 'preact/hooks';
-import { Button } from '@/components/Button';
-import { RenameExtension } from './RenameExtension';
-
-const UseHosted: FunctionComponent<{
-  offlineOnly: boolean;
-  toggleOfllineOnly: () => void;
-}> = ({ offlineOnly, toggleOfllineOnly }) => (
-  <div className="flex flex-row">
-    <SubtitleLight className="flex-grow">
-      Use hosted when local is unavailable
-    </SubtitleLight>
-    <Switch onChange={toggleOfllineOnly} checked={!offlineOnly} />
-  </div>
-);
-
-export interface ExtensionItemProps {
-  application: WebApplication;
-  extension: SNComponent;
-  first: boolean;
-  latestVersion: string | undefined;
-  uninstall: (extension: SNComponent) => void;
-  toggleActivate?: (extension: SNComponent) => void;
-}
-
-export const ExtensionItem: FunctionComponent<ExtensionItemProps> = ({
-  application,
-  extension,
-  first,
-  uninstall,
-}) => {
-  const [offlineOnly, setOfflineOnly] = useState(
-    extension.offlineOnly ?? false
-  );
-  const [extensionName, setExtensionName] = useState(extension.name);
-
-  const toggleOffllineOnly = () => {
-    const newOfflineOnly = !offlineOnly;
-    setOfflineOnly(newOfflineOnly);
-    application.mutator
-      .changeAndSaveItem(extension, (m: any) => {
-        if (m.content == undefined) m.content = {};
-        m.content.offlineOnly = newOfflineOnly;
-      })
-      .then((item) => {
-        const component = item as SNComponent;
-        setOfflineOnly(component.offlineOnly);
-      })
-      .catch((e) => {
-        console.error(e);
-      });
-  };
-
-  const changeExtensionName = (newName: string) => {
-    setExtensionName(newName);
-    application.mutator
-      .changeAndSaveItem(extension, (m: any) => {
-        if (m.content == undefined) m.content = {};
-        m.content.name = newName;
-      })
-      .then((item) => {
-        const component = item as SNComponent;
-        setExtensionName(component.name);
-      });
-  };
-
-  const localInstallable = extension.package_info.download_url;
-  const isThirParty = application.features.isThirdPartyFeature(
-    extension.identifier
-  );
-
-  return (
-    <PreferencesSegment classes={'mb-5'}>
-      {first && (
-        <>
-          <Title>Extensions</Title>
-        </>
-      )}
-
-      <RenameExtension
-        extensionName={extensionName}
-        changeName={changeExtensionName}
-      />
-      <div className="min-h-2" />
-
-      {isThirParty && localInstallable && (
-        <UseHosted
-          offlineOnly={offlineOnly}
-          toggleOfllineOnly={toggleOffllineOnly}
-        />
-      )}
-
-      <>
-        <div className="min-h-2" />
-        <div className="flex flex-row">
-          <Button
-            className="min-w-20"
-            variant="normal"
-            label="Uninstall"
-            onClick={() => uninstall(extension)}
-          />
-        </div>
-      </>
-    </PreferencesSegment>
-  );
-};
diff --git a/app/assets/javascripts/components/Preferences/panes/extensions-segments/ExtensionsLatestVersions.ts b/app/assets/javascripts/components/Preferences/panes/extensions-segments/ExtensionsLatestVersions.ts
deleted file mode 100644
index 6757dd813..000000000
--- a/app/assets/javascripts/components/Preferences/panes/extensions-segments/ExtensionsLatestVersions.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { WebApplication } from '@/ui_models/application';
-import {
-  SNComponent,
-  ClientDisplayableError,
-  FeatureDescription,
-} from '@standardnotes/snjs';
-import { makeAutoObservable, observable } from 'mobx';
-
-export class ExtensionsLatestVersions {
-  static async load(
-    application: WebApplication
-  ): Promise<ExtensionsLatestVersions | undefined> {
-    const response = await application.getAvailableSubscriptions();
-
-    if (response instanceof ClientDisplayableError) {
-      return undefined;
-    }
-
-    const versionMap: Map<string, string> = new Map();
-    collectFeatures(
-      response.CORE_PLAN?.features as FeatureDescription[],
-      versionMap
-    );
-    collectFeatures(
-      response.PLUS_PLAN?.features as FeatureDescription[],
-      versionMap
-    );
-    collectFeatures(
-      response.PRO_PLAN?.features as FeatureDescription[],
-      versionMap
-    );
-
-    return new ExtensionsLatestVersions(versionMap);
-  }
-
-  constructor(private readonly latestVersionsMap: Map<string, string>) {
-    makeAutoObservable<ExtensionsLatestVersions, 'latestVersionsMap'>(this, {
-      latestVersionsMap: observable.ref,
-    });
-  }
-
-  getVersion(extension: SNComponent): string | undefined {
-    return this.latestVersionsMap.get(extension.package_info.identifier);
-  }
-}
-
-function collectFeatures(
-  features: FeatureDescription[] | undefined,
-  versionMap: Map<string, string>
-) {
-  if (features == undefined) return;
-  for (const feature of features) {
-    versionMap.set(feature.identifier, feature.version!);
-  }
-}
diff --git a/app/assets/javascripts/components/Preferences/panes/extensions-segments/index.ts b/app/assets/javascripts/components/Preferences/panes/extensions-segments/index.ts
deleted file mode 100644
index ada8156e9..000000000
--- a/app/assets/javascripts/components/Preferences/panes/extensions-segments/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './ConfirmCustomExtension';
-export * from './ExtensionItem';
-export * from './ExtensionsLatestVersions';
diff --git a/app/assets/javascripts/components/Preferences/panes/general-segments/Tools.tsx b/app/assets/javascripts/components/Preferences/panes/general-segments/Tools.tsx
deleted file mode 100644
index 8260ce333..000000000
--- a/app/assets/javascripts/components/Preferences/panes/general-segments/Tools.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { HorizontalSeparator } from '@/components/Shared/HorizontalSeparator';
-import { Switch } from '@/components/Switch';
-import {
-  PreferencesGroup,
-  PreferencesSegment,
-  Subtitle,
-  Text,
-  Title,
-} from '@/components/Preferences/components';
-import { WebApplication } from '@/ui_models/application';
-import { PrefKey } from '@standardnotes/snjs';
-import { observer } from 'mobx-react-lite';
-import { FunctionalComponent } from 'preact';
-import { useState } from 'preact/hooks';
-
-type Props = {
-  application: WebApplication;
-};
-
-export const Tools: FunctionalComponent<Props> = observer(
-  ({ application }: Props) => {
-    const [monospaceFont, setMonospaceFont] = useState(() =>
-      application.getPreference(PrefKey.EditorMonospaceEnabled, true)
-    );
-    const [marginResizers, setMarginResizers] = useState(() =>
-      application.getPreference(PrefKey.EditorResizersEnabled, true)
-    );
-
-    const toggleMonospaceFont = () => {
-      setMonospaceFont(!monospaceFont);
-      application.setPreference(PrefKey.EditorMonospaceEnabled, !monospaceFont);
-    };
-
-    const toggleMarginResizers = () => {
-      setMarginResizers(!marginResizers);
-      application.setPreference(PrefKey.EditorResizersEnabled, !marginResizers);
-    };
-
-    return (
-      <PreferencesGroup>
-        <PreferencesSegment>
-          <Title>Tools</Title>
-          <div>
-            <div className="flex items-center justify-between">
-              <div className="flex flex-col">
-                <Subtitle>Monospace Font</Subtitle>
-                <Text>Toggles the font style in the Plain Text editor.</Text>
-              </div>
-              <Switch onChange={toggleMonospaceFont} checked={monospaceFont} />
-            </div>
-            <HorizontalSeparator classes="mt-5 mb-3" />
-            <div className="flex items-center justify-between">
-              <div className="flex flex-col">
-                <Subtitle>Margin Resizers</Subtitle>
-                <Text>Allows left and right editor margins to be resized.</Text>
-              </div>
-              <Switch
-                onChange={toggleMarginResizers}
-                checked={marginResizers}
-              />
-            </div>
-          </div>
-        </PreferencesSegment>
-      </PreferencesGroup>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/Preferences/panes/general-segments/index.ts b/app/assets/javascripts/components/Preferences/panes/general-segments/index.ts
deleted file mode 100644
index dcd7d3af7..000000000
--- a/app/assets/javascripts/components/Preferences/panes/general-segments/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './Tools';
-export * from './Defaults';
-export * from './Labs';
diff --git a/app/assets/javascripts/components/Preferences/panes/index.ts b/app/assets/javascripts/components/Preferences/panes/index.ts
deleted file mode 100644
index 56e97df76..000000000
--- a/app/assets/javascripts/components/Preferences/panes/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './HelpFeedback';
-export * from './Security';
-export * from './AccountPreferences';
-export * from './Listed';
-export * from './General';
diff --git a/app/assets/javascripts/components/Preferences/panes/listed/BlogItem.tsx b/app/assets/javascripts/components/Preferences/panes/listed/BlogItem.tsx
deleted file mode 100644
index 32f6f5bb2..000000000
--- a/app/assets/javascripts/components/Preferences/panes/listed/BlogItem.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { HorizontalSeparator } from '@/components/Shared/HorizontalSeparator';
-import { LinkButton, Subtitle } from '@/components/Preferences/components';
-import { WebApplication } from '@/ui_models/application';
-import { ListedAccount, ListedAccountInfo } from '@standardnotes/snjs';
-import { FunctionalComponent } from 'preact';
-import { useEffect, useState } from 'preact/hooks';
-
-type Props = {
-  account: ListedAccount;
-  showSeparator: boolean;
-  application: WebApplication;
-};
-
-export const ListedAccountItem: FunctionalComponent<Props> = ({
-  account,
-  showSeparator,
-  application,
-}) => {
-  const [isLoading, setIsLoading] = useState(false);
-  const [accountInfo, setAccountInfo] = useState<ListedAccountInfo>();
-
-  useEffect(() => {
-    const loadAccount = async () => {
-      setIsLoading(true);
-      const info = await application.getListedAccountInfo(account);
-      setAccountInfo(info);
-      setIsLoading(false);
-    };
-    loadAccount();
-  }, [account, application]);
-
-  return (
-    <>
-      <Subtitle className="em">{accountInfo?.display_name}</Subtitle>
-      <div className="mb-2" />
-      <div className="flex">
-        {isLoading ? <div className="sk-spinner small info"></div> : null}
-        {accountInfo && (
-          <>
-            <LinkButton
-              className="mr-2"
-              label="Open Blog"
-              link={accountInfo.author_url}
-            />
-            <LinkButton
-              className="mr-2"
-              label="Settings"
-              link={accountInfo.settings_url}
-            />
-          </>
-        )}
-      </div>
-      {showSeparator && <HorizontalSeparator classes="mt-5 mb-3" />}
-    </>
-  );
-};
diff --git a/app/assets/javascripts/components/Preferences/panes/security-segments/Encryption.tsx b/app/assets/javascripts/components/Preferences/panes/security-segments/Encryption.tsx
deleted file mode 100644
index 20604bb1c..000000000
--- a/app/assets/javascripts/components/Preferences/panes/security-segments/Encryption.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { Icon } from '@/components/Icon';
-import {
-  STRING_E2E_ENABLED,
-  STRING_ENC_NOT_ENABLED,
-  STRING_LOCAL_ENC_ENABLED,
-} from '@/strings';
-import { AppState } from '@/ui_models/app_state';
-import { observer } from 'mobx-react-lite';
-import { ComponentChild, FunctionComponent } from 'preact';
-import {
-  PreferencesGroup,
-  PreferencesSegment,
-  Text,
-  Title,
-} from '../../components';
-
-const formatCount = (count: number, itemType: string) =>
-  `${count} / ${count} ${itemType}`;
-
-const EncryptionStatusItem: FunctionComponent<{
-  icon: ComponentChild;
-  status: string;
-}> = ({ icon, status }) => (
-  <div className="w-full rounded py-1.5 px-3 text-input my-1 h-8 flex flex-row items-center bg-contrast no-border focus-within:ring-info">
-    {icon}
-    <div className="min-w-3 min-h-1" />
-    <div className="flex-grow color-text text-sm">{status}</div>
-    <div className="min-w-3 min-h-1" />
-    <Icon className="success min-w-4 min-h-4" type="check-bold" />
-  </div>
-);
-
-const EncryptionEnabled: FunctionComponent<{ appState: AppState }> = observer(
-  ({ appState }) => {
-    const count = appState.accountMenu.structuredNotesAndTagsCount;
-    const notes = formatCount(count.notes, 'notes');
-    const tags = formatCount(count.tags, 'tags');
-    const archived = formatCount(count.archived, 'archived notes');
-    const deleted = formatCount(count.deleted, 'trashed notes');
-
-    const noteIcon = <Icon type="rich-text" className="min-w-5 min-h-5" />;
-    const tagIcon = <Icon type="hashtag" className="min-w-5 min-h-5" />;
-    const archiveIcon = <Icon type="archive" className="min-w-5 min-h-5" />;
-    const trashIcon = <Icon type="trash" className="min-w-5 min-h-5" />;
-    return (
-      <>
-        <div className="flex flex-row pb-1 pt-1.5">
-          <EncryptionStatusItem status={notes} icon={[noteIcon]} />
-          <div className="min-w-3" />
-          <EncryptionStatusItem status={tags} icon={[tagIcon]} />
-        </div>
-        <div className="flex flex-row">
-          <EncryptionStatusItem status={archived} icon={[archiveIcon]} />
-          <div className="min-w-3" />
-          <EncryptionStatusItem status={deleted} icon={[trashIcon]} />
-        </div>
-      </>
-    );
-  }
-);
-
-export const Encryption: FunctionComponent<{ appState: AppState }> = observer(
-  ({ appState }) => {
-    const app = appState.application;
-    const hasUser = app.hasAccount();
-    const hasPasscode = app.hasPasscode();
-    const isEncryptionEnabled = app.isEncryptionAvailable();
-
-    const encryptionStatusString = hasUser
-      ? STRING_E2E_ENABLED
-      : hasPasscode
-      ? STRING_LOCAL_ENC_ENABLED
-      : STRING_ENC_NOT_ENABLED;
-
-    return (
-      <PreferencesGroup>
-        <PreferencesSegment>
-          <Title>Encryption</Title>
-          <Text>{encryptionStatusString}</Text>
-
-          {isEncryptionEnabled && <EncryptionEnabled appState={appState} />}
-        </PreferencesSegment>
-      </PreferencesGroup>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/Preferences/panes/security-segments/Privacy.tsx b/app/assets/javascripts/components/Preferences/panes/security-segments/Privacy.tsx
deleted file mode 100644
index 5ae3843e2..000000000
--- a/app/assets/javascripts/components/Preferences/panes/security-segments/Privacy.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import { HorizontalSeparator } from '@/components/Shared/HorizontalSeparator';
-import { Switch } from '@/components/Switch';
-import {
-  PreferencesGroup,
-  PreferencesSegment,
-  Subtitle,
-  Text,
-  Title,
-} from '@/components/Preferences/components';
-import { WebApplication } from '@/ui_models/application';
-import {
-  MuteSignInEmailsOption,
-  LogSessionUserAgentOption,
-  SettingName,
-} from '@standardnotes/snjs';
-import { observer } from 'mobx-react-lite';
-import { FunctionalComponent } from 'preact';
-import { useCallback, useEffect, useState } from 'preact/hooks';
-import { STRING_FAILED_TO_UPDATE_USER_SETTING } from '@/strings';
-
-type Props = {
-  application: WebApplication;
-};
-
-export const Privacy: FunctionalComponent<Props> = observer(
-  ({ application }: Props) => {
-    const [signInEmailsMutedValue, setSignInEmailsMutedValue] =
-      useState<MuteSignInEmailsOption>(MuteSignInEmailsOption.NotMuted);
-    const [sessionUaLoggingValue, setSessionUaLoggingValue] =
-      useState<LogSessionUserAgentOption>(LogSessionUserAgentOption.Enabled);
-    const [isLoading, setIsLoading] = useState(false);
-
-    const updateSetting = async (
-      settingName: SettingName,
-      payload: string
-    ): Promise<boolean> => {
-      try {
-        await application.settings.updateSetting(settingName, payload, false);
-        return true;
-      } catch (e) {
-        application.alertService.alert(STRING_FAILED_TO_UPDATE_USER_SETTING);
-        return false;
-      }
-    };
-
-    const loadSettings = useCallback(async () => {
-      if (!application.getUser()) {
-        return;
-      }
-      setIsLoading(true);
-
-      try {
-        const userSettings = await application.settings.listSettings();
-        setSignInEmailsMutedValue(
-          userSettings.getSettingValue<MuteSignInEmailsOption>(
-            SettingName.MuteSignInEmails,
-            MuteSignInEmailsOption.NotMuted
-          )
-        );
-        setSessionUaLoggingValue(
-          userSettings.getSettingValue<LogSessionUserAgentOption>(
-            SettingName.LogSessionUserAgent,
-            LogSessionUserAgentOption.Enabled
-          )
-        );
-      } catch (error) {
-        console.error(error);
-      } finally {
-        setIsLoading(false);
-      }
-    }, [application]);
-
-    useEffect(() => {
-      loadSettings();
-    }, [loadSettings]);
-
-    const toggleMuteSignInEmails = async () => {
-      const previousValue = signInEmailsMutedValue;
-      const newValue =
-        previousValue === MuteSignInEmailsOption.Muted
-          ? MuteSignInEmailsOption.NotMuted
-          : MuteSignInEmailsOption.Muted;
-      setSignInEmailsMutedValue(newValue);
-
-      const updateResult = await updateSetting(
-        SettingName.MuteSignInEmails,
-        newValue
-      );
-
-      if (!updateResult) {
-        setSignInEmailsMutedValue(previousValue);
-      }
-    };
-
-    const toggleSessionLogging = async () => {
-      const previousValue = sessionUaLoggingValue;
-      const newValue =
-        previousValue === LogSessionUserAgentOption.Enabled
-          ? LogSessionUserAgentOption.Disabled
-          : LogSessionUserAgentOption.Enabled;
-      setSessionUaLoggingValue(newValue);
-
-      const updateResult = await updateSetting(
-        SettingName.LogSessionUserAgent,
-        newValue
-      );
-
-      if (!updateResult) {
-        setSessionUaLoggingValue(previousValue);
-      }
-    };
-
-    return (
-      <PreferencesGroup>
-        <PreferencesSegment>
-          <Title>Privacy</Title>
-          <div>
-            <div className="flex items-center justify-between">
-              <div className="flex flex-col">
-                <Subtitle>Disable sign-in notification emails</Subtitle>
-                <Text>
-                  Disables email notifications when a new sign-in occurs on your
-                  account. (Email notifications are available to paid
-                  subscribers).
-                </Text>
-              </div>
-              {isLoading ? (
-                <div className={'sk-spinner info small'} />
-              ) : (
-                <Switch
-                  onChange={toggleMuteSignInEmails}
-                  checked={
-                    signInEmailsMutedValue === MuteSignInEmailsOption.Muted
-                  }
-                />
-              )}
-            </div>
-            <HorizontalSeparator classes="mt-5 mb-3" />
-            <div className="flex items-center justify-between">
-              <div className="flex flex-col">
-                <Subtitle>Session user agent logging</Subtitle>
-                <Text>
-                  User agent logging allows you to identify the devices or
-                  browsers signed into your account. For increased privacy, you
-                  can disable this feature, which will remove all saved user
-                  agent values from our server, and disable future logging of
-                  this value.
-                </Text>
-              </div>
-              {isLoading ? (
-                <div className={'sk-spinner info small'} />
-              ) : (
-                <Switch
-                  onChange={toggleSessionLogging}
-                  checked={
-                    sessionUaLoggingValue === LogSessionUserAgentOption.Enabled
-                  }
-                />
-              )}
-            </div>
-          </div>
-        </PreferencesSegment>
-      </PreferencesGroup>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/Preferences/panes/security-segments/Protections.tsx b/app/assets/javascripts/components/Preferences/panes/security-segments/Protections.tsx
deleted file mode 100644
index c0a7a93be..000000000
--- a/app/assets/javascripts/components/Preferences/panes/security-segments/Protections.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-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';
-import {
-  PreferencesGroup,
-  PreferencesSegment,
-  Title,
-  Text,
-} from '@/components/Preferences/components';
-import { Button } from '@/components/Button';
-
-type Props = {
-  application: WebApplication;
-};
-
-export 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 removeUnprotectedSessionBeginObserver = application.addEventObserver(
-      async () => {
-        setProtectionsDisabledUntil(getProtectionsDisabledUntil());
-      },
-      ApplicationEvent.UnprotectedSessionBegan
-    );
-
-    const removeUnprotectedSessionEndObserver = application.addEventObserver(
-      async () => {
-        setProtectionsDisabledUntil(getProtectionsDisabledUntil());
-      },
-      ApplicationEvent.UnprotectedSessionExpired
-    );
-
-    const removeKeyStatusChangedObserver = application.addEventObserver(
-      async () => {
-        setHasProtections(application.hasProtectionSources());
-      },
-      ApplicationEvent.KeyStatusChanged
-    );
-
-    return () => {
-      removeUnprotectedSessionBeginObserver();
-      removeUnprotectedSessionEndObserver();
-      removeKeyStatusChangedObserver();
-    };
-  }, [application, getProtectionsDisabledUntil]);
-
-  if (!hasProtections) {
-    return null;
-  }
-
-  return (
-    <PreferencesGroup>
-      <PreferencesSegment>
-        <Title>Protections</Title>
-        {protectionsDisabledUntil ? (
-          <Text className="info">
-            Unprotected access expires at {protectionsDisabledUntil}.
-          </Text>
-        ) : (
-          <Text className="info">Protections are enabled.</Text>
-        )}
-        <Text className="mt-2">
-          Actions like viewing or searching protected notes, exporting decrypted
-          backups, or revoking an active session require additional
-          authentication such as entering your account password or application
-          passcode.
-        </Text>
-        {protectionsDisabledUntil && (
-          <Button
-            className="mt-3"
-            variant="primary"
-            label="End Unprotected Access"
-            onClick={enableProtections}
-          />
-        )}
-      </PreferencesSegment>
-    </PreferencesGroup>
-  );
-};
diff --git a/app/assets/javascripts/components/Preferences/panes/security-segments/index.ts b/app/assets/javascripts/components/Preferences/panes/security-segments/index.ts
deleted file mode 100644
index 38694cc50..000000000
--- a/app/assets/javascripts/components/Preferences/panes/security-segments/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './Encryption';
-export * from './PasscodeLock';
-export * from './Protections';
diff --git a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/Bullet.tsx b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/Bullet.tsx
deleted file mode 100644
index 830d16887..000000000
--- a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/Bullet.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { FunctionComponent } from 'preact';
-
-export const Bullet: FunctionComponent<{ className?: string }> = ({
-  className = '',
-}) => (
-  <div
-    className={`min-w-1 min-h-1 rounded-full bg-inverted-default ${className} mr-2`}
-  />
-);
diff --git a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/CopyButton.tsx b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/CopyButton.tsx
deleted file mode 100644
index 3f129e9c7..000000000
--- a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/CopyButton.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { FunctionComponent } from 'preact';
-
-import { IconButton } from '../../../IconButton';
-
-import { useState } from 'preact/hooks';
-
-export const CopyButton: FunctionComponent<{ copyValue: string }> = ({
-  copyValue: secretKey,
-}) => {
-  const [isCopied, setCopied] = useState(false);
-  return (
-    <IconButton
-      focusable={false}
-      title="Copy to clipboard"
-      icon={isCopied ? 'check' : 'copy'}
-      className={isCopied ? 'success' : undefined}
-      onClick={() => {
-        navigator?.clipboard?.writeText(secretKey);
-        setCopied(() => true);
-      }}
-    />
-  );
-};
diff --git a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/MfaProps.ts b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/MfaProps.ts
deleted file mode 100644
index eb8b840b8..000000000
--- a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/MfaProps.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { MfaProvider, UserProvider } from '../../providers';
-
-export interface MfaProps {
-  userProvider: UserProvider;
-  mfaProvider: MfaProvider;
-}
diff --git a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorActivationView.tsx b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorActivationView.tsx
deleted file mode 100644
index 5b0446ca3..000000000
--- a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorActivationView.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { TwoFactorActivation } from './TwoFactorActivation';
-import { SaveSecretKey } from './SaveSecretKey';
-import { ScanQRCode } from './ScanQRCode';
-import { Verification } from './Verification';
-import { TwoFactorSuccess } from './TwoFactorSuccess';
-
-export const TwoFactorActivationView: FunctionComponent<{
-  activation: TwoFactorActivation;
-}> = observer(({ activation: act }) => {
-  switch (act.activationStep) {
-    case 'scan-qr-code':
-      return <ScanQRCode activation={act} />;
-    case 'save-secret-key':
-      return <SaveSecretKey activation={act} />;
-    case 'verification':
-      return <Verification activation={act} />;
-    case 'success':
-      return <TwoFactorSuccess activation={act} />;
-  }
-});
diff --git a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorAuthView.tsx b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorAuthView.tsx
deleted file mode 100644
index 46da3bc2e..000000000
--- a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorAuthView.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { FunctionComponent } from 'preact';
-import {
-  Title,
-  Text,
-  PreferencesGroup,
-  PreferencesSegment,
-} from '../../components';
-import { Switch } from '../../../Switch';
-import { observer } from 'mobx-react-lite';
-import { is2FAActivation, is2FADisabled, TwoFactorAuth } from './TwoFactorAuth';
-import { TwoFactorActivationView } from './TwoFactorActivationView';
-
-const TwoFactorTitle: FunctionComponent<{ auth: TwoFactorAuth }> = observer(
-  ({ auth }) => {
-    if (!auth.isLoggedIn()) {
-      return <Title>Two-factor authentication not available</Title>;
-    }
-    if (!auth.isMfaFeatureAvailable()) {
-      return <Title>Two-factor authentication not available</Title>;
-    }
-    return <Title>Two-factor authentication</Title>;
-  }
-);
-
-const TwoFactorDescription: FunctionComponent<{ auth: TwoFactorAuth }> =
-  observer(({ auth }) => {
-    if (!auth.isLoggedIn()) {
-      return <Text>Sign in or register for an account to configure 2FA.</Text>;
-    }
-    if (!auth.isMfaFeatureAvailable()) {
-      return (
-        <Text>
-          A paid subscription plan is required to enable 2FA.{' '}
-          <a target="_blank" href="https://standardnotes.com/features">
-            Learn more
-          </a>
-          .
-        </Text>
-      );
-    }
-    return (
-      <Text>An extra layer of security when logging in to your account.</Text>
-    );
-  });
-
-const TwoFactorSwitch: FunctionComponent<{ auth: TwoFactorAuth }> = observer(
-  ({ auth }) => {
-    if (!(auth.isLoggedIn() && auth.isMfaFeatureAvailable())) {
-      return null;
-    }
-
-    if (auth.status === 'fetching') {
-      return <div class="sk-spinner normal info" />;
-    }
-
-    return (
-      <Switch checked={!is2FADisabled(auth.status)} onChange={auth.toggle2FA} />
-    );
-  }
-);
-
-export const TwoFactorAuthView: FunctionComponent<{
-  auth: TwoFactorAuth;
-}> = observer(({ auth }) => {
-  return (
-    <>
-      <PreferencesGroup>
-        <PreferencesSegment>
-          <div className="flex flex-row items-center">
-            <div className="flex-grow flex flex-col">
-              <TwoFactorTitle auth={auth} />
-              <TwoFactorDescription auth={auth} />
-            </div>
-            <div className="flex flex-col justify-center items-center min-w-15">
-              <TwoFactorSwitch auth={auth} />
-            </div>
-          </div>
-        </PreferencesSegment>
-
-        {auth.errorMessage != null && (
-          <PreferencesSegment>
-            <Text className="color-danger">{auth.errorMessage}</Text>
-          </PreferencesSegment>
-        )}
-      </PreferencesGroup>
-      {auth.status !== 'fetching' && is2FAActivation(auth.status) && (
-        <TwoFactorActivationView activation={auth.status} />
-      )}
-    </>
-  );
-});
diff --git a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/download-secret-key.tsx b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/download-secret-key.tsx
deleted file mode 100644
index a929b6c47..000000000
--- a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/download-secret-key.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-// Temporary implementation until integration
-export function downloadSecretKey(text: string) {
-  const link = document.createElement('a');
-  const blob = new Blob([text], {
-    type: 'text/plain;charset=utf-8',
-  });
-  link.href = window.URL.createObjectURL(blob);
-  link.setAttribute('download', 'standardnotes_2fa_key.txt');
-  document.body.appendChild(link);
-  link.click();
-  link.remove();
-  window.URL.revokeObjectURL(link.href);
-}
diff --git a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/index.tsx b/app/assets/javascripts/components/Preferences/panes/two-factor-auth/index.tsx
deleted file mode 100644
index 4d5cad0ab..000000000
--- a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/index.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { FunctionComponent } from 'preact';
-import { useState } from 'preact/hooks';
-import { MfaProps } from './MfaProps';
-import { TwoFactorAuth } from './TwoFactorAuth';
-import { TwoFactorAuthView } from './TwoFactorAuthView';
-
-export const TwoFactorAuthWrapper: FunctionComponent<MfaProps> = (props) => {
-  const [auth] = useState(
-    () => new TwoFactorAuth(props.mfaProvider, props.userProvider)
-  );
-  auth.fetchStatus();
-  return <TwoFactorAuthView auth={auth} />;
-};
diff --git a/app/assets/javascripts/components/Preferences/providers/MfaProvider.ts b/app/assets/javascripts/components/Preferences/providers/MfaProvider.ts
deleted file mode 100644
index 338ff3131..000000000
--- a/app/assets/javascripts/components/Preferences/providers/MfaProvider.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export interface MfaProvider {
-  isMfaActivated(): Promise<boolean>;
-
-  generateMfaSecret(): Promise<string>;
-
-  getOtpToken(secret: string): Promise<string>;
-
-  enableMfa(secret: string, otpToken: string): Promise<void>;
-
-  disableMfa(): Promise<void>;
-
-  isMfaFeatureAvailable(): boolean;
-}
diff --git a/app/assets/javascripts/components/Preferences/providers/UserProvider.ts b/app/assets/javascripts/components/Preferences/providers/UserProvider.ts
deleted file mode 100644
index 7fad1d76b..000000000
--- a/app/assets/javascripts/components/Preferences/providers/UserProvider.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface UserProvider {
-  getUser(): { uuid: string; email: string } | undefined;
-}
diff --git a/app/assets/javascripts/components/Preferences/providers/index.ts b/app/assets/javascripts/components/Preferences/providers/index.ts
deleted file mode 100644
index db2179e81..000000000
--- a/app/assets/javascripts/components/Preferences/providers/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './MfaProvider';
-export * from './UserProvider';
diff --git a/app/assets/javascripts/components/Premium/index.ts b/app/assets/javascripts/components/Premium/index.ts
deleted file mode 100644
index d24a2c7da..000000000
--- a/app/assets/javascripts/components/Premium/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { usePremiumModal, PremiumModalProvider } from './usePremiumModal';
diff --git a/app/assets/javascripts/components/Premium/usePremiumModal.tsx b/app/assets/javascripts/components/Premium/usePremiumModal.tsx
deleted file mode 100644
index 16cec58aa..000000000
--- a/app/assets/javascripts/components/Premium/usePremiumModal.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { WebApplication } from '@/ui_models/application';
-import { AppState } from '@/ui_models/app_state';
-import { observer } from 'mobx-react-lite';
-import { FunctionalComponent } from 'preact';
-import { useContext } from 'preact/hooks';
-import { createContext } from 'react';
-import { PremiumFeaturesModal } from '../PremiumFeaturesModal';
-
-type PremiumModalContextData = {
-  activate: (featureName: string) => void;
-};
-
-const PremiumModalContext = createContext<PremiumModalContextData | null>(null);
-
-const PremiumModalProvider_ = PremiumModalContext.Provider;
-
-export const usePremiumModal = (): PremiumModalContextData => {
-  const value = useContext(PremiumModalContext);
-
-  if (!value) {
-    throw new Error('invalid PremiumModal context');
-  }
-
-  return value;
-};
-
-interface Props {
-  application: WebApplication;
-  appState: AppState;
-}
-
-export const PremiumModalProvider: FunctionalComponent<Props> = observer(
-  ({ application, appState, children }) => {
-    const featureName = appState.features._premiumAlertFeatureName;
-    const activate = appState.features.showPremiumAlert;
-    const close = appState.features.closePremiumAlert;
-
-    const showModal = !!featureName;
-
-    const hasSubscription = Boolean(
-      appState.subscription.userSubscription &&
-        !appState.subscription.isUserSubscriptionExpired &&
-        !appState.subscription.isUserSubscriptionCanceled
-    );
-
-    return (
-      <>
-        {showModal && (
-          <PremiumFeaturesModal
-            application={application}
-            featureName={featureName}
-            hasSubscription={hasSubscription}
-            onClose={close}
-            showModal={!!featureName}
-          />
-        )}
-        <PremiumModalProvider_ value={{ activate }}>
-          {children}
-        </PremiumModalProvider_>
-      </>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/PurchaseFlow/PurchaseFlowWrapper.tsx b/app/assets/javascripts/components/PurchaseFlow/PurchaseFlowWrapper.tsx
deleted file mode 100644
index aedf3b039..000000000
--- a/app/assets/javascripts/components/PurchaseFlow/PurchaseFlowWrapper.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { WebApplication } from '@/ui_models/application';
-import { AppState } from '@/ui_models/app_state';
-import { getWindowUrlParams, isDesktopApplication } from '@/utils';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { PurchaseFlowView } from './PurchaseFlowView';
-
-export type PurchaseFlowWrapperProps = {
-  appState: AppState;
-  application: WebApplication;
-};
-
-export const getPurchaseFlowUrl = async (
-  application: WebApplication
-): Promise<string | undefined> => {
-  const currentUrl = window.location.origin;
-  const successUrl = isDesktopApplication() ? `standardnotes://` : currentUrl;
-  if (application.noAccount()) {
-    return `${window.purchaseUrl}/offline?&success_url=${successUrl}`;
-  }
-  const token = await application.getNewSubscriptionToken();
-  if (token) {
-    return `${window.purchaseUrl}?subscription_token=${token}&success_url=${successUrl}`;
-  }
-  return undefined;
-};
-
-export const loadPurchaseFlowUrl = async (
-  application: WebApplication
-): Promise<boolean> => {
-  const url = await getPurchaseFlowUrl(application);
-  const params = getWindowUrlParams();
-  const period = params.get('period') ? `&period=${params.get('period')}` : '';
-  const plan = params.get('plan') ? `&plan=${params.get('plan')}` : '';
-  if (url) {
-    window.location.assign(`${url}${period}${plan}`);
-    return true;
-  }
-  return false;
-};
-
-export const PurchaseFlowWrapper: FunctionComponent<PurchaseFlowWrapperProps> =
-  observer(({ appState, application }) => {
-    if (!appState.purchaseFlow.isOpen) {
-      return null;
-    }
-
-    return <PurchaseFlowView appState={appState} application={application} />;
-  });
diff --git a/app/assets/javascripts/components/PurchaseFlow/panes/CreateAccount.tsx b/app/assets/javascripts/components/PurchaseFlow/panes/CreateAccount.tsx
deleted file mode 100644
index 649996905..000000000
--- a/app/assets/javascripts/components/PurchaseFlow/panes/CreateAccount.tsx
+++ /dev/null
@@ -1,220 +0,0 @@
-import { Button } from '@/components/Button';
-import { WebApplication } from '@/ui_models/application';
-import { AppState } from '@/ui_models/app_state';
-import { PurchaseFlowPane } from '@/ui_models/app_state/purchase_flow_state';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { useEffect, useRef, useState } from 'preact/hooks';
-import { FloatingLabelInput } from '@/components/FloatingLabelInput';
-import { isEmailValid } from '@/utils';
-import { loadPurchaseFlowUrl } from '../PurchaseFlowWrapper';
-import {
-  BlueDotIcon,
-  CircleIcon,
-  DiamondIcon,
-  CreateAccountIllustration,
-} from '@standardnotes/stylekit';
-
-type Props = {
-  appState: AppState;
-  application: WebApplication;
-};
-
-export const CreateAccount: FunctionComponent<Props> = observer(
-  ({ appState, application }) => {
-    const { setCurrentPane } = appState.purchaseFlow;
-    const [email, setEmail] = useState('');
-    const [password, setPassword] = useState('');
-    const [confirmPassword, setConfirmPassword] = useState('');
-    const [isCreatingAccount, setIsCreatingAccount] = useState(false);
-    const [isEmailInvalid, setIsEmailInvalid] = useState(false);
-    const [isPasswordNotMatching, setIsPasswordNotMatching] = useState(false);
-
-    const emailInputRef = useRef<HTMLInputElement>(null);
-    const passwordInputRef = useRef<HTMLInputElement>(null);
-    const confirmPasswordInputRef = useRef<HTMLInputElement>(null);
-
-    useEffect(() => {
-      if (emailInputRef.current) emailInputRef.current?.focus();
-    }, []);
-
-    const handleEmailChange = (e: Event) => {
-      if (e.target instanceof HTMLInputElement) {
-        setEmail(e.target.value);
-        setIsEmailInvalid(false);
-      }
-    };
-
-    const handlePasswordChange = (e: Event) => {
-      if (e.target instanceof HTMLInputElement) {
-        setPassword(e.target.value);
-      }
-    };
-
-    const handleConfirmPasswordChange = (e: Event) => {
-      if (e.target instanceof HTMLInputElement) {
-        setConfirmPassword(e.target.value);
-        setIsPasswordNotMatching(false);
-      }
-    };
-
-    const handleSignInInstead = () => {
-      setCurrentPane(PurchaseFlowPane.SignIn);
-    };
-
-    const subscribeWithoutAccount = () => {
-      loadPurchaseFlowUrl(application).catch((err) => {
-        console.error(err);
-        application.alertService.alert(err);
-      });
-    };
-
-    const handleCreateAccount = async () => {
-      if (!email) {
-        emailInputRef?.current?.focus();
-        return;
-      }
-
-      if (!isEmailValid(email)) {
-        setIsEmailInvalid(true);
-        emailInputRef?.current?.focus();
-        return;
-      }
-
-      if (!password) {
-        passwordInputRef?.current?.focus();
-        return;
-      }
-
-      if (!confirmPassword) {
-        confirmPasswordInputRef?.current?.focus();
-        return;
-      }
-
-      if (password !== confirmPassword) {
-        setConfirmPassword('');
-        setIsPasswordNotMatching(true);
-        confirmPasswordInputRef?.current?.focus();
-        return;
-      }
-
-      setIsCreatingAccount(true);
-
-      try {
-        const response = await application.register(email, password);
-        if (response.error || response.data?.error) {
-          throw new Error(
-            response.error?.message || response.data?.error?.message
-          );
-        } else {
-          loadPurchaseFlowUrl(application).catch((err) => {
-            console.error(err);
-            application.alertService.alert(err);
-          });
-        }
-      } catch (err) {
-        console.error(err);
-        application.alertService.alert(err as string);
-      } finally {
-        setIsCreatingAccount(false);
-      }
-    };
-
-    return (
-      <div className="flex items-center">
-        <CircleIcon className="absolute w-8 h-8 top-40% -left-28" />
-        <BlueDotIcon className="absolute w-4 h-4 top-35% -left-10" />
-        <DiamondIcon className="absolute w-26 h-26 -bottom-5 left-0 -translate-x-1/2 -z-index-1" />
-
-        <CircleIcon className="absolute w-8 h-8 bottom-35% -right-20" />
-        <BlueDotIcon className="absolute w-4 h-4 bottom-25% -right-10" />
-        <DiamondIcon className="absolute w-18 h-18 top-0 -right-2 translate-x-1/2 -z-index-1" />
-
-        <div className="mr-12 md:mr-0">
-          <h1 className="mt-0 mb-2 text-2xl">Create your free account</h1>
-          <div className="mb-4 font-medium text-sm">
-            to continue to Standard Notes.
-          </div>
-          <form onSubmit={handleCreateAccount}>
-            <div className="flex flex-col">
-              <FloatingLabelInput
-                className={`min-w-90 xs:min-w-auto ${
-                  isEmailInvalid ? 'mb-2' : 'mb-4'
-                }`}
-                id="purchase-sign-in-email"
-                type="email"
-                label="Email"
-                value={email}
-                onChange={handleEmailChange}
-                ref={emailInputRef}
-                disabled={isCreatingAccount}
-                isInvalid={isEmailInvalid}
-              />
-              {isEmailInvalid ? (
-                <div className="color-dark-red mb-4">
-                  Please provide a valid email.
-                </div>
-              ) : null}
-              <FloatingLabelInput
-                className="min-w-90 xs:min-w-auto mb-4"
-                id="purchase-create-account-password"
-                type="password"
-                label="Password"
-                value={password}
-                onChange={handlePasswordChange}
-                ref={passwordInputRef}
-                disabled={isCreatingAccount}
-              />
-              <FloatingLabelInput
-                className={`min-w-90 xs:min-w-auto ${
-                  isPasswordNotMatching ? 'mb-2' : 'mb-4'
-                }`}
-                id="create-account-confirm"
-                type="password"
-                label="Repeat password"
-                value={confirmPassword}
-                onChange={handleConfirmPasswordChange}
-                ref={confirmPasswordInputRef}
-                disabled={isCreatingAccount}
-                isInvalid={isPasswordNotMatching}
-              />
-              {isPasswordNotMatching ? (
-                <div className="color-dark-red mb-4">
-                  Passwords don't match. Please try again.
-                </div>
-              ) : null}
-            </div>
-          </form>
-          <div className="flex xs:flex-col-reverse xs:items-start items-center justify-between">
-            <div className="flex flex-col">
-              <button
-                onClick={handleSignInInstead}
-                disabled={isCreatingAccount}
-                className="flex items-start p-0 mb-2 bg-default border-0 font-medium color-info cursor-pointer hover:underline"
-              >
-                Sign in instead
-              </button>
-              <button
-                onClick={subscribeWithoutAccount}
-                disabled={isCreatingAccount}
-                className="flex items-start p-0 bg-default border-0 font-medium color-info cursor-pointer hover:underline"
-              >
-                Subscribe without account
-              </button>
-            </div>
-            <Button
-              className="py-2.5 xs:mb-4"
-              variant="primary"
-              label={
-                isCreatingAccount ? 'Creating account...' : 'Create account'
-              }
-              onClick={handleCreateAccount}
-              disabled={isCreatingAccount}
-            />
-          </div>
-        </div>
-        <CreateAccountIllustration className="md:hidden" />
-      </div>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/PurchaseFlow/panes/SignIn.tsx b/app/assets/javascripts/components/PurchaseFlow/panes/SignIn.tsx
deleted file mode 100644
index 5c6e3e885..000000000
--- a/app/assets/javascripts/components/PurchaseFlow/panes/SignIn.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import { Button } from '@/components/Button';
-import { WebApplication } from '@/ui_models/application';
-import { AppState } from '@/ui_models/app_state';
-import { PurchaseFlowPane } from '@/ui_models/app_state/purchase_flow_state';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { useEffect, useRef, useState } from 'preact/hooks';
-import { FloatingLabelInput } from '@/components/FloatingLabelInput';
-import { isEmailValid } from '@/utils';
-import { loadPurchaseFlowUrl } from '../PurchaseFlowWrapper';
-import { BlueDotIcon, CircleIcon, DiamondIcon } from '@standardnotes/stylekit';
-
-type Props = {
-  appState: AppState;
-  application: WebApplication;
-};
-
-export const SignIn: FunctionComponent<Props> = observer(
-  ({ appState, application }) => {
-    const { setCurrentPane } = appState.purchaseFlow;
-    const [email, setEmail] = useState('');
-    const [password, setPassword] = useState('');
-    const [isSigningIn, setIsSigningIn] = useState(false);
-    const [isEmailInvalid, setIsEmailInvalid] = useState(false);
-    const [isPasswordInvalid, setIsPasswordInvalid] = useState(false);
-    const [otherErrorMessage, setOtherErrorMessage] = useState('');
-
-    const emailInputRef = useRef<HTMLInputElement>(null);
-    const passwordInputRef = useRef<HTMLInputElement>(null);
-
-    useEffect(() => {
-      if (emailInputRef.current) emailInputRef.current?.focus();
-    }, []);
-
-    const handleEmailChange = (e: Event) => {
-      if (e.target instanceof HTMLInputElement) {
-        setEmail(e.target.value);
-        setIsEmailInvalid(false);
-      }
-    };
-
-    const handlePasswordChange = (e: Event) => {
-      if (e.target instanceof HTMLInputElement) {
-        setPassword(e.target.value);
-        setIsPasswordInvalid(false);
-        setOtherErrorMessage('');
-      }
-    };
-
-    const handleCreateAccountInstead = () => {
-      if (isSigningIn) return;
-      setCurrentPane(PurchaseFlowPane.CreateAccount);
-    };
-
-    const handleSignIn = async () => {
-      if (!email) {
-        emailInputRef?.current?.focus();
-        return;
-      }
-
-      if (!isEmailValid(email)) {
-        setIsEmailInvalid(true);
-        emailInputRef?.current?.focus();
-        return;
-      }
-
-      if (!password) {
-        passwordInputRef?.current?.focus();
-        return;
-      }
-
-      setIsSigningIn(true);
-
-      try {
-        const response = await application.signIn(email, password);
-        if (response.error || response.data?.error) {
-          throw new Error(
-            response.error?.message || response.data?.error?.message
-          );
-        } else {
-          loadPurchaseFlowUrl(application).catch((err) => {
-            console.error(err);
-            application.alertService.alert(err);
-          });
-        }
-      } catch (err) {
-        console.error(err);
-        if ((err as Error).toString().includes('Invalid email or password')) {
-          setIsSigningIn(false);
-          setIsEmailInvalid(true);
-          setIsPasswordInvalid(true);
-          setOtherErrorMessage('Invalid email or password.');
-          setPassword('');
-        } else {
-          application.alertService.alert(err as string);
-        }
-      }
-    };
-
-    return (
-      <div className="flex items-center">
-        <CircleIcon className="absolute w-8 h-8 top-35% -left-56" />
-        <BlueDotIcon className="absolute w-4 h-4 top-30% -left-40" />
-        <DiamondIcon className="absolute w-26 h-26 -bottom-5 left-0 -translate-x-1/2 -z-index-1" />
-
-        <CircleIcon className="absolute w-8 h-8 bottom-30% -right-56" />
-        <BlueDotIcon className="absolute w-4 h-4 bottom-20% -right-44" />
-        <DiamondIcon className="absolute w-18 h-18 top-0 -right-2 translate-x-1/2 -z-index-1" />
-
-        <div>
-          <h1 className="mt-0 mb-2 text-2xl">Sign in</h1>
-          <div className="mb-4 font-medium text-sm">
-            to continue to Standard Notes.
-          </div>
-          <form onSubmit={handleSignIn}>
-            <div className="flex flex-col">
-              <FloatingLabelInput
-                className={`min-w-90 xs:min-w-auto ${
-                  isEmailInvalid && !otherErrorMessage ? 'mb-2' : 'mb-4'
-                }`}
-                id="purchase-sign-in-email"
-                type="email"
-                label="Email"
-                value={email}
-                onChange={handleEmailChange}
-                ref={emailInputRef}
-                disabled={isSigningIn}
-                isInvalid={isEmailInvalid}
-              />
-              {isEmailInvalid && !otherErrorMessage ? (
-                <div className="color-dark-red mb-4">
-                  Please provide a valid email.
-                </div>
-              ) : null}
-              <FloatingLabelInput
-                className={`min-w-90 xs:min-w-auto ${
-                  otherErrorMessage ? 'mb-2' : 'mb-4'
-                }`}
-                id="purchase-sign-in-password"
-                type="password"
-                label="Password"
-                value={password}
-                onChange={handlePasswordChange}
-                ref={passwordInputRef}
-                disabled={isSigningIn}
-                isInvalid={isPasswordInvalid}
-              />
-              {otherErrorMessage ? (
-                <div className="color-dark-red mb-4">{otherErrorMessage}</div>
-              ) : null}
-            </div>
-            <Button
-              className={`${isSigningIn ? 'min-w-30' : 'min-w-24'} py-2.5 mb-5`}
-              variant="primary"
-              label={isSigningIn ? 'Signing in...' : 'Sign in'}
-              onClick={handleSignIn}
-              disabled={isSigningIn}
-            />
-          </form>
-          <div className="text-sm font-medium color-grey-1">
-            Don’t have an account yet?{' '}
-            <a
-              className={`color-info ${
-                isSigningIn ? 'cursor-not-allowed' : 'cursor-pointer '
-              }`}
-              onClick={handleCreateAccountInstead}
-            >
-              Create account
-            </a>
-          </div>
-        </div>
-      </div>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/RevisionHistoryModal/RemoteHistoryList.tsx b/app/assets/javascripts/components/RevisionHistoryModal/RemoteHistoryList.tsx
deleted file mode 100644
index 9399099ba..000000000
--- a/app/assets/javascripts/components/RevisionHistoryModal/RemoteHistoryList.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { WebApplication } from '@/ui_models/application';
-import { RevisionListEntry } from '@standardnotes/snjs';
-import { observer } from 'mobx-react-lite';
-import { Fragment, FunctionComponent } from 'preact';
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'preact/hooks';
-import { Icon } from '../Icon';
-import { useListKeyboardNavigation } from '../utils';
-import { HistoryListItem } from './HistoryListItem';
-import { previewHistoryEntryTitle, RemoteRevisionListGroup } from './utils';
-
-type RemoteHistoryListProps = {
-  application: WebApplication;
-  remoteHistory: RemoteRevisionListGroup[] | undefined;
-  isFetchingRemoteHistory: boolean;
-  fetchAndSetRemoteRevision: (
-    revisionListEntry: RevisionListEntry
-  ) => Promise<void>;
-};
-
-export const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> =
-  observer(
-    ({
-      application,
-      remoteHistory,
-      isFetchingRemoteHistory,
-      fetchAndSetRemoteRevision,
-    }) => {
-      const remoteHistoryListRef = useRef<HTMLDivElement>(null);
-
-      useListKeyboardNavigation(remoteHistoryListRef);
-
-      const remoteHistoryLength = useMemo(
-        () => remoteHistory?.map((group) => group.entries).flat().length,
-        [remoteHistory]
-      );
-
-      const [selectedEntryUuid, setSelectedEntryUuid] = useState('');
-
-      const firstEntry = useMemo(() => {
-        return remoteHistory?.find((group) => group.entries?.length)
-          ?.entries?.[0];
-      }, [remoteHistory]);
-
-      const selectFirstEntry = useCallback(() => {
-        if (firstEntry) {
-          setSelectedEntryUuid(firstEntry.uuid);
-          fetchAndSetRemoteRevision(firstEntry);
-        }
-      }, [fetchAndSetRemoteRevision, firstEntry]);
-
-      useEffect(() => {
-        if (firstEntry && !selectedEntryUuid.length) {
-          selectFirstEntry();
-        }
-      }, [
-        fetchAndSetRemoteRevision,
-        firstEntry,
-        remoteHistory,
-        selectFirstEntry,
-        selectedEntryUuid.length,
-      ]);
-
-      return (
-        <div
-          className={`flex flex-col w-full h-full focus:shadow-none ${
-            isFetchingRemoteHistory || !remoteHistoryLength
-              ? 'items-center justify-center'
-              : ''
-          }`}
-          ref={remoteHistoryListRef}
-        >
-          {isFetchingRemoteHistory && (
-            <div className="sk-spinner w-5 h-5 spinner-info"></div>
-          )}
-          {remoteHistory?.map((group) =>
-            group.entries && group.entries.length ? (
-              <Fragment key={group.title}>
-                <div className="px-3 mt-2.5 mb-1 font-semibold color-text uppercase color-grey-0 select-none">
-                  {group.title}
-                </div>
-                {group.entries.map((entry) => (
-                  <HistoryListItem
-                    key={entry.uuid}
-                    isSelected={selectedEntryUuid === entry.uuid}
-                    onClick={() => {
-                      setSelectedEntryUuid(entry.uuid);
-                      fetchAndSetRemoteRevision(entry);
-                    }}
-                  >
-                    <div className="flex flex-grow items-center justify-between">
-                      <div>{previewHistoryEntryTitle(entry)}</div>
-                      {!application.features.hasMinimumRole(
-                        entry.required_role
-                      ) && <Icon type="premium-feature" />}
-                    </div>
-                  </HistoryListItem>
-                ))}
-              </Fragment>
-            ) : null
-          )}
-          {!remoteHistoryLength && !isFetchingRemoteHistory && (
-            <div className="color-grey-0 select-none">
-              No remote history found
-            </div>
-          )}
-        </div>
-      );
-    }
-  );
diff --git a/app/assets/javascripts/components/RevisionHistoryModal/SelectedRevisionContent.tsx b/app/assets/javascripts/components/RevisionHistoryModal/SelectedRevisionContent.tsx
deleted file mode 100644
index e0a4a3388..000000000
--- a/app/assets/javascripts/components/RevisionHistoryModal/SelectedRevisionContent.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { WebApplication } from '@/ui_models/application';
-import { AppState } from '@/ui_models/app_state';
-import { HistoryEntry, SNComponent, SNNote } from '@standardnotes/snjs';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { useEffect, useMemo } from 'preact/hooks';
-import { ComponentView } from '../ComponentView';
-import { LegacyHistoryEntry } from './utils';
-
-const ABSOLUTE_CENTER_CLASSNAME =
-  'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2';
-
-type SelectedRevisionContentProps = {
-  application: WebApplication;
-  appState: AppState;
-  selectedRevision: HistoryEntry | LegacyHistoryEntry;
-  editorForCurrentNote: SNComponent | undefined;
-  templateNoteForRevision: SNNote;
-};
-
-export const SelectedRevisionContent: FunctionComponent<SelectedRevisionContentProps> =
-  observer(
-    ({
-      application,
-      appState,
-      selectedRevision,
-      editorForCurrentNote,
-      templateNoteForRevision,
-    }) => {
-      const componentViewer = useMemo(() => {
-        if (!editorForCurrentNote) {
-          return undefined;
-        }
-
-        const componentViewer =
-          application.componentManager.createComponentViewer(
-            editorForCurrentNote
-          );
-        componentViewer.setReadonly(true);
-        componentViewer.lockReadonly = true;
-        componentViewer.overrideContextItem = templateNoteForRevision;
-        return componentViewer;
-      }, [
-        application.componentManager,
-        editorForCurrentNote,
-        templateNoteForRevision,
-      ]);
-
-      useEffect(() => {
-        return () => {
-          if (componentViewer) {
-            application.componentManager.destroyComponentViewer(
-              componentViewer
-            );
-          }
-        };
-      }, [application.componentManager, componentViewer]);
-
-      return (
-        <div className="flex flex-col h-full overflow-hidden">
-          <div className="p-4 text-base font-bold w-full">
-            <div className="title">
-              {selectedRevision.payload.content.title}
-            </div>
-          </div>
-          {!componentViewer && (
-            <div className="relative flex-grow min-h-0 overflow-hidden">
-              {selectedRevision.payload.content.text.length ? (
-                <textarea
-                  readOnly={true}
-                  className="w-full h-full resize-none p-4 pt-0 border-0 bg-default color-text text-editor font-editor"
-                >
-                  {selectedRevision.payload.content.text}
-                </textarea>
-              ) : (
-                <div className={`color-grey-0 ${ABSOLUTE_CENTER_CLASSNAME}`}>
-                  Empty note.
-                </div>
-              )}
-            </div>
-          )}
-          {componentViewer && (
-            <div className="component-view">
-              <ComponentView
-                key={componentViewer.identifier}
-                componentViewer={componentViewer}
-                application={application}
-                appState={appState}
-              />
-            </div>
-          )}
-        </div>
-      );
-    }
-  );
diff --git a/app/assets/javascripts/components/RevisionPreviewModal.tsx b/app/assets/javascripts/components/RevisionPreviewModal.tsx
deleted file mode 100644
index 204f65e1a..000000000
--- a/app/assets/javascripts/components/RevisionPreviewModal.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-import { WebApplication } from '@/ui_models/application';
-import {
-  ContentType,
-  PayloadSource,
-  SNNote,
-  ComponentViewer,
-  NoteContent,
-} from '@standardnotes/snjs';
-import { confirmDialog } from '@/services/alertService';
-import { STRING_RESTORE_LOCKED_ATTEMPT } from '@/strings';
-import { PureComponent } from './Abstract/PureComponent';
-import { ComponentView } from './ComponentView';
-
-interface Props {
-  application: WebApplication;
-  content: NoteContent;
-  title?: string;
-  uuid: string;
-}
-
-type State = {
-  componentViewer?: ComponentViewer;
-};
-
-export class RevisionPreviewModal extends PureComponent<Props, State> {
-  private originalNote!: SNNote;
-
-  constructor(props: Props) {
-    super(props, props.application);
-  }
-
-  async componentDidMount(): Promise<void> {
-    super.componentDidMount();
-
-    const templateNote = (await this.application.mutator.createTemplateItem(
-      ContentType.Note,
-      this.props.content
-    )) as SNNote;
-
-    this.originalNote = this.application.items.findItem(
-      this.props.uuid
-    ) as SNNote;
-
-    const component = this.application.componentManager.editorForNote(
-      this.originalNote
-    );
-    if (component) {
-      const componentViewer =
-        this.application.componentManager.createComponentViewer(component);
-      componentViewer.setReadonly(true);
-      componentViewer.lockReadonly = true;
-      componentViewer.overrideContextItem = templateNote;
-      this.setState({ componentViewer });
-    }
-  }
-
-  componentWillUnmount(): void {
-    if (this.state.componentViewer) {
-      this.application.componentManager.destroyComponentViewer(
-        this.state.componentViewer
-      );
-    }
-    super.componentWillUnmount();
-  }
-
-  restore = (asCopy: boolean) => {
-    const run = async () => {
-      if (asCopy) {
-        await this.application.mutator.duplicateItem(this.originalNote, {
-          ...this.props.content,
-          title: this.props.content.title
-            ? this.props.content.title + ' (copy)'
-            : undefined,
-        });
-      } else {
-        this.application.mutator.changeAndSaveItem(
-          this.originalNote,
-          (mutator) => {
-            mutator.unsafe_setCustomContent(this.props.content);
-          },
-          true,
-          PayloadSource.RemoteActionRetrieved
-        );
-      }
-      this.dismiss();
-    };
-
-    if (!asCopy) {
-      if (this.originalNote.locked) {
-        this.application.alertService.alert(STRING_RESTORE_LOCKED_ATTEMPT);
-        return;
-      }
-      confirmDialog({
-        text: "Are you sure you want to replace the current note's contents with what you see in this preview?",
-        confirmButtonStyle: 'danger',
-      }).then((confirmed) => {
-        if (confirmed) {
-          run();
-        }
-      });
-    } else {
-      run();
-    }
-  };
-
-  dismiss = ($event?: Event) => {
-    $event?.stopPropagation();
-    this.dismissModal();
-  };
-
-  render() {
-    return (
-      <div className="sn-component">
-        <div id="item-preview-modal" className="sk-modal medium">
-          <div className="sk-modal-background" />
-          <div className="sk-modal-content">
-            <div className="sn-component">
-              <div className="sk-panel">
-                <div className="sk-panel-header">
-                  <div>
-                    <div className="sk-panel-header-title">Preview</div>
-                    {this.props.title && (
-                      <div className="sk-subtitle neutral mt-1">
-                        {this.props.title}
-                      </div>
-                    )}
-                  </div>
-
-                  <div className="sk-horizontal-group">
-                    <a
-                      onClick={() => this.restore(false)}
-                      className="sk-a info close-button"
-                    >
-                      Restore
-                    </a>
-                    <a
-                      onClick={() => this.restore(true)}
-                      className="sk-a info close-button"
-                    >
-                      Restore as copy
-                    </a>
-                    <a
-                      onClick={this.dismiss}
-                      className="sk-a info close-button"
-                    >
-                      Close
-                    </a>
-                  </div>
-                </div>
-
-                {!this.state.componentViewer && (
-                  <div className="sk-panel-content selectable">
-                    <div className="sk-h2">{this.props.content.title}</div>
-                    <p
-                      style="white-space: pre-wrap; font-size: 16px;"
-                      className="normal sk-p"
-                    >
-                      {this.props.content.text}
-                    </p>
-                  </div>
-                )}
-
-                {this.state.componentViewer && (
-                  <>
-                    <div
-                      style="height: auto; flex-grow: 0"
-                      className="sk-panel-content sk-h2"
-                    >
-                      {this.props.content.title}
-                    </div>
-                    <div className="component-view">
-                      <ComponentView
-                        componentViewer={this.state.componentViewer}
-                        application={this.application}
-                        appState={this.appState}
-                      />
-                    </div>
-                  </>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
diff --git a/app/assets/javascripts/components/RoundIconButton.tsx b/app/assets/javascripts/components/RoundIconButton.tsx
deleted file mode 100644
index 241810809..000000000
--- a/app/assets/javascripts/components/RoundIconButton.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { FunctionComponent } from 'preact';
-import { Icon } from './Icon';
-import { IconType } from '@standardnotes/snjs';
-
-type ButtonType = 'normal' | 'primary';
-
-interface Props {
-  /**
-   * onClick - preventDefault is handled within the component
-   */
-  onClick: () => void;
-
-  type: ButtonType;
-
-  className?: string;
-
-  icon: IconType;
-}
-
-/**
- * IconButton component with an icon
- * preventDefault is already handled within the component
- */
-export const RoundIconButton: FunctionComponent<Props> = ({
-  onClick,
-  type,
-  className,
-  icon: iconType,
-}) => {
-  const click = (e: MouseEvent) => {
-    e.preventDefault();
-    onClick();
-  };
-  const classes = type === 'primary' ? 'info ' : '';
-  return (
-    <button
-      className={`sn-icon-button ${classes} ${className ?? ''}`}
-      onClick={click}
-    >
-      <Icon type={iconType} />
-    </button>
-  );
-};
diff --git a/app/assets/javascripts/components/Tags/RootTagDropZone.tsx b/app/assets/javascripts/components/Tags/RootTagDropZone.tsx
deleted file mode 100644
index 35fc6e5a4..000000000
--- a/app/assets/javascripts/components/Tags/RootTagDropZone.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Icon } from '@/components/Icon';
-import { usePremiumModal } from '@/components/Premium';
-import { FeaturesState } from '@/ui_models/app_state/features_state';
-import { TagsState } from '@/ui_models/app_state/tags_state';
-import { observer } from 'mobx-react-lite';
-import { useDrop } from 'react-dnd';
-import { DropItem, DropProps, ItemTypes } from './dragndrop';
-
-type Props = {
-  tagsState: TagsState;
-  featuresState: FeaturesState;
-};
-
-export const RootTagDropZone: React.FC<Props> = observer(({ tagsState }) => {
-  const premiumModal = usePremiumModal();
-
-  const [{ isOver, canDrop }, dropRef] = useDrop<DropItem, void, DropProps>(
-    () => ({
-      accept: ItemTypes.TAG,
-      canDrop: (item) => {
-        return tagsState.hasParent(item.uuid);
-      },
-      drop: (item) => {
-        tagsState.assignParent(item.uuid, undefined);
-      },
-      collect: (monitor) => ({
-        isOver: !!monitor.isOver(),
-        canDrop: !!monitor.canDrop(),
-      }),
-    }),
-    [tagsState, premiumModal]
-  );
-
-  return (
-    <div
-      ref={dropRef}
-      className={`root-drop ${canDrop ? 'active' : ''} ${
-        isOver ? 'is-drag-over' : ''
-      }`}
-    >
-      <Icon className="color-neutral" type="link-off" />
-      <p className="content">
-        Move the tag here to <br />
-        remove it from its folder.
-      </p>
-    </div>
-  );
-});
diff --git a/app/assets/javascripts/components/Tags/SmartViewsList.tsx b/app/assets/javascripts/components/Tags/SmartViewsList.tsx
deleted file mode 100644
index 16526d087..000000000
--- a/app/assets/javascripts/components/Tags/SmartViewsList.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { AppState } from '@/ui_models/app_state';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { SmartViewsListItem } from './SmartViewsListItem';
-
-type Props = {
-  appState: AppState;
-};
-
-export const SmartViewsList: FunctionComponent<Props> = observer(
-  ({ appState }) => {
-    const allViews = appState.tags.smartViews;
-
-    return (
-      <>
-        {allViews.map((view) => {
-          return (
-            <SmartViewsListItem
-              key={view.uuid}
-              view={view}
-              tagsState={appState.tags}
-              features={appState.features}
-            />
-          );
-        })}
-      </>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/Tags/SmartViewsListItem.tsx b/app/assets/javascripts/components/Tags/SmartViewsListItem.tsx
deleted file mode 100644
index 0b8f22c3e..000000000
--- a/app/assets/javascripts/components/Tags/SmartViewsListItem.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-import { Icon } from '@/components/Icon';
-import { FeaturesState } from '@/ui_models/app_state/features_state';
-import { TagsState } from '@/ui_models/app_state/tags_state';
-import '@reach/tooltip/styles.css';
-import {
-  SmartView,
-  SystemViewId,
-  IconType,
-  isSystemView,
-} from '@standardnotes/snjs';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
-
-type Props = {
-  view: SmartView;
-  tagsState: TagsState;
-  features: FeaturesState;
-};
-
-const PADDING_BASE_PX = 14;
-const PADDING_PER_LEVEL_PX = 21;
-
-const smartViewIconType = (view: SmartView): IconType => {
-  if (view.uuid === SystemViewId.AllNotes) {
-    return 'notes';
-  }
-  if (view.uuid === SystemViewId.ArchivedNotes) {
-    return 'archive';
-  }
-  if (view.uuid === SystemViewId.TrashedNotes) {
-    return 'trash';
-  }
-  if (view.uuid === SystemViewId.UntaggedNotes) {
-    return 'hashtag-off';
-  }
-
-  return 'hashtag';
-};
-
-export const SmartViewsListItem: FunctionComponent<Props> = observer(
-  ({ view, tagsState }) => {
-    const [title, setTitle] = useState(view.title || '');
-    const inputRef = useRef<HTMLInputElement>(null);
-
-    const level = 0;
-    const isSelected = tagsState.selected === view;
-    const isEditing = tagsState.editingTag === view;
-
-    useEffect(() => {
-      setTitle(view.title || '');
-    }, [setTitle, view]);
-
-    const selectCurrentTag = useCallback(() => {
-      tagsState.selected = view;
-    }, [tagsState, view]);
-
-    const onBlur = useCallback(() => {
-      tagsState.save(view, title);
-      setTitle(view.title);
-    }, [tagsState, view, title, setTitle]);
-
-    const onInput = useCallback(
-      (e: Event) => {
-        const value = (e.target as HTMLInputElement).value;
-        setTitle(value);
-      },
-      [setTitle]
-    );
-
-    const onKeyUp = useCallback(
-      (e: KeyboardEvent) => {
-        if (e.code === 'Enter') {
-          inputRef.current?.blur();
-          e.preventDefault();
-        }
-      },
-      [inputRef]
-    );
-
-    useEffect(() => {
-      if (isEditing) {
-        inputRef.current?.focus();
-      }
-    }, [inputRef, isEditing]);
-
-    const onClickRename = useCallback(() => {
-      tagsState.editingTag = view;
-    }, [tagsState, view]);
-
-    const onClickSave = useCallback(() => {
-      inputRef.current?.blur();
-    }, [inputRef]);
-
-    const onClickDelete = useCallback(() => {
-      tagsState.remove(view, true);
-    }, [tagsState, view]);
-
-    const isFaded = false;
-    const iconType = smartViewIconType(view);
-
-    return (
-      <>
-        <div
-          className={`tag ${isSelected ? 'selected' : ''} ${
-            isFaded ? 'faded' : ''
-          }`}
-          onClick={selectCurrentTag}
-          style={{
-            paddingLeft: `${level * PADDING_PER_LEVEL_PX + PADDING_BASE_PX}px`,
-          }}
-        >
-          <div className="tag-info">
-            <div className={`tag-icon mr-1`}>
-              <Icon
-                type={iconType}
-                className={`${isSelected ? 'color-info' : 'color-neutral'}`}
-              />
-            </div>
-            <input
-              className={`title ${isEditing ? 'editing' : ''}`}
-              disabled={!isEditing}
-              id={`react-tag-${view.uuid}`}
-              onBlur={onBlur}
-              onInput={onInput}
-              value={title}
-              onKeyUp={onKeyUp}
-              spellCheck={false}
-              ref={inputRef}
-            />
-            <div className="count">
-              {view.uuid === SystemViewId.AllNotes && tagsState.allNotesCount}
-            </div>
-          </div>
-
-          {!isSystemView(view) && (
-            <div className="meta">
-              {view.conflictOf && (
-                <div className="danger small-text font-bold">
-                  Conflicted Copy {view.conflictOf}
-                </div>
-              )}
-
-              {isSelected && (
-                <div className="menu">
-                  {!isEditing && (
-                    <a className="item" onClick={onClickRename}>
-                      Rename
-                    </a>
-                  )}
-                  {isEditing && (
-                    <a className="item" onClick={onClickSave}>
-                      Save
-                    </a>
-                  )}
-                  <a className="item" onClick={onClickDelete}>
-                    Delete
-                  </a>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      </>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/Tags/SmartViewsSection.tsx b/app/assets/javascripts/components/Tags/SmartViewsSection.tsx
deleted file mode 100644
index 6aedcd1f5..000000000
--- a/app/assets/javascripts/components/Tags/SmartViewsSection.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { AppState } from '@/ui_models/app_state';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { SmartViewsList } from './SmartViewsList';
-
-type Props = {
-  appState: AppState;
-};
-
-export const SmartViewsSection: FunctionComponent<Props> = observer(
-  ({ appState }) => {
-    return (
-      <section>
-        <SmartViewsList appState={appState} />
-      </section>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/Tags/TagContextMenu.tsx b/app/assets/javascripts/components/Tags/TagContextMenu.tsx
deleted file mode 100644
index 9a427e3bb..000000000
--- a/app/assets/javascripts/components/Tags/TagContextMenu.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { AppState } from '@/ui_models/app_state';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { useCallback, useEffect, useRef } from 'preact/hooks';
-import { Icon } from '../Icon';
-import { Menu } from '../Menu/Menu';
-import { MenuItem, MenuItemType } from '../Menu/MenuItem';
-import { usePremiumModal } from '../Premium';
-import { useCloseOnBlur } from '../utils';
-import { SNTag } from '@standardnotes/snjs';
-
-type Props = {
-  appState: AppState;
-};
-
-export const TagsContextMenu: FunctionComponent<Props> = observer(
-  ({ appState }) => {
-    const premiumModal = usePremiumModal();
-    const selectedTag = appState.tags.selected;
-
-    if (!selectedTag || !(selectedTag instanceof SNTag)) {
-      return null;
-    }
-
-    const { contextMenuOpen, contextMenuPosition, contextMenuMaxHeight } =
-      appState.tags;
-
-    const contextMenuRef = useRef<HTMLDivElement>(null);
-    const [closeOnBlur] = useCloseOnBlur(contextMenuRef, (open: boolean) =>
-      appState.tags.setContextMenuOpen(open)
-    );
-
-    const reloadContextMenuLayout = useCallback(() => {
-      appState.tags.reloadContextMenuLayout();
-    }, [appState.tags]);
-
-    useEffect(() => {
-      window.addEventListener('resize', reloadContextMenuLayout);
-      return () => {
-        window.removeEventListener('resize', reloadContextMenuLayout);
-      };
-    }, [reloadContextMenuLayout]);
-
-    const onClickAddSubtag = useCallback(() => {
-      if (!appState.features.hasFolders) {
-        premiumModal.activate('Folders');
-        return;
-      }
-
-      appState.tags.setContextMenuOpen(false);
-      appState.tags.setAddingSubtagTo(selectedTag);
-    }, [
-      appState.features.hasFolders,
-      appState.tags,
-      premiumModal,
-      selectedTag,
-    ]);
-
-    const onClickRename = useCallback(() => {
-      appState.tags.setContextMenuOpen(false);
-      appState.tags.editingTag = selectedTag;
-    }, [appState.tags, selectedTag]);
-
-    const onClickDelete = useCallback(() => {
-      appState.tags.remove(selectedTag, true);
-    }, [appState.tags, selectedTag]);
-
-    return contextMenuOpen ? (
-      <div
-        ref={contextMenuRef}
-        className="sn-dropdown min-w-60 max-h-120 max-w-xs flex flex-col py-2 overflow-y-auto fixed"
-        style={{
-          ...contextMenuPosition,
-          maxHeight: contextMenuMaxHeight,
-        }}
-      >
-        <Menu
-          a11yLabel="Tag context menu"
-          isOpen={contextMenuOpen}
-          closeMenu={() => {
-            appState.tags.setContextMenuOpen(false);
-          }}
-        >
-          <MenuItem
-            type={MenuItemType.IconButton}
-            onBlur={closeOnBlur}
-            className={`py-1.5 justify-between`}
-            onClick={onClickAddSubtag}
-          >
-            <div className="flex items-center">
-              <Icon type="add" className="color-neutral mr-2" />
-              Add subtag
-            </div>
-            {!appState.features.hasFolders && <Icon type="premium-feature" />}
-          </MenuItem>
-          <MenuItem
-            type={MenuItemType.IconButton}
-            onBlur={closeOnBlur}
-            className={`py-1.5`}
-            onClick={onClickRename}
-          >
-            <Icon type="pencil-filled" className="color-neutral mr-2" />
-            Rename
-          </MenuItem>
-          <MenuItem
-            type={MenuItemType.IconButton}
-            onBlur={closeOnBlur}
-            className={`py-1.5`}
-            onClick={onClickDelete}
-          >
-            <Icon type="trash" className="mr-2 color-danger" />
-            <span className="color-danger">Delete</span>
-          </MenuItem>
-        </Menu>
-      </div>
-    ) : null;
-  }
-);
diff --git a/app/assets/javascripts/components/Tags/TagsSection.tsx b/app/assets/javascripts/components/Tags/TagsSection.tsx
deleted file mode 100644
index 40f211a43..000000000
--- a/app/assets/javascripts/components/Tags/TagsSection.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { TagsList } from '@/components/Tags/TagsList';
-import { AppState } from '@/ui_models/app_state';
-import { ApplicationEvent } from '@/__mocks__/@standardnotes/snjs';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { useCallback, useEffect, useState } from 'preact/hooks';
-import { TagsSectionAddButton } from './TagsSectionAddButton';
-import { TagsSectionTitle } from './TagsSectionTitle';
-
-type Props = {
-  appState: AppState;
-};
-
-export const TagsSection: FunctionComponent<Props> = observer(
-  ({ appState }) => {
-    const [hasMigration, setHasMigration] = useState<boolean>(false);
-
-    const checkIfMigrationNeeded = useCallback(() => {
-      setHasMigration(
-        appState.application.items.hasTagsNeedingFoldersMigration()
-      );
-    }, [appState.application]);
-
-    useEffect(() => {
-      appState.application.addEventObserver(async (event) => {
-        const events = [
-          ApplicationEvent.CompletedInitialSync,
-          ApplicationEvent.SignedIn,
-        ];
-        if (events.includes(event)) {
-          checkIfMigrationNeeded();
-        }
-      });
-    }, [appState.application, checkIfMigrationNeeded]);
-
-    const runMigration = useCallback(async () => {
-      if (
-        await appState.application.alertService.confirm(
-          '<i>Introducing native, built-in nested tags without requiring the legacy Folders extension.</i><br/></br> ' +
-            " To get started, we'll need to migrate any tags containing a dot character to the new system.<br/></br> " +
-            ' This migration will convert any tags with dots appearing in their name into a natural' +
-            ' hierarchy that is compatible with the new nested tags feature.' +
-            ' Running this migration will remove any "." characters appearing in tag names.',
-          'New: Folders to Nested Tags',
-          'Run Migration'
-        )
-      ) {
-        appState.application.mutator.migrateTagsToFolders().then(() => {
-          checkIfMigrationNeeded();
-        });
-      }
-    }, [appState.application, checkIfMigrationNeeded]);
-
-    return (
-      <section>
-        <div className="section-title-bar">
-          <div className="section-title-bar-header">
-            <TagsSectionTitle
-              features={appState.features}
-              hasMigration={hasMigration}
-              onClickMigration={runMigration}
-            />
-            <TagsSectionAddButton
-              tags={appState.tags}
-              features={appState.features}
-            />
-          </div>
-        </div>
-        <TagsList appState={appState} />
-      </section>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/Tags/TagsSectionAddButton.tsx b/app/assets/javascripts/components/Tags/TagsSectionAddButton.tsx
deleted file mode 100644
index b7ff128ec..000000000
--- a/app/assets/javascripts/components/Tags/TagsSectionAddButton.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { IconButton } from '@/components/IconButton';
-import { FeaturesState } from '@/ui_models/app_state/features_state';
-import { TagsState } from '@/ui_models/app_state/tags_state';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-
-type Props = {
-  tags: TagsState;
-  features: FeaturesState;
-};
-
-export const TagsSectionAddButton: FunctionComponent<Props> = observer(
-  ({ tags }) => {
-    return (
-      <IconButton
-        focusable={true}
-        icon="add"
-        title="Create a new tag"
-        className="color-neutral"
-        onClick={() => tags.createNewTemplate()}
-      />
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/Tags/TagsSectionTitle.tsx b/app/assets/javascripts/components/Tags/TagsSectionTitle.tsx
deleted file mode 100644
index 7f7d51006..000000000
--- a/app/assets/javascripts/components/Tags/TagsSectionTitle.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { usePremiumModal } from '@/components/Premium';
-import {
-  FeaturesState,
-  TAG_FOLDERS_FEATURE_NAME,
-  TAG_FOLDERS_FEATURE_TOOLTIP,
-} from '@/ui_models/app_state/features_state';
-import { Tooltip } from '@reach/tooltip';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { useCallback } from 'preact/hooks';
-
-type Props = {
-  features: FeaturesState;
-  hasMigration: boolean;
-  onClickMigration: () => void;
-};
-
-export const TagsSectionTitle: FunctionComponent<Props> = observer(
-  ({ features, hasMigration, onClickMigration }) => {
-    const entitledToFolders = features.hasFolders;
-    const modal = usePremiumModal();
-
-    const showPremiumAlert = useCallback(() => {
-      modal.activate(TAG_FOLDERS_FEATURE_NAME);
-    }, [modal]);
-
-    if (entitledToFolders) {
-      return (
-        <>
-          <div className="sk-h3 title">
-            <span className="sk-bold">Folders</span>
-            {hasMigration && (
-              <label
-                className="ml-1 sk-bold color-info cursor-pointer"
-                onClick={onClickMigration}
-              >
-                Migration Available
-              </label>
-            )}
-          </div>
-        </>
-      );
-    }
-
-    return (
-      <>
-        <div className="sk-h3 title">
-          <span className="sk-bold">Tags</span>
-          <Tooltip label={TAG_FOLDERS_FEATURE_TOOLTIP}>
-            <label
-              className="ml-1 sk-bold color-grey-2 cursor-pointer"
-              onClick={showPremiumAlert}
-            >
-              Folders
-            </label>
-          </Tooltip>
-        </div>
-      </>
-    );
-  }
-);
diff --git a/app/assets/javascripts/components/Tags/dragndrop.ts b/app/assets/javascripts/components/Tags/dragndrop.ts
deleted file mode 100644
index 5a5033ad5..000000000
--- a/app/assets/javascripts/components/Tags/dragndrop.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export enum ItemTypes {
-  TAG = 'TAG',
-}
-
-export type DropItemTag = { uuid: string };
-
-export type DropItem = DropItemTag;
-
-export type DropProps = { isOver: boolean; canDrop: boolean };
diff --git a/app/assets/javascripts/components/TitleBar.tsx b/app/assets/javascripts/components/TitleBar.tsx
deleted file mode 100644
index 8cf9e9208..000000000
--- a/app/assets/javascripts/components/TitleBar.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { FunctionComponent } from 'preact';
-
-export const TitleBar: FunctionComponent<{ className?: string }> = ({
-  children,
-  className,
-}) => <div className={`sn-titlebar ${className ?? ''}`}>{children}</div>;
-
-export const Title: FunctionComponent<{ className?: string }> = ({
-  children,
-  className,
-}) => {
-  return <div className={`sn-title ${className ?? ''}`}>{children}</div>;
-};
diff --git a/app/assets/javascripts/components/utils.ts b/app/assets/javascripts/components/utils.ts
deleted file mode 100644
index 1d0082253..000000000
--- a/app/assets/javascripts/components/utils.ts
+++ /dev/null
@@ -1,194 +0,0 @@
-import { KeyboardKey } from '@/services/ioService';
-import { FOCUSABLE_BUT_NOT_TABBABLE, MILLISECONDS_IN_A_DAY } from '@/constants';
-import {
-  StateUpdater,
-  useCallback,
-  useState,
-  useEffect,
-  Ref,
-} from 'preact/hooks';
-
-/**
- * @returns a callback that will close a dropdown if none of its children has
- * focus. Use the returned function as the onBlur callback of children that need to be
- * monitored.
- */
-export function useCloseOnBlur(
-  container: { current?: HTMLDivElement | null },
-  setOpen: (open: boolean) => void
-): [
-  (event: { relatedTarget: EventTarget | null }) => void,
-  StateUpdater<boolean>
-] {
-  const [locked, setLocked] = useState(false);
-  return [
-    useCallback(
-      function onBlur(event: { relatedTarget: EventTarget | null }) {
-        if (
-          !locked &&
-          !container.current?.contains(event.relatedTarget as Node)
-        ) {
-          setOpen(false);
-        }
-      },
-      [container, setOpen, locked]
-    ),
-    setLocked,
-  ];
-}
-
-export function useCloseOnClickOutside(
-  container: { current: HTMLDivElement | null },
-  callback: () => void
-): void {
-  const closeOnClickOutside = useCallback(
-    (event: { target: EventTarget | null }) => {
-      if (!container.current) {
-        return;
-      }
-      const isDescendantOfContainer = container.current.contains(
-        event.target as Node
-      );
-      const isDescendantOfDialog = (event.target as HTMLElement).closest(
-        '[role="dialog"]'
-      );
-      if (!isDescendantOfContainer && !isDescendantOfDialog) {
-        callback();
-      }
-    },
-    [container, callback]
-  );
-
-  useEffect(() => {
-    document.addEventListener('click', closeOnClickOutside, { capture: true });
-    return () => {
-      document.removeEventListener('click', closeOnClickOutside, {
-        capture: true,
-      });
-    };
-  }, [closeOnClickOutside]);
-}
-
-export const calculateDifferenceBetweenDatesInDays = (
-  firstDate: Date,
-  secondDate: Date
-) => {
-  const firstDateAsUTCMilliseconds = Date.UTC(
-    firstDate.getFullYear(),
-    firstDate.getMonth(),
-    firstDate.getDate()
-  );
-
-  const secondDateAsUTCMilliseconds = Date.UTC(
-    secondDate.getFullYear(),
-    secondDate.getMonth(),
-    secondDate.getDate()
-  );
-
-  return Math.round(
-    (firstDateAsUTCMilliseconds - secondDateAsUTCMilliseconds) /
-      MILLISECONDS_IN_A_DAY
-  );
-};
-
-export const useListKeyboardNavigation = (
-  container: Ref<HTMLElement | null>,
-  initialFocus = 0
-) => {
-  const [listItems, setListItems] = useState<HTMLButtonElement[]>();
-  const [focusedItemIndex, setFocusedItemIndex] =
-    useState<number>(initialFocus);
-
-  const focusItemWithIndex = useCallback(
-    (index: number, items?: HTMLButtonElement[]) => {
-      setFocusedItemIndex(index);
-      if (items && items.length > 0) {
-        items[index]?.focus();
-      } else {
-        listItems?.[index]?.focus();
-      }
-    },
-    [listItems]
-  );
-
-  useEffect(() => {
-    if (container.current) {
-      container.current.tabIndex = FOCUSABLE_BUT_NOT_TABBABLE;
-      setListItems(Array.from(container.current.querySelectorAll('button')));
-    }
-  }, [container]);
-
-  const keyDownHandler = useCallback(
-    (e: KeyboardEvent) => {
-      if (e.key === KeyboardKey.Up || e.key === KeyboardKey.Down) {
-        e.preventDefault();
-      } else {
-        return;
-      }
-
-      if (!listItems?.length) {
-        setListItems(
-          Array.from(
-            container.current?.querySelectorAll(
-              'button'
-            ) as NodeListOf<HTMLButtonElement>
-          )
-        );
-      }
-
-      if (listItems) {
-        if (e.key === KeyboardKey.Up) {
-          let previousIndex = focusedItemIndex - 1;
-          if (previousIndex < 0) {
-            previousIndex = listItems.length - 1;
-          }
-          focusItemWithIndex(previousIndex);
-        }
-
-        if (e.key === KeyboardKey.Down) {
-          let nextIndex = focusedItemIndex + 1;
-          if (nextIndex > listItems.length - 1) {
-            nextIndex = 0;
-          }
-          focusItemWithIndex(nextIndex);
-        }
-      }
-    },
-    [container, focusItemWithIndex, focusedItemIndex, listItems]
-  );
-
-  const FIRST_ITEM_FOCUS_TIMEOUT = 20;
-
-  const containerFocusHandler = useCallback(() => {
-    let temporaryItems = listItems && listItems?.length > 0 ? listItems : [];
-    if (!temporaryItems.length) {
-      temporaryItems = Array.from(
-        container.current?.querySelectorAll(
-          'button'
-        ) as NodeListOf<HTMLButtonElement>
-      );
-      setListItems(temporaryItems);
-    }
-    if (temporaryItems.length > 0) {
-      const selectedItemIndex = Array.from(temporaryItems).findIndex(
-        (item) => item.dataset.selected
-      );
-      const indexToFocus =
-        selectedItemIndex > -1 ? selectedItemIndex : initialFocus;
-      setTimeout(() => {
-        focusItemWithIndex(indexToFocus, temporaryItems);
-      }, FIRST_ITEM_FOCUS_TIMEOUT);
-    }
-  }, [container, focusItemWithIndex, initialFocus, listItems]);
-
-  useEffect(() => {
-    const containerElement = container.current;
-    containerElement?.addEventListener('focus', containerFocusHandler);
-    containerElement?.addEventListener('keydown', keyDownHandler);
-
-    return () => {
-      containerElement?.removeEventListener('focus', containerFocusHandler);
-      containerElement?.removeEventListener('keydown', keyDownHandler);
-    };
-  }, [container, containerFocusHandler, keyDownHandler]);
-};
diff --git a/app/assets/javascripts/constants.ts b/app/assets/javascripts/constants.ts
deleted file mode 100644
index 3e18aa7c7..000000000
--- a/app/assets/javascripts/constants.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export const PANEL_NAME_NOTES = 'notes';
-export const PANEL_NAME_NAVIGATION = 'navigation';
-
-export const EMAIL_REGEX =
-  /^([a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?)$/;
-
-export const MENU_MARGIN_FROM_APP_BORDER = 5;
-export const MAX_MENU_SIZE_MULTIPLIER = 30;
-
-export const FOCUSABLE_BUT_NOT_TABBABLE = -1;
-export const NOTES_LIST_SCROLL_THRESHOLD = 200;
-
-export const MILLISECONDS_IN_A_DAY = 1000 * 60 * 60 * 24;
-export const DAYS_IN_A_WEEK = 7;
-export const DAYS_IN_A_YEAR = 365;
-
-export const BYTES_IN_ONE_KILOBYTE = 1_000;
-export const BYTES_IN_ONE_MEGABYTE = 1_000_000;
diff --git a/app/assets/javascripts/crypto.ts b/app/assets/javascripts/crypto.ts
deleted file mode 100644
index d93163eac..000000000
--- a/app/assets/javascripts/crypto.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { SNWebCrypto } from "@standardnotes/sncrypto-web";
-
-export const WebCrypto = new SNWebCrypto();
diff --git a/app/assets/javascripts/hooks/manageSubscription.ts b/app/assets/javascripts/hooks/manageSubscription.ts
deleted file mode 100644
index 8af7197a5..000000000
--- a/app/assets/javascripts/hooks/manageSubscription.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { SNApplication } from '@standardnotes/snjs';
-
-export function openSubscriptionDashboard(application: SNApplication): void {
-  application.getNewSubscriptionToken().then((token) => {
-    if (!token) {
-      return;
-    }
-    window.open(`${window.dashboardUrl}?subscription_token=${token}`);
-  });
-}
diff --git a/app/assets/javascripts/hooks/useBeforeUnload.tsx b/app/assets/javascripts/hooks/useBeforeUnload.tsx
deleted file mode 100644
index 23a078bde..000000000
--- a/app/assets/javascripts/hooks/useBeforeUnload.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { useEffect } from '@node_modules/preact/hooks';
-
-export const useBeforeUnload = (): void => {
-  useEffect(() => {
-    window.onbeforeunload = () => true;
-
-    return () => {
-      window.onbeforeunload = null;
-    };
-  }, []);
-};
diff --git a/app/assets/javascripts/index.ts b/app/assets/javascripts/index.ts
index 42a401070..06e0002b0 100644
--- a/app/assets/javascripts/index.ts
+++ b/app/assets/javascripts/index.ts
@@ -1,8 +1,8 @@
 //= require_tree ./app
 
 // css
-import '@reach/dialog/styles.css';
-import '../stylesheets/index.css.scss';
+import '@reach/dialog/styles.css'
+import '../stylesheets/index.css.scss'
 
 // entry point
-import './app';
+import './App'
diff --git a/app/assets/javascripts/jest.config.js b/app/assets/javascripts/jest.config.js
index fc0c2d6ee..6be1815b2 100644
--- a/app/assets/javascripts/jest.config.js
+++ b/app/assets/javascripts/jest.config.js
@@ -1,8 +1,7 @@
-const pathsToModuleNameMapper =
-  require('ts-jest/utils').pathsToModuleNameMapper;
-const tsConfig = require('./tsconfig.json');
+const pathsToModuleNameMapper = require('ts-jest/utils').pathsToModuleNameMapper
+const tsConfig = require('./tsconfig.json')
 
-const pathsFromTsconfig = tsConfig.compilerOptions.paths;
+const pathsFromTsconfig = tsConfig.compilerOptions.paths
 
 module.exports = {
   restoreMocks: true,
@@ -26,4 +25,4 @@ module.exports = {
     '^.+\\.(ts|tsx)?$': 'ts-jest',
     '\\.svg$': 'svg-jest',
   },
-};
+}
diff --git a/app/assets/javascripts/services/archiveManager.ts b/app/assets/javascripts/services/archiveManager.ts
deleted file mode 100644
index bc9ca5438..000000000
--- a/app/assets/javascripts/services/archiveManager.ts
+++ /dev/null
@@ -1,168 +0,0 @@
-import { WebApplication } from '@/ui_models/application';
-import { parseFileName } from '@standardnotes/filepicker';
-import {
-  ContentType,
-  BackupFile,
-  BackupFileDecryptedContextualPayload,
-  NoteContent,
-} from '@standardnotes/snjs';
-
-function sanitizeFileName(name: string): string {
-  return name.trim().replace(/[.\\/:"?*|<>]/g, '_');
-}
-
-function zippableFileName(name: string, suffix = '', format = 'txt'): string {
-  const sanitizedName = sanitizeFileName(name);
-  const nameEnd = suffix + '.' + format;
-  const maxFileNameLength = 100;
-  return sanitizedName.slice(0, maxFileNameLength - nameEnd.length) + nameEnd;
-}
-
-type ZippableData = {
-  filename: string;
-  content: Blob;
-}[];
-
-type ObjectURL = string;
-
-export class ArchiveManager {
-  private readonly application: WebApplication;
-  private textFile?: string;
-
-  constructor(application: WebApplication) {
-    this.application = application;
-  }
-
-  public async getMimeType(ext: string) {
-    return (await import('@zip.js/zip.js')).getMimeType(ext);
-  }
-
-  public async downloadBackup(encrypted: boolean): Promise<void> {
-    const data = encrypted
-      ? await this.application.createEncryptedBackupFile(true)
-      : await this.application.createDecryptedBackupFile();
-
-    if (!data) {
-      return;
-    }
-
-    const blobData = new Blob([JSON.stringify(data, null, 2)], {
-      type: 'text/json',
-    });
-
-    if (encrypted) {
-      this.downloadData(
-        blobData,
-        `Standard Notes Encrypted Backup and Import File - ${this.formattedDate()}.txt`
-      );
-    } else {
-      this.downloadZippedDecryptedItems(data);
-    }
-  }
-
-  private formattedDate() {
-    const string = `${new Date()}`;
-    // Match up to the first parenthesis, i.e do not include '(Central Standard Time)'
-    const matches = string.match(/^(.*?) \(/);
-    if (matches && matches.length >= 2) {
-      return matches[1];
-    }
-    return string;
-  }
-
-  private async downloadZippedDecryptedItems(data: BackupFile) {
-    const zip = await import('@zip.js/zip.js');
-    const zipWriter = new zip.ZipWriter(new zip.BlobWriter('application/zip'));
-    const items = data.items;
-
-    const blob = new Blob([JSON.stringify(data, null, 2)], {
-      type: 'text/plain',
-    });
-
-    const fileName = zippableFileName('Standard Notes Backup and Import File');
-    await zipWriter.add(fileName, new zip.BlobReader(blob));
-
-    let index = 0;
-    const nextFile = async () => {
-      const item = items[index];
-      let name, contents;
-
-      if (item.content_type === ContentType.Note) {
-        const note = item as BackupFileDecryptedContextualPayload<NoteContent>;
-        name = note.content.title;
-        contents = note.content.text;
-      } else {
-        name = item.content_type;
-        contents = JSON.stringify(item.content, null, 2);
-      }
-
-      if (!name) {
-        name = '';
-      }
-
-      const blob = new Blob([contents], { type: 'text/plain' });
-      const fileName =
-        `Items/${sanitizeFileName(item.content_type)}/` +
-        zippableFileName(name, `-${item.uuid.split('-')[0]}`);
-      await zipWriter.add(fileName, new zip.BlobReader(blob));
-
-      index++;
-      if (index < items.length) {
-        await nextFile();
-      } else {
-        const finalBlob = await zipWriter.close();
-        this.downloadData(
-          finalBlob,
-          `Standard Notes Backup - ${this.formattedDate()}.zip`
-        );
-      }
-    };
-
-    await nextFile();
-  }
-
-  async zipData(data: ZippableData): Promise<Blob> {
-    const zip = await import('@zip.js/zip.js');
-    const writer = new zip.ZipWriter(new zip.BlobWriter('application/zip'));
-
-    for (let i = 0; i < data.length; i++) {
-      const { name, ext } = parseFileName(data[i].filename);
-      await writer.add(
-        zippableFileName(name, '', ext),
-        new zip.BlobReader(data[i].content)
-      );
-    }
-
-    const zipFileAsBlob = await writer.close();
-
-    return zipFileAsBlob;
-  }
-
-  async downloadDataAsZip(data: ZippableData) {
-    const zipFileAsBlob = await this.zipData(data);
-    this.downloadData(
-      zipFileAsBlob,
-      `Standard Notes Export - ${this.formattedDate()}.zip`
-    );
-  }
-
-  private hrefForData(data: Blob) {
-    // If we are replacing a previously generated file we need to
-    // manually revoke the object URL to avoid memory leaks.
-    if (this.textFile) {
-      window.URL.revokeObjectURL(this.textFile);
-    }
-    this.textFile = window.URL.createObjectURL(data);
-    // returns a URL you can use as a href
-    return this.textFile;
-  }
-
-  downloadData(data: Blob | ObjectURL, fileName: string) {
-    const link = document.createElement('a');
-    link.setAttribute('download', fileName);
-    link.href = typeof data === 'string' ? data : this.hrefForData(data);
-    document.body.appendChild(link);
-    link.click();
-    link.remove();
-  }
-}
diff --git a/app/assets/javascripts/services/bridge.ts b/app/assets/javascripts/services/bridge.ts
deleted file mode 100644
index c169d6bc0..000000000
--- a/app/assets/javascripts/services/bridge.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * This file will be imported by desktop, so we make sure imports are carrying
- * as little extra code as possible with them.
- */
-import { Environment } from '@standardnotes/snjs';
-
-export interface ElectronDesktopCallbacks {
-  desktop_updateAvailable(): void;
-  desktop_windowGainedFocus(): void;
-  desktop_windowLostFocus(): void;
-  desktop_onComponentInstallationComplete(
-    componentData: any,
-    error: any
-  ): Promise<void>;
-  desktop_requestBackupFile(): Promise<string | undefined>;
-  desktop_didBeginBackup(): void;
-  desktop_didFinishBackup(success: boolean): void;
-}
-
-/** Platform-specific (i-e Electron/browser) behavior is handled by a Bridge object. */
-export interface Bridge {
-  readonly appVersion: string;
-  environment: Environment;
-
-  getKeychainValue(): Promise<unknown>;
-  setKeychainValue(value: unknown): Promise<void>;
-  clearKeychainValue(): Promise<void>;
-
-  localBackupsCount(): Promise<number>;
-  viewlocalBackups(): void;
-  deleteLocalBackups(): Promise<void>;
-
-  extensionsServerHost?: string;
-  syncComponents(payloads: unknown[]): void;
-  onMajorDataChange(): void;
-  onInitialDataLoad(): void;
-  onSignOut(): void;
-  onSearch(text?: string): void;
-  downloadBackup(): void | Promise<void>;
-}
diff --git a/app/assets/javascripts/services/statusManager.ts b/app/assets/javascripts/services/statusManager.ts
deleted file mode 100644
index 1a0a7692a..000000000
--- a/app/assets/javascripts/services/statusManager.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { removeFromArray } from '@standardnotes/snjs';
-
-type StatusCallback = (string: string) => void;
-
-export class StatusManager {
-  private _message = '';
-  private observers: StatusCallback[] = [];
-
-  get message(): string {
-    return this._message;
-  }
-
-  setMessage(message: string) {
-    this._message = message;
-    this.notifyObservers();
-  }
-
-  onStatusChange(callback: StatusCallback) {
-    this.observers.push(callback);
-    return () => {
-      removeFromArray(this.observers, callback);
-    };
-  }
-
-  private notifyObservers() {
-    for (const observer of this.observers) {
-      observer(this._message);
-    }
-  }
-}
diff --git a/app/assets/javascripts/services/themeManager.ts b/app/assets/javascripts/services/themeManager.ts
deleted file mode 100644
index 0722391bb..000000000
--- a/app/assets/javascripts/services/themeManager.ts
+++ /dev/null
@@ -1,345 +0,0 @@
-import { WebApplication } from '@/ui_models/application';
-import {
-  StorageValueModes,
-  ApplicationService,
-  SNTheme,
-  removeFromArray,
-  ApplicationEvent,
-  ContentType,
-  UuidString,
-  FeatureStatus,
-  PayloadSource,
-  PrefKey,
-  CreateDecryptedLocalStorageContextPayload,
-  InternalEventBus,
-} from '@standardnotes/snjs';
-import {
-  dismissToast,
-  ToastType,
-  addTimedToast,
-} from '@standardnotes/stylekit';
-
-const CachedThemesKey = 'cachedThemes';
-const TimeBeforeApplyingColorScheme = 5;
-const DefaultThemeIdentifier = 'Default';
-
-export class ThemeManager extends ApplicationService {
-  private activeThemes: UuidString[] = [];
-  private unregisterDesktop!: () => void;
-  private unregisterStream!: () => void;
-  private lastUseDeviceThemeSettings = false;
-
-  constructor(application: WebApplication) {
-    super(application, new InternalEventBus());
-    this.colorSchemeEventHandler = this.colorSchemeEventHandler.bind(this);
-  }
-
-  async onAppStart() {
-    super.onAppStart();
-    this.registerObservers();
-  }
-
-  async onAppEvent(event: ApplicationEvent) {
-    super.onAppEvent(event);
-    switch (event) {
-      case ApplicationEvent.SignedOut: {
-        this.deactivateAllThemes();
-        this.activeThemes = [];
-        this.application?.removeValue(
-          CachedThemesKey,
-          StorageValueModes.Nonwrapped
-        );
-        break;
-      }
-      case ApplicationEvent.StorageReady: {
-        await this.activateCachedThemes();
-        break;
-      }
-      case ApplicationEvent.FeaturesUpdated: {
-        this.handleFeaturesUpdated();
-        break;
-      }
-      case ApplicationEvent.Launched: {
-        window
-          .matchMedia('(prefers-color-scheme: dark)')
-          .addEventListener('change', this.colorSchemeEventHandler);
-        break;
-      }
-      case ApplicationEvent.PreferencesChanged: {
-        this.handlePreferencesChangeEvent();
-        break;
-      }
-    }
-  }
-
-  private handlePreferencesChangeEvent(): void {
-    const useDeviceThemeSettings = this.application.getPreference(
-      PrefKey.UseSystemColorScheme,
-      false
-    );
-
-    if (useDeviceThemeSettings !== this.lastUseDeviceThemeSettings) {
-      this.lastUseDeviceThemeSettings = useDeviceThemeSettings;
-    }
-
-    if (useDeviceThemeSettings) {
-      const prefersDarkColorScheme = window.matchMedia(
-        '(prefers-color-scheme: dark)'
-      );
-
-      this.setThemeAsPerColorScheme(prefersDarkColorScheme.matches);
-    }
-  }
-
-  get webApplication() {
-    return this.application as WebApplication;
-  }
-
-  deinit() {
-    this.activeThemes.length = 0;
-    this.unregisterDesktop();
-    this.unregisterStream();
-    (this.unregisterDesktop as unknown) = undefined;
-    (this.unregisterStream as unknown) = undefined;
-    window
-      .matchMedia('(prefers-color-scheme: dark)')
-      .removeEventListener('change', this.colorSchemeEventHandler);
-    super.deinit();
-  }
-
-  private handleFeaturesUpdated(): void {
-    let hasChange = false;
-    for (const themeUuid of this.activeThemes) {
-      const theme = this.application.items.findItem(themeUuid) as SNTheme;
-      if (!theme) {
-        this.deactivateTheme(themeUuid);
-        hasChange = true;
-      } else {
-        const status = this.application.features.getFeatureStatus(
-          theme.identifier
-        );
-        if (status !== FeatureStatus.Entitled) {
-          if (theme.active) {
-            this.application.mutator.toggleTheme(theme);
-          } else {
-            this.deactivateTheme(theme.uuid);
-          }
-          hasChange = true;
-        }
-      }
-    }
-
-    const activeThemes = (
-      this.application.items.getItems(ContentType.Theme) as SNTheme[]
-    ).filter((theme) => theme.active);
-
-    for (const theme of activeThemes) {
-      if (!this.activeThemes.includes(theme.uuid)) {
-        this.activateTheme(theme);
-        hasChange = true;
-      }
-    }
-
-    if (hasChange) {
-      this.cacheThemeState();
-    }
-  }
-
-  private colorSchemeEventHandler(event: MediaQueryListEvent) {
-    this.setThemeAsPerColorScheme(event.matches);
-  }
-
-  private showColorSchemeToast(setThemeCallback: () => void) {
-    const [toastId, intervalId] = addTimedToast(
-      {
-        type: ToastType.Regular,
-        message: (timeRemaining) =>
-          `Applying system color scheme in ${timeRemaining}s...`,
-        actions: [
-          {
-            label: 'Keep current theme',
-            handler: () => {
-              dismissToast(toastId);
-              clearInterval(intervalId);
-            },
-          },
-          {
-            label: 'Apply now',
-            handler: () => {
-              dismissToast(toastId);
-              clearInterval(intervalId);
-              setThemeCallback();
-            },
-          },
-        ],
-      },
-      setThemeCallback,
-      TimeBeforeApplyingColorScheme
-    );
-  }
-
-  private setThemeAsPerColorScheme(prefersDarkColorScheme: boolean) {
-    const preference = prefersDarkColorScheme
-      ? PrefKey.AutoDarkThemeIdentifier
-      : PrefKey.AutoLightThemeIdentifier;
-
-    const themes = this.application.items.getDisplayableItems(
-      ContentType.Theme
-    ) as SNTheme[];
-
-    const activeTheme = themes.find(
-      (theme) => theme.active && !theme.isLayerable()
-    );
-
-    const themeIdentifier = this.application.getPreference(
-      preference,
-      DefaultThemeIdentifier
-    ) as string;
-
-    const setTheme = () => {
-      if (themeIdentifier === DefaultThemeIdentifier && activeTheme) {
-        this.application.mutator.toggleTheme(activeTheme);
-      } else {
-        const theme = themes.find(
-          (theme) => theme.package_info.identifier === themeIdentifier
-        );
-        if (theme && !theme.active) {
-          this.application.mutator.toggleTheme(theme);
-        }
-      }
-    };
-
-    const isPreferredThemeNotActive =
-      activeTheme?.identifier !== themeIdentifier;
-
-    const isDefaultThemePreferredAndNotActive =
-      themeIdentifier === DefaultThemeIdentifier && activeTheme;
-
-    if (isPreferredThemeNotActive || isDefaultThemePreferredAndNotActive) {
-      this.showColorSchemeToast(setTheme);
-    }
-  }
-
-  private async activateCachedThemes() {
-    const cachedThemes = await this.getCachedThemes();
-    for (const theme of cachedThemes) {
-      this.activateTheme(theme, true);
-    }
-  }
-
-  private registerObservers() {
-    this.unregisterDesktop = this.webApplication
-      .getDesktopService()
-      .registerUpdateObserver((component) => {
-        if (component.active && component.isTheme()) {
-          this.deactivateTheme(component.uuid);
-          setTimeout(() => {
-            this.activateTheme(component as SNTheme);
-            this.cacheThemeState();
-          }, 10);
-        }
-      });
-
-    this.unregisterStream = this.application.streamItems(
-      ContentType.Theme,
-      ({ changed, inserted, source }) => {
-        const items = changed.concat(inserted);
-        const themes = items as SNTheme[];
-        for (const theme of themes) {
-          if (theme.active) {
-            this.activateTheme(theme);
-          } else {
-            this.deactivateTheme(theme.uuid);
-          }
-        }
-        if (source !== PayloadSource.LocalRetrieved) {
-          this.cacheThemeState();
-        }
-      }
-    );
-  }
-
-  public deactivateAllThemes() {
-    const activeThemes = this.activeThemes.slice();
-    for (const uuid of activeThemes) {
-      this.deactivateTheme(uuid);
-    }
-  }
-
-  private activateTheme(theme: SNTheme, skipEntitlementCheck = false) {
-    if (this.activeThemes.find((uuid) => uuid === theme.uuid)) {
-      return;
-    }
-
-    if (
-      !skipEntitlementCheck &&
-      this.application.features.getFeatureStatus(theme.identifier) !==
-        FeatureStatus.Entitled
-    ) {
-      return;
-    }
-
-    const url = this.application.componentManager.urlForComponent(theme);
-    if (!url) {
-      return;
-    }
-
-    this.activeThemes.push(theme.uuid);
-
-    const link = document.createElement('link');
-    link.href = url;
-    link.type = 'text/css';
-    link.rel = 'stylesheet';
-    link.media = 'screen,print';
-    link.id = theme.uuid;
-    document.getElementsByTagName('head')[0].appendChild(link);
-  }
-
-  private deactivateTheme(uuid: string) {
-    const element = document.getElementById(uuid) as HTMLLinkElement;
-    if (element) {
-      element.disabled = true;
-      element.parentNode?.removeChild(element);
-    }
-
-    removeFromArray(this.activeThemes, uuid);
-  }
-
-  private async cacheThemeState() {
-    const themes = this.application.items.findItems(
-      this.activeThemes
-    ) as SNTheme[];
-
-    const mapped = themes.map((theme) => {
-      const payload = theme.payloadRepresentation();
-      return CreateDecryptedLocalStorageContextPayload(payload);
-    });
-
-    return this.application.setValue(
-      CachedThemesKey,
-      mapped,
-      StorageValueModes.Nonwrapped
-    );
-  }
-
-  private async getCachedThemes() {
-    const cachedThemes = (await this.application.getValue(
-      CachedThemesKey,
-      StorageValueModes.Nonwrapped
-    )) as SNTheme[];
-    if (cachedThemes) {
-      const themes = [];
-      for (const cachedTheme of cachedThemes) {
-        const payload =
-          this.application.items.createPayloadFromObject(cachedTheme);
-        const theme = this.application.items.createItemFromPayload(
-          payload
-        ) as SNTheme;
-        themes.push(theme);
-      }
-      return themes;
-    } else {
-      return [];
-    }
-  }
-}
diff --git a/app/assets/javascripts/tsconfig.json b/app/assets/javascripts/tsconfig.json
index 48edf8f14..cedc7fc58 100644
--- a/app/assets/javascripts/tsconfig.json
+++ b/app/assets/javascripts/tsconfig.json
@@ -1,4 +1,5 @@
 {
+  "extends": "../../../node_modules/@standardnotes/config/src/tsconfig.json",
   "compilerOptions": {
     "target": "ES2019",
     "module": "commonjs",
@@ -21,7 +22,7 @@
       "@/*": ["./*"],
       "@Controllers/*": ["./controllers/*"],
       "@Views/*": ["./views/*"],
-      "@Services/*": ["./services/*"],
+      "@Services/*": ["Services/*"],
       "@node_modules/*": ["../../../node_modules/*"]
     }
   }
diff --git a/app/assets/javascripts/types.ts b/app/assets/javascripts/types.ts
deleted file mode 100644
index fa9b9f2c4..000000000
--- a/app/assets/javascripts/types.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export type PanelPuppet = {
-  onReady?: () => void;
-  ready?: boolean;
-  setWidth?: (width: number) => void;
-  setLeft?: (left: number) => void;
-  isCollapsed?: () => boolean;
-  flash?: () => void;
-};
-
-export type FooterStatus = {
-  string: string;
-};
diff --git a/app/assets/javascripts/ui_models/app_state/actions_menu_state.ts b/app/assets/javascripts/ui_models/app_state/actions_menu_state.ts
deleted file mode 100644
index 39b4f2afc..000000000
--- a/app/assets/javascripts/ui_models/app_state/actions_menu_state.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { UuidString } from '@standardnotes/snjs';
-import { action, makeObservable, observable } from 'mobx';
-
-export class ActionsMenuState {
-  hiddenSections: Record<UuidString, boolean> = {};
-
-  constructor() {
-    makeObservable(this, {
-      hiddenSections: observable,
-      toggleSectionVisibility: action,
-      reset: action,
-    });
-  }
-
-  toggleSectionVisibility = (uuid: UuidString): void => {
-    this.hiddenSections[uuid] = !this.hiddenSections[uuid];
-  };
-
-  reset = (): void => {
-    this.hiddenSections = {};
-  };
-}
diff --git a/app/assets/javascripts/ui_models/app_state/app_state.ts b/app/assets/javascripts/ui_models/app_state/app_state.ts
deleted file mode 100644
index c077e3852..000000000
--- a/app/assets/javascripts/ui_models/app_state/app_state.ts
+++ /dev/null
@@ -1,482 +0,0 @@
-import { Bridge } from '@/services/bridge';
-import { storage, StorageKey } from '@/services/localStorage';
-import { WebApplication, WebAppEvent } from '@/ui_models/application';
-import { AccountMenuState } from '@/ui_models/app_state/account_menu_state';
-import { isDesktopApplication } from '@/utils';
-import {
-  ApplicationEvent,
-  ContentType,
-  DeinitSource,
-  NoteViewController,
-  PrefKey,
-  SNNote,
-  SmartView,
-  SNTag,
-  SystemViewId,
-  removeFromArray,
-  PayloadSource,
-  Uuid,
-} from '@standardnotes/snjs';
-import {
-  action,
-  computed,
-  IReactionDisposer,
-  makeObservable,
-  observable,
-  reaction,
-} from 'mobx';
-import { ActionsMenuState } from './actions_menu_state';
-import { FeaturesState } from './features_state';
-import { FilesState } from './files_state';
-import { NotesState } from './notes_state';
-import { NotesViewState } from './notes_view_state';
-import { NoteTagsState } from './note_tags_state';
-import { NoAccountWarningState } from './no_account_warning_state';
-import { PreferencesState } from './preferences_state';
-import { PurchaseFlowState } from './purchase_flow_state';
-import { QuickSettingsState } from './quick_settings_state';
-import { SearchOptionsState } from './search_options_state';
-import { SubscriptionState } from './subscription_state';
-import { SyncState } from './sync_state';
-import { TagsState } from './tags_state';
-
-export enum AppStateEvent {
-  TagChanged,
-  ActiveEditorChanged,
-  PanelResized,
-  EditorFocused,
-  BeganBackupDownload,
-  EndedBackupDownload,
-  WindowDidFocus,
-  WindowDidBlur,
-}
-
-export type PanelResizedData = {
-  panel: string;
-  collapsed: boolean;
-};
-
-export enum EventSource {
-  UserInteraction,
-  Script,
-}
-
-type ObserverCallback = (event: AppStateEvent, data?: any) => Promise<void>;
-
-export class AppState {
-  readonly enableUnfinishedFeatures: boolean =
-    window?.enabledUnfinishedFeatures;
-
-  application: WebApplication;
-  observers: ObserverCallback[] = [];
-  locked = true;
-  unsubApp: any;
-  webAppEventDisposer?: () => void;
-  onVisibilityChange: any;
-  showBetaWarning: boolean;
-
-  private multiEditorSupport = false;
-
-  readonly quickSettingsMenu = new QuickSettingsState();
-  readonly accountMenu: AccountMenuState;
-  readonly actionsMenu = new ActionsMenuState();
-  readonly preferences = new PreferencesState();
-  readonly purchaseFlow: PurchaseFlowState;
-  readonly noAccountWarning: NoAccountWarningState;
-  readonly noteTags: NoteTagsState;
-  readonly sync = new SyncState();
-  readonly searchOptions: SearchOptionsState;
-  readonly notes: NotesState;
-  readonly features: FeaturesState;
-  readonly tags: TagsState;
-  readonly notesView: NotesViewState;
-  readonly subscription: SubscriptionState;
-  readonly files: FilesState;
-
-  isSessionsModalVisible = false;
-
-  private appEventObserverRemovers: (() => void)[] = [];
-
-  private readonly tagChangedDisposer: IReactionDisposer;
-
-  constructor(application: WebApplication, private bridge: Bridge) {
-    this.application = application;
-    this.notes = new NotesState(
-      application,
-      this,
-      async () => {
-        await this.notifyEvent(AppStateEvent.ActiveEditorChanged);
-      },
-      this.appEventObserverRemovers
-    );
-    this.noteTags = new NoteTagsState(
-      application,
-      this,
-      this.appEventObserverRemovers
-    );
-    this.features = new FeaturesState(application);
-    this.tags = new TagsState(
-      application,
-      this.appEventObserverRemovers,
-      this.features
-    );
-    this.noAccountWarning = new NoAccountWarningState(
-      application,
-      this.appEventObserverRemovers
-    );
-    this.accountMenu = new AccountMenuState(
-      application,
-      this.appEventObserverRemovers
-    );
-    this.searchOptions = new SearchOptionsState(
-      application,
-      this.appEventObserverRemovers
-    );
-    this.subscription = new SubscriptionState(
-      application,
-      this.appEventObserverRemovers
-    );
-    this.purchaseFlow = new PurchaseFlowState(application);
-    this.notesView = new NotesViewState(
-      application,
-      this,
-      this.appEventObserverRemovers
-    );
-    this.files = new FilesState(application);
-    this.addAppEventObserver();
-    this.streamNotesAndTags();
-    this.onVisibilityChange = () => {
-      const visible = document.visibilityState === 'visible';
-      const event = visible
-        ? AppStateEvent.WindowDidFocus
-        : AppStateEvent.WindowDidBlur;
-      this.notifyEvent(event);
-    };
-    this.registerVisibilityObservers();
-
-    if (this.bridge.appVersion.includes('-beta')) {
-      this.showBetaWarning = storage.get(StorageKey.ShowBetaWarning) ?? true;
-    } else {
-      this.showBetaWarning = false;
-    }
-
-    makeObservable(this, {
-      selectedTag: computed,
-
-      showBetaWarning: observable,
-      isSessionsModalVisible: observable,
-      preferences: observable,
-
-      enableBetaWarning: action,
-      disableBetaWarning: action,
-      openSessionsModal: action,
-      closeSessionsModal: action,
-    });
-
-    this.tagChangedDisposer = this.tagChangedNotifier();
-  }
-
-  deinit(source: DeinitSource): void {
-    if (source === DeinitSource.SignOut) {
-      storage.remove(StorageKey.ShowBetaWarning);
-      this.noAccountWarning.reset();
-    }
-    (this.application as unknown) = undefined;
-    this.actionsMenu.reset();
-    this.unsubApp?.();
-    this.unsubApp = undefined;
-    this.observers.length = 0;
-
-    this.appEventObserverRemovers.forEach((remover) => remover());
-    this.appEventObserverRemovers.length = 0;
-
-    this.features.deinit();
-    (this.features as unknown) = undefined;
-
-    this.webAppEventDisposer?.();
-    this.webAppEventDisposer = undefined;
-
-    (this.quickSettingsMenu as unknown) = undefined;
-    (this.accountMenu as unknown) = undefined;
-    (this.actionsMenu as unknown) = undefined;
-    (this.preferences as unknown) = undefined;
-    (this.purchaseFlow as unknown) = undefined;
-    (this.noteTags as unknown) = undefined;
-    (this.sync as unknown) = undefined;
-    (this.searchOptions as unknown) = undefined;
-    (this.notes as unknown) = undefined;
-    (this.features as unknown) = undefined;
-    (this.tags as unknown) = undefined;
-    (this.notesView as unknown) = undefined;
-
-    document.removeEventListener('visibilitychange', this.onVisibilityChange);
-    this.onVisibilityChange = undefined;
-
-    this.tagChangedDisposer();
-    (this.tagChangedDisposer as unknown) = undefined;
-  }
-
-  openSessionsModal(): void {
-    this.isSessionsModalVisible = true;
-  }
-
-  closeSessionsModal(): void {
-    this.isSessionsModalVisible = false;
-  }
-
-  disableBetaWarning() {
-    this.showBetaWarning = false;
-    storage.set(StorageKey.ShowBetaWarning, false);
-  }
-
-  enableBetaWarning() {
-    this.showBetaWarning = true;
-    storage.set(StorageKey.ShowBetaWarning, true);
-  }
-
-  public get version(): string {
-    return this.bridge.appVersion;
-  }
-
-  async openNewNote(title?: string) {
-    if (!this.multiEditorSupport) {
-      this.closeActiveNoteController();
-    }
-
-    const selectedTag = this.selectedTag;
-
-    const activeRegularTagUuid =
-      selectedTag && selectedTag instanceof SNTag
-        ? selectedTag.uuid
-        : undefined;
-
-    await this.application.noteControllerGroup.createNoteView(
-      undefined,
-      title,
-      activeRegularTagUuid
-    );
-  }
-
-  getActiveNoteController() {
-    return this.application.noteControllerGroup.noteControllers[0];
-  }
-
-  getNoteControllers() {
-    return this.application.noteControllerGroup.noteControllers;
-  }
-
-  closeNoteController(controller: NoteViewController) {
-    this.application.noteControllerGroup.closeNoteView(controller);
-  }
-
-  closeActiveNoteController() {
-    this.application.noteControllerGroup.closeActiveNoteView();
-  }
-
-  closeAllNoteControllers() {
-    this.application.noteControllerGroup.closeAllNoteViews();
-  }
-
-  noteControllerForNote(uuid: Uuid) {
-    for (const controller of this.getNoteControllers()) {
-      if (controller.note.uuid === uuid) {
-        return controller;
-      }
-    }
-  }
-
-  isGlobalSpellcheckEnabled(): boolean {
-    return this.application.getPreference(PrefKey.EditorSpellcheck, true);
-  }
-
-  async toggleGlobalSpellcheck() {
-    const currentValue = this.isGlobalSpellcheckEnabled();
-    return this.application.setPreference(
-      PrefKey.EditorSpellcheck,
-      !currentValue
-    );
-  }
-
-  private tagChangedNotifier(): IReactionDisposer {
-    return reaction(
-      () => this.tags.selectedUuid,
-      () => {
-        const tag = this.tags.selected;
-        const previousTag = this.tags.previouslySelected;
-
-        if (!tag) {
-          return;
-        }
-
-        if (this.application.items.isTemplateItem(tag)) {
-          return;
-        }
-
-        this.notifyEvent(AppStateEvent.TagChanged, {
-          tag,
-          previousTag,
-        });
-      }
-    );
-  }
-
-  public get selectedTag(): SNTag | SmartView | undefined {
-    return this.tags.selected;
-  }
-
-  public set selectedTag(tag: SNTag | SmartView | undefined) {
-    this.tags.selected = tag;
-  }
-
-  streamNotesAndTags() {
-    this.application.streamItems<SNNote | SNTag>(
-      [ContentType.Note, ContentType.Tag],
-      async ({ changed, inserted, removed, source }) => {
-        if (
-          ![PayloadSource.PreSyncSave, PayloadSource.RemoteRetrieved].includes(
-            source
-          )
-        ) {
-          return;
-        }
-
-        const removedNotes = removed.filter(
-          (i) => i.content_type === ContentType.Note
-        );
-
-        for (const removedNote of removedNotes) {
-          const noteController = this.noteControllerForNote(removedNote.uuid);
-          if (noteController) {
-            this.closeNoteController(noteController);
-          }
-        }
-
-        const changedOrInserted = [...changed, ...inserted].filter(
-          (i) => i.content_type === ContentType.Note
-        );
-
-        const selectedTag = this.tags.selected;
-
-        const isBrowswingTrashedNotes =
-          selectedTag instanceof SmartView &&
-          selectedTag.uuid === SystemViewId.TrashedNotes;
-
-        const isBrowsingArchivedNotes =
-          selectedTag instanceof SmartView &&
-          selectedTag.uuid === SystemViewId.ArchivedNotes;
-
-        for (const note of changedOrInserted) {
-          const noteController = this.noteControllerForNote(note.uuid);
-          if (!noteController) {
-            continue;
-          }
-
-          if (
-            note.trashed &&
-            !isBrowswingTrashedNotes &&
-            !this.searchOptions.includeTrashed
-          ) {
-            this.closeNoteController(noteController);
-          } else if (
-            note.archived &&
-            !isBrowsingArchivedNotes &&
-            !this.searchOptions.includeArchived &&
-            !this.application.getPreference(PrefKey.NotesShowArchived, false)
-          ) {
-            this.closeNoteController(noteController);
-          }
-        }
-      }
-    );
-  }
-
-  addAppEventObserver() {
-    this.unsubApp = this.application.addEventObserver(async (eventName) => {
-      switch (eventName) {
-        case ApplicationEvent.Started:
-          this.locked = true;
-          break;
-        case ApplicationEvent.Launched:
-          this.locked = false;
-          if (window.location.search.includes('purchase=true')) {
-            this.purchaseFlow.openPurchaseFlow();
-          }
-          break;
-        case ApplicationEvent.SyncStatusChanged:
-          this.sync.update(this.application.sync.getSyncStatus());
-          break;
-      }
-    });
-  }
-
-  isLocked() {
-    return this.locked;
-  }
-
-  registerVisibilityObservers() {
-    if (isDesktopApplication()) {
-      this.webAppEventDisposer = this.application.addWebEventObserver(
-        (event) => {
-          if (event === WebAppEvent.DesktopWindowGainedFocus) {
-            this.notifyEvent(AppStateEvent.WindowDidFocus);
-          } else if (event === WebAppEvent.DesktopWindowLostFocus) {
-            this.notifyEvent(AppStateEvent.WindowDidBlur);
-          }
-        }
-      );
-    } else {
-      /* Tab visibility listener, web only */
-      document.addEventListener('visibilitychange', this.onVisibilityChange);
-    }
-  }
-
-  /** @returns  A function that unregisters this observer */
-  addObserver(callback: ObserverCallback) {
-    this.observers.push(callback);
-    return () => {
-      removeFromArray(this.observers, callback);
-    };
-  }
-
-  async notifyEvent(eventName: AppStateEvent, data?: any) {
-    /**
-     * Timeout is particularly important so we can give all initial
-     * controllers a chance to construct before propogting any events *
-     */
-    return new Promise<void>((resolve) => {
-      setTimeout(async () => {
-        for (const callback of this.observers) {
-          await callback(eventName, data);
-        }
-        resolve();
-      });
-    });
-  }
-
-  /** Returns the tags that are referncing this note */
-  public getNoteTags(note: SNNote) {
-    return this.application.items.itemsReferencingItem(note).filter((ref) => {
-      return ref.content_type === ContentType.Tag;
-    }) as SNTag[];
-  }
-
-  panelDidResize(name: string, collapsed: boolean) {
-    const data: PanelResizedData = {
-      panel: name,
-      collapsed: collapsed,
-    };
-    this.notifyEvent(AppStateEvent.PanelResized, data);
-  }
-
-  editorDidFocus(eventSource: EventSource) {
-    this.notifyEvent(AppStateEvent.EditorFocused, { eventSource: eventSource });
-  }
-
-  beganBackupDownload() {
-    this.notifyEvent(AppStateEvent.BeganBackupDownload);
-  }
-
-  endedBackupDownload(success: boolean) {
-    this.notifyEvent(AppStateEvent.EndedBackupDownload, { success: success });
-  }
-}
diff --git a/app/assets/javascripts/ui_models/app_state/features_state.ts b/app/assets/javascripts/ui_models/app_state/features_state.ts
deleted file mode 100644
index 67b47a9b0..000000000
--- a/app/assets/javascripts/ui_models/app_state/features_state.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import {
-  ApplicationEvent,
-  FeatureIdentifier,
-  FeatureStatus,
-} from '@standardnotes/snjs';
-import {
-  action,
-  computed,
-  makeObservable,
-  observable,
-  runInAction,
-  when,
-} from 'mobx';
-import { WebApplication } from '../application';
-
-export const TAG_FOLDERS_FEATURE_NAME = 'Tag folders';
-export const TAG_FOLDERS_FEATURE_TOOLTIP =
-  'A Plus or Pro plan is required to enable Tag folders.';
-
-export const SMART_TAGS_FEATURE_NAME = 'Smart Tags';
-
-/**
- * Holds state for premium/non premium features for the current user features,
- * and eventually for in-development features (feature flags).
- */
-export class FeaturesState {
-  readonly enableUnfinishedFeatures: boolean =
-    window?.enabledUnfinishedFeatures;
-
-  _hasFolders = false;
-  _hasSmartViews = false;
-  _premiumAlertFeatureName: string | undefined;
-
-  private unsub: () => void;
-
-  constructor(private application: WebApplication) {
-    this._hasFolders = this.hasNativeFolders();
-    this._hasSmartViews = this.hasNativeSmartViews();
-    this._premiumAlertFeatureName = undefined;
-
-    makeObservable(this, {
-      _hasFolders: observable,
-      _hasSmartViews: observable,
-      hasFolders: computed,
-      _premiumAlertFeatureName: observable,
-      showPremiumAlert: action,
-      closePremiumAlert: action,
-    });
-
-    this.showPremiumAlert = this.showPremiumAlert.bind(this);
-    this.closePremiumAlert = this.closePremiumAlert.bind(this);
-
-    this.unsub = this.application.addEventObserver(async (eventName) => {
-      switch (eventName) {
-        case ApplicationEvent.FeaturesUpdated:
-        case ApplicationEvent.Launched:
-          runInAction(() => {
-            this._hasFolders = this.hasNativeFolders();
-            this._hasSmartViews = this.hasNativeSmartViews();
-          });
-          break;
-        default:
-          break;
-      }
-    });
-  }
-
-  public deinit() {
-    this.unsub();
-  }
-
-  public get hasFolders(): boolean {
-    return this._hasFolders;
-  }
-
-  public get hasSmartViews(): boolean {
-    return this._hasSmartViews;
-  }
-
-  public async showPremiumAlert(featureName: string): Promise<void> {
-    this._premiumAlertFeatureName = featureName;
-    return when(() => this._premiumAlertFeatureName === undefined);
-  }
-
-  public async closePremiumAlert(): Promise<void> {
-    this._premiumAlertFeatureName = undefined;
-  }
-
-  private hasNativeFolders(): boolean {
-    const status = this.application.features.getFeatureStatus(
-      FeatureIdentifier.TagNesting
-    );
-
-    return status === FeatureStatus.Entitled;
-  }
-
-  private hasNativeSmartViews(): boolean {
-    const status = this.application.features.getFeatureStatus(
-      FeatureIdentifier.SmartFilters
-    );
-
-    return status === FeatureStatus.Entitled;
-  }
-}
diff --git a/app/assets/javascripts/ui_models/app_state/files_state.ts b/app/assets/javascripts/ui_models/app_state/files_state.ts
deleted file mode 100644
index 7503fd7aa..000000000
--- a/app/assets/javascripts/ui_models/app_state/files_state.ts
+++ /dev/null
@@ -1,193 +0,0 @@
-import { BYTES_IN_ONE_MEGABYTE } from '@/constants';
-import { concatenateUint8Arrays } from '@/utils/concatenateUint8Arrays';
-import {
-  ClassicFileReader,
-  StreamingFileReader,
-  StreamingFileSaver,
-  ClassicFileSaver,
-  parseFileName,
-} from '@standardnotes/filepicker';
-import { ClientDisplayableError, SNFile } from '@standardnotes/snjs';
-import { addToast, dismissToast, ToastType } from '@standardnotes/stylekit';
-
-import { WebApplication } from '../application';
-
-export class FilesState {
-  constructor(private application: WebApplication) {}
-
-  public async downloadFile(file: SNFile): Promise<void> {
-    let downloadingToastId = '';
-
-    try {
-      const saver = StreamingFileSaver.available()
-        ? new StreamingFileSaver(file.name)
-        : new ClassicFileSaver();
-
-      const isUsingStreamingSaver = saver instanceof StreamingFileSaver;
-
-      if (isUsingStreamingSaver) {
-        await saver.selectFileToSaveTo();
-      }
-
-      downloadingToastId = addToast({
-        type: ToastType.Loading,
-        message: `Downloading file...`,
-      });
-
-      const decryptedBytesArray: Uint8Array[] = [];
-
-      await this.application.files.downloadFile(
-        file,
-        async (decryptedBytes: Uint8Array) => {
-          if (isUsingStreamingSaver) {
-            await saver.pushBytes(decryptedBytes);
-          } else {
-            decryptedBytesArray.push(decryptedBytes);
-          }
-        }
-      );
-
-      if (isUsingStreamingSaver) {
-        await saver.finish();
-      } else {
-        const finalBytes = concatenateUint8Arrays(decryptedBytesArray);
-        saver.saveFile(file.name, finalBytes);
-      }
-
-      addToast({
-        type: ToastType.Success,
-        message: 'Successfully downloaded file',
-      });
-    } catch (error) {
-      console.error(error);
-
-      addToast({
-        type: ToastType.Error,
-        message: 'There was an error while downloading the file',
-      });
-    }
-
-    if (downloadingToastId.length > 0) {
-      dismissToast(downloadingToastId);
-    }
-  }
-
-  public async uploadNewFile(fileOrHandle?: File | FileSystemFileHandle) {
-    let toastId = '';
-
-    try {
-      const minimumChunkSize = this.application.files.minimumChunkSize();
-
-      const shouldUseStreamingReader = StreamingFileReader.available();
-
-      const picker = shouldUseStreamingReader
-        ? StreamingFileReader
-        : ClassicFileReader;
-      const maxFileSize = picker.maximumFileSize();
-
-      const selectedFiles =
-        fileOrHandle instanceof File
-          ? [fileOrHandle]
-          : StreamingFileReader.available() &&
-            fileOrHandle instanceof FileSystemFileHandle
-          ? await StreamingFileReader.getFilesFromHandles([fileOrHandle])
-          : await picker.selectFiles();
-
-      if (selectedFiles.length === 0) {
-        return;
-      }
-
-      const uploadedFiles: SNFile[] = [];
-
-      for (const file of selectedFiles) {
-        if (
-          !shouldUseStreamingReader &&
-          maxFileSize &&
-          file.size >= maxFileSize
-        ) {
-          this.application.alertService.alert(
-            `This file exceeds the limits supported in this browser. To upload files greater than ${
-              maxFileSize / BYTES_IN_ONE_MEGABYTE
-            }MB, please use the desktop application or the Chrome browser.`,
-            `Cannot upload file "${file.name}"`
-          );
-          continue;
-        }
-
-        toastId = addToast({
-          type: ToastType.Loading,
-          message: `Uploading file "${file.name}"...`,
-        });
-
-        const operation = await this.application.files.beginNewFileUpload();
-
-        if (operation instanceof ClientDisplayableError) {
-          addToast({
-            type: ToastType.Error,
-            message: `Unable to start upload session`,
-          });
-          throw new Error(`Unable to start upload session`);
-        }
-
-        const onChunk = async (
-          chunk: Uint8Array,
-          index: number,
-          isLast: boolean
-        ) => {
-          await this.application.files.pushBytesForUpload(
-            operation,
-            chunk,
-            index,
-            isLast
-          );
-        };
-
-        const fileResult = await picker.readFile(
-          file,
-          minimumChunkSize,
-          onChunk
-        );
-
-        if (!fileResult.mimeType) {
-          const { ext } = parseFileName(file.name);
-          fileResult.mimeType = await this.application
-            .getArchiveService()
-            .getMimeType(ext);
-        }
-
-        const uploadedFile = await this.application.files.finishUpload(
-          operation,
-          fileResult
-        );
-
-        if (uploadedFile instanceof ClientDisplayableError) {
-          addToast({
-            type: ToastType.Error,
-            message: `Unable to close upload session`,
-          });
-          throw new Error(`Unable to close upload session`);
-        }
-
-        uploadedFiles.push(uploadedFile);
-
-        dismissToast(toastId);
-        addToast({
-          type: ToastType.Success,
-          message: `Uploaded file "${uploadedFile.name}"`,
-        });
-      }
-
-      return uploadedFiles;
-    } catch (error) {
-      console.error(error);
-
-      if (toastId.length > 0) {
-        dismissToast(toastId);
-      }
-      addToast({
-        type: ToastType.Error,
-        message: 'There was an error while uploading the file',
-      });
-    }
-  }
-}
diff --git a/app/assets/javascripts/ui_models/app_state/index.ts b/app/assets/javascripts/ui_models/app_state/index.ts
deleted file mode 100644
index e5ecceda8..000000000
--- a/app/assets/javascripts/ui_models/app_state/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export {
-  AppState,
-  AppStateEvent,
-  EventSource,
-  PanelResizedData,
-} from './app_state';
diff --git a/app/assets/javascripts/ui_models/app_state/sync_state.ts b/app/assets/javascripts/ui_models/app_state/sync_state.ts
deleted file mode 100644
index 287bfbf06..000000000
--- a/app/assets/javascripts/ui_models/app_state/sync_state.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { SyncOpStatus } from '@standardnotes/snjs';
-import { action, makeObservable, observable } from 'mobx';
-
-export class SyncState {
-  inProgress = false;
-  errorMessage?: string = undefined;
-  humanReadablePercentage?: string = undefined;
-
-  constructor() {
-    makeObservable(this, {
-      inProgress: observable,
-      errorMessage: observable,
-      humanReadablePercentage: observable,
-      update: action,
-    });
-  }
-
-  update = (status: SyncOpStatus): void => {
-    this.errorMessage = status.error?.message;
-    this.inProgress = status.syncInProgress;
-    const stats = status.getStats();
-    const completionPercentage =
-      stats.uploadCompletionCount === 0
-        ? 0
-        : stats.uploadCompletionCount / stats.uploadTotalCount;
-
-    if (completionPercentage === 0) {
-      this.humanReadablePercentage = undefined;
-    } else {
-      this.humanReadablePercentage = completionPercentage.toLocaleString(
-        undefined,
-        { style: 'percent' }
-      );
-    }
-  };
-}
diff --git a/app/assets/javascripts/ui_models/application.ts b/app/assets/javascripts/ui_models/application.ts
deleted file mode 100644
index e51ca5cfa..000000000
--- a/app/assets/javascripts/ui_models/application.ts
+++ /dev/null
@@ -1,155 +0,0 @@
-import { WebCrypto } from '@/crypto';
-import { AlertService } from '@/services/alertService';
-import { ArchiveManager } from '@/services/archiveManager';
-import { AutolockService } from '@/services/autolock_service';
-import { Bridge } from '@/services/bridge';
-import { DesktopManager } from '@/services/desktopManager';
-import { IOService } from '@/services/ioService';
-import { StatusManager } from '@/services/statusManager';
-import { ThemeManager } from '@/services/themeManager';
-import { AppState } from '@/ui_models/app_state';
-import { WebDeviceInterface } from '@/web_device_interface';
-import {
-  DeinitSource,
-  Platform,
-  SNApplication,
-  NoteGroupController,
-  removeFromArray,
-  IconsController,
-  Runtime,
-} from '@standardnotes/snjs';
-
-type WebServices = {
-  appState: AppState;
-  desktopService: DesktopManager;
-  autolockService: AutolockService;
-  archiveService: ArchiveManager;
-  statusManager: StatusManager;
-  themeService: ThemeManager;
-  io: IOService;
-};
-
-export enum WebAppEvent {
-  NewUpdateAvailable = 'NewUpdateAvailable',
-  DesktopWindowGainedFocus = 'DesktopWindowGainedFocus',
-  DesktopWindowLostFocus = 'DesktopWindowLostFocus',
-}
-
-export type WebEventObserver = (event: WebAppEvent) => void;
-
-export class WebApplication extends SNApplication {
-  private webServices!: WebServices;
-  private webEventObservers: WebEventObserver[] = [];
-  public noteControllerGroup: NoteGroupController;
-  public iconsController: IconsController;
-
-  constructor(
-    deviceInterface: WebDeviceInterface,
-    platform: Platform,
-    identifier: string,
-    defaultSyncServerHost: string,
-    public bridge: Bridge,
-    webSocketUrl: string,
-    runtime: Runtime
-  ) {
-    super({
-      environment: bridge.environment,
-      platform: platform,
-      deviceInterface: deviceInterface,
-      crypto: WebCrypto,
-      alertService: new AlertService(),
-      identifier,
-      defaultHost: defaultSyncServerHost,
-      appVersion: bridge.appVersion,
-      webSocketUrl: webSocketUrl,
-      runtime,
-    });
-    deviceInterface.setApplication(this);
-    this.noteControllerGroup = new NoteGroupController(this);
-    this.iconsController = new IconsController();
-  }
-
-  deinit(source: DeinitSource): void {
-    super.deinit(source);
-    try {
-      if (source === DeinitSource.AppGroupUnload) {
-        this.getThemeService().deactivateAllThemes();
-      }
-
-      for (const service of Object.values(this.webServices)) {
-        if ('deinit' in service) {
-          service.deinit?.(source);
-        }
-        (service as any).application = undefined;
-      }
-
-      this.webServices = {} as WebServices;
-      this.noteControllerGroup.deinit();
-      this.webEventObservers.length = 0;
-
-      if (source === DeinitSource.SignOut) {
-        this.bridge.onSignOut();
-      }
-    } catch (error) {
-      console.error('Error while deiniting application', error);
-    }
-  }
-
-  setWebServices(services: WebServices): void {
-    this.webServices = services;
-  }
-
-  public addWebEventObserver(observer: WebEventObserver): () => void {
-    this.webEventObservers.push(observer);
-    return () => {
-      removeFromArray(this.webEventObservers, observer);
-    };
-  }
-
-  public notifyWebEvent(event: WebAppEvent): void {
-    for (const observer of this.webEventObservers) {
-      observer(event);
-    }
-  }
-
-  public getAppState(): AppState {
-    return this.webServices.appState;
-  }
-
-  public getDesktopService(): DesktopManager {
-    return this.webServices.desktopService;
-  }
-
-  public getAutolockService() {
-    return this.webServices.autolockService;
-  }
-
-  public getArchiveService() {
-    return this.webServices.archiveService;
-  }
-
-  getStatusManager() {
-    return this.webServices.statusManager;
-  }
-
-  public getThemeService() {
-    return this.webServices.themeService;
-  }
-
-  public get io() {
-    return this.webServices.io;
-  }
-
-  async checkForSecurityUpdate() {
-    return this.protocolUpgradeAvailable();
-  }
-
-  downloadBackup(): void | Promise<void> {
-    return this.bridge.downloadBackup();
-  }
-
-  async signOutAndDeleteLocalBackups(): Promise<void> {
-    await this.bridge.deleteLocalBackups();
-    return this.user.signOut();
-  }
-}
diff --git a/app/assets/javascripts/ui_models/application_group.ts b/app/assets/javascripts/ui_models/application_group.ts
deleted file mode 100644
index f391b333b..000000000
--- a/app/assets/javascripts/ui_models/application_group.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { WebDeviceInterface } from '@/web_device_interface';
-import { WebApplication } from './application';
-import {
-  ApplicationDescriptor,
-  SNApplicationGroup,
-  DeviceInterface,
-  Platform,
-  Runtime,
-  InternalEventBus,
-} from '@standardnotes/snjs';
-import { AppState } from '@/ui_models/app_state';
-import { Bridge } from '@/services/bridge';
-import { getPlatform, isDesktopApplication } from '@/utils';
-import { ArchiveManager } from '@/services/archiveManager';
-import { DesktopManager } from '@/services/desktopManager';
-import { IOService } from '@/services/ioService';
-import { AutolockService } from '@/services/autolock_service';
-import { StatusManager } from '@/services/statusManager';
-import { ThemeManager } from '@/services/themeManager';
-
-export class ApplicationGroup extends SNApplicationGroup {
-  constructor(
-    private defaultSyncServerHost: string,
-    private bridge: Bridge,
-    private runtime: Runtime,
-    private webSocketUrl: string
-  ) {
-    super(new WebDeviceInterface(bridge));
-  }
-
-  async initialize(): Promise<void> {
-    await super.initialize({
-      applicationCreator: this.createApplication,
-    });
-
-    if (isDesktopApplication()) {
-      Object.defineProperty(window, 'desktopManager', {
-        get: () =>
-          (this.primaryApplication as WebApplication).getDesktopService(),
-      });
-    }
-  }
-
-  private createApplication = (
-    descriptor: ApplicationDescriptor,
-    deviceInterface: DeviceInterface
-  ) => {
-    const platform = getPlatform();
-    const application = new WebApplication(
-      deviceInterface as WebDeviceInterface,
-      platform,
-      descriptor.identifier,
-      this.defaultSyncServerHost,
-      this.bridge,
-      this.webSocketUrl,
-      this.runtime
-    );
-    const appState = new AppState(application, this.bridge);
-    const archiveService = new ArchiveManager(application);
-    const desktopService = new DesktopManager(application, this.bridge);
-    const io = new IOService(
-      platform === Platform.MacWeb || platform === Platform.MacDesktop
-    );
-    const autolockService = new AutolockService(
-      application,
-      new InternalEventBus()
-    );
-    const statusManager = new StatusManager();
-    const themeService = new ThemeManager(application);
-    application.setWebServices({
-      appState,
-      archiveService,
-      desktopService,
-      io,
-      autolockService,
-      statusManager,
-      themeService,
-    });
-    return application;
-  };
-}
diff --git a/app/assets/javascripts/utils/calculateSubmenuStyle.tsx b/app/assets/javascripts/utils/calculateSubmenuStyle.tsx
deleted file mode 100644
index 874bf32c1..000000000
--- a/app/assets/javascripts/utils/calculateSubmenuStyle.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import {
-  MAX_MENU_SIZE_MULTIPLIER,
-  MENU_MARGIN_FROM_APP_BORDER,
-} from '@/constants';
-
-export type SubmenuStyle = {
-  top?: number | 'auto';
-  right?: number | 'auto';
-  bottom: number | 'auto';
-  left?: number | 'auto';
-  visibility?: 'hidden' | 'visible';
-  maxHeight: number | 'auto';
-};
-
-export const calculateSubmenuStyle = (
-  button: HTMLButtonElement | null,
-  menu?: HTMLDivElement | HTMLMenuElement | null
-): SubmenuStyle | undefined => {
-  const defaultFontSize = window.getComputedStyle(
-    document.documentElement
-  ).fontSize;
-  const maxChangeEditorMenuSize =
-    parseFloat(defaultFontSize) * MAX_MENU_SIZE_MULTIPLIER;
-  const { clientWidth, clientHeight } = document.documentElement;
-  const buttonRect = button?.getBoundingClientRect();
-  const buttonParentRect = button?.parentElement?.getBoundingClientRect();
-  const menuBoundingRect = menu?.getBoundingClientRect();
-  const footerElementRect = document
-    .getElementById('footer-bar')
-    ?.getBoundingClientRect();
-  const footerHeightInPx = footerElementRect?.height ?? 0;
-
-  let position: SubmenuStyle = {
-    bottom: 'auto',
-    maxHeight: 'auto',
-  };
-
-  if (buttonRect && buttonParentRect) {
-    let positionBottom =
-      clientHeight - buttonRect.bottom - buttonRect.height / 2;
-
-    if (positionBottom < footerHeightInPx) {
-      positionBottom = footerHeightInPx + MENU_MARGIN_FROM_APP_BORDER;
-    }
-
-    position = {
-      bottom: positionBottom,
-      visibility: 'hidden',
-      maxHeight: 'auto',
-    };
-
-    if (buttonRect.right + maxChangeEditorMenuSize > clientWidth) {
-      position.right = clientWidth - buttonRect.left;
-    } else {
-      position.left = buttonRect.right;
-    }
-  }
-
-  if (menuBoundingRect?.height && buttonRect && position.bottom !== 'auto') {
-    position.visibility = 'visible';
-
-    if (menuBoundingRect.y < MENU_MARGIN_FROM_APP_BORDER) {
-      position.bottom =
-        position.bottom + menuBoundingRect.y - MENU_MARGIN_FROM_APP_BORDER * 2;
-    }
-
-    if (footerElementRect && menuBoundingRect.height > footerElementRect.y) {
-      position.bottom = footerElementRect.height + MENU_MARGIN_FROM_APP_BORDER;
-      position.maxHeight =
-        clientHeight -
-        footerElementRect.height -
-        MENU_MARGIN_FROM_APP_BORDER * 2;
-    }
-  }
-
-  return position;
-};
diff --git a/app/assets/javascripts/utils/concatenateUint8Arrays.ts b/app/assets/javascripts/utils/concatenateUint8Arrays.ts
deleted file mode 100644
index a52a09820..000000000
--- a/app/assets/javascripts/utils/concatenateUint8Arrays.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export const concatenateUint8Arrays = (arrays: Uint8Array[]) => {
-  const totalLength = arrays
-    .map((array) => array.length)
-    .reduce((prev, next) => prev + next, 0);
-
-  const concatenatedArray = new Uint8Array(totalLength);
-  let offset = 0;
-  arrays.forEach((array) => {
-    concatenatedArray.set(array, offset);
-    offset += array.length;
-  });
-
-  return concatenatedArray;
-};
diff --git a/app/assets/javascripts/utils/index.ts b/app/assets/javascripts/utils/index.ts
deleted file mode 100644
index a572f9209..000000000
--- a/app/assets/javascripts/utils/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './calculateSubmenuStyle';
-export * from './concatenateUint8Arrays';
-export * from './isMobile';
-export * from './stringUtils';
-export * from './utils';
diff --git a/app/assets/javascripts/utils/stringUtils.spec.ts b/app/assets/javascripts/utils/stringUtils.spec.ts
deleted file mode 100644
index 90bea9504..000000000
--- a/app/assets/javascripts/utils/stringUtils.spec.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import {
-  getIndexOfQueryInString,
-  splitQueryInString,
-  splitRangeWithinString,
-} from './stringUtils';
-
-describe('string utils', () => {
-  describe('splitRangeWithinString', () => {
-    it('should return whole string if range is invalid or out of bounds', () => {
-      const string = 'test-string';
-
-      const outOfBoundsStartResult = splitRangeWithinString(string, 15, 0);
-      expect(outOfBoundsStartResult).toStrictEqual(['test-string']);
-
-      const outOfBoundsEndResult = splitRangeWithinString(string, 0, -15);
-      expect(outOfBoundsEndResult).toStrictEqual(['test-string']);
-
-      const invalidRangeResult = splitRangeWithinString(string, 15, 0);
-      expect(invalidRangeResult).toStrictEqual(['test-string']);
-    });
-
-    it('should return split string if range is valid', () => {
-      const string = 'test-string';
-
-      const case1 = splitRangeWithinString(string, 0, 3);
-      expect(case1).toStrictEqual(['tes', 't-string']);
-
-      const case2 = splitRangeWithinString(string, 2, 6);
-      expect(case2).toStrictEqual(['te', 'st-s', 'tring']);
-
-      const case3 = splitRangeWithinString(string, 4, 9);
-      expect(case3).toStrictEqual(['test', '-stri', 'ng']);
-    });
-  });
-
-  describe('getIndexOfQueryInString', () => {
-    it('should get correct index of query in string', () => {
-      const string = 'tEsT-sTrInG';
-
-      const indexOfQuery1 = getIndexOfQueryInString(string, 'tRi');
-      expect(indexOfQuery1).toBe(6);
-
-      const indexOfQuery2 = getIndexOfQueryInString(string, 'StR');
-      expect(indexOfQuery2).toBe(5);
-
-      const indexOfQuery3 = getIndexOfQueryInString(string, 'stringUtils');
-      expect(indexOfQuery3).toBe(-1);
-    });
-  });
-
-  describe('splitQueryInString', () => {
-    it('should split string if it includes the query', () => {
-      const string = 'TeSt-StRiNg';
-
-      const query1Result = splitQueryInString(string, 'T-sTr');
-      expect(query1Result).toStrictEqual(['TeS', 't-StR', 'iNg']);
-
-      const query2Result = splitQueryInString(string, 'InG');
-      expect(query2Result).toStrictEqual(['TeSt-StR', 'iNg']);
-
-      const query3Result = splitQueryInString(string, 'invalid query');
-      expect(query3Result).toStrictEqual(['TeSt-StRiNg']);
-    });
-  });
-});
diff --git a/app/assets/javascripts/utils/stringUtils.ts b/app/assets/javascripts/utils/stringUtils.ts
deleted file mode 100644
index f7d29eaa8..000000000
--- a/app/assets/javascripts/utils/stringUtils.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-export const splitRangeWithinString = (
-  string: string,
-  start: number,
-  end: number
-) => {
-  const isStartOutOfBounds = start > string.length || start < 0;
-  const isEndOutOfBounds = end > string.length || end < 0;
-  const isInvalidRange = start > end;
-
-  if (isStartOutOfBounds || isEndOutOfBounds || isInvalidRange) {
-    return [string];
-  } else {
-    return [
-      string.slice(0, start),
-      string.slice(start, end),
-      string.slice(end),
-    ].filter((slice) => slice.length > 0);
-  }
-};
-
-export const getIndexOfQueryInString = (string: string, query: string) => {
-  const lowercasedTitle = string.toLowerCase();
-  const lowercasedQuery = query.toLowerCase();
-  return lowercasedTitle.indexOf(lowercasedQuery);
-};
-
-export const splitQueryInString = (string: string, query: string) => {
-  const indexOfQueryInTitle = getIndexOfQueryInString(string, query);
-
-  if (indexOfQueryInTitle < 0) {
-    return [string];
-  }
-
-  return splitRangeWithinString(
-    string,
-    indexOfQueryInTitle,
-    indexOfQueryInTitle + query.length
-  );
-};
diff --git a/app/assets/javascripts/version.ts b/app/assets/javascripts/version.ts
deleted file mode 100644
index abb410a2d..000000000
--- a/app/assets/javascripts/version.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/** Declared in webpack config */
-declare const __VERSION__: string;
-declare const __DESKTOP__: boolean;
-declare const __WEB__: boolean;
-
-export const WebAppVersion = __VERSION__;
-export const IsDesktopPlatform = __DESKTOP__;
-export const IsWebPlatform = __WEB__;
diff --git a/app/assets/stylesheets/_columns.scss b/app/assets/stylesheets/_columns.scss
index dcbaa273d..5f020b4f1 100644
--- a/app/assets/stylesheets/_columns.scss
+++ b/app/assets/stylesheets/_columns.scss
@@ -20,4 +20,4 @@
 
 .app-column {
   overflow: hidden;
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/_ionicons.scss b/app/assets/stylesheets/_ionicons.scss
index 3a8a3ddcd..f53bfc7ce 100644
--- a/app/assets/stylesheets/_ionicons.scss
+++ b/app/assets/stylesheets/_ionicons.scss
@@ -28,7 +28,6 @@
   stroke-width: 32px;
 }
 
-
 .ion,
 .ionicons,
 .ion-locked:before,
diff --git a/app/assets/stylesheets/_main.scss b/app/assets/stylesheets/_main.scss
index 18ec1060d..df5dcccde 100644
--- a/app/assets/stylesheets/_main.scss
+++ b/app/assets/stylesheets/_main.scss
@@ -29,10 +29,8 @@ body {
 
 html,
 body {
-  font-family: -apple-system, BlinkMacSystemFont,
-    "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans",
-    "Droid Sans", "Helvetica Neue", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   -moz-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
@@ -72,7 +70,10 @@ h3 {
   font-size: var(--sn-stylekit-font-size-h3);
 }
 
-input, button, select, textarea {
+input,
+button,
+select,
+textarea {
   font-family: inherit;
   font-size: inherit;
   line-height: normal;
@@ -135,7 +136,8 @@ $footer-height: 2rem;
   vertical-align: top;
   width: 100%;
 
-  panel-resizer, .panel-resizer {
+  panel-resizer,
+  .panel-resizer {
     top: 0;
     right: 0;
     z-index: $z-index-panel-resizer;
@@ -210,26 +212,25 @@ $footer-height: 2rem;
     }
 
     .section-title-bar {
+      .add-button {
+        font-size: 12px;
+      }
 
-     .add-button {
-       font-size: 12px;
-     }
+      .section-title-bar-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        // This was causing problems with tags + button cutting off on right when the panel is a certain size
+        // overflow: hidden;
 
-     .section-title-bar-header {
-       display: flex;
-       justify-content: space-between;
-       align-items: center;
-       // This was causing problems with tags + button cutting off on right when the panel is a certain size
-       // overflow: hidden;
-
-       > .title {
-         white-space: nowrap;
-         text-overflow: ellipsis;
-         width: 80%;
-         overflow: hidden;
-       }
-     }
-   }
+        > .title {
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          width: 80%;
+          overflow: hidden;
+        }
+      }
+    }
   }
 }
 
@@ -261,4 +262,4 @@ textarea {
     -ms-user-select: none;
     -o-user-select: none;
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/_modals.scss b/app/assets/stylesheets/_modals.scss
index 2730c6c41..35e25ff9f 100644
--- a/app/assets/stylesheets/_modals.scss
+++ b/app/assets/stylesheets/_modals.scss
@@ -14,7 +14,8 @@
 .challenge-modal {
   min-width: 0 !important;
 
-  .prompt, .subprompt {
+  .prompt,
+  .subprompt {
     text-align: center;
   }
   .sk-panel .sk-panel-header {
@@ -25,7 +26,8 @@
 #account-switcher {
   min-width: 400px;
   max-width: 580px;
-  input, input:disabled {
+  input,
+  input:disabled {
     width: 100%;
     border: none;
     background-color: transparent !important;
diff --git a/app/assets/stylesheets/_notes.scss b/app/assets/stylesheets/_notes.scss
index 995e29e84..673f5d0e0 100644
--- a/app/assets/stylesheets/_notes.scss
+++ b/app/assets/stylesheets/_notes.scss
@@ -78,8 +78,8 @@
       margin-top: 10px;
 
       display: grid;
-      grid-template-columns: repeat( 3, 1fr );
-      gap: .5rem;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 0.5rem;
 
       font-size: var(--sn-stylekit-font-size-p);
       white-space: nowrap;
diff --git a/app/assets/stylesheets/_scrollbar.scss b/app/assets/stylesheets/_scrollbar.scss
index 3c5bb8bc3..70b058d70 100644
--- a/app/assets/stylesheets/_scrollbar.scss
+++ b/app/assets/stylesheets/_scrollbar.scss
@@ -6,4 +6,4 @@
     overflow-y: auto;
     overflow-y: overlay;
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/_sessions-modal.scss b/app/assets/stylesheets/_sessions-modal.scss
index eb1e494f8..02c0b67d7 100644
--- a/app/assets/stylesheets/_sessions-modal.scss
+++ b/app/assets/stylesheets/_sessions-modal.scss
@@ -2,7 +2,9 @@
   min-width: 40vw;
   width: auto;
 
-  h2, ul, p {
+  h2,
+  ul,
+  p {
     margin: 0;
     padding: 0;
   }
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 38227287c..e61ced799 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -1059,9 +1059,8 @@
 }
 
 .transition {
-  transition-property: color, background-color, border-color,
-    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
-    backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
+    opacity, box-shadow, transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 100ms;
 }
diff --git a/app/assets/stylesheets/_stylekit-sub.scss b/app/assets/stylesheets/_stylekit-sub.scss
index 9c113a9fd..64569719e 100644
--- a/app/assets/stylesheets/_stylekit-sub.scss
+++ b/app/assets/stylesheets/_stylekit-sub.scss
@@ -82,7 +82,8 @@ button.sk-button {
   border: none;
 }
 
-a, .sk-a {
+a,
+.sk-a {
   background: none;
   border: none;
   color: var(--sn-stylekit-info-color);
@@ -105,12 +106,13 @@ input:focus {
   box-shadow: 0 0 0 1px var(--sn-stylekit-info-color);
 }
 
-.sk-button:focus, button:focus {
-  box-shadow: 0 0 0 2px var(--sn-stylekit-background-color),
-    0 0 0 4px var(--sn-stylekit-info-color);
+.sk-button:focus,
+button:focus {
+  box-shadow: 0 0 0 2px var(--sn-stylekit-background-color), 0 0 0 4px var(--sn-stylekit-info-color);
 }
 
-.sk-button:focus-visible, button:focus-visible {
+.sk-button:focus-visible,
+button:focus-visible {
   outline: none;
 }
 
@@ -120,4 +122,4 @@ input:focus {
     height: 1.5rem;
     border-width: 2px;
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/_ui.scss b/app/assets/stylesheets/_ui.scss
index 155cc39fb..d16d323b2 100644
--- a/app/assets/stylesheets/_ui.scss
+++ b/app/assets/stylesheets/_ui.scss
@@ -4,33 +4,33 @@
 
 // Extra small screen / phone
 //** Deprecated `$screen-xs` as of v3.0.1
-$screen-xs:                  480px !default;
+$screen-xs: 480px !default;
 //** Deprecated `$screen-xs-min` as of v3.2.0
-$screen-xs-min:              $screen-xs !default;
+$screen-xs-min: $screen-xs !default;
 
 // Small screen / tablet
 //** Deprecated `$screen-sm` as of v3.0.1
-$screen-sm:                  768px !default;
-$screen-sm-min:              $screen-sm !default;
+$screen-sm: 768px !default;
+$screen-sm-min: $screen-sm !default;
 
 // Medium screen / desktop
 //** Deprecated `$screen-md` as of v3.0.1
-$screen-md:                  992px !default;
-$screen-md-min:              $screen-md !default;
+$screen-md: 992px !default;
+$screen-md-min: $screen-md !default;
 //** Deprecated `$screen-desktop` as of v3.0.1
-$screen-desktop:             $screen-md-min !default;
+$screen-desktop: $screen-md-min !default;
 
 // Large screen / wide desktop
 //** Deprecated `$screen-lg` as of v3.0.1
-$screen-lg:                  1200px !default;
-$screen-lg-min:              $screen-lg !default;
+$screen-lg: 1200px !default;
+$screen-lg-min: $screen-lg !default;
 //** Deprecated `$screen-lg-desktop` as of v3.0.1
-$screen-lg-desktop:          $screen-lg-min !default;
+$screen-lg-desktop: $screen-lg-min !default;
 
 // So media queries don't overlap when required, provide a maximum
-$screen-xs-max:              ($screen-sm-min - 1) !default;
-$screen-sm-max:              ($screen-md-min - 1) !default;
-$screen-md-max:              ($screen-lg-min - 1) !default;
+$screen-xs-max: ($screen-sm-min - 1) !default;
+$screen-sm-max: ($screen-md-min - 1) !default;
+$screen-md-max: ($screen-lg-min - 1) !default;
 
 @mixin MQ-Xsmall() {
   @media (max-width: $screen-xs-max) {
@@ -50,7 +50,6 @@ $screen-md-max:              ($screen-lg-min - 1) !default;
   }
 }
 
-
 @mixin MQ-Large() {
   @media (min-width: $screen-lg-min) {
     @content;
@@ -90,7 +89,7 @@ $screen-md-max:              ($screen-lg-min - 1) !default;
 }
 
 .animate-slide-in-top {
-  animation: slide-in-top .1s ease-out;
+  animation: slide-in-top 0.1s ease-out;
 }
 
 @keyframes slide-in-top {
@@ -115,13 +114,13 @@ $screen-md-max:              ($screen-lg-min - 1) !default;
 }
 
 .mt-1 {
-  margin-top: .203125rem;
+  margin-top: 0.203125rem;
 }
 .mt-2 {
-  margin-top: .40625rem;
+  margin-top: 0.40625rem;
 }
 .mt-3 {
-  margin-top: .609375rem;
+  margin-top: 0.609375rem;
 }
 .mt-5 {
   margin-top: 1.015625rem;
@@ -145,13 +144,13 @@ $screen-md-max:              ($screen-lg-min - 1) !default;
 }
 
 .px-3 {
-  padding-left: .609375rem;
-  padding-right: .609375rem;
+  padding-left: 0.609375rem;
+  padding-right: 0.609375rem;
 }
 
 .py-2 {
-  padding-top: .40625rem;
-  padding-bottom: .40625rem;
+  padding-top: 0.40625rem;
+  padding-bottom: 0.40625rem;
 }
 
 .border-0 {
@@ -187,7 +186,7 @@ $screen-md-max:              ($screen-lg-min - 1) !default;
 }
 
 .hover\:color-info:hover {
-  color: var(--sn-stylekit-info-color)
+  color: var(--sn-stylekit-info-color);
 }
 
 .hover\:brightness-130:hover {
@@ -197,7 +196,7 @@ $screen-md-max:              ($screen-lg-min - 1) !default;
 .cursor-pointer {
   cursor: pointer;
 
-  input[type="checkbox"] {
+  input[type='checkbox'] {
     cursor: pointer;
   }
 }
@@ -242,7 +241,7 @@ $screen-md-max:              ($screen-lg-min - 1) !default;
 }
 
 .text-sm {
-  font-size: var(--sn-stylekit-font-size-h5);;
+  font-size: var(--sn-stylekit-font-size-h5);
 }
 .text-info-contrast {
   color: var(--sn-stylekit-info-contrast-color);
diff --git a/package.json b/package.json
index f26895e8f..82901333f 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "@babel/plugin-transform-react-jsx": "^7.17.3",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-typescript": "^7.16.7",
+    "@standardnotes/config": "^2.3.1",
     "@svgr/webpack": "^6.2.1",
     "@types/jest": "^27.4.1",
     "@types/react": "^17.0.42",
@@ -60,8 +61,8 @@
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {
-    "@reach/alert-dialog": "^0.16.2",
     "@reach/alert": "^0.16.0",
+    "@reach/alert-dialog": "^0.16.2",
     "@reach/checkbox": "^0.16.0",
     "@reach/dialog": "^0.16.2",
     "@reach/disclosure": "^0.16.2",
@@ -74,13 +75,13 @@
     "@standardnotes/snjs": "2.94.3",
     "@standardnotes/stylekit": "5.21.3",
     "@zip.js/zip.js": "^2.4.7",
-    "mobx-react-lite": "^3.3.0",
     "mobx": "^6.5.0",
+    "mobx-react-lite": "^3.3.0",
     "preact": "^10.6.6",
     "qrcode.react": "^2.0.0",
+    "react-dnd": "^15.1.1",
     "react-dnd-html5-backend": "^15.1.2",
-    "react-dnd-touch-backend": "^15.1.1",
-    "react-dnd": "^15.1.1"
+    "react-dnd-touch-backend": "^15.1.1"
   },
   "lint-staged": {
     "app/**/*.{js,ts,jsx,tsx}": "eslint --cache --fix",
diff --git a/yarn.lock b/yarn.lock
index b457e95f1..b69bd4453 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2406,6 +2406,14 @@
   resolved "https://registry.yarnpkg.com/@standardnotes/components/-/components-1.7.14.tgz#ddd5b4d5787d3f90a4e1a88cfd95995f9267b1d1"
   integrity sha512-NDzP8/lmzgFBjxfmaE3OSOjPfozs3vednFfrjmjri5kCXlfClEISL6b/kh6B6wv/x9DIFveOsRj2Lrov+5IXdw==
 
+"@standardnotes/config@^2.3.1":
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/config/-/config-2.3.1.tgz#7d299748911a0703742727fd6fa592ac56136998"
+  integrity sha512-G5UeKgB3R862KBSIFtfs60C0NKGkxqDFdVUcArYE0+BmiIYZKVcaykjtycTQGhF18cPLtlCcIfta04+4CfFM1w==
+  dependencies:
+    "@typescript-eslint/eslint-plugin" "^5.12.1"
+    "@typescript-eslint/parser" "^5.12.1"
+
 "@standardnotes/domain-events@^2.26.9":
   version "2.26.9"
   resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.26.9.tgz#09d3ac547e263ff957a9a645a6c1f0039aa85ccd"
@@ -2928,6 +2936,21 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@typescript-eslint/eslint-plugin@^5.12.1":
+  version "5.19.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.19.0.tgz#9608a4b6d0427104bccf132f058cba629a6553c0"
+  integrity sha512-w59GpFqDYGnWFim9p6TGJz7a3qWeENJuAKCqjGSx+Hq/bwq3RZwXYqy98KIfN85yDqz9mq6QXiY5h0FjGQLyEg==
+  dependencies:
+    "@typescript-eslint/scope-manager" "5.19.0"
+    "@typescript-eslint/type-utils" "5.19.0"
+    "@typescript-eslint/utils" "5.19.0"
+    debug "^4.3.2"
+    functional-red-black-tree "^1.0.1"
+    ignore "^5.1.8"
+    regexpp "^3.2.0"
+    semver "^7.3.5"
+    tsutils "^3.21.0"
+
 "@typescript-eslint/eslint-plugin@^5.16.0":
   version "5.16.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.16.0.tgz#78f246dd8d1b528fc5bfca99a8a64d4023a3d86d"
@@ -2943,6 +2966,16 @@
     semver "^7.3.5"
     tsutils "^3.21.0"
 
+"@typescript-eslint/parser@^5.12.1":
+  version "5.19.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.19.0.tgz#05e587c1492868929b931afa0cb5579b0f728e75"
+  integrity sha512-yhktJjMCJX8BSBczh1F/uY8wGRYrBeyn84kH6oyqdIJwTGKmzX5Qiq49LRQ0Jh0LXnWijEziSo6BRqny8nqLVQ==
+  dependencies:
+    "@typescript-eslint/scope-manager" "5.19.0"
+    "@typescript-eslint/types" "5.19.0"
+    "@typescript-eslint/typescript-estree" "5.19.0"
+    debug "^4.3.2"
+
 "@typescript-eslint/parser@^5.16.0":
   version "5.16.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.16.0.tgz#e4de1bde4b4dad5b6124d3da227347616ed55508"
@@ -2961,6 +2994,14 @@
     "@typescript-eslint/types" "5.16.0"
     "@typescript-eslint/visitor-keys" "5.16.0"
 
+"@typescript-eslint/scope-manager@5.19.0":
+  version "5.19.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.19.0.tgz#97e59b0bcbcb54dbcdfba96fc103b9020bbe9cb4"
+  integrity sha512-Fz+VrjLmwq5fbQn5W7cIJZ066HxLMKvDEmf4eu1tZ8O956aoX45jAuBB76miAECMTODyUxH61AQM7q4/GOMQ5g==
+  dependencies:
+    "@typescript-eslint/types" "5.19.0"
+    "@typescript-eslint/visitor-keys" "5.19.0"
+
 "@typescript-eslint/type-utils@5.16.0":
   version "5.16.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.16.0.tgz#b482bdde1d7d7c0c7080f7f2f67ea9580b9e0692"
@@ -2970,11 +3011,25 @@
     debug "^4.3.2"
     tsutils "^3.21.0"
 
+"@typescript-eslint/type-utils@5.19.0":
+  version "5.19.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.19.0.tgz#80f2125b0dfe82494bbae1ea99f1c0186d420282"
+  integrity sha512-O6XQ4RI4rQcBGshTQAYBUIGsKqrKeuIOz9v8bckXZnSeXjn/1+BDZndHLe10UplQeJLXDNbaZYrAytKNQO2T4Q==
+  dependencies:
+    "@typescript-eslint/utils" "5.19.0"
+    debug "^4.3.2"
+    tsutils "^3.21.0"
+
 "@typescript-eslint/types@5.16.0":
   version "5.16.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.16.0.tgz#5827b011982950ed350f075eaecb7f47d3c643ee"
   integrity sha512-oUorOwLj/3/3p/HFwrp6m/J2VfbLC8gjW5X3awpQJ/bSG+YRGFS4dpsvtQ8T2VNveV+LflQHjlLvB6v0R87z4g==
 
+"@typescript-eslint/types@5.19.0":
+  version "5.19.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.19.0.tgz#12d3d600d754259da771806ee8b2c842d3be8d12"
+  integrity sha512-zR1ithF4Iyq1wLwkDcT+qFnhs8L5VUtjgac212ftiOP/ZZUOCuuF2DeGiZZGQXGoHA50OreZqLH5NjDcDqn34w==
+
 "@typescript-eslint/typescript-estree@5.16.0":
   version "5.16.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.16.0.tgz#32259459ec62f5feddca66adc695342f30101f61"
@@ -2988,6 +3043,19 @@
     semver "^7.3.5"
     tsutils "^3.21.0"
 
+"@typescript-eslint/typescript-estree@5.19.0":
+  version "5.19.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.19.0.tgz#fc987b8f62883f9ea6a5b488bdbcd20d33c0025f"
+  integrity sha512-dRPuD4ocXdaE1BM/dNR21elSEUPKaWgowCA0bqJ6YbYkvtrPVEvZ+zqcX5a8ECYn3q5iBSSUcBBD42ubaOp0Hw==
+  dependencies:
+    "@typescript-eslint/types" "5.19.0"
+    "@typescript-eslint/visitor-keys" "5.19.0"
+    debug "^4.3.2"
+    globby "^11.0.4"
+    is-glob "^4.0.3"
+    semver "^7.3.5"
+    tsutils "^3.21.0"
+
 "@typescript-eslint/utils@5.16.0":
   version "5.16.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.16.0.tgz#42218b459d6d66418a4eb199a382bdc261650679"
@@ -3000,6 +3068,18 @@
     eslint-scope "^5.1.1"
     eslint-utils "^3.0.0"
 
+"@typescript-eslint/utils@5.19.0":
+  version "5.19.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.19.0.tgz#fe87f1e3003d9973ec361ed10d36b4342f1ded1e"
+  integrity sha512-ZuEckdupXpXamKvFz/Ql8YnePh2ZWcwz7APICzJL985Rp5C2AYcHO62oJzIqNhAMtMK6XvrlBTZeNG8n7gS3lQ==
+  dependencies:
+    "@types/json-schema" "^7.0.9"
+    "@typescript-eslint/scope-manager" "5.19.0"
+    "@typescript-eslint/types" "5.19.0"
+    "@typescript-eslint/typescript-estree" "5.19.0"
+    eslint-scope "^5.1.1"
+    eslint-utils "^3.0.0"
+
 "@typescript-eslint/visitor-keys@5.16.0":
   version "5.16.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.16.0.tgz#f27dc3b943e6317264c7492e390c6844cd4efbbb"
@@ -3008,6 +3088,14 @@
     "@typescript-eslint/types" "5.16.0"
     eslint-visitor-keys "^3.0.0"
 
+"@typescript-eslint/visitor-keys@5.19.0":
+  version "5.19.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.19.0.tgz#c84ebc7f6c744707a361ca5ec7f7f64cd85b8af6"
+  integrity sha512-Ym7zZoMDZcAKWsULi2s7UMLREdVQdScPQ/fKWMYefarCztWlHPFVJo8racf8R0Gc8FAEJ2eD4of8As1oFtnQlQ==
+  dependencies:
+    "@typescript-eslint/types" "5.19.0"
+    eslint-visitor-keys "^3.0.0"
+
 "@webassemblyjs/ast@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"

From 9ba7b875a87f15dedd528a68848bcd311466c3da Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Wed, 13 Apr 2022 22:20:56 +0530
Subject: [PATCH 017/102] feat: add workspace switcher to lock screen (#969)

---
 .../WorkspaceSwitcher/WorkspaceMenuItem.tsx   |  4 +-
 .../WorkspaceSwitcherMenu.tsx                 |  4 +-
 .../Components/ApplicationView/index.tsx      |  2 +
 .../ChallengeModal/ChallengeModal.tsx         | 20 ++++-
 .../LockscreenWorkspaceSwitcher.tsx           | 78 +++++++++++++++++++
 .../Components/Navigation/index.tsx           |  7 +-
 .../Components/NotesView/index.tsx            |  7 +-
 .../Preferences/Panes/Account/Advanced.tsx    |  5 +-
 .../Account/Subscription/Subscription.tsx     |  6 +-
 .../Preferences/Panes/Backups/DataBackups.tsx |  8 +-
 .../Panes/Backups/EmailBackups.tsx            |  8 +-
 .../Extensions/ConfirmCustomExtension.tsx     |  7 +-
 .../Panes/Extensions/ExtensionItem.tsx        |  6 +-
 .../Preferences/Panes/Security/Encryption.tsx |  7 +-
 .../Panes/TwoFactorAuth/TwoFactorAuthView.tsx |  7 +-
 15 files changed, 163 insertions(+), 13 deletions(-)
 create mode 100644 app/assets/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx

diff --git a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
index 11026f65b..38951fe7d 100644
--- a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
@@ -10,6 +10,7 @@ type Props = {
   onClick: () => void
   onDelete: () => void
   renameDescriptor: (label: string) => void
+  hideOptions: boolean
 }
 
 export const WorkspaceMenuItem: FunctionComponent<Props> = ({
@@ -17,6 +18,7 @@ export const WorkspaceMenuItem: FunctionComponent<Props> = ({
   onClick,
   onDelete,
   renameDescriptor,
+  hideOptions,
 }) => {
   const [isRenaming, setIsRenaming] = useState(false)
   const inputRef = useRef<HTMLInputElement>(null)
@@ -58,7 +60,7 @@ export const WorkspaceMenuItem: FunctionComponent<Props> = ({
         ) : (
           <div>{descriptor.label}</div>
         )}
-        {descriptor.primary && (
+        {descriptor.primary && !hideOptions && (
           <div>
             <button
               className="w-5 h-5 p-0 mr-3 border-0 bg-transparent hover:bg-contrast cursor-pointer"
diff --git a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx
index 876b4c291..677c2b20c 100644
--- a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx
@@ -13,10 +13,11 @@ type Props = {
   mainApplicationGroup: ApplicationGroup
   appState: AppState
   isOpen: boolean
+  hideWorkspaceOptions?: boolean
 }
 
 export const WorkspaceSwitcherMenu: FunctionComponent<Props> = observer(
-  ({ mainApplicationGroup, appState, isOpen }) => {
+  ({ mainApplicationGroup, appState, isOpen, hideWorkspaceOptions = false }) => {
     const [applicationDescriptors, setApplicationDescriptors] = useState<ApplicationDescriptor[]>(
       [],
     )
@@ -37,6 +38,7 @@ export const WorkspaceSwitcherMenu: FunctionComponent<Props> = observer(
         {applicationDescriptors.map((descriptor) => (
           <WorkspaceMenuItem
             descriptor={descriptor}
+            hideOptions={hideWorkspaceOptions}
             onDelete={() => {
               appState.accountMenu.setSigningOut(true)
             }}
diff --git a/app/assets/javascripts/Components/ApplicationView/index.tsx b/app/assets/javascripts/Components/ApplicationView/index.tsx
index b6b408a94..9fe5481f4 100644
--- a/app/assets/javascripts/Components/ApplicationView/index.tsx
+++ b/app/assets/javascripts/Components/ApplicationView/index.tsx
@@ -193,6 +193,8 @@ export class ApplicationView extends PureComponent<Props, State> {
                   <ChallengeModal
                     key={challenge.id}
                     application={this.application}
+                    appState={this.appState}
+                    mainApplicationGroup={this.props.mainApplicationGroup}
                     challenge={challenge}
                     onDismiss={this.removeChallenge}
                   />
diff --git a/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx b/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx
index c3990d784..8a43fb638 100644
--- a/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx
+++ b/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx
@@ -14,6 +14,9 @@ import { useCallback, useEffect, useState } from 'preact/hooks'
 import { Button } from '@/Components/Button/Button'
 import { Icon } from '@/Components/Icon'
 import { ChallengeModalPrompt } from './ChallengePrompt'
+import { LockscreenWorkspaceSwitcher } from './LockscreenWorkspaceSwitcher'
+import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
+import { AppState } from '@/UIModels/AppState'
 
 type InputValue = {
   prompt: ChallengePrompt
@@ -25,6 +28,8 @@ export type ChallengeModalValues = Record<ChallengePrompt['id'], InputValue>
 
 type Props = {
   application: WebApplication
+  appState: AppState
+  mainApplicationGroup: ApplicationGroup
   challenge: Challenge
   onDismiss: (challenge: Challenge) => Promise<void>
 }
@@ -48,7 +53,13 @@ const validateValues = (
   return undefined
 }
 
-export const ChallengeModal: FunctionComponent<Props> = ({ application, challenge, onDismiss }) => {
+export const ChallengeModal: FunctionComponent<Props> = ({
+  application,
+  appState,
+  mainApplicationGroup,
+  challenge,
+  onDismiss,
+}) => {
   const [values, setValues] = useState<ChallengeModalValues>(() => {
     const values = {} as ChallengeModalValues
     for (const prompt of challenge.prompts) {
@@ -68,6 +79,7 @@ export const ChallengeModal: FunctionComponent<Props> = ({ application, challeng
     ChallengeReason.ApplicationUnlock,
     ChallengeReason.Migration,
   ].includes(challenge.reason)
+  const shouldShowWorkspaceSwitcher = challenge.reason === ChallengeReason.ApplicationUnlock
 
   const submit = async () => {
     const validatedValues = validateValues(values, challenge.prompts)
@@ -252,6 +264,12 @@ export const ChallengeModal: FunctionComponent<Props> = ({ application, challeng
             Forgot passcode?
           </Button>
         )}
+        {shouldShowWorkspaceSwitcher && (
+          <LockscreenWorkspaceSwitcher
+            mainApplicationGroup={mainApplicationGroup}
+            appState={appState}
+          />
+        )}
       </DialogContent>
     </DialogOverlay>
   )
diff --git a/app/assets/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx b/app/assets/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx
new file mode 100644
index 000000000..f9f382d80
--- /dev/null
+++ b/app/assets/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx
@@ -0,0 +1,78 @@
+import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
+import { AppState } from '@/UIModels/AppState'
+import { calculateSubmenuStyle, SubmenuStyle } from '@/Utils/CalculateSubmenuStyle'
+import { FunctionComponent } from 'preact'
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { WorkspaceSwitcherMenu } from '@/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu'
+import { Button } from '@/Components/Button/Button'
+import { Icon } from '@/Components/Icon'
+import { useCloseOnClickOutside } from '@/Hooks/useCloseOnClickOutside'
+
+type Props = {
+  mainApplicationGroup: ApplicationGroup
+  appState: AppState
+}
+
+export const LockscreenWorkspaceSwitcher: FunctionComponent<Props> = ({
+  mainApplicationGroup,
+  appState,
+}) => {
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [isOpen, setIsOpen] = useState(false)
+  const [menuStyle, setMenuStyle] = useState<SubmenuStyle>()
+
+  useCloseOnClickOutside(containerRef, () => setIsOpen(false))
+
+  const toggleMenu = () => {
+    if (!isOpen) {
+      const menuPosition = calculateSubmenuStyle(buttonRef.current)
+      if (menuPosition) {
+        setMenuStyle(menuPosition)
+      }
+    }
+
+    setIsOpen(!isOpen)
+  }
+
+  useEffect(() => {
+    if (isOpen) {
+      const timeToWaitBeforeCheckingMenuCollision = 0
+      setTimeout(() => {
+        const newMenuPosition = calculateSubmenuStyle(buttonRef.current, menuRef.current)
+
+        if (newMenuPosition) {
+          setMenuStyle(newMenuPosition)
+        }
+      }, timeToWaitBeforeCheckingMenuCollision)
+    }
+  }, [isOpen])
+
+  return (
+    <div ref={containerRef}>
+      <Button
+        ref={buttonRef}
+        onClick={toggleMenu}
+        className="flex items-center justify-center min-w-76 mt-2"
+      >
+        <Icon type="user-switch" className="color-neutral mr-2" />
+        Switch workspace
+      </Button>
+      {isOpen && (
+        <div
+          ref={menuRef}
+          className="sn-dropdown max-h-120 min-w-68 py-2 fixed overflow-y-auto"
+          style={menuStyle}
+        >
+          <WorkspaceSwitcherMenu
+            mainApplicationGroup={mainApplicationGroup}
+            appState={appState}
+            isOpen={isOpen}
+            hideWorkspaceOptions={true}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/app/assets/javascripts/Components/Navigation/index.tsx b/app/assets/javascripts/Components/Navigation/index.tsx
index 6f1d3e408..e29fe6ca0 100644
--- a/app/assets/javascripts/Components/Navigation/index.tsx
+++ b/app/assets/javascripts/Components/Navigation/index.tsx
@@ -6,7 +6,12 @@ import { ApplicationEvent, PrefKey } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
 import { useCallback, useEffect, useMemo, useState } from 'preact/hooks'
-import { PanelSide, ResizeFinishCallback, PanelResizer, PanelResizeType } from '@/Components/PanelResizer'
+import {
+  PanelSide,
+  ResizeFinishCallback,
+  PanelResizer,
+  PanelResizeType,
+} from '@/Components/PanelResizer'
 
 type Props = {
   application: WebApplication
diff --git a/app/assets/javascripts/Components/NotesView/index.tsx b/app/assets/javascripts/Components/NotesView/index.tsx
index 305b4d4ef..d0b7d1e26 100644
--- a/app/assets/javascripts/Components/NotesView/index.tsx
+++ b/app/assets/javascripts/Components/NotesView/index.tsx
@@ -10,7 +10,12 @@ import { NoAccountWarning } from '@/Components/NoAccountWarning'
 import { NotesList } from '@/Components/NotesList'
 import { NotesListOptionsMenu } from '@/Components/NotesList/NotesListOptionsMenu'
 import { SearchOptions } from '@/Components/SearchOptions'
-import { PanelSide, ResizeFinishCallback, PanelResizer, PanelResizeType } from '@/Components/PanelResizer'
+import {
+  PanelSide,
+  ResizeFinishCallback,
+  PanelResizer,
+  PanelResizeType,
+} from '@/Components/PanelResizer'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
 import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
 
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/Advanced.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/Advanced.tsx
index c07dded54..ce1be0b8a 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Account/Advanced.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/Advanced.tsx
@@ -1,5 +1,8 @@
 import { FunctionalComponent } from 'preact'
-import { PreferencesGroup, PreferencesSegment } from '@/Components/Preferences/PreferencesComponents'
+import {
+  PreferencesGroup,
+  PreferencesSegment,
+} from '@/Components/Preferences/PreferencesComponents'
 import { OfflineSubscription } from '@/Components/Preferences/Panes/Account/OfflineSubscription'
 import { WebApplication } from '@/UIModels/Application'
 import { observer } from 'mobx-react-lite'
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/Subscription.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/Subscription.tsx
index b440a211e..b9d8822f8 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/Subscription.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/Subscription.tsx
@@ -1,4 +1,8 @@
-import { PreferencesGroup, PreferencesSegment, Title } from '@/Components/Preferences/PreferencesComponents'
+import {
+  PreferencesGroup,
+  PreferencesSegment,
+  Title,
+} from '@/Components/Preferences/PreferencesComponents'
 import { WebApplication } from '@/UIModels/Application'
 import { SubscriptionInformation } from './SubscriptionInformation'
 import { NoSubscription } from './NoSubscription'
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Backups/DataBackups.tsx b/app/assets/javascripts/Components/Preferences/Panes/Backups/DataBackups.tsx
index bd5f660b3..23f494f7c 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Backups/DataBackups.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Backups/DataBackups.tsx
@@ -17,7 +17,13 @@ import { JSXInternal } from 'preact/src/jsx'
 import TargetedEvent = JSXInternal.TargetedEvent
 import { AppState } from '@/UIModels/AppState'
 import { observer } from 'mobx-react-lite'
-import { PreferencesGroup, PreferencesSegment, Title, Text, Subtitle } from '@/Components/Preferences/PreferencesComponents'
+import {
+  PreferencesGroup,
+  PreferencesSegment,
+  Title,
+  Text,
+  Subtitle,
+} from '@/Components/Preferences/PreferencesComponents'
 import { Button } from '@/Components/Button/Button'
 
 type Props = {
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Backups/EmailBackups.tsx b/app/assets/javascripts/Components/Preferences/Panes/Backups/EmailBackups.tsx
index 350c18801..769425131 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Backups/EmailBackups.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Backups/EmailBackups.tsx
@@ -3,7 +3,13 @@ import { STRING_FAILED_TO_UPDATE_USER_SETTING } from '@/Strings'
 import { useCallback, useEffect, useState } from 'preact/hooks'
 import { WebApplication } from '@/UIModels/Application'
 import { observer } from 'mobx-react-lite'
-import { PreferencesGroup, PreferencesSegment, Subtitle, Text, Title } from '@/Components/Preferences/PreferencesComponents'
+import {
+  PreferencesGroup,
+  PreferencesSegment,
+  Subtitle,
+  Text,
+  Title,
+} from '@/Components/Preferences/PreferencesComponents'
 import { Dropdown, DropdownItem } from '@/Components/Dropdown'
 import { Switch } from '@/Components/Switch'
 import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Extensions/ConfirmCustomExtension.tsx b/app/assets/javascripts/Components/Preferences/Panes/Extensions/ConfirmCustomExtension.tsx
index 887d4fe1f..b7e0a7771 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Extensions/ConfirmCustomExtension.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Extensions/ConfirmCustomExtension.tsx
@@ -1,7 +1,12 @@
 import { DisplayStringForContentType, SNComponent } from '@standardnotes/snjs'
 import { Button } from '@/Components/Button/Button'
 import { FunctionComponent } from 'preact'
-import { Title, Text, Subtitle, PreferencesSegment } from '@/Components/Preferences/PreferencesComponents'
+import {
+  Title,
+  Text,
+  Subtitle,
+  PreferencesSegment,
+} from '@/Components/Preferences/PreferencesComponents'
 
 export const ConfirmCustomExtension: FunctionComponent<{
   component: SNComponent
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionItem.tsx b/app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionItem.tsx
index deae4da31..caec18d0a 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionItem.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionItem.tsx
@@ -1,6 +1,10 @@
 import { FunctionComponent } from 'preact'
 import { SNComponent } from '@standardnotes/snjs'
-import { PreferencesSegment, SubtitleLight, Title } from '@/Components/Preferences/PreferencesComponents'
+import {
+  PreferencesSegment,
+  SubtitleLight,
+  Title,
+} from '@/Components/Preferences/PreferencesComponents'
 import { Switch } from '@/Components/Switch'
 import { WebApplication } from '@/UIModels/Application'
 import { useState } from 'preact/hooks'
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Security/Encryption.tsx b/app/assets/javascripts/Components/Preferences/Panes/Security/Encryption.tsx
index 4ac4ce7f8..bdb486b1b 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Security/Encryption.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Security/Encryption.tsx
@@ -3,7 +3,12 @@ import { STRING_E2E_ENABLED, STRING_ENC_NOT_ENABLED, STRING_LOCAL_ENC_ENABLED }
 import { AppState } from '@/UIModels/AppState'
 import { observer } from 'mobx-react-lite'
 import { ComponentChild, FunctionComponent } from 'preact'
-import { PreferencesGroup, PreferencesSegment, Text, Title } from '@/Components/Preferences/PreferencesComponents'
+import {
+  PreferencesGroup,
+  PreferencesSegment,
+  Text,
+  Title,
+} from '@/Components/Preferences/PreferencesComponents'
 
 const formatCount = (count: number, itemType: string) => `${count} / ${count} ${itemType}`
 
diff --git a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView.tsx b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView.tsx
index c9ab5fbfc..0d842301a 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView.tsx
@@ -1,5 +1,10 @@
 import { FunctionComponent } from 'preact'
-import { Title, Text, PreferencesGroup, PreferencesSegment } from '@/Components/Preferences/PreferencesComponents'
+import {
+  Title,
+  Text,
+  PreferencesGroup,
+  PreferencesSegment,
+} from '@/Components/Preferences/PreferencesComponents'
 import { Switch } from '@/Components/Switch'
 import { observer } from 'mobx-react-lite'
 import { is2FAActivation, is2FADisabled, TwoFactorAuth } from './TwoFactorAuth'

From a91a1cbddd2c1f272d9127e75eafb1ab4b82de78 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Wed, 13 Apr 2022 23:54:19 +0530
Subject: [PATCH 018/102] fix: challenge modal button label (#972)

---
 .../javascripts/Components/ChallengeModal/ChallengeModal.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx b/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx
index 8a43fb638..bf8219fea 100644
--- a/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx
+++ b/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx
@@ -235,7 +235,7 @@ export const ChallengeModal: FunctionComponent<Props> = ({
             submit().catch(console.error)
           }}
         >
-          {isProcessing ? 'Generating Keys...' : 'Unlock'}
+          {isProcessing ? 'Generating Keys...' : 'Submit'}
         </Button>
         {shouldShowForgotPasscode && (
           <Button

From 4405f3bbf21ae2c83115ad821f9c49edbc570886 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Thu, 14 Apr 2022 00:03:40 +0530
Subject: [PATCH 019/102] fix: only show color scheme toast if change is
 required (#973)

---
 app/assets/javascripts/Services/ThemeManager.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/Services/ThemeManager.ts b/app/assets/javascripts/Services/ThemeManager.ts
index 8c306b029..b70038d96 100644
--- a/app/assets/javascripts/Services/ThemeManager.ts
+++ b/app/assets/javascripts/Services/ThemeManager.ts
@@ -198,7 +198,7 @@ export class ThemeManager extends ApplicationService {
     const isDefaultThemePreferredAndNotActive =
       themeIdentifier === DefaultThemeIdentifier && activeTheme
 
-    if (isPreferredThemeNotActive || isDefaultThemePreferredAndNotActive) {
+    if (isPreferredThemeNotActive && isDefaultThemePreferredAndNotActive) {
       this.showColorSchemeToast(setTheme)
     }
   }

From c2edeb47e14d970fff9087d852fb1c19dc076d59 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Thu, 14 Apr 2022 00:06:22 +0530
Subject: [PATCH 020/102] fix: focus trap error (#974)

---
 package.json |  2 +-
 yarn.lock    | 21 ++++-----------------
 2 files changed, 5 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index 82901333f..d2c653728 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,7 @@
     "@standardnotes/filepicker": "1.10.5",
     "@standardnotes/sncrypto-web": "1.8.2",
     "@standardnotes/snjs": "2.94.3",
-    "@standardnotes/stylekit": "5.21.3",
+    "@standardnotes/stylekit": "5.22.0",
     "@zip.js/zip.js": "^2.4.7",
     "mobx": "^6.5.0",
     "mobx-react-lite": "^3.3.0",
diff --git a/yarn.lock b/yarn.lock
index b69bd4453..4fb1d56dc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2508,16 +2508,15 @@
     "@standardnotes/sncrypto-common" "^1.7.5"
     "@standardnotes/utils" "^1.4.8"
 
-"@standardnotes/stylekit@5.21.3":
-  version "5.21.3"
-  resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.21.3.tgz#32d136328e7ec04f983fe635ec507a05084f3aac"
-  integrity sha512-0ILhE/xtuGBbBuMRurdWDuHrtMvIoJoMwu/2wp+2WNlYzWbSzq/TQ3MYYBUUS76K/nerxJwr7kBtZeJpCdWccg==
+"@standardnotes/stylekit@5.22.0":
+  version "5.22.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.22.0.tgz#9524f57bee328ff61336d9efcee5684f35430b94"
+  integrity sha512-u3ywcUS/CJEp04B8XQNVDFtELCyAkwlQr2KiXVVXs1jnuhdMYAbvgLhwZR4MqBrnvTKtHRyH0Ryxd6M32lv7ZA==
   dependencies:
     "@nanostores/preact" "^0.1.3"
     "@reach/listbox" "^0.16.2"
     "@reach/menu-button" "^0.16.2"
     "@svgr/webpack" "^6.2.1"
-    focus-trap "^6.7.3"
     nanoid "^3.3.1"
     nanostores "^0.5.10"
     prop-types "^15.8.1"
@@ -5414,13 +5413,6 @@ focus-lock@^0.9.1:
   dependencies:
     tslib "^2.0.3"
 
-focus-trap@^6.7.3:
-  version "6.7.3"
-  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-6.7.3.tgz#b5dc195b49c90001f08a63134471d1e6dd381ddd"
-  integrity sha512-8xCEKndV4KrseGhFKKKmczVA14yx1/hnmFICPOjcFjToxCJYj/NHH43tPc3YE/PLnLRNZoFug0EcWkGQde/miQ==
-  dependencies:
-    tabbable "^5.2.1"
-
 follow-redirects@^1.0.0:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db"
@@ -9803,11 +9795,6 @@ tabbable@^4.0.0:
   resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-4.0.0.tgz#5bff1d1135df1482cf0f0206434f15eadbeb9261"
   integrity sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ==
 
-tabbable@^5.2.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.2.1.tgz#e3fda7367ddbb172dcda9f871c0fdb36d1c4cd9c"
-  integrity sha512-40pEZ2mhjaZzK0BnI+QGNjJO8UYx9pP5v7BGe17SORTO0OEuuaAwQTkAp8whcZvqon44wKFOikD+Al11K3JICQ==
-
 tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"

From ec8b3072353008f13b51deb77e3346a5b685578c Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Thu, 14 Apr 2022 18:49:41 +0530
Subject: [PATCH 021/102] fix: encryption section styles (#976)

---
 .../Components/Preferences/Panes/Security/Encryption.tsx    | 6 +++---
 app/assets/stylesheets/_sn.scss                             | 4 ++++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/Components/Preferences/Panes/Security/Encryption.tsx b/app/assets/javascripts/Components/Preferences/Panes/Security/Encryption.tsx
index bdb486b1b..3f26822d1 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Security/Encryption.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Security/Encryption.tsx
@@ -16,7 +16,7 @@ const EncryptionStatusItem: FunctionComponent<{
   icon: ComponentChild
   status: string
 }> = ({ icon, status }) => (
-  <div className="w-full rounded py-1.5 px-3 text-input my-1 h-8 flex flex-row items-center bg-contrast no-border focus-within:ring-info">
+  <div className="w-full rounded py-1.5 px-3 text-input my-1 min-h-8 flex flex-row items-center bg-contrast no-border focus-within:ring-info">
     {icon}
     <div className="min-w-3 min-h-1" />
     <div className="flex-grow color-text text-sm">{status}</div>
@@ -38,12 +38,12 @@ const EncryptionEnabled: FunctionComponent<{ appState: AppState }> = observer(({
   const trashIcon = <Icon type="trash" className="min-w-5 min-h-5" />
   return (
     <>
-      <div className="flex flex-row pb-1 pt-1.5">
+      <div className="flex flex-row items-start pb-1 pt-1.5">
         <EncryptionStatusItem status={notes} icon={[noteIcon]} />
         <div className="min-w-3" />
         <EncryptionStatusItem status={tags} icon={[tagIcon]} />
       </div>
-      <div className="flex flex-row">
+      <div className="flex flex-row items-start">
         <EncryptionStatusItem status={archived} icon={[archiveIcon]} />
         <div className="min-w-3" />
         <EncryptionStatusItem status={deleted} icon={[trashIcon]} />
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index e61ced799..cb77fde97 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -465,6 +465,10 @@
   min-height: 1.5rem;
 }
 
+.min-h-8 {
+  min-height: 2rem;
+}
+
 .min-h-16 {
   min-height: 4rem;
 }

From 9dafdeeddb0159bd09fa9829e060231383385fe7 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 15 Apr 2022 20:28:32 +0530
Subject: [PATCH 022/102] feat: hide some prefs if not logged in (#979)

---
 .../Preferences/Panes/Listed/index.tsx        | 24 ++++++++++---------
 .../Preferences/Panes/Security/index.tsx      |  2 +-
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/Components/Preferences/Panes/Listed/index.tsx b/app/assets/javascripts/Components/Preferences/Panes/Listed/index.tsx
index 4fdc9ef66..3ad762495 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Listed/index.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Listed/index.tsx
@@ -91,17 +91,19 @@ export const Listed = observer(({ application }: Props) => {
             </a>
           </Text>
         </PreferencesSegment>
-        <PreferencesSegment>
-          <Subtitle>Get Started</Subtitle>
-          <Text>Create a free Listed author account to get started.</Text>
-          <Button
-            className="mt-3"
-            variant="normal"
-            disabled={requestingAccount}
-            label={requestingAccount ? 'Creating account...' : 'Create new author'}
-            onClick={registerNewAccount}
-          />
-        </PreferencesSegment>
+        {application.getUser() && (
+          <PreferencesSegment>
+            <Subtitle>Get Started</Subtitle>
+            <Text>Create a free Listed author account to get started.</Text>
+            <Button
+              className="mt-3"
+              variant="normal"
+              disabled={requestingAccount}
+              label={requestingAccount ? 'Creating account...' : 'Create new author'}
+              onClick={registerNewAccount}
+            />
+          </PreferencesSegment>
+        )}
       </PreferencesGroup>
     </PreferencesPane>
   )
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Security/index.tsx b/app/assets/javascripts/Components/Preferences/Panes/Security/index.tsx
index b54e0117f..5010de8a6 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Security/index.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Security/index.tsx
@@ -20,6 +20,6 @@ export const Security: FunctionComponent<SecurityProps> = (props) => (
     <Protections application={props.application} />
     <TwoFactorAuthWrapper mfaProvider={props.mfaProvider} userProvider={props.userProvider} />
     <PasscodeLock appState={props.appState} application={props.application} />
-    <Privacy application={props.application} />
+    {props.application.getUser() && <Privacy application={props.application} />}
   </PreferencesPane>
 )

From a9bab0938b4054accc6dff30ab49757c517c482e Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 15 Apr 2022 22:39:49 +0530
Subject: [PATCH 023/102] fix: timed color scheme toast (#978)

---
 app/assets/javascripts/Services/ThemeManager.ts | 8 +++-----
 package.json                                    | 2 +-
 yarn.lock                                       | 8 ++++----
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/Services/ThemeManager.ts b/app/assets/javascripts/Services/ThemeManager.ts
index b70038d96..4543cab6a 100644
--- a/app/assets/javascripts/Services/ThemeManager.ts
+++ b/app/assets/javascripts/Services/ThemeManager.ts
@@ -176,6 +176,7 @@ export class ThemeManager extends ApplicationService {
     const themes = this.application.items.getDisplayableItems(ContentType.Theme) as SNTheme[]
 
     const activeTheme = themes.find((theme) => theme.active && !theme.isLayerable())
+    const activeThemeIdentifier = activeTheme ? activeTheme.identifier : DefaultThemeIdentifier
 
     const themeIdentifier = this.application.getPreference(
       preference,
@@ -193,12 +194,9 @@ export class ThemeManager extends ApplicationService {
       }
     }
 
-    const isPreferredThemeNotActive = activeTheme?.identifier !== themeIdentifier
+    const isPreferredThemeNotActive = activeThemeIdentifier !== themeIdentifier
 
-    const isDefaultThemePreferredAndNotActive =
-      themeIdentifier === DefaultThemeIdentifier && activeTheme
-
-    if (isPreferredThemeNotActive && isDefaultThemePreferredAndNotActive) {
+    if (isPreferredThemeNotActive) {
       this.showColorSchemeToast(setTheme)
     }
   }
diff --git a/package.json b/package.json
index d2c653728..861918f0a 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,7 @@
     "@standardnotes/filepicker": "1.10.5",
     "@standardnotes/sncrypto-web": "1.8.2",
     "@standardnotes/snjs": "2.94.3",
-    "@standardnotes/stylekit": "5.22.0",
+    "@standardnotes/stylekit": "5.22.1",
     "@zip.js/zip.js": "^2.4.7",
     "mobx": "^6.5.0",
     "mobx-react-lite": "^3.3.0",
diff --git a/yarn.lock b/yarn.lock
index 4fb1d56dc..a7e0230e3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2508,10 +2508,10 @@
     "@standardnotes/sncrypto-common" "^1.7.5"
     "@standardnotes/utils" "^1.4.8"
 
-"@standardnotes/stylekit@5.22.0":
-  version "5.22.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.22.0.tgz#9524f57bee328ff61336d9efcee5684f35430b94"
-  integrity sha512-u3ywcUS/CJEp04B8XQNVDFtELCyAkwlQr2KiXVVXs1jnuhdMYAbvgLhwZR4MqBrnvTKtHRyH0Ryxd6M32lv7ZA==
+"@standardnotes/stylekit@5.22.1":
+  version "5.22.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.22.1.tgz#1e92b1e6428b0891047f9b7d91799203f12156aa"
+  integrity sha512-JDdO7o7Ik+tfdKoi/VsF7bR+ZTMO/f6dVSyxjbtIb/NCS7KM4apFMBVoZ+ARBXhbhpoBnwyVJHpZBkiB1p2Cjw==
   dependencies:
     "@nanostores/preact" "^0.1.3"
     "@reach/listbox" "^0.16.2"

From b6eeaea51688870d7d4451be24766867f9c2ce77 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Mon, 18 Apr 2022 13:21:41 -0500
Subject: [PATCH 024/102] chore: upgrade snjs (#985)

---
 .../Components/ComponentView/index.tsx        |   6 +-
 .../Components/NoteView/NoteView.tsx          |   8 +-
 .../RevisionHistoryModalWrapper.tsx           |   6 +-
 .../javascripts/Services/DesktopManager.ts    |   2 -
 .../javascripts/Services/ThemeManager.ts      |   8 +-
 .../javascripts/UIModels/AppState/AppState.ts |   4 +-
 package.json                                  |  12 +-
 yarn.lock                                     | 198 +++++++++---------
 8 files changed, 124 insertions(+), 120 deletions(-)

diff --git a/app/assets/javascripts/Components/ComponentView/index.tsx b/app/assets/javascripts/Components/ComponentView/index.tsx
index be26e251d..c12bb4183 100644
--- a/app/assets/javascripts/Components/ComponentView/index.tsx
+++ b/app/assets/javascripts/Components/ComponentView/index.tsx
@@ -119,7 +119,11 @@ export const ComponentView: FunctionalComponent<IProps> = observer(
       const contentWindow = iframe.contentWindow as Window
       excessiveLoadingTimeout.current && clearTimeout(excessiveLoadingTimeout.current)
 
-      componentViewer.setWindow(contentWindow).catch(console.error)
+      try {
+        componentViewer.setWindow(contentWindow)
+      } catch (error) {
+        console.error(error)
+      }
 
       setTimeout(() => {
         setIsLoading(false)
diff --git a/app/assets/javascripts/Components/NoteView/NoteView.tsx b/app/assets/javascripts/Components/NoteView/NoteView.tsx
index b947591cd..6ddea293d 100644
--- a/app/assets/javascripts/Components/NoteView/NoteView.tsx
+++ b/app/assets/javascripts/Components/NoteView/NoteView.tsx
@@ -10,12 +10,12 @@ import {
   ComponentArea,
   PrefKey,
   ComponentMutator,
-  PayloadSource,
   ComponentViewer,
   TransactionalMutation,
   ItemMutator,
   ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction,
   NoteViewController,
+  PayloadEmitSource,
 } from '@standardnotes/snjs'
 import { debounce, isDesktopApplication } from '@/Utils'
 import { KeyboardModifier, KeyboardKey } from '@/Services/IOService'
@@ -245,7 +245,7 @@ export class NoteView extends PureComponent<Props, State> {
     }
   }
 
-  private onNoteInnerChange(note: SNNote, source: PayloadSource): void {
+  private onNoteInnerChange(note: SNNote, source: PayloadEmitSource): void {
     if (note.uuid !== this.note.uuid) {
       throw Error('Editor received changes for non-current note')
     }
@@ -282,7 +282,7 @@ export class NoteView extends PureComponent<Props, State> {
     this.reloadSpellcheck().catch(console.error)
 
     const isTemplateNoteInsertedToBeInteractableWithEditor =
-      source === PayloadSource.Constructor && note.dirty
+      source === PayloadEmitSource.LocalInserted && note.dirty
     if (isTemplateNoteInsertedToBeInteractableWithEditor) {
       return
     }
@@ -411,7 +411,7 @@ export class NoteView extends PureComponent<Props, State> {
       async ({ source }) => {
         if (
           isPayloadSourceInternalChange(source) ||
-          source === PayloadSource.InitialObserverRegistrationPush
+          source === PayloadEmitSource.InitialObserverRegistrationPush
         ) {
           return
         }
diff --git a/app/assets/javascripts/Components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx b/app/assets/javascripts/Components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
index 4c619e359..98a502c13 100644
--- a/app/assets/javascripts/Components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
@@ -8,7 +8,7 @@ import {
   ButtonType,
   ContentType,
   HistoryEntry,
-  PayloadSource,
+  PayloadEmitSource,
   RevisionListEntry,
   SNNote,
 } from '@standardnotes/snjs'
@@ -124,10 +124,10 @@ export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps>
                 .changeAndSaveItem(
                   originalNote,
                   (mutator) => {
-                    mutator.unsafe_setCustomContent(selectedRevision.payload.content)
+                    mutator.setCustomContent(selectedRevision.payload.content)
                   },
                   true,
-                  PayloadSource.RemoteActionRetrieved,
+                  PayloadEmitSource.RemoteRetrieved,
                 )
                 .catch(console.error)
               dismissModal()
diff --git a/app/assets/javascripts/Services/DesktopManager.ts b/app/assets/javascripts/Services/DesktopManager.ts
index e4d0659d4..00fb1acd4 100644
--- a/app/assets/javascripts/Services/DesktopManager.ts
+++ b/app/assets/javascripts/Services/DesktopManager.ts
@@ -7,7 +7,6 @@ import {
   ApplicationEvent,
   removeFromArray,
   DesktopManagerInterface,
-  PayloadSource,
   InternalEventBus,
 } from '@standardnotes/snjs'
 import { WebAppEvent, WebApplication } from '@/UIModels/Application'
@@ -140,7 +139,6 @@ export class DesktopManager
         }
       },
       undefined,
-      PayloadSource.DesktopInstalled,
     )
 
     for (const observer of this.updateObservers) {
diff --git a/app/assets/javascripts/Services/ThemeManager.ts b/app/assets/javascripts/Services/ThemeManager.ts
index 4543cab6a..48e0791ec 100644
--- a/app/assets/javascripts/Services/ThemeManager.ts
+++ b/app/assets/javascripts/Services/ThemeManager.ts
@@ -8,10 +8,11 @@ import {
   ContentType,
   UuidString,
   FeatureStatus,
-  PayloadSource,
   PrefKey,
   CreateDecryptedLocalStorageContextPayload,
   InternalEventBus,
+  PayloadEmitSource,
+  LocalStorageDecryptedContextualPayload,
 } from '@standardnotes/snjs'
 import { dismissToast, ToastType, addTimedToast } from '@standardnotes/stylekit'
 
@@ -233,7 +234,7 @@ export class ThemeManager extends ApplicationService {
             this.deactivateTheme(theme.uuid)
           }
         }
-        if (source !== PayloadSource.LocalRetrieved) {
+        if (source !== PayloadEmitSource.LocalRetrieved) {
           this.cacheThemeState().catch(console.error)
         }
       },
@@ -300,7 +301,8 @@ export class ThemeManager extends ApplicationService {
     const cachedThemes = (await this.application.getValue(
       CachedThemesKey,
       StorageValueModes.Nonwrapped,
-    )) as SNTheme[]
+    )) as LocalStorageDecryptedContextualPayload[]
+
     if (cachedThemes) {
       const themes = []
       for (const cachedTheme of cachedThemes) {
diff --git a/app/assets/javascripts/UIModels/AppState/AppState.ts b/app/assets/javascripts/UIModels/AppState/AppState.ts
index e6736b932..280be7570 100644
--- a/app/assets/javascripts/UIModels/AppState/AppState.ts
+++ b/app/assets/javascripts/UIModels/AppState/AppState.ts
@@ -14,8 +14,8 @@ import {
   SNTag,
   SystemViewId,
   removeFromArray,
-  PayloadSource,
   Uuid,
+  PayloadEmitSource,
 } from '@standardnotes/snjs'
 import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'
 import { ActionsMenuState } from './ActionsMenuState'
@@ -293,7 +293,7 @@ export class AppState {
     this.application.streamItems<SNNote | SNTag>(
       [ContentType.Note, ContentType.Tag],
       async ({ changed, inserted, removed, source }) => {
-        if (![PayloadSource.PreSyncSave, PayloadSource.RemoteRetrieved].includes(source)) {
+        if (![PayloadEmitSource.PreSyncSave, PayloadEmitSource.RemoteRetrieved].includes(source)) {
           return
         }
 
diff --git a/package.json b/package.json
index 861918f0a..2c06dfe49 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "@babel/plugin-transform-react-jsx": "^7.17.3",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-typescript": "^7.16.7",
-    "@standardnotes/config": "^2.3.1",
+    "@standardnotes/config": "^2.4.0",
     "@svgr/webpack": "^6.2.1",
     "@types/jest": "^27.4.1",
     "@types/react": "^17.0.42",
@@ -69,11 +69,11 @@
     "@reach/listbox": "^0.16.2",
     "@reach/tooltip": "^0.16.2",
     "@reach/visually-hidden": "^0.16.0",
-    "@standardnotes/components": "1.7.14",
-    "@standardnotes/filepicker": "1.10.5",
-    "@standardnotes/sncrypto-web": "1.8.2",
-    "@standardnotes/snjs": "2.94.3",
-    "@standardnotes/stylekit": "5.22.1",
+    "@standardnotes/components": "1.7.15",
+    "@standardnotes/filepicker": "1.11.0",
+    "@standardnotes/sncrypto-web": "1.8.3",
+    "@standardnotes/snjs": "2.96.2",
+    "@standardnotes/stylekit": "5.23.0",
     "@zip.js/zip.js": "^2.4.7",
     "mobx": "^6.5.0",
     "mobx-react-lite": "^3.3.0",
diff --git a/yarn.lock b/yarn.lock
index a7e0230e3..98a89eb09 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2388,130 +2388,130 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@standardnotes/auth@^3.18.5":
-  version "3.18.5"
-  resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.18.5.tgz#11087e0bc31c42e489a7f546d317bbbcbd48d573"
-  integrity sha512-NSeU3A9iDyZFLLfv6jOyaweykMbjUUe0XoZo6lVifQucsRW0VJ4R6m3aeXqx6/zDwmHIBqVVzrX2bqQ7r2s9SA==
+"@standardnotes/auth@^3.18.7":
+  version "3.18.7"
+  resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.18.7.tgz#54544e102ff734a38f8e7425dcfbf8f833679d86"
+  integrity sha512-43t462vS2qMnypqcVjwLOkiWc9eb2dxDWy6663UqPbaQ1fmwK868WTNd+yHdeNKPUGAOD1uETMma+CFF8FqKBQ==
   dependencies:
-    "@standardnotes/common" "^1.19.3"
+    "@standardnotes/common" "^1.19.4"
     jsonwebtoken "^8.5.1"
 
-"@standardnotes/common@^1.19.3":
-  version "1.19.3"
-  resolved "https://registry.yarnpkg.com/@standardnotes/common/-/common-1.19.3.tgz#ae2ca493492eb5e0d9663abf736a9d7a26365c52"
-  integrity sha512-nMqH+grkIgnODr5EncbG9yHqIxSBHLVTiAb+NZ2EvkhLBiuVhP2UEDNs8KcZKfgNVGGDIHQbjEXZKGog9J6gZw==
+"@standardnotes/common@^1.19.4":
+  version "1.19.4"
+  resolved "https://registry.yarnpkg.com/@standardnotes/common/-/common-1.19.4.tgz#6ee634dd7a4c21f63d79c8ec86d483f27f11d65b"
+  integrity sha512-nLy7sdewf9wzHuHWBfPBGMi90Lrmy3eMnIUNzyS3DbsuoJVb6VQ3Hss5f5EG7Du59keDtmfgvx+b0wAs9EoMqA==
 
-"@standardnotes/components@1.7.14":
-  version "1.7.14"
-  resolved "https://registry.yarnpkg.com/@standardnotes/components/-/components-1.7.14.tgz#ddd5b4d5787d3f90a4e1a88cfd95995f9267b1d1"
-  integrity sha512-NDzP8/lmzgFBjxfmaE3OSOjPfozs3vednFfrjmjri5kCXlfClEISL6b/kh6B6wv/x9DIFveOsRj2Lrov+5IXdw==
+"@standardnotes/components@1.7.15":
+  version "1.7.15"
+  resolved "https://registry.yarnpkg.com/@standardnotes/components/-/components-1.7.15.tgz#3d57dd21cd4bf1f95eea7521fce7dd62e8f99455"
+  integrity sha512-fZOaqi62BDhVkqH6Bd9NQhVPyPR3KARob8xm/JhMLWt1d8G1ZFEQ/IOLTMFpYQCt9IroLG/pl6GD0Xj46ISgkw==
 
-"@standardnotes/config@^2.3.1":
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/config/-/config-2.3.1.tgz#7d299748911a0703742727fd6fa592ac56136998"
-  integrity sha512-G5UeKgB3R862KBSIFtfs60C0NKGkxqDFdVUcArYE0+BmiIYZKVcaykjtycTQGhF18cPLtlCcIfta04+4CfFM1w==
+"@standardnotes/config@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/config/-/config-2.4.0.tgz#4ca7ccd857f23850a154911d274f0aa6bf6b7b05"
+  integrity sha512-iCdGcC4cRB9+gJAjmA1tJr+dgTUDStG0OSleAOVqvaZmtj94rOzX/v8GmiqnsDajyZZXAmD+Ftse3Z3kOAPhTQ==
   dependencies:
     "@typescript-eslint/eslint-plugin" "^5.12.1"
     "@typescript-eslint/parser" "^5.12.1"
 
-"@standardnotes/domain-events@^2.26.9":
-  version "2.26.9"
-  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.26.9.tgz#09d3ac547e263ff957a9a645a6c1f0039aa85ccd"
-  integrity sha512-iQCiCdLpMw3Yp3Z9q7GU9Z48tK2jAMI32VjsQtbyqOmjR+aVmo4e2oGyshm/2+5ymKUiG7xlx3Hl63RlQbGf1A==
+"@standardnotes/domain-events@^2.27.6":
+  version "2.27.6"
+  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.27.6.tgz#663353fdbcd4d6c5e9af35dced549196a792d370"
+  integrity sha512-4UnUDmDI5z/RRFUpd0owvDFCOZDVVNFhELkCJYn6HFpHmBKlvbIgARQoH1cXqUt0mi9SzvoSFFoOLCjvCFkUog==
   dependencies:
-    "@standardnotes/auth" "^3.18.5"
-    "@standardnotes/features" "^1.37.2"
+    "@standardnotes/auth" "^3.18.7"
+    "@standardnotes/features" "^1.37.5"
 
-"@standardnotes/encryption@^1.2.2":
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.2.2.tgz#27325dff46875871c26e208d77651532573a7afc"
-  integrity sha512-B9RjWltLuURg6qUdFTQZeQRKX2DoP6VL/6kS2Ay3ZkrEEcCNvxeuqr9yvXbZn2kKS0dUDfzfbYWOvoVxyyUwYA==
+"@standardnotes/encryption@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.4.1.tgz#955b246674c912a6b051b3575c22b124a05860f7"
+  integrity sha512-j+gwiPJkqYyQjMk97Eycr6zX+MKJ1L/tAIw/6B2hW85OU5vZg6l4RsgxH6hkK1UOhWmaZuLWoum1DJS44wR5dg==
   dependencies:
-    "@standardnotes/models" "^1.2.2"
-    "@standardnotes/responses" "^1.6.2"
-    "@standardnotes/services" "^1.8.2"
+    "@standardnotes/models" "^1.4.1"
+    "@standardnotes/responses" "^1.6.6"
+    "@standardnotes/services" "^1.9.2"
 
-"@standardnotes/features@^1.37.2":
-  version "1.37.2"
-  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.37.2.tgz#bedae2935a5659aa1fd30849e47ed167d45a7d3a"
-  integrity sha512-kNUCRMuLPmjjxWvE/OjHAewGZzv5/NAsqw/cHj+O4sbhRBWSv1dq+UzLzUxnj2kUsKObPjKqYeqo6WrXOnl3BQ==
+"@standardnotes/features@^1.37.5":
+  version "1.37.5"
+  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.37.5.tgz#f2c90baf2fb53177f25fccc840982dc1761833c0"
+  integrity sha512-mBj4Cdi2cZvQ4z8jNubWTzO310qT1wbubcubsewfim9PUUd5pRq4psJKOBVjlbV8y87LiA3im5lL88lluXSv3g==
   dependencies:
-    "@standardnotes/auth" "^3.18.5"
-    "@standardnotes/common" "^1.19.3"
+    "@standardnotes/auth" "^3.18.7"
+    "@standardnotes/common" "^1.19.4"
 
-"@standardnotes/filepicker@1.10.5":
-  version "1.10.5"
-  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.10.5.tgz#28c7cc68cb3337940a52e19b1dea76af343f2852"
-  integrity sha512-Tl9mCW/qAzupOtQAYlbPHgZU16ljtRGV0awOHT7+uulPYoyKJJ4cqlKRzFaaONTAN6GpICEeSqidcB/lb5e5uQ==
+"@standardnotes/filepicker@1.11.0":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.11.0.tgz#2a49d78e409529ccb96f17f0575851952e7247d1"
+  integrity sha512-aa9g9k/BxjWuQSf+Tj+l4nKJUniagzz/YRHiVngwWIKM7wnRrvbg4z5yVT71rBb259MMU1OAaWx5EsSDSEsVVg==
 
-"@standardnotes/models@^1.2.2":
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.2.2.tgz#d67086319ad12ec5f6d267f77d353a0bd3740983"
-  integrity sha512-o762wf4pOobk4GcHJR0+lFVJeP/TifiP4OCM9ko23wkE6d6tWpM5SyvOUyZga2NNp5He8Pkm06Oo1ObxBYaWIw==
+"@standardnotes/models@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.4.1.tgz#78e3b52455c3e42fdabf5b10aa8170e5450c52aa"
+  integrity sha512-xB/eFcQoAXSmNNe1M0FB+7oqEV7G4I+T/3vjSVpOIzisgi7pLjbAyPTQmL7RY/3ybP8JBsjWE9Zk/yb0zAKAiw==
   dependencies:
-    "@standardnotes/features" "^1.37.2"
-    "@standardnotes/responses" "^1.6.2"
-    "@standardnotes/utils" "^1.4.8"
+    "@standardnotes/features" "^1.37.5"
+    "@standardnotes/responses" "^1.6.6"
+    "@standardnotes/utils" "^1.6.0"
 
-"@standardnotes/responses@^1.6.2":
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.6.2.tgz#665702c01bd25f10763ef0230fe9df775996c424"
-  integrity sha512-w/SNFITk7aipmN1nahH456xe/xKGPp+/dqpKF+LDoSl6C+UZ17NOtSVP/Q4nVIvGy57QOD8OvN7inCpSrLCEyw==
+"@standardnotes/responses@^1.6.6":
+  version "1.6.6"
+  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.6.6.tgz#fe909bf99f9d443290ecf1af4ad6ffc983dd7e76"
+  integrity sha512-nSV/nbIrlcM5Flo6OpDBkAvtz6ApagH3n6wYLA26Q7vzWLgjPsTQxocC8WWN7/FnWIgRmotCzCCMULHR16E/UA==
   dependencies:
-    "@standardnotes/auth" "^3.18.5"
-    "@standardnotes/common" "^1.19.3"
-    "@standardnotes/features" "^1.37.2"
+    "@standardnotes/auth" "^3.18.7"
+    "@standardnotes/common" "^1.19.4"
+    "@standardnotes/features" "^1.37.5"
 
-"@standardnotes/services@^1.8.2":
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.8.2.tgz#3a95af1573636dc288dc4efd52de8568c2cd68fe"
-  integrity sha512-+iLVngtw0avyoUM4Sn0Kpmh99KTWYbhX/HiJLbnFoW5LJrqA2FarZRPUqYpiKuEcfcdZ4brmm5ipts45n1DXXw==
+"@standardnotes/services@^1.9.2":
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.9.2.tgz#50a22b436ef220a7c914c2d9de7fa5b29d14e5f0"
+  integrity sha512-1GvMH2W8mR+66fd92D7qW7o24lYQAiedrT92PINy6pbFYZRXBtcw+jJp0UhsBTle66lZnk/sV3gmRv8SUcTOAw==
   dependencies:
-    "@standardnotes/common" "^1.19.3"
-    "@standardnotes/models" "^1.2.2"
-    "@standardnotes/responses" "^1.6.2"
-    "@standardnotes/utils" "^1.4.8"
+    "@standardnotes/common" "^1.19.4"
+    "@standardnotes/models" "^1.4.1"
+    "@standardnotes/responses" "^1.6.6"
+    "@standardnotes/utils" "^1.6.0"
 
-"@standardnotes/settings@^1.13.3":
-  version "1.13.3"
-  resolved "https://registry.yarnpkg.com/@standardnotes/settings/-/settings-1.13.3.tgz#6f46927f5cb85e3070ccd2bc6a91deadf1b9ef9f"
-  integrity sha512-hLb5ba8qFgKdhSYqJLX+7L5K2ZPwoqGlMrDDQTph+rQe08FnDoupCzz+uFOO1EJITI3XzrbvSW79GQYV0/5AkA==
+"@standardnotes/settings@^1.13.4":
+  version "1.13.4"
+  resolved "https://registry.yarnpkg.com/@standardnotes/settings/-/settings-1.13.4.tgz#16826c3236ae614ef7c0e17e5b536e56dd11e303"
+  integrity sha512-rF6jpSdWF/6nfOZIX5g6PUc8bM9gh81sJj7ISGGjkbfIl2OUWOptsP5aRXHpJWe62GIhNaFdfmXi549kCyFMow==
 
-"@standardnotes/sncrypto-common@^1.7.5":
-  version "1.7.5"
-  resolved "https://registry.yarnpkg.com/@standardnotes/sncrypto-common/-/sncrypto-common-1.7.5.tgz#2c4ca3923970f5360f8ae01d40e2eaa957b75c12"
-  integrity sha512-VfGNDAlju4h7Ai7Z7shds41Lvl7JQruYc4pemkAzcmYgrXLHy/wHMUA0kanGTW7fVr3AYmbYCqO6lycldAmrwQ==
+"@standardnotes/sncrypto-common@^1.7.6":
+  version "1.7.6"
+  resolved "https://registry.yarnpkg.com/@standardnotes/sncrypto-common/-/sncrypto-common-1.7.6.tgz#8ff57f4eb8803d5631983d2f17f3c9ec2ec22011"
+  integrity sha512-jzS4dIIsIVCEw4e6AdoOm0L71NHbc/RcYktiFbVDrr2teQn8z7777PdzHVXUEX5vcmtaZ0VADnev39wm0K5Rvw==
 
-"@standardnotes/sncrypto-web@1.8.2":
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/@standardnotes/sncrypto-web/-/sncrypto-web-1.8.2.tgz#cf60a2ad85240e3ef56ccd5d1b45c29d16300966"
-  integrity sha512-C/2EkZrYBKTgnW4uluhJ3+GOnbbOL6ixg/c9pa2LZ9zT1vBRaS3vFIHC5hIMwrOsPE1QmIaJyiGtdzMA7A3VMw==
+"@standardnotes/sncrypto-web@1.8.3":
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/@standardnotes/sncrypto-web/-/sncrypto-web-1.8.3.tgz#788ddf484d4170d6ab69859067f4404085dda380"
+  integrity sha512-PoFOwqxkEnKp0Rw0qJJzt/Bk0+DPKXJIQl2jBjmqa3quqllVkGdL/5ot8JKXP01kf8RZqdg1hqBxmjIiJOJcbw==
   dependencies:
-    "@standardnotes/sncrypto-common" "^1.7.5"
+    "@standardnotes/sncrypto-common" "^1.7.6"
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.94.3":
-  version "2.94.3"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.94.3.tgz#93918769025f4883f80555df61c88a838de1c4c3"
-  integrity sha512-wfJg8n/p1QisPlxWSyW9dYqN79/Zr16lugryHG0Tc1vXRyLcDNbaYxvo5XR3gGjsml8zARn5NdXJEkBBdPN2xA==
+"@standardnotes/snjs@2.96.2":
+  version "2.96.2"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.96.2.tgz#322fb5f648215d8600156a5aaf1fb4d91513fd41"
+  integrity sha512-liFo7nmCHZc7+6ZIAQcPcMWlv++eRt1IPYC6QTj6hT3TYe8G6BneA/ZNqN6/4x5mPsfmCIPThprxPGEvDyFnMg==
   dependencies:
-    "@standardnotes/auth" "^3.18.5"
-    "@standardnotes/common" "^1.19.3"
-    "@standardnotes/domain-events" "^2.26.9"
-    "@standardnotes/encryption" "^1.2.2"
-    "@standardnotes/features" "^1.37.2"
-    "@standardnotes/models" "^1.2.2"
-    "@standardnotes/responses" "^1.6.2"
-    "@standardnotes/services" "^1.8.2"
-    "@standardnotes/settings" "^1.13.3"
-    "@standardnotes/sncrypto-common" "^1.7.5"
-    "@standardnotes/utils" "^1.4.8"
+    "@standardnotes/auth" "^3.18.7"
+    "@standardnotes/common" "^1.19.4"
+    "@standardnotes/domain-events" "^2.27.6"
+    "@standardnotes/encryption" "^1.4.1"
+    "@standardnotes/features" "^1.37.5"
+    "@standardnotes/models" "^1.4.1"
+    "@standardnotes/responses" "^1.6.6"
+    "@standardnotes/services" "^1.9.2"
+    "@standardnotes/settings" "^1.13.4"
+    "@standardnotes/sncrypto-common" "^1.7.6"
+    "@standardnotes/utils" "^1.6.0"
 
-"@standardnotes/stylekit@5.22.1":
-  version "5.22.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.22.1.tgz#1e92b1e6428b0891047f9b7d91799203f12156aa"
-  integrity sha512-JDdO7o7Ik+tfdKoi/VsF7bR+ZTMO/f6dVSyxjbtIb/NCS7KM4apFMBVoZ+ARBXhbhpoBnwyVJHpZBkiB1p2Cjw==
+"@standardnotes/stylekit@5.23.0":
+  version "5.23.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.23.0.tgz#13da411b3b8903dd1f5cfda67ae86383b1a6a519"
+  integrity sha512-mU0dO83jMfl+IOO8QXZjA/woieqpL27RfsR7P2VOwqFVS3T+tlwr06VQLix0pF24inkZ0JdfGdYRhu4M71mFPg==
   dependencies:
     "@nanostores/preact" "^0.1.3"
     "@reach/listbox" "^0.16.2"
@@ -2521,12 +2521,12 @@
     nanostores "^0.5.10"
     prop-types "^15.8.1"
 
-"@standardnotes/utils@^1.4.8":
-  version "1.4.8"
-  resolved "https://registry.yarnpkg.com/@standardnotes/utils/-/utils-1.4.8.tgz#4c984220903bf64733961c50633de6adf62cb78f"
-  integrity sha512-sGROUIUdDncSyAb4w1O+qadJOTp18+9XO8MX08jOEPEMTfmVNFV1xYu6ZWe/0Ae4wCghBr8XeCCfVeE1XNyjTg==
+"@standardnotes/utils@^1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/utils/-/utils-1.6.0.tgz#b511040d9abfc3b9efb209f0f197002f56409624"
+  integrity sha512-HtD7IxLEq0QnBb0dddTTXDvaO91KDQghnhR+qSdJtUN0IpP9Ilk035ZfOhjKPyTdJzUFgaA8t2XOlsl/7dFn8A==
   dependencies:
-    "@standardnotes/common" "^1.19.3"
+    "@standardnotes/common" "^1.19.4"
     dompurify "^2.3.6"
     lodash "^4.17.21"
 

From a78c0ce2a12e093b1cecbd2f4d69651e301df823 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 19 Apr 2022 14:00:23 +0530
Subject: [PATCH 025/102] feat: add image zoom options (#984)

---
 .../AccountMenu/ConfirmPassword.tsx           |  2 +-
 .../Components/AccountMenu/CreateAccount.tsx  |  2 +-
 .../Components/AccountMenu/SignIn.tsx         |  2 +-
 .../Components/Button/IconButton.tsx          |  3 +-
 .../Components/Files/FilePreviewModal.tsx     | 21 +-----
 .../Components/Files/ImagePreview.tsx         | 64 +++++++++++++++++++
 .../Components/Files/PreviewComponent.tsx     | 24 +++++++
 .../javascripts/Components/Icon/index.tsx     |  4 +-
 .../Input/DecoratedPasswordInput.tsx          |  2 +-
 .../Panes/TwoFactorAuth/CopyButton.tsx        |  2 +-
 .../Panes/TwoFactorAuth/SaveSecretKey.tsx     |  1 +
 .../Components/Tags/TagsSectionAddButton.tsx  |  2 +-
 app/assets/stylesheets/_sn.scss               |  5 ++
 13 files changed, 108 insertions(+), 26 deletions(-)
 create mode 100644 app/assets/javascripts/Components/Files/ImagePreview.tsx
 create mode 100644 app/assets/javascripts/Components/Files/PreviewComponent.tsx

diff --git a/app/assets/javascripts/Components/AccountMenu/ConfirmPassword.tsx b/app/assets/javascripts/Components/AccountMenu/ConfirmPassword.tsx
index bf633af22..db4065ebf 100644
--- a/app/assets/javascripts/Components/AccountMenu/ConfirmPassword.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/ConfirmPassword.tsx
@@ -98,7 +98,7 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
           <IconButton
             icon="arrow-left"
             title="Go back"
-            className="flex mr-2 color-neutral"
+            className="flex mr-2 color-neutral p-0"
             onClick={handleGoBack}
             focusable={true}
             disabled={isRegistering}
diff --git a/app/assets/javascripts/Components/AccountMenu/CreateAccount.tsx b/app/assets/javascripts/Components/AccountMenu/CreateAccount.tsx
index 660afa802..edb3b202d 100644
--- a/app/assets/javascripts/Components/AccountMenu/CreateAccount.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/CreateAccount.tsx
@@ -84,7 +84,7 @@ export const CreateAccount: FunctionComponent<Props> = observer(
           <IconButton
             icon="arrow-left"
             title="Go back"
-            className="flex mr-2 color-neutral"
+            className="flex mr-2 color-neutral p-0"
             onClick={handleClose}
             focusable={true}
           />
diff --git a/app/assets/javascripts/Components/AccountMenu/SignIn.tsx b/app/assets/javascripts/Components/AccountMenu/SignIn.tsx
index 7df3b8260..bfa7f4d0f 100644
--- a/app/assets/javascripts/Components/AccountMenu/SignIn.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/SignIn.tsx
@@ -136,7 +136,7 @@ export const SignInPane: FunctionComponent<Props> = observer(
           <IconButton
             icon="arrow-left"
             title="Go back"
-            className="flex mr-2 color-neutral"
+            className="flex mr-2 color-neutral p-0"
             onClick={() => setMenuPane(AccountMenuPane.GeneralMenu)}
             focusable={true}
             disabled={isSigningIn}
diff --git a/app/assets/javascripts/Components/Button/IconButton.tsx b/app/assets/javascripts/Components/Button/IconButton.tsx
index f74bec08c..62180d5bb 100644
--- a/app/assets/javascripts/Components/Button/IconButton.tsx
+++ b/app/assets/javascripts/Components/Button/IconButton.tsx
@@ -46,9 +46,10 @@ export const IconButton: FunctionComponent<Props> = ({
     <button
       type="button"
       title={title}
-      className={`no-border cursor-pointer bg-transparent flex flex-row items-center hover:brightness-130 p-0 ${focusableClass} ${className}`}
+      className={`no-border cursor-pointer bg-transparent flex flex-row items-center ${focusableClass} ${className}`}
       onClick={click}
       disabled={disabled}
+      aria-label={title}
     >
       <Icon type={icon} className={iconClassName} />
     </button>
diff --git a/app/assets/javascripts/Components/Files/FilePreviewModal.tsx b/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
index f709fde05..cb1ad72b0 100644
--- a/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
+++ b/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
@@ -10,6 +10,7 @@ import { Button } from '@/Components/Button/Button'
 import { Icon } from '@/Components/Icon'
 import { FilePreviewInfoPanel } from './FilePreviewInfoPanel'
 import { isFileTypePreviewable } from './isFilePreviewable'
+import { PreviewComponent } from './PreviewComponent'
 
 type Props = {
   application: WebApplication
@@ -17,22 +18,6 @@ type Props = {
   onDismiss: () => void
 }
 
-const getPreviewComponentForFile = (file: SNFile, objectUrl: string) => {
-  if (file.mimeType.startsWith('image/')) {
-    return <img src={objectUrl} />
-  }
-
-  if (file.mimeType.startsWith('video/')) {
-    return <video className="w-full h-full" src={objectUrl} controls />
-  }
-
-  if (file.mimeType.startsWith('audio/')) {
-    return <audio src={objectUrl} controls />
-  }
-
-  return <object className="w-full h-full" data={objectUrl} />
-}
-
 export const FilePreviewModal: FunctionComponent<Props> = ({ application, file, onDismiss }) => {
   const [objectUrl, setObjectUrl] = useState<string>()
   const [isFilePreviewable, setIsFilePreviewable] = useState(false)
@@ -132,9 +117,9 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, file,
           </div>
         </div>
         <div className="flex flex-grow min-h-0 overflow-auto">
-          <div className="flex flex-grow items-center justify-center">
+          <div className="flex flex-grow items-center justify-center relative">
             {objectUrl ? (
-              getPreviewComponentForFile(file, objectUrl)
+              <PreviewComponent file={file} objectUrl={objectUrl} />
             ) : isLoadingFile ? (
               <div className="sk-spinner w-5 h-5 spinner-info"></div>
             ) : (
diff --git a/app/assets/javascripts/Components/Files/ImagePreview.tsx b/app/assets/javascripts/Components/Files/ImagePreview.tsx
new file mode 100644
index 000000000..05df08fa5
--- /dev/null
+++ b/app/assets/javascripts/Components/Files/ImagePreview.tsx
@@ -0,0 +1,64 @@
+import { IconType } from '@standardnotes/snjs'
+import { FunctionComponent } from 'preact'
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { IconButton } from '../Button/IconButton'
+
+type Props = {
+  objectUrl: string
+}
+
+export const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
+  const initialImgHeightRef = useRef<number>()
+
+  const [imageZoomPercent, setImageZoomPercent] = useState(100)
+  const [imageHeight, setImageHeight] = useState(initialImgHeightRef.current)
+
+  useEffect(() => {
+    if (initialImgHeightRef.current) {
+      setImageHeight(imageZoomPercent * (initialImgHeightRef.current / 100))
+    }
+  }, [imageZoomPercent])
+
+  return (
+    <div className="flex items-center justify-center w-full h-full overflow-auto">
+      <img
+        src={objectUrl}
+        height={imageHeight}
+        ref={(imgElement) => {
+          if (!initialImgHeightRef.current) {
+            initialImgHeightRef.current = imgElement?.height
+          }
+        }}
+      />
+      <div className="flex items-center absolute bottom-6 py-1 px-3 bg-default border-1 border-solid border-main rounded">
+        <span className="mr-1.5">Zoom:</span>
+        <IconButton
+          className="hover:bg-contrast p-1 rounded"
+          icon="add"
+          title="Zoom In"
+          focusable={true}
+          onClick={() => {
+            setImageZoomPercent((percent) => percent + 10)
+          }}
+        />
+        <span className="mx-2">{imageZoomPercent}%</span>
+        <IconButton
+          className="hover:bg-contrast p-1 rounded"
+          icon={'subtract' as IconType}
+          title="Zoom Out"
+          focusable={true}
+          onClick={() => {
+            setImageZoomPercent((percent) => {
+              const newPercent = percent - 10
+              if (newPercent >= 10) {
+                return newPercent
+              } else {
+                return percent
+              }
+            })
+          }}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/app/assets/javascripts/Components/Files/PreviewComponent.tsx b/app/assets/javascripts/Components/Files/PreviewComponent.tsx
new file mode 100644
index 000000000..0da65f88d
--- /dev/null
+++ b/app/assets/javascripts/Components/Files/PreviewComponent.tsx
@@ -0,0 +1,24 @@
+import { SNFile } from '@standardnotes/snjs'
+import { FunctionComponent } from 'preact'
+import { ImagePreview } from './ImagePreview'
+
+type Props = {
+  file: SNFile
+  objectUrl: string
+}
+
+export const PreviewComponent: FunctionComponent<Props> = ({ file, objectUrl }) => {
+  if (file.mimeType.startsWith('image/')) {
+    return <ImagePreview objectUrl={objectUrl} />
+  }
+
+  if (file.mimeType.startsWith('video/')) {
+    return <video className="w-full h-full" src={objectUrl} controls />
+  }
+
+  if (file.mimeType.startsWith('audio/')) {
+    return <audio src={objectUrl} controls />
+  }
+
+  return <object className="w-full h-full" data={objectUrl} />
+}
diff --git a/app/assets/javascripts/Components/Icon/index.tsx b/app/assets/javascripts/Components/Icon/index.tsx
index 2c6efcd3c..35d2cf2cc 100644
--- a/app/assets/javascripts/Components/Icon/index.tsx
+++ b/app/assets/javascripts/Components/Icon/index.tsx
@@ -88,6 +88,7 @@ import {
   UserSwitch,
   WarningIcon,
   WindowIcon,
+  SubtractIcon,
 } from '@standardnotes/stylekit'
 
 export const ICONS = {
@@ -177,6 +178,7 @@ export const ICONS = {
   user: UserIcon,
   warning: WarningIcon,
   window: WindowIcon,
+  subtract: SubtractIcon,
 }
 
 type Props = {
@@ -194,7 +196,7 @@ export const Icon: FunctionalComponent<Props> = ({ type, className = '', ariaLab
     <IconComponent
       className={`sn-icon ${className}`}
       role="img"
-      {...(ariaLabel ? { 'aria-label': ariaLabel } : {})}
+      {...(ariaLabel ? { 'aria-label': ariaLabel } : { 'aria-hidden': true })}
     />
   )
 }
diff --git a/app/assets/javascripts/Components/Input/DecoratedPasswordInput.tsx b/app/assets/javascripts/Components/Input/DecoratedPasswordInput.tsx
index 0eb315b87..6dc876e75 100644
--- a/app/assets/javascripts/Components/Input/DecoratedPasswordInput.tsx
+++ b/app/assets/javascripts/Components/Input/DecoratedPasswordInput.tsx
@@ -10,7 +10,7 @@ const Toggle: FunctionComponent<{
   setIsToggled: StateUpdater<boolean>
 }> = ({ isToggled, setIsToggled }) => (
   <IconButton
-    className="w-5 h-5 justify-center sk-circle hover:bg-grey-4 color-neutral"
+    className="w-5 h-5 p-0 justify-center sk-circle hover:bg-grey-4 color-neutral"
     icon={isToggled ? 'eye-off' : 'eye'}
     iconClassName="sn-icon--small"
     title="Show/hide password"
diff --git a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/CopyButton.tsx b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/CopyButton.tsx
index 7274217f6..f2317356d 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/CopyButton.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/CopyButton.tsx
@@ -11,7 +11,7 @@ export const CopyButton: FunctionComponent<{ copyValue: string }> = ({ copyValue
       focusable={false}
       title="Copy to clipboard"
       icon={isCopied ? 'check' : 'copy'}
-      className={isCopied ? 'success' : undefined}
+      className={`${isCopied ? 'success' : undefined} p-0`}
       onClick={() => {
         navigator?.clipboard?.writeText(secretKey).catch(console.error)
         setCopied(() => true)
diff --git a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/SaveSecretKey.tsx b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/SaveSecretKey.tsx
index b35768a25..fca856281 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/SaveSecretKey.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/SaveSecretKey.tsx
@@ -22,6 +22,7 @@ export const SaveSecretKey: FunctionComponent<{
       focusable={false}
       title="Download"
       icon="download"
+      className="p-0"
       onClick={() => {
         downloadSecretKey(act.secretKey)
       }}
diff --git a/app/assets/javascripts/Components/Tags/TagsSectionAddButton.tsx b/app/assets/javascripts/Components/Tags/TagsSectionAddButton.tsx
index eb70685d7..01a60517d 100644
--- a/app/assets/javascripts/Components/Tags/TagsSectionAddButton.tsx
+++ b/app/assets/javascripts/Components/Tags/TagsSectionAddButton.tsx
@@ -15,7 +15,7 @@ export const TagsSectionAddButton: FunctionComponent<Props> = observer(({ tags }
       focusable={true}
       icon="add"
       title="Create a new tag"
-      className="color-neutral"
+      className="color-neutral p-0"
       onClick={() => tags.createNewTemplate()}
     />
   )
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index cb77fde97..4af92ed86 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -266,6 +266,11 @@
   margin-right: 3rem;
 }
 
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
 .mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;

From d89a0dcdd1fb80e01899ae38902df3c3b15773e3 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Tue, 19 Apr 2022 09:56:45 -0500
Subject: [PATCH 026/102] style: improve sign out copy

---
 app/assets/javascripts/Strings.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/Strings.ts b/app/assets/javascripts/Strings.ts
index dd616ac14..b88385e51 100644
--- a/app/assets/javascripts/Strings.ts
+++ b/app/assets/javascripts/Strings.ts
@@ -51,7 +51,7 @@ export function StringEmptyTrash(count: number) {
 export const STRING_ACCOUNT_MENU_UNCHECK_MERGE =
   'Unchecking this option means any of the notes you have written while you were signed out will be deleted. Are you sure you want to discard these notes?'
 export const STRING_SIGN_OUT_CONFIRMATION =
-  'This action will remove this workspace and its related data from the application.'
+  'This action will remove this workspace and its related data from this device. Your synced data will not be affected.'
 export const STRING_ERROR_DECRYPTING_IMPORT =
   'There was an error decrypting your items. Make sure the password you entered is correct and try again.'
 export const STRING_E2E_ENABLED =

From aa72a8288c60af027deea8cb93631371ae604e6a Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Tue, 19 Apr 2022 11:17:33 -0500
Subject: [PATCH 027/102] chore: upgrade snjs

---
 .../javascripts/Services/ArchiveManager.ts     |  2 +-
 .../javascripts/Services/DesktopManager.ts     |  2 +-
 package.json                                   |  2 +-
 yarn.lock                                      | 18 +++++++++---------
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/Services/ArchiveManager.ts b/app/assets/javascripts/Services/ArchiveManager.ts
index 1f363bdf7..97ce01144 100644
--- a/app/assets/javascripts/Services/ArchiveManager.ts
+++ b/app/assets/javascripts/Services/ArchiveManager.ts
@@ -39,7 +39,7 @@ export class ArchiveManager {
 
   public async downloadBackup(encrypted: boolean): Promise<void> {
     const data = encrypted
-      ? await this.application.createEncryptedBackupFile(true)
+      ? await this.application.createEncryptedBackupFile()
       : await this.application.createDecryptedBackupFile()
 
     if (!data) {
diff --git a/app/assets/javascripts/Services/DesktopManager.ts b/app/assets/javascripts/Services/DesktopManager.ts
index 00fb1acd4..cc8ecb2ed 100644
--- a/app/assets/javascripts/Services/DesktopManager.ts
+++ b/app/assets/javascripts/Services/DesktopManager.ts
@@ -149,7 +149,7 @@ export class DesktopManager
   async desktop_requestBackupFile(): Promise<string | undefined> {
     const encrypted = this.application.hasProtectionSources()
     const data = encrypted
-      ? await this.application.createEncryptedBackupFile(false)
+      ? await this.application.createEncryptedBackupFileForAutomatedDesktopBackups()
       : await this.application.createDecryptedBackupFile()
 
     if (data) {
diff --git a/package.json b/package.json
index 2c06dfe49..ccf392c50 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
     "@standardnotes/components": "1.7.15",
     "@standardnotes/filepicker": "1.11.0",
     "@standardnotes/sncrypto-web": "1.8.3",
-    "@standardnotes/snjs": "2.96.2",
+    "@standardnotes/snjs": "2.97.0",
     "@standardnotes/stylekit": "5.23.0",
     "@zip.js/zip.js": "^2.4.7",
     "mobx": "^6.5.0",
diff --git a/yarn.lock b/yarn.lock
index 98a89eb09..b5a52b9f9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2472,10 +2472,10 @@
     "@standardnotes/responses" "^1.6.6"
     "@standardnotes/utils" "^1.6.0"
 
-"@standardnotes/settings@^1.13.4":
-  version "1.13.4"
-  resolved "https://registry.yarnpkg.com/@standardnotes/settings/-/settings-1.13.4.tgz#16826c3236ae614ef7c0e17e5b536e56dd11e303"
-  integrity sha512-rF6jpSdWF/6nfOZIX5g6PUc8bM9gh81sJj7ISGGjkbfIl2OUWOptsP5aRXHpJWe62GIhNaFdfmXi549kCyFMow==
+"@standardnotes/settings@^1.14.0":
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/settings/-/settings-1.14.0.tgz#f53b7bfecd9a49a5d4369d7f989e6378da13a798"
+  integrity sha512-YdbGKHDW9Ee/UhE4Q1r8UQcbtz384yyjzJp88m1CmZwARrDurJCfQneo4IX2lKVjjmXMCeZuA6sUXoAwejbreQ==
 
 "@standardnotes/sncrypto-common@^1.7.6":
   version "1.7.6"
@@ -2491,10 +2491,10 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.96.2":
-  version "2.96.2"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.96.2.tgz#322fb5f648215d8600156a5aaf1fb4d91513fd41"
-  integrity sha512-liFo7nmCHZc7+6ZIAQcPcMWlv++eRt1IPYC6QTj6hT3TYe8G6BneA/ZNqN6/4x5mPsfmCIPThprxPGEvDyFnMg==
+"@standardnotes/snjs@2.97.0":
+  version "2.97.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.97.0.tgz#9c64abd2577c4151ed5f2aa1b15c540463fa0331"
+  integrity sha512-isdx+TPcuoOH9S9kXYY8Yz0vjSbYnphpE++SlZfDd1OjWnVnuaN1SQj4BVqbIYOLhzoPlroO8uaXMyG8juy0cg==
   dependencies:
     "@standardnotes/auth" "^3.18.7"
     "@standardnotes/common" "^1.19.4"
@@ -2504,7 +2504,7 @@
     "@standardnotes/models" "^1.4.1"
     "@standardnotes/responses" "^1.6.6"
     "@standardnotes/services" "^1.9.2"
-    "@standardnotes/settings" "^1.13.4"
+    "@standardnotes/settings" "^1.14.0"
     "@standardnotes/sncrypto-common" "^1.7.6"
     "@standardnotes/utils" "^1.6.0"
 

From 8fe7df3969598bae533d13454d4f32e3f0f94d16 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Tue, 19 Apr 2022 11:46:15 -0500
Subject: [PATCH 028/102] chore: upgrade snjs

---
 package.json |  2 +-
 yarn.lock    | 44 ++++++++++++++++++++++----------------------
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index ccf392c50..ff83201d9 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
     "@standardnotes/components": "1.7.15",
     "@standardnotes/filepicker": "1.11.0",
     "@standardnotes/sncrypto-web": "1.8.3",
-    "@standardnotes/snjs": "2.97.0",
+    "@standardnotes/snjs": "2.97.1",
     "@standardnotes/stylekit": "5.23.0",
     "@zip.js/zip.js": "^2.4.7",
     "mobx": "^6.5.0",
diff --git a/yarn.lock b/yarn.lock
index b5a52b9f9..792cf66c2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2422,14 +2422,14 @@
     "@standardnotes/auth" "^3.18.7"
     "@standardnotes/features" "^1.37.5"
 
-"@standardnotes/encryption@^1.4.1":
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.4.1.tgz#955b246674c912a6b051b3575c22b124a05860f7"
-  integrity sha512-j+gwiPJkqYyQjMk97Eycr6zX+MKJ1L/tAIw/6B2hW85OU5vZg6l4RsgxH6hkK1UOhWmaZuLWoum1DJS44wR5dg==
+"@standardnotes/encryption@^1.4.2":
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.4.2.tgz#44b7dcc0b040e158b2757ab400b281159e98358a"
+  integrity sha512-0BL+vQmJKTMuQqVg4skS6yWxJ5xz5hkPXazeK7ZKolbqBWCO3e0qPmHrq6roaRcud32MlyW7wTVqIU3ZW6tdBQ==
   dependencies:
-    "@standardnotes/models" "^1.4.1"
+    "@standardnotes/models" "^1.4.2"
     "@standardnotes/responses" "^1.6.6"
-    "@standardnotes/services" "^1.9.2"
+    "@standardnotes/services" "^1.9.3"
 
 "@standardnotes/features@^1.37.5":
   version "1.37.5"
@@ -2444,10 +2444,10 @@
   resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.11.0.tgz#2a49d78e409529ccb96f17f0575851952e7247d1"
   integrity sha512-aa9g9k/BxjWuQSf+Tj+l4nKJUniagzz/YRHiVngwWIKM7wnRrvbg4z5yVT71rBb259MMU1OAaWx5EsSDSEsVVg==
 
-"@standardnotes/models@^1.4.1":
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.4.1.tgz#78e3b52455c3e42fdabf5b10aa8170e5450c52aa"
-  integrity sha512-xB/eFcQoAXSmNNe1M0FB+7oqEV7G4I+T/3vjSVpOIzisgi7pLjbAyPTQmL7RY/3ybP8JBsjWE9Zk/yb0zAKAiw==
+"@standardnotes/models@^1.4.2":
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.4.2.tgz#9f38ee5b147112583371ce79818b96552094357c"
+  integrity sha512-xzquybXhov2OY79RirMnfyLMjD5nAmZ75e233QBdAEd430aYnzXO0uYgfsnXsZ8/fL4yU5cvOwk1gQTdYwPEZQ==
   dependencies:
     "@standardnotes/features" "^1.37.5"
     "@standardnotes/responses" "^1.6.6"
@@ -2462,13 +2462,13 @@
     "@standardnotes/common" "^1.19.4"
     "@standardnotes/features" "^1.37.5"
 
-"@standardnotes/services@^1.9.2":
-  version "1.9.2"
-  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.9.2.tgz#50a22b436ef220a7c914c2d9de7fa5b29d14e5f0"
-  integrity sha512-1GvMH2W8mR+66fd92D7qW7o24lYQAiedrT92PINy6pbFYZRXBtcw+jJp0UhsBTle66lZnk/sV3gmRv8SUcTOAw==
+"@standardnotes/services@^1.9.3":
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.9.3.tgz#ac3118ebb58bd178f337313bca179f12c3accb52"
+  integrity sha512-EaNLvJtRUOk0cUd1UkBAw6nyMgHlqWlKPhMHSvS5WAJ9AxE5cr1LdwBzRp7vBGiVRY4HS/lt3x9ndRpSypDXXQ==
   dependencies:
     "@standardnotes/common" "^1.19.4"
-    "@standardnotes/models" "^1.4.1"
+    "@standardnotes/models" "^1.4.2"
     "@standardnotes/responses" "^1.6.6"
     "@standardnotes/utils" "^1.6.0"
 
@@ -2491,19 +2491,19 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.97.0":
-  version "2.97.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.97.0.tgz#9c64abd2577c4151ed5f2aa1b15c540463fa0331"
-  integrity sha512-isdx+TPcuoOH9S9kXYY8Yz0vjSbYnphpE++SlZfDd1OjWnVnuaN1SQj4BVqbIYOLhzoPlroO8uaXMyG8juy0cg==
+"@standardnotes/snjs@2.97.1":
+  version "2.97.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.97.1.tgz#401c399540394ef9ad489eb373fe04602477547b"
+  integrity sha512-vptGfB+bnx2DOVCCPXHZxsGWKh3+RrN1QugmIiqo/+R9YQ1IYL1t2gpcQwQWebURPyzwLWSVfnvtcVkHsQgGCA==
   dependencies:
     "@standardnotes/auth" "^3.18.7"
     "@standardnotes/common" "^1.19.4"
     "@standardnotes/domain-events" "^2.27.6"
-    "@standardnotes/encryption" "^1.4.1"
+    "@standardnotes/encryption" "^1.4.2"
     "@standardnotes/features" "^1.37.5"
-    "@standardnotes/models" "^1.4.1"
+    "@standardnotes/models" "^1.4.2"
     "@standardnotes/responses" "^1.6.6"
-    "@standardnotes/services" "^1.9.2"
+    "@standardnotes/services" "^1.9.3"
     "@standardnotes/settings" "^1.14.0"
     "@standardnotes/sncrypto-common" "^1.7.6"
     "@standardnotes/utils" "^1.6.0"

From 9f8c402e1ad2189d4d1098e46e794a800c7e21ff Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 19 Apr 2022 23:02:29 +0530
Subject: [PATCH 029/102] fix: challenge modal styles (#987)

---
 .../Components/ChallengeModal/ChallengeModal.tsx          | 8 +++++---
 .../Components/ChallengeModal/ChallengePrompt.tsx         | 6 +++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx b/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx
index bf8219fea..bc71c5dc6 100644
--- a/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx
+++ b/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx
@@ -208,9 +208,11 @@ export const ChallengeModal: FunctionComponent<Props> = ({
         )}
         <ProtectedIllustration className="w-30 h-30 mb-4" />
         <div className="font-bold text-lg text-center max-w-76 mb-3">{challenge.heading}</div>
-        <div className="text-center text-sm max-w-76 mb-4">{challenge.subheading}</div>
+        {challenge.subheading && (
+          <div className="text-center text-sm max-w-76 mb-4 break-word">{challenge.subheading}</div>
+        )}
         <form
-          className="flex flex-col items-center min-w-76 mb-4"
+          className="flex flex-col items-center min-w-76"
           onSubmit={(e) => {
             e.preventDefault()
             submit().catch(console.error)
@@ -230,7 +232,7 @@ export const ChallengeModal: FunctionComponent<Props> = ({
         <Button
           variant="primary"
           disabled={isProcessing}
-          className="min-w-76 mb-3.5"
+          className="min-w-76 mt-1 mb-3.5"
           onClick={() => {
             submit().catch(console.error)
           }}
diff --git a/app/assets/javascripts/Components/ChallengeModal/ChallengePrompt.tsx b/app/assets/javascripts/Components/ChallengeModal/ChallengePrompt.tsx
index 8ca6088e1..406962e4e 100644
--- a/app/assets/javascripts/Components/ChallengeModal/ChallengePrompt.tsx
+++ b/app/assets/javascripts/Components/ChallengeModal/ChallengePrompt.tsx
@@ -39,9 +39,9 @@ export const ChallengeModalPrompt: FunctionComponent<Props> = ({
   }, [isInvalid])
 
   return (
-    <>
+    <div className="w-full mb-3">
       {prompt.validation === ChallengeValidation.ProtectionSessionDuration ? (
-        <div className="mt-3 min-w-76">
+        <div className="min-w-76">
           <div className="text-sm font-medium mb-2">Allow protected access for</div>
           <div className="flex items-center justify-between bg-grey-4 rounded p-1">
             {ProtectionSessionDurations.map((option) => {
@@ -91,6 +91,6 @@ export const ChallengeModalPrompt: FunctionComponent<Props> = ({
       {isInvalid && (
         <div className="text-sm color-danger mt-2">Invalid authentication, please try again.</div>
       )}
-    </>
+    </div>
   )
 }

From 925504de320162cf72228f19243382f6b2501ba8 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 19 Apr 2022 23:09:28 +0530
Subject: [PATCH 030/102] feat: check for files beta role (#986)

---
 .../AttachedFilesButton.tsx                   | 14 +++----------
 .../Components/NoteView/NoteView.tsx          |  2 +-
 .../UIModels/AppState/FeaturesState.ts        | 21 +++++++++++++++++++
 3 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
index af2c3f1ce..2f7b79da4 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
@@ -8,13 +8,7 @@ import { FunctionComponent } from 'preact'
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { Icon } from '@/Components/Icon'
 import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
-import {
-  ChallengeReason,
-  ContentType,
-  FeatureIdentifier,
-  FeatureStatus,
-  SNFile,
-} from '@standardnotes/snjs'
+import { ChallengeReason, ContentType, SNFile } from '@standardnotes/snjs'
 import { confirmDialog } from '@/Services/AlertService'
 import { addToast, dismissToast, ToastType } from '@standardnotes/stylekit'
 import { StreamingFileReader } from '@standardnotes/filepicker'
@@ -78,9 +72,7 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
     }, [application, reloadAttachedFilesCount])
 
     const toggleAttachedFilesMenu = useCallback(async () => {
-      if (
-        application.features.getFeatureStatus(FeatureIdentifier.Files) !== FeatureStatus.Entitled
-      ) {
+      if (!appState.features.isEntitledToFiles) {
         premiumModal.activate('Files')
         return
       }
@@ -107,7 +99,7 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
 
         setOpen(newOpenState)
       }
-    }, [application.features, onClickPreprocessing, open, premiumModal])
+    }, [appState.features.isEntitledToFiles, onClickPreprocessing, open, premiumModal])
 
     const deleteFile = async (file: SNFile) => {
       const shouldDelete = await confirmDialog({
diff --git a/app/assets/javascripts/Components/NoteView/NoteView.tsx b/app/assets/javascripts/Components/NoteView/NoteView.tsx
index 6ddea293d..77bd6bd9d 100644
--- a/app/assets/javascripts/Components/NoteView/NoteView.tsx
+++ b/app/assets/javascripts/Components/NoteView/NoteView.tsx
@@ -989,7 +989,7 @@ export class NoteView extends PureComponent<Props, State> {
                       )}
                     </div>
                   </div>
-                  {window.enabledUnfinishedFeatures && (
+                  {this.appState.features.isFilesEnabled && (
                     <div className="mr-3">
                       <AttachedFilesButton
                         application={this.application}
diff --git a/app/assets/javascripts/UIModels/AppState/FeaturesState.ts b/app/assets/javascripts/UIModels/AppState/FeaturesState.ts
index 24217545a..f5dcd8cea 100644
--- a/app/assets/javascripts/UIModels/AppState/FeaturesState.ts
+++ b/app/assets/javascripts/UIModels/AppState/FeaturesState.ts
@@ -1,3 +1,4 @@
+import { isDev } from '@/Utils'
 import { ApplicationEvent, FeatureIdentifier, FeatureStatus } from '@standardnotes/snjs'
 import { action, computed, makeObservable, observable, runInAction, when } from 'mobx'
 import { WebApplication } from '../Application'
@@ -16,6 +17,7 @@ export class FeaturesState {
 
   _hasFolders = false
   _hasSmartViews = false
+  _hasFilesBeta = false
   _premiumAlertFeatureName: string | undefined
 
   private unsub: () => void
@@ -23,6 +25,7 @@ export class FeaturesState {
   constructor(private application: WebApplication) {
     this._hasFolders = this.hasNativeFolders()
     this._hasSmartViews = this.hasNativeSmartViews()
+    this._hasFilesBeta = this.isEntitledToFilesBeta()
     this._premiumAlertFeatureName = undefined
 
     makeObservable(this, {
@@ -44,6 +47,7 @@ export class FeaturesState {
           runInAction(() => {
             this._hasFolders = this.hasNativeFolders()
             this._hasSmartViews = this.hasNativeSmartViews()
+            this._hasFilesBeta = this.isEntitledToFilesBeta()
           })
           break
         default:
@@ -64,6 +68,14 @@ export class FeaturesState {
     return this._hasSmartViews
   }
 
+  public get isFilesEnabled(): boolean {
+    return this._hasFilesBeta || window.enabledUnfinishedFeatures || isDev
+  }
+
+  public get isEntitledToFiles(): boolean {
+    return this._hasFilesBeta
+  }
+
   public async showPremiumAlert(featureName: string): Promise<void> {
     this._premiumAlertFeatureName = featureName
     return when(() => this._premiumAlertFeatureName === undefined)
@@ -84,4 +96,13 @@ export class FeaturesState {
 
     return status === FeatureStatus.Entitled
   }
+
+  private isEntitledToFilesBeta(): boolean {
+    if (window.enabledUnfinishedFeatures) {
+      return true
+    }
+
+    const status = this.application.features.getFeatureStatus(FeatureIdentifier.FilesBeta)
+    return status === FeatureStatus.Entitled
+  }
 }

From 9d46615b529022ba1311128813a6bcb92fb937fc Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Tue, 19 Apr 2022 14:25:55 -0500
Subject: [PATCH 031/102] chore: upgrade snjs

---
 package.json |  2 +-
 yarn.lock    | 44 ++++++++++++++++++++++----------------------
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index ff83201d9..ffd99273d 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
     "@standardnotes/components": "1.7.15",
     "@standardnotes/filepicker": "1.11.0",
     "@standardnotes/sncrypto-web": "1.8.3",
-    "@standardnotes/snjs": "2.97.1",
+    "@standardnotes/snjs": "2.97.3",
     "@standardnotes/stylekit": "5.23.0",
     "@zip.js/zip.js": "^2.4.7",
     "mobx": "^6.5.0",
diff --git a/yarn.lock b/yarn.lock
index 792cf66c2..23a045e91 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2422,14 +2422,14 @@
     "@standardnotes/auth" "^3.18.7"
     "@standardnotes/features" "^1.37.5"
 
-"@standardnotes/encryption@^1.4.2":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.4.2.tgz#44b7dcc0b040e158b2757ab400b281159e98358a"
-  integrity sha512-0BL+vQmJKTMuQqVg4skS6yWxJ5xz5hkPXazeK7ZKolbqBWCO3e0qPmHrq6roaRcud32MlyW7wTVqIU3ZW6tdBQ==
+"@standardnotes/encryption@^1.4.4":
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.4.4.tgz#9fb0eede1df3f434c698aff8600208996893e232"
+  integrity sha512-KhKVm1rlFLQLjOj4cOlwNY7uYApszwiUc4kURWYEN4uL8vbtoMD4MQMxATVzOV6G0JFSabYHVnP+/esT35eEag==
   dependencies:
-    "@standardnotes/models" "^1.4.2"
+    "@standardnotes/models" "^1.4.4"
     "@standardnotes/responses" "^1.6.6"
-    "@standardnotes/services" "^1.9.3"
+    "@standardnotes/services" "^1.9.5"
 
 "@standardnotes/features@^1.37.5":
   version "1.37.5"
@@ -2444,10 +2444,10 @@
   resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.11.0.tgz#2a49d78e409529ccb96f17f0575851952e7247d1"
   integrity sha512-aa9g9k/BxjWuQSf+Tj+l4nKJUniagzz/YRHiVngwWIKM7wnRrvbg4z5yVT71rBb259MMU1OAaWx5EsSDSEsVVg==
 
-"@standardnotes/models@^1.4.2":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.4.2.tgz#9f38ee5b147112583371ce79818b96552094357c"
-  integrity sha512-xzquybXhov2OY79RirMnfyLMjD5nAmZ75e233QBdAEd430aYnzXO0uYgfsnXsZ8/fL4yU5cvOwk1gQTdYwPEZQ==
+"@standardnotes/models@^1.4.4":
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.4.4.tgz#dfe3f3b90d8aa1cc351d80f796cd2faacbcf2f92"
+  integrity sha512-KYbcuy/QZG4TOfTnZKevUgAljV/t70OLaxO3DxY7TD0bYt+ie+HjXCTn4Mvmy1mnX42EuR+gVkduPwf2eiX+3w==
   dependencies:
     "@standardnotes/features" "^1.37.5"
     "@standardnotes/responses" "^1.6.6"
@@ -2462,13 +2462,13 @@
     "@standardnotes/common" "^1.19.4"
     "@standardnotes/features" "^1.37.5"
 
-"@standardnotes/services@^1.9.3":
-  version "1.9.3"
-  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.9.3.tgz#ac3118ebb58bd178f337313bca179f12c3accb52"
-  integrity sha512-EaNLvJtRUOk0cUd1UkBAw6nyMgHlqWlKPhMHSvS5WAJ9AxE5cr1LdwBzRp7vBGiVRY4HS/lt3x9ndRpSypDXXQ==
+"@standardnotes/services@^1.9.5":
+  version "1.9.5"
+  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.9.5.tgz#4d8a0ee3efd3eaf7b3da728e30be41b7b2195de7"
+  integrity sha512-jye2tPjprHe0Xri+QEUZFgxret8WXVm5H/LMBuZr+XKVUE+cojQRfkr0AkEumKeQ6VY1DGzonhrmhgCVTDBt5g==
   dependencies:
     "@standardnotes/common" "^1.19.4"
-    "@standardnotes/models" "^1.4.2"
+    "@standardnotes/models" "^1.4.4"
     "@standardnotes/responses" "^1.6.6"
     "@standardnotes/utils" "^1.6.0"
 
@@ -2491,19 +2491,19 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.97.1":
-  version "2.97.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.97.1.tgz#401c399540394ef9ad489eb373fe04602477547b"
-  integrity sha512-vptGfB+bnx2DOVCCPXHZxsGWKh3+RrN1QugmIiqo/+R9YQ1IYL1t2gpcQwQWebURPyzwLWSVfnvtcVkHsQgGCA==
+"@standardnotes/snjs@2.97.3":
+  version "2.97.3"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.97.3.tgz#f8f4720502dc22e524484a526b3d9e33549fafc6"
+  integrity sha512-ECP3POs/y0Bff1/39lnRg3mDkQzkK9azRm7PgApt/rUncyfz+pC6jZ2Jtw3/9j9TvAWWOHX33KOFmWEBSD3nDQ==
   dependencies:
     "@standardnotes/auth" "^3.18.7"
     "@standardnotes/common" "^1.19.4"
     "@standardnotes/domain-events" "^2.27.6"
-    "@standardnotes/encryption" "^1.4.2"
+    "@standardnotes/encryption" "^1.4.4"
     "@standardnotes/features" "^1.37.5"
-    "@standardnotes/models" "^1.4.2"
+    "@standardnotes/models" "^1.4.4"
     "@standardnotes/responses" "^1.6.6"
-    "@standardnotes/services" "^1.9.3"
+    "@standardnotes/services" "^1.9.5"
     "@standardnotes/settings" "^1.14.0"
     "@standardnotes/sncrypto-common" "^1.7.6"
     "@standardnotes/utils" "^1.6.0"

From 7dae489617b846ddc138fca69b959e73af08c185 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Tue, 19 Apr 2022 14:47:17 -0500
Subject: [PATCH 032/102] chore: upgrade snjs

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index ffd99273d..123b7bc09 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
     "@standardnotes/components": "1.7.15",
     "@standardnotes/filepicker": "1.11.0",
     "@standardnotes/sncrypto-web": "1.8.3",
-    "@standardnotes/snjs": "2.97.3",
+    "@standardnotes/snjs": "2.97.4",
     "@standardnotes/stylekit": "5.23.0",
     "@zip.js/zip.js": "^2.4.7",
     "mobx": "^6.5.0",
diff --git a/yarn.lock b/yarn.lock
index 23a045e91..631c4ecbf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2491,10 +2491,10 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.97.3":
-  version "2.97.3"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.97.3.tgz#f8f4720502dc22e524484a526b3d9e33549fafc6"
-  integrity sha512-ECP3POs/y0Bff1/39lnRg3mDkQzkK9azRm7PgApt/rUncyfz+pC6jZ2Jtw3/9j9TvAWWOHX33KOFmWEBSD3nDQ==
+"@standardnotes/snjs@2.97.4":
+  version "2.97.4"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.97.4.tgz#e972b26709c30627c30050a2b7c8d065c5207689"
+  integrity sha512-f5QPd63zzvnZj0ncV30vsdrySffK6cUT3x0C2Pc0zoqJV4YsozJB8TzitNlatjYZn7GiwXrqYpXP5aL6Dc6Idw==
   dependencies:
     "@standardnotes/auth" "^3.18.7"
     "@standardnotes/common" "^1.19.4"

From 24d3aac3c7688e62d8755b29cf623f1697149d4d Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Wed, 20 Apr 2022 20:11:32 +0530
Subject: [PATCH 033/102] refactor: make features state consistent with
 codebase (#988)

---
 .../Components/Tags/TagsListItem.tsx          |   3 +-
 .../Components/Tags/TagsSectionTitle.tsx      |   7 +-
 app/assets/javascripts/Constants.ts           |   4 +
 .../javascripts/Hooks/usePremiumModal.tsx     |   2 +-
 .../javascripts/UIModels/AppState/AppState.ts |   4 +-
 .../UIModels/AppState/FeaturesState.ts        | 108 +++++++-----------
 .../UIModels/AppState/TagsState.ts            |   8 +-
 7 files changed, 59 insertions(+), 77 deletions(-)

diff --git a/app/assets/javascripts/Components/Tags/TagsListItem.tsx b/app/assets/javascripts/Components/Tags/TagsListItem.tsx
index 1e116d342..f50859215 100644
--- a/app/assets/javascripts/Components/Tags/TagsListItem.tsx
+++ b/app/assets/javascripts/Components/Tags/TagsListItem.tsx
@@ -1,7 +1,8 @@
 import { Icon } from '@/Components/Icon'
+import { TAG_FOLDERS_FEATURE_NAME } from '@/Constants'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import { KeyboardKey } from '@/Services/IOService'
-import { FeaturesState, TAG_FOLDERS_FEATURE_NAME } from '@/UIModels/AppState/FeaturesState'
+import { FeaturesState } from '@/UIModels/AppState/FeaturesState'
 import { TagsState } from '@/UIModels/AppState/TagsState'
 import '@reach/tooltip/styles.css'
 import { SNTag } from '@standardnotes/snjs'
diff --git a/app/assets/javascripts/Components/Tags/TagsSectionTitle.tsx b/app/assets/javascripts/Components/Tags/TagsSectionTitle.tsx
index 1250fc115..965d9471d 100644
--- a/app/assets/javascripts/Components/Tags/TagsSectionTitle.tsx
+++ b/app/assets/javascripts/Components/Tags/TagsSectionTitle.tsx
@@ -1,9 +1,6 @@
+import { TAG_FOLDERS_FEATURE_NAME, TAG_FOLDERS_FEATURE_TOOLTIP } from '@/Constants'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
-import {
-  FeaturesState,
-  TAG_FOLDERS_FEATURE_NAME,
-  TAG_FOLDERS_FEATURE_TOOLTIP,
-} from '@/UIModels/AppState/FeaturesState'
+import { FeaturesState } from '@/UIModels/AppState/FeaturesState'
 import { Tooltip } from '@reach/tooltip'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
diff --git a/app/assets/javascripts/Constants.ts b/app/assets/javascripts/Constants.ts
index e0975d24c..72048b38d 100644
--- a/app/assets/javascripts/Constants.ts
+++ b/app/assets/javascripts/Constants.ts
@@ -16,3 +16,7 @@ export const DAYS_IN_A_YEAR = 365
 
 export const BYTES_IN_ONE_KILOBYTE = 1_000
 export const BYTES_IN_ONE_MEGABYTE = 1_000_000
+
+export const TAG_FOLDERS_FEATURE_NAME = 'Tag folders'
+export const TAG_FOLDERS_FEATURE_TOOLTIP = 'A Plus or Pro plan is required to enable Tag folders.'
+export const SMART_TAGS_FEATURE_NAME = 'Smart Tags'
diff --git a/app/assets/javascripts/Hooks/usePremiumModal.tsx b/app/assets/javascripts/Hooks/usePremiumModal.tsx
index cdd067c8d..d58755289 100644
--- a/app/assets/javascripts/Hooks/usePremiumModal.tsx
+++ b/app/assets/javascripts/Hooks/usePremiumModal.tsx
@@ -31,7 +31,7 @@ interface Props {
 
 export const PremiumModalProvider: FunctionalComponent<Props> = observer(
   ({ application, appState, children }) => {
-    const featureName = appState.features._premiumAlertFeatureName
+    const featureName = appState.features.premiumAlertFeatureName
     const activate = appState.features.showPremiumAlert
     const close = appState.features.closePremiumAlert
 
diff --git a/app/assets/javascripts/UIModels/AppState/AppState.ts b/app/assets/javascripts/UIModels/AppState/AppState.ts
index 280be7570..2c616e1ed 100644
--- a/app/assets/javascripts/UIModels/AppState/AppState.ts
+++ b/app/assets/javascripts/UIModels/AppState/AppState.ts
@@ -102,7 +102,7 @@ export class AppState {
       this.appEventObserverRemovers,
     )
     this.noteTags = new NoteTagsState(application, this, this.appEventObserverRemovers)
-    this.features = new FeaturesState(application)
+    this.features = new FeaturesState(application, this.appEventObserverRemovers)
     this.tags = new TagsState(application, this.appEventObserverRemovers, this.features)
     this.noAccountWarning = new NoAccountWarningState(application, this.appEventObserverRemovers)
     this.accountMenu = new AccountMenuState(application, this.appEventObserverRemovers)
@@ -155,8 +155,6 @@ export class AppState {
 
     this.appEventObserverRemovers.forEach((remover) => remover())
     this.appEventObserverRemovers.length = 0
-
-    this.features.deinit()
     ;(this.features as unknown) = undefined
 
     this.webAppEventDisposer?.()
diff --git a/app/assets/javascripts/UIModels/AppState/FeaturesState.ts b/app/assets/javascripts/UIModels/AppState/FeaturesState.ts
index f5dcd8cea..3e9391c46 100644
--- a/app/assets/javascripts/UIModels/AppState/FeaturesState.ts
+++ b/app/assets/javascripts/UIModels/AppState/FeaturesState.ts
@@ -1,38 +1,29 @@
+import { WebApplication } from '@/UIModels/Application'
 import { isDev } from '@/Utils'
 import { ApplicationEvent, FeatureIdentifier, FeatureStatus } from '@standardnotes/snjs'
 import { action, computed, makeObservable, observable, runInAction, when } from 'mobx'
-import { WebApplication } from '../Application'
 
-export const TAG_FOLDERS_FEATURE_NAME = 'Tag folders'
-export const TAG_FOLDERS_FEATURE_TOOLTIP = 'A Plus or Pro plan is required to enable Tag folders.'
-
-export const SMART_TAGS_FEATURE_NAME = 'Smart Tags'
-
-/**
- * Holds state for premium/non premium features for the current user features,
- * and eventually for in-development features (feature flags).
- */
 export class FeaturesState {
-  readonly enableUnfinishedFeatures: boolean = window?.enabledUnfinishedFeatures
+  hasFolders: boolean
+  hasSmartViews: boolean
+  hasFilesBeta: boolean
+  premiumAlertFeatureName: string | undefined
 
-  _hasFolders = false
-  _hasSmartViews = false
-  _hasFilesBeta = false
-  _premiumAlertFeatureName: string | undefined
-
-  private unsub: () => void
-
-  constructor(private application: WebApplication) {
-    this._hasFolders = this.hasNativeFolders()
-    this._hasSmartViews = this.hasNativeSmartViews()
-    this._hasFilesBeta = this.isEntitledToFilesBeta()
-    this._premiumAlertFeatureName = undefined
+  constructor(private application: WebApplication, appObservers: (() => void)[]) {
+    this.hasFolders = this.hasNativeFolders()
+    this.hasSmartViews = this.hasNativeSmartViews()
+    this.hasFilesBeta = this.isEntitledToFilesBeta()
+    this.premiumAlertFeatureName = undefined
 
     makeObservable(this, {
-      _hasFolders: observable,
-      _hasSmartViews: observable,
-      hasFolders: computed,
-      _premiumAlertFeatureName: observable,
+      hasFolders: observable,
+      hasSmartViews: observable,
+
+      hasFilesBeta: observable,
+      isFilesEnabled: computed,
+      isEntitledToFiles: computed,
+
+      premiumAlertFeatureName: observable,
       showPremiumAlert: action,
       closePremiumAlert: action,
     })
@@ -40,49 +31,36 @@ export class FeaturesState {
     this.showPremiumAlert = this.showPremiumAlert.bind(this)
     this.closePremiumAlert = this.closePremiumAlert.bind(this)
 
-    this.unsub = this.application.addEventObserver(async (eventName) => {
-      switch (eventName) {
-        case ApplicationEvent.FeaturesUpdated:
-        case ApplicationEvent.Launched:
-          runInAction(() => {
-            this._hasFolders = this.hasNativeFolders()
-            this._hasSmartViews = this.hasNativeSmartViews()
-            this._hasFilesBeta = this.isEntitledToFilesBeta()
-          })
-          break
-        default:
-          break
-      }
-    })
-  }
-
-  public deinit() {
-    this.unsub()
-  }
-
-  public get hasFolders(): boolean {
-    return this._hasFolders
-  }
-
-  public get hasSmartViews(): boolean {
-    return this._hasSmartViews
-  }
-
-  public get isFilesEnabled(): boolean {
-    return this._hasFilesBeta || window.enabledUnfinishedFeatures || isDev
-  }
-
-  public get isEntitledToFiles(): boolean {
-    return this._hasFilesBeta
+    appObservers.push(
+      application.addEventObserver(async (event) => {
+        switch (event) {
+          case ApplicationEvent.FeaturesUpdated:
+          case ApplicationEvent.Launched:
+            runInAction(() => {
+              this.hasFolders = this.hasNativeFolders()
+              this.hasSmartViews = this.hasNativeSmartViews()
+              this.hasFilesBeta = this.isEntitledToFilesBeta()
+            })
+        }
+      }),
+    )
   }
 
   public async showPremiumAlert(featureName: string): Promise<void> {
-    this._premiumAlertFeatureName = featureName
-    return when(() => this._premiumAlertFeatureName === undefined)
+    this.premiumAlertFeatureName = featureName
+    return when(() => this.premiumAlertFeatureName === undefined)
   }
 
-  public async closePremiumAlert(): Promise<void> {
-    this._premiumAlertFeatureName = undefined
+  public closePremiumAlert() {
+    this.premiumAlertFeatureName = undefined
+  }
+
+  get isFilesEnabled(): boolean {
+    return this.hasFilesBeta || window.enabledUnfinishedFeatures || isDev
+  }
+
+  get isEntitledToFiles(): boolean {
+    return this.hasFilesBeta
   }
 
   private hasNativeFolders(): boolean {
diff --git a/app/assets/javascripts/UIModels/AppState/TagsState.ts b/app/assets/javascripts/UIModels/AppState/TagsState.ts
index 79c1e9f5c..960bb5f25 100644
--- a/app/assets/javascripts/UIModels/AppState/TagsState.ts
+++ b/app/assets/javascripts/UIModels/AppState/TagsState.ts
@@ -1,6 +1,10 @@
 import { confirmDialog } from '@/Services/AlertService'
 import { STRING_DELETE_TAG } from '@/Strings'
-import { MAX_MENU_SIZE_MULTIPLIER, MENU_MARGIN_FROM_APP_BORDER } from '@/Constants'
+import {
+  MAX_MENU_SIZE_MULTIPLIER,
+  MENU_MARGIN_FROM_APP_BORDER,
+  SMART_TAGS_FEATURE_NAME,
+} from '@/Constants'
 import {
   ComponentAction,
   ContentType,
@@ -15,7 +19,7 @@ import {
 } from '@standardnotes/snjs'
 import { action, computed, makeAutoObservable, makeObservable, observable, runInAction } from 'mobx'
 import { WebApplication } from '../Application'
-import { FeaturesState, SMART_TAGS_FEATURE_NAME } from './FeaturesState'
+import { FeaturesState } from './FeaturesState'
 
 type AnyTag = SNTag | SmartView
 

From 1391f882636635b57254e1ab09cf0573234cc9e1 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Thu, 21 Apr 2022 07:36:56 -0500
Subject: [PATCH 034/102] feat: preview improvements (#989)

* feat: preview file on click

* fix: maintain aspect ratio of image when previewing

* fix: use min width instead of width
---
 .../AttachedFilesPopover/PopoverFileItem.tsx  |  9 ++++-
 .../Components/Files/ImagePreview.tsx         | 35 +++++++++----------
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx
index d5b61ceb3..010d2527b 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx
@@ -7,6 +7,7 @@ import { useEffect, useRef, useState } from 'preact/hooks'
 import { Icon, ICONS } from '@/Components/Icon'
 import { PopoverFileItemAction, PopoverFileItemActionType } from './PopoverFileItemAction'
 import { PopoverFileSubmenu } from './PopoverFileSubmenu'
+import { useFilePreviewModal } from '@/Components/Files/FilePreviewModalProvider'
 
 export const getFileIconComponent = (iconType: string, className: string) => {
   const IconComponent = ICONS[iconType as keyof typeof ICONS]
@@ -29,6 +30,8 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
   getIconType,
   closeOnBlur,
 }) => {
+  const filePreviewModal = useFilePreviewModal()
+
   const [fileName, setFileName] = useState(file.name)
   const [isRenamingFile, setIsRenamingFile] = useState(false)
   const itemRef = useRef<HTMLDivElement>(null)
@@ -65,13 +68,17 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
     renameFile(file, fileName).catch(console.error)
   }
 
+  const clickHandler = () => {
+    filePreviewModal.activate(file)
+  }
+
   return (
     <div
       ref={itemRef}
       className="flex items-center justify-between p-3 focus:shadow-none"
       tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
     >
-      <div className="flex items-center">
+      <div onClick={clickHandler} className="flex items-center cursor-pointer">
         {getFileIconComponent(getIconType(file.mimeType), 'w-8 h-8 flex-shrink-0')}
         <div className="flex flex-col mx-4">
           {isRenamingFile ? (
diff --git a/app/assets/javascripts/Components/Files/ImagePreview.tsx b/app/assets/javascripts/Components/Files/ImagePreview.tsx
index 05df08fa5..49d827513 100644
--- a/app/assets/javascripts/Components/Files/ImagePreview.tsx
+++ b/app/assets/javascripts/Components/Files/ImagePreview.tsx
@@ -1,6 +1,6 @@
 import { IconType } from '@standardnotes/snjs'
 import { FunctionComponent } from 'preact'
-import { useEffect, useRef, useState } from 'preact/hooks'
+import { useRef, useState } from 'preact/hooks'
 import { IconButton } from '../Button/IconButton'
 
 type Props = {
@@ -11,19 +11,16 @@ export const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
   const initialImgHeightRef = useRef<number>()
 
   const [imageZoomPercent, setImageZoomPercent] = useState(100)
-  const [imageHeight, setImageHeight] = useState(initialImgHeightRef.current)
-
-  useEffect(() => {
-    if (initialImgHeightRef.current) {
-      setImageHeight(imageZoomPercent * (initialImgHeightRef.current / 100))
-    }
-  }, [imageZoomPercent])
 
   return (
     <div className="flex items-center justify-center w-full h-full overflow-auto">
       <img
         src={objectUrl}
-        height={imageHeight}
+        style={{
+          'min-width': '100%',
+          height: `${imageZoomPercent}%`,
+          'object-fit': 'contain',
+        }}
         ref={(imgElement) => {
           if (!initialImgHeightRef.current) {
             initialImgHeightRef.current = imgElement?.height
@@ -32,16 +29,6 @@ export const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
       />
       <div className="flex items-center absolute bottom-6 py-1 px-3 bg-default border-1 border-solid border-main rounded">
         <span className="mr-1.5">Zoom:</span>
-        <IconButton
-          className="hover:bg-contrast p-1 rounded"
-          icon="add"
-          title="Zoom In"
-          focusable={true}
-          onClick={() => {
-            setImageZoomPercent((percent) => percent + 10)
-          }}
-        />
-        <span className="mx-2">{imageZoomPercent}%</span>
         <IconButton
           className="hover:bg-contrast p-1 rounded"
           icon={'subtract' as IconType}
@@ -58,6 +45,16 @@ export const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
             })
           }}
         />
+        <span className="mx-2">{imageZoomPercent}%</span>
+        <IconButton
+          className="hover:bg-contrast p-1 rounded"
+          icon="add"
+          title="Zoom In"
+          focusable={true}
+          onClick={() => {
+            setImageZoomPercent((percent) => percent + 10)
+          }}
+        />
       </div>
     </div>
   )

From fdf290ea1a9cf8f712e84c15d03446b56a992f08 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Thu, 21 Apr 2022 10:33:59 -0500
Subject: [PATCH 035/102] feat: error decrypting preferences section (#990)

* feat: error decrypting preferences section

* chore: upgrade snjs
---
 .../ChallengeModal/ChallengeModal.tsx         |   7 +-
 .../Panes/Security/ErroredItems.tsx           | 130 ++++++++++++++++
 .../Preferences/Panes/Security/index.tsx      |   6 +
 .../PreferencesComponents/MenuItem.tsx        |  10 +-
 .../Components/Preferences/PreferencesMenu.ts |  37 +++--
 .../Preferences/PreferencesMenuView.tsx       |   1 +
 .../javascripts/Services/ArchiveManager.ts    |  12 +-
 app/assets/stylesheets/_sn.scss               |   4 +
 package.json                                  |   4 +-
 yarn.lock                                     | 144 +++++++++---------
 10 files changed, 265 insertions(+), 90 deletions(-)
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/Security/ErroredItems.tsx

diff --git a/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx b/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx
index bc71c5dc6..bd1cdb627 100644
--- a/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx
+++ b/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx
@@ -125,8 +125,9 @@ export const ChallengeModal: FunctionComponent<Props> = ({
     [values],
   )
 
-  const closeModal = () => {
+  const cancelChallenge = () => {
     if (challenge.cancelable) {
+      application.cancelChallenge(challenge)
       onDismiss(challenge).catch(console.error)
     }
   }
@@ -187,7 +188,7 @@ export const ChallengeModal: FunctionComponent<Props> = ({
       className={`sn-component ${
         challenge.reason === ChallengeReason.ApplicationUnlock ? 'challenge-modal-overlay' : ''
       }`}
-      onDismiss={closeModal}
+      onDismiss={cancelChallenge}
       dangerouslyBypassFocusLock={bypassModalFocusLock}
     >
       <DialogContent
@@ -199,7 +200,7 @@ export const ChallengeModal: FunctionComponent<Props> = ({
       >
         {challenge.cancelable && (
           <button
-            onClick={closeModal}
+            onClick={cancelChallenge}
             aria-label="Close modal"
             className="flex p-1 bg-transparent border-0 cursor-pointer absolute top-4 right-4"
           >
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Security/ErroredItems.tsx b/app/assets/javascripts/Components/Preferences/Panes/Security/ErroredItems.tsx
new file mode 100644
index 000000000..d62ddde94
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/Security/ErroredItems.tsx
@@ -0,0 +1,130 @@
+import { AppState } from '@/UIModels/AppState'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import {
+  PreferencesGroup,
+  PreferencesSegment,
+  Text,
+  Title,
+  Subtitle,
+} from '@/Components/Preferences/PreferencesComponents'
+import {
+  ButtonType,
+  DisplayStringForContentType,
+  EncryptedItemInterface,
+} from '@standardnotes/snjs'
+import { Button } from '@/Components/Button/Button'
+import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
+import { useState } from 'preact/hooks'
+
+export const ErroredItems: FunctionComponent<{ appState: AppState }> = observer(({ appState }) => {
+  const app = appState.application
+
+  const [erroredItems, setErroredItems] = useState(app.items.invalidItems)
+
+  const getContentTypeDisplay = (item: EncryptedItemInterface): string => {
+    const display = DisplayStringForContentType(item.content_type)
+    if (display) {
+      return `${display[0].toUpperCase()}${display.slice(1)}`
+    } else {
+      return `Item of type ${item.content_type}`
+    }
+  }
+
+  const deleteItem = async (item: EncryptedItemInterface): Promise<void> => {
+    return deleteItems([item])
+  }
+
+  const deleteItems = async (items: EncryptedItemInterface[]): Promise<void> => {
+    const confirmed = await app.alertService.confirm(
+      `Are you sure you want to permanently delete ${items.length} item(s)?`,
+      undefined,
+      'Delete',
+      ButtonType.Danger,
+    )
+    if (!confirmed) {
+      return
+    }
+
+    void app.mutator.deleteItems(items)
+
+    setErroredItems(app.items.invalidItems)
+  }
+
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>
+          Error Decrypting Items <span className="ml-1 color-warning">⚠️</span>
+        </Title>
+        <Text>{`${erroredItems.length} items are errored and could not be decrypted.`}</Text>
+        <div className="flex">
+          <Button
+            className="min-w-20 mt-3 mr-2"
+            variant="normal"
+            label="Export all"
+            onClick={() => {
+              void app.getArchiveService().downloadEncryptedItems(erroredItems)
+            }}
+          />
+          <Button
+            className="min-w-20 mt-3 mr-2"
+            variant="normal"
+            dangerStyle={true}
+            label="Delete all"
+            onClick={() => {
+              void deleteItems(erroredItems)
+            }}
+          />
+        </div>
+        <HorizontalSeparator classes="mt-5 mb-3" />
+
+        {erroredItems.map((item, index) => {
+          return (
+            <>
+              <div className="flex items-center justify-between">
+                <div className="flex flex-col">
+                  <Subtitle>{`${getContentTypeDisplay(item)} created on ${
+                    item.createdAtString
+                  }`}</Subtitle>
+                  <Text>
+                    <div>Item ID: {item.uuid}</div>
+                    <div>Last Modified: {item.updatedAtString}</div>
+                  </Text>
+                  <div className="flex">
+                    <Button
+                      className="min-w-20 mt-3 mr-2"
+                      variant="normal"
+                      label="Attempt decryption"
+                      onClick={() => {
+                        void app.presentKeyRecoveryWizard()
+                      }}
+                    />
+                    <Button
+                      className="min-w-20 mt-3 mr-2"
+                      variant="normal"
+                      label="Export"
+                      onClick={() => {
+                        void app.getArchiveService().downloadEncryptedItem(item)
+                      }}
+                    />
+                    <Button
+                      className="min-w-20 mt-3 mr-2"
+                      variant="normal"
+                      dangerStyle={true}
+                      label="Delete"
+                      onClick={() => {
+                        void deleteItem(item)
+                      }}
+                    />
+                  </div>
+                </div>
+              </div>
+              {index < erroredItems.length - 1 && <HorizontalSeparator classes="mt-5 mb-3" />}
+            </>
+          )
+        })}
+      </PreferencesSegment>
+    </PreferencesGroup>
+  )
+})
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Security/index.tsx b/app/assets/javascripts/Components/Preferences/Panes/Security/index.tsx
index 5010de8a6..7d080192e 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Security/index.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Security/index.tsx
@@ -8,15 +8,21 @@ import { Encryption } from './Encryption'
 import { PasscodeLock } from './PasscodeLock'
 import { Privacy } from './Privacy'
 import { Protections } from './Protections'
+import { ErroredItems } from './ErroredItems'
 
 interface SecurityProps extends MfaProps {
   appState: AppState
   application: WebApplication
 }
 
+export const securityPrefsHasBubble = (application: WebApplication): boolean => {
+  return application.items.invalidItems.length > 0
+}
+
 export const Security: FunctionComponent<SecurityProps> = (props) => (
   <PreferencesPane>
     <Encryption appState={props.appState} />
+    {props.application.items.invalidItems.length > 0 && <ErroredItems appState={props.appState} />}
     <Protections application={props.application} />
     <TwoFactorAuthWrapper mfaProvider={props.mfaProvider} userProvider={props.userProvider} />
     <PasscodeLock appState={props.appState} application={props.application} />
diff --git a/app/assets/javascripts/Components/Preferences/PreferencesComponents/MenuItem.tsx b/app/assets/javascripts/Components/Preferences/PreferencesComponents/MenuItem.tsx
index 0898f2c3b..d0dd42875 100644
--- a/app/assets/javascripts/Components/Preferences/PreferencesComponents/MenuItem.tsx
+++ b/app/assets/javascripts/Components/Preferences/PreferencesComponents/MenuItem.tsx
@@ -6,10 +6,17 @@ interface Props {
   iconType: IconType
   label: string
   selected: boolean
+  hasBubble?: boolean
   onClick: () => void
 }
 
-export const MenuItem: FunctionComponent<Props> = ({ iconType, label, selected, onClick }) => (
+export const MenuItem: FunctionComponent<Props> = ({
+  iconType,
+  label,
+  selected,
+  onClick,
+  hasBubble,
+}) => (
   <div
     className={`preferences-menu-item select-none ${selected ? 'selected' : ''}`}
     onClick={(e) => {
@@ -20,5 +27,6 @@ export const MenuItem: FunctionComponent<Props> = ({ iconType, label, selected,
     <Icon className="icon" type={iconType} />
     <div className="min-w-1" />
     {label}
+    {hasBubble && <span className="ml-1 color-warning">⚠️</span>}
   </div>
 )
diff --git a/app/assets/javascripts/Components/Preferences/PreferencesMenu.ts b/app/assets/javascripts/Components/Preferences/PreferencesMenu.ts
index 0751b0ec1..71a19626c 100644
--- a/app/assets/javascripts/Components/Preferences/PreferencesMenu.ts
+++ b/app/assets/javascripts/Components/Preferences/PreferencesMenu.ts
@@ -1,7 +1,8 @@
 import { action, makeAutoObservable, observable } from 'mobx'
-import { FeatureIdentifier, IconType } from '@standardnotes/snjs'
+import { IconType } from '@standardnotes/snjs'
 import { WebApplication } from '@/UIModels/Application'
 import { ExtensionsLatestVersions } from './Panes/Extensions/ExtensionsLatestVersions'
+import { securityPrefsHasBubble } from './Panes'
 
 const PREFERENCE_IDS = [
   'general',
@@ -17,10 +18,12 @@ const PREFERENCE_IDS = [
 ] as const
 
 export type PreferenceId = typeof PREFERENCE_IDS[number]
+
 interface PreferencesMenuItem {
-  readonly id: PreferenceId | FeatureIdentifier
+  readonly id: PreferenceId
   readonly icon: IconType
   readonly label: string
+  readonly hasBubble?: boolean
 }
 
 interface SelectableMenuItem extends PreferencesMenuItem {
@@ -34,8 +37,8 @@ const PREFERENCES_MENU_ITEMS: PreferencesMenuItem[] = [
   { id: 'account', label: 'Account', icon: 'user' },
   { id: 'general', label: 'General', icon: 'settings' },
   { id: 'security', label: 'Security', icon: 'security' },
-  { id: 'appearance', label: 'Appearance', icon: 'themes' },
   { id: 'backups', label: 'Backups', icon: 'restore' },
+  { id: 'appearance', label: 'Appearance', icon: 'themes' },
   { id: 'listed', label: 'Listed', icon: 'listed' },
   { id: 'shortcuts', label: 'Shortcuts', icon: 'keyboard' },
   { id: 'accessibility', label: 'Accessibility', icon: 'accessibility' },
@@ -47,14 +50,14 @@ const READY_PREFERENCES_MENU_ITEMS: PreferencesMenuItem[] = [
   { id: 'account', label: 'Account', icon: 'user' },
   { id: 'general', label: 'General', icon: 'settings' },
   { id: 'security', label: 'Security', icon: 'security' },
-  { id: 'appearance', label: 'Appearance', icon: 'themes' },
   { id: 'backups', label: 'Backups', icon: 'restore' },
+  { id: 'appearance', label: 'Appearance', icon: 'themes' },
   { id: 'listed', label: 'Listed', icon: 'listed' },
   { id: 'help-feedback', label: 'Help & feedback', icon: 'help' },
 ]
 
 export class PreferencesMenu {
-  private _selectedPane: PreferenceId | FeatureIdentifier = 'account'
+  private _selectedPane: PreferenceId = 'account'
   private _menu: PreferencesMenuItem[]
   private _extensionLatestVersions: ExtensionsLatestVersions = new ExtensionsLatestVersions(
     new Map(),
@@ -101,10 +104,14 @@ export class PreferencesMenu {
   }
 
   get menuItems(): SelectableMenuItem[] {
-    const menuItems = this._menu.map((preference) => ({
-      ...preference,
-      selected: preference.id === this._selectedPane,
-    }))
+    const menuItems = this._menu.map((preference) => {
+      const item: SelectableMenuItem = {
+        ...preference,
+        selected: preference.id === this._selectedPane,
+        hasBubble: this.sectionHasBubble(preference.id),
+      }
+      return item
+    })
 
     return menuItems
   }
@@ -113,7 +120,7 @@ export class PreferencesMenu {
     return this._menu.find((item) => item.id === this._selectedPane)
   }
 
-  get selectedPaneId(): PreferenceId | FeatureIdentifier {
+  get selectedPaneId(): PreferenceId {
     if (this.selectedMenuItem != undefined) {
       return this.selectedMenuItem.id
     }
@@ -121,7 +128,15 @@ export class PreferencesMenu {
     return 'account'
   }
 
-  selectPane(key: PreferenceId | FeatureIdentifier): void {
+  selectPane(key: PreferenceId): void {
     this._selectedPane = key
   }
+
+  sectionHasBubble(id: PreferenceId): boolean {
+    if (id === 'security') {
+      return securityPrefsHasBubble(this.application)
+    }
+
+    return false
+  }
 }
diff --git a/app/assets/javascripts/Components/Preferences/PreferencesMenuView.tsx b/app/assets/javascripts/Components/Preferences/PreferencesMenuView.tsx
index 0fbff6205..0a37f1f93 100644
--- a/app/assets/javascripts/Components/Preferences/PreferencesMenuView.tsx
+++ b/app/assets/javascripts/Components/Preferences/PreferencesMenuView.tsx
@@ -13,6 +13,7 @@ export const PreferencesMenuView: FunctionComponent<{
         iconType={pref.icon}
         label={pref.label}
         selected={pref.selected}
+        hasBubble={pref.hasBubble}
         onClick={() => menu.selectPane(pref.id)}
       />
     ))}
diff --git a/app/assets/javascripts/Services/ArchiveManager.ts b/app/assets/javascripts/Services/ArchiveManager.ts
index 97ce01144..f3762c97c 100644
--- a/app/assets/javascripts/Services/ArchiveManager.ts
+++ b/app/assets/javascripts/Services/ArchiveManager.ts
@@ -5,6 +5,7 @@ import {
   BackupFile,
   BackupFileDecryptedContextualPayload,
   NoteContent,
+  EncryptedItemInterface,
 } from '@standardnotes/snjs'
 
 function sanitizeFileName(name: string): string {
@@ -148,7 +149,7 @@ export class ArchiveManager {
     return this.textFile
   }
 
-  downloadData(data: Blob | ObjectURL, fileName: string) {
+  downloadData(data: Blob | ObjectURL, fileName: string): void {
     const link = document.createElement('a')
     link.setAttribute('download', fileName)
     link.href = typeof data === 'string' ? data : this.hrefForData(data)
@@ -156,4 +157,13 @@ export class ArchiveManager {
     link.click()
     link.remove()
   }
+
+  downloadEncryptedItem(item: EncryptedItemInterface) {
+    this.downloadData(new Blob([JSON.stringify(item.payload.ejected())]), `${item.uuid}.txt`)
+  }
+
+  downloadEncryptedItems(items: EncryptedItemInterface[]) {
+    const data = JSON.stringify(items.map((i) => i.payload.ejected()))
+    this.downloadData(new Blob([data]), 'errored-items.txt')
+  }
 }
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 4af92ed86..bcae64ae7 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -1051,6 +1051,10 @@
   color: var(--sn-stylekit-neutral-contrast-color);
 }
 
+.color-warning {
+  color: var(--sn-stylekit-warning-color);
+}
+
 .active\:bg-info:active {
   background-color: var(--sn-stylekit-info-color);
 }
diff --git a/package.json b/package.json
index 123b7bc09..1a3b15bcb 100644
--- a/package.json
+++ b/package.json
@@ -70,9 +70,9 @@
     "@reach/tooltip": "^0.16.2",
     "@reach/visually-hidden": "^0.16.0",
     "@standardnotes/components": "1.7.15",
-    "@standardnotes/filepicker": "1.11.0",
+    "@standardnotes/filepicker": "1.12.0",
     "@standardnotes/sncrypto-web": "1.8.3",
-    "@standardnotes/snjs": "2.97.4",
+    "@standardnotes/snjs": "2.97.7",
     "@standardnotes/stylekit": "5.23.0",
     "@zip.js/zip.js": "^2.4.7",
     "mobx": "^6.5.0",
diff --git a/yarn.lock b/yarn.lock
index 631c4ecbf..56d386ccc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2388,18 +2388,18 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@standardnotes/auth@^3.18.7":
-  version "3.18.7"
-  resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.18.7.tgz#54544e102ff734a38f8e7425dcfbf8f833679d86"
-  integrity sha512-43t462vS2qMnypqcVjwLOkiWc9eb2dxDWy6663UqPbaQ1fmwK868WTNd+yHdeNKPUGAOD1uETMma+CFF8FqKBQ==
+"@standardnotes/auth@^3.18.10":
+  version "3.18.10"
+  resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.18.10.tgz#6be69cb1d887464daec271aeda11af4784ecb9f5"
+  integrity sha512-ibJvW7T/xHQooF3XVN9aGqn8DEqZxXXI0V49jquWRAztvyZ4GTwcL2RmhS2vhxvKbD6g+pBC5IOYqDn6vlUkOg==
   dependencies:
-    "@standardnotes/common" "^1.19.4"
+    "@standardnotes/common" "^1.19.5"
     jsonwebtoken "^8.5.1"
 
-"@standardnotes/common@^1.19.4":
-  version "1.19.4"
-  resolved "https://registry.yarnpkg.com/@standardnotes/common/-/common-1.19.4.tgz#6ee634dd7a4c21f63d79c8ec86d483f27f11d65b"
-  integrity sha512-nLy7sdewf9wzHuHWBfPBGMi90Lrmy3eMnIUNzyS3DbsuoJVb6VQ3Hss5f5EG7Du59keDtmfgvx+b0wAs9EoMqA==
+"@standardnotes/common@^1.19.5":
+  version "1.19.5"
+  resolved "https://registry.yarnpkg.com/@standardnotes/common/-/common-1.19.5.tgz#2ebed30ae9a1136efbbc1d86cfe43be54dd817fc"
+  integrity sha512-rdKOdseVAXT/WJtjAQp7fp2FmXXjoMowSu0bCvE+ggjMigbiC1z8CbFYMa/Gav2Lp+nJkBUpIMOBIwFuvPJXXA==
 
 "@standardnotes/components@1.7.15":
   version "1.7.15"
@@ -2414,63 +2414,63 @@
     "@typescript-eslint/eslint-plugin" "^5.12.1"
     "@typescript-eslint/parser" "^5.12.1"
 
-"@standardnotes/domain-events@^2.27.6":
-  version "2.27.6"
-  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.27.6.tgz#663353fdbcd4d6c5e9af35dced549196a792d370"
-  integrity sha512-4UnUDmDI5z/RRFUpd0owvDFCOZDVVNFhELkCJYn6HFpHmBKlvbIgARQoH1cXqUt0mi9SzvoSFFoOLCjvCFkUog==
+"@standardnotes/domain-events@^2.27.9":
+  version "2.27.9"
+  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.27.9.tgz#dbbf2bc0449e5555a6cc07945f04e86eb624e5b4"
+  integrity sha512-UGNlUplpp4N7FL03TuGj8xVUM2Yl/pjkVUTGijHFQMu6O2k/ugu7Bqv9cGPZS99Ix3gZUA/JUdHf9+5yRKKxCw==
   dependencies:
-    "@standardnotes/auth" "^3.18.7"
-    "@standardnotes/features" "^1.37.5"
+    "@standardnotes/auth" "^3.18.10"
+    "@standardnotes/features" "^1.37.8"
 
-"@standardnotes/encryption@^1.4.4":
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.4.4.tgz#9fb0eede1df3f434c698aff8600208996893e232"
-  integrity sha512-KhKVm1rlFLQLjOj4cOlwNY7uYApszwiUc4kURWYEN4uL8vbtoMD4MQMxATVzOV6G0JFSabYHVnP+/esT35eEag==
+"@standardnotes/encryption@^1.4.7":
+  version "1.4.7"
+  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.4.7.tgz#11340aa5f90a01d20a778c63a83f9949fef0e7d1"
+  integrity sha512-ot/8YsKSe/Kk8wMbmvH4/Ks/vSr2cUsg+oZVKZVKjgmGnxG2J57vkWOKIKx4GtIUIoq4HYK8JEvhY8Rx83WulA==
   dependencies:
-    "@standardnotes/models" "^1.4.4"
-    "@standardnotes/responses" "^1.6.6"
-    "@standardnotes/services" "^1.9.5"
+    "@standardnotes/models" "^1.4.7"
+    "@standardnotes/responses" "^1.6.9"
+    "@standardnotes/services" "^1.9.8"
 
-"@standardnotes/features@^1.37.5":
-  version "1.37.5"
-  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.37.5.tgz#f2c90baf2fb53177f25fccc840982dc1761833c0"
-  integrity sha512-mBj4Cdi2cZvQ4z8jNubWTzO310qT1wbubcubsewfim9PUUd5pRq4psJKOBVjlbV8y87LiA3im5lL88lluXSv3g==
+"@standardnotes/features@^1.37.8":
+  version "1.37.8"
+  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.37.8.tgz#9214d9909da721e5db4774bc8ea7b5964b2dc322"
+  integrity sha512-A5ZSnxTO5fKpsEnlFhD3eIfcphn1d2V+6ATDcaJJIVr0tMPL5Km4BRUvu8VieosHn0obojfFCJpXKSRkxuqtlA==
   dependencies:
-    "@standardnotes/auth" "^3.18.7"
-    "@standardnotes/common" "^1.19.4"
+    "@standardnotes/auth" "^3.18.10"
+    "@standardnotes/common" "^1.19.5"
 
-"@standardnotes/filepicker@1.11.0":
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.11.0.tgz#2a49d78e409529ccb96f17f0575851952e7247d1"
-  integrity sha512-aa9g9k/BxjWuQSf+Tj+l4nKJUniagzz/YRHiVngwWIKM7wnRrvbg4z5yVT71rBb259MMU1OAaWx5EsSDSEsVVg==
+"@standardnotes/filepicker@1.12.0":
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.12.0.tgz#6ee1224c8a7d039565a27950aa4e879a18fecebf"
+  integrity sha512-67hsz3/xnOmvhxFVUurjuLU1jaMKEYXCwwGSls/NJxkXEX1WwWA9kvAwAnrJTRoFJAKVDyBglcLpRrFkOvEc9w==
 
-"@standardnotes/models@^1.4.4":
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.4.4.tgz#dfe3f3b90d8aa1cc351d80f796cd2faacbcf2f92"
-  integrity sha512-KYbcuy/QZG4TOfTnZKevUgAljV/t70OLaxO3DxY7TD0bYt+ie+HjXCTn4Mvmy1mnX42EuR+gVkduPwf2eiX+3w==
+"@standardnotes/models@^1.4.7":
+  version "1.4.7"
+  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.4.7.tgz#e0e5c12f40b477db4e0dc1e20a7251461f064524"
+  integrity sha512-jD5EI9g3boNEJSPnZ4eeNOYjwLQEeQU839lFqe3RrDq6M7ukUgniHBxHxgEPzgPELyIbPFN+NOoLCZdqW9h2Kg==
   dependencies:
-    "@standardnotes/features" "^1.37.5"
-    "@standardnotes/responses" "^1.6.6"
-    "@standardnotes/utils" "^1.6.0"
+    "@standardnotes/features" "^1.37.8"
+    "@standardnotes/responses" "^1.6.9"
+    "@standardnotes/utils" "^1.6.1"
 
-"@standardnotes/responses@^1.6.6":
-  version "1.6.6"
-  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.6.6.tgz#fe909bf99f9d443290ecf1af4ad6ffc983dd7e76"
-  integrity sha512-nSV/nbIrlcM5Flo6OpDBkAvtz6ApagH3n6wYLA26Q7vzWLgjPsTQxocC8WWN7/FnWIgRmotCzCCMULHR16E/UA==
+"@standardnotes/responses@^1.6.9":
+  version "1.6.9"
+  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.6.9.tgz#a69a8698ddada21f0edb6bbbf50f8a68a4614bfd"
+  integrity sha512-HUKOrqZ5WGnxMoDGh6aEnQY48Eo3W3rNpesm91vRuKBVTxbwb876RXlElEtEAz5MYepatIg5mcX2dPxIZIHSvg==
   dependencies:
-    "@standardnotes/auth" "^3.18.7"
-    "@standardnotes/common" "^1.19.4"
-    "@standardnotes/features" "^1.37.5"
+    "@standardnotes/auth" "^3.18.10"
+    "@standardnotes/common" "^1.19.5"
+    "@standardnotes/features" "^1.37.8"
 
-"@standardnotes/services@^1.9.5":
-  version "1.9.5"
-  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.9.5.tgz#4d8a0ee3efd3eaf7b3da728e30be41b7b2195de7"
-  integrity sha512-jye2tPjprHe0Xri+QEUZFgxret8WXVm5H/LMBuZr+XKVUE+cojQRfkr0AkEumKeQ6VY1DGzonhrmhgCVTDBt5g==
+"@standardnotes/services@^1.9.8":
+  version "1.9.8"
+  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.9.8.tgz#3942dfc58584388e4ec886d11f039c3f2119b7a9"
+  integrity sha512-uWuLNsgStNcy1dIvAsPt3VO7M01nNna0PxGs1PZupG22vm7WSbZz7bXkHmIz5ToJmsFi69M9Bt8akuzgwi3eRw==
   dependencies:
-    "@standardnotes/common" "^1.19.4"
-    "@standardnotes/models" "^1.4.4"
-    "@standardnotes/responses" "^1.6.6"
-    "@standardnotes/utils" "^1.6.0"
+    "@standardnotes/common" "^1.19.5"
+    "@standardnotes/models" "^1.4.7"
+    "@standardnotes/responses" "^1.6.9"
+    "@standardnotes/utils" "^1.6.1"
 
 "@standardnotes/settings@^1.14.0":
   version "1.14.0"
@@ -2491,22 +2491,22 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.97.4":
-  version "2.97.4"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.97.4.tgz#e972b26709c30627c30050a2b7c8d065c5207689"
-  integrity sha512-f5QPd63zzvnZj0ncV30vsdrySffK6cUT3x0C2Pc0zoqJV4YsozJB8TzitNlatjYZn7GiwXrqYpXP5aL6Dc6Idw==
+"@standardnotes/snjs@2.97.7":
+  version "2.97.7"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.97.7.tgz#1354d234aa93f5c7c86f4f56c0631394e3e5a155"
+  integrity sha512-2H9hggd/yE78f0/KFGP914efO2iq9hfAczI6eQzjZaXZD8LAXzBqko01ScVlUNoIisYlJvrbWp368bnR+erwqQ==
   dependencies:
-    "@standardnotes/auth" "^3.18.7"
-    "@standardnotes/common" "^1.19.4"
-    "@standardnotes/domain-events" "^2.27.6"
-    "@standardnotes/encryption" "^1.4.4"
-    "@standardnotes/features" "^1.37.5"
-    "@standardnotes/models" "^1.4.4"
-    "@standardnotes/responses" "^1.6.6"
-    "@standardnotes/services" "^1.9.5"
+    "@standardnotes/auth" "^3.18.10"
+    "@standardnotes/common" "^1.19.5"
+    "@standardnotes/domain-events" "^2.27.9"
+    "@standardnotes/encryption" "^1.4.7"
+    "@standardnotes/features" "^1.37.8"
+    "@standardnotes/models" "^1.4.7"
+    "@standardnotes/responses" "^1.6.9"
+    "@standardnotes/services" "^1.9.8"
     "@standardnotes/settings" "^1.14.0"
     "@standardnotes/sncrypto-common" "^1.7.6"
-    "@standardnotes/utils" "^1.6.0"
+    "@standardnotes/utils" "^1.6.1"
 
 "@standardnotes/stylekit@5.23.0":
   version "5.23.0"
@@ -2521,12 +2521,12 @@
     nanostores "^0.5.10"
     prop-types "^15.8.1"
 
-"@standardnotes/utils@^1.6.0":
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/utils/-/utils-1.6.0.tgz#b511040d9abfc3b9efb209f0f197002f56409624"
-  integrity sha512-HtD7IxLEq0QnBb0dddTTXDvaO91KDQghnhR+qSdJtUN0IpP9Ilk035ZfOhjKPyTdJzUFgaA8t2XOlsl/7dFn8A==
+"@standardnotes/utils@^1.6.1":
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/utils/-/utils-1.6.1.tgz#db26a7fb8890c9e187054bc8951cac18e48feca0"
+  integrity sha512-WhcyoWGKHbrcCVTR5MJNSgbS/T3cAZPw1IhRCE+0t07ChBow8shOr3/8BN+J/lzPcRMcTfVh3+MQLxLKIHEA5A==
   dependencies:
-    "@standardnotes/common" "^1.19.4"
+    "@standardnotes/common" "^1.19.5"
     dompurify "^2.3.6"
     lodash "^4.17.21"
 

From eacfa80dbab125a57fb870393f5b2ff9dad8af75 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Thu, 21 Apr 2022 22:03:28 +0530
Subject: [PATCH 036/102] feat: ask for password before previewing protected
 files (#991)

---
 .../AttachedFilesPopover/AttachedFilesButton.tsx    |  6 ++++++
 .../AttachedFilesPopover/PopoverFileItem.tsx        | 13 +++++++------
 .../AttachedFilesPopover/PopoverFileItemAction.tsx  |  1 +
 .../AttachedFilesPopover/PopoverFileSubmenu.tsx     |  7 +++----
 4 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
index 2f7b79da4..9575d4c84 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
@@ -15,6 +15,7 @@ import { StreamingFileReader } from '@standardnotes/filepicker'
 import { PopoverFileItemAction, PopoverFileItemActionType } from './PopoverFileItemAction'
 import { AttachedFilesPopover, PopoverTabs } from './AttachedFilesPopover'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
+import { useFilePreviewModal } from '../Files/FilePreviewModalProvider'
 
 type Props = {
   application: WebApplication
@@ -40,6 +41,8 @@ const removeDragOverlay = () => {
 export const AttachedFilesButton: FunctionComponent<Props> = observer(
   ({ application, appState, onClickPreprocessing }) => {
     const premiumModal = usePremiumModal()
+    const filePreviewModal = useFilePreviewModal()
+
     const note = Object.values(appState.notes.selectedNotes)[0]
 
     const [open, setOpen] = useState(false)
@@ -205,6 +208,9 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
         case PopoverFileItemActionType.RenameFile:
           await renameFile(file, action.payload.name)
           break
+        case PopoverFileItemActionType.PreviewFile:
+          filePreviewModal.activate(file)
+          break
       }
 
       application.sync.sync().catch(console.error)
diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx
index 010d2527b..f26812a6f 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx
@@ -7,7 +7,6 @@ import { useEffect, useRef, useState } from 'preact/hooks'
 import { Icon, ICONS } from '@/Components/Icon'
 import { PopoverFileItemAction, PopoverFileItemActionType } from './PopoverFileItemAction'
 import { PopoverFileSubmenu } from './PopoverFileSubmenu'
-import { useFilePreviewModal } from '@/Components/Files/FilePreviewModalProvider'
 
 export const getFileIconComponent = (iconType: string, className: string) => {
   const IconComponent = ICONS[iconType as keyof typeof ICONS]
@@ -30,8 +29,6 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
   getIconType,
   closeOnBlur,
 }) => {
-  const filePreviewModal = useFilePreviewModal()
-
   const [fileName, setFileName] = useState(file.name)
   const [isRenamingFile, setIsRenamingFile] = useState(false)
   const itemRef = useRef<HTMLDivElement>(null)
@@ -68,8 +65,11 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
     renameFile(file, fileName).catch(console.error)
   }
 
-  const clickHandler = () => {
-    filePreviewModal.activate(file)
+  const clickPreviewHandler = () => {
+    handleFileAction({
+      type: PopoverFileItemActionType.PreviewFile,
+      payload: file,
+    }).catch(console.error)
   }
 
   return (
@@ -78,7 +78,7 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
       className="flex items-center justify-between p-3 focus:shadow-none"
       tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
     >
-      <div onClick={clickHandler} className="flex items-center cursor-pointer">
+      <div onClick={clickPreviewHandler} className="flex items-center cursor-pointer">
         {getFileIconComponent(getIconType(file.mimeType), 'w-8 h-8 flex-shrink-0')}
         <div className="flex flex-col mx-4">
           {isRenamingFile ? (
@@ -113,6 +113,7 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
         handleFileAction={handleFileAction}
         setIsRenamingFile={setIsRenamingFile}
         closeOnBlur={closeOnBlur}
+        previewHandler={clickPreviewHandler}
       />
     </div>
   )
diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItemAction.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItemAction.tsx
index b774c6b90..6f6cdf994 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItemAction.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItemAction.tsx
@@ -7,6 +7,7 @@ export enum PopoverFileItemActionType {
   DownloadFile,
   RenameFile,
   ToggleFileProtection,
+  PreviewFile,
 }
 
 export type PopoverFileItemAction =
diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx
index fe5a94e5f..d1d77a054 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx
@@ -6,12 +6,12 @@ import { StateUpdater, useCallback, useEffect, useRef, useState } from 'preact/h
 import { Icon } from '@/Components/Icon'
 import { Switch } from '@/Components/Switch'
 import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
-import { useFilePreviewModal } from '@/Components/Files/FilePreviewModalProvider'
 import { PopoverFileItemProps } from './PopoverFileItem'
 import { PopoverFileItemActionType } from './PopoverFileItemAction'
 
 type Props = Omit<PopoverFileItemProps, 'renameFile' | 'getIconType'> & {
   setIsRenamingFile: StateUpdater<boolean>
+  previewHandler: () => void
 }
 
 export const PopoverFileSubmenu: FunctionComponent<Props> = ({
@@ -19,9 +19,8 @@ export const PopoverFileSubmenu: FunctionComponent<Props> = ({
   isAttachedToNote,
   handleFileAction,
   setIsRenamingFile,
+  previewHandler,
 }) => {
-  const filePreviewModal = useFilePreviewModal()
-
   const menuContainerRef = useRef<HTMLDivElement>(null)
   const menuButtonRef = useRef<HTMLButtonElement>(null)
   const menuRef = useRef<HTMLDivElement>(null)
@@ -90,7 +89,7 @@ export const PopoverFileSubmenu: FunctionComponent<Props> = ({
                 onBlur={closeOnBlur}
                 className="sn-dropdown-item focus:bg-info-backdrop"
                 onClick={() => {
-                  filePreviewModal.activate(file)
+                  previewHandler()
                   closeMenu()
                 }}
               >

From 9b47f2e2352484adddbbd0bb68e4771cc91149d8 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 22 Apr 2022 19:22:48 +0530
Subject: [PATCH 037/102] fix: video preview csp error (#992)

---
 config/application.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/application.rb b/config/application.rb
index 6d810d44c..4ba820593 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -50,7 +50,7 @@ module Web
          frame_ancestors: ["*", "*.standardnotes.com", "*.standardnotes.org"],
          img_src: ["'self'", '* data:', 'blob:'],
          manifest_src: %w('self'),
-         media_src: %w('self'),
+         media_src: %w('self' blob: *.standardnotes.com),
          object_src: %w('self'),
          plugin_types: %w(),
          script_src: %w('self' 'unsafe-inline' 'unsafe-eval'),

From b594aae8b97dd1a59ccebb997813e34582c09975 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 22 Apr 2022 19:25:04 +0530
Subject: [PATCH 038/102] fix: "file can't be previewed" flashing (#993)

---
 app/assets/javascripts/Components/Files/FilePreviewModal.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/assets/javascripts/Components/Files/FilePreviewModal.tsx b/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
index cb1ad72b0..0c42e1593 100644
--- a/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
+++ b/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
@@ -21,12 +21,11 @@ type Props = {
 export const FilePreviewModal: FunctionComponent<Props> = ({ application, file, onDismiss }) => {
   const [objectUrl, setObjectUrl] = useState<string>()
   const [isFilePreviewable, setIsFilePreviewable] = useState(false)
-  const [isLoadingFile, setIsLoadingFile] = useState(false)
+  const [isLoadingFile, setIsLoadingFile] = useState(true)
   const [showFileInfoPanel, setShowFileInfoPanel] = useState(false)
   const closeButtonRef = useRef<HTMLButtonElement>(null)
 
   const getObjectUrl = useCallback(async () => {
-    setIsLoadingFile(true)
     try {
       const chunks: Uint8Array[] = []
       await application.files.downloadFile(file, async (decryptedChunk: Uint8Array) => {

From 68ad0f17ae1a6e5f52fbe847e3c8db3557a8ac49 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 22 Apr 2022 21:58:10 +0530
Subject: [PATCH 039/102] feat: display files quota in preferences (#994)

---
 .../Preferences/Panes/Account/Files.tsx       |  37 ++++
 .../Preferences/Panes/Account/index.tsx       |   2 +
 .../javascripts/UIModels/AppState/AppState.ts |   2 +-
 .../UIModels/AppState/FilesState.ts           |  52 +++++-
 app/assets/stylesheets/_sn.scss               |  21 +++
 package.json                                  |   2 +-
 yarn.lock                                     | 162 ++++++++++--------
 7 files changed, 200 insertions(+), 78 deletions(-)
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/Account/Files.tsx

diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/Files.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/Files.tsx
new file mode 100644
index 000000000..237e099de
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/Files.tsx
@@ -0,0 +1,37 @@
+import { AppState } from '@/UIModels/AppState'
+import { formatSizeToReadableString } from '@standardnotes/filepicker'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { PreferencesGroup, PreferencesSegment, Subtitle, Title } from '../../PreferencesComponents'
+
+type Props = {
+  appState: AppState
+}
+
+export const FilesSection: FunctionComponent<Props> = observer(({ appState }) => {
+  if (!appState.features.isEntitledToFiles) {
+    return null
+  }
+
+  const filesQuotaUsed = appState.files.filesQuotaUsed
+  const filesQuotaTotal = appState.files.filesQuotaTotal
+
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>Files</Title>
+        <Subtitle>Storage Quota</Subtitle>
+        <div className="mt-1 mb-1">
+          <span className="font-semibold">{formatSizeToReadableString(filesQuotaUsed)}</span> of{' '}
+          <span>{formatSizeToReadableString(filesQuotaTotal)}</span> used
+        </div>
+        <progress
+          className="w-full progress-bar"
+          aria-label="Files storage used"
+          value={appState.files.filesQuotaUsed}
+          max={filesQuotaTotal}
+        />
+      </PreferencesSegment>
+    </PreferencesGroup>
+  )
+})
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx
index ac39ef251..302404789 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx
@@ -7,6 +7,7 @@ import { Credentials } from './Credentials'
 import { Sync } from './Sync'
 import { Subscription } from './Subscription/Subscription'
 import { SignOutWrapper } from './SignOutView'
+import { FilesSection } from './Files'
 
 type Props = {
   application: WebApplication
@@ -24,6 +25,7 @@ export const AccountPreferences = observer(({ application, appState }: Props) =>
       </>
     )}
     <Subscription application={application} appState={appState} />
+    <FilesSection appState={appState} />
     <SignOutWrapper application={application} appState={appState} />
   </PreferencesPane>
 ))
diff --git a/app/assets/javascripts/UIModels/AppState/AppState.ts b/app/assets/javascripts/UIModels/AppState/AppState.ts
index 2c616e1ed..49c9fe5b6 100644
--- a/app/assets/javascripts/UIModels/AppState/AppState.ts
+++ b/app/assets/javascripts/UIModels/AppState/AppState.ts
@@ -110,7 +110,7 @@ export class AppState {
     this.subscription = new SubscriptionState(application, this.appEventObserverRemovers)
     this.purchaseFlow = new PurchaseFlowState(application)
     this.notesView = new NotesViewState(application, this, this.appEventObserverRemovers)
-    this.files = new FilesState(application)
+    this.files = new FilesState(application, this.appEventObserverRemovers)
     this.addAppEventObserver()
     this.streamNotesAndTags()
     this.onVisibilityChange = () => {
diff --git a/app/assets/javascripts/UIModels/AppState/FilesState.ts b/app/assets/javascripts/UIModels/AppState/FilesState.ts
index d1a8b1bf2..1903f5c58 100644
--- a/app/assets/javascripts/UIModels/AppState/FilesState.ts
+++ b/app/assets/javascripts/UIModels/AppState/FilesState.ts
@@ -7,13 +7,61 @@ import {
   ClassicFileSaver,
   parseFileName,
 } from '@standardnotes/filepicker'
-import { ClientDisplayableError, SNFile } from '@standardnotes/snjs'
+import {
+  ApplicationEvent,
+  ClientDisplayableError,
+  ContentType,
+  SNFile,
+  SubscriptionSettingName,
+} from '@standardnotes/snjs'
 import { addToast, dismissToast, ToastType } from '@standardnotes/stylekit'
+import { action, makeObservable, observable } from 'mobx'
 
 import { WebApplication } from '../Application'
 
 export class FilesState {
-  constructor(private application: WebApplication) {}
+  filesQuotaUsed: number
+  filesQuotaTotal: number
+
+  constructor(private application: WebApplication, appObservers: (() => void)[]) {
+    this.filesQuotaUsed = 0
+    this.filesQuotaTotal = 0
+
+    makeObservable(this, {
+      filesQuotaUsed: observable,
+      filesQuotaTotal: observable,
+      getFilesQuota: action,
+    })
+
+    appObservers.push(
+      application.addEventObserver(async (event) => {
+        switch (event) {
+          case ApplicationEvent.Launched:
+          case ApplicationEvent.SignedIn:
+            this.getFilesQuota().catch(console.error)
+        }
+      }),
+      application.streamItems(ContentType.File, () => {
+        this.getFilesQuota().catch(console.error)
+      }),
+    )
+  }
+
+  public async getFilesQuota() {
+    const filesQuotaUsed = await this.application.settings.getSubscriptionSetting(
+      SubscriptionSettingName.FileUploadBytesUsed,
+    )
+    const filesQuotaTotal = await this.application.settings.getSubscriptionSetting(
+      SubscriptionSettingName.FileUploadBytesLimit,
+    )
+
+    if (filesQuotaUsed) {
+      this.filesQuotaUsed = parseFloat(filesQuotaUsed)
+    }
+    if (filesQuotaTotal) {
+      this.filesQuotaTotal = parseFloat(filesQuotaTotal)
+    }
+  }
 
   public async downloadFile(file: SNFile): Promise<void> {
     let downloadingToastId = ''
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index bcae64ae7..131418528 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -1127,3 +1127,24 @@
 .sn-component .hover\:bg-default:hover {
   background-color: var(--sn-stylekit-background-color);
 }
+
+.sn-component .progress-bar {
+  border-radius: 0.5rem;
+  background-color: var(--sn-stylekit-contrast-background-color);
+  border: 0;
+
+  &::-webkit-progress-bar {
+    background-color: var(--sn-stylekit-contrast-background-color);
+    border-radius: 0.5rem;
+  }
+
+  &::-webkit-progress-value {
+    background-color: var(--sn-stylekit-info-color);
+    border-radius: 0.5rem;
+  }
+
+  &::-moz-progress-bar {
+    background-color: var(--sn-stylekit-info-color);
+    border-radius: 0.5rem;
+  }
+}
diff --git a/package.json b/package.json
index 1a3b15bcb..7f36b81d6 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
     "@standardnotes/components": "1.7.15",
     "@standardnotes/filepicker": "1.12.0",
     "@standardnotes/sncrypto-web": "1.8.3",
-    "@standardnotes/snjs": "2.97.7",
+    "@standardnotes/snjs": "2.99.0",
     "@standardnotes/stylekit": "5.23.0",
     "@zip.js/zip.js": "^2.4.7",
     "mobx": "^6.5.0",
diff --git a/yarn.lock b/yarn.lock
index 56d386ccc..f40f231d2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2388,18 +2388,18 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@standardnotes/auth@^3.18.10":
-  version "3.18.10"
-  resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.18.10.tgz#6be69cb1d887464daec271aeda11af4784ecb9f5"
-  integrity sha512-ibJvW7T/xHQooF3XVN9aGqn8DEqZxXXI0V49jquWRAztvyZ4GTwcL2RmhS2vhxvKbD6g+pBC5IOYqDn6vlUkOg==
+"@standardnotes/auth@^3.18.11":
+  version "3.18.11"
+  resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.18.11.tgz#1044698e9c07d940b243d63f0deb0349481687c4"
+  integrity sha512-NygrMeYRTg/aqxlLroiRRoqsn1fL5Mz+gq/t0zz6+ecy3V4Pqz9fGu32l3IMYHQvI1B4vbgI1nnTp0jP5XPbjg==
   dependencies:
-    "@standardnotes/common" "^1.19.5"
+    "@standardnotes/common" "^1.19.6"
     jsonwebtoken "^8.5.1"
 
-"@standardnotes/common@^1.19.5":
-  version "1.19.5"
-  resolved "https://registry.yarnpkg.com/@standardnotes/common/-/common-1.19.5.tgz#2ebed30ae9a1136efbbc1d86cfe43be54dd817fc"
-  integrity sha512-rdKOdseVAXT/WJtjAQp7fp2FmXXjoMowSu0bCvE+ggjMigbiC1z8CbFYMa/Gav2Lp+nJkBUpIMOBIwFuvPJXXA==
+"@standardnotes/common@^1.19.6":
+  version "1.19.6"
+  resolved "https://registry.yarnpkg.com/@standardnotes/common/-/common-1.19.6.tgz#6c672f4f10d5ed123a2c392dfb35dbe3c698b3b9"
+  integrity sha512-HxPrV9JhLp//S7h+QjOjlMPy0lgrjLT4iBKzr8JG8lUeWSS1mY3p1I+w0D9+yiraS2SPq2L14Z0VKds0zs9HXw==
 
 "@standardnotes/components@1.7.15":
   version "1.7.15"
@@ -2414,74 +2414,87 @@
     "@typescript-eslint/eslint-plugin" "^5.12.1"
     "@typescript-eslint/parser" "^5.12.1"
 
-"@standardnotes/domain-events@^2.27.9":
-  version "2.27.9"
-  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.27.9.tgz#dbbf2bc0449e5555a6cc07945f04e86eb624e5b4"
-  integrity sha512-UGNlUplpp4N7FL03TuGj8xVUM2Yl/pjkVUTGijHFQMu6O2k/ugu7Bqv9cGPZS99Ix3gZUA/JUdHf9+5yRKKxCw==
+"@standardnotes/domain-events@^2.27.10":
+  version "2.27.10"
+  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.27.10.tgz#ce52a7c51849a8f8995678be907c68937b8cfe02"
+  integrity sha512-TD71BRl9KRaxZBtYPFU2dmvz8L0H1AZvLF12KJrpcXVAPbSwNaprMx0LdATerIlpIa47cR/SbBBW9GRFpk5RTA==
   dependencies:
-    "@standardnotes/auth" "^3.18.10"
-    "@standardnotes/features" "^1.37.8"
+    "@standardnotes/auth" "^3.18.11"
+    "@standardnotes/features" "^1.37.9"
 
-"@standardnotes/encryption@^1.4.7":
-  version "1.4.7"
-  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.4.7.tgz#11340aa5f90a01d20a778c63a83f9949fef0e7d1"
-  integrity sha512-ot/8YsKSe/Kk8wMbmvH4/Ks/vSr2cUsg+oZVKZVKjgmGnxG2J57vkWOKIKx4GtIUIoq4HYK8JEvhY8Rx83WulA==
+"@standardnotes/encryption@^1.4.8":
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.4.8.tgz#9d9f118f80df1a241f505474c7af154190990b38"
+  integrity sha512-AU4eFNzU7sJj+BLpyrUrOn3z6WmkLw1XriF0m8q+a/tzco2ez5j0bM4REMAFfpreOhFN5KSJ0yUTh8pLxwyZxA==
   dependencies:
-    "@standardnotes/models" "^1.4.7"
-    "@standardnotes/responses" "^1.6.9"
-    "@standardnotes/services" "^1.9.8"
+    "@standardnotes/models" "^1.4.8"
+    "@standardnotes/responses" "^1.6.10"
+    "@standardnotes/services" "^1.9.9"
 
-"@standardnotes/features@^1.37.8":
-  version "1.37.8"
-  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.37.8.tgz#9214d9909da721e5db4774bc8ea7b5964b2dc322"
-  integrity sha512-A5ZSnxTO5fKpsEnlFhD3eIfcphn1d2V+6ATDcaJJIVr0tMPL5Km4BRUvu8VieosHn0obojfFCJpXKSRkxuqtlA==
+"@standardnotes/features@^1.37.9":
+  version "1.37.9"
+  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.37.9.tgz#8de7cc747e29684976d5bb5534b2a36edfa0d07c"
+  integrity sha512-+j4/skCnd9SIY9KmULv7fX1KPBpgs8uOC78/TBf8rT20KEI1rNIw9c9RFTMEaQW/2tn2HPFweHAetWzIUiTWJg==
   dependencies:
-    "@standardnotes/auth" "^3.18.10"
-    "@standardnotes/common" "^1.19.5"
+    "@standardnotes/auth" "^3.18.11"
+    "@standardnotes/common" "^1.19.6"
 
 "@standardnotes/filepicker@1.12.0":
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.12.0.tgz#6ee1224c8a7d039565a27950aa4e879a18fecebf"
   integrity sha512-67hsz3/xnOmvhxFVUurjuLU1jaMKEYXCwwGSls/NJxkXEX1WwWA9kvAwAnrJTRoFJAKVDyBglcLpRrFkOvEc9w==
 
-"@standardnotes/models@^1.4.7":
-  version "1.4.7"
-  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.4.7.tgz#e0e5c12f40b477db4e0dc1e20a7251461f064524"
-  integrity sha512-jD5EI9g3boNEJSPnZ4eeNOYjwLQEeQU839lFqe3RrDq6M7ukUgniHBxHxgEPzgPELyIbPFN+NOoLCZdqW9h2Kg==
+"@standardnotes/filepicker@^1.13.1":
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.13.1.tgz#bad1e3434711e4894b08a40cc16ec4e631bf8476"
+  integrity sha512-oK5Ew9avEH9LO2YGW1fSlUHMx9wOYS0KeXt2UOnl0B+SwAiVQN14F6DfvTyZ+JlEqn8PXq0liUoRTN9Lk7Fbgg==
   dependencies:
-    "@standardnotes/features" "^1.37.8"
-    "@standardnotes/responses" "^1.6.9"
-    "@standardnotes/utils" "^1.6.1"
+    "@standardnotes/common" "^1.19.6"
+    "@standardnotes/utils" "^1.6.2"
 
-"@standardnotes/responses@^1.6.9":
-  version "1.6.9"
-  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.6.9.tgz#a69a8698ddada21f0edb6bbbf50f8a68a4614bfd"
-  integrity sha512-HUKOrqZ5WGnxMoDGh6aEnQY48Eo3W3rNpesm91vRuKBVTxbwb876RXlElEtEAz5MYepatIg5mcX2dPxIZIHSvg==
+"@standardnotes/models@^1.4.8":
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.4.8.tgz#7da29c5e3d7de4265c1f1a6f112e9b89c85c26c9"
+  integrity sha512-30cMS320htMTBvpYcPFsFhkmr6JyvQIkc/7IvCKPxK40yGWdTGRqwfNNSDMP5SMKXjf4t7sh1NJGjJe44DrdbQ==
   dependencies:
-    "@standardnotes/auth" "^3.18.10"
-    "@standardnotes/common" "^1.19.5"
-    "@standardnotes/features" "^1.37.8"
+    "@standardnotes/features" "^1.37.9"
+    "@standardnotes/responses" "^1.6.10"
+    "@standardnotes/utils" "^1.6.2"
 
-"@standardnotes/services@^1.9.8":
-  version "1.9.8"
-  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.9.8.tgz#3942dfc58584388e4ec886d11f039c3f2119b7a9"
-  integrity sha512-uWuLNsgStNcy1dIvAsPt3VO7M01nNna0PxGs1PZupG22vm7WSbZz7bXkHmIz5ToJmsFi69M9Bt8akuzgwi3eRw==
+"@standardnotes/responses@^1.6.10":
+  version "1.6.10"
+  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.6.10.tgz#7f3436ec183005c3802b60214fe9a5b8f817e14e"
+  integrity sha512-orR8DIUk8IzoOdSzcpOC620LZxPog1ts+qD7Lv+45/FqHOhbzCce2eoOgheMjkaQi+TTbyR68QfmdJN853rzHQ==
   dependencies:
-    "@standardnotes/common" "^1.19.5"
-    "@standardnotes/models" "^1.4.7"
-    "@standardnotes/responses" "^1.6.9"
-    "@standardnotes/utils" "^1.6.1"
+    "@standardnotes/auth" "^3.18.11"
+    "@standardnotes/common" "^1.19.6"
+    "@standardnotes/features" "^1.37.9"
 
-"@standardnotes/settings@^1.14.0":
-  version "1.14.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/settings/-/settings-1.14.0.tgz#f53b7bfecd9a49a5d4369d7f989e6378da13a798"
-  integrity sha512-YdbGKHDW9Ee/UhE4Q1r8UQcbtz384yyjzJp88m1CmZwARrDurJCfQneo4IX2lKVjjmXMCeZuA6sUXoAwejbreQ==
+"@standardnotes/services@^1.9.9":
+  version "1.9.9"
+  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.9.9.tgz#5ab11644dae227435e087dea5b9a37145db96a7d"
+  integrity sha512-moUI8s00zLJZum2MMvqft85Yk3ZDWQFuhZeC+o0Xt8Pp9RE6sLOhuAmS3/WnKPMww3/ggoy7mdOqZ2aIn+q1eg==
+  dependencies:
+    "@standardnotes/common" "^1.19.6"
+    "@standardnotes/models" "^1.4.8"
+    "@standardnotes/responses" "^1.6.10"
+    "@standardnotes/utils" "^1.6.2"
+
+"@standardnotes/settings@^1.14.1":
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/settings/-/settings-1.14.1.tgz#8b6c84e2eeeab274a557bad25cb16a62d60916ec"
+  integrity sha512-zRRBoflI77Zqa5ejZcXFPnvwVKf/gbLNtutB/pQE5SYlDMUgWtg6Qm8r4667Ue/nBUWZixCH0sznEN8XK8rCBw==
 
 "@standardnotes/sncrypto-common@^1.7.6":
   version "1.7.6"
   resolved "https://registry.yarnpkg.com/@standardnotes/sncrypto-common/-/sncrypto-common-1.7.6.tgz#8ff57f4eb8803d5631983d2f17f3c9ec2ec22011"
   integrity sha512-jzS4dIIsIVCEw4e6AdoOm0L71NHbc/RcYktiFbVDrr2teQn8z7777PdzHVXUEX5vcmtaZ0VADnev39wm0K5Rvw==
 
+"@standardnotes/sncrypto-common@^1.7.7":
+  version "1.7.7"
+  resolved "https://registry.yarnpkg.com/@standardnotes/sncrypto-common/-/sncrypto-common-1.7.7.tgz#5970bbf09dc541a9894fec1101d5c92be5822ad1"
+  integrity sha512-ncpzrurFtgupbQvv6+aDts9Cebx57MMI78Dl2KnJJbFm+G47UJuxfX11q2aomBJdp2XdbWhQxCKOQPl5mmwWPQ==
+
 "@standardnotes/sncrypto-web@1.8.3":
   version "1.8.3"
   resolved "https://registry.yarnpkg.com/@standardnotes/sncrypto-web/-/sncrypto-web-1.8.3.tgz#788ddf484d4170d6ab69859067f4404085dda380"
@@ -2491,22 +2504,23 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.97.7":
-  version "2.97.7"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.97.7.tgz#1354d234aa93f5c7c86f4f56c0631394e3e5a155"
-  integrity sha512-2H9hggd/yE78f0/KFGP914efO2iq9hfAczI6eQzjZaXZD8LAXzBqko01ScVlUNoIisYlJvrbWp368bnR+erwqQ==
+"@standardnotes/snjs@2.99.0":
+  version "2.99.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.99.0.tgz#b9c51d68abb9d9c43ebe108c39229f0896e37f51"
+  integrity sha512-rn/F3YiHBKfzylHTY4U8YbvShX/yNegaHQpAbmvP6uXCXF8msLcppKnecPw5pweQiv+o6JNORSBFfP25C6sbrw==
   dependencies:
-    "@standardnotes/auth" "^3.18.10"
-    "@standardnotes/common" "^1.19.5"
-    "@standardnotes/domain-events" "^2.27.9"
-    "@standardnotes/encryption" "^1.4.7"
-    "@standardnotes/features" "^1.37.8"
-    "@standardnotes/models" "^1.4.7"
-    "@standardnotes/responses" "^1.6.9"
-    "@standardnotes/services" "^1.9.8"
-    "@standardnotes/settings" "^1.14.0"
-    "@standardnotes/sncrypto-common" "^1.7.6"
-    "@standardnotes/utils" "^1.6.1"
+    "@standardnotes/auth" "^3.18.11"
+    "@standardnotes/common" "^1.19.6"
+    "@standardnotes/domain-events" "^2.27.10"
+    "@standardnotes/encryption" "^1.4.8"
+    "@standardnotes/features" "^1.37.9"
+    "@standardnotes/filepicker" "^1.13.1"
+    "@standardnotes/models" "^1.4.8"
+    "@standardnotes/responses" "^1.6.10"
+    "@standardnotes/services" "^1.9.9"
+    "@standardnotes/settings" "^1.14.1"
+    "@standardnotes/sncrypto-common" "^1.7.7"
+    "@standardnotes/utils" "^1.6.2"
 
 "@standardnotes/stylekit@5.23.0":
   version "5.23.0"
@@ -2521,12 +2535,12 @@
     nanostores "^0.5.10"
     prop-types "^15.8.1"
 
-"@standardnotes/utils@^1.6.1":
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/utils/-/utils-1.6.1.tgz#db26a7fb8890c9e187054bc8951cac18e48feca0"
-  integrity sha512-WhcyoWGKHbrcCVTR5MJNSgbS/T3cAZPw1IhRCE+0t07ChBow8shOr3/8BN+J/lzPcRMcTfVh3+MQLxLKIHEA5A==
+"@standardnotes/utils@^1.6.2":
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/@standardnotes/utils/-/utils-1.6.2.tgz#c118b6e7b23c4618d664e7894b3c49c702f656df"
+  integrity sha512-huU/t93Dy940bsB1JTfK3joqcZDT8toZfAtuktvHHHloTI7o5Wb0q9BtsmfGLRf1ohTq5ya0xkHFO5QVaAlV3g==
   dependencies:
-    "@standardnotes/common" "^1.19.5"
+    "@standardnotes/common" "^1.19.6"
     dompurify "^2.3.6"
     lodash "^4.17.21"
 

From abb85b3f115e3465f77e75c7e6d345993db09cc3 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Fri, 22 Apr 2022 13:54:34 -0500
Subject: [PATCH 040/102] refactor: improve device interface types (#996)

---
 app/assets/javascripts/App.tsx                | 12 +--
 .../Components/ApplicationView/index.tsx      |  7 +-
 .../Components/ComponentView/index.tsx        |  4 +-
 .../Components/ConfirmSignoutModal/index.tsx  |  8 +-
 .../Components/NoteView/NoteView.tsx          |  2 +-
 .../Device/DesktopDeviceInterface.ts          | 11 +++
 .../javascripts/Device/DesktopSnjsExports.ts  |  1 +
 .../Device/DesktopWebCommunication.ts         | 44 +++++++++
 .../{ => Device}/StartApplication.ts          |  4 +-
 app/assets/javascripts/Device/WebDevice.ts    | 26 +++++
 .../WebOrDesktopDevice.ts}                    | 95 +++++++++++++------
 .../Device/WebOrDesktopDeviceInterface.ts     |  9 ++
 app/assets/javascripts/Services/Bridge.ts     | 37 --------
 .../javascripts/Services/BrowserBridge.ts     | 42 --------
 .../javascripts/Services/DesktopManager.ts    | 60 ++++++------
 .../javascripts/Services/ThemeManager.ts      |  8 +-
 .../javascripts/UIModels/AppState/AppState.ts |  8 +-
 .../UIModels/AppState/NotesViewState.ts       | 15 ++-
 .../javascripts/UIModels/Application.ts       | 35 ++++---
 .../javascripts/UIModels/ApplicationGroup.ts  | 27 +++---
 package.json                                  |  8 +-
 yarn.lock                                     | 68 ++++++-------
 22 files changed, 296 insertions(+), 235 deletions(-)
 create mode 100644 app/assets/javascripts/Device/DesktopDeviceInterface.ts
 create mode 100644 app/assets/javascripts/Device/DesktopSnjsExports.ts
 create mode 100644 app/assets/javascripts/Device/DesktopWebCommunication.ts
 rename app/assets/javascripts/{ => Device}/StartApplication.ts (62%)
 create mode 100644 app/assets/javascripts/Device/WebDevice.ts
 rename app/assets/javascripts/{WebDeviceInterface.ts => Device/WebOrDesktopDevice.ts} (58%)
 create mode 100644 app/assets/javascripts/Device/WebOrDesktopDeviceInterface.ts
 delete mode 100644 app/assets/javascripts/Services/Bridge.ts
 delete mode 100644 app/assets/javascripts/Services/BrowserBridge.ts

diff --git a/app/assets/javascripts/App.tsx b/app/assets/javascripts/App.tsx
index 0cb0d0f49..a4df70848 100644
--- a/app/assets/javascripts/App.tsx
+++ b/app/assets/javascripts/App.tsx
@@ -20,15 +20,15 @@ import { IsWebPlatform, WebAppVersion } from '@/Version'
 import { Runtime, SNLog } from '@standardnotes/snjs'
 import { render } from 'preact'
 import { ApplicationGroupView } from './Components/ApplicationGroupView'
-import { Bridge } from './Services/Bridge'
-import { BrowserBridge } from './Services/BrowserBridge'
-import { StartApplication } from './StartApplication'
+import { WebDevice } from './Device/WebDevice'
+import { StartApplication } from './Device/StartApplication'
 import { ApplicationGroup } from './UIModels/ApplicationGroup'
 import { isDev } from './Utils'
+import { WebOrDesktopDevice } from './Device/WebOrDesktopDevice'
 
 const startApplication: StartApplication = async function startApplication(
   defaultSyncServerHost: string,
-  bridge: Bridge,
+  device: WebOrDesktopDevice,
   enableUnfinishedFeatures: boolean,
   webSocketUrl: string,
 ) {
@@ -37,7 +37,7 @@ const startApplication: StartApplication = async function startApplication(
 
   const mainApplicationGroup = new ApplicationGroup(
     defaultSyncServerHost,
-    bridge,
+    device,
     enableUnfinishedFeatures ? Runtime.Dev : Runtime.Prod,
     webSocketUrl,
   )
@@ -70,7 +70,7 @@ const startApplication: StartApplication = async function startApplication(
 if (IsWebPlatform) {
   startApplication(
     window.defaultSyncServer,
-    new BrowserBridge(WebAppVersion),
+    new WebDevice(WebAppVersion),
     window.enabledUnfinishedFeatures,
     window.websocketUrl,
   ).catch(console.error)
diff --git a/app/assets/javascripts/Components/ApplicationView/index.tsx b/app/assets/javascripts/Components/ApplicationView/index.tsx
index 9fe5481f4..af0eb42ac 100644
--- a/app/assets/javascripts/Components/ApplicationView/index.tsx
+++ b/app/assets/javascripts/Components/ApplicationView/index.tsx
@@ -59,7 +59,11 @@ export class ApplicationView extends PureComponent<Props, State> {
   }
 
   async loadApplication() {
-    this.application.componentManager.setDesktopManager(this.application.getDesktopService())
+    const desktopService = this.application.getDesktopService()
+    if (desktopService) {
+      this.application.componentManager.setDesktopManager(desktopService)
+    }
+
     await this.application.prepareForLaunch({
       receiveChallenge: async (challenge) => {
         const challenges = this.state.challenges.slice()
@@ -67,6 +71,7 @@ export class ApplicationView extends PureComponent<Props, State> {
         this.setState({ challenges: challenges })
       },
     })
+
     await this.application.launch()
   }
 
diff --git a/app/assets/javascripts/Components/ComponentView/index.tsx b/app/assets/javascripts/Components/ComponentView/index.tsx
index c12bb4183..826649e2e 100644
--- a/app/assets/javascripts/Components/ComponentView/index.tsx
+++ b/app/assets/javascripts/Components/ComponentView/index.tsx
@@ -168,14 +168,14 @@ export const ComponentView: FunctionalComponent<IProps> = observer(
     useEffect(() => {
       const unregisterDesktopObserver = application
         .getDesktopService()
-        .registerUpdateObserver((updatedComponent: SNComponent) => {
+        ?.registerUpdateObserver((updatedComponent: SNComponent) => {
           if (updatedComponent.uuid === component.uuid && updatedComponent.active) {
             requestReload?.(componentViewer)
           }
         })
 
       return () => {
-        unregisterDesktopObserver()
+        unregisterDesktopObserver?.()
       }
     }, [application, requestReload, componentViewer, component.uuid])
 
diff --git a/app/assets/javascripts/Components/ConfirmSignoutModal/index.tsx b/app/assets/javascripts/Components/ConfirmSignoutModal/index.tsx
index 132b42574..ff5fe6c48 100644
--- a/app/assets/javascripts/Components/ConfirmSignoutModal/index.tsx
+++ b/app/assets/javascripts/Components/ConfirmSignoutModal/index.tsx
@@ -28,8 +28,8 @@ export const ConfirmSignoutModal = observer(({ application, appState }: Props) =
   const [localBackupsCount, setLocalBackupsCount] = useState(0)
 
   useEffect(() => {
-    application.bridge.localBackupsCount().then(setLocalBackupsCount).catch(console.error)
-  }, [appState.accountMenu.signingOut, application.bridge])
+    application.desktopDevice?.localBackupsCount().then(setLocalBackupsCount).catch(console.error)
+  }, [appState.accountMenu.signingOut, application.desktopDevice])
 
   return (
     <AlertDialog onDismiss={closeDialog} leastDestructiveRef={cancelRef}>
@@ -44,6 +44,7 @@ export const ConfirmSignoutModal = observer(({ application, appState }: Props) =
                 <AlertDialogDescription className="sk-panel-row">
                   <p className="color-foreground">{STRING_SIGN_OUT_CONFIRMATION}</p>
                 </AlertDialogDescription>
+
                 {localBackupsCount > 0 && (
                   <div className="flex">
                     <div className="sk-panel-row"></div>
@@ -63,13 +64,14 @@ export const ConfirmSignoutModal = observer(({ application, appState }: Props) =
                     <button
                       className="capitalize sk-a ml-1.5 p-0 rounded cursor-pointer"
                       onClick={() => {
-                        application.bridge.viewlocalBackups()
+                        application.desktopDevice?.viewlocalBackups()
                       }}
                     >
                       View backup files
                     </button>
                   </div>
                 )}
+
                 <div className="flex my-1 mt-4">
                   <button className="sn-button small neutral" ref={cancelRef} onClick={closeDialog}>
                     Cancel
diff --git a/app/assets/javascripts/Components/NoteView/NoteView.tsx b/app/assets/javascripts/Components/NoteView/NoteView.tsx
index 77bd6bd9d..577156ac2 100644
--- a/app/assets/javascripts/Components/NoteView/NoteView.tsx
+++ b/app/assets/javascripts/Components/NoteView/NoteView.tsx
@@ -147,7 +147,7 @@ export class NoteView extends PureComponent<Props, State> {
     this.controller = props.controller
 
     this.onEditorComponentLoad = () => {
-      this.application.getDesktopService().redoSearch()
+      this.application.getDesktopService()?.redoSearch()
     }
 
     this.debounceReloadEditorComponent = debounce(this.debounceReloadEditorComponent.bind(this), 25)
diff --git a/app/assets/javascripts/Device/DesktopDeviceInterface.ts b/app/assets/javascripts/Device/DesktopDeviceInterface.ts
new file mode 100644
index 000000000..be4e54c5a
--- /dev/null
+++ b/app/assets/javascripts/Device/DesktopDeviceInterface.ts
@@ -0,0 +1,11 @@
+import { DeviceInterface, Environment } from '@standardnotes/snjs'
+import { WebOrDesktopDevice } from '@/Device/WebOrDesktopDevice'
+import { WebCommunicationReceiver } from './DesktopWebCommunication'
+
+export function isDesktopDevice(x: DeviceInterface): x is DesktopDeviceInterface {
+  return x.environment === Environment.Desktop
+}
+
+export interface DesktopDeviceInterface extends WebOrDesktopDevice, WebCommunicationReceiver {
+  environment: Environment.Desktop
+}
diff --git a/app/assets/javascripts/Device/DesktopSnjsExports.ts b/app/assets/javascripts/Device/DesktopSnjsExports.ts
new file mode 100644
index 000000000..acd1a5c72
--- /dev/null
+++ b/app/assets/javascripts/Device/DesktopSnjsExports.ts
@@ -0,0 +1 @@
+export { Environment, RawKeychainValue } from '@standardnotes/snjs'
diff --git a/app/assets/javascripts/Device/DesktopWebCommunication.ts b/app/assets/javascripts/Device/DesktopWebCommunication.ts
new file mode 100644
index 000000000..ed379e240
--- /dev/null
+++ b/app/assets/javascripts/Device/DesktopWebCommunication.ts
@@ -0,0 +1,44 @@
+import { DecryptedTransferPayload } from '@standardnotes/snjs'
+
+/** Receives communications emitted by Web Core. This would be the Desktop client. */
+export interface WebCommunicationReceiver {
+  localBackupsCount(): Promise<number>
+
+  viewlocalBackups(): void
+
+  deleteLocalBackups(): Promise<void>
+
+  syncComponents(payloads: unknown[]): void
+
+  onMajorDataChange(): void
+
+  onInitialDataLoad(): void
+
+  onSignOut(): void
+
+  onSearch(text?: string): void
+
+  downloadBackup(): void | Promise<void>
+
+  get extensionsServerHost(): string
+}
+
+/** Receives communications emitted by the desktop client. This would be Web Core. */
+export interface DesktopCommunicationReceiver {
+  updateAvailable(): void
+
+  windowGainedFocus(): void
+
+  windowLostFocus(): void
+
+  onComponentInstallationComplete(
+    componentData: DecryptedTransferPayload,
+    error: unknown,
+  ): Promise<void>
+
+  requestBackupFile(): Promise<string | undefined>
+
+  didBeginBackup(): void
+
+  didFinishBackup(success: boolean): void
+}
diff --git a/app/assets/javascripts/StartApplication.ts b/app/assets/javascripts/Device/StartApplication.ts
similarity index 62%
rename from app/assets/javascripts/StartApplication.ts
rename to app/assets/javascripts/Device/StartApplication.ts
index cc18be2c2..b0d8f35ee 100644
--- a/app/assets/javascripts/StartApplication.ts
+++ b/app/assets/javascripts/Device/StartApplication.ts
@@ -1,8 +1,8 @@
-import { Bridge } from './Services/Bridge'
+import { WebOrDesktopDevice } from './WebOrDesktopDevice'
 
 export type StartApplication = (
   defaultSyncServerHost: string,
-  bridge: Bridge,
+  device: WebOrDesktopDevice,
   enableUnfinishedFeatures: boolean,
   webSocketUrl: string,
 ) => Promise<void>
diff --git a/app/assets/javascripts/Device/WebDevice.ts b/app/assets/javascripts/Device/WebDevice.ts
new file mode 100644
index 000000000..97f3917b0
--- /dev/null
+++ b/app/assets/javascripts/Device/WebDevice.ts
@@ -0,0 +1,26 @@
+import { Environment, RawKeychainValue } from '@standardnotes/snjs'
+import { WebOrDesktopDevice } from '@/Device/WebOrDesktopDevice'
+
+const KEYCHAIN_STORAGE_KEY = 'keychain'
+
+export class WebDevice extends WebOrDesktopDevice {
+  environment = Environment.Web
+
+  async getKeychainValue(): Promise<RawKeychainValue> {
+    const value = localStorage.getItem(KEYCHAIN_STORAGE_KEY)
+
+    if (value) {
+      return JSON.parse(value)
+    }
+
+    return {}
+  }
+
+  async setKeychainValue(value: RawKeychainValue): Promise<void> {
+    localStorage.setItem(KEYCHAIN_STORAGE_KEY, JSON.stringify(value))
+  }
+
+  async clearRawKeychainValue(): Promise<void> {
+    localStorage.removeItem(KEYCHAIN_STORAGE_KEY)
+  }
+}
diff --git a/app/assets/javascripts/WebDeviceInterface.ts b/app/assets/javascripts/Device/WebOrDesktopDevice.ts
similarity index 58%
rename from app/assets/javascripts/WebDeviceInterface.ts
rename to app/assets/javascripts/Device/WebOrDesktopDevice.ts
index 6a728708e..5279ebafc 100644
--- a/app/assets/javascripts/WebDeviceInterface.ts
+++ b/app/assets/javascripts/Device/WebOrDesktopDevice.ts
@@ -1,38 +1,60 @@
 import {
-  getGlobalScope,
   SNApplication,
   ApplicationIdentifier,
-  AbstractDevice,
+  Environment,
+  LegacyRawKeychainValue,
+  RawKeychainValue,
+  TransferPayload,
+  NamespacedRootKeyInKeychain,
 } from '@standardnotes/snjs'
-import { Database } from '@/Database'
-import { Bridge } from './Services/Bridge'
+import { Database } from '../Database'
+import { WebOrDesktopDeviceInterface } from './WebOrDesktopDeviceInterface'
+
+export abstract class WebOrDesktopDevice implements WebOrDesktopDeviceInterface {
+  constructor(public appVersion: string) {}
 
-export class WebDeviceInterface extends AbstractDevice {
   private databases: Database[] = []
 
-  constructor(private bridge: Bridge) {
-    super(setTimeout.bind(getGlobalScope()), setInterval.bind(getGlobalScope()))
-  }
+  abstract environment: Environment
 
   setApplication(application: SNApplication) {
     const database = new Database(application.identifier, application.alertService)
+
     this.databases.push(database)
   }
 
+  public async getJsonParsedRawStorageValue(key: string): Promise<unknown | undefined> {
+    const value = await this.getRawStorageValue(key)
+    if (value == undefined) {
+      return undefined
+    }
+
+    try {
+      return JSON.parse(value)
+    } catch (e) {
+      return value
+    }
+  }
+
   private databaseForIdentifier(identifier: ApplicationIdentifier) {
     return this.databases.find((database) => database.databaseName === identifier) as Database
   }
 
-  override deinit() {
-    super.deinit()
+  deinit() {
     for (const database of this.databases) {
       database.deinit()
     }
     this.databases = []
   }
 
-  async getRawStorageValue(key: string) {
-    return localStorage.getItem(key) as any
+  async getRawStorageValue(key: string): Promise<string | undefined> {
+    const result = localStorage.getItem(key)
+
+    if (result == undefined) {
+      return undefined
+    }
+
+    return result
   }
 
   async getAllRawStorageKeyValues() {
@@ -46,7 +68,7 @@ export class WebDeviceInterface extends AbstractDevice {
     return results
   }
 
-  async setRawStorageValue(key: string, value: any) {
+  async setRawStorageValue(key: string, value: string) {
     localStorage.setItem(key, value)
   }
 
@@ -78,11 +100,11 @@ export class WebDeviceInterface extends AbstractDevice {
     return this.databaseForIdentifier(identifier).getAllPayloads()
   }
 
-  async saveRawDatabasePayload(payload: any, identifier: ApplicationIdentifier) {
+  async saveRawDatabasePayload(payload: TransferPayload, identifier: ApplicationIdentifier) {
     return this.databaseForIdentifier(identifier).savePayload(payload)
   }
 
-  async saveRawDatabasePayloads(payloads: any[], identifier: ApplicationIdentifier) {
+  async saveRawDatabasePayloads(payloads: TransferPayload[], identifier: ApplicationIdentifier) {
     return this.databaseForIdentifier(identifier).savePayloads(payloads)
   }
 
@@ -95,43 +117,44 @@ export class WebDeviceInterface extends AbstractDevice {
   }
 
   async getNamespacedKeychainValue(identifier: ApplicationIdentifier) {
-    const keychain = await this.getRawKeychainValue()
+    const keychain = await this.getKeychainValue()
+
     if (!keychain) {
       return
     }
+
     return keychain[identifier]
   }
 
-  async setNamespacedKeychainValue(value: any, identifier: ApplicationIdentifier) {
-    let keychain = await this.getRawKeychainValue()
+  async setNamespacedKeychainValue(
+    value: NamespacedRootKeyInKeychain,
+    identifier: ApplicationIdentifier,
+  ) {
+    let keychain = await this.getKeychainValue()
+
     if (!keychain) {
       keychain = {}
     }
-    return this.bridge.setKeychainValue({
+
+    return this.setKeychainValue({
       ...keychain,
       [identifier]: value,
     })
   }
 
   async clearNamespacedKeychainValue(identifier: ApplicationIdentifier) {
-    const keychain = await this.getRawKeychainValue()
+    const keychain = await this.getKeychainValue()
     if (!keychain) {
       return
     }
+
     delete keychain[identifier]
-    return this.bridge.setKeychainValue(keychain)
+
+    return this.setKeychainValue(keychain)
   }
 
-  getRawKeychainValue(): Promise<any> {
-    return this.bridge.getKeychainValue()
-  }
-
-  legacy_setRawKeychainValue(value: unknown): Promise<any> {
-    return this.bridge.setKeychainValue(value)
-  }
-
-  clearRawKeychainValue() {
-    return this.bridge.clearKeychainValue()
+  setRawKeychainValue(value: unknown): Promise<void> {
+    return this.setKeychainValue(value)
   }
 
   openUrl(url: string) {
@@ -140,4 +163,14 @@ export class WebDeviceInterface extends AbstractDevice {
       win.focus()
     }
   }
+
+  setLegacyRawKeychainValue(value: LegacyRawKeychainValue): Promise<void> {
+    return this.setKeychainValue(value)
+  }
+
+  abstract getKeychainValue(): Promise<RawKeychainValue>
+
+  abstract setKeychainValue(value: unknown): Promise<void>
+
+  abstract clearRawKeychainValue(): Promise<void>
 }
diff --git a/app/assets/javascripts/Device/WebOrDesktopDeviceInterface.ts b/app/assets/javascripts/Device/WebOrDesktopDeviceInterface.ts
new file mode 100644
index 000000000..ccd8e08f2
--- /dev/null
+++ b/app/assets/javascripts/Device/WebOrDesktopDeviceInterface.ts
@@ -0,0 +1,9 @@
+import { DeviceInterface, RawKeychainValue } from '@standardnotes/snjs'
+
+export interface WebOrDesktopDeviceInterface extends DeviceInterface {
+  readonly appVersion: string
+
+  getKeychainValue(): Promise<RawKeychainValue>
+
+  setKeychainValue(value: RawKeychainValue): Promise<void>
+}
diff --git a/app/assets/javascripts/Services/Bridge.ts b/app/assets/javascripts/Services/Bridge.ts
deleted file mode 100644
index fe78d0e29..000000000
--- a/app/assets/javascripts/Services/Bridge.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * This file will be imported by desktop, so we make sure imports are carrying
- * as little extra code as possible with them.
- */
-import { Environment } from '@standardnotes/snjs'
-
-export interface ElectronDesktopCallbacks {
-  desktop_updateAvailable(): void
-  desktop_windowGainedFocus(): void
-  desktop_windowLostFocus(): void
-  desktop_onComponentInstallationComplete(componentData: any, error: any): Promise<void>
-  desktop_requestBackupFile(): Promise<string | undefined>
-  desktop_didBeginBackup(): void
-  desktop_didFinishBackup(success: boolean): void
-}
-
-/** Platform-specific (i-e Electron/browser) behavior is handled by a Bridge object. */
-export interface Bridge {
-  readonly appVersion: string
-  environment: Environment
-
-  getKeychainValue(): Promise<unknown>
-  setKeychainValue(value: unknown): Promise<void>
-  clearKeychainValue(): Promise<void>
-
-  localBackupsCount(): Promise<number>
-  viewlocalBackups(): void
-  deleteLocalBackups(): Promise<void>
-
-  extensionsServerHost?: string
-  syncComponents(payloads: unknown[]): void
-  onMajorDataChange(): void
-  onInitialDataLoad(): void
-  onSignOut(): void
-  onSearch(text?: string): void
-  downloadBackup(): void | Promise<void>
-}
diff --git a/app/assets/javascripts/Services/BrowserBridge.ts b/app/assets/javascripts/Services/BrowserBridge.ts
deleted file mode 100644
index 9d4c8b835..000000000
--- a/app/assets/javascripts/Services/BrowserBridge.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Bridge } from './Bridge'
-import { Environment } from '@standardnotes/snjs'
-
-const KEYCHAIN_STORAGE_KEY = 'keychain'
-
-export class BrowserBridge implements Bridge {
-  constructor(public appVersion: string) {}
-  environment = Environment.Web
-
-  async getKeychainValue(): Promise<unknown> {
-    const value = localStorage.getItem(KEYCHAIN_STORAGE_KEY)
-    if (value) {
-      return JSON.parse(value)
-    }
-    return undefined
-  }
-
-  async setKeychainValue(value: unknown): Promise<void> {
-    localStorage.setItem(KEYCHAIN_STORAGE_KEY, JSON.stringify(value))
-  }
-
-  async clearKeychainValue(): Promise<void> {
-    localStorage.removeItem(KEYCHAIN_STORAGE_KEY)
-  }
-
-  async localBackupsCount(): Promise<number> {
-    /** Browsers cannot save backups, only let you download one */
-    return 0
-  }
-
-  /** No-ops */
-
-  /* eslint-disable @typescript-eslint/no-empty-function */
-  async deleteLocalBackups(): Promise<void> {}
-  viewlocalBackups(): void {}
-  syncComponents(): void {}
-  onMajorDataChange(): void {}
-  onInitialDataLoad(): void {}
-  onSearch(): void {}
-  downloadBackup(): void {}
-  onSignOut(): void {}
-}
diff --git a/app/assets/javascripts/Services/DesktopManager.ts b/app/assets/javascripts/Services/DesktopManager.ts
index cc8ecb2ed..845f7d6dc 100644
--- a/app/assets/javascripts/Services/DesktopManager.ts
+++ b/app/assets/javascripts/Services/DesktopManager.ts
@@ -1,4 +1,3 @@
-/* eslint-disable camelcase */
 import {
   SNComponent,
   ComponentMutator,
@@ -8,27 +7,26 @@ import {
   removeFromArray,
   DesktopManagerInterface,
   InternalEventBus,
+  DecryptedTransferPayload,
+  ComponentContent,
+  assert,
 } from '@standardnotes/snjs'
 import { WebAppEvent, WebApplication } from '@/UIModels/Application'
-import { isDesktopApplication } from '@/Utils'
-import { Bridge, ElectronDesktopCallbacks } from './Bridge'
+import { DesktopDeviceInterface } from '../Device/DesktopDeviceInterface'
+import { DesktopCommunicationReceiver } from '@/Device/DesktopWebCommunication'
 
-/**
- * An interface used by the Desktop application to interact with SN
- */
 export class DesktopManager
   extends ApplicationService
-  implements DesktopManagerInterface, ElectronDesktopCallbacks
+  implements DesktopManagerInterface, DesktopCommunicationReceiver
 {
   updateObservers: {
     callback: (component: SNComponent) => void
   }[] = []
 
-  isDesktop = isDesktopApplication()
   dataLoaded = false
   lastSearchedText?: string
 
-  constructor(application: WebApplication, private bridge: Bridge) {
+  constructor(application: WebApplication, private device: DesktopDeviceInterface) {
     super(application, new InternalEventBus())
   }
 
@@ -45,19 +43,20 @@ export class DesktopManager
     super.onAppEvent(eventName).catch(console.error)
     if (eventName === ApplicationEvent.LocalDataLoaded) {
       this.dataLoaded = true
-      this.bridge.onInitialDataLoad()
+      this.device.onInitialDataLoad()
     } else if (eventName === ApplicationEvent.MajorDataChange) {
-      this.bridge.onMajorDataChange()
+      this.device.onMajorDataChange()
     }
   }
 
   saveBackup() {
-    this.bridge.onMajorDataChange()
+    this.device.onMajorDataChange()
   }
 
   getExtServerHost(): string {
-    console.assert(!!this.bridge.extensionsServerHost, 'extServerHost is null')
-    return this.bridge.extensionsServerHost as string
+    assert(this.device.extensionsServerHost)
+
+    return this.device.extensionsServerHost
   }
 
   /**
@@ -70,17 +69,13 @@ export class DesktopManager
 
   // All `components` should be installed
   syncComponentsInstallation(components: SNComponent[]) {
-    if (!this.isDesktop) {
-      return
-    }
-
     Promise.all(
       components.map((component) => {
         return this.convertComponentForTransmission(component)
       }),
     )
       .then((payloads) => {
-        this.bridge.syncComponents(payloads)
+        this.device.syncComponents(payloads)
       })
       .catch(console.error)
   }
@@ -96,11 +91,8 @@ export class DesktopManager
   }
 
   searchText(text?: string) {
-    if (!this.isDesktop) {
-      return
-    }
     this.lastSearchedText = text
-    this.bridge.onSearch(text)
+    this.device.onSearch(text)
   }
 
   redoSearch() {
@@ -109,23 +101,27 @@ export class DesktopManager
     }
   }
 
-  desktop_updateAvailable(): void {
+  updateAvailable(): void {
     this.webApplication.notifyWebEvent(WebAppEvent.NewUpdateAvailable)
   }
 
-  desktop_windowGainedFocus(): void {
+  windowGainedFocus(): void {
     this.webApplication.notifyWebEvent(WebAppEvent.DesktopWindowGainedFocus)
   }
 
-  desktop_windowLostFocus(): void {
+  windowLostFocus(): void {
     this.webApplication.notifyWebEvent(WebAppEvent.DesktopWindowLostFocus)
   }
 
-  async desktop_onComponentInstallationComplete(componentData: any, error: any) {
+  async onComponentInstallationComplete(
+    componentData: DecryptedTransferPayload<ComponentContent>,
+    error: unknown,
+  ) {
     const component = this.application.items.findItem(componentData.uuid)
     if (!component) {
       return
     }
+
     const updatedComponent = await this.application.mutator.changeAndSaveItem(
       component,
       (m) => {
@@ -133,7 +129,9 @@ export class DesktopManager
         if (error) {
           mutator.setAppDataItem(AppDataField.ComponentInstallError, error)
         } else {
-          mutator.local_url = componentData.content.local_url
+          // eslint-disable-next-line camelcase
+          mutator.local_url = componentData.content.local_url as string
+          // eslint-disable-next-line camelcase
           mutator.package_info = componentData.content.package_info
           mutator.setAppDataItem(AppDataField.ComponentInstallError, undefined)
         }
@@ -146,7 +144,7 @@ export class DesktopManager
     }
   }
 
-  async desktop_requestBackupFile(): Promise<string | undefined> {
+  async requestBackupFile(): Promise<string | undefined> {
     const encrypted = this.application.hasProtectionSources()
     const data = encrypted
       ? await this.application.createEncryptedBackupFileForAutomatedDesktopBackups()
@@ -159,11 +157,11 @@ export class DesktopManager
     return undefined
   }
 
-  desktop_didBeginBackup() {
+  didBeginBackup() {
     this.webApplication.getAppState().beganBackupDownload()
   }
 
-  desktop_didFinishBackup(success: boolean) {
+  didFinishBackup(success: boolean) {
     this.webApplication.getAppState().endedBackupDownload(success)
   }
 }
diff --git a/app/assets/javascripts/Services/ThemeManager.ts b/app/assets/javascripts/Services/ThemeManager.ts
index 48e0791ec..b3fd59ad7 100644
--- a/app/assets/javascripts/Services/ThemeManager.ts
+++ b/app/assets/javascripts/Services/ThemeManager.ts
@@ -22,7 +22,7 @@ const DefaultThemeIdentifier = 'Default'
 
 export class ThemeManager extends ApplicationService {
   private activeThemes: UuidString[] = []
-  private unregisterDesktop!: () => void
+  private unregisterDesktop?: () => void
   private unregisterStream!: () => void
   private lastUseDeviceThemeSettings = false
 
@@ -91,10 +91,12 @@ export class ThemeManager extends ApplicationService {
 
   override deinit() {
     this.activeThemes.length = 0
-    this.unregisterDesktop()
+
+    this.unregisterDesktop?.()
     this.unregisterStream()
     ;(this.unregisterDesktop as unknown) = undefined
     ;(this.unregisterStream as unknown) = undefined
+
     window
       .matchMedia('(prefers-color-scheme: dark)')
       .removeEventListener('change', this.colorSchemeEventHandler)
@@ -212,7 +214,7 @@ export class ThemeManager extends ApplicationService {
   private registerObservers() {
     this.unregisterDesktop = this.webApplication
       .getDesktopService()
-      .registerUpdateObserver((component) => {
+      ?.registerUpdateObserver((component) => {
         if (component.active && component.isTheme()) {
           this.deactivateTheme(component.uuid)
           setTimeout(() => {
diff --git a/app/assets/javascripts/UIModels/AppState/AppState.ts b/app/assets/javascripts/UIModels/AppState/AppState.ts
index 49c9fe5b6..cd151266c 100644
--- a/app/assets/javascripts/UIModels/AppState/AppState.ts
+++ b/app/assets/javascripts/UIModels/AppState/AppState.ts
@@ -1,4 +1,3 @@
-import { Bridge } from '@/Services/Bridge'
 import { storage, StorageKey } from '@/Services/LocalStorage'
 import { WebApplication, WebAppEvent } from '@/UIModels/Application'
 import { AccountMenuState } from '@/UIModels/AppState/AccountMenuState'
@@ -32,6 +31,7 @@ import { SearchOptionsState } from './SearchOptionsState'
 import { SubscriptionState } from './SubscriptionState'
 import { SyncState } from './SyncState'
 import { TagsState } from './TagsState'
+import { WebOrDesktopDevice } from '@/Device/WebOrDesktopDevice'
 
 export enum AppStateEvent {
   TagChanged,
@@ -91,7 +91,7 @@ export class AppState {
 
   private readonly tagChangedDisposer: IReactionDisposer
 
-  constructor(application: WebApplication, private bridge: Bridge) {
+  constructor(application: WebApplication, private device: WebOrDesktopDevice) {
     this.application = application
     this.notes = new NotesState(
       application,
@@ -120,7 +120,7 @@ export class AppState {
     }
     this.registerVisibilityObservers()
 
-    if (this.bridge.appVersion.includes('-beta')) {
+    if (this.device.appVersion.includes('-beta')) {
       this.showBetaWarning = storage.get(StorageKey.ShowBetaWarning) ?? true
     } else {
       this.showBetaWarning = false
@@ -198,7 +198,7 @@ export class AppState {
   }
 
   public get version(): string {
-    return this.bridge.appVersion
+    return this.device.appVersion
   }
 
   async openNewNote(title?: string) {
diff --git a/app/assets/javascripts/UIModels/AppState/NotesViewState.ts b/app/assets/javascripts/UIModels/AppState/NotesViewState.ts
index a576db3f2..e3ec77235 100644
--- a/app/assets/javascripts/UIModels/AppState/NotesViewState.ts
+++ b/app/assets/javascripts/UIModels/AppState/NotesViewState.ts
@@ -379,8 +379,9 @@ export class NotesViewState {
   paginate = () => {
     this.notesToDisplay += this.pageSize
     this.reloadNotes()
+
     if (this.searchSubmitted) {
-      this.application.getDesktopService().searchText(this.noteFilterText)
+      this.application.getDesktopService()?.searchText(this.noteFilterText)
     }
   }
 
@@ -482,8 +483,9 @@ export class NotesViewState {
         })
         .catch(console.error)
     }
+
     if (this.isFiltering) {
-      this.application.getDesktopService().searchText(this.noteFilterText)
+      this.application.getDesktopService()?.searchText(this.noteFilterText)
     }
   }
 
@@ -496,9 +498,13 @@ export class NotesViewState {
 
   handleTagChange = () => {
     this.resetScrollPosition()
+
     this.setShowDisplayOptionsMenu(false)
+
     this.setNoteFilterText('')
-    this.application.getDesktopService().searchText()
+
+    this.application.getDesktopService()?.searchText()
+
     this.resetPagination()
 
     /* Capture db load state before beginning reloadNotes,
@@ -525,7 +531,8 @@ export class NotesViewState {
      * enter before highlighting desktop search results.
      */
     this.searchSubmitted = true
-    this.application.getDesktopService().searchText(this.noteFilterText)
+
+    this.application.getDesktopService()?.searchText(this.noteFilterText)
   }
 
   handleFilterTextChanged = () => {
diff --git a/app/assets/javascripts/UIModels/Application.ts b/app/assets/javascripts/UIModels/Application.ts
index eb0d4b9ea..e929fd1ba 100644
--- a/app/assets/javascripts/UIModels/Application.ts
+++ b/app/assets/javascripts/UIModels/Application.ts
@@ -2,13 +2,13 @@ import { WebCrypto } from '@/Crypto'
 import { AlertService } from '@/Services/AlertService'
 import { ArchiveManager } from '@/Services/ArchiveManager'
 import { AutolockService } from '@/Services/AutolockService'
-import { Bridge } from '@/Services/Bridge'
+import { DesktopDeviceInterface, isDesktopDevice } from '@/Device/DesktopDeviceInterface'
 import { DesktopManager } from '@/Services/DesktopManager'
 import { IOService } from '@/Services/IOService'
 import { StatusManager } from '@/Services/StatusManager'
 import { ThemeManager } from '@/Services/ThemeManager'
 import { AppState } from '@/UIModels/AppState'
-import { WebDeviceInterface } from '@/WebDeviceInterface'
+import { WebOrDesktopDevice } from '@/Device/WebOrDesktopDevice'
 import {
   DeinitSource,
   Platform,
@@ -21,7 +21,7 @@ import {
 
 type WebServices = {
   appState: AppState
-  desktopService: DesktopManager
+  desktopService?: DesktopManager
   autolockService: AutolockService
   archiveService: ArchiveManager
   statusManager: StatusManager
@@ -44,26 +44,26 @@ export class WebApplication extends SNApplication {
   public iconsController: IconsController
 
   constructor(
-    deviceInterface: WebDeviceInterface,
+    deviceInterface: WebOrDesktopDevice,
     platform: Platform,
     identifier: string,
     defaultSyncServerHost: string,
-    public bridge: Bridge,
     webSocketUrl: string,
     runtime: Runtime,
   ) {
     super({
-      environment: bridge.environment,
+      environment: deviceInterface.environment,
       platform: platform,
       deviceInterface: deviceInterface,
       crypto: WebCrypto,
       alertService: new AlertService(),
       identifier,
       defaultHost: defaultSyncServerHost,
-      appVersion: bridge.appVersion,
+      appVersion: deviceInterface.appVersion,
       webSocketUrl: webSocketUrl,
       runtime,
     })
+
     deviceInterface.setApplication(this)
     this.noteControllerGroup = new NoteGroupController(this)
     this.iconsController = new IconsController()
@@ -80,7 +80,7 @@ export class WebApplication extends SNApplication {
         if ('deinit' in service) {
           service.deinit?.(source)
         }
-        ;(service as any).application = undefined
+        ;(service as { application?: WebApplication }).application = undefined
       }
 
       this.webServices = {} as WebServices
@@ -88,7 +88,7 @@ export class WebApplication extends SNApplication {
       this.webEventObservers.length = 0
 
       if (source === DeinitSource.SignOut) {
-        this.bridge.onSignOut()
+        isDesktopDevice(this.deviceInterface) && this.deviceInterface.onSignOut()
       }
     } catch (error) {
       console.error('Error while deiniting application', error)
@@ -116,7 +116,7 @@ export class WebApplication extends SNApplication {
     return this.webServices.appState
   }
 
-  public getDesktopService(): DesktopManager {
+  public getDesktopService(): DesktopManager | undefined {
     return this.webServices.desktopService
   }
 
@@ -128,6 +128,14 @@ export class WebApplication extends SNApplication {
     return this.webServices.archiveService
   }
 
+  public get desktopDevice(): DesktopDeviceInterface | undefined {
+    if (isDesktopDevice(this.deviceInterface)) {
+      return this.deviceInterface
+    }
+
+    return undefined
+  }
+
   getStatusManager() {
     return this.webServices.statusManager
   }
@@ -145,11 +153,14 @@ export class WebApplication extends SNApplication {
   }
 
   downloadBackup(): void | Promise<void> {
-    return this.bridge.downloadBackup()
+    if (isDesktopDevice(this.deviceInterface)) {
+      return this.deviceInterface.downloadBackup()
+    }
   }
 
   async signOutAndDeleteLocalBackups(): Promise<void> {
-    await this.bridge.deleteLocalBackups()
+    isDesktopDevice(this.deviceInterface) && (await this.deviceInterface.deleteLocalBackups())
+
     return this.user.signOut()
   }
 }
diff --git a/app/assets/javascripts/UIModels/ApplicationGroup.ts b/app/assets/javascripts/UIModels/ApplicationGroup.ts
index 2a2c4dc7c..c8789c6c5 100644
--- a/app/assets/javascripts/UIModels/ApplicationGroup.ts
+++ b/app/assets/javascripts/UIModels/ApplicationGroup.ts
@@ -1,15 +1,12 @@
-import { WebDeviceInterface } from '@/WebDeviceInterface'
 import { WebApplication } from './Application'
 import {
   ApplicationDescriptor,
   SNApplicationGroup,
-  DeviceInterface,
   Platform,
   Runtime,
   InternalEventBus,
 } from '@standardnotes/snjs'
 import { AppState } from '@/UIModels/AppState'
-import { Bridge } from '@/Services/Bridge'
 import { getPlatform, isDesktopApplication } from '@/Utils'
 import { ArchiveManager } from '@/Services/ArchiveManager'
 import { DesktopManager } from '@/Services/DesktopManager'
@@ -17,15 +14,17 @@ import { IOService } from '@/Services/IOService'
 import { AutolockService } from '@/Services/AutolockService'
 import { StatusManager } from '@/Services/StatusManager'
 import { ThemeManager } from '@/Services/ThemeManager'
+import { WebOrDesktopDevice } from '@/Device/WebOrDesktopDevice'
+import { isDesktopDevice } from '@/Device/DesktopDeviceInterface'
 
-export class ApplicationGroup extends SNApplicationGroup {
+export class ApplicationGroup extends SNApplicationGroup<WebOrDesktopDevice> {
   constructor(
     private defaultSyncServerHost: string,
-    private bridge: Bridge,
+    private device: WebOrDesktopDevice,
     private runtime: Runtime,
     private webSocketUrl: string,
   ) {
-    super(new WebDeviceInterface(bridge))
+    super(device)
   }
 
   override async initialize(): Promise<void> {
@@ -34,7 +33,7 @@ export class ApplicationGroup extends SNApplicationGroup {
     })
 
     if (isDesktopApplication()) {
-      Object.defineProperty(window, 'desktopManager', {
+      Object.defineProperty(window, 'desktopCommunicationReceiver', {
         get: () => (this.primaryApplication as WebApplication).getDesktopService(),
       })
     }
@@ -42,34 +41,36 @@ export class ApplicationGroup extends SNApplicationGroup {
 
   private createApplication = (
     descriptor: ApplicationDescriptor,
-    deviceInterface: DeviceInterface,
+    deviceInterface: WebOrDesktopDevice,
   ) => {
     const platform = getPlatform()
     const application = new WebApplication(
-      deviceInterface as WebDeviceInterface,
+      deviceInterface,
       platform,
       descriptor.identifier,
       this.defaultSyncServerHost,
-      this.bridge,
       this.webSocketUrl,
       this.runtime,
     )
-    const appState = new AppState(application, this.bridge)
+    const appState = new AppState(application, this.device)
     const archiveService = new ArchiveManager(application)
-    const desktopService = new DesktopManager(application, this.bridge)
     const io = new IOService(platform === Platform.MacWeb || platform === Platform.MacDesktop)
     const autolockService = new AutolockService(application, new InternalEventBus())
     const statusManager = new StatusManager()
     const themeService = new ThemeManager(application)
+
     application.setWebServices({
       appState,
       archiveService,
-      desktopService,
+      desktopService: isDesktopDevice(this.device)
+        ? new DesktopManager(application, this.device)
+        : undefined,
       io,
       autolockService,
       statusManager,
       themeService,
     })
+
     return application
   }
 }
diff --git a/package.json b/package.json
index 7f36b81d6..57b077740 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "@babel/plugin-transform-react-jsx": "^7.17.3",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-typescript": "^7.16.7",
-    "@standardnotes/config": "^2.4.0",
+    "@standardnotes/config": "^2.4.1",
     "@svgr/webpack": "^6.2.1",
     "@types/jest": "^27.4.1",
     "@types/react": "^17.0.42",
@@ -70,9 +70,9 @@
     "@reach/tooltip": "^0.16.2",
     "@reach/visually-hidden": "^0.16.0",
     "@standardnotes/components": "1.7.15",
-    "@standardnotes/filepicker": "1.12.0",
-    "@standardnotes/sncrypto-web": "1.8.3",
-    "@standardnotes/snjs": "2.99.0",
+    "@standardnotes/filepicker": "1.13.2",
+    "@standardnotes/sncrypto-web": "1.8.4",
+    "@standardnotes/snjs": "2.99.1",
     "@standardnotes/stylekit": "5.23.0",
     "@zip.js/zip.js": "^2.4.7",
     "mobx": "^6.5.0",
diff --git a/yarn.lock b/yarn.lock
index f40f231d2..89eb6d9f6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2406,10 +2406,10 @@
   resolved "https://registry.yarnpkg.com/@standardnotes/components/-/components-1.7.15.tgz#3d57dd21cd4bf1f95eea7521fce7dd62e8f99455"
   integrity sha512-fZOaqi62BDhVkqH6Bd9NQhVPyPR3KARob8xm/JhMLWt1d8G1ZFEQ/IOLTMFpYQCt9IroLG/pl6GD0Xj46ISgkw==
 
-"@standardnotes/config@^2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/config/-/config-2.4.0.tgz#4ca7ccd857f23850a154911d274f0aa6bf6b7b05"
-  integrity sha512-iCdGcC4cRB9+gJAjmA1tJr+dgTUDStG0OSleAOVqvaZmtj94rOzX/v8GmiqnsDajyZZXAmD+Ftse3Z3kOAPhTQ==
+"@standardnotes/config@^2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/config/-/config-2.4.1.tgz#df92445efbdd7ed99a70e011d7f32de35fc12f05"
+  integrity sha512-NQ9ajPJOUwd0/sDuvNQH+4yVFM00oWRmBCceHFzKur7rtT50XUyelVesdlcUm12M9LRdVOf9jWb9iNSvvQjhvg==
   dependencies:
     "@typescript-eslint/eslint-plugin" "^5.12.1"
     "@typescript-eslint/parser" "^5.12.1"
@@ -2422,14 +2422,14 @@
     "@standardnotes/auth" "^3.18.11"
     "@standardnotes/features" "^1.37.9"
 
-"@standardnotes/encryption@^1.4.8":
-  version "1.4.8"
-  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.4.8.tgz#9d9f118f80df1a241f505474c7af154190990b38"
-  integrity sha512-AU4eFNzU7sJj+BLpyrUrOn3z6WmkLw1XriF0m8q+a/tzco2ez5j0bM4REMAFfpreOhFN5KSJ0yUTh8pLxwyZxA==
+"@standardnotes/encryption@^1.4.9":
+  version "1.4.9"
+  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.4.9.tgz#1e5f47dd0624e694eed0a851f703d8a620a02c82"
+  integrity sha512-Cdwusso9sPVxNo85HCicbZ46g5wmjMph+3WGEGbQ6/3Jb/FaGrH4WbwnNsHvPO9LvjI41wxBqb2iCbUxmsB+ZQ==
   dependencies:
     "@standardnotes/models" "^1.4.8"
     "@standardnotes/responses" "^1.6.10"
-    "@standardnotes/services" "^1.9.9"
+    "@standardnotes/services" "^1.9.10"
 
 "@standardnotes/features@^1.37.9":
   version "1.37.9"
@@ -2439,15 +2439,10 @@
     "@standardnotes/auth" "^3.18.11"
     "@standardnotes/common" "^1.19.6"
 
-"@standardnotes/filepicker@1.12.0":
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.12.0.tgz#6ee1224c8a7d039565a27950aa4e879a18fecebf"
-  integrity sha512-67hsz3/xnOmvhxFVUurjuLU1jaMKEYXCwwGSls/NJxkXEX1WwWA9kvAwAnrJTRoFJAKVDyBglcLpRrFkOvEc9w==
-
-"@standardnotes/filepicker@^1.13.1":
-  version "1.13.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.13.1.tgz#bad1e3434711e4894b08a40cc16ec4e631bf8476"
-  integrity sha512-oK5Ew9avEH9LO2YGW1fSlUHMx9wOYS0KeXt2UOnl0B+SwAiVQN14F6DfvTyZ+JlEqn8PXq0liUoRTN9Lk7Fbgg==
+"@standardnotes/filepicker@1.13.2", "@standardnotes/filepicker@^1.13.2":
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.13.2.tgz#63fc12ae5c08c2704f76b6757a080d8fe385ba8c"
+  integrity sha512-BlGabKd1uBvnnWTWXXexGhydZTX7mTWO/0O9slP8B+h9yUz0G9DYXDlWEGyMSf3/1YArqJOnAHLU+ID/R1lvSA==
   dependencies:
     "@standardnotes/common" "^1.19.6"
     "@standardnotes/utils" "^1.6.2"
@@ -2470,10 +2465,10 @@
     "@standardnotes/common" "^1.19.6"
     "@standardnotes/features" "^1.37.9"
 
-"@standardnotes/services@^1.9.9":
-  version "1.9.9"
-  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.9.9.tgz#5ab11644dae227435e087dea5b9a37145db96a7d"
-  integrity sha512-moUI8s00zLJZum2MMvqft85Yk3ZDWQFuhZeC+o0Xt8Pp9RE6sLOhuAmS3/WnKPMww3/ggoy7mdOqZ2aIn+q1eg==
+"@standardnotes/services@^1.9.10":
+  version "1.9.10"
+  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.9.10.tgz#000a5e3d75671a8b127bc7751d66c1a24b6443b2"
+  integrity sha512-ff/WEyIq2KhJX6pG8+/BpQnI9Ulo1sd+x/6FmWUHn5C6ukK8srb5Ev1SV8z1hXdkRD1ltFaQvQaPrAYNuG32aQ==
   dependencies:
     "@standardnotes/common" "^1.19.6"
     "@standardnotes/models" "^1.4.8"
@@ -2485,39 +2480,34 @@
   resolved "https://registry.yarnpkg.com/@standardnotes/settings/-/settings-1.14.1.tgz#8b6c84e2eeeab274a557bad25cb16a62d60916ec"
   integrity sha512-zRRBoflI77Zqa5ejZcXFPnvwVKf/gbLNtutB/pQE5SYlDMUgWtg6Qm8r4667Ue/nBUWZixCH0sznEN8XK8rCBw==
 
-"@standardnotes/sncrypto-common@^1.7.6":
-  version "1.7.6"
-  resolved "https://registry.yarnpkg.com/@standardnotes/sncrypto-common/-/sncrypto-common-1.7.6.tgz#8ff57f4eb8803d5631983d2f17f3c9ec2ec22011"
-  integrity sha512-jzS4dIIsIVCEw4e6AdoOm0L71NHbc/RcYktiFbVDrr2teQn8z7777PdzHVXUEX5vcmtaZ0VADnev39wm0K5Rvw==
-
 "@standardnotes/sncrypto-common@^1.7.7":
   version "1.7.7"
   resolved "https://registry.yarnpkg.com/@standardnotes/sncrypto-common/-/sncrypto-common-1.7.7.tgz#5970bbf09dc541a9894fec1101d5c92be5822ad1"
   integrity sha512-ncpzrurFtgupbQvv6+aDts9Cebx57MMI78Dl2KnJJbFm+G47UJuxfX11q2aomBJdp2XdbWhQxCKOQPl5mmwWPQ==
 
-"@standardnotes/sncrypto-web@1.8.3":
-  version "1.8.3"
-  resolved "https://registry.yarnpkg.com/@standardnotes/sncrypto-web/-/sncrypto-web-1.8.3.tgz#788ddf484d4170d6ab69859067f4404085dda380"
-  integrity sha512-PoFOwqxkEnKp0Rw0qJJzt/Bk0+DPKXJIQl2jBjmqa3quqllVkGdL/5ot8JKXP01kf8RZqdg1hqBxmjIiJOJcbw==
+"@standardnotes/sncrypto-web@1.8.4":
+  version "1.8.4"
+  resolved "https://registry.yarnpkg.com/@standardnotes/sncrypto-web/-/sncrypto-web-1.8.4.tgz#82259f6b0210625a9188427f229b20c5ab9204ac"
+  integrity sha512-n/9uxI2KxYSohilPwgAJOW0zAaPEs97EB7kQ1An0YByIQue4D/+5HHIksqQXUmXlw8KZFTau6jd+v7l7L3dvOQ==
   dependencies:
-    "@standardnotes/sncrypto-common" "^1.7.6"
+    "@standardnotes/sncrypto-common" "^1.7.7"
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.99.0":
-  version "2.99.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.99.0.tgz#b9c51d68abb9d9c43ebe108c39229f0896e37f51"
-  integrity sha512-rn/F3YiHBKfzylHTY4U8YbvShX/yNegaHQpAbmvP6uXCXF8msLcppKnecPw5pweQiv+o6JNORSBFfP25C6sbrw==
+"@standardnotes/snjs@2.99.1":
+  version "2.99.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.99.1.tgz#8274b1d44a15538b3a43bf35794301306238d6cb"
+  integrity sha512-/DFF9YFLmyc7z34iRvAn/rXBSH5G3zuDhUeyTVWVvotbgY7zvTSD2/wtgE4nZ1pmG58UlxGTDtzTlzyuxW99Ow==
   dependencies:
     "@standardnotes/auth" "^3.18.11"
     "@standardnotes/common" "^1.19.6"
     "@standardnotes/domain-events" "^2.27.10"
-    "@standardnotes/encryption" "^1.4.8"
+    "@standardnotes/encryption" "^1.4.9"
     "@standardnotes/features" "^1.37.9"
-    "@standardnotes/filepicker" "^1.13.1"
+    "@standardnotes/filepicker" "^1.13.2"
     "@standardnotes/models" "^1.4.8"
     "@standardnotes/responses" "^1.6.10"
-    "@standardnotes/services" "^1.9.9"
+    "@standardnotes/services" "^1.9.10"
     "@standardnotes/settings" "^1.14.1"
     "@standardnotes/sncrypto-common" "^1.7.7"
     "@standardnotes/utils" "^1.6.2"

From 7253dc8e1dd99eddfb24d2755cbd7329e4bc132a Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Fri, 22 Apr 2022 14:07:50 -0500
Subject: [PATCH 041/102] chore: use interface instead of class

---
 app/assets/javascripts/Device/DesktopDeviceInterface.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/Device/DesktopDeviceInterface.ts b/app/assets/javascripts/Device/DesktopDeviceInterface.ts
index be4e54c5a..b8ec4a3db 100644
--- a/app/assets/javascripts/Device/DesktopDeviceInterface.ts
+++ b/app/assets/javascripts/Device/DesktopDeviceInterface.ts
@@ -1,11 +1,13 @@
 import { DeviceInterface, Environment } from '@standardnotes/snjs'
-import { WebOrDesktopDevice } from '@/Device/WebOrDesktopDevice'
 import { WebCommunicationReceiver } from './DesktopWebCommunication'
+import { WebOrDesktopDeviceInterface } from './WebOrDesktopDeviceInterface'
 
 export function isDesktopDevice(x: DeviceInterface): x is DesktopDeviceInterface {
   return x.environment === Environment.Desktop
 }
 
-export interface DesktopDeviceInterface extends WebOrDesktopDevice, WebCommunicationReceiver {
+export interface DesktopDeviceInterface
+  extends WebOrDesktopDeviceInterface,
+    WebCommunicationReceiver {
   environment: Environment.Desktop
 }

From 7b29d3f2b51a227935e9289435248c669faf17ac Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Sat, 23 Apr 2022 22:43:28 +0530
Subject: [PATCH 042/102] chore: bump dependencies (#995)

---
 package.json |  36 +--
 yarn.lock    | 894 ++++++++++++++++++++++++---------------------------
 2 files changed, 437 insertions(+), 493 deletions(-)

diff --git a/package.json b/package.json
index 57b077740..19f94cf9f 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "postinstall": "yarn run ncu -loglevel verbose --packageFile package.json"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.8",
+    "@babel/core": "^7.17.9",
     "@babel/plugin-transform-react-jsx": "^7.17.3",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-typescript": "^7.16.7",
@@ -31,15 +31,15 @@
     "@types/jest": "^27.4.1",
     "@types/react": "^17.0.42",
     "@types/wicg-file-system-access": "^2020.9.5",
-    "@typescript-eslint/eslint-plugin": "^5.16.0",
-    "@typescript-eslint/parser": "^5.16.0",
-    "babel-loader": "^8.2.4",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
+    "babel-loader": "^8.2.5",
     "css-loader": "^6.7.1",
     "dotenv": "^16.0.0",
-    "eslint": "^8.11.0",
+    "eslint": "^8.13.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-react-hooks": "^4.4.0",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
@@ -47,17 +47,17 @@
     "lint-staged": ">=12",
     "mini-css-extract-plugin": "^2.6.0",
     "node-sass": "^7.0.1",
-    "npm-check-updates": "^12.5.4",
-    "prettier": "^2.6.0",
+    "npm-check-updates": "^12.5.9",
+    "prettier": "^2.6.2",
     "sass-loader": "^12.6.0",
     "svg-jest": "^1.0.1",
-    "ts-jest": "^27.1.3",
+    "ts-jest": "^27.1.4",
     "ts-loader": "^9.2.8",
-    "typescript": "4.6.2",
+    "typescript": "4.6.3",
     "typescript-eslint": "0.0.1-alpha.0",
-    "webpack": "^5.70.0",
+    "webpack": "^5.72.0",
     "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.4",
+    "webpack-dev-server": "^4.8.1",
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {
@@ -74,14 +74,14 @@
     "@standardnotes/sncrypto-web": "1.8.4",
     "@standardnotes/snjs": "2.99.1",
     "@standardnotes/stylekit": "5.23.0",
-    "@zip.js/zip.js": "^2.4.7",
+    "@zip.js/zip.js": "^2.4.10",
     "mobx": "^6.5.0",
     "mobx-react-lite": "^3.3.0",
-    "preact": "^10.6.6",
-    "qrcode.react": "^2.0.0",
-    "react-dnd": "^15.1.1",
-    "react-dnd-html5-backend": "^15.1.2",
-    "react-dnd-touch-backend": "^15.1.1"
+    "preact": "^10.7.1",
+    "qrcode.react": "^3.0.1",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dnd-touch-backend": "^16.0.1"
   },
   "lint-staged": {
     "app/**/*.{js,ts,jsx,tsx}": "eslint --cache --fix",
diff --git a/yarn.lock b/yarn.lock
index 89eb6d9f6..8a794ccd5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -120,25 +120,25 @@
     semver "^6.3.0"
     source-map "^0.5.0"
 
-"@babel/core@^7.17.8":
-  version "7.17.8"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.17.8.tgz#3dac27c190ebc3a4381110d46c80e77efe172e1a"
-  integrity sha512-OdQDV/7cRBtJHLSOBqqbYNkOcydOgnX59TZx4puf41fzcVtN3e/4yqY8lMQsK+5X2lJtAdmA+6OHqsj1hBJ4IQ==
+"@babel/core@^7.17.9":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.17.9.tgz#6bae81a06d95f4d0dec5bb9d74bbc1f58babdcfe"
+  integrity sha512-5ug+SfZCpDAkVp9SFIZAzlW18rlzsOcJGaetCjkySnrXXDUw9AR8cDUm1iByTmdWM6yxX6/zycaV76w3YTF2gw==
   dependencies:
     "@ampproject/remapping" "^2.1.0"
     "@babel/code-frame" "^7.16.7"
-    "@babel/generator" "^7.17.7"
+    "@babel/generator" "^7.17.9"
     "@babel/helper-compilation-targets" "^7.17.7"
     "@babel/helper-module-transforms" "^7.17.7"
-    "@babel/helpers" "^7.17.8"
-    "@babel/parser" "^7.17.8"
+    "@babel/helpers" "^7.17.9"
+    "@babel/parser" "^7.17.9"
     "@babel/template" "^7.16.7"
-    "@babel/traverse" "^7.17.3"
+    "@babel/traverse" "^7.17.9"
     "@babel/types" "^7.17.0"
     convert-source-map "^1.7.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
-    json5 "^2.1.2"
+    json5 "^2.2.1"
     semver "^6.3.0"
 
 "@babel/core@^7.8.0":
@@ -216,10 +216,10 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
-"@babel/generator@^7.17.7":
-  version "7.17.7"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.7.tgz#8da2599beb4a86194a3b24df6c085931d9ee45ad"
-  integrity sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==
+"@babel/generator@^7.17.9":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.9.tgz#f4af9fd38fa8de143c29fce3f71852406fc1e2fc"
+  integrity sha512-rAdDousTwxbIxbz5I7GEQ3lUip+xVCXooZNbsydCWs3xA7ZsYOv+CFRdzGxRX78BmQHu9B1Eso59AOZQOJDEdQ==
   dependencies:
     "@babel/types" "^7.17.0"
     jsesc "^2.5.1"
@@ -399,6 +399,14 @@
     "@babel/template" "^7.16.7"
     "@babel/types" "^7.16.7"
 
+"@babel/helper-function-name@^7.17.9":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.17.9.tgz#136fcd54bc1da82fcb47565cf16fd8e444b1ff12"
+  integrity sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==
+  dependencies:
+    "@babel/template" "^7.16.7"
+    "@babel/types" "^7.17.0"
+
 "@babel/helper-get-function-arity@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz#98c1cbea0e2332f33f9a4661b8ce1505b2c19ba2"
@@ -798,13 +806,13 @@
     "@babel/traverse" "^7.17.0"
     "@babel/types" "^7.17.0"
 
-"@babel/helpers@^7.17.8":
-  version "7.17.8"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.17.8.tgz#288450be8c6ac7e4e44df37bcc53d345e07bc106"
-  integrity sha512-QcL86FGxpfSJwGtAvv4iG93UL6bmqBdmoVY0CMCU2g+oD2ezQse3PT5Pa+jiD6LJndBQi0EDlpzOWNlLuhz5gw==
+"@babel/helpers@^7.17.9":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.17.9.tgz#b2af120821bfbe44f9907b1826e168e819375a1a"
+  integrity sha512-cPCt915ShDWUEzEp3+UNRktO2n6v49l5RSnG9M5pS24hA+2FAc5si+Pn1i4VVbQQ+jh+bIZhPFQOJOzbrOYY1Q==
   dependencies:
     "@babel/template" "^7.16.7"
-    "@babel/traverse" "^7.17.3"
+    "@babel/traverse" "^7.17.9"
     "@babel/types" "^7.17.0"
 
 "@babel/highlight@^7.10.4":
@@ -873,10 +881,10 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.3.tgz#b07702b982990bf6fdc1da5049a23fece4c5c3d0"
   integrity sha512-7yJPvPV+ESz2IUTPbOL+YkIGyCqOyNIzdguKQuJGnH7bg1WTIifuM21YqokFt/THWh1AkCRn9IgoykTRCBVpzA==
 
-"@babel/parser@^7.17.8":
-  version "7.17.8"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.8.tgz#2817fb9d885dd8132ea0f8eb615a6388cca1c240"
-  integrity sha512-BoHhDJrJXqcg+ZL16Xv39H9n+AqJ4pcDrQBGZN+wHxIysrLZ3/ECwCBUch/1zUNhnsXULcONU3Ei5Hmkfk6kiQ==
+"@babel/parser@^7.17.9":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.9.tgz#9c94189a6062f0291418ca021077983058e171ef"
+  integrity sha512-vqUSBLP8dQHFPdPi9bc5GK9vRkYHJ49fsZdtoJ8EQ8ibpwk5rPKfvNIwChB0KVXcIjcepEBBd2VHC5r9Gy8ueg==
 
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.16.7":
   version "7.16.7"
@@ -1767,6 +1775,22 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.17.9":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.9.tgz#1f9b207435d9ae4a8ed6998b2b82300d83c37a0d"
+  integrity sha512-PQO8sDIJ8SIwipTPiR71kJQCKQYB5NGImbOviK8K+kg5xkNSYXLBupuX9QhatFowrsvo9Hj8WgArg3W7ijNAQw==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.17.9"
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-function-name" "^7.17.9"
+    "@babel/helper-hoist-variables" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/parser" "^7.17.9"
+    "@babel/types" "^7.17.0"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.16.0", "@babel/types@^7.3.0", "@babel/types@^7.3.3":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.16.0.tgz#db3b313804f96aadd0b776c4823e127ad67289ba"
@@ -2084,6 +2108,11 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
+"@leichtgewicht/ip-codec@^2.0.1":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.3.tgz#0300943770e04231041a51bd39f0439b5c7ab4f0"
+  integrity sha512-nkalE/f1RvRGChwBnEIoBfSEYOXnCRdleKuv6+lePbMDrMZXeDQnqak5XDOeBgrPPyPfAdcCu/B5z+v3VhplGg==
+
 "@nanostores/preact@^0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@nanostores/preact/-/preact-0.1.3.tgz#aeac0a1d8de1e067bc0b156c1fdd62a6b7bf6069"
@@ -2154,13 +2183,20 @@
   resolved "https://registry.yarnpkg.com/@npmcli/node-gyp/-/node-gyp-1.0.3.tgz#a912e637418ffc5f2db375e93b85837691a43a33"
   integrity sha512-fnkhw+fmX65kiLqk6E3BFLXNC26rUhK90zVwe2yncPliVT/Qos3xjhTLE59Df8KnPlcwIERXKVlU1bXoUQ+liA==
 
-"@npmcli/promise-spawn@^1.2.0", "@npmcli/promise-spawn@^1.3.2":
+"@npmcli/promise-spawn@^1.3.2":
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/@npmcli/promise-spawn/-/promise-spawn-1.3.2.tgz#42d4e56a8e9274fba180dabc0aea6e38f29274f5"
   integrity sha512-QyAGYo/Fbj4MXeGdJcFzZ+FkDkomfRBrPM+9QYJSg+PxgAUL+LU3FneQk37rKR2/zjqkCV1BLHccX98wRXG3Sg==
   dependencies:
     infer-owner "^1.0.4"
 
+"@npmcli/promise-spawn@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@npmcli/promise-spawn/-/promise-spawn-3.0.0.tgz#53283b5f18f855c6925f23c24e67c911501ef573"
+  integrity sha512-s9SgS+p3a9Eohe68cSI3fi+hpcZUmXq5P7w0kMlAsWVtR7XbK3ptkZqKT2cK1zLDObJ3sR+8P59sJE0w/KTL1g==
+  dependencies:
+    infer-owner "^1.0.4"
+
 "@npmcli/run-script@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@npmcli/run-script/-/run-script-3.0.1.tgz#9d10b46586300074cc9e53ef320130a69567e1ce"
@@ -2354,20 +2390,20 @@
     prop-types "^15.7.2"
     tslib "^2.3.0"
 
-"@react-dnd/asap@4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@react-dnd/asap/-/asap-4.0.0.tgz#b300eeed83e9801f51bd66b0337c9a6f04548651"
-  integrity sha512-0XhqJSc6pPoNnf8DhdsPHtUhRzZALVzYMTzRwV4VI6DJNJ/5xxfL9OQUwb8IH5/2x7lSf7nAZrnzUD+16VyOVQ==
+"@react-dnd/asap@^5.0.1":
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/@react-dnd/asap/-/asap-5.0.2.tgz#1f81f124c1cd6f39511c11a881cfb0f715343488"
+  integrity sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A==
 
-"@react-dnd/invariant@3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@react-dnd/invariant/-/invariant-3.0.0.tgz#ea55db612b8be3284e87b67f1a1567595cd4c386"
-  integrity sha512-keberJRIqPX15IK3SWS/iO1t/kGETiL1oczKrDitAaMnQ+kpHf81l3MrRmFjvfqcnApE+izEvwM6GsyoIcpsVA==
+"@react-dnd/invariant@^4.0.1":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@react-dnd/invariant/-/invariant-4.0.2.tgz#b92edffca10a26466643349fac7cdfb8799769df"
+  integrity sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw==
 
-"@react-dnd/shallowequal@3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@react-dnd/shallowequal/-/shallowequal-3.0.0.tgz#ccfe1d6eead7591b4cebf6d7fec7150eb4de1962"
-  integrity sha512-1ELWQdJB2UrCXTKK5cCD9uGLLIwECLIEdttKA255owdpchtXohIjZBTlFJszwYi2ZKe2Do+QvUzsGyGCMNwbdw==
+"@react-dnd/shallowequal@^4.0.1":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz#d1b4befa423f692fa4abf1c79209702e7d8ae4b4"
+  integrity sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA==
 
 "@sindresorhus/is@^0.14.0":
   version "0.14.0"
@@ -2780,10 +2816,10 @@
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.0.0.tgz#563c1c6c132cd204e71512f9c0b394ff90d3fae7"
   integrity sha512-NZwaaynfs1oIoLAV1vg18e7QMVDvw+6SQrdJc8w3BwUaoroVSf6EBj/Sk4PBWGxsq0dzhA2drbsuMC1/6C6KgQ==
 
-"@types/http-proxy@^1.17.5":
-  version "1.17.7"
-  resolved "https://registry.yarnpkg.com/@types/http-proxy/-/http-proxy-1.17.7.tgz#30ea85cc2c868368352a37f0d0d3581e24834c6f"
-  integrity sha512-9hdj6iXH64tHSLTY+Vt2eYOGzSogC+JQ2H7bdPWkuh7KXP5qLllWx++t+K9Wk556c3dkDdPws/SpMRi0sdCT1w==
+"@types/http-proxy@^1.17.8":
+  version "1.17.8"
+  resolved "https://registry.yarnpkg.com/@types/http-proxy/-/http-proxy-1.17.8.tgz#968c66903e7e42b483608030ee85800f22d03f55"
+  integrity sha512-5kPLG5BKpWYkw/LVOGWpiq3nEVqxiN32rTgI53Sk12/xHFQ2rG3ehI9IO+O3W2QoKeyB92dJkoka8SUm6BX1pA==
   dependencies:
     "@types/node" "*"
 
@@ -2920,10 +2956,10 @@
   resolved "https://registry.yarnpkg.com/@types/wicg-file-system-access/-/wicg-file-system-access-2020.9.5.tgz#4a0c8f3d1ed101525f329e86c978f7735404474f"
   integrity sha512-UYK244awtmcUYQfs7FR8710MJcefL2WvkyHMjA8yJzxd1mo0Gfn88sRZ1Bls7hiUhA2w7ne1gpJ9T5g3G0wOyA==
 
-"@types/ws@^8.2.2":
-  version "8.2.2"
-  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.2.2.tgz#7c5be4decb19500ae6b3d563043cd407bf366c21"
-  integrity sha512-NOn5eIcgWLOo6qW8AcuLZ7G8PycXu0xTxxkS6Q18VWFxgPUSOwV0pBj2a/4viNZVu25i7RIB7GttdkAIUUXOOg==
+"@types/ws@^8.5.1":
+  version "8.5.3"
+  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.3.tgz#7d25a1ffbecd3c4f2d35068d0b283c037003274d"
+  integrity sha512-6YOoWjruKj1uLf3INHH7D3qTXwFfEsg1kf3c0uDdSBJwfa/llkwIjrAGV7j7mVgGNbzTQ3HiHKKDXl6bJPD97w==
   dependencies:
     "@types/node" "*"
 
@@ -2954,14 +2990,14 @@
     semver "^7.3.5"
     tsutils "^3.21.0"
 
-"@typescript-eslint/eslint-plugin@^5.16.0":
-  version "5.16.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.16.0.tgz#78f246dd8d1b528fc5bfca99a8a64d4023a3d86d"
-  integrity sha512-SJoba1edXvQRMmNI505Uo4XmGbxCK9ARQpkvOd00anxzri9RNQk0DDCxD+LIl+jYhkzOJiOMMKYEHnHEODjdCw==
+"@typescript-eslint/eslint-plugin@^5.20.0":
+  version "5.20.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.20.0.tgz#022531a639640ff3faafaf251d1ce00a2ef000a1"
+  integrity sha512-fapGzoxilCn3sBtC6NtXZX6+P/Hef7VDbyfGqTTpzYydwhlkevB+0vE0EnmHPVTVSy68GUncyJ/2PcrFBeCo5Q==
   dependencies:
-    "@typescript-eslint/scope-manager" "5.16.0"
-    "@typescript-eslint/type-utils" "5.16.0"
-    "@typescript-eslint/utils" "5.16.0"
+    "@typescript-eslint/scope-manager" "5.20.0"
+    "@typescript-eslint/type-utils" "5.20.0"
+    "@typescript-eslint/utils" "5.20.0"
     debug "^4.3.2"
     functional-red-black-tree "^1.0.1"
     ignore "^5.1.8"
@@ -2979,24 +3015,16 @@
     "@typescript-eslint/typescript-estree" "5.19.0"
     debug "^4.3.2"
 
-"@typescript-eslint/parser@^5.16.0":
-  version "5.16.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.16.0.tgz#e4de1bde4b4dad5b6124d3da227347616ed55508"
-  integrity sha512-fkDq86F0zl8FicnJtdXakFs4lnuebH6ZADDw6CYQv0UZeIjHvmEw87m9/29nk2Dv5Lmdp0zQ3zDQhiMWQf/GbA==
+"@typescript-eslint/parser@^5.20.0":
+  version "5.20.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.20.0.tgz#4991c4ee0344315c2afc2a62f156565f689c8d0b"
+  integrity sha512-UWKibrCZQCYvobmu3/N8TWbEeo/EPQbS41Ux1F9XqPzGuV7pfg6n50ZrFo6hryynD8qOTTfLHtHjjdQtxJ0h/w==
   dependencies:
-    "@typescript-eslint/scope-manager" "5.16.0"
-    "@typescript-eslint/types" "5.16.0"
-    "@typescript-eslint/typescript-estree" "5.16.0"
+    "@typescript-eslint/scope-manager" "5.20.0"
+    "@typescript-eslint/types" "5.20.0"
+    "@typescript-eslint/typescript-estree" "5.20.0"
     debug "^4.3.2"
 
-"@typescript-eslint/scope-manager@5.16.0":
-  version "5.16.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.16.0.tgz#7e7909d64bd0c4d8aef629cdc764b9d3e1d3a69a"
-  integrity sha512-P+Yab2Hovg8NekLIR/mOElCDPyGgFZKhGoZA901Yax6WR6HVeGLbsqJkZ+Cvk5nts/dAlFKm8PfL43UZnWdpIQ==
-  dependencies:
-    "@typescript-eslint/types" "5.16.0"
-    "@typescript-eslint/visitor-keys" "5.16.0"
-
 "@typescript-eslint/scope-manager@5.19.0":
   version "5.19.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.19.0.tgz#97e59b0bcbcb54dbcdfba96fc103b9020bbe9cb4"
@@ -3005,14 +3033,13 @@
     "@typescript-eslint/types" "5.19.0"
     "@typescript-eslint/visitor-keys" "5.19.0"
 
-"@typescript-eslint/type-utils@5.16.0":
-  version "5.16.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.16.0.tgz#b482bdde1d7d7c0c7080f7f2f67ea9580b9e0692"
-  integrity sha512-SKygICv54CCRl1Vq5ewwQUJV/8padIWvPgCxlWPGO/OgQLCijY9G7lDu6H+mqfQtbzDNlVjzVWQmeqbLMBLEwQ==
+"@typescript-eslint/scope-manager@5.20.0":
+  version "5.20.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.20.0.tgz#79c7fb8598d2942e45b3c881ced95319818c7980"
+  integrity sha512-h9KtuPZ4D/JuX7rpp1iKg3zOH0WNEa+ZIXwpW/KWmEFDxlA/HSfCMhiyF1HS/drTICjIbpA6OqkAhrP/zkCStg==
   dependencies:
-    "@typescript-eslint/utils" "5.16.0"
-    debug "^4.3.2"
-    tsutils "^3.21.0"
+    "@typescript-eslint/types" "5.20.0"
+    "@typescript-eslint/visitor-keys" "5.20.0"
 
 "@typescript-eslint/type-utils@5.19.0":
   version "5.19.0"
@@ -3023,28 +3050,24 @@
     debug "^4.3.2"
     tsutils "^3.21.0"
 
-"@typescript-eslint/types@5.16.0":
-  version "5.16.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.16.0.tgz#5827b011982950ed350f075eaecb7f47d3c643ee"
-  integrity sha512-oUorOwLj/3/3p/HFwrp6m/J2VfbLC8gjW5X3awpQJ/bSG+YRGFS4dpsvtQ8T2VNveV+LflQHjlLvB6v0R87z4g==
+"@typescript-eslint/type-utils@5.20.0":
+  version "5.20.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.20.0.tgz#151c21cbe9a378a34685735036e5ddfc00223be3"
+  integrity sha512-WxNrCwYB3N/m8ceyoGCgbLmuZwupvzN0rE8NBuwnl7APgjv24ZJIjkNzoFBXPRCGzLNkoU/WfanW0exvp/+3Iw==
+  dependencies:
+    "@typescript-eslint/utils" "5.20.0"
+    debug "^4.3.2"
+    tsutils "^3.21.0"
 
 "@typescript-eslint/types@5.19.0":
   version "5.19.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.19.0.tgz#12d3d600d754259da771806ee8b2c842d3be8d12"
   integrity sha512-zR1ithF4Iyq1wLwkDcT+qFnhs8L5VUtjgac212ftiOP/ZZUOCuuF2DeGiZZGQXGoHA50OreZqLH5NjDcDqn34w==
 
-"@typescript-eslint/typescript-estree@5.16.0":
-  version "5.16.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.16.0.tgz#32259459ec62f5feddca66adc695342f30101f61"
-  integrity sha512-SE4VfbLWUZl9MR+ngLSARptUv2E8brY0luCdgmUevU6arZRY/KxYoLI/3V/yxaURR8tLRN7bmZtJdgmzLHI6pQ==
-  dependencies:
-    "@typescript-eslint/types" "5.16.0"
-    "@typescript-eslint/visitor-keys" "5.16.0"
-    debug "^4.3.2"
-    globby "^11.0.4"
-    is-glob "^4.0.3"
-    semver "^7.3.5"
-    tsutils "^3.21.0"
+"@typescript-eslint/types@5.20.0":
+  version "5.20.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.20.0.tgz#fa39c3c2aa786568302318f1cb51fcf64258c20c"
+  integrity sha512-+d8wprF9GyvPwtoB4CxBAR/s0rpP25XKgnOvMf/gMXYDvlUC3rPFHupdTQ/ow9vn7UDe5rX02ovGYQbv/IUCbg==
 
 "@typescript-eslint/typescript-estree@5.19.0":
   version "5.19.0"
@@ -3059,17 +3082,18 @@
     semver "^7.3.5"
     tsutils "^3.21.0"
 
-"@typescript-eslint/utils@5.16.0":
-  version "5.16.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.16.0.tgz#42218b459d6d66418a4eb199a382bdc261650679"
-  integrity sha512-iYej2ER6AwmejLWMWzJIHy3nPJeGDuCqf8Jnb+jAQVoPpmWzwQOfa9hWVB8GIQE5gsCv/rfN4T+AYb/V06WseQ==
+"@typescript-eslint/typescript-estree@5.20.0":
+  version "5.20.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.20.0.tgz#ab73686ab18c8781bbf249c9459a55dc9417d6b0"
+  integrity sha512-36xLjP/+bXusLMrT9fMMYy1KJAGgHhlER2TqpUVDYUQg4w0q/NW/sg4UGAgVwAqb8V4zYg43KMUpM8vV2lve6w==
   dependencies:
-    "@types/json-schema" "^7.0.9"
-    "@typescript-eslint/scope-manager" "5.16.0"
-    "@typescript-eslint/types" "5.16.0"
-    "@typescript-eslint/typescript-estree" "5.16.0"
-    eslint-scope "^5.1.1"
-    eslint-utils "^3.0.0"
+    "@typescript-eslint/types" "5.20.0"
+    "@typescript-eslint/visitor-keys" "5.20.0"
+    debug "^4.3.2"
+    globby "^11.0.4"
+    is-glob "^4.0.3"
+    semver "^7.3.5"
+    tsutils "^3.21.0"
 
 "@typescript-eslint/utils@5.19.0":
   version "5.19.0"
@@ -3083,13 +3107,17 @@
     eslint-scope "^5.1.1"
     eslint-utils "^3.0.0"
 
-"@typescript-eslint/visitor-keys@5.16.0":
-  version "5.16.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.16.0.tgz#f27dc3b943e6317264c7492e390c6844cd4efbbb"
-  integrity sha512-jqxO8msp5vZDhikTwq9ubyMHqZ67UIvawohr4qF3KhlpL7gzSjOd+8471H3nh5LyABkaI85laEKKU8SnGUK5/g==
+"@typescript-eslint/utils@5.20.0":
+  version "5.20.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.20.0.tgz#b8e959ed11eca1b2d5414e12417fd94cae3517a5"
+  integrity sha512-lHONGJL1LIO12Ujyx8L8xKbwWSkoUKFSO+0wDAqGXiudWB2EO7WEUT+YZLtVbmOmSllAjLb9tpoIPwpRe5Tn6w==
   dependencies:
-    "@typescript-eslint/types" "5.16.0"
-    eslint-visitor-keys "^3.0.0"
+    "@types/json-schema" "^7.0.9"
+    "@typescript-eslint/scope-manager" "5.20.0"
+    "@typescript-eslint/types" "5.20.0"
+    "@typescript-eslint/typescript-estree" "5.20.0"
+    eslint-scope "^5.1.1"
+    eslint-utils "^3.0.0"
 
 "@typescript-eslint/visitor-keys@5.19.0":
   version "5.19.0"
@@ -3099,6 +3127,14 @@
     "@typescript-eslint/types" "5.19.0"
     eslint-visitor-keys "^3.0.0"
 
+"@typescript-eslint/visitor-keys@5.20.0":
+  version "5.20.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.20.0.tgz#70236b5c6b67fbaf8b2f58bf3414b76c1e826c2a"
+  integrity sha512-1flRpNF+0CAQkMNlTJ6L/Z5jiODG/e5+7mk6XwtPOUS3UrTz3UOiAg9jG2VtKsWI6rZQfy4C6a232QNRZTRGlg==
+  dependencies:
+    "@typescript-eslint/types" "5.20.0"
+    eslint-visitor-keys "^3.0.0"
+
 "@webassemblyjs/ast@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"
@@ -3252,10 +3288,10 @@
   resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
-"@zip.js/zip.js@^2.4.7":
-  version "2.4.7"
-  resolved "https://registry.yarnpkg.com/@zip.js/zip.js/-/zip.js-2.4.7.tgz#4f065beb45ea0330000b70cd1eb4068a13fea731"
-  integrity sha512-IbRUgSsPcnVth4fBljrQDfI6nZO5VqW1/49j9rMAShZ7sB8noRYgQR4nY9jeRw5ZrUM6lZrsuUr8OMF4M3mrsw==
+"@zip.js/zip.js@^2.4.10":
+  version "2.4.10"
+  resolved "https://registry.yarnpkg.com/@zip.js/zip.js/-/zip.js-2.4.10.tgz#1ba214465f20c9c3064dcd91761d0fc868f77e7f"
+  integrity sha512-lhlDPfkG8iMsAE7CNTu6fqFZp/qySEUIGBLXQQA0RNfNtgCt7SlkaGAwX0nKaCwMMNqw+wDrTJIP8gOR7uxqEg==
 
 abab@^2.0.3, abab@^2.0.5:
   version "2.0.5"
@@ -3267,7 +3303,7 @@ abbrev@1:
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
   integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
 
-accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
+accepts@~1.3.4, accepts@~1.3.5:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
   integrity sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==
@@ -3275,6 +3311,14 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
     mime-types "~2.1.24"
     negotiator "0.6.2"
 
+accepts@~1.3.8:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e"
+  integrity sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==
+  dependencies:
+    mime-types "~2.1.34"
+    negotiator "0.6.3"
+
 acorn-globals@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-6.0.0.tgz#46cdd39f0f8ff08a876619b55f5ac8a6dc770b45"
@@ -3494,7 +3538,7 @@ array-flatten@1.1.1:
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
   integrity sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=
 
-array-flatten@^2.1.0:
+array-flatten@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.2.tgz#24ef80a28c1a893617e2149b0c6d0d788293b099"
   integrity sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==
@@ -3598,10 +3642,10 @@ babel-jest@^27.5.1:
     graceful-fs "^4.2.9"
     slash "^3.0.0"
 
-babel-loader@^8.2.4:
-  version "8.2.4"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.4.tgz#95f5023c791b2e9e2ca6f67b0984f39c82ff384b"
-  integrity sha512-8dytA3gcvPPPv4Grjhnt8b5IIiTcq/zeXOPk4iTYI0SVXcsmuGg7JtBRDp8S9X+gJfhQ8ektjXZlDu1Bb33U8A==
+babel-loader@^8.2.5:
+  version "8.2.5"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.5.tgz#d45f585e654d5a5d90f5350a779d7647c5ed512e"
+  integrity sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ==
   dependencies:
     find-cache-dir "^3.3.1"
     loader-utils "^2.0.0"
@@ -3718,33 +3762,31 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.1.0.tgz#30fa40c9e7fe07dbc895678cd287024dea241dd9"
   integrity sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==
 
-body-parser@1.19.0:
-  version "1.19.0"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"
-  integrity sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==
+body-parser@1.19.2:
+  version "1.19.2"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.2.tgz#4714ccd9c157d44797b8b5607d72c0b89952f26e"
+  integrity sha512-SAAwOxgoCKMGs9uUAUFHygfLAyaniaoun6I8mFY9pRAJL9+Kec34aU+oIjDhTycub1jozEfEwx1W1IuOYxVSFw==
   dependencies:
-    bytes "3.1.0"
+    bytes "3.1.2"
     content-type "~1.0.4"
     debug "2.6.9"
     depd "~1.1.2"
-    http-errors "1.7.2"
+    http-errors "1.8.1"
     iconv-lite "0.4.24"
     on-finished "~2.3.0"
-    qs "6.7.0"
-    raw-body "2.4.0"
-    type-is "~1.6.17"
+    qs "6.9.7"
+    raw-body "2.4.3"
+    type-is "~1.6.18"
 
-bonjour@^3.5.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/bonjour/-/bonjour-3.5.0.tgz#8e890a183d8ee9a2393b3844c691a42bcf7bc9f5"
-  integrity sha1-jokKGD2O6aI5OzhExpGkK897yfU=
+bonjour-service@^1.0.11:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/bonjour-service/-/bonjour-service-1.0.12.tgz#28fbd4683f5f2e36feedb833e24ba661cac960c3"
+  integrity sha512-pMmguXYCu63Ug37DluMKEHdxc+aaIf/ay4YbF8Gxtba+9d3u+rmEWy61VK3Z3hp8Rskok3BunHYnG0dUHAsblw==
   dependencies:
-    array-flatten "^2.1.0"
-    deep-equal "^1.0.1"
+    array-flatten "^2.1.2"
     dns-equal "^1.0.0"
-    dns-txt "^2.0.2"
-    multicast-dns "^6.0.1"
-    multicast-dns-service-types "^1.1.0"
+    fast-deep-equal "^3.1.3"
+    multicast-dns "^7.2.4"
 
 boolbase@^1.0.0:
   version "1.0.0"
@@ -3860,11 +3902,6 @@ buffer-from@^1.0.0:
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
   integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
 
-buffer-indexof@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/buffer-indexof/-/buffer-indexof-1.1.1.tgz#52fabcc6a606d1a00302802648ef68f639da268c"
-  integrity sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g==
-
 buffer@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-6.0.3.tgz#2ace578459cc8fbe2a70aaa8f52ee63b6a74c6c6"
@@ -3883,10 +3920,10 @@ bytes@3.0.0:
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
   integrity sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=
 
-bytes@3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
-  integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
+bytes@3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
+  integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
 
 cacache@^15.2.0:
   version "15.3.0"
@@ -4242,10 +4279,10 @@ commander@^8.1.0, commander@^8.3.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
   integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
 
-commander@^9.0.0:
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-9.1.0.tgz#a6b263b2327f2e188c6402c42623327909f2dbec"
-  integrity sha512-i0/MaqBtdbnJ4XQs4Pmyb+oFQl+q0lsAmokVUH92SlSw4fkeAcG3bVon+Qt7hmtF+u3Het6o4VgrcY3qAoEB6w==
+commander@^9.1.0:
+  version "9.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-9.2.0.tgz#6e21014b2ed90d8b7c9647230d8b7a94a4a419a9"
+  integrity sha512-e2i4wANQiSXgnrBlIatyHtP1odfUp0BbV5Y5nEGbxtIrStkEOAAzCUirvLBNXHLr7kwLvJl6V+4V3XV9x7Wd9w==
 
 commondir@^1.0.1:
   version "1.0.1"
@@ -4299,12 +4336,12 @@ console-control-strings@^1.0.0, console-control-strings@^1.1.0:
   resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
   integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=
 
-content-disposition@0.5.3:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
-  integrity sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==
+content-disposition@0.5.4:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
+  integrity sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==
   dependencies:
-    safe-buffer "5.1.2"
+    safe-buffer "5.2.1"
 
 content-type@~1.0.4:
   version "1.0.4"
@@ -4330,10 +4367,10 @@ cookie-signature@1.0.6:
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
   integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
 
-cookie@0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
-  integrity sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==
+cookie@0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
+  integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
 
 core-js-compat@^3.20.2, core-js-compat@^3.21.0:
   version "3.21.0"
@@ -4534,18 +4571,6 @@ dedent@^0.7.0:
   resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
   integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
 
-deep-equal@^1.0.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
-  integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
-  dependencies:
-    is-arguments "^1.0.4"
-    is-date-object "^1.0.1"
-    is-regex "^1.0.4"
-    object-is "^1.0.1"
-    object-keys "^1.1.1"
-    regexp.prototype.flags "^1.2.0"
-
 deep-extend@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
@@ -4590,20 +4615,6 @@ define-properties@^1.1.3:
   dependencies:
     object-keys "^1.0.12"
 
-del@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/del/-/del-6.0.0.tgz#0b40d0332cea743f1614f818be4feb717714c952"
-  integrity sha512-1shh9DQ23L16oXSZKB2JxpL7iMy2E0S9d517ptA1P8iw0alkPtQcrKH7ru31rYtKwF499HkTu+DRzq3TCKDFRQ==
-  dependencies:
-    globby "^11.0.1"
-    graceful-fs "^4.2.4"
-    is-glob "^4.0.1"
-    is-path-cwd "^2.2.0"
-    is-path-inside "^3.0.2"
-    p-map "^4.0.0"
-    rimraf "^3.0.2"
-    slash "^3.0.0"
-
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
@@ -4656,34 +4667,26 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
-dnd-core@15.1.1:
-  version "15.1.1"
-  resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-15.1.1.tgz#b4dce2d892be2a7c9ca32ffdd545350be8d52f4f"
-  integrity sha512-Mtj/Sltcx7stVXzeDg4g7roTe/AmzRuIf/FYOxX6F8gULbY54w066BlErBOzQfn9RIJ3gAYLGX7wvVvoBSq7ig==
+dnd-core@^16.0.1:
+  version "16.0.1"
+  resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-16.0.1.tgz#a1c213ed08961f6bd1959a28bb76f1a868360d19"
+  integrity sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==
   dependencies:
-    "@react-dnd/asap" "4.0.0"
-    "@react-dnd/invariant" "3.0.0"
-    redux "^4.1.1"
+    "@react-dnd/asap" "^5.0.1"
+    "@react-dnd/invariant" "^4.0.1"
+    redux "^4.2.0"
 
 dns-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
   integrity sha1-s55/HabrCnW6nBcySzR1PEfgZU0=
 
-dns-packet@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.3.1.tgz#12aa426981075be500b910eedcd0b47dd7deda5a"
-  integrity sha512-0UxfQkMhYAUaZI+xrNZOz/as5KgDU0M/fQ9b6SpkyLbk3GEswDi6PADJVaYJradtRVsRIlF1zLyOodbcTCDzUg==
+dns-packet@^5.2.2:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-5.3.1.tgz#eb94413789daec0f0ebe2fcc230bdc9d7c91b43d"
+  integrity sha512-spBwIj0TK0Ey3666GwIdWVfUpLyubpU53BTCu8iPn4r4oXd9O14Hjg3EHw3ts2oed77/SeckunUYCyRlSngqHw==
   dependencies:
-    ip "^1.1.0"
-    safe-buffer "^5.0.1"
-
-dns-txt@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/dns-txt/-/dns-txt-2.0.2.tgz#b91d806f5d27188e4ab3e7d107d881a1cc4642b6"
-  integrity sha1-uR2Ab10nGI5Ks+fRB9iBocxGQrY=
-  dependencies:
-    buffer-indexof "^1.0.0"
+    "@leichtgewicht/ip-codec" "^2.0.1"
 
 doctrine@^2.1.0:
   version "2.1.0"
@@ -4905,23 +4908,6 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.17.0-next.1:
-  version "1.17.7"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.7.tgz#a4de61b2f66989fc7421676c1cb9787573ace54c"
-  integrity sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g==
-  dependencies:
-    es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.1"
-    is-callable "^1.2.2"
-    is-regex "^1.1.1"
-    object-inspect "^1.8.0"
-    object-keys "^1.1.1"
-    object.assign "^4.1.1"
-    string.prototype.trimend "^1.0.1"
-    string.prototype.trimstart "^1.0.1"
-
 es-abstract@^1.18.0-next.1:
   version "1.18.0-next.1"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.1.tgz#6e3a0a4bda717e5023ab3b8e90bec36108d22c68"
@@ -5027,10 +5013,10 @@ eslint-config-prettier@^8.5.0:
   resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz#5a81680ec934beca02c7b1a61cf8ca34b66feab1"
   integrity sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==
 
-eslint-plugin-react-hooks@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz#318dbf312e06fab1c835a4abef00121751ac1172"
-  integrity sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==
+eslint-plugin-react-hooks@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.4.0.tgz#71c39e528764c848d8253e1aa2c7024ed505f6c4"
+  integrity sha512-U3RVIfdzJaeKDQKEJbz5p3NW8/L80PCATJAfuojwbaEL+gBjfGdhUcGde+WGUW46Q5sr/NgxevsIiDtNXrvZaQ==
 
 eslint-plugin-react@^7.29.4:
   version "7.29.4"
@@ -5090,10 +5076,10 @@ eslint-visitor-keys@^3.3.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826"
   integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
 
-eslint@^8.11.0:
-  version "8.11.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.11.0.tgz#88b91cfba1356fc10bb9eb592958457dfe09fb37"
-  integrity sha512-/KRpd9mIRg2raGxHRGwW9ZywYNAClZrHjdueHcrVDuO3a6bj83eoTirCCk0M0yPwOjWYKHwRVRid+xK4F/GHgA==
+eslint@^8.13.0:
+  version "8.13.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.13.0.tgz#6fcea43b6811e655410f5626cfcf328016badcd7"
+  integrity sha512-D+Xei61eInqauAyTJ6C0q6x9mx7kTUC1KZ0m0LSEexR0V+e94K12LmWX076ZIsldwfQ2RONdaJe0re0TRGQbRQ==
   dependencies:
     "@eslint/eslintrc" "^1.2.1"
     "@humanwhocodes/config-array" "^0.9.2"
@@ -5224,17 +5210,17 @@ expect@^27.5.1:
     jest-matcher-utils "^27.5.1"
     jest-message-util "^27.5.1"
 
-express@^4.17.1:
-  version "4.17.1"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
-  integrity sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==
+express@^4.17.3:
+  version "4.17.3"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.17.3.tgz#f6c7302194a4fb54271b73a1fe7a06478c8f85a1"
+  integrity sha512-yuSQpz5I+Ch7gFrPCk4/c+dIBKlQUxtgwqzph132bsT6qhuzss6I8cLJQz7B3rFblzd6wtcI0ZbGltH/C4LjUg==
   dependencies:
-    accepts "~1.3.7"
+    accepts "~1.3.8"
     array-flatten "1.1.1"
-    body-parser "1.19.0"
-    content-disposition "0.5.3"
+    body-parser "1.19.2"
+    content-disposition "0.5.4"
     content-type "~1.0.4"
-    cookie "0.4.0"
+    cookie "0.4.2"
     cookie-signature "1.0.6"
     debug "2.6.9"
     depd "~1.1.2"
@@ -5248,13 +5234,13 @@ express@^4.17.1:
     on-finished "~2.3.0"
     parseurl "~1.3.3"
     path-to-regexp "0.1.7"
-    proxy-addr "~2.0.5"
-    qs "6.7.0"
+    proxy-addr "~2.0.7"
+    qs "6.9.7"
     range-parser "~1.2.1"
-    safe-buffer "5.1.2"
-    send "0.17.1"
-    serve-static "1.14.1"
-    setprototypeof "1.1.1"
+    safe-buffer "5.2.1"
+    send "0.17.2"
+    serve-static "1.14.2"
+    setprototypeof "1.2.0"
     statuses "~1.5.0"
     type-is "~1.6.18"
     utils-merge "1.0.1"
@@ -5445,10 +5431,10 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
-forwarded@~0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
-  integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=
+forwarded@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
+  integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
 
 fp-and-or@^0.1.3:
   version "0.1.3"
@@ -5670,6 +5656,18 @@ glob@^7.1.1, glob@^7.2.0:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-8.0.1.tgz#00308f5c035aa0b2a447cd37ead267ddff1577d3"
+  integrity sha512-cF7FYZZ47YzmCu7dDy50xSRRfO3ErRfrXuLZcNIuyiJEco0XSrGtuilG19L5xp3NcwTx7Gn+X6Tv3fmsUPTbow==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^5.0.1"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 global-dirs@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-3.0.0.tgz#70a76fe84ea315ab37b1f5576cbde7d48ef72686"
@@ -5689,18 +5687,6 @@ globals@^13.6.0, globals@^13.9.0:
   dependencies:
     type-fest "^0.20.2"
 
-globby@^11.0.1:
-  version "11.0.2"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.2.tgz#1af538b766a3b540ebfb58a32b2e2d5897321d83"
-  integrity sha512-2ZThXDvvV8fYFRVIxnrMQBipZQDr7MxKAmQK1vujaj9/7eF0efG7BPUKJ7jP7G5SLF37xKDXvO4S/KKLj/Z0og==
-  dependencies:
-    array-union "^2.1.0"
-    dir-glob "^3.0.1"
-    fast-glob "^3.1.1"
-    ignore "^5.1.4"
-    merge2 "^1.3.0"
-    slash "^3.0.0"
-
 globby@^11.0.4:
   version "11.0.4"
   resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.4.tgz#2cbaff77c2f2a62e71e9b2813a67b97a3a3001a5"
@@ -5855,13 +5841,6 @@ hosted-git-info@^4.0.1:
   dependencies:
     lru-cache "^6.0.0"
 
-hosted-git-info@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-4.1.0.tgz#827b82867e9ff1c8d0c4d9d53880397d2c86d224"
-  integrity sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==
-  dependencies:
-    lru-cache "^6.0.0"
-
 hosted-git-info@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-5.0.0.tgz#df7a06678b4ebd722139786303db80fdf302ea56"
@@ -5940,16 +5919,16 @@ http-deceiver@^1.2.7:
   resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
   integrity sha1-+nFolEq5pRnTN8sL7HKE3D5yPYc=
 
-http-errors@1.7.2:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.2.tgz#4f5029cf13239f31036e5b2e55292bcfbcc85c8f"
-  integrity sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==
+http-errors@1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.8.1.tgz#7c3f28577cbc8a207388455dbd62295ed07bd68c"
+  integrity sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==
   dependencies:
     depd "~1.1.2"
-    inherits "2.0.3"
-    setprototypeof "1.1.1"
+    inherits "2.0.4"
+    setprototypeof "1.2.0"
     statuses ">= 1.5.0 < 2"
-    toidentifier "1.0.0"
+    toidentifier "1.0.1"
 
 http-errors@~1.6.2:
   version "1.6.3"
@@ -5961,17 +5940,6 @@ http-errors@~1.6.2:
     setprototypeof "1.1.0"
     statuses ">= 1.4.0 < 2"
 
-http-errors@~1.7.2:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"
-  integrity sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==
-  dependencies:
-    depd "~1.1.2"
-    inherits "2.0.4"
-    setprototypeof "1.1.1"
-    statuses ">= 1.5.0 < 2"
-    toidentifier "1.0.0"
-
 http-parser-js@>=0.5.1:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.2.tgz#da2e31d237b393aae72ace43882dd7e270a8ff77"
@@ -5995,12 +5963,12 @@ http-proxy-agent@^5.0.0:
     agent-base "6"
     debug "4"
 
-http-proxy-middleware@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-2.0.1.tgz#7ef3417a479fb7666a571e09966c66a39bd2c15f"
-  integrity sha512-cfaXRVoZxSed/BmkA7SwBVNI9Kj7HFltaE5rqYOub5kWzWZ+gofV2koVN1j2rMW7pEfSSlCHGJ31xmuyFyfLOg==
+http-proxy-middleware@^2.0.3:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz#e1a4dd6979572c7ab5a4e4b55095d1f32a74963f"
+  integrity sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==
   dependencies:
-    "@types/http-proxy" "^1.17.5"
+    "@types/http-proxy" "^1.17.8"
     http-proxy "^1.18.1"
     is-glob "^4.0.1"
     is-plain-obj "^3.0.0"
@@ -6080,12 +6048,12 @@ ieee754@^1.2.1:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
-ignore-walk@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-4.0.1.tgz#fc840e8346cf88a3a9380c5b17933cd8f4d39fa3"
-  integrity sha512-rzDQLaW4jQbh2YrOFlJdCtX8qgJTehFRYiUB2r1osqTeDzV/3+Jh8fz1oAPzUThf3iku8Ds4IDqawI5d8mUiQw==
+ignore-walk@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-5.0.1.tgz#5f199e23e1288f518d90358d461387788a154776"
+  integrity sha512-yemi4pMf51WKT7khInJqAvsIGzoqYXblnsz0ql8tM+yi1EKYTY1evX4NAbJrLL/Aanr2HyZeluqU+Oi7MGHokw==
   dependencies:
-    minimatch "^3.0.4"
+    minimatch "^5.0.1"
 
 ignore@^5.1.4, ignore@^5.1.8:
   version "5.1.8"
@@ -6195,7 +6163,7 @@ invariant@^2.2.4:
   dependencies:
     loose-envify "^1.0.0"
 
-ip@^1.1.0, ip@^1.1.5:
+ip@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
   integrity sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=
@@ -6210,13 +6178,6 @@ ipaddr.js@^2.0.1:
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-2.0.1.tgz#eca256a7a877e917aeb368b0a7497ddf42ef81c0"
   integrity sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==
 
-is-arguments@^1.0.4:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.0.tgz#62353031dfbee07ceb34656a6bde59efecae8dd9"
-  integrity sha512-1Ij4lOMPl/xB5kBDn7I+b2ttPMKa8szhEIrXDuXQD/oe3HJLTLhqhgGspwgyGd6MOywBUqVvYicF72lkgDnIHg==
-  dependencies:
-    call-bind "^1.0.0"
-
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
@@ -6366,11 +6327,6 @@ is-obj@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982"
   integrity sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==
 
-is-path-cwd@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-2.2.0.tgz#67d43b82664a7b5191fd9119127eb300048a9fdb"
-  integrity sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==
-
 is-path-inside@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
@@ -6398,7 +6354,7 @@ is-potential-custom-element-name@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
   integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==
 
-is-regex@^1.0.4, is-regex@^1.1.1:
+is-regex@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9"
   integrity sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==
@@ -7100,6 +7056,11 @@ json5@^2.1.2:
   dependencies:
     minimist "^1.2.5"
 
+json5@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
+  integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
+
 jsonlines@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/jsonlines/-/jsonlines-0.1.1.tgz#4fcd246dc5d0e38691907c44ab002f782d1d94cc"
@@ -7571,6 +7532,11 @@ mime-db@1.50.0:
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.50.0.tgz#abd4ac94e98d3c0e185016c67ab45d5fde40c11f"
   integrity sha512-9tMZCDlYHqeERXEHO9f/hKfNXhre5dK2eE/krIvUjZbS2KPcqGDfNShIWS1uW9XOTKQKqK6qbeOci18rbfW77A==
 
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
 "mime-db@>= 1.43.0 < 2":
   version "1.45.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.45.0.tgz#cceeda21ccd7c3a745eba2decd55d4b73e7879ea"
@@ -7590,6 +7556,13 @@ mime-types@^2.1.27, mime-types@^2.1.31:
   dependencies:
     mime-db "1.50.0"
 
+mime-types@~2.1.34:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
 mime@1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
@@ -7764,32 +7737,22 @@ ms@2.0.0:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
   integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
 
-ms@2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
-  integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
-
 ms@2.1.2, ms@^2.1.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-ms@^2.0.0:
+ms@2.1.3, ms@^2.0.0:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
-multicast-dns-service-types@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901"
-  integrity sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=
-
-multicast-dns@^6.0.1:
-  version "6.2.3"
-  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.2.3.tgz#a0ec7bd9055c4282f790c3c82f4e28db3b31b229"
-  integrity sha512-ji6J5enbMyGRHIAkAOu3WdV8nggqviKCEKtXcOqfphZZtQrmHKycfynJ2V7eVPUA4NhJ6V7Wf4TmGbTwKE9B6g==
+multicast-dns@^7.2.4:
+  version "7.2.4"
+  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-7.2.4.tgz#cf0b115c31e922aeb20b64e6556cbeb34cf0dd19"
+  integrity sha512-XkCYOU+rr2Ft3LI6w4ye51M3VK31qJXFIxu0XLw169PtKG0Zx47OrXeVW/GCYOfpC9s1yyyf1S+L8/4LY0J9Zw==
   dependencies:
-    dns-packet "^1.3.1"
+    dns-packet "^5.2.2"
     thunky "^1.0.2"
 
 nan@^2.13.2:
@@ -7817,7 +7780,7 @@ negotiator@0.6.2:
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
   integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
 
-negotiator@^0.6.2, negotiator@^0.6.3:
+negotiator@0.6.3, negotiator@^0.6.2, negotiator@^0.6.3:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
   integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
@@ -7835,10 +7798,10 @@ no-case@^3.0.4:
     lower-case "^2.0.2"
     tslib "^2.0.3"
 
-node-forge@^1.2.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.2.1.tgz#82794919071ef2eb5c509293325cec8afd0fd53c"
-  integrity sha512-Fcvtbb+zBcZXbTTVwqGA5W+MKBj56UjVRevvchv5XrcyXbmNdesfZL37nlcWOfpgHhgmxApw3tQbTr4CqNmX4w==
+node-forge@^1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.3.1.tgz#be8da2af243b2417d5f646a770663a92b7e9ded3"
+  integrity sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==
 
 node-gyp@^8.4.1:
   version "8.4.1"
@@ -7962,32 +7925,32 @@ npm-bundled@^1.1.1, npm-bundled@^1.1.2:
   dependencies:
     npm-normalize-package-bin "^1.0.1"
 
-npm-check-updates@^12.5.4:
-  version "12.5.4"
-  resolved "https://registry.yarnpkg.com/npm-check-updates/-/npm-check-updates-12.5.4.tgz#c783b9ec6e27508a91c97d343f7714f1b5e43ec4"
-  integrity sha512-4+27zaTdieWgvPLaCZ/A6Q2WC1cYVcrc2SqVmLFYgkWBrKw1QkwpeV16FSvkFGZr3OdFyr7Dpjw8JRn4H2QxFw==
+npm-check-updates@^12.5.9:
+  version "12.5.9"
+  resolved "https://registry.yarnpkg.com/npm-check-updates/-/npm-check-updates-12.5.9.tgz#7057c78f9f62be12b834ec1eee5c144d972ad795"
+  integrity sha512-l9iOvD7EsQb96gFJL45V01YG6bP8+dmobYnSguvehPuNwgdWNMrE8RC8bSfURX5iUmX4bkobN4T8XMHXN9GMHA==
   dependencies:
     chalk "^4.1.2"
     cint "^8.2.1"
     cli-table "^0.3.11"
-    commander "^9.0.0"
+    commander "^9.1.0"
     fast-memoize "^2.5.2"
     find-up "5.0.0"
     fp-and-or "^0.1.3"
     get-stdin "^8.0.0"
     globby "^11.0.4"
-    hosted-git-info "^4.1.0"
+    hosted-git-info "^5.0.0"
     json-parse-helpfulerror "^1.0.3"
     jsonlines "^0.1.1"
     libnpmconfig "^1.2.1"
     lodash "^4.17.21"
     minimatch "^5.0.1"
     p-map "^4.0.0"
-    pacote "^13.0.3"
+    pacote "^13.0.5"
     parse-github-url "^1.0.2"
     progress "^2.0.3"
     prompts "^2.4.2"
-    rc-config-loader "^4.0.0"
+    rc-config-loader "^4.1.0"
     remote-git-tags "^3.0.0"
     rimraf "^3.0.2"
     semver "^7.3.5"
@@ -8018,13 +7981,13 @@ npm-package-arg@^9.0.0:
     semver "^7.3.5"
     validate-npm-package-name "^3.0.0"
 
-npm-packlist@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-4.0.0.tgz#ba54713f8ee2ad919a6dc9f1b9ec7aa291466703"
-  integrity sha512-gL6XC/iw9YSmqArmZOGSkyy+yIZf2f7uH0p4Vmxef/irn73vd9/rDkCtvm+a9rh/QK2xGYfCAMOghM06ymzC0A==
+npm-packlist@^5.0.0:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-5.0.2.tgz#a5eb2503faec92ad6853a2bbb2231dced6cfc549"
+  integrity sha512-jLhcNisUgpz6v2KC75qSeEYAM8UBMYjQ2OhlCOJjB4Ovu7XXnD25UqZ6hOQNeGShL/2ju3LL2E/zBbsuzkIQ8w==
   dependencies:
-    glob "^7.2.0"
-    ignore-walk "^4.0.1"
+    glob "^8.0.1"
+    ignore-walk "^5.0.1"
     npm-bundled "^1.1.2"
     npm-normalize-package-bin "^1.0.1"
 
@@ -8115,14 +8078,6 @@ object-inspect@^1.8.0, object-inspect@^1.9.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.9.0.tgz#c90521d74e1127b67266ded3394ad6116986533a"
   integrity sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==
 
-object-is@^1.0.1:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.4.tgz#63d6c83c00a43f4cbc9434eb9757c8a5b8565068"
-  integrity sha512-1ZvAZ4wlF7IyPVOcE1Omikt7UpaFlOQq0HlSti+ZvDH3UiD2brwGMwDbyV43jao2bKJ+4+WdPJHSd7kgzKYVqg==
-  dependencies:
-    call-bind "^1.0.0"
-    define-properties "^1.1.3"
-
 object-keys@^1.0.12, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -8307,14 +8262,14 @@ package-json@^6.3.0:
     registry-url "^5.0.0"
     semver "^6.2.0"
 
-pacote@^13.0.3:
-  version "13.0.5"
-  resolved "https://registry.yarnpkg.com/pacote/-/pacote-13.0.5.tgz#d6f370b11112492d8257ae1178a003b36d4bb261"
-  integrity sha512-6CYfot3/rUAn3qqzF2d/jrrXm5HlBtvaSgfmg0VtOUAdJ8fbSq21BJwftMGArkL71yXHIbUJ7Bt5B04547HELA==
+pacote@^13.0.5:
+  version "13.1.1"
+  resolved "https://registry.yarnpkg.com/pacote/-/pacote-13.1.1.tgz#d3e6e27ffc5137d2a07233ed6fba2a209ecb2b7b"
+  integrity sha512-MTT3k1OhUo+IpvoHGp25OwsRU0L+kJQM236OCywxvY4OIJ/YfloNW2/Yc3HMASH10BkfZaGMVK/pxybB7fWcLw==
   dependencies:
     "@npmcli/git" "^3.0.0"
     "@npmcli/installed-package-contents" "^1.0.7"
-    "@npmcli/promise-spawn" "^1.2.0"
+    "@npmcli/promise-spawn" "^3.0.0"
     "@npmcli/run-script" "^3.0.1"
     cacache "^16.0.0"
     chownr "^2.0.0"
@@ -8323,7 +8278,7 @@ pacote@^13.0.3:
     minipass "^3.1.6"
     mkdirp "^1.0.4"
     npm-package-arg "^9.0.0"
-    npm-packlist "^4.0.0"
+    npm-packlist "^5.0.0"
     npm-pick-manifest "^7.0.0"
     npm-registry-fetch "^13.0.1"
     proc-log "^2.0.0"
@@ -8331,7 +8286,7 @@ pacote@^13.0.3:
     read-package-json "^5.0.0"
     read-package-json-fast "^2.0.3"
     rimraf "^3.0.2"
-    ssri "^8.0.1"
+    ssri "^9.0.0"
     tar "^6.1.11"
 
 param-case@^3.0.4:
@@ -8523,10 +8478,10 @@ postcss@^8.4.7:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-preact@^10.6.6:
-  version "10.6.6"
-  resolved "https://registry.yarnpkg.com/preact/-/preact-10.6.6.tgz#f1899bc8dab7c0788b858481532cb3b5d764a520"
-  integrity sha512-dgxpTFV2vs4vizwKohYKkk7g7rmp1wOOcfd4Tz3IB3Wi+ivZzsn/SpeKJhRENSE+n8sUfsAl4S3HiCVT923ABw==
+preact@^10.7.1:
+  version "10.7.1"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.7.1.tgz#bdd2b2dce91a5842c3b9b34dfe050e5401068c9e"
+  integrity sha512-MufnRFz39aIhs9AMFisonjzTud1PK1bY+jcJLo6m2T9Uh8AqjD77w11eAAawmjUogoGOnipECq7e/1RClIKsxg==
 
 prelude-ls@^1.2.1:
   version "1.2.1"
@@ -8543,10 +8498,10 @@ prepend-http@^2.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
   integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
 
-prettier@^2.6.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.0.tgz#12f8f504c4d8ddb76475f441337542fa799207d4"
-  integrity sha512-m2FgJibYrBGGgQXNzfd0PuDGShJgRavjUoRCw1mZERIWVSXF0iLzLm+aOqTAbLnC3n6JzUhAA8uZnFVghHJ86A==
+prettier@^2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.2.tgz#e26d71a18a74c3d0f0597f55f01fb6c06c206032"
+  integrity sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==
 
 pretty-error@^4.0.0:
   version "4.0.0"
@@ -8611,7 +8566,7 @@ prompts@^2.0.1, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -8629,12 +8584,12 @@ prop-types@^15.8.1:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
-proxy-addr@~2.0.5:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.6.tgz#fdc2336505447d3f2f2c638ed272caf614bbb2bf"
-  integrity sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==
+proxy-addr@~2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
+  integrity sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==
   dependencies:
-    forwarded "~0.1.2"
+    forwarded "0.2.0"
     ipaddr.js "1.9.1"
 
 psl@^1.1.28, psl@^1.1.33:
@@ -8662,24 +8617,15 @@ pupa@^2.1.1:
   dependencies:
     escape-goat "^2.0.0"
 
-qr.js@0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
-  integrity sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8=
+qrcode.react@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-3.0.1.tgz#0cb1d7cfdf3955737fbd3509c193985795ca0612"
+  integrity sha512-uCNm16ClMCrdM2R20c/zqmdwHcbMQf3K7ey39EiK/UgEKbqWeM0iH2QxW3iDVFzjQKFzH23ICgOyG4gNsJ0/gw==
 
-qrcode.react@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-2.0.0.tgz#20b738eddcfc6958673bbbd1a0c5568ee5c399f5"
-  integrity sha512-1CCzwC4KHYCzOLb7M+lKYqHzDMVsppKJBhrU1ZDCuJRHKiD99LeDHOkuvUKCRvnJgDzp9SnB6/WNA7qp6I7ozA==
-  dependencies:
-    loose-envify "^1.4.0"
-    prop-types "^15.6.0"
-    qr.js "0.0.0"
-
-qs@6.7.0:
-  version "6.7.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
-  integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
+qs@6.9.7:
+  version "6.9.7"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.7.tgz#4610846871485e1e048f44ae3b94033f0e675afe"
+  integrity sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==
 
 qs@~6.5.2:
   version "6.5.2"
@@ -8703,20 +8649,20 @@ range-parser@^1.2.1, range-parser@~1.2.1:
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
   integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
 
-raw-body@2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.0.tgz#a1ce6fb9c9bc356ca52e89256ab59059e13d0332"
-  integrity sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==
+raw-body@2.4.3:
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.3.tgz#8f80305d11c2a0a545c2d9d89d7a0286fcead43c"
+  integrity sha512-UlTNLIcu0uzb4D2f4WltY6cVjLi+/jEN4lgEUj3E04tpMDpUlkBo/eSn6zou9hum2VMNpCCUone0O0WeJim07g==
   dependencies:
-    bytes "3.1.0"
-    http-errors "1.7.2"
+    bytes "3.1.2"
+    http-errors "1.8.1"
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-rc-config-loader@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/rc-config-loader/-/rc-config-loader-4.0.0.tgz#144cf31961c9f8ebcf252bd9c263fd40d62bd387"
-  integrity sha512-//LRTblJEcqbmmro1GCmZ39qZXD+JqzuD8Y5/IZU3Dhp3A1Yr0Xn68ks8MQ6qKfKvYCWDveUmRDKDA40c+sCXw==
+rc-config-loader@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/rc-config-loader/-/rc-config-loader-4.1.0.tgz#208e797d773a2203473df10496cd75b5fd93740e"
+  integrity sha512-aW+kX4qy0CiM9L4fG4Us3oEOpIrOrXzWykAn+xldD07Y9PXWjTH744oHbv0Kc9ZwWaylw3jMjxaf14RgStrNrA==
   dependencies:
     debug "^4.1.1"
     js-yaml "^4.0.0"
@@ -8740,29 +8686,29 @@ react-clientside-effect@^1.2.5:
   dependencies:
     "@babel/runtime" "^7.12.13"
 
-react-dnd-html5-backend@^15.1.2:
-  version "15.1.2"
-  resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-15.1.2.tgz#85e2c5ad57e87190495756f68f44fd89299062fb"
-  integrity sha512-mem9QbutUF+aA2YC1y47G3ECjnYV/sCYKSnu5Jd7cbg3fLMPAwbnTf/JayYdnCH5l3eg9akD9dQt+cD0UdF8QQ==
+react-dnd-html5-backend@^16.0.1:
+  version "16.0.1"
+  resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz#87faef15845d512a23b3c08d29ecfd34871688b6"
+  integrity sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==
   dependencies:
-    dnd-core "15.1.1"
+    dnd-core "^16.0.1"
 
-react-dnd-touch-backend@^15.1.1:
-  version "15.1.1"
-  resolved "https://registry.yarnpkg.com/react-dnd-touch-backend/-/react-dnd-touch-backend-15.1.1.tgz#c51b2d765eb88219a228cb93131744c834c3e633"
-  integrity sha512-3OuPGvt5iCy+UnwL8tLaTH6KZWu71JOoxyUhMTgjJFF08SnAqROydgLIGz6JXiIGjkBGLq8j/rkSvO7jr7050A==
+react-dnd-touch-backend@^16.0.1:
+  version "16.0.1"
+  resolved "https://registry.yarnpkg.com/react-dnd-touch-backend/-/react-dnd-touch-backend-16.0.1.tgz#e73f8169e2b9fac0f687970f875cac0a4d02d6e2"
+  integrity sha512-NonoCABzzjyWGZuDxSG77dbgMZ2Wad7eQiCd/ECtsR2/NBLTjGksPUx9UPezZ1nQ/L7iD130Tz3RUshL/ClKLA==
   dependencies:
-    "@react-dnd/invariant" "3.0.0"
-    dnd-core "15.1.1"
+    "@react-dnd/invariant" "^4.0.1"
+    dnd-core "^16.0.1"
 
-react-dnd@^15.1.1:
-  version "15.1.1"
-  resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-15.1.1.tgz#feb233200cb372ea6382b511baac6cc52a0068dc"
-  integrity sha512-QLrHtPU08U4c5zop0ANeqrHXaQw2EWLMn8DQoN6/e4eSN/UbB84P49/80Qg0MEF29VLB5vikSoiFh9N8ASNmpQ==
+react-dnd@^16.0.1:
+  version "16.0.1"
+  resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-16.0.1.tgz#2442a3ec67892c60d40a1559eef45498ba26fa37"
+  integrity sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==
   dependencies:
-    "@react-dnd/invariant" "3.0.0"
-    "@react-dnd/shallowequal" "3.0.0"
-    dnd-core "15.1.1"
+    "@react-dnd/invariant" "^4.0.1"
+    "@react-dnd/shallowequal" "^4.0.1"
+    dnd-core "^16.0.1"
     fast-deep-equal "^3.1.3"
     hoist-non-react-statics "^3.3.2"
 
@@ -8897,10 +8843,10 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
-redux@^4.1.1:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.2.tgz#140f35426d99bb4729af760afcf79eaaac407104"
-  integrity sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==
+redux@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13"
+  integrity sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==
   dependencies:
     "@babel/runtime" "^7.9.2"
 
@@ -8928,14 +8874,6 @@ regenerator-transform@^0.14.2:
   dependencies:
     "@babel/runtime" "^7.8.4"
 
-regexp.prototype.flags@^1.2.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
-  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-
 regexp.prototype.flags@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz#7ef352ae8d159e758c0eadca6f8fcb4eef07be26"
@@ -9154,7 +9092,7 @@ safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
-safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
+safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
@@ -9230,12 +9168,12 @@ select-hose@^2.0.0:
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
   integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
 
-selfsigned@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-2.0.0.tgz#e927cd5377cbb0a1075302cff8df1042cc2bce5b"
-  integrity sha512-cUdFiCbKoa1mZ6osuJs2uDHrs0k0oprsKveFiiaBKCNq3SYyb5gs2HxhQyDNLCmL51ZZThqi4YNDpCK6GOP1iQ==
+selfsigned@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-2.0.1.tgz#8b2df7fa56bf014d19b6007655fff209c0ef0a56"
+  integrity sha512-LmME957M1zOsUhG+67rAjKfiWFox3SBxE/yymatMZsAx+oMrJ0YQ8AToOnyCm7xbeg2ep37IHLxdu0o2MavQOQ==
   dependencies:
-    node-forge "^1.2.0"
+    node-forge "^1"
 
 semver-diff@^3.1.1:
   version "3.1.1"
@@ -9278,10 +9216,10 @@ semver@^7.3.2, semver@^7.3.4:
   dependencies:
     lru-cache "^6.0.0"
 
-send@0.17.1:
-  version "0.17.1"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
-  integrity sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==
+send@0.17.2:
+  version "0.17.2"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.17.2.tgz#926622f76601c41808012c8bf1688fe3906f7820"
+  integrity sha512-UJYB6wFSJE3G00nEivR5rgWp8c2xXvJ3OPWPhmuteU0IKj8nKbG3DrjiOmLwpnHGYWAVwA69zmTm++YG0Hmwww==
   dependencies:
     debug "2.6.9"
     depd "~1.1.2"
@@ -9290,9 +9228,9 @@ send@0.17.1:
     escape-html "~1.0.3"
     etag "~1.8.1"
     fresh "0.5.2"
-    http-errors "~1.7.2"
+    http-errors "1.8.1"
     mime "1.6.0"
-    ms "2.1.1"
+    ms "2.1.3"
     on-finished "~2.3.0"
     range-parser "~1.2.1"
     statuses "~1.5.0"
@@ -9317,15 +9255,15 @@ serve-index@^1.9.1:
     mime-types "~2.1.17"
     parseurl "~1.3.2"
 
-serve-static@1.14.1:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.14.1.tgz#666e636dc4f010f7ef29970a88a674320898b2f9"
-  integrity sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==
+serve-static@1.14.2:
+  version "1.14.2"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.14.2.tgz#722d6294b1d62626d41b43a013ece4598d292bfa"
+  integrity sha512-+TMNA9AFxUEGuC0z2mevogSnn9MXKb4fa7ngeRMJaaGv8vTwnIEkKi+QGvPt33HSnf8pRS+WGM0EbMtCJLKMBQ==
   dependencies:
     encodeurl "~1.0.2"
     escape-html "~1.0.3"
     parseurl "~1.3.3"
-    send "0.17.1"
+    send "0.17.2"
 
 set-blocking@^2.0.0:
   version "2.0.0"
@@ -9337,10 +9275,10 @@ setprototypeof@1.1.0:
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"
   integrity sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==
 
-setprototypeof@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
-  integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==
+setprototypeof@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
+  integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
 
 shallow-clone@^3.0.0:
   version "3.0.1"
@@ -9569,6 +9507,13 @@ ssri@^8.0.0, ssri@^8.0.1:
   dependencies:
     minipass "^3.1.1"
 
+ssri@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/ssri/-/ssri-9.0.0.tgz#70ad90e339eb910f1a7ff1dcf4afc268326c4547"
+  integrity sha512-Y1Z6J8UYnexKFN1R/hxUaYoY2LVdKEzziPmVAFKiKX8fiwvCJTVzn/xYE9TEWod5OVyNfIHHuVfIEuBClL/uJQ==
+  dependencies:
+    minipass "^3.1.1"
+
 stable@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
@@ -9698,7 +9643,7 @@ strip-ansi@^6.0.1:
   dependencies:
     ansi-regex "^5.0.1"
 
-strip-ansi@^7.0.0, strip-ansi@^7.0.1:
+strip-ansi@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.0.1.tgz#61740a08ce36b61e50e65653f07060d000975fb2"
   integrity sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==
@@ -9901,10 +9846,10 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
-toidentifier@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
-  integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
+toidentifier@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
+  integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
 
 tough-cookie@^4.0.0:
   version "4.0.0"
@@ -9942,10 +9887,10 @@ trim-newlines@^3.0.0:
   dependencies:
     glob "^7.1.2"
 
-ts-jest@^27.1.3:
-  version "27.1.3"
-  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-27.1.3.tgz#1f723e7e74027c4da92c0ffbd73287e8af2b2957"
-  integrity sha512-6Nlura7s6uM9BVUAoqLH7JHyMXjz8gluryjpPXxr3IxZdAXnU6FhjvVLHFtfd1vsE1p8zD1OJfskkc0jhTSnkA==
+ts-jest@^27.1.4:
+  version "27.1.4"
+  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-27.1.4.tgz#84d42cf0f4e7157a52e7c64b1492c46330943e00"
+  integrity sha512-qjkZlVPWVctAezwsOD1OPzbZ+k7zA5z3oxII4dGdZo5ggX/PL7kvwTM0pXTr10fAtbiVpJaL3bWd502zAhpgSQ==
   dependencies:
     bs-logger "0.x"
     fast-json-stable-stringify "2.x"
@@ -10049,7 +9994,7 @@ type-fest@^0.8.1:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
   integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
 
-type-is@~1.6.17, type-is@~1.6.18:
+type-is@~1.6.18:
   version "1.6.18"
   resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
   integrity sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
@@ -10069,10 +10014,10 @@ typescript-eslint@0.0.1-alpha.0:
   resolved "https://registry.yarnpkg.com/typescript-eslint/-/typescript-eslint-0.0.1-alpha.0.tgz#285d68a4e96588295cd436278801bcb6a6b916c1"
   integrity sha512-1hNKM37dAWML/2ltRXupOq2uqcdRQyDFphl+341NTPXFLLLiDhErXx8VtaSLh3xP7SyHZdcCgpt9boYYVb3fQg==
 
-typescript@4.6.2:
-  version "4.6.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.2.tgz#fe12d2727b708f4eef40f51598b3398baa9611d4"
-  integrity sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==
+typescript@4.6.3:
+  version "4.6.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.3.tgz#eefeafa6afdd31d725584c67a0eaba80f6fc6c6c"
+  integrity sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==
 
 unbox-primitive@^1.0.1:
   version "1.0.1"
@@ -10341,39 +10286,38 @@ webpack-dev-middleware@^5.3.1:
     range-parser "^1.2.1"
     schema-utils "^4.0.0"
 
-webpack-dev-server@^4.7.4:
-  version "4.7.4"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-4.7.4.tgz#d0ef7da78224578384e795ac228d8efb63d5f945"
-  integrity sha512-nfdsb02Zi2qzkNmgtZjkrMOcXnYZ6FLKcQwpxT7MvmHKc+oTtDsBju8j+NMyAygZ9GW1jMEUpy3itHtqgEhe1A==
+webpack-dev-server@^4.8.1:
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-4.8.1.tgz#58f9d797710d6e25fa17d6afab8708f958c11a29"
+  integrity sha512-dwld70gkgNJa33czmcj/PlKY/nOy/BimbrgZRaR9vDATBQAYgLzggR0nxDtPLJiLrMgZwbE6RRfJ5vnBBasTyg==
   dependencies:
     "@types/bonjour" "^3.5.9"
     "@types/connect-history-api-fallback" "^1.3.5"
     "@types/express" "^4.17.13"
     "@types/serve-index" "^1.9.1"
     "@types/sockjs" "^0.3.33"
-    "@types/ws" "^8.2.2"
+    "@types/ws" "^8.5.1"
     ansi-html-community "^0.0.8"
-    bonjour "^3.5.0"
+    bonjour-service "^1.0.11"
     chokidar "^3.5.3"
     colorette "^2.0.10"
     compression "^1.7.4"
     connect-history-api-fallback "^1.6.0"
     default-gateway "^6.0.3"
-    del "^6.0.0"
-    express "^4.17.1"
+    express "^4.17.3"
     graceful-fs "^4.2.6"
     html-entities "^2.3.2"
-    http-proxy-middleware "^2.0.0"
+    http-proxy-middleware "^2.0.3"
     ipaddr.js "^2.0.1"
     open "^8.0.9"
     p-retry "^4.5.0"
     portfinder "^1.0.28"
+    rimraf "^3.0.2"
     schema-utils "^4.0.0"
-    selfsigned "^2.0.0"
+    selfsigned "^2.0.1"
     serve-index "^1.9.1"
     sockjs "^0.3.21"
     spdy "^4.0.2"
-    strip-ansi "^7.0.0"
     webpack-dev-middleware "^5.3.1"
     ws "^8.4.2"
 
@@ -10398,10 +10342,10 @@ webpack-sources@^3.2.3:
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
-webpack@^5.70.0:
-  version "5.70.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.70.0.tgz#3461e6287a72b5e6e2f4872700bc8de0d7500e6d"
-  integrity sha512-ZMWWy8CeuTTjCxbeaQI21xSswseF2oNOwc70QSKNePvmxE7XW36i7vpBMYZFAUHPwQiEbNGCEYIOOlyRbdGmxw==
+webpack@^5.72.0:
+  version "5.72.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.72.0.tgz#f8bc40d9c6bb489a4b7a8a685101d6022b8b6e28"
+  integrity sha512-qmSmbspI0Qo5ld49htys8GY9XhS9CGqFoHTsOVAnjBdg0Zn79y135R+k4IR4rKK6+eKaabMhJwiVB7xw0SJu5w==
   dependencies:
     "@types/eslint-scope" "^3.7.3"
     "@types/estree" "^0.0.51"

From 46582b2577b439e1d0d404fa9d2f865eb2ddaf6c Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 25 Apr 2022 19:40:51 +0530
Subject: [PATCH 043/102] fix: tag drag-n-drop intercepted by files drag-n-drop
 (#997)

---
 .../AttachedFilesPopover/AttachedFilesButton.tsx         | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
index 9575d4c84..d0b1442c4 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
@@ -223,8 +223,13 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
     const dragCounter = useRef(0)
 
     const handleDrag = (event: DragEvent) => {
-      event.preventDefault()
-      event.stopPropagation()
+      if (
+        event.dataTransfer?.items &&
+        Array.from(event.dataTransfer.items).some((item) => item.kind === 'file')
+      ) {
+        event.preventDefault()
+        event.stopPropagation()
+      }
     }
 
     const handleDragIn = useCallback(

From d0d97a8dbcdcff443786bb90bd77becb55155c39 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 25 Apr 2022 19:51:39 +0530
Subject: [PATCH 044/102] fix: image zoom over 100% (#998)

---
 .../Components/Files/FilePreviewModal.tsx     |  4 +-
 .../Components/Files/ImagePreview.tsx         | 40 ++++++++++++-------
 app/assets/stylesheets/_sn.scss               |  4 ++
 3 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/app/assets/javascripts/Components/Files/FilePreviewModal.tsx b/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
index 0c42e1593..248701fa5 100644
--- a/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
+++ b/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
@@ -115,8 +115,8 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, file,
             </button>
           </div>
         </div>
-        <div className="flex flex-grow min-h-0 overflow-auto">
-          <div className="flex flex-grow items-center justify-center relative">
+        <div className="flex flex-grow min-h-0">
+          <div className="flex flex-grow items-center justify-center relative max-w-full">
             {objectUrl ? (
               <PreviewComponent file={file} objectUrl={objectUrl} />
             ) : isLoadingFile ? (
diff --git a/app/assets/javascripts/Components/Files/ImagePreview.tsx b/app/assets/javascripts/Components/Files/ImagePreview.tsx
index 49d827513..7aecc46ab 100644
--- a/app/assets/javascripts/Components/Files/ImagePreview.tsx
+++ b/app/assets/javascripts/Components/Files/ImagePreview.tsx
@@ -13,21 +13,31 @@ export const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
   const [imageZoomPercent, setImageZoomPercent] = useState(100)
 
   return (
-    <div className="flex items-center justify-center w-full h-full overflow-auto">
-      <img
-        src={objectUrl}
-        style={{
-          'min-width': '100%',
-          height: `${imageZoomPercent}%`,
-          'object-fit': 'contain',
-        }}
-        ref={(imgElement) => {
-          if (!initialImgHeightRef.current) {
-            initialImgHeightRef.current = imgElement?.height
-          }
-        }}
-      />
-      <div className="flex items-center absolute bottom-6 py-1 px-3 bg-default border-1 border-solid border-main rounded">
+    <div className="flex items-center justify-center w-full h-full">
+      <div className="flex items-center justify-center w-full h-full relative overflow-auto">
+        <img
+          src={objectUrl}
+          style={{
+            height: `${imageZoomPercent}%`,
+            ...(imageZoomPercent <= 100
+              ? {
+                  'min-width': '100%',
+                  'object-fit': 'contain',
+                }
+              : {
+                  position: 'absolute',
+                  inset: 0,
+                  margin: 'auto',
+                }),
+          }}
+          ref={(imgElement) => {
+            if (!initialImgHeightRef.current) {
+              initialImgHeightRef.current = imgElement?.height
+            }
+          }}
+        />
+      </div>
+      <div className="flex items-center absolute left-1/2 -translate-x-1/2 bottom-6 py-1 px-3 bg-default border-1 border-solid border-main rounded">
         <span className="mr-1.5">Zoom:</span>
         <IconButton
           className="hover:bg-contrast p-1 rounded"
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 131418528..bfa58afa4 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -347,6 +347,10 @@
   max-width: 35ch;
 }
 
+.max-w-full {
+  max-width: 100%;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }

From e8ed38bcb2d4d76d5f94e97af7cc5fbddaccab00 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Mon, 25 Apr 2022 13:32:55 -0500
Subject: [PATCH 045/102] fix: handle undefined desktop service when running in
 web environment

---
 app/assets/javascripts/UIModels/Application.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/app/assets/javascripts/UIModels/Application.ts b/app/assets/javascripts/UIModels/Application.ts
index e929fd1ba..67126fd45 100644
--- a/app/assets/javascripts/UIModels/Application.ts
+++ b/app/assets/javascripts/UIModels/Application.ts
@@ -77,9 +77,14 @@ export class WebApplication extends SNApplication {
       }
 
       for (const service of Object.values(this.webServices)) {
+        if (!service) {
+          continue
+        }
+
         if ('deinit' in service) {
           service.deinit?.(source)
         }
+
         ;(service as { application?: WebApplication }).application = undefined
       }
 

From 50d047a90334d35f3d69ef78c3a5cdb0a51a5753 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 26 Apr 2022 00:12:17 +0530
Subject: [PATCH 046/102] feat: only fetch files quota when prefs are opened
 (#999)

---
 .../Preferences/Panes/Account/Files.tsx       | 63 ++++++++++++++-----
 .../Preferences/Panes/Account/index.tsx       |  2 +-
 .../javascripts/UIModels/AppState/AppState.ts |  2 +-
 .../UIModels/AppState/FilesState.ts           | 53 +---------------
 4 files changed, 53 insertions(+), 67 deletions(-)

diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/Files.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/Files.tsx
index 237e099de..7861fda8c 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Account/Files.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/Files.tsx
@@ -1,36 +1,71 @@
+import { WebApplication } from '@/UIModels/Application'
 import { AppState } from '@/UIModels/AppState'
 import { formatSizeToReadableString } from '@standardnotes/filepicker'
+import { SubscriptionSettingName } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
+import { useEffect, useState } from 'preact/hooks'
 import { PreferencesGroup, PreferencesSegment, Subtitle, Title } from '../../PreferencesComponents'
 
 type Props = {
+  application: WebApplication
   appState: AppState
 }
 
-export const FilesSection: FunctionComponent<Props> = observer(({ appState }) => {
-  if (!appState.features.isEntitledToFiles) {
+export const FilesSection: FunctionComponent<Props> = observer(({ application, appState }) => {
+  if (!application.getUser() || !appState.features.isEntitledToFiles) {
     return null
   }
 
-  const filesQuotaUsed = appState.files.filesQuotaUsed
-  const filesQuotaTotal = appState.files.filesQuotaTotal
+  const [isLoading, setIsLoading] = useState(true)
+  const [filesQuotaUsed, setFilesQuotaUsed] = useState<number>(0)
+  const [filesQuotaTotal, setFilesQuotaTotal] = useState<number>(0)
+
+  useEffect(() => {
+    const getFilesQuota = async () => {
+      const filesQuotaUsed = await application.settings.getSubscriptionSetting(
+        SubscriptionSettingName.FileUploadBytesUsed,
+      )
+      const filesQuotaTotal = await application.settings.getSubscriptionSetting(
+        SubscriptionSettingName.FileUploadBytesLimit,
+      )
+
+      if (filesQuotaUsed) {
+        setFilesQuotaUsed(parseFloat(filesQuotaUsed))
+      }
+      if (filesQuotaTotal) {
+        setFilesQuotaTotal(parseFloat(filesQuotaTotal))
+      }
+
+      setIsLoading(false)
+    }
+
+    getFilesQuota().catch(console.error)
+  })
 
   return (
     <PreferencesGroup>
       <PreferencesSegment>
         <Title>Files</Title>
         <Subtitle>Storage Quota</Subtitle>
-        <div className="mt-1 mb-1">
-          <span className="font-semibold">{formatSizeToReadableString(filesQuotaUsed)}</span> of{' '}
-          <span>{formatSizeToReadableString(filesQuotaTotal)}</span> used
-        </div>
-        <progress
-          className="w-full progress-bar"
-          aria-label="Files storage used"
-          value={appState.files.filesQuotaUsed}
-          max={filesQuotaTotal}
-        />
+        {isLoading ? (
+          <div className="mt-2">
+            <div className="sk-spinner spinner-info w-3 h-3"></div>
+          </div>
+        ) : (
+          <>
+            <div className="mt-1 mb-1">
+              <span className="font-semibold">{formatSizeToReadableString(filesQuotaUsed)}</span> of{' '}
+              <span>{formatSizeToReadableString(filesQuotaTotal)}</span> used
+            </div>
+            <progress
+              className="w-full progress-bar"
+              aria-label="Files storage used"
+              value={filesQuotaUsed}
+              max={filesQuotaTotal}
+            />
+          </>
+        )}
       </PreferencesSegment>
     </PreferencesGroup>
   )
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx
index 302404789..4af12d87b 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx
@@ -25,7 +25,7 @@ export const AccountPreferences = observer(({ application, appState }: Props) =>
       </>
     )}
     <Subscription application={application} appState={appState} />
-    <FilesSection appState={appState} />
+    <FilesSection application={application} appState={appState} />
     <SignOutWrapper application={application} appState={appState} />
   </PreferencesPane>
 ))
diff --git a/app/assets/javascripts/UIModels/AppState/AppState.ts b/app/assets/javascripts/UIModels/AppState/AppState.ts
index cd151266c..0697efaff 100644
--- a/app/assets/javascripts/UIModels/AppState/AppState.ts
+++ b/app/assets/javascripts/UIModels/AppState/AppState.ts
@@ -110,7 +110,7 @@ export class AppState {
     this.subscription = new SubscriptionState(application, this.appEventObserverRemovers)
     this.purchaseFlow = new PurchaseFlowState(application)
     this.notesView = new NotesViewState(application, this, this.appEventObserverRemovers)
-    this.files = new FilesState(application, this.appEventObserverRemovers)
+    this.files = new FilesState(application)
     this.addAppEventObserver()
     this.streamNotesAndTags()
     this.onVisibilityChange = () => {
diff --git a/app/assets/javascripts/UIModels/AppState/FilesState.ts b/app/assets/javascripts/UIModels/AppState/FilesState.ts
index 1903f5c58..1482de088 100644
--- a/app/assets/javascripts/UIModels/AppState/FilesState.ts
+++ b/app/assets/javascripts/UIModels/AppState/FilesState.ts
@@ -7,61 +7,12 @@ import {
   ClassicFileSaver,
   parseFileName,
 } from '@standardnotes/filepicker'
-import {
-  ApplicationEvent,
-  ClientDisplayableError,
-  ContentType,
-  SNFile,
-  SubscriptionSettingName,
-} from '@standardnotes/snjs'
+import { ClientDisplayableError, SNFile } from '@standardnotes/snjs'
 import { addToast, dismissToast, ToastType } from '@standardnotes/stylekit'
-import { action, makeObservable, observable } from 'mobx'
-
 import { WebApplication } from '../Application'
 
 export class FilesState {
-  filesQuotaUsed: number
-  filesQuotaTotal: number
-
-  constructor(private application: WebApplication, appObservers: (() => void)[]) {
-    this.filesQuotaUsed = 0
-    this.filesQuotaTotal = 0
-
-    makeObservable(this, {
-      filesQuotaUsed: observable,
-      filesQuotaTotal: observable,
-      getFilesQuota: action,
-    })
-
-    appObservers.push(
-      application.addEventObserver(async (event) => {
-        switch (event) {
-          case ApplicationEvent.Launched:
-          case ApplicationEvent.SignedIn:
-            this.getFilesQuota().catch(console.error)
-        }
-      }),
-      application.streamItems(ContentType.File, () => {
-        this.getFilesQuota().catch(console.error)
-      }),
-    )
-  }
-
-  public async getFilesQuota() {
-    const filesQuotaUsed = await this.application.settings.getSubscriptionSetting(
-      SubscriptionSettingName.FileUploadBytesUsed,
-    )
-    const filesQuotaTotal = await this.application.settings.getSubscriptionSetting(
-      SubscriptionSettingName.FileUploadBytesLimit,
-    )
-
-    if (filesQuotaUsed) {
-      this.filesQuotaUsed = parseFloat(filesQuotaUsed)
-    }
-    if (filesQuotaTotal) {
-      this.filesQuotaTotal = parseFloat(filesQuotaTotal)
-    }
-  }
+  constructor(private application: WebApplication) {}
 
   public async downloadFile(file: SNFile): Promise<void> {
     let downloadingToastId = ''

From 63fcd3d217bf2e09a44fed424cc2f8f3b1acfdf5 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 26 Apr 2022 15:21:47 +0530
Subject: [PATCH 047/102] fix: early return file dnd if not dragging files
 (#1000)

---
 .../AttachedFilesButton.tsx                   | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
index d0b1442c4..e803abd0d 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
@@ -38,6 +38,10 @@ const removeDragOverlay = () => {
   document.getElementById('drag-overlay')?.remove()
 }
 
+const isHandlingFileDrag = (event: DragEvent) =>
+  event.dataTransfer?.items &&
+  Array.from(event.dataTransfer.items).some((item) => item.kind === 'file')
+
 export const AttachedFilesButton: FunctionComponent<Props> = observer(
   ({ application, appState, onClickPreprocessing }) => {
     const premiumModal = usePremiumModal()
@@ -223,10 +227,7 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
     const dragCounter = useRef(0)
 
     const handleDrag = (event: DragEvent) => {
-      if (
-        event.dataTransfer?.items &&
-        Array.from(event.dataTransfer.items).some((item) => item.kind === 'file')
-      ) {
+      if (isHandlingFileDrag(event)) {
         event.preventDefault()
         event.stopPropagation()
       }
@@ -234,6 +235,10 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
 
     const handleDragIn = useCallback(
       (event: DragEvent) => {
+        if (!isHandlingFileDrag(event)) {
+          return
+        }
+
         event.preventDefault()
         event.stopPropagation()
 
@@ -251,6 +256,10 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
     )
 
     const handleDragOut = (event: DragEvent) => {
+      if (!isHandlingFileDrag(event)) {
+        return
+      }
+
       event.preventDefault()
       event.stopPropagation()
 
@@ -267,6 +276,10 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
 
     const handleDrop = useCallback(
       (event: DragEvent) => {
+        if (!isHandlingFileDrag(event)) {
+          return
+        }
+
         event.preventDefault()
         event.stopPropagation()
 

From 9a99cc8df2d187ec7451b24c0ddd746008ea6952 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 26 Apr 2022 19:51:55 +0530
Subject: [PATCH 048/102] fix: sync request before downloading/previewing file
 (#1003)

---
 .../AttachedFilesPopover/AttachedFilesButton.tsx           | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
index e803abd0d..bbc75a456 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
@@ -217,7 +217,12 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
           break
       }
 
-      application.sync.sync().catch(console.error)
+      if (
+        action.type !== PopoverFileItemActionType.DownloadFile &&
+        action.type !== PopoverFileItemActionType.PreviewFile
+      ) {
+        application.sync.sync().catch(console.error)
+      }
 
       return true
     }

From 93fbfffbd24c7943b8beec53d91c89d69f333073 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 26 Apr 2022 19:56:26 +0530
Subject: [PATCH 049/102] fix: spinner loading infinitely on unsupported file
 types (#1002)

---
 app/assets/javascripts/Components/Files/FilePreviewModal.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/assets/javascripts/Components/Files/FilePreviewModal.tsx b/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
index 248701fa5..3bc028301 100644
--- a/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
+++ b/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
@@ -50,6 +50,10 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, file,
     const isPreviewable = isFileTypePreviewable(file.mimeType)
     setIsFilePreviewable(isPreviewable)
 
+    if (!isPreviewable) {
+      setIsLoadingFile(false)
+    }
+
     if (!objectUrl && isPreviewable) {
       getObjectUrl().catch(console.error)
     }

From c6ed9534fb6be8ddc879d53138dc75b5f50e728e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Karol=20S=C3=B3jko?= <karolsojko@protonmail.com>
Date: Tue, 26 Apr 2022 16:27:15 +0200
Subject: [PATCH 050/102] fix: update filepicker to latest version

---
 package.json |  2 +-
 yarn.lock    | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 19f94cf9f..9d9eea356 100644
--- a/package.json
+++ b/package.json
@@ -70,7 +70,7 @@
     "@reach/tooltip": "^0.16.2",
     "@reach/visually-hidden": "^0.16.0",
     "@standardnotes/components": "1.7.15",
-    "@standardnotes/filepicker": "1.13.2",
+    "@standardnotes/filepicker": "1.13.3",
     "@standardnotes/sncrypto-web": "1.8.4",
     "@standardnotes/snjs": "2.99.1",
     "@standardnotes/stylekit": "5.23.0",
diff --git a/yarn.lock b/yarn.lock
index 8a794ccd5..25c6fe2c5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2475,7 +2475,15 @@
     "@standardnotes/auth" "^3.18.11"
     "@standardnotes/common" "^1.19.6"
 
-"@standardnotes/filepicker@1.13.2", "@standardnotes/filepicker@^1.13.2":
+"@standardnotes/filepicker@1.13.3":
+  version "1.13.3"
+  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.13.3.tgz#fa4aee37432ec189a9be0dbbdb655ebdf9e33cbf"
+  integrity sha512-og2eU0PasZviLKfm55j6ZC6LfTJnVqTF+brEosgeJdcc5mOLmbRZ9aLhYT5N3qkjJdlRSXiwWQ7mYiYQ/rF4Kw==
+  dependencies:
+    "@standardnotes/common" "^1.19.6"
+    "@standardnotes/utils" "^1.6.2"
+
+"@standardnotes/filepicker@^1.13.2":
   version "1.13.2"
   resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.13.2.tgz#63fc12ae5c08c2704f76b6757a080d8fe385ba8c"
   integrity sha512-BlGabKd1uBvnnWTWXXexGhydZTX7mTWO/0O9slP8B+h9yUz0G9DYXDlWEGyMSf3/1YArqJOnAHLU+ID/R1lvSA==

From bce8c5fcbaeb195e1f2579f6640d10401ffc5529 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Tue, 26 Apr 2022 15:28:30 -0500
Subject: [PATCH 051/102] feat: option to sign out all workspaces (#1005)

* feat: option to sign out all workspaces

* style: prettier width 120

* chore: bump snjs
---
 .prettierrc                                   |  2 +-
 .../WorkspaceSwitcher/WorkspaceMenuItem.tsx   |  8 +-
 .../WorkspaceSwitcherMenu.tsx                 | 37 +++++--
 .../Components/ApplicationView/index.tsx      | 19 ++--
 .../Components/ConfirmSignoutModal/index.tsx  | 27 ++++-
 .../Preferences/PreferencesViewWrapper.tsx    |  2 +-
 .../Device/DesktopDeviceInterface.ts          |  4 +-
 .../Device/DesktopWebCommunication.ts         | 11 ++-
 .../javascripts/Services/DesktopManager.ts    |  4 +-
 .../javascripts/UIModels/Application.ts       |  4 -
 .../javascripts/UIModels/ApplicationGroup.ts  | 25 ++---
 package.json                                  |  2 +-
 yarn.lock                                     | 98 +++++++++----------
 13 files changed, 132 insertions(+), 111 deletions(-)

diff --git a/.prettierrc b/.prettierrc
index cb8ee2671..c9cb3989c 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,6 +1,6 @@
 {
   "singleQuote": true,
   "trailingComma": "all",
-  "printWidth": 100,
+  "printWidth": 120,
   "semi": false
 }
diff --git a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
index 38951fe7d..2e0bdb9a7 100644
--- a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
@@ -64,7 +64,8 @@ export const WorkspaceMenuItem: FunctionComponent<Props> = ({
           <div>
             <button
               className="w-5 h-5 p-0 mr-3 border-0 bg-transparent hover:bg-contrast cursor-pointer"
-              onClick={() => {
+              onClick={(e) => {
+                e.stopPropagation()
                 setIsRenaming((isRenaming) => !isRenaming)
               }}
             >
@@ -72,7 +73,10 @@ export const WorkspaceMenuItem: FunctionComponent<Props> = ({
             </button>
             <button
               className="w-5 h-5 p-0 border-0 bg-transparent hover:bg-contrast cursor-pointer"
-              onClick={onDelete}
+              onClick={(e) => {
+                e.stopPropagation()
+                onDelete()
+              }}
             >
               <Icon type="trash" className="sn-icon--mid color-danger" />
             </button>
diff --git a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx
index 677c2b20c..d59224cdd 100644
--- a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx
@@ -1,9 +1,9 @@
 import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
 import { AppState } from '@/UIModels/AppState'
-import { ApplicationDescriptor } from '@standardnotes/snjs'
+import { ApplicationDescriptor, ButtonType } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
-import { useEffect, useState } from 'preact/hooks'
+import { useCallback, useEffect, useState } from 'preact/hooks'
 import { Icon } from '@/Components/Icon'
 import { Menu } from '@/Components/Menu/Menu'
 import { MenuItem, MenuItemSeparator, MenuItemType } from '@/Components/Menu/MenuItem'
@@ -18,9 +18,7 @@ type Props = {
 
 export const WorkspaceSwitcherMenu: FunctionComponent<Props> = observer(
   ({ mainApplicationGroup, appState, isOpen, hideWorkspaceOptions = false }) => {
-    const [applicationDescriptors, setApplicationDescriptors] = useState<ApplicationDescriptor[]>(
-      [],
-    )
+    const [applicationDescriptors, setApplicationDescriptors] = useState<ApplicationDescriptor[]>([])
 
     useEffect(() => {
       const removeAppGroupObserver = mainApplicationGroup.addApplicationChangeObserver(() => {
@@ -33,6 +31,19 @@ export const WorkspaceSwitcherMenu: FunctionComponent<Props> = observer(
       }
     }, [mainApplicationGroup])
 
+    const signoutAll = useCallback(async () => {
+      const confirmed = await appState.application.alertService.confirm(
+        'Are you sure you want to sign out of all workspaces on this device?',
+        undefined,
+        'Sign out all',
+        ButtonType.Danger,
+      )
+      if (!confirmed) {
+        return
+      }
+      mainApplicationGroup.signOutAllWorkspaces().catch(console.error)
+    }, [mainApplicationGroup, appState.application.alertService])
+
     return (
       <Menu a11yLabel="Workspace switcher menu" className="px-0 focus:shadow-none" isOpen={isOpen}>
         {applicationDescriptors.map((descriptor) => (
@@ -43,23 +54,29 @@ export const WorkspaceSwitcherMenu: FunctionComponent<Props> = observer(
               appState.accountMenu.setSigningOut(true)
             }}
             onClick={() => {
-              mainApplicationGroup.loadApplicationForDescriptor(descriptor).catch(console.error)
+              mainApplicationGroup.loadApplicationForDescriptor(descriptor)
             }}
-            renameDescriptor={(label: string) =>
-              mainApplicationGroup.renameDescriptor(descriptor, label)
-            }
+            renameDescriptor={(label: string) => mainApplicationGroup.renameDescriptor(descriptor, label)}
           />
         ))}
         <MenuItemSeparator />
+
         <MenuItem
           type={MenuItemType.IconButton}
           onClick={() => {
-            mainApplicationGroup.addNewApplication().catch(console.error)
+            mainApplicationGroup.addNewApplication()
           }}
         >
           <Icon type="user-add" className="color-neutral mr-2" />
           Add another workspace
         </MenuItem>
+
+        {!hideWorkspaceOptions && (
+          <MenuItem type={MenuItemType.IconButton} onClick={signoutAll}>
+            <Icon type="signOut" className="color-neutral mr-2" />
+            Sign out all workspaces
+          </MenuItem>
+        )}
       </Menu>
     )
   },
diff --git a/app/assets/javascripts/Components/ApplicationView/index.tsx b/app/assets/javascripts/Components/ApplicationView/index.tsx
index af0eb42ac..e1379234d 100644
--- a/app/assets/javascripts/Components/ApplicationView/index.tsx
+++ b/app/assets/javascripts/Components/ApplicationView/index.tsx
@@ -55,7 +55,8 @@ export class ApplicationView extends PureComponent<Props, State> {
 
   override componentDidMount(): void {
     super.componentDidMount()
-    this.loadApplication().catch(console.error)
+
+    void this.loadApplication()
   }
 
   async loadApplication() {
@@ -180,16 +181,10 @@ export class ApplicationView extends PureComponent<Props, State> {
             )}
             {renderAppContents && (
               <>
-                <Footer
-                  application={this.application}
-                  applicationGroup={this.props.mainApplicationGroup}
-                />
+                <Footer application={this.application} applicationGroup={this.props.mainApplicationGroup} />
                 <SessionsModal application={this.application} appState={this.appState} />
                 <PreferencesViewWrapper appState={this.appState} application={this.application} />
-                <RevisionHistoryModalWrapper
-                  application={this.application}
-                  appState={this.appState}
-                />
+                <RevisionHistoryModalWrapper application={this.application} appState={this.appState} />
               </>
             )}
             {this.state.challenges.map((challenge) => {
@@ -211,7 +206,11 @@ export class ApplicationView extends PureComponent<Props, State> {
                 <NotesContextMenu application={this.application} appState={this.appState} />
                 <TagsContextMenu appState={this.appState} />
                 <PurchaseFlowWrapper application={this.application} appState={this.appState} />
-                <ConfirmSignoutContainer appState={this.appState} application={this.application} />
+                <ConfirmSignoutContainer
+                  applicationGroup={this.props.mainApplicationGroup}
+                  appState={this.appState}
+                  application={this.application}
+                />
                 <ToastContainer />
               </>
             )}
diff --git a/app/assets/javascripts/Components/ConfirmSignoutModal/index.tsx b/app/assets/javascripts/Components/ConfirmSignoutModal/index.tsx
index ff5fe6c48..6a5630ebe 100644
--- a/app/assets/javascripts/Components/ConfirmSignoutModal/index.tsx
+++ b/app/assets/javascripts/Components/ConfirmSignoutModal/index.tsx
@@ -4,10 +4,13 @@ import { STRING_SIGN_OUT_CONFIRMATION } from '@/Strings'
 import { WebApplication } from '@/UIModels/Application'
 import { AppState } from '@/UIModels/AppState'
 import { observer } from 'mobx-react-lite'
+import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
+import { isDesktopApplication } from '@/Utils'
 
 type Props = {
   application: WebApplication
   appState: AppState
+  applicationGroup: ApplicationGroup
 }
 
 export const ConfirmSignoutContainer = observer((props: Props) => {
@@ -17,7 +20,7 @@ export const ConfirmSignoutContainer = observer((props: Props) => {
   return <ConfirmSignoutModal {...props} />
 })
 
-export const ConfirmSignoutModal = observer(({ application, appState }: Props) => {
+export const ConfirmSignoutModal = observer(({ application, appState, applicationGroup }: Props) => {
   const [deleteLocalBackups, setDeleteLocalBackups] = useState(false)
 
   const cancelRef = useRef<HTMLButtonElement>(null)
@@ -31,6 +34,9 @@ export const ConfirmSignoutModal = observer(({ application, appState }: Props) =
     application.desktopDevice?.localBackupsCount().then(setLocalBackupsCount).catch(console.error)
   }, [appState.accountMenu.signingOut, application.desktopDevice])
 
+  const workspaces = applicationGroup.getDescriptors()
+  const showWorkspaceWarning = workspaces.length > 1 && isDesktopApplication()
+
   return (
     <AlertDialog onDismiss={closeDialog} leastDestructiveRef={cancelRef}>
       <div className="sk-modal-content">
@@ -38,11 +44,22 @@ export const ConfirmSignoutModal = observer(({ application, appState }: Props) =
           <div className="sk-panel">
             <div className="sk-panel-content">
               <div className="sk-panel-section">
-                <AlertDialogLabel className="sk-h3 sk-panel-section-title">
-                  Sign out workspace?
-                </AlertDialogLabel>
+                <AlertDialogLabel className="sk-h3 sk-panel-section-title">Sign out workspace?</AlertDialogLabel>
                 <AlertDialogDescription className="sk-panel-row">
-                  <p className="color-foreground">{STRING_SIGN_OUT_CONFIRMATION}</p>
+                  <div>
+                    <p className="color-foreground">{STRING_SIGN_OUT_CONFIRMATION}</p>
+                    {showWorkspaceWarning && (
+                      <>
+                        <br />
+                        <p className="color-foreground">
+                          <strong>Note: </strong>
+                          Because you have other workspaces signed in, this sign out may leave logs and other metadata
+                          of your session on this device. For a more robust sign out that performs a hard clear of all
+                          app-related data, use the <i>Sign out all workspaces</i> option under <i>Switch workspace</i>.
+                        </p>
+                      </>
+                    )}
+                  </div>
                 </AlertDialogDescription>
 
                 {localBackupsCount > 0 && (
diff --git a/app/assets/javascripts/Components/Preferences/PreferencesViewWrapper.tsx b/app/assets/javascripts/Components/Preferences/PreferencesViewWrapper.tsx
index dd78f702e..ea79c2526 100644
--- a/app/assets/javascripts/Components/Preferences/PreferencesViewWrapper.tsx
+++ b/app/assets/javascripts/Components/Preferences/PreferencesViewWrapper.tsx
@@ -11,7 +11,7 @@ export interface PreferencesViewWrapperProps {
 
 export const PreferencesViewWrapper: FunctionComponent<PreferencesViewWrapperProps> = observer(
   ({ appState, application }) => {
-    if (!appState.preferences.isOpen) {
+    if (!appState.preferences?.isOpen) {
       return null
     }
 
diff --git a/app/assets/javascripts/Device/DesktopDeviceInterface.ts b/app/assets/javascripts/Device/DesktopDeviceInterface.ts
index b8ec4a3db..7d57d2d80 100644
--- a/app/assets/javascripts/Device/DesktopDeviceInterface.ts
+++ b/app/assets/javascripts/Device/DesktopDeviceInterface.ts
@@ -1,5 +1,5 @@
 import { DeviceInterface, Environment } from '@standardnotes/snjs'
-import { WebCommunicationReceiver } from './DesktopWebCommunication'
+import { WebClientRequiresDesktopMethods } from './DesktopWebCommunication'
 import { WebOrDesktopDeviceInterface } from './WebOrDesktopDeviceInterface'
 
 export function isDesktopDevice(x: DeviceInterface): x is DesktopDeviceInterface {
@@ -8,6 +8,6 @@ export function isDesktopDevice(x: DeviceInterface): x is DesktopDeviceInterface
 
 export interface DesktopDeviceInterface
   extends WebOrDesktopDeviceInterface,
-    WebCommunicationReceiver {
+    WebClientRequiresDesktopMethods {
   environment: Environment.Desktop
 }
diff --git a/app/assets/javascripts/Device/DesktopWebCommunication.ts b/app/assets/javascripts/Device/DesktopWebCommunication.ts
index ed379e240..b9bc74ddd 100644
--- a/app/assets/javascripts/Device/DesktopWebCommunication.ts
+++ b/app/assets/javascripts/Device/DesktopWebCommunication.ts
@@ -1,7 +1,6 @@
 import { DecryptedTransferPayload } from '@standardnotes/snjs'
 
-/** Receives communications emitted by Web Core. This would be the Desktop client. */
-export interface WebCommunicationReceiver {
+export interface WebClientRequiresDesktopMethods {
   localBackupsCount(): Promise<number>
 
   viewlocalBackups(): void
@@ -14,7 +13,10 @@ export interface WebCommunicationReceiver {
 
   onInitialDataLoad(): void
 
-  onSignOut(): void
+  /**
+   * Destroys all sensitive storage data, such as localStorage, IndexedDB, and other log files.
+   */
+  destroyAllData(): void
 
   onSearch(text?: string): void
 
@@ -23,8 +25,7 @@ export interface WebCommunicationReceiver {
   get extensionsServerHost(): string
 }
 
-/** Receives communications emitted by the desktop client. This would be Web Core. */
-export interface DesktopCommunicationReceiver {
+export interface DesktopClientRequiresWebMethods {
   updateAvailable(): void
 
   windowGainedFocus(): void
diff --git a/app/assets/javascripts/Services/DesktopManager.ts b/app/assets/javascripts/Services/DesktopManager.ts
index 845f7d6dc..5bc052b25 100644
--- a/app/assets/javascripts/Services/DesktopManager.ts
+++ b/app/assets/javascripts/Services/DesktopManager.ts
@@ -13,11 +13,11 @@ import {
 } from '@standardnotes/snjs'
 import { WebAppEvent, WebApplication } from '@/UIModels/Application'
 import { DesktopDeviceInterface } from '../Device/DesktopDeviceInterface'
-import { DesktopCommunicationReceiver } from '@/Device/DesktopWebCommunication'
+import { DesktopClientRequiresWebMethods } from '@/Device/DesktopWebCommunication'
 
 export class DesktopManager
   extends ApplicationService
-  implements DesktopManagerInterface, DesktopCommunicationReceiver
+  implements DesktopManagerInterface, DesktopClientRequiresWebMethods
 {
   updateObservers: {
     callback: (component: SNComponent) => void
diff --git a/app/assets/javascripts/UIModels/Application.ts b/app/assets/javascripts/UIModels/Application.ts
index 67126fd45..1afa273fe 100644
--- a/app/assets/javascripts/UIModels/Application.ts
+++ b/app/assets/javascripts/UIModels/Application.ts
@@ -91,10 +91,6 @@ export class WebApplication extends SNApplication {
       this.webServices = {} as WebServices
       this.noteControllerGroup.deinit()
       this.webEventObservers.length = 0
-
-      if (source === DeinitSource.SignOut) {
-        isDesktopDevice(this.deviceInterface) && this.deviceInterface.onSignOut()
-      }
     } catch (error) {
       console.error('Error while deiniting application', error)
     }
diff --git a/app/assets/javascripts/UIModels/ApplicationGroup.ts b/app/assets/javascripts/UIModels/ApplicationGroup.ts
index c8789c6c5..64b6a3c1f 100644
--- a/app/assets/javascripts/UIModels/ApplicationGroup.ts
+++ b/app/assets/javascripts/UIModels/ApplicationGroup.ts
@@ -1,11 +1,5 @@
 import { WebApplication } from './Application'
-import {
-  ApplicationDescriptor,
-  SNApplicationGroup,
-  Platform,
-  Runtime,
-  InternalEventBus,
-} from '@standardnotes/snjs'
+import { ApplicationDescriptor, SNApplicationGroup, Platform, Runtime, InternalEventBus } from '@standardnotes/snjs'
 import { AppState } from '@/UIModels/AppState'
 import { getPlatform, isDesktopApplication } from '@/Utils'
 import { ArchiveManager } from '@/Services/ArchiveManager'
@@ -33,17 +27,19 @@ export class ApplicationGroup extends SNApplicationGroup<WebOrDesktopDevice> {
     })
 
     if (isDesktopApplication()) {
-      Object.defineProperty(window, 'desktopCommunicationReceiver', {
+      Object.defineProperty(window, 'webClient', {
         get: () => (this.primaryApplication as WebApplication).getDesktopService(),
       })
     }
   }
 
-  private createApplication = (
-    descriptor: ApplicationDescriptor,
-    deviceInterface: WebOrDesktopDevice,
-  ) => {
+  override handleAllWorkspacesSignedOut(): void {
+    isDesktopDevice(this.deviceInterface) && this.deviceInterface.destroyAllData()
+  }
+
+  private createApplication = (descriptor: ApplicationDescriptor, deviceInterface: WebOrDesktopDevice) => {
     const platform = getPlatform()
+
     const application = new WebApplication(
       deviceInterface,
       platform,
@@ -52,6 +48,7 @@ export class ApplicationGroup extends SNApplicationGroup<WebOrDesktopDevice> {
       this.webSocketUrl,
       this.runtime,
     )
+
     const appState = new AppState(application, this.device)
     const archiveService = new ArchiveManager(application)
     const io = new IOService(platform === Platform.MacWeb || platform === Platform.MacDesktop)
@@ -62,9 +59,7 @@ export class ApplicationGroup extends SNApplicationGroup<WebOrDesktopDevice> {
     application.setWebServices({
       appState,
       archiveService,
-      desktopService: isDesktopDevice(this.device)
-        ? new DesktopManager(application, this.device)
-        : undefined,
+      desktopService: isDesktopDevice(this.device) ? new DesktopManager(application, this.device) : undefined,
       io,
       autolockService,
       statusManager,
diff --git a/package.json b/package.json
index 9d9eea356..79bcf33f8 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
     "@standardnotes/components": "1.7.15",
     "@standardnotes/filepicker": "1.13.3",
     "@standardnotes/sncrypto-web": "1.8.4",
-    "@standardnotes/snjs": "2.99.1",
+    "@standardnotes/snjs": "2.100.0",
     "@standardnotes/stylekit": "5.23.0",
     "@zip.js/zip.js": "^2.4.10",
     "mobx": "^6.5.0",
diff --git a/yarn.lock b/yarn.lock
index 25c6fe2c5..a18591fcc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2450,32 +2450,32 @@
     "@typescript-eslint/eslint-plugin" "^5.12.1"
     "@typescript-eslint/parser" "^5.12.1"
 
-"@standardnotes/domain-events@^2.27.10":
-  version "2.27.10"
-  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.27.10.tgz#ce52a7c51849a8f8995678be907c68937b8cfe02"
-  integrity sha512-TD71BRl9KRaxZBtYPFU2dmvz8L0H1AZvLF12KJrpcXVAPbSwNaprMx0LdATerIlpIa47cR/SbBBW9GRFpk5RTA==
+"@standardnotes/domain-events@^2.27.11":
+  version "2.27.11"
+  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.27.11.tgz#0675304c19660b4907c3371e80bf2f7969761546"
+  integrity sha512-fV4nEfayUHjEpTC+9rD5q7h5R318onA9HuqT8eR7HQId1ATGGDcIS0bUITPrlPyZ0pVKmMg8ox7Glya8WTyfwA==
   dependencies:
     "@standardnotes/auth" "^3.18.11"
-    "@standardnotes/features" "^1.37.9"
+    "@standardnotes/features" "^1.38.0"
 
-"@standardnotes/encryption@^1.4.9":
-  version "1.4.9"
-  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.4.9.tgz#1e5f47dd0624e694eed0a851f703d8a620a02c82"
-  integrity sha512-Cdwusso9sPVxNo85HCicbZ46g5wmjMph+3WGEGbQ6/3Jb/FaGrH4WbwnNsHvPO9LvjI41wxBqb2iCbUxmsB+ZQ==
+"@standardnotes/encryption@^1.4.10":
+  version "1.4.10"
+  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.4.10.tgz#ff5d5a884aae9a14fff7e3afe3772f41af1bb642"
+  integrity sha512-BH5brDoevoGEyNXEIV/D6G28Bn1zHxKed01aofqgronOgbZdVGXtxKr7j/EOfzareg7vhhUO2oA73aTU73dAOA==
   dependencies:
-    "@standardnotes/models" "^1.4.8"
-    "@standardnotes/responses" "^1.6.10"
-    "@standardnotes/services" "^1.9.10"
+    "@standardnotes/models" "^1.4.9"
+    "@standardnotes/responses" "^1.6.11"
+    "@standardnotes/services" "^1.9.11"
 
-"@standardnotes/features@^1.37.9":
-  version "1.37.9"
-  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.37.9.tgz#8de7cc747e29684976d5bb5534b2a36edfa0d07c"
-  integrity sha512-+j4/skCnd9SIY9KmULv7fX1KPBpgs8uOC78/TBf8rT20KEI1rNIw9c9RFTMEaQW/2tn2HPFweHAetWzIUiTWJg==
+"@standardnotes/features@^1.38.0":
+  version "1.38.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.38.0.tgz#ddd6817af1544374013fec0bb19f5dff4a11ae60"
+  integrity sha512-6a56WZTgbB1/IefF8ADWuOI9FPthP30BpJT+Dmu4TEG8SdEC4QFCogAfRPwJ2z8Kh8xYeWuRZDr+CYsm20vqWg==
   dependencies:
     "@standardnotes/auth" "^3.18.11"
     "@standardnotes/common" "^1.19.6"
 
-"@standardnotes/filepicker@1.13.3":
+"@standardnotes/filepicker@1.13.3", "@standardnotes/filepicker@^1.13.3":
   version "1.13.3"
   resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.13.3.tgz#fa4aee37432ec189a9be0dbbdb655ebdf9e33cbf"
   integrity sha512-og2eU0PasZviLKfm55j6ZC6LfTJnVqTF+brEosgeJdcc5mOLmbRZ9aLhYT5N3qkjJdlRSXiwWQ7mYiYQ/rF4Kw==
@@ -2483,40 +2483,32 @@
     "@standardnotes/common" "^1.19.6"
     "@standardnotes/utils" "^1.6.2"
 
-"@standardnotes/filepicker@^1.13.2":
-  version "1.13.2"
-  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.13.2.tgz#63fc12ae5c08c2704f76b6757a080d8fe385ba8c"
-  integrity sha512-BlGabKd1uBvnnWTWXXexGhydZTX7mTWO/0O9slP8B+h9yUz0G9DYXDlWEGyMSf3/1YArqJOnAHLU+ID/R1lvSA==
+"@standardnotes/models@^1.4.9":
+  version "1.4.9"
+  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.4.9.tgz#50b0055a4e149b948068405c69beeda1859a378d"
+  integrity sha512-34iv7Z+WiJIoOYcld8RPm4suexK0cuW2drtYdtl/10y/hJC+rXSlVIUVMj7ckPb9g4cuxyI+WVfZ1ebx8+1n0g==
   dependencies:
-    "@standardnotes/common" "^1.19.6"
+    "@standardnotes/features" "^1.38.0"
+    "@standardnotes/responses" "^1.6.11"
     "@standardnotes/utils" "^1.6.2"
 
-"@standardnotes/models@^1.4.8":
-  version "1.4.8"
-  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.4.8.tgz#7da29c5e3d7de4265c1f1a6f112e9b89c85c26c9"
-  integrity sha512-30cMS320htMTBvpYcPFsFhkmr6JyvQIkc/7IvCKPxK40yGWdTGRqwfNNSDMP5SMKXjf4t7sh1NJGjJe44DrdbQ==
-  dependencies:
-    "@standardnotes/features" "^1.37.9"
-    "@standardnotes/responses" "^1.6.10"
-    "@standardnotes/utils" "^1.6.2"
-
-"@standardnotes/responses@^1.6.10":
-  version "1.6.10"
-  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.6.10.tgz#7f3436ec183005c3802b60214fe9a5b8f817e14e"
-  integrity sha512-orR8DIUk8IzoOdSzcpOC620LZxPog1ts+qD7Lv+45/FqHOhbzCce2eoOgheMjkaQi+TTbyR68QfmdJN853rzHQ==
+"@standardnotes/responses@^1.6.11":
+  version "1.6.11"
+  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.6.11.tgz#78adf45af580a0b5ecc6f2a6b5b80c286107c36c"
+  integrity sha512-laQfkpTZMHKghyE2Vnc2lt9QEnEFpwEi2j0GezJ0QjbjKdxIyzGUMHMFCZREvQd9Z3PiVuwPXW49DGyGJZHAfQ==
   dependencies:
     "@standardnotes/auth" "^3.18.11"
     "@standardnotes/common" "^1.19.6"
-    "@standardnotes/features" "^1.37.9"
+    "@standardnotes/features" "^1.38.0"
 
-"@standardnotes/services@^1.9.10":
-  version "1.9.10"
-  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.9.10.tgz#000a5e3d75671a8b127bc7751d66c1a24b6443b2"
-  integrity sha512-ff/WEyIq2KhJX6pG8+/BpQnI9Ulo1sd+x/6FmWUHn5C6ukK8srb5Ev1SV8z1hXdkRD1ltFaQvQaPrAYNuG32aQ==
+"@standardnotes/services@^1.9.11":
+  version "1.9.11"
+  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.9.11.tgz#b35e60098a8196a58d0a0547a61fc742b2895efc"
+  integrity sha512-UWGbwS7uvxKOpLFb+HfICe2oqY6oNoqfk4A5WzrLiUsfELvh8VtaahoE9KoGn/4QSzrrYBFG9jXk2CtA5IGEgg==
   dependencies:
     "@standardnotes/common" "^1.19.6"
-    "@standardnotes/models" "^1.4.8"
-    "@standardnotes/responses" "^1.6.10"
+    "@standardnotes/models" "^1.4.9"
+    "@standardnotes/responses" "^1.6.11"
     "@standardnotes/utils" "^1.6.2"
 
 "@standardnotes/settings@^1.14.1":
@@ -2538,20 +2530,20 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.99.1":
-  version "2.99.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.99.1.tgz#8274b1d44a15538b3a43bf35794301306238d6cb"
-  integrity sha512-/DFF9YFLmyc7z34iRvAn/rXBSH5G3zuDhUeyTVWVvotbgY7zvTSD2/wtgE4nZ1pmG58UlxGTDtzTlzyuxW99Ow==
+"@standardnotes/snjs@2.100.0":
+  version "2.100.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.100.0.tgz#d62c7f0cd17a50b4f3d9e349c7c00a3f6de1192c"
+  integrity sha512-4pnmAJJ3mDDmLWx8ChR3qEKHcsKB4M1+/o1Nxj8rYOdOnVzvBhzqSERKUyUabNvDOcmo0RkAIDeHgIIRjkJtiQ==
   dependencies:
     "@standardnotes/auth" "^3.18.11"
     "@standardnotes/common" "^1.19.6"
-    "@standardnotes/domain-events" "^2.27.10"
-    "@standardnotes/encryption" "^1.4.9"
-    "@standardnotes/features" "^1.37.9"
-    "@standardnotes/filepicker" "^1.13.2"
-    "@standardnotes/models" "^1.4.8"
-    "@standardnotes/responses" "^1.6.10"
-    "@standardnotes/services" "^1.9.10"
+    "@standardnotes/domain-events" "^2.27.11"
+    "@standardnotes/encryption" "^1.4.10"
+    "@standardnotes/features" "^1.38.0"
+    "@standardnotes/filepicker" "^1.13.3"
+    "@standardnotes/models" "^1.4.9"
+    "@standardnotes/responses" "^1.6.11"
+    "@standardnotes/services" "^1.9.11"
     "@standardnotes/settings" "^1.14.1"
     "@standardnotes/sncrypto-common" "^1.7.7"
     "@standardnotes/utils" "^1.6.2"

From d33e48edd884568dc4827456ae811ad1478f8554 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Wed, 27 Apr 2022 09:46:25 -0500
Subject: [PATCH 052/102] feat: better decryption attempt; upgrade snjs with
 file size changes

---
 .../AttachedFilesPopover/PopoverFileItem.tsx  |  7 +-
 .../Components/Files/FilePreviewInfoPanel.tsx |  5 +-
 .../Panes/Security/ErroredItems.tsx           | 23 +++--
 .../javascripts/Services/AlertService.ts      |  6 +-
 .../UIModels/AppState/FilesState.ts           |  6 +-
 .../UIModels/AppState/TagsState.ts            | 74 ++++++----------
 package.json                                  |  2 +-
 yarn.lock                                     | 86 +++++++++----------
 8 files changed, 97 insertions(+), 112 deletions(-)

diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx
index f26812a6f..7700965f4 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx
@@ -95,15 +95,12 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
             <div className="text-sm mb-1 break-word">
               <span className="vertical-middle">{file.name}</span>
               {file.protected && (
-                <Icon
-                  type="lock-filled"
-                  className="sn-icon--small ml-2 color-neutral vertical-middle"
-                />
+                <Icon type="lock-filled" className="sn-icon--small ml-2 color-neutral vertical-middle" />
               )}
             </div>
           )}
           <div className="text-xs color-grey-0">
-            {file.created_at.toLocaleString()} · {formatSizeToReadableString(file.size)}
+            {file.created_at.toLocaleString()} · {formatSizeToReadableString(file.decryptedSize)}
           </div>
         </div>
       </div>
diff --git a/app/assets/javascripts/Components/Files/FilePreviewInfoPanel.tsx b/app/assets/javascripts/Components/Files/FilePreviewInfoPanel.tsx
index 5a12704e9..2c6a1da76 100644
--- a/app/assets/javascripts/Components/Files/FilePreviewInfoPanel.tsx
+++ b/app/assets/javascripts/Components/Files/FilePreviewInfoPanel.tsx
@@ -18,14 +18,13 @@ export const FilePreviewInfoPanel: FunctionComponent<Props> = ({ file }) => {
         <span className="font-semibold">Type:</span> {file.mimeType}
       </div>
       <div className="mb-3">
-        <span className="font-semibold">Size:</span> {formatSizeToReadableString(file.size)}
+        <span className="font-semibold">Size:</span> {formatSizeToReadableString(file.decryptedSize)}
       </div>
       <div className="mb-3">
         <span className="font-semibold">Created:</span> {file.created_at.toLocaleString()}
       </div>
       <div className="mb-3">
-        <span className="font-semibold">Last Modified:</span>{' '}
-        {file.userModifiedDate.toLocaleString()}
+        <span className="font-semibold">Last Modified:</span> {file.userModifiedDate.toLocaleString()}
       </div>
       <div>
         <span className="font-semibold">File ID:</span> {file.uuid}
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Security/ErroredItems.tsx b/app/assets/javascripts/Components/Preferences/Panes/Security/ErroredItems.tsx
index d62ddde94..930accb77 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Security/ErroredItems.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Security/ErroredItems.tsx
@@ -10,6 +10,7 @@ import {
 } from '@/Components/Preferences/PreferencesComponents'
 import {
   ButtonType,
+  ClientDisplayableError,
   DisplayStringForContentType,
   EncryptedItemInterface,
 } from '@standardnotes/snjs'
@@ -17,7 +18,9 @@ import { Button } from '@/Components/Button/Button'
 import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
 import { useState } from 'preact/hooks'
 
-export const ErroredItems: FunctionComponent<{ appState: AppState }> = observer(({ appState }) => {
+type Props = { appState: AppState }
+
+export const ErroredItems: FunctionComponent<Props> = observer(({ appState }: Props) => {
   const app = appState.application
 
   const [erroredItems, setErroredItems] = useState(app.items.invalidItems)
@@ -51,6 +54,18 @@ export const ErroredItems: FunctionComponent<{ appState: AppState }> = observer(
     setErroredItems(app.items.invalidItems)
   }
 
+  const attemptDecryption = (item: EncryptedItemInterface): void => {
+    const errorOrTrue = app.canAttemptDecryptionOfItem(item)
+
+    if (errorOrTrue instanceof ClientDisplayableError) {
+      void app.alertService.showErrorAlert(errorOrTrue)
+
+      return
+    }
+
+    app.presentKeyRecoveryWizard()
+  }
+
   return (
     <PreferencesGroup>
       <PreferencesSegment>
@@ -84,9 +99,7 @@ export const ErroredItems: FunctionComponent<{ appState: AppState }> = observer(
             <>
               <div className="flex items-center justify-between">
                 <div className="flex flex-col">
-                  <Subtitle>{`${getContentTypeDisplay(item)} created on ${
-                    item.createdAtString
-                  }`}</Subtitle>
+                  <Subtitle>{`${getContentTypeDisplay(item)} created on ${item.createdAtString}`}</Subtitle>
                   <Text>
                     <div>Item ID: {item.uuid}</div>
                     <div>Last Modified: {item.updatedAtString}</div>
@@ -97,7 +110,7 @@ export const ErroredItems: FunctionComponent<{ appState: AppState }> = observer(
                       variant="normal"
                       label="Attempt decryption"
                       onClick={() => {
-                        void app.presentKeyRecoveryWizard()
+                        attemptDecryption(item)
                       }}
                     />
                     <Button
diff --git a/app/assets/javascripts/Services/AlertService.ts b/app/assets/javascripts/Services/AlertService.ts
index f35b9d797..a57152e6d 100644
--- a/app/assets/javascripts/Services/AlertService.ts
+++ b/app/assets/javascripts/Services/AlertService.ts
@@ -1,4 +1,3 @@
-/* eslint-disable prefer-promise-reject-errors */
 import { SNAlertService, ButtonType, sanitizeHtmlString } from '@standardnotes/snjs'
 import { SKAlert } from '@standardnotes/stylekit'
 
@@ -66,10 +65,7 @@ export function alertDialog({
   })
 }
 
-export class AlertService implements SNAlertService {
-  /**
-   * @deprecated use the standalone `alertDialog` function instead
-   */
+export class AlertService extends SNAlertService {
   alert(text: string, title?: string, closeButtonText?: string) {
     return alertDialog({ text, title, closeButtonText })
   }
diff --git a/app/assets/javascripts/UIModels/AppState/FilesState.ts b/app/assets/javascripts/UIModels/AppState/FilesState.ts
index 1482de088..3361a3265 100644
--- a/app/assets/javascripts/UIModels/AppState/FilesState.ts
+++ b/app/assets/javascripts/UIModels/AppState/FilesState.ts
@@ -18,9 +18,7 @@ export class FilesState {
     let downloadingToastId = ''
 
     try {
-      const saver = StreamingFileSaver.available()
-        ? new StreamingFileSaver(file.name)
-        : new ClassicFileSaver()
+      const saver = StreamingFileSaver.available() ? new StreamingFileSaver(file.name) : new ClassicFileSaver()
 
       const isUsingStreamingSaver = saver instanceof StreamingFileSaver
 
@@ -110,7 +108,7 @@ export class FilesState {
           message: `Uploading file "${file.name}"...`,
         })
 
-        const operation = await this.application.files.beginNewFileUpload()
+        const operation = await this.application.files.beginNewFileUpload(file.size)
 
         if (operation instanceof ClientDisplayableError) {
           addToast({
diff --git a/app/assets/javascripts/UIModels/AppState/TagsState.ts b/app/assets/javascripts/UIModels/AppState/TagsState.ts
index 960bb5f25..de089a454 100644
--- a/app/assets/javascripts/UIModels/AppState/TagsState.ts
+++ b/app/assets/javascripts/UIModels/AppState/TagsState.ts
@@ -1,10 +1,6 @@
 import { confirmDialog } from '@/Services/AlertService'
 import { STRING_DELETE_TAG } from '@/Strings'
-import {
-  MAX_MENU_SIZE_MULTIPLIER,
-  MENU_MARGIN_FROM_APP_BORDER,
-  SMART_TAGS_FEATURE_NAME,
-} from '@/Constants'
+import { MAX_MENU_SIZE_MULTIPLIER, MENU_MARGIN_FROM_APP_BORDER, SMART_TAGS_FEATURE_NAME } from '@/Constants'
 import {
   ComponentAction,
   ContentType,
@@ -46,11 +42,7 @@ const tagSiblings = (application: SNApplication, tag: SNTag): SNTag[] => {
   return withoutCurrentTag(rootTags(application))
 }
 
-const isValidFutureSiblings = (
-  application: SNApplication,
-  futureSiblings: SNTag[],
-  tag: SNTag,
-): boolean => {
+const isValidFutureSiblings = (application: SNApplication, futureSiblings: SNTag[], tag: SNTag): boolean => {
   const siblingWithSameName = futureSiblings.find((otherTag) => otherTag.title === tag.title)
 
   if (siblingWithSameName) {
@@ -83,11 +75,7 @@ export class TagsState {
 
   private readonly tagsCountsState: TagsCountsState
 
-  constructor(
-    private application: WebApplication,
-    appEventListeners: (() => void)[],
-    private features: FeaturesState,
-  ) {
+  constructor(private application: WebApplication, appEventListeners: (() => void)[], private features: FeaturesState) {
     this.tagsCountsState = new TagsCountsState(this.application)
 
     this.selected_ = undefined
@@ -138,31 +126,28 @@ export class TagsState {
     })
 
     appEventListeners.push(
-      this.application.streamItems(
-        [ContentType.Tag, ContentType.SmartView],
-        ({ changed, removed }) => {
-          runInAction(() => {
-            this.tags = this.application.items.getDisplayableItems<SNTag>(ContentType.Tag)
+      this.application.streamItems([ContentType.Tag, ContentType.SmartView], ({ changed, removed }) => {
+        runInAction(() => {
+          this.tags = this.application.items.getDisplayableItems<SNTag>(ContentType.Tag)
 
-            this.smartViews = this.application.items.getSmartViews()
+          this.smartViews = this.application.items.getSmartViews()
 
-            const selectedTag = this.selected_
+          const selectedTag = this.selected_
 
-            if (selectedTag && !isSystemView(selectedTag as SmartView)) {
-              if (FindItem(removed, selectedTag.uuid)) {
-                this.selected_ = this.smartViews[0]
-              }
-
-              const updated = FindItem(changed, selectedTag.uuid)
-              if (updated) {
-                this.selected_ = updated as AnyTag
-              }
-            } else {
+          if (selectedTag && !isSystemView(selectedTag as SmartView)) {
+            if (FindItem(removed, selectedTag.uuid)) {
               this.selected_ = this.smartViews[0]
             }
-          })
-        },
-      ),
+
+            const updated = FindItem(changed, selectedTag.uuid)
+            if (updated) {
+              this.selected_ = updated as AnyTag
+            }
+          } else {
+            this.selected_ = this.smartViews[0]
+          }
+        })
+      }),
     )
 
     appEventListeners.push(
@@ -170,7 +155,10 @@ export class TagsState {
         if (!tagUuid) {
           this.setAllNotesCount(this.application.items.allCountableNotesCount())
         } else {
-          this.tagsCountsState.update([this.application.items.findItem(tagUuid) as SNTag])
+          const tag = this.application.items.findItem<SNTag>(tagUuid)
+          if (tag) {
+            this.tagsCountsState.update([tag])
+          }
         }
       }),
     )
@@ -314,8 +302,7 @@ export class TagsState {
       return
     }
 
-    const futureParent =
-      futureParentUuid && (this.application.items.findItem(futureParentUuid) as SNTag)
+    const futureParent = futureParentUuid && (this.application.items.findItem(futureParentUuid) as SNTag)
 
     if (!futureParent) {
       const futureSiblings = rootTags(this.application)
@@ -399,8 +386,7 @@ export class TagsState {
   }
 
   public async createNewTemplate() {
-    const isAlreadyEditingATemplate =
-      this.editing_ && this.application.items.isTemplateItem(this.editing_)
+    const isAlreadyEditingATemplate = this.editing_ && this.application.items.isTemplateItem(this.editing_)
 
     if (isAlreadyEditingATemplate) {
       return
@@ -439,9 +425,7 @@ export class TagsState {
     const isTemplateChange = this.application.items.isTemplateItem(tag)
 
     const siblings = tag instanceof SNTag ? tagSiblings(this.application, tag) : []
-    const hasDuplicatedTitle = siblings.some(
-      (other) => other.title.toLowerCase() === newTitle.toLowerCase(),
-    )
+    const hasDuplicatedTitle = siblings.some((other) => other.title.toLowerCase() === newTitle.toLowerCase())
 
     runInAction(() => {
       this.editing_ = undefined
@@ -458,9 +442,7 @@ export class TagsState {
       if (isTemplateChange) {
         this.undoCreateNewTag()
       }
-      this.application.alertService
-        ?.alert('A tag with this name already exists.')
-        .catch(console.error)
+      this.application.alertService?.alert('A tag with this name already exists.').catch(console.error)
       return
     }
 
diff --git a/package.json b/package.json
index 79bcf33f8..07ec8d827 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
     "@standardnotes/components": "1.7.15",
     "@standardnotes/filepicker": "1.13.3",
     "@standardnotes/sncrypto-web": "1.8.4",
-    "@standardnotes/snjs": "2.100.0",
+    "@standardnotes/snjs": "2.102.0",
     "@standardnotes/stylekit": "5.23.0",
     "@zip.js/zip.js": "^2.4.10",
     "mobx": "^6.5.0",
diff --git a/yarn.lock b/yarn.lock
index a18591fcc..8a94953f1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2450,27 +2450,27 @@
     "@typescript-eslint/eslint-plugin" "^5.12.1"
     "@typescript-eslint/parser" "^5.12.1"
 
-"@standardnotes/domain-events@^2.27.11":
-  version "2.27.11"
-  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.27.11.tgz#0675304c19660b4907c3371e80bf2f7969761546"
-  integrity sha512-fV4nEfayUHjEpTC+9rD5q7h5R318onA9HuqT8eR7HQId1ATGGDcIS0bUITPrlPyZ0pVKmMg8ox7Glya8WTyfwA==
+"@standardnotes/domain-events@^2.27.12":
+  version "2.27.12"
+  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.27.12.tgz#6eb8e484273e7e8b6bb1b40a791cfee24bd6d383"
+  integrity sha512-Sr4KASWYITVpSnE9a8awGyjqeQ9U0e0kpl1jgGYdbkRIWvcxs8bnYWOuwffmD2SfV7PeCbtpUXEyvYDVIsZijA==
   dependencies:
     "@standardnotes/auth" "^3.18.11"
-    "@standardnotes/features" "^1.38.0"
+    "@standardnotes/features" "^1.38.1"
 
-"@standardnotes/encryption@^1.4.10":
-  version "1.4.10"
-  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.4.10.tgz#ff5d5a884aae9a14fff7e3afe3772f41af1bb642"
-  integrity sha512-BH5brDoevoGEyNXEIV/D6G28Bn1zHxKed01aofqgronOgbZdVGXtxKr7j/EOfzareg7vhhUO2oA73aTU73dAOA==
+"@standardnotes/encryption@^1.4.12":
+  version "1.4.12"
+  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.4.12.tgz#098c9320a7b19aba44e0c7baa1fcd243120c2fef"
+  integrity sha512-DTW/CAlDDOimXwE8XN+V2R3sPXXQYzYnWZHs6WCD3NaLN41MAoG1j8cVuTKHHMP0hhaS2/refOllgt8Kf97mKQ==
   dependencies:
-    "@standardnotes/models" "^1.4.9"
-    "@standardnotes/responses" "^1.6.11"
-    "@standardnotes/services" "^1.9.11"
+    "@standardnotes/models" "^1.5.1"
+    "@standardnotes/responses" "^1.6.12"
+    "@standardnotes/services" "^1.9.13"
 
-"@standardnotes/features@^1.38.0":
-  version "1.38.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.38.0.tgz#ddd6817af1544374013fec0bb19f5dff4a11ae60"
-  integrity sha512-6a56WZTgbB1/IefF8ADWuOI9FPthP30BpJT+Dmu4TEG8SdEC4QFCogAfRPwJ2z8Kh8xYeWuRZDr+CYsm20vqWg==
+"@standardnotes/features@^1.38.1":
+  version "1.38.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.38.1.tgz#5ee52ab91f02be2d2762dcee49db17d1040a7bf8"
+  integrity sha512-rSQ8ClG7os3w9AddP0VZbvkIpEHCKGzCLiHum0D90ogjFFXgr8+EvonOfFQEc3pa9hdyq1fofhedNQRJsdo14Q==
   dependencies:
     "@standardnotes/auth" "^3.18.11"
     "@standardnotes/common" "^1.19.6"
@@ -2483,32 +2483,32 @@
     "@standardnotes/common" "^1.19.6"
     "@standardnotes/utils" "^1.6.2"
 
-"@standardnotes/models@^1.4.9":
-  version "1.4.9"
-  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.4.9.tgz#50b0055a4e149b948068405c69beeda1859a378d"
-  integrity sha512-34iv7Z+WiJIoOYcld8RPm4suexK0cuW2drtYdtl/10y/hJC+rXSlVIUVMj7ckPb9g4cuxyI+WVfZ1ebx8+1n0g==
+"@standardnotes/models@^1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.5.1.tgz#a522c715c74c63e58fc4182e69baad46548dbfba"
+  integrity sha512-dOVnT5HCAjU3i4KqTeu05h5d+LDp8nteam6xb9V75XbA/UT9TMC3zwE+yEYpvWC4iKSbdPQvIuuvp8hXFyOnbA==
   dependencies:
-    "@standardnotes/features" "^1.38.0"
-    "@standardnotes/responses" "^1.6.11"
+    "@standardnotes/features" "^1.38.1"
+    "@standardnotes/responses" "^1.6.12"
     "@standardnotes/utils" "^1.6.2"
 
-"@standardnotes/responses@^1.6.11":
-  version "1.6.11"
-  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.6.11.tgz#78adf45af580a0b5ecc6f2a6b5b80c286107c36c"
-  integrity sha512-laQfkpTZMHKghyE2Vnc2lt9QEnEFpwEi2j0GezJ0QjbjKdxIyzGUMHMFCZREvQd9Z3PiVuwPXW49DGyGJZHAfQ==
+"@standardnotes/responses@^1.6.12":
+  version "1.6.12"
+  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.6.12.tgz#99090e407f10d430cf5bea548a9314472c00a1c7"
+  integrity sha512-WqPcxI7BeuSwbemI5Hag6tK0Rzf/OxyX1aeRWGXWrQOQJjv4tpyUSjT0gdutsslqkIehI3oLG+B9DLUNe6Wddg==
   dependencies:
     "@standardnotes/auth" "^3.18.11"
     "@standardnotes/common" "^1.19.6"
-    "@standardnotes/features" "^1.38.0"
+    "@standardnotes/features" "^1.38.1"
 
-"@standardnotes/services@^1.9.11":
-  version "1.9.11"
-  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.9.11.tgz#b35e60098a8196a58d0a0547a61fc742b2895efc"
-  integrity sha512-UWGbwS7uvxKOpLFb+HfICe2oqY6oNoqfk4A5WzrLiUsfELvh8VtaahoE9KoGn/4QSzrrYBFG9jXk2CtA5IGEgg==
+"@standardnotes/services@^1.9.13":
+  version "1.9.13"
+  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.9.13.tgz#4af36863626cd70be976785f85dc76cb3fd8f3d8"
+  integrity sha512-UWrg8ThBUl3JvLRFc3tEPXstJFQtnLAVHOfRppUL8MZZ+U6sYmKRpQp9+pX0Wdx0SQwQuuRyFKtSw9JFlLvrnA==
   dependencies:
     "@standardnotes/common" "^1.19.6"
-    "@standardnotes/models" "^1.4.9"
-    "@standardnotes/responses" "^1.6.11"
+    "@standardnotes/models" "^1.5.1"
+    "@standardnotes/responses" "^1.6.12"
     "@standardnotes/utils" "^1.6.2"
 
 "@standardnotes/settings@^1.14.1":
@@ -2530,20 +2530,20 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.100.0":
-  version "2.100.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.100.0.tgz#d62c7f0cd17a50b4f3d9e349c7c00a3f6de1192c"
-  integrity sha512-4pnmAJJ3mDDmLWx8ChR3qEKHcsKB4M1+/o1Nxj8rYOdOnVzvBhzqSERKUyUabNvDOcmo0RkAIDeHgIIRjkJtiQ==
+"@standardnotes/snjs@2.102.0":
+  version "2.102.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.102.0.tgz#756ad160395c87d791399d0d2784ae9b2853d07e"
+  integrity sha512-+cPyYW6MUex1D8MeX0hrDzKywnuGZj8le7varDbhs3zT++f7UWt6pmu7SEXx71A75rP5u5oDtdaOxqSyBNHOlg==
   dependencies:
     "@standardnotes/auth" "^3.18.11"
     "@standardnotes/common" "^1.19.6"
-    "@standardnotes/domain-events" "^2.27.11"
-    "@standardnotes/encryption" "^1.4.10"
-    "@standardnotes/features" "^1.38.0"
+    "@standardnotes/domain-events" "^2.27.12"
+    "@standardnotes/encryption" "^1.4.12"
+    "@standardnotes/features" "^1.38.1"
     "@standardnotes/filepicker" "^1.13.3"
-    "@standardnotes/models" "^1.4.9"
-    "@standardnotes/responses" "^1.6.11"
-    "@standardnotes/services" "^1.9.11"
+    "@standardnotes/models" "^1.5.1"
+    "@standardnotes/responses" "^1.6.12"
+    "@standardnotes/services" "^1.9.13"
     "@standardnotes/settings" "^1.14.1"
     "@standardnotes/sncrypto-common" "^1.7.7"
     "@standardnotes/utils" "^1.6.2"

From e7fb9b67f87f94e08e279db11f920d5ae51a2030 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Wed, 27 Apr 2022 20:29:12 +0530
Subject: [PATCH 053/102] fix: duplicate files quota calls in preferences
 (#1006)

---
 .../Components/Preferences/Panes/Account/Files.tsx  | 13 +++----------
 .../Components/Preferences/Panes/Account/index.tsx  |  4 +++-
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/Files.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/Files.tsx
index 7861fda8c..a38d97c26 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Account/Files.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/Files.tsx
@@ -1,22 +1,15 @@
 import { WebApplication } from '@/UIModels/Application'
-import { AppState } from '@/UIModels/AppState'
 import { formatSizeToReadableString } from '@standardnotes/filepicker'
 import { SubscriptionSettingName } from '@standardnotes/snjs'
-import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
 import { useEffect, useState } from 'preact/hooks'
 import { PreferencesGroup, PreferencesSegment, Subtitle, Title } from '../../PreferencesComponents'
 
 type Props = {
   application: WebApplication
-  appState: AppState
 }
 
-export const FilesSection: FunctionComponent<Props> = observer(({ application, appState }) => {
-  if (!application.getUser() || !appState.features.isEntitledToFiles) {
-    return null
-  }
-
+export const FilesSection: FunctionComponent<Props> = ({ application }) => {
   const [isLoading, setIsLoading] = useState(true)
   const [filesQuotaUsed, setFilesQuotaUsed] = useState<number>(0)
   const [filesQuotaTotal, setFilesQuotaTotal] = useState<number>(0)
@@ -41,7 +34,7 @@ export const FilesSection: FunctionComponent<Props> = observer(({ application, a
     }
 
     getFilesQuota().catch(console.error)
-  })
+  }, [application.settings])
 
   return (
     <PreferencesGroup>
@@ -69,4 +62,4 @@ export const FilesSection: FunctionComponent<Props> = observer(({ application, a
       </PreferencesSegment>
     </PreferencesGroup>
   )
-})
+}
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx
index 4af12d87b..74b7ccd6d 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx
@@ -25,7 +25,9 @@ export const AccountPreferences = observer(({ application, appState }: Props) =>
       </>
     )}
     <Subscription application={application} appState={appState} />
-    <FilesSection application={application} appState={appState} />
+    {application.hasAccount() && appState.features.isEntitledToFiles && (
+      <FilesSection application={application} />
+    )}
     <SignOutWrapper application={application} appState={appState} />
   </PreferencesPane>
 ))

From 96be0d578d4233f0919020f0847a4203ab66e697 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Wed, 27 Apr 2022 22:53:42 +0530
Subject: [PATCH 054/102] feat: preview next/prev files using arrow keys
 (#1004)

---
 .../AttachedFilesButton.tsx                   | 39 ++++++-----
 .../AttachedFilesPopover.tsx                  | 36 +++-------
 .../Components/Files/FilePreviewModal.tsx     | 66 +++++++++++++++++--
 .../Files/FilePreviewModalProvider.tsx        | 26 +++++---
 app/assets/javascripts/Services/IOService.ts  |  2 +
 5 files changed, 111 insertions(+), 58 deletions(-)

diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
index bbc75a456..ec3f17918 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
@@ -60,23 +60,29 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
     const containerRef = useRef<HTMLDivElement>(null)
     const [closeOnBlur, keepMenuOpen] = useCloseOnBlur(containerRef, setOpen)
 
-    const [attachedFilesCount, setAttachedFilesCount] = useState(
-      note ? application.items.getFilesForNote(note).length : 0,
-    )
-
-    const reloadAttachedFilesCount = useCallback(() => {
-      setAttachedFilesCount(note ? application.items.getFilesForNote(note).length : 0)
-    }, [application.items, note])
+    const [currentTab, setCurrentTab] = useState(PopoverTabs.AttachedFiles)
+    const [allFiles, setAllFiles] = useState<SNFile[]>([])
+    const [attachedFiles, setAttachedFiles] = useState<SNFile[]>([])
+    const attachedFilesCount = attachedFiles.length
 
     useEffect(() => {
       const unregisterFileStream = application.streamItems(ContentType.File, () => {
-        reloadAttachedFilesCount()
+        setAllFiles(
+          application.items
+            .getItems<SNFile>(ContentType.File)
+            .sort((a, b) => (a.created_at < b.created_at ? 1 : -1)),
+        )
+        setAttachedFiles(
+          application.items
+            .getFilesForNote(note)
+            .sort((a, b) => (a.created_at < b.created_at ? 1 : -1)),
+        )
       })
 
       return () => {
         unregisterFileStream()
       }
-    }, [application, reloadAttachedFilesCount])
+    }, [application, note])
 
     const toggleAttachedFilesMenu = useCallback(async () => {
       if (!appState.features.isEntitledToFiles) {
@@ -213,7 +219,10 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
           await renameFile(file, action.payload.name)
           break
         case PopoverFileItemActionType.PreviewFile:
-          filePreviewModal.activate(file)
+          filePreviewModal.activate(
+            file,
+            currentTab === PopoverTabs.AllFiles ? allFiles : attachedFiles,
+          )
           break
       }
 
@@ -228,7 +237,6 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
     }
 
     const [isDraggingFiles, setIsDraggingFiles] = useState(false)
-    const [currentTab, setCurrentTab] = useState(PopoverTabs.AttachedFiles)
     const dragCounter = useRef(0)
 
     const handleDrag = (event: DragEvent) => {
@@ -373,12 +381,13 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
               <AttachedFilesPopover
                 application={application}
                 appState={appState}
-                note={note}
-                handleFileAction={handleFileAction}
-                currentTab={currentTab}
+                attachedFiles={attachedFiles}
+                allFiles={allFiles}
                 closeOnBlur={closeOnBlur}
-                setCurrentTab={setCurrentTab}
+                currentTab={currentTab}
+                handleFileAction={handleFileAction}
                 isDraggingFiles={isDraggingFiles}
+                setCurrentTab={setCurrentTab}
               />
             )}
           </DisclosurePanel>
diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
index f363a8865..d5e9d9bed 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
@@ -1,11 +1,11 @@
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants'
 import { WebApplication } from '@/UIModels/Application'
 import { AppState } from '@/UIModels/AppState'
-import { ContentType, SNFile, SNNote } from '@standardnotes/snjs'
+import { SNFile } from '@standardnotes/snjs'
 import { FilesIllustration } from '@standardnotes/stylekit'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
-import { StateUpdater, useEffect, useRef, useState } from 'preact/hooks'
+import { StateUpdater, useRef, useState } from 'preact/hooks'
 import { Button } from '@/Components/Button/Button'
 import { Icon } from '@/Components/Icon'
 import { PopoverFileItem } from './PopoverFileItem'
@@ -19,11 +19,12 @@ export enum PopoverTabs {
 type Props = {
   application: WebApplication
   appState: AppState
-  currentTab: PopoverTabs
+  allFiles: SNFile[]
+  attachedFiles: SNFile[]
   closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
+  currentTab: PopoverTabs
   handleFileAction: (action: PopoverFileItemAction) => Promise<boolean>
   isDraggingFiles: boolean
-  note: SNNote
   setCurrentTab: StateUpdater<PopoverTabs>
 }
 
@@ -31,15 +32,14 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
   ({
     application,
     appState,
-    currentTab,
+    allFiles,
+    attachedFiles,
     closeOnBlur,
+    currentTab,
     handleFileAction,
     isDraggingFiles,
-    note,
     setCurrentTab,
   }) => {
-    const [attachedFiles, setAttachedFiles] = useState<SNFile[]>([])
-    const [allFiles, setAllFiles] = useState<SNFile[]>([])
     const [searchQuery, setSearchQuery] = useState('')
     const searchInputRef = useRef<HTMLInputElement>(null)
 
@@ -52,26 +52,6 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
           )
         : filesList
 
-    useEffect(() => {
-      const unregisterFileStream = application.streamItems(ContentType.File, () => {
-        setAttachedFiles(
-          application.items
-            .getFilesForNote(note)
-            .sort((a, b) => (a.created_at < b.created_at ? 1 : -1)),
-        )
-
-        setAllFiles(
-          application.items
-            .getItems(ContentType.File)
-            .sort((a, b) => (a.created_at < b.created_at ? 1 : -1)) as SNFile[],
-        )
-      })
-
-      return () => {
-        unregisterFileStream()
-      }
-    }, [application, note])
-
     const handleAttachFilesClick = async () => {
       const uploadedFiles = await appState.files.uploadNewFile()
       if (!uploadedFiles) {
diff --git a/app/assets/javascripts/Components/Files/FilePreviewModal.tsx b/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
index 3bc028301..13ee22c4c 100644
--- a/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
+++ b/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
@@ -11,18 +11,30 @@ import { Icon } from '@/Components/Icon'
 import { FilePreviewInfoPanel } from './FilePreviewInfoPanel'
 import { isFileTypePreviewable } from './isFilePreviewable'
 import { PreviewComponent } from './PreviewComponent'
+import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants'
+import { useFilePreviewModal } from './FilePreviewModalProvider'
+import { KeyboardKey } from '@/Services/IOService'
 
 type Props = {
   application: WebApplication
+  files: SNFile[]
   file: SNFile
   onDismiss: () => void
 }
 
-export const FilePreviewModal: FunctionComponent<Props> = ({ application, file, onDismiss }) => {
+export const FilePreviewModal: FunctionComponent<Props> = ({
+  application,
+  files,
+  file,
+  onDismiss,
+}) => {
+  const context = useFilePreviewModal()
+
   const [objectUrl, setObjectUrl] = useState<string>()
   const [isFilePreviewable, setIsFilePreviewable] = useState(false)
   const [isLoadingFile, setIsLoadingFile] = useState(true)
   const [showFileInfoPanel, setShowFileInfoPanel] = useState(false)
+  const currentFileIdRef = useRef<string>()
   const closeButtonRef = useRef<HTMLButtonElement>(null)
 
   const getObjectUrl = useCallback(async () => {
@@ -46,6 +58,10 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, file,
     }
   }, [application.files, file])
 
+  useEffect(() => {
+    setIsLoadingFile(true)
+  }, [file.uuid])
+
   useEffect(() => {
     const isPreviewable = isFileTypePreviewable(file.mimeType)
     setIsFilePreviewable(isPreviewable)
@@ -54,16 +70,48 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, file,
       setIsLoadingFile(false)
     }
 
-    if (!objectUrl && isPreviewable) {
+    if (currentFileIdRef.current !== file.uuid && isPreviewable) {
       getObjectUrl().catch(console.error)
     }
 
+    currentFileIdRef.current = file.uuid
+
     return () => {
       if (objectUrl) {
         URL.revokeObjectURL(objectUrl)
       }
     }
-  }, [file.mimeType, getObjectUrl, objectUrl])
+  }, [file, getObjectUrl, objectUrl])
+
+  const keyDownHandler = (event: KeyboardEvent) => {
+    if (event.key !== KeyboardKey.Left && event.key !== KeyboardKey.Right) {
+      return
+    }
+
+    event.preventDefault()
+
+    const currentFileIndex = files.findIndex((fileFromArray) => fileFromArray.uuid === file.uuid)
+
+    switch (event.key) {
+      case KeyboardKey.Left: {
+        const previousFileIndex =
+          currentFileIndex - 1 >= 0 ? currentFileIndex - 1 : files.length - 1
+        const previousFile = files[previousFileIndex]
+        if (previousFile) {
+          context.setCurrentFile(previousFile)
+        }
+        break
+      }
+      case KeyboardKey.Right: {
+        const nextFileIndex = currentFileIndex + 1 < files.length ? currentFileIndex + 1 : 0
+        const nextFile = files[nextFileIndex]
+        if (nextFile) {
+          context.setCurrentFile(nextFile)
+        }
+        break
+      }
+    }
+  }
 
   return (
     <DialogOverlay
@@ -81,7 +129,11 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, file,
           background: 'var(--sn-stylekit-background-color)',
         }}
       >
-        <div className="flex flex-shrink-0 justify-between items-center min-h-6 px-4 py-3 border-0 border-b-1 border-solid border-main">
+        <div
+          className="flex flex-shrink-0 justify-between items-center min-h-6 px-4 py-3 border-0 border-b-1 border-solid border-main focus:shadow-none"
+          tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
+          onKeyDown={keyDownHandler}
+        >
           <div className="flex items-center">
             <div className="w-6 h-6">
               {getFileIconComponent(
@@ -121,10 +173,10 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, file,
         </div>
         <div className="flex flex-grow min-h-0">
           <div className="flex flex-grow items-center justify-center relative max-w-full">
-            {objectUrl ? (
-              <PreviewComponent file={file} objectUrl={objectUrl} />
-            ) : isLoadingFile ? (
+            {isLoadingFile ? (
               <div className="sk-spinner w-5 h-5 spinner-info"></div>
+            ) : objectUrl ? (
+              <PreviewComponent file={file} objectUrl={objectUrl} />
             ) : (
               <div className="flex flex-col items-center">
                 <NoPreviewIllustration className="w-30 h-30 mb-4" />
diff --git a/app/assets/javascripts/Components/Files/FilePreviewModalProvider.tsx b/app/assets/javascripts/Components/Files/FilePreviewModalProvider.tsx
index 38d588b99..758c2b629 100644
--- a/app/assets/javascripts/Components/Files/FilePreviewModalProvider.tsx
+++ b/app/assets/javascripts/Components/Files/FilePreviewModalProvider.tsx
@@ -4,8 +4,11 @@ import { createContext, FunctionComponent } from 'preact'
 import { useContext, useState } from 'preact/hooks'
 import { FilePreviewModal } from './FilePreviewModal'
 
+type FilePreviewActivateFunction = (file: SNFile, files: SNFile[]) => void
+
 type FilePreviewModalContextData = {
-  activate: (file: SNFile) => void
+  activate: FilePreviewActivateFunction
+  setCurrentFile: (file: SNFile) => void
 }
 
 const FilePreviewModalContext = createContext<FilePreviewModalContextData | null>(null)
@@ -24,10 +27,12 @@ export const FilePreviewModalProvider: FunctionComponent<{
   application: WebApplication
 }> = ({ application, children }) => {
   const [isOpen, setIsOpen] = useState(false)
-  const [file, setFile] = useState<SNFile>()
+  const [currentFile, setCurrentFile] = useState<SNFile>()
+  const [files, setFiles] = useState<SNFile[]>([])
 
-  const activate = (file: SNFile) => {
-    setFile(file)
+  const activate: FilePreviewActivateFunction = (file, files) => {
+    setCurrentFile(file)
+    setFiles(files)
     setIsOpen(true)
   }
 
@@ -37,10 +42,15 @@ export const FilePreviewModalProvider: FunctionComponent<{
 
   return (
     <>
-      {isOpen && file && (
-        <FilePreviewModal application={application} file={file} onDismiss={close} />
-      )}
-      <FilePreviewModalContext.Provider value={{ activate }}>
+      <FilePreviewModalContext.Provider value={{ activate, setCurrentFile }}>
+        {isOpen && currentFile && (
+          <FilePreviewModal
+            application={application}
+            files={files}
+            file={currentFile}
+            onDismiss={close}
+          />
+        )}
         {children}
       </FilePreviewModalContext.Provider>
     </>
diff --git a/app/assets/javascripts/Services/IOService.ts b/app/assets/javascripts/Services/IOService.ts
index f5fadee2f..f976f672b 100644
--- a/app/assets/javascripts/Services/IOService.ts
+++ b/app/assets/javascripts/Services/IOService.ts
@@ -5,6 +5,8 @@ export enum KeyboardKey {
   Backspace = 'Backspace',
   Up = 'ArrowUp',
   Down = 'ArrowDown',
+  Left = 'ArrowLeft',
+  Right = 'ArrowRight',
   Enter = 'Enter',
   Escape = 'Escape',
   Home = 'Home',

From 99d83af3ba8d1bbe88dfed9027defb77ea0fe923 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Thu, 28 Apr 2022 00:49:27 +0530
Subject: [PATCH 055/102] feat: sort files by name (#1001)

---
 .../AttachedFilesButton.tsx                   | 46 +++++--------------
 .../AttachedFilesPopover.tsx                  | 12 ++---
 .../Components/Files/FilePreviewModal.tsx     | 14 ++----
 .../Files/FilePreviewModalProvider.tsx        |  7 +--
 .../Preferences/Panes/Account/index.tsx       |  4 +-
 .../Device/DesktopDeviceInterface.ts          |  4 +-
 .../Device/DesktopWebCommunication.ts         |  5 +-
 .../javascripts/Services/DesktopManager.ts    |  5 +-
 app/assets/javascripts/Services/IOService.ts  | 17 ++-----
 package.json                                  |  2 +-
 yarn.lock                                     | 44 +++++++++---------
 11 files changed, 52 insertions(+), 108 deletions(-)

diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
index ec3f17918..b4ced4d06 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
@@ -8,7 +8,7 @@ import { FunctionComponent } from 'preact'
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { Icon } from '@/Components/Icon'
 import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
-import { ChallengeReason, ContentType, SNFile } from '@standardnotes/snjs'
+import { ChallengeReason, CollectionSort, ContentType, SNFile } from '@standardnotes/snjs'
 import { confirmDialog } from '@/Services/AlertService'
 import { addToast, dismissToast, ToastType } from '@standardnotes/stylekit'
 import { StreamingFileReader } from '@standardnotes/filepicker'
@@ -39,8 +39,7 @@ const removeDragOverlay = () => {
 }
 
 const isHandlingFileDrag = (event: DragEvent) =>
-  event.dataTransfer?.items &&
-  Array.from(event.dataTransfer.items).some((item) => item.kind === 'file')
+  event.dataTransfer?.items && Array.from(event.dataTransfer.items).some((item) => item.kind === 'file')
 
 export const AttachedFilesButton: FunctionComponent<Props> = observer(
   ({ application, appState, onClickPreprocessing }) => {
@@ -66,17 +65,11 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
     const attachedFilesCount = attachedFiles.length
 
     useEffect(() => {
+      application.items.setDisplayOptions(ContentType.File, CollectionSort.Title, 'dsc')
+
       const unregisterFileStream = application.streamItems(ContentType.File, () => {
-        setAllFiles(
-          application.items
-            .getItems<SNFile>(ContentType.File)
-            .sort((a, b) => (a.created_at < b.created_at ? 1 : -1)),
-        )
-        setAttachedFiles(
-          application.items
-            .getFilesForNote(note)
-            .sort((a, b) => (a.created_at < b.created_at ? 1 : -1)),
-        )
+        setAllFiles(application.items.getDisplayableItems<SNFile>(ContentType.File))
+        setAttachedFiles(application.items.getFilesForNote(note))
       })
 
       return () => {
@@ -162,14 +155,8 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
       return isProtected
     }
 
-    const authorizeProtectedActionForFile = async (
-      file: SNFile,
-      challengeReason: ChallengeReason,
-    ) => {
-      const authorizedFiles = await application.protections.authorizeProtectedActionForFiles(
-        [file],
-        challengeReason,
-      )
+    const authorizeProtectedActionForFile = async (file: SNFile, challengeReason: ChallengeReason) => {
+      const authorizedFiles = await application.protections.authorizeProtectedActionForFiles([file], challengeReason)
       const isAuthorized = authorizedFiles.length > 0 && authorizedFiles.includes(file)
       return isAuthorized
     }
@@ -179,16 +166,12 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
     }
 
     const handleFileAction = async (action: PopoverFileItemAction) => {
-      const file =
-        action.type !== PopoverFileItemActionType.RenameFile ? action.payload : action.payload.file
+      const file = action.type !== PopoverFileItemActionType.RenameFile ? action.payload : action.payload.file
       let isAuthorizedForAction = true
 
       if (file.protected && action.type !== PopoverFileItemActionType.ToggleFileProtection) {
         keepMenuOpen(true)
-        isAuthorizedForAction = await authorizeProtectedActionForFile(
-          file,
-          ChallengeReason.AccessProtectedFile,
-        )
+        isAuthorizedForAction = await authorizeProtectedActionForFile(file, ChallengeReason.AccessProtectedFile)
         keepMenuOpen(false)
         buttonRef.current?.focus()
       }
@@ -219,10 +202,7 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
           await renameFile(file, action.payload.name)
           break
         case PopoverFileItemActionType.PreviewFile:
-          filePreviewModal.activate(
-            file,
-            currentTab === PopoverTabs.AllFiles ? allFiles : attachedFiles,
-          )
+          filePreviewModal.activate(file, currentTab === PopoverTabs.AllFiles ? allFiles : attachedFiles)
           break
       }
 
@@ -353,9 +333,7 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
               }
             }}
             ref={buttonRef}
-            className={`sn-icon-button border-contrast ${
-              attachedFilesCount > 0 ? 'py-1 px-3' : ''
-            }`}
+            className={`sn-icon-button border-contrast ${attachedFilesCount > 0 ? 'py-1 px-3' : ''}`}
             onBlur={closeOnBlur}
           >
             <VisuallyHidden>Attached files</VisuallyHidden>
diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
index d5e9d9bed..15221a5ad 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
@@ -47,9 +47,7 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
 
     const filteredList =
       searchQuery.length > 0
-        ? filesList.filter(
-            (file) => file.name.toLowerCase().indexOf(searchQuery.toLowerCase()) !== -1,
-          )
+        ? filesList.filter((file) => file.name.toLowerCase().indexOf(searchQuery.toLowerCase()) !== -1)
         : filesList
 
     const handleAttachFilesClick = async () => {
@@ -78,9 +76,7 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
         <div className="flex border-0 border-b-1 border-solid border-main">
           <button
             className={`bg-default border-0 cursor-pointer px-3 py-2.5 relative focus:bg-info-backdrop focus:shadow-bottom ${
-              currentTab === PopoverTabs.AttachedFiles
-                ? 'color-info font-medium shadow-bottom'
-                : 'color-text'
+              currentTab === PopoverTabs.AttachedFiles ? 'color-info font-medium shadow-bottom' : 'color-text'
             }`}
             onClick={() => {
               setCurrentTab(PopoverTabs.AttachedFiles)
@@ -91,9 +87,7 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
           </button>
           <button
             className={`bg-default border-0 cursor-pointer px-3 py-2.5 relative focus:bg-info-backdrop focus:shadow-bottom ${
-              currentTab === PopoverTabs.AllFiles
-                ? 'color-info font-medium shadow-bottom'
-                : 'color-text'
+              currentTab === PopoverTabs.AllFiles ? 'color-info font-medium shadow-bottom' : 'color-text'
             }`}
             onClick={() => {
               setCurrentTab(PopoverTabs.AllFiles)
diff --git a/app/assets/javascripts/Components/Files/FilePreviewModal.tsx b/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
index 13ee22c4c..18abf9dd6 100644
--- a/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
+++ b/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
@@ -22,12 +22,7 @@ type Props = {
   onDismiss: () => void
 }
 
-export const FilePreviewModal: FunctionComponent<Props> = ({
-  application,
-  files,
-  file,
-  onDismiss,
-}) => {
+export const FilePreviewModal: FunctionComponent<Props> = ({ application, files, file, onDismiss }) => {
   const context = useFilePreviewModal()
 
   const [objectUrl, setObjectUrl] = useState<string>()
@@ -94,8 +89,7 @@ export const FilePreviewModal: FunctionComponent<Props> = ({
 
     switch (event.key) {
       case KeyboardKey.Left: {
-        const previousFileIndex =
-          currentFileIndex - 1 >= 0 ? currentFileIndex - 1 : files.length - 1
+        const previousFileIndex = currentFileIndex - 1 >= 0 ? currentFileIndex - 1 : files.length - 1
         const previousFile = files[previousFileIndex]
         if (previousFile) {
           context.setCurrentFile(previousFile)
@@ -184,8 +178,8 @@ export const FilePreviewModal: FunctionComponent<Props> = ({
                 {isFilePreviewable ? (
                   <>
                     <div className="text-sm text-center color-grey-0 mb-4 max-w-35ch">
-                      There was an error loading the file. Try again, or download the file and open
-                      it using another application.
+                      There was an error loading the file. Try again, or download the file and open it using another
+                      application.
                     </div>
                     <div className="flex items-center">
                       <Button
diff --git a/app/assets/javascripts/Components/Files/FilePreviewModalProvider.tsx b/app/assets/javascripts/Components/Files/FilePreviewModalProvider.tsx
index 758c2b629..92760bdb0 100644
--- a/app/assets/javascripts/Components/Files/FilePreviewModalProvider.tsx
+++ b/app/assets/javascripts/Components/Files/FilePreviewModalProvider.tsx
@@ -44,12 +44,7 @@ export const FilePreviewModalProvider: FunctionComponent<{
     <>
       <FilePreviewModalContext.Provider value={{ activate, setCurrentFile }}>
         {isOpen && currentFile && (
-          <FilePreviewModal
-            application={application}
-            files={files}
-            file={currentFile}
-            onDismiss={close}
-          />
+          <FilePreviewModal application={application} files={files} file={currentFile} onDismiss={close} />
         )}
         {children}
       </FilePreviewModalContext.Provider>
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx
index 74b7ccd6d..0f9f8fefe 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx
@@ -25,9 +25,7 @@ export const AccountPreferences = observer(({ application, appState }: Props) =>
       </>
     )}
     <Subscription application={application} appState={appState} />
-    {application.hasAccount() && appState.features.isEntitledToFiles && (
-      <FilesSection application={application} />
-    )}
+    {application.hasAccount() && appState.features.isEntitledToFiles && <FilesSection application={application} />}
     <SignOutWrapper application={application} appState={appState} />
   </PreferencesPane>
 ))
diff --git a/app/assets/javascripts/Device/DesktopDeviceInterface.ts b/app/assets/javascripts/Device/DesktopDeviceInterface.ts
index 7d57d2d80..c36d12952 100644
--- a/app/assets/javascripts/Device/DesktopDeviceInterface.ts
+++ b/app/assets/javascripts/Device/DesktopDeviceInterface.ts
@@ -6,8 +6,6 @@ export function isDesktopDevice(x: DeviceInterface): x is DesktopDeviceInterface
   return x.environment === Environment.Desktop
 }
 
-export interface DesktopDeviceInterface
-  extends WebOrDesktopDeviceInterface,
-    WebClientRequiresDesktopMethods {
+export interface DesktopDeviceInterface extends WebOrDesktopDeviceInterface, WebClientRequiresDesktopMethods {
   environment: Environment.Desktop
 }
diff --git a/app/assets/javascripts/Device/DesktopWebCommunication.ts b/app/assets/javascripts/Device/DesktopWebCommunication.ts
index b9bc74ddd..47e17af72 100644
--- a/app/assets/javascripts/Device/DesktopWebCommunication.ts
+++ b/app/assets/javascripts/Device/DesktopWebCommunication.ts
@@ -32,10 +32,7 @@ export interface DesktopClientRequiresWebMethods {
 
   windowLostFocus(): void
 
-  onComponentInstallationComplete(
-    componentData: DecryptedTransferPayload,
-    error: unknown,
-  ): Promise<void>
+  onComponentInstallationComplete(componentData: DecryptedTransferPayload, error: unknown): Promise<void>
 
   requestBackupFile(): Promise<string | undefined>
 
diff --git a/app/assets/javascripts/Services/DesktopManager.ts b/app/assets/javascripts/Services/DesktopManager.ts
index 5bc052b25..ecdf84855 100644
--- a/app/assets/javascripts/Services/DesktopManager.ts
+++ b/app/assets/javascripts/Services/DesktopManager.ts
@@ -113,10 +113,7 @@ export class DesktopManager
     this.webApplication.notifyWebEvent(WebAppEvent.DesktopWindowLostFocus)
   }
 
-  async onComponentInstallationComplete(
-    componentData: DecryptedTransferPayload<ComponentContent>,
-    error: unknown,
-  ) {
+  async onComponentInstallationComplete(componentData: DecryptedTransferPayload<ComponentContent>, error: unknown) {
     const component = this.application.items.findItem(componentData.uuid)
     if (!component) {
       return
diff --git a/app/assets/javascripts/Services/IOService.ts b/app/assets/javascripts/Services/IOService.ts
index f976f672b..9ee0660ba 100644
--- a/app/assets/javascripts/Services/IOService.ts
+++ b/app/assets/javascripts/Services/IOService.ts
@@ -129,14 +129,10 @@ export class IOService {
       // For a modifier like ctrlKey, must check both event.ctrlKey and event.key.
       // That's because on keyup, event.ctrlKey would be false, but event.key == Control would be true.
       const matches =
-        ((event.ctrlKey || event.key === KeyboardModifier.Ctrl) &&
-          modifier === KeyboardModifier.Ctrl) ||
-        ((event.metaKey || event.key === KeyboardModifier.Meta) &&
-          modifier === KeyboardModifier.Meta) ||
-        ((event.altKey || event.key === KeyboardModifier.Alt) &&
-          modifier === KeyboardModifier.Alt) ||
-        ((event.shiftKey || event.key === KeyboardModifier.Shift) &&
-          modifier === KeyboardModifier.Shift)
+        ((event.ctrlKey || event.key === KeyboardModifier.Ctrl) && modifier === KeyboardModifier.Ctrl) ||
+        ((event.metaKey || event.key === KeyboardModifier.Meta) && modifier === KeyboardModifier.Meta) ||
+        ((event.altKey || event.key === KeyboardModifier.Alt) && modifier === KeyboardModifier.Alt) ||
+        ((event.shiftKey || event.key === KeyboardModifier.Shift) && modifier === KeyboardModifier.Shift)
 
       return matches
     })
@@ -190,10 +186,7 @@ export class IOService {
         continue
       }
 
-      if (
-        observer.key &&
-        this.eventMatchesKeyAndModifiers(event, observer.key, observer.modifiers)
-      ) {
+      if (observer.key && this.eventMatchesKeyAndModifiers(event, observer.key, observer.modifiers)) {
         const callback = keyEvent === KeyboardKeyEvent.Down ? observer.onKeyDown : observer.onKeyUp
         if (callback) {
           callback(event)
diff --git a/package.json b/package.json
index 07ec8d827..cd9754b50 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
     "@standardnotes/components": "1.7.15",
     "@standardnotes/filepicker": "1.13.3",
     "@standardnotes/sncrypto-web": "1.8.4",
-    "@standardnotes/snjs": "2.102.0",
+    "@standardnotes/snjs": "2.103.0",
     "@standardnotes/stylekit": "5.23.0",
     "@zip.js/zip.js": "^2.4.10",
     "mobx": "^6.5.0",
diff --git a/yarn.lock b/yarn.lock
index 8a94953f1..778c5c69b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2458,14 +2458,14 @@
     "@standardnotes/auth" "^3.18.11"
     "@standardnotes/features" "^1.38.1"
 
-"@standardnotes/encryption@^1.4.12":
-  version "1.4.12"
-  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.4.12.tgz#098c9320a7b19aba44e0c7baa1fcd243120c2fef"
-  integrity sha512-DTW/CAlDDOimXwE8XN+V2R3sPXXQYzYnWZHs6WCD3NaLN41MAoG1j8cVuTKHHMP0hhaS2/refOllgt8Kf97mKQ==
+"@standardnotes/encryption@^1.4.13":
+  version "1.4.13"
+  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.4.13.tgz#056880bd82f2dcb5ca6bb2e38650b1f6004db35c"
+  integrity sha512-0AXjs15UKKjTEIyZTzTqny5yd/5lVGxZOtxAkO8/z8Qx1lK/J3KTUlWz2h0JBsRyA4PaTyLSNVKoF51mE8Bd1w==
   dependencies:
-    "@standardnotes/models" "^1.5.1"
+    "@standardnotes/models" "^1.6.0"
     "@standardnotes/responses" "^1.6.12"
-    "@standardnotes/services" "^1.9.13"
+    "@standardnotes/services" "^1.9.14"
 
 "@standardnotes/features@^1.38.1":
   version "1.38.1"
@@ -2483,10 +2483,10 @@
     "@standardnotes/common" "^1.19.6"
     "@standardnotes/utils" "^1.6.2"
 
-"@standardnotes/models@^1.5.1":
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.5.1.tgz#a522c715c74c63e58fc4182e69baad46548dbfba"
-  integrity sha512-dOVnT5HCAjU3i4KqTeu05h5d+LDp8nteam6xb9V75XbA/UT9TMC3zwE+yEYpvWC4iKSbdPQvIuuvp8hXFyOnbA==
+"@standardnotes/models@^1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.6.0.tgz#63cab950b2e533bbe3feab1fad8deddc51c66ae9"
+  integrity sha512-tO7YpRQXHsJkF06BNxOwI89Rhk5G3thkcfv6/dKaxG274F91XYBzoFGaRvs3EczEKDfqkOyb1H7wM02T8LXIvw==
   dependencies:
     "@standardnotes/features" "^1.38.1"
     "@standardnotes/responses" "^1.6.12"
@@ -2501,13 +2501,13 @@
     "@standardnotes/common" "^1.19.6"
     "@standardnotes/features" "^1.38.1"
 
-"@standardnotes/services@^1.9.13":
-  version "1.9.13"
-  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.9.13.tgz#4af36863626cd70be976785f85dc76cb3fd8f3d8"
-  integrity sha512-UWrg8ThBUl3JvLRFc3tEPXstJFQtnLAVHOfRppUL8MZZ+U6sYmKRpQp9+pX0Wdx0SQwQuuRyFKtSw9JFlLvrnA==
+"@standardnotes/services@^1.9.14":
+  version "1.9.14"
+  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.9.14.tgz#6bc692ce58c2db3573474c7efd44b3586a59d52e"
+  integrity sha512-9Z62AP+zcOpmQfRiOFYUZnYIsHgTVsV6x3DcvE800xvBkQkHbkx5VeeDzV9r06iJzIl4f2BGvss3rjj3PC/R3Q==
   dependencies:
     "@standardnotes/common" "^1.19.6"
-    "@standardnotes/models" "^1.5.1"
+    "@standardnotes/models" "^1.6.0"
     "@standardnotes/responses" "^1.6.12"
     "@standardnotes/utils" "^1.6.2"
 
@@ -2530,20 +2530,20 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.102.0":
-  version "2.102.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.102.0.tgz#756ad160395c87d791399d0d2784ae9b2853d07e"
-  integrity sha512-+cPyYW6MUex1D8MeX0hrDzKywnuGZj8le7varDbhs3zT++f7UWt6pmu7SEXx71A75rP5u5oDtdaOxqSyBNHOlg==
+"@standardnotes/snjs@2.103.0":
+  version "2.103.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.103.0.tgz#708d39780b685b9e27478cb70900d71e89d6ec57"
+  integrity sha512-ak89W+ShM2kNxlW+eMA86AgjGGMUkyy+4zOa5G0KWdQJEHcevFnLVyn4ZPhvywxJWAnNZi0gGEQFuLd5IunyLQ==
   dependencies:
     "@standardnotes/auth" "^3.18.11"
     "@standardnotes/common" "^1.19.6"
     "@standardnotes/domain-events" "^2.27.12"
-    "@standardnotes/encryption" "^1.4.12"
+    "@standardnotes/encryption" "^1.4.13"
     "@standardnotes/features" "^1.38.1"
     "@standardnotes/filepicker" "^1.13.3"
-    "@standardnotes/models" "^1.5.1"
+    "@standardnotes/models" "^1.6.0"
     "@standardnotes/responses" "^1.6.12"
-    "@standardnotes/services" "^1.9.13"
+    "@standardnotes/services" "^1.9.14"
     "@standardnotes/settings" "^1.14.1"
     "@standardnotes/sncrypto-common" "^1.7.7"
     "@standardnotes/utils" "^1.6.2"

From c2adf74ad2cda0198453c0cd4b33360827ebfaf8 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Mon, 2 May 2022 13:08:28 -0500
Subject: [PATCH 056/102] chore: upgrade snjs deps

---
 app/assets/javascripts/Database.ts            |  26 ++-
 .../javascripts/Device/WebOrDesktopDevice.ts  |  16 +-
 .../javascripts/Services/AlertService.ts      |   4 +-
 .../javascripts/UIModels/Application.ts       |   4 +-
 package.json                                  |   8 +-
 yarn.lock                                     | 152 ++++++++++--------
 6 files changed, 126 insertions(+), 84 deletions(-)

diff --git a/app/assets/javascripts/Database.ts b/app/assets/javascripts/Database.ts
index 17239b8bf..640c0ee95 100644
--- a/app/assets/javascripts/Database.ts
+++ b/app/assets/javascripts/Database.ts
@@ -1,4 +1,4 @@
-import { SNAlertService } from '@standardnotes/snjs'
+import { isString, AlertService } from '@standardnotes/snjs'
 
 const STORE_NAME = 'items'
 const READ_WRITE = 'readwrite'
@@ -19,7 +19,7 @@ export class Database {
   private locked = true
   private db?: IDBDatabase
 
-  constructor(public databaseName: string, private alertService: SNAlertService) {}
+  constructor(public databaseName: string, private alertService: AlertService) {}
 
   public deinit() {
     ;(this.alertService as any) = undefined
@@ -113,6 +113,28 @@ export class Database {
     })
   }
 
+  public async getAllKeys(): Promise<string[]> {
+    const db = (await this.openDatabase()) as IDBDatabase
+
+    return new Promise((resolve) => {
+      const objectStore = db.transaction(STORE_NAME).objectStore(STORE_NAME)
+      const getAllKeysRequest = objectStore.getAllKeys()
+      getAllKeysRequest.onsuccess = function () {
+        const result = getAllKeysRequest.result
+
+        const strings = result.map((key) => {
+          if (isString(key)) {
+            return key
+          } else {
+            return JSON.stringify(key)
+          }
+        })
+
+        resolve(strings)
+      }
+    })
+  }
+
   public async savePayload(payload: any): Promise<void> {
     return this.savePayloads([payload])
   }
diff --git a/app/assets/javascripts/Device/WebOrDesktopDevice.ts b/app/assets/javascripts/Device/WebOrDesktopDevice.ts
index 5279ebafc..1adaf0556 100644
--- a/app/assets/javascripts/Device/WebOrDesktopDevice.ts
+++ b/app/assets/javascripts/Device/WebOrDesktopDevice.ts
@@ -6,6 +6,7 @@ import {
   RawKeychainValue,
   TransferPayload,
   NamespacedRootKeyInKeychain,
+  extendArray,
 } from '@standardnotes/snjs'
 import { Database } from '../Database'
 import { WebOrDesktopDeviceInterface } from './WebOrDesktopDeviceInterface'
@@ -126,10 +127,17 @@ export abstract class WebOrDesktopDevice implements WebOrDesktopDeviceInterface
     return keychain[identifier]
   }
 
-  async setNamespacedKeychainValue(
-    value: NamespacedRootKeyInKeychain,
-    identifier: ApplicationIdentifier,
-  ) {
+  async getDatabaseKeys(): Promise<string[]> {
+    const keys: string[] = []
+
+    for (const database of this.databases) {
+      extendArray(keys, await database.getAllKeys())
+    }
+
+    return keys
+  }
+
+  async setNamespacedKeychainValue(value: NamespacedRootKeyInKeychain, identifier: ApplicationIdentifier) {
     let keychain = await this.getKeychainValue()
 
     if (!keychain) {
diff --git a/app/assets/javascripts/Services/AlertService.ts b/app/assets/javascripts/Services/AlertService.ts
index a57152e6d..b436113fa 100644
--- a/app/assets/javascripts/Services/AlertService.ts
+++ b/app/assets/javascripts/Services/AlertService.ts
@@ -1,4 +1,4 @@
-import { SNAlertService, ButtonType, sanitizeHtmlString } from '@standardnotes/snjs'
+import { AlertService, ButtonType, sanitizeHtmlString } from '@standardnotes/snjs'
 import { SKAlert } from '@standardnotes/stylekit'
 
 /** @returns a promise resolving to true if the user confirmed, false if they canceled */
@@ -65,7 +65,7 @@ export function alertDialog({
   })
 }
 
-export class AlertService extends SNAlertService {
+export class WebAlertService extends AlertService {
   alert(text: string, title?: string, closeButtonText?: string) {
     return alertDialog({ text, title, closeButtonText })
   }
diff --git a/app/assets/javascripts/UIModels/Application.ts b/app/assets/javascripts/UIModels/Application.ts
index 1afa273fe..c02ac0b5e 100644
--- a/app/assets/javascripts/UIModels/Application.ts
+++ b/app/assets/javascripts/UIModels/Application.ts
@@ -1,5 +1,5 @@
 import { WebCrypto } from '@/Crypto'
-import { AlertService } from '@/Services/AlertService'
+import { WebAlertService } from '@/Services/AlertService'
 import { ArchiveManager } from '@/Services/ArchiveManager'
 import { AutolockService } from '@/Services/AutolockService'
 import { DesktopDeviceInterface, isDesktopDevice } from '@/Device/DesktopDeviceInterface'
@@ -56,7 +56,7 @@ export class WebApplication extends SNApplication {
       platform: platform,
       deviceInterface: deviceInterface,
       crypto: WebCrypto,
-      alertService: new AlertService(),
+      alertService: new WebAlertService(),
       identifier,
       defaultHost: defaultSyncServerHost,
       appVersion: deviceInterface.appVersion,
diff --git a/package.json b/package.json
index cd9754b50..8da16b0d3 100644
--- a/package.json
+++ b/package.json
@@ -70,10 +70,10 @@
     "@reach/tooltip": "^0.16.2",
     "@reach/visually-hidden": "^0.16.0",
     "@standardnotes/components": "1.7.15",
-    "@standardnotes/filepicker": "1.13.3",
-    "@standardnotes/sncrypto-web": "1.8.4",
-    "@standardnotes/snjs": "2.103.0",
-    "@standardnotes/stylekit": "5.23.0",
+    "@standardnotes/filepicker": "1.13.4",
+    "@standardnotes/sncrypto-web": "1.9.0",
+    "@standardnotes/snjs": "2.105.2",
+    "@standardnotes/stylekit": "5.24.1",
     "@zip.js/zip.js": "^2.4.10",
     "mobx": "^6.5.0",
     "mobx-react-lite": "^3.3.0",
diff --git a/yarn.lock b/yarn.lock
index 778c5c69b..1dc6fb8a2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2450,108 +2450,120 @@
     "@typescript-eslint/eslint-plugin" "^5.12.1"
     "@typescript-eslint/parser" "^5.12.1"
 
-"@standardnotes/domain-events@^2.27.12":
-  version "2.27.12"
-  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.27.12.tgz#6eb8e484273e7e8b6bb1b40a791cfee24bd6d383"
-  integrity sha512-Sr4KASWYITVpSnE9a8awGyjqeQ9U0e0kpl1jgGYdbkRIWvcxs8bnYWOuwffmD2SfV7PeCbtpUXEyvYDVIsZijA==
+"@standardnotes/domain-events@^2.27.13":
+  version "2.27.13"
+  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.27.13.tgz#ebe9d06b154fa8f40cbda6e4da507856f052f8d0"
+  integrity sha512-Cc+bDNtHFqLnNyr3freB9DmGWDVl1zrWPHHaEahfQyA8RnBkGrQ28xz5+0Q5lKLTsBjGppi7Py/VPD+QMvdNmg==
   dependencies:
     "@standardnotes/auth" "^3.18.11"
-    "@standardnotes/features" "^1.38.1"
+    "@standardnotes/features" "^1.39.0"
 
-"@standardnotes/encryption@^1.4.13":
-  version "1.4.13"
-  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.4.13.tgz#056880bd82f2dcb5ca6bb2e38650b1f6004db35c"
-  integrity sha512-0AXjs15UKKjTEIyZTzTqny5yd/5lVGxZOtxAkO8/z8Qx1lK/J3KTUlWz2h0JBsRyA4PaTyLSNVKoF51mE8Bd1w==
+"@standardnotes/encryption@^1.6.1":
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.6.1.tgz#51d1d69a1c45e95d5486adfa624af4766fbb94a8"
+  integrity sha512-qKg5An1ZHY+gDHb96T8zEIQl5TcRaZNPeCP2zULQBEyLzhFDlyoz8MMRiZPa6yjiCDEODfwG87gQwlaFGkFR3Q==
   dependencies:
-    "@standardnotes/models" "^1.6.0"
-    "@standardnotes/responses" "^1.6.12"
-    "@standardnotes/services" "^1.9.14"
+    "@standardnotes/models" "^1.6.2"
+    "@standardnotes/responses" "^1.6.13"
+    "@standardnotes/services" "^1.10.1"
 
-"@standardnotes/features@^1.38.1":
-  version "1.38.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.38.1.tgz#5ee52ab91f02be2d2762dcee49db17d1040a7bf8"
-  integrity sha512-rSQ8ClG7os3w9AddP0VZbvkIpEHCKGzCLiHum0D90ogjFFXgr8+EvonOfFQEc3pa9hdyq1fofhedNQRJsdo14Q==
+"@standardnotes/features@^1.39.0":
+  version "1.39.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.39.0.tgz#d2234eec2664fbe8fc3946e2349d6d2c7348c2f1"
+  integrity sha512-r5vuJoDsi6W/ZomOYMMe0DC3YJLbhYDn9NkYglsi0/F5aQUciIg9hLUb0aRrQm/q9zQ5+zEJ8ukN6f5sJGYYcw==
   dependencies:
     "@standardnotes/auth" "^3.18.11"
     "@standardnotes/common" "^1.19.6"
 
-"@standardnotes/filepicker@1.13.3", "@standardnotes/filepicker@^1.13.3":
-  version "1.13.3"
-  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.13.3.tgz#fa4aee37432ec189a9be0dbbdb655ebdf9e33cbf"
-  integrity sha512-og2eU0PasZviLKfm55j6ZC6LfTJnVqTF+brEosgeJdcc5mOLmbRZ9aLhYT5N3qkjJdlRSXiwWQ7mYiYQ/rF4Kw==
+"@standardnotes/filepicker@1.13.4", "@standardnotes/filepicker@^1.13.4":
+  version "1.13.4"
+  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.13.4.tgz#92107587ef3d37d5d54b65e6ce589b96a2723c70"
+  integrity sha512-v7xk1PmuehCjKGv4hEiQkhqtdlbH9tv1D8GE737V9JZU/09b9t96wJ6kYDm2Nwl72/5gipI6LoLuwAcc/jD/GQ==
   dependencies:
     "@standardnotes/common" "^1.19.6"
-    "@standardnotes/utils" "^1.6.2"
+    "@standardnotes/utils" "^1.6.3"
 
-"@standardnotes/models@^1.6.0":
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.6.0.tgz#63cab950b2e533bbe3feab1fad8deddc51c66ae9"
-  integrity sha512-tO7YpRQXHsJkF06BNxOwI89Rhk5G3thkcfv6/dKaxG274F91XYBzoFGaRvs3EczEKDfqkOyb1H7wM02T8LXIvw==
+"@standardnotes/files@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.0.4.tgz#bd0a565498fffe6e079863907d233df64df0fc15"
+  integrity sha512-soj7zpb/UWOtx9Fc/cG5cq3fHh4m3+LmLUOje+Zh78f7eA9LkbPGGn7XajCINCBSAcHKlia5mhTu3NnwH9S3Ww==
   dependencies:
-    "@standardnotes/features" "^1.38.1"
-    "@standardnotes/responses" "^1.6.12"
-    "@standardnotes/utils" "^1.6.2"
+    "@standardnotes/models" "^1.6.2"
+    "@standardnotes/responses" "^1.6.13"
+    "@standardnotes/services" "^1.10.1"
+    "@standardnotes/utils" "^1.6.3"
 
-"@standardnotes/responses@^1.6.12":
-  version "1.6.12"
-  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.6.12.tgz#99090e407f10d430cf5bea548a9314472c00a1c7"
-  integrity sha512-WqPcxI7BeuSwbemI5Hag6tK0Rzf/OxyX1aeRWGXWrQOQJjv4tpyUSjT0gdutsslqkIehI3oLG+B9DLUNe6Wddg==
+"@standardnotes/models@^1.6.2":
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.6.2.tgz#45ae19246ba1ac476ed26bbe3f9fa6e3ce6c9271"
+  integrity sha512-WJtlDi2tj+HkG10VQygFbzUfon76N7gV73wuryocJ1LE5LiJT7O+LlQvrVM96QWxDdbjUXxA4fz++W0v4c6m7w==
+  dependencies:
+    "@standardnotes/features" "^1.39.0"
+    "@standardnotes/responses" "^1.6.13"
+    "@standardnotes/utils" "^1.6.3"
+
+"@standardnotes/responses@^1.6.13":
+  version "1.6.13"
+  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.6.13.tgz#aac7da9c9f158150d23e41238eade5fa6fe98b76"
+  integrity sha512-ponGQwqcZlt/5h8QzXnG5gJLiLG7uq6cYmsyQKVigLSSllv4eN/I7WLp1HWdZGcPPyh/+HCYk5z6YgSJM2Rulg==
   dependencies:
     "@standardnotes/auth" "^3.18.11"
     "@standardnotes/common" "^1.19.6"
-    "@standardnotes/features" "^1.38.1"
+    "@standardnotes/features" "^1.39.0"
 
-"@standardnotes/services@^1.9.14":
-  version "1.9.14"
-  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.9.14.tgz#6bc692ce58c2db3573474c7efd44b3586a59d52e"
-  integrity sha512-9Z62AP+zcOpmQfRiOFYUZnYIsHgTVsV6x3DcvE800xvBkQkHbkx5VeeDzV9r06iJzIl4f2BGvss3rjj3PC/R3Q==
+"@standardnotes/services@^1.10.1":
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.10.1.tgz#ef166ead223d91b7124b9e0f134ae46e4479159c"
+  integrity sha512-Q55OMJXJS/HZpQ5Iwl20u3594kkE7VF9M/yap0H9kFQJcKlyYlsSF1W7QdyFCx5keHT0JLRzjY88muBcb9o9fA==
   dependencies:
+    "@standardnotes/auth" "^3.18.11"
     "@standardnotes/common" "^1.19.6"
-    "@standardnotes/models" "^1.6.0"
-    "@standardnotes/responses" "^1.6.12"
-    "@standardnotes/utils" "^1.6.2"
+    "@standardnotes/models" "^1.6.2"
+    "@standardnotes/responses" "^1.6.13"
+    "@standardnotes/utils" "^1.6.3"
 
 "@standardnotes/settings@^1.14.1":
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/@standardnotes/settings/-/settings-1.14.1.tgz#8b6c84e2eeeab274a557bad25cb16a62d60916ec"
   integrity sha512-zRRBoflI77Zqa5ejZcXFPnvwVKf/gbLNtutB/pQE5SYlDMUgWtg6Qm8r4667Ue/nBUWZixCH0sznEN8XK8rCBw==
 
-"@standardnotes/sncrypto-common@^1.7.7":
-  version "1.7.7"
-  resolved "https://registry.yarnpkg.com/@standardnotes/sncrypto-common/-/sncrypto-common-1.7.7.tgz#5970bbf09dc541a9894fec1101d5c92be5822ad1"
-  integrity sha512-ncpzrurFtgupbQvv6+aDts9Cebx57MMI78Dl2KnJJbFm+G47UJuxfX11q2aomBJdp2XdbWhQxCKOQPl5mmwWPQ==
+"@standardnotes/sncrypto-common@^1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/sncrypto-common/-/sncrypto-common-1.8.0.tgz#7904e5c9eb907e2db3fa3c1a0c364607b3057243"
+  integrity sha512-+of+U+mTCV0LJVsCIzALLx2TvgGkqriT2NTcHjnIawbz7eoUZGXqWw/mSshhboDLtINje9Wz8qqRyYPmacu9VA==
 
-"@standardnotes/sncrypto-web@1.8.4":
-  version "1.8.4"
-  resolved "https://registry.yarnpkg.com/@standardnotes/sncrypto-web/-/sncrypto-web-1.8.4.tgz#82259f6b0210625a9188427f229b20c5ab9204ac"
-  integrity sha512-n/9uxI2KxYSohilPwgAJOW0zAaPEs97EB7kQ1An0YByIQue4D/+5HHIksqQXUmXlw8KZFTau6jd+v7l7L3dvOQ==
+"@standardnotes/sncrypto-web@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/sncrypto-web/-/sncrypto-web-1.9.0.tgz#6ea796fb95948bed94463da3f3eeaf64db0b9e9a"
+  integrity sha512-c3iVBiUE3JMX7Q9exsD8RxnwVNVp9ttG20BsPSiX2z2svoncTBXI0HKTpKpnBoJJqCD/YizQ8uJ2L73Wj03AyA==
   dependencies:
-    "@standardnotes/sncrypto-common" "^1.7.7"
+    "@standardnotes/sncrypto-common" "^1.8.0"
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.103.0":
-  version "2.103.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.103.0.tgz#708d39780b685b9e27478cb70900d71e89d6ec57"
-  integrity sha512-ak89W+ShM2kNxlW+eMA86AgjGGMUkyy+4zOa5G0KWdQJEHcevFnLVyn4ZPhvywxJWAnNZi0gGEQFuLd5IunyLQ==
+"@standardnotes/snjs@2.105.2":
+  version "2.105.2"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.105.2.tgz#fd2ac92c84010225f3f66dc143979f1360790476"
+  integrity sha512-ihRp4Z6XEakJwEg9UWJxMgda5LvN+k+EEGBVU2eG5CTjeBI3cQyu0K+iRpZD5jzg2/Vvis1gEdIrZPfPJj1mCQ==
   dependencies:
     "@standardnotes/auth" "^3.18.11"
     "@standardnotes/common" "^1.19.6"
-    "@standardnotes/domain-events" "^2.27.12"
-    "@standardnotes/encryption" "^1.4.13"
-    "@standardnotes/features" "^1.38.1"
-    "@standardnotes/filepicker" "^1.13.3"
-    "@standardnotes/models" "^1.6.0"
-    "@standardnotes/responses" "^1.6.12"
-    "@standardnotes/services" "^1.9.14"
+    "@standardnotes/domain-events" "^2.27.13"
+    "@standardnotes/encryption" "^1.6.1"
+    "@standardnotes/features" "^1.39.0"
+    "@standardnotes/filepicker" "^1.13.4"
+    "@standardnotes/files" "^1.0.4"
+    "@standardnotes/models" "^1.6.2"
+    "@standardnotes/responses" "^1.6.13"
+    "@standardnotes/services" "^1.10.1"
     "@standardnotes/settings" "^1.14.1"
-    "@standardnotes/sncrypto-common" "^1.7.7"
-    "@standardnotes/utils" "^1.6.2"
+    "@standardnotes/sncrypto-common" "^1.8.0"
+    "@standardnotes/utils" "^1.6.3"
 
-"@standardnotes/stylekit@5.23.0":
-  version "5.23.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.23.0.tgz#13da411b3b8903dd1f5cfda67ae86383b1a6a519"
-  integrity sha512-mU0dO83jMfl+IOO8QXZjA/woieqpL27RfsR7P2VOwqFVS3T+tlwr06VQLix0pF24inkZ0JdfGdYRhu4M71mFPg==
+"@standardnotes/stylekit@5.24.1":
+  version "5.24.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.24.1.tgz#9ebc3afde31ce4263e83ef59392120aaa932d638"
+  integrity sha512-niYMW8Mpj2gOloI2SSGoZvV8kSGGcujB09ti9uoicK1c9WD9s/vkjhoyzdSa3FmAjXbzVq/iwI9boSu7MLcpHw==
   dependencies:
     "@nanostores/preact" "^0.1.3"
     "@reach/listbox" "^0.16.2"
@@ -2561,10 +2573,10 @@
     nanostores "^0.5.10"
     prop-types "^15.8.1"
 
-"@standardnotes/utils@^1.6.2":
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/@standardnotes/utils/-/utils-1.6.2.tgz#c118b6e7b23c4618d664e7894b3c49c702f656df"
-  integrity sha512-huU/t93Dy940bsB1JTfK3joqcZDT8toZfAtuktvHHHloTI7o5Wb0q9BtsmfGLRf1ohTq5ya0xkHFO5QVaAlV3g==
+"@standardnotes/utils@^1.6.3":
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/@standardnotes/utils/-/utils-1.6.3.tgz#29486e4fd2d83e9a2616102244d747d9ae8e0597"
+  integrity sha512-cb46bd/b8Xo919BceWDoN347VE8/jKb74I9U8IUO1sTPAIi/YDNYRiBouqotuvgif3SxNBdst+ad6NElhhgm2Q==
   dependencies:
     "@standardnotes/common" "^1.19.6"
     dompurify "^2.3.6"

From a15a40f6c4a3012f03a646e3b2bf15fd33b437f4 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Mon, 2 May 2022 13:09:49 -0500
Subject: [PATCH 057/102] chore: update components

---
 public/components/checksums.json              | 24 +++++++++----------
 .../dist/dist.css                             |  2 ++
 .../dist/dist.css.map                         |  2 +-
 .../package.json                              | 10 +++++---
 .../dist/dist.css                             |  2 ++
 .../dist/dist.css.map                         |  2 +-
 .../package.json                              | 10 +++++---
 .../dist/dist.css                             |  2 ++
 .../dist/dist.css.map                         |  2 +-
 .../package.json                              | 10 +++++---
 .../dist/dist.css                             |  2 ++
 .../dist/dist.css.map                         |  2 +-
 .../package.json                              | 10 +++++---
 13 files changed, 52 insertions(+), 28 deletions(-)

diff --git a/public/components/checksums.json b/public/components/checksums.json
index 70531221c..ccc1a18db 100644
--- a/public/components/checksums.json
+++ b/public/components/checksums.json
@@ -1,18 +1,18 @@
 {
   "org.standardnotes.theme-midnight": {
-    "version": "1.2.6",
-    "base64": "49bb9c5c948ac0d85000720c2058d23c481e449b4ba8fa315ecd61becfd23fe9",
-    "binary": "36406ff87049ac48c2a4761de81fedc62055f626e03587fdf941e78852ed4e96"
+    "version": "1.2.7",
+    "base64": "5b89859eeb256a82795f2baa3e7d23e15ad37c7035638927876f49c852c8ff0f",
+    "binary": "e02c229ae10f7101b0616056a8b56cb9106cc8db06ae5fdd6cd9c24e073b255e"
   },
   "org.standardnotes.theme-futura": {
-    "version": "1.2.6",
-    "base64": "a8603215886338d43dfdc211515b40048fdc814c65ef54e1671f26a16c935a40",
-    "binary": "d35baa67abc8baf445d3c34c61c7e252b3cbd7c97834a9b588a182ff476538b2"
+    "version": "1.2.8",
+    "base64": "1def78e81f536dfd2d3f5d7b2fa5efa44c38c64ccd602c5b0b2b8417232a2932",
+    "binary": "f4dd37952b9de6fa3f85cff8462946063627a76d52ae42fda4b58a36033297dd"
   },
   "org.standardnotes.theme-solarized-dark": {
-    "version": "1.2.5",
-    "base64": "97d7ea65d8e63c447457b1e7145aff64dbaa942516860437f2203859808600b1",
-    "binary": "e64515502c1eb3f3269ccfa6cdf4ca8824eafcc49109e7f6b4b25e03eacea741"
+    "version": "1.2.6",
+    "base64": "6c7def6e670030f70f30d2761fca7367e1a248d320714b914568f2b0e1004208",
+    "binary": "a7f5ac67089f71e05d745553c90b47bafdeb024ee14e96f4070a010026c0bb8f"
   },
   "org.standardnotes.theme-autobiography": {
     "version": "1.0.3",
@@ -20,9 +20,9 @@
     "binary": "10e93ef6ebdaa133bc583c7f41e69bfc9883d043907cbc82f24c1bd123faf075"
   },
   "org.standardnotes.theme-focus": {
-    "version": "1.2.7",
-    "base64": "e683c91766f1da753714993594ccd22a4d85860851d73264f22d9dd65713dd7b",
-    "binary": "7576ed832394c20e26b393e76dcbed16ac1631d7d4110823b1abc7bd5b245e2c"
+    "version": "1.2.8",
+    "base64": "7fdfd50285459a1f3ed7129c1888b712c70758c88de8b4af302966e0e7817a3b",
+    "binary": "6ddde1933f6d8e65b561c9248847811e5334d65b7196bebf4313793f769ee57e"
   },
   "org.standardnotes.theme-titanium": {
     "version": "1.2.6",
diff --git a/public/components/org.standardnotes.theme-focus/dist/dist.css b/public/components/org.standardnotes.theme-focus/dist/dist.css
index 348b990f1..2a0839f3a 100644
--- a/public/components/org.standardnotes.theme-focus/dist/dist.css
+++ b/public/components/org.standardnotes.theme-focus/dist/dist.css
@@ -42,6 +42,8 @@
   --sn-stylekit-scrollbar-thumb-color: var(--sn-stylekit-info-color);
   --sn-stylekit-menu-border: 1px solid #424242;
   --sn-stylekit-grey-0: #999999;
+  --sn-stylekit-grey-3: #28292b;
+  --sn-stylekit-grey-4: #1c1d1e;
   --sn-stylekit-grey-5: #1d1f20;
 }
 
diff --git a/public/components/org.standardnotes.theme-focus/dist/dist.css.map b/public/components/org.standardnotes.theme-focus/dist/dist.css.map
index ee52529d3..000bdbcc9 100644
--- a/public/components/org.standardnotes.theme-focus/dist/dist.css.map
+++ b/public/components/org.standardnotes.theme-focus/dist/dist.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/main.scss"],"names":[],"mappings":"AAAA;EAEE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAIA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA","file":"dist.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../src/main.scss"],"names":[],"mappings":"AAAA;EAEE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAIA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;EACA","file":"dist.css"}
\ No newline at end of file
diff --git a/public/components/org.standardnotes.theme-focus/package.json b/public/components/org.standardnotes.theme-focus/package.json
index d1c3cd37d..4276f5971 100644
--- a/public/components/org.standardnotes.theme-focus/package.json
+++ b/public/components/org.standardnotes.theme-focus/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "sn-theme-focus",
-  "version": "1.2.7",
+  "name": "@standardnotes/focus-theme",
+  "version": "1.2.8",
   "main": "dist/dist.css",
   "devDependencies": {
     "grunt": "^1.0.1",
@@ -13,6 +13,10 @@
   },
   "repository": {
     "type": "git",
-    "url": "git://github.com/sn-extensions/focus-theme.git"
+    "url": "git://github.com/standardnotes/focus-theme.git"
+  },
+  "scripts": {
+    "prepublishOnly": "npm run build",
+    "build": "grunt"
   }
 }
diff --git a/public/components/org.standardnotes.theme-futura/dist/dist.css b/public/components/org.standardnotes.theme-futura/dist/dist.css
index f0335f05d..c3f9bf7d9 100644
--- a/public/components/org.standardnotes.theme-futura/dist/dist.css
+++ b/public/components/org.standardnotes.theme-futura/dist/dist.css
@@ -37,6 +37,8 @@
   --sn-desktop-titlebar-ui-hover-color: var(--highlight-color);
   --sn-stylekit-menu-border: 1px solid #434b60;
   --sn-stylekit-grey-0: #a4a5b3;
+  --sn-stylekit-grey-3: #3a3a48;
+  --sn-stylekit-grey-4: #2c2c39;
   --sn-stylekit-grey-4-opacity-variant: #292937;
   --sn-stylekit-grey-5: #2e2e3e;
 }
diff --git a/public/components/org.standardnotes.theme-futura/dist/dist.css.map b/public/components/org.standardnotes.theme-futura/dist/dist.css.map
index d326cb6eb..6e3436041 100644
--- a/public/components/org.standardnotes.theme-futura/dist/dist.css.map
+++ b/public/components/org.standardnotes.theme-futura/dist/dist.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/main.scss"],"names":[],"mappings":"AAAA;EAEE;EACA;EACA;EACA;EAGA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA","file":"dist.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../src/main.scss"],"names":[],"mappings":"AAAA;EAEE;EACA;EACA;EACA;EAGA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA","file":"dist.css"}
\ No newline at end of file
diff --git a/public/components/org.standardnotes.theme-futura/package.json b/public/components/org.standardnotes.theme-futura/package.json
index 15ad845ea..1e08da78e 100644
--- a/public/components/org.standardnotes.theme-futura/package.json
+++ b/public/components/org.standardnotes.theme-futura/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "sn-futura-theme",
-  "version": "1.2.6",
+  "name": "@standardnotes/futura-theme",
+  "version": "1.2.8",
   "main": "dist/dist.css",
   "devDependencies": {
     "grunt": "^1.0.1",
@@ -13,6 +13,10 @@
   },
   "repository": {
     "type": "git",
-    "url": "git://github.com/sn-extensions/futura-theme.git"
+    "url": "git://github.com/standardnotes/futura-theme.git"
+  },
+  "scripts": {
+    "prepublishOnly": "npm run build",
+    "build": "grunt"
   }
 }
diff --git a/public/components/org.standardnotes.theme-midnight/dist/dist.css b/public/components/org.standardnotes.theme-midnight/dist/dist.css
index 9b1080821..fa65a9b65 100644
--- a/public/components/org.standardnotes.theme-midnight/dist/dist.css
+++ b/public/components/org.standardnotes.theme-midnight/dist/dist.css
@@ -38,6 +38,8 @@
   --sn-stylekit-scrollbar-thumb-color: var(--sn-stylekit-info-color);
   --sn-stylekit-menu-border: 1px solid #494965;
   --sn-stylekit-grey-0: #94979e;
+  --sn-stylekit-grey-3: #2c2c39;
+  --sn-stylekit-grey-4: #313142;
   --sn-stylekit-grey-4-opacity-variant: #292937;
   --sn-stylekit-grey-5: #313142;
 }
diff --git a/public/components/org.standardnotes.theme-midnight/dist/dist.css.map b/public/components/org.standardnotes.theme-midnight/dist/dist.css.map
index 5f0a9cf36..4bc3ed5e2 100644
--- a/public/components/org.standardnotes.theme-midnight/dist/dist.css.map
+++ b/public/components/org.standardnotes.theme-midnight/dist/dist.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAGA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EACA;EACA","file":"dist.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../src/main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAGA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA","file":"dist.css"}
\ No newline at end of file
diff --git a/public/components/org.standardnotes.theme-midnight/package.json b/public/components/org.standardnotes.theme-midnight/package.json
index bcba60b1a..eea2723b6 100644
--- a/public/components/org.standardnotes.theme-midnight/package.json
+++ b/public/components/org.standardnotes.theme-midnight/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "sn-theme-midnight",
-  "version": "1.2.6",
+  "name": "@standardnotes/midnight-theme",
+  "version": "1.2.7",
   "main": "dist/dist.css",
   "devDependencies": {
     "grunt": "^1.0.1",
@@ -13,6 +13,10 @@
   },
   "repository": {
     "type": "git",
-    "url": "git://github.com/sn-extensions/midnight-theme.git"
+    "url": "git://github.com/standardnotes/midnight-theme.git"
+  },
+  "scripts": {
+    "prepublishOnly": "npm run build",
+    "build": "grunt"
   }
 }
diff --git a/public/components/org.standardnotes.theme-solarized-dark/dist/dist.css b/public/components/org.standardnotes.theme-solarized-dark/dist/dist.css
index 4209f0918..b40824b11 100644
--- a/public/components/org.standardnotes.theme-solarized-dark/dist/dist.css
+++ b/public/components/org.standardnotes.theme-solarized-dark/dist/dist.css
@@ -53,6 +53,8 @@
   --sn-stylekit-menu-border: 1px solid #1f5461;
   --sn-stylekit-grey-0: #a8bdbd;
   --sn-stylekit-grey-1: #93A1A1;
+  --sn-stylekit-grey-3: #0d4f60;
+  --sn-stylekit-grey-4: #083642;
   --sn-stylekit-grey-4-opacity-variant: #2AA1983d;
   --sn-stylekit-grey-5: #003542;
 }
diff --git a/public/components/org.standardnotes.theme-solarized-dark/dist/dist.css.map b/public/components/org.standardnotes.theme-solarized-dark/dist/dist.css.map
index 26d76cc64..0df02856a 100644
--- a/public/components/org.standardnotes.theme-solarized-dark/dist/dist.css.map
+++ b/public/components/org.standardnotes.theme-solarized-dark/dist/dist.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/main.scss"],"names":[],"mappings":"AAAA;EAEE;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;AAEA;EACA;AAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA","file":"dist.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../src/main.scss"],"names":[],"mappings":"AAAA;EAEE;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;AAEA;EACA;AAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA","file":"dist.css"}
\ No newline at end of file
diff --git a/public/components/org.standardnotes.theme-solarized-dark/package.json b/public/components/org.standardnotes.theme-solarized-dark/package.json
index 703684255..ce97b06e8 100644
--- a/public/components/org.standardnotes.theme-solarized-dark/package.json
+++ b/public/components/org.standardnotes.theme-solarized-dark/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "sn-theme-solarized-dark",
-  "version": "1.2.5",
+  "name": "@standardnotes/solarized-dark-theme",
+  "version": "1.2.6",
   "main": "dist/dist.css",
   "devDependencies": {
     "grunt": "^1.0.1",
@@ -13,6 +13,10 @@
   },
   "repository": {
     "type": "git",
-    "url": "git://github.com/sn-extensions/solarized-dark-theme.git"
+    "url": "git://github.com/standardnotes/solarized-dark-theme.git"
+  },
+  "scripts": {
+    "prepublishOnly": "npm run build",
+    "build": "grunt"
   }
 }

From e4fbb2515e323779e9be8fa1a609e9ebe7021c3c Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 3 May 2022 18:28:45 +0530
Subject: [PATCH 058/102] feat: show download/upload progess in toast (#1008)

---
 .../UIModels/AppState/FilesState.ts           | 40 ++++++++++++++-----
 package.json                                  |  4 +-
 yarn.lock                                     | 26 ++++++------
 3 files changed, 46 insertions(+), 24 deletions(-)

diff --git a/app/assets/javascripts/UIModels/AppState/FilesState.ts b/app/assets/javascripts/UIModels/AppState/FilesState.ts
index 3361a3265..3fdd3f079 100644
--- a/app/assets/javascripts/UIModels/AppState/FilesState.ts
+++ b/app/assets/javascripts/UIModels/AppState/FilesState.ts
@@ -8,7 +8,7 @@ import {
   parseFileName,
 } from '@standardnotes/filepicker'
 import { ClientDisplayableError, SNFile } from '@standardnotes/snjs'
-import { addToast, dismissToast, ToastType } from '@standardnotes/stylekit'
+import { addToast, dismissToast, ToastType, updateToast } from '@standardnotes/stylekit'
 import { WebApplication } from '../Application'
 
 export class FilesState {
@@ -27,18 +27,30 @@ export class FilesState {
       }
 
       downloadingToastId = addToast({
-        type: ToastType.Loading,
-        message: 'Downloading file...',
+        type: ToastType.Progress,
+        message: `Downloading file "${file.name}" (0%)`,
+        progress: 0,
       })
 
       const decryptedBytesArray: Uint8Array[] = []
 
-      await this.application.files.downloadFile(file, async (decryptedBytes: Uint8Array) => {
+      await this.application.files.downloadFile(file, async (decryptedBytes, progress) => {
         if (isUsingStreamingSaver) {
           await saver.pushBytes(decryptedBytes)
         } else {
           decryptedBytesArray.push(decryptedBytes)
         }
+
+        if (progress) {
+          const progressPercent = Number.isInteger(progress.percentComplete)
+            ? progress.percentComplete
+            : progress.percentComplete.toFixed(2)
+
+          updateToast(downloadingToastId, {
+            message: `Downloading file "${file.name}" (${progressPercent}%)`,
+            progress: progress.percentComplete,
+          })
+        }
       })
 
       if (isUsingStreamingSaver) {
@@ -103,11 +115,6 @@ export class FilesState {
           continue
         }
 
-        toastId = addToast({
-          type: ToastType.Loading,
-          message: `Uploading file "${file.name}"...`,
-        })
-
         const operation = await this.application.files.beginNewFileUpload(file.size)
 
         if (operation instanceof ClientDisplayableError) {
@@ -118,8 +125,23 @@ export class FilesState {
           throw new Error('Unable to start upload session')
         }
 
+        const initialProgress = operation.getProgress().percentComplete
+
+        toastId = addToast({
+          type: ToastType.Progress,
+          message: `Uploading file "${file.name}" (${initialProgress}%)`,
+          progress: initialProgress,
+        })
+
         const onChunk = async (chunk: Uint8Array, index: number, isLast: boolean) => {
           await this.application.files.pushBytesForUpload(operation, chunk, index, isLast)
+
+          const progress = operation.getProgress().percentComplete
+          const formattedProgress = Number.isInteger(progress) ? progress : progress.toFixed(2)
+          updateToast(toastId, {
+            message: `Uploading file "${file.name}" (${formattedProgress}%)`,
+            progress,
+          })
         }
 
         const fileResult = await picker.readFile(file, minimumChunkSize, onChunk)
diff --git a/package.json b/package.json
index 8da16b0d3..fde58f371 100644
--- a/package.json
+++ b/package.json
@@ -72,8 +72,8 @@
     "@standardnotes/components": "1.7.15",
     "@standardnotes/filepicker": "1.13.4",
     "@standardnotes/sncrypto-web": "1.9.0",
-    "@standardnotes/snjs": "2.105.2",
-    "@standardnotes/stylekit": "5.24.1",
+    "@standardnotes/snjs": "2.105.3",
+    "@standardnotes/stylekit": "5.25.0",
     "@zip.js/zip.js": "^2.4.10",
     "mobx": "^6.5.0",
     "mobx-react-lite": "^3.3.0",
diff --git a/yarn.lock b/yarn.lock
index 1dc6fb8a2..2a35ef127 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2483,10 +2483,10 @@
     "@standardnotes/common" "^1.19.6"
     "@standardnotes/utils" "^1.6.3"
 
-"@standardnotes/files@^1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.0.4.tgz#bd0a565498fffe6e079863907d233df64df0fc15"
-  integrity sha512-soj7zpb/UWOtx9Fc/cG5cq3fHh4m3+LmLUOje+Zh78f7eA9LkbPGGn7XajCINCBSAcHKlia5mhTu3NnwH9S3Ww==
+"@standardnotes/files@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.0.5.tgz#ed293082167555ca89ce1c2a879eb7307064db61"
+  integrity sha512-ACsl9emP7S9OpCC8FcGZZxdxGJjMjZ3wvshevsjHqGtKcKQX/2/xU8FcUNg05VzvGMicV8Smekp+/6BvcNpjEA==
   dependencies:
     "@standardnotes/models" "^1.6.2"
     "@standardnotes/responses" "^1.6.13"
@@ -2541,10 +2541,10 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.105.2":
-  version "2.105.2"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.105.2.tgz#fd2ac92c84010225f3f66dc143979f1360790476"
-  integrity sha512-ihRp4Z6XEakJwEg9UWJxMgda5LvN+k+EEGBVU2eG5CTjeBI3cQyu0K+iRpZD5jzg2/Vvis1gEdIrZPfPJj1mCQ==
+"@standardnotes/snjs@2.105.3":
+  version "2.105.3"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.105.3.tgz#4eebce30c8cc6469ba6aada28ceb9825b47827c5"
+  integrity sha512-dYzGCbljJ6x88+kJX2iMS+8hyKGSvLljJqlmeWYVnoVPs9ZR2CkfZfjugaVkNIMS9mteuAO36t0YUyhQA6yBPQ==
   dependencies:
     "@standardnotes/auth" "^3.18.11"
     "@standardnotes/common" "^1.19.6"
@@ -2552,7 +2552,7 @@
     "@standardnotes/encryption" "^1.6.1"
     "@standardnotes/features" "^1.39.0"
     "@standardnotes/filepicker" "^1.13.4"
-    "@standardnotes/files" "^1.0.4"
+    "@standardnotes/files" "^1.0.5"
     "@standardnotes/models" "^1.6.2"
     "@standardnotes/responses" "^1.6.13"
     "@standardnotes/services" "^1.10.1"
@@ -2560,10 +2560,10 @@
     "@standardnotes/sncrypto-common" "^1.8.0"
     "@standardnotes/utils" "^1.6.3"
 
-"@standardnotes/stylekit@5.24.1":
-  version "5.24.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.24.1.tgz#9ebc3afde31ce4263e83ef59392120aaa932d638"
-  integrity sha512-niYMW8Mpj2gOloI2SSGoZvV8kSGGcujB09ti9uoicK1c9WD9s/vkjhoyzdSa3FmAjXbzVq/iwI9boSu7MLcpHw==
+"@standardnotes/stylekit@5.25.0":
+  version "5.25.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.25.0.tgz#dd79f8c7bd9c2a6f810bc6283f76928dd268f9e8"
+  integrity sha512-zc/qsWJ6UYNFZeEPpifJbN19GXZy2VBrha2njvnmLy+Yr9XZuDBR+kwzBvvDYIb33OijkATNQ4EyUja245edKQ==
   dependencies:
     "@nanostores/preact" "^0.1.3"
     "@reach/listbox" "^0.16.2"

From f5a90060ea75e262a1fd59289a9c4644f2692b2f Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Tue, 3 May 2022 10:50:47 -0500
Subject: [PATCH 059/102] feat: note types

---
 .../ChangeEditor/ChangeEditorButton.tsx       |   2 +-
 .../ChangeEditor/ChangeEditorMenu.tsx         |   9 +-
 .../ChangeEditor/createEditorMenuGroups.ts    |  11 +-
 .../Components/NotesList/NotesListItem.tsx    |  40 +-
 .../NotesOptions/ChangeEditorOption.tsx       |   7 +-
 .../Components/NotesOptions/NotesOptions.tsx  | 483 +++++++++---------
 .../Preferences/Panes/General/Defaults.tsx    |  45 +-
 app/assets/javascripts/Constants.ts           |   2 +
 package.json                                  |   4 +-
 yarn.lock                                     | 110 ++--
 10 files changed, 327 insertions(+), 386 deletions(-)

diff --git a/app/assets/javascripts/Components/ChangeEditor/ChangeEditorButton.tsx b/app/assets/javascripts/Components/ChangeEditor/ChangeEditorButton.tsx
index 928539914..35db46c92 100644
--- a/app/assets/javascripts/Components/ChangeEditor/ChangeEditorButton.tsx
+++ b/app/assets/javascripts/Components/ChangeEditor/ChangeEditorButton.tsx
@@ -72,7 +72,7 @@ export const ChangeEditorButton: FunctionComponent<Props> = observer(
             ref={buttonRef}
             className="sn-icon-button border-contrast"
           >
-            <VisuallyHidden>Change editor</VisuallyHidden>
+            <VisuallyHidden>Change note type</VisuallyHidden>
             <Icon type="dashboard" className="block" />
           </DisclosureButton>
           <DisclosurePanel
diff --git a/app/assets/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx b/app/assets/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
index a76aacfd6..ad0345d6b 100644
--- a/app/assets/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
+++ b/app/assets/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
@@ -21,7 +21,8 @@ import {
 import { Fragment, FunctionComponent } from 'preact'
 import { useCallback, useEffect, useState } from 'preact/hooks'
 import { EditorMenuItem, EditorMenuGroup } from '@/Components/NotesOptions/ChangeEditorOption'
-import { createEditorMenuGroups, PLAIN_EDITOR_NAME } from './createEditorMenuGroups'
+import { createEditorMenuGroups } from './createEditorMenuGroups'
+import { PLAIN_EDITOR_NAME } from '@/Constants'
 
 type ChangeEditorMenuProps = {
   application: WebApplication
@@ -169,7 +170,7 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
   }
 
   return (
-    <Menu className="pt-0.5 pb-1" a11yLabel="Change editor menu" isOpen={isVisible}>
+    <Menu className="pt-0.5 pb-1" a11yLabel="Change note type menu" isOpen={isVisible}>
       {groups
         .filter((group) => group.items && group.items.length)
         .map((group, index) => {
@@ -194,9 +195,7 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
                   <MenuItem
                     type={MenuItemType.RadioButton}
                     onClick={onClickEditorItem}
-                    className={
-                      'sn-dropdown-item py-2 text-input focus:bg-info-backdrop focus:shadow-none'
-                    }
+                    className={'sn-dropdown-item py-2 text-input focus:bg-info-backdrop focus:shadow-none'}
                     onBlur={closeOnBlur}
                     checked={isSelectedEditor(item)}
                   >
diff --git a/app/assets/javascripts/Components/ChangeEditor/createEditorMenuGroups.ts b/app/assets/javascripts/Components/ChangeEditor/createEditorMenuGroups.ts
index 0ec3dab33..fc7ddda90 100644
--- a/app/assets/javascripts/Components/ChangeEditor/createEditorMenuGroups.ts
+++ b/app/assets/javascripts/Components/ChangeEditor/createEditorMenuGroups.ts
@@ -9,8 +9,7 @@ import {
   NoteType,
 } from '@standardnotes/snjs'
 import { EditorMenuItem, EditorMenuGroup } from '@/Components/NotesOptions/ChangeEditorOption'
-
-export const PLAIN_EDITOR_NAME = 'Plain Editor'
+import { PLAIN_EDITOR_NAME } from '@/Constants'
 
 type EditorGroup = NoteType | 'plain' | 'others'
 
@@ -50,10 +49,7 @@ export const createEditorMenuGroups = (application: WebApplication, editors: SNC
   }
 
   GetFeatures()
-    .filter(
-      (feature) =>
-        feature.content_type === ContentType.Component && feature.area === ComponentArea.Editor,
-    )
+    .filter((feature) => feature.content_type === ContentType.Component && feature.area === ComponentArea.Editor)
     .forEach((editorFeature) => {
       const notInstalled = !editors.find((editor) => editor.identifier === editorFeature.identifier)
       const isExperimental = application.features.isExperimentalFeature(editorFeature.identifier)
@@ -69,8 +65,7 @@ export const createEditorMenuGroups = (application: WebApplication, editors: SNC
     const editorItem: EditorMenuItem = {
       name: editor.name,
       component: editor,
-      isEntitled:
-        application.features.getFeatureStatus(editor.identifier) === FeatureStatus.Entitled,
+      isEntitled: application.features.getFeatureStatus(editor.identifier) === FeatureStatus.Entitled,
     }
 
     editorItems[getEditorGroup(editor.package_info)].push(editorItem)
diff --git a/app/assets/javascripts/Components/NotesList/NotesListItem.tsx b/app/assets/javascripts/Components/NotesList/NotesListItem.tsx
index d9f3c025b..03a33a262 100644
--- a/app/assets/javascripts/Components/NotesList/NotesListItem.tsx
+++ b/app/assets/javascripts/Components/NotesList/NotesListItem.tsx
@@ -1,12 +1,8 @@
 import { WebApplication } from '@/UIModels/Application'
-import {
-  CollectionSort,
-  CollectionSortProperty,
-  sanitizeHtmlString,
-  SNNote,
-} from '@standardnotes/snjs'
+import { CollectionSort, CollectionSortProperty, sanitizeHtmlString, SNNote } from '@standardnotes/snjs'
 import { FunctionComponent } from 'preact'
 import { Icon } from '@/Components/Icon'
+import { PLAIN_EDITOR_NAME } from '@/Constants'
 
 type Props = {
   application: WebApplication
@@ -55,10 +51,8 @@ export const NotesListItem: FunctionComponent<Props> = ({
   const flags = flagsForNote(note)
   const showModifiedDate = sortedBy === CollectionSort.UpdatedAt
   const editorForNote = application.componentManager.editorForNote(note)
-  const editorName = editorForNote?.name ?? 'Plain editor'
-  const [icon, tint] = application.iconsController.getIconAndTintForEditor(
-    editorForNote?.identifier,
-  )
+  const editorName = editorForNote?.name ?? PLAIN_EDITOR_NAME
+  const [icon, tint] = application.iconsController.getIconAndTintForEditor(editorForNote?.identifier)
 
   return (
     <div
@@ -69,17 +63,11 @@ export const NotesListItem: FunctionComponent<Props> = ({
     >
       {!hideEditorIcon && (
         <div className="icon">
-          <Icon
-            ariaLabel={`Icon for ${editorName}`}
-            type={icon}
-            className={`color-accessory-tint-${tint}`}
-          />
+          <Icon ariaLabel={`Icon for ${editorName}`} type={icon} className={`color-accessory-tint-${tint}`} />
         </div>
       )}
       <div className={`meta ${hideEditorIcon ? 'icon-hidden' : ''}`}>
-        <div className="name-container">
-          {note.title.length ? <div className="name">{note.title}</div> : null}
-        </div>
+        <div className="name-container">{note.title.length ? <div className="name">{note.title}</div> : null}</div>
         {!hidePreview && !note.hidePreview && !note.protected && (
           <div className="note-preview">
             {note.preview_html && (
@@ -90,9 +78,7 @@ export const NotesListItem: FunctionComponent<Props> = ({
                 }}
               ></div>
             )}
-            {!note.preview_html && note.preview_plain && (
-              <div className="plain-preview">{note.preview_plain}</div>
-            )}
+            {!note.preview_html && note.preview_plain && <div className="plain-preview">{note.preview_plain}</div>}
             {!note.preview_html && !note.preview_plain && note.text && (
               <div className="default-preview">{note.text}</div>
             )}
@@ -128,11 +114,7 @@ export const NotesListItem: FunctionComponent<Props> = ({
       <div className="flag-icons">
         {note.locked && (
           <span title="Editing Disabled">
-            <Icon
-              ariaLabel="Editing Disabled"
-              type="pencil-off"
-              className="sn-icon--small color-info"
-            />
+            <Icon ariaLabel="Editing Disabled" type="pencil-off" className="sn-icon--small color-info" />
           </span>
         )}
         {note.trashed && (
@@ -142,11 +124,7 @@ export const NotesListItem: FunctionComponent<Props> = ({
         )}
         {note.archived && (
           <span title="Archived">
-            <Icon
-              ariaLabel="Archived"
-              type="archive"
-              className="sn-icon--mid color-accessory-tint-3"
-            />
+            <Icon ariaLabel="Archived" type="archive" className="sn-icon--mid color-accessory-tint-3" />
           </span>
         )}
         {note.pinned && (
diff --git a/app/assets/javascripts/Components/NotesOptions/ChangeEditorOption.tsx b/app/assets/javascripts/Components/NotesOptions/ChangeEditorOption.tsx
index f93774b23..3b7a96593 100644
--- a/app/assets/javascripts/Components/NotesOptions/ChangeEditorOption.tsx
+++ b/app/assets/javascripts/Components/NotesOptions/ChangeEditorOption.tsx
@@ -31,10 +31,7 @@ export type EditorMenuItem = {
 
 export type EditorMenuGroup = AccordionMenuGroup<EditorMenuItem>
 
-export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
-  application,
-  note,
-}) => {
+export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({ application, note }) => {
   const [isOpen, setIsOpen] = useState(false)
   const [isVisible, setIsVisible] = useState(false)
   const [menuStyle, setMenuStyle] = useState<SubmenuStyle>({
@@ -90,7 +87,7 @@ export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
         >
           <div className="flex items-center">
             <Icon type="dashboard" className="color-neutral mr-2" />
-            Change editor
+            Change note type
           </div>
           <Icon type="chevron-right" className="color-neutral" />
         </DisclosureButton>
diff --git a/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx b/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx
index f27cf6ff5..51a564c29 100644
--- a/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx
+++ b/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx
@@ -32,6 +32,8 @@ const DeletePermanentlyButton = ({ closeOnBlur, onClick }: DeletePermanentlyButt
 )
 
 const iconClass = 'color-neutral mr-2'
+const iconClassDanger = 'color-danger mr-2'
+const iconClassWarning = 'color-warning mr-2'
 
 const getWordCount = (text: string) => {
   if (text.trim().length === 0) {
@@ -88,15 +90,9 @@ const NoteAttributes: FunctionComponent<{
   application: SNApplication
   note: SNNote
 }> = ({ application, note }) => {
-  const { words, characters, paragraphs } = useMemo(
-    () => countNoteAttributes(note.text),
-    [note.text],
-  )
+  const { words, characters, paragraphs } = useMemo(() => countNoteAttributes(note.text), [note.text])
 
-  const readTime = useMemo(
-    () => (typeof words === 'number' ? calculateReadTime(words) : 'N/A'),
-    [words],
-  )
+  const readTime = useMemo(() => (typeof words === 'number' ? calculateReadTime(words) : 'N/A'), [words])
 
   const dateLastModified = useMemo(() => formatDate(note.userModifiedDate), [note.userModifiedDate])
 
@@ -168,283 +164,276 @@ const NOTE_SIZE_WARNING_THRESHOLD = 0.5 * BYTES_IN_ONE_MEGABYTE
 
 const NoteSizeWarning: FunctionComponent<{
   note: SNNote
-}> = ({ note }) =>
-  (new Blob([note.text]).size > NOTE_SIZE_WARNING_THRESHOLD ? (
+}> = ({ note }) => {
+  return new Blob([note.text]).size > NOTE_SIZE_WARNING_THRESHOLD ? (
     <div className="flex items-center px-3 py-3.5 relative bg-note-size-warning">
       <Icon type="warning" className="color-accessory-tint-3 flex-shrink-0 mr-3" />
       <div className="color-grey-0 select-none leading-140% max-w-80%">
         This note may have trouble syncing to the mobile application due to its size.
       </div>
     </div>
-  ) : null)
+  ) : null
+}
 
-export const NotesOptions = observer(
-  ({ application, appState, closeOnBlur }: NotesOptionsProps) => {
-    const [altKeyDown, setAltKeyDown] = useState(false)
+export const NotesOptions = observer(({ application, appState, closeOnBlur }: NotesOptionsProps) => {
+  const [altKeyDown, setAltKeyDown] = useState(false)
 
-    const toggleOn = (condition: (note: SNNote) => boolean) => {
-      const notesMatchingAttribute = notes.filter(condition)
-      const notesNotMatchingAttribute = notes.filter((note) => !condition(note))
-      return notesMatchingAttribute.length > notesNotMatchingAttribute.length
+  const toggleOn = (condition: (note: SNNote) => boolean) => {
+    const notesMatchingAttribute = notes.filter(condition)
+    const notesNotMatchingAttribute = notes.filter((note) => !condition(note))
+    return notesMatchingAttribute.length > notesNotMatchingAttribute.length
+  }
+
+  const notes = Object.values(appState.notes.selectedNotes)
+  const hidePreviews = toggleOn((note) => note.hidePreview)
+  const locked = toggleOn((note) => note.locked)
+  const protect = toggleOn((note) => note.protected)
+  const archived = notes.some((note) => note.archived)
+  const unarchived = notes.some((note) => !note.archived)
+  const trashed = notes.some((note) => note.trashed)
+  const notTrashed = notes.some((note) => !note.trashed)
+  const pinned = notes.some((note) => note.pinned)
+  const unpinned = notes.some((note) => !note.pinned)
+
+  useEffect(() => {
+    const removeAltKeyObserver = application.io.addKeyObserver({
+      modifiers: [KeyboardModifier.Alt],
+      onKeyDown: () => {
+        setAltKeyDown(true)
+      },
+      onKeyUp: () => {
+        setAltKeyDown(false)
+      },
+    })
+
+    return () => {
+      removeAltKeyObserver()
+    }
+  }, [application])
+
+  const getNoteFileName = (note: SNNote): string => {
+    const editor = application.componentManager.editorForNote(note)
+    const format = editor?.package_info?.file_type || 'txt'
+    return `${note.title}.${format}`
+  }
+
+  const downloadSelectedItems = async () => {
+    if (notes.length === 1) {
+      application.getArchiveService().downloadData(new Blob([notes[0].text]), getNoteFileName(notes[0]))
+      return
     }
 
-    const notes = Object.values(appState.notes.selectedNotes)
-    const hidePreviews = toggleOn((note) => note.hidePreview)
-    const locked = toggleOn((note) => note.locked)
-    const protect = toggleOn((note) => note.protected)
-    const archived = notes.some((note) => note.archived)
-    const unarchived = notes.some((note) => !note.archived)
-    const trashed = notes.some((note) => note.trashed)
-    const notTrashed = notes.some((note) => !note.trashed)
-    const pinned = notes.some((note) => note.pinned)
-    const unpinned = notes.some((note) => !note.pinned)
-
-    useEffect(() => {
-      const removeAltKeyObserver = application.io.addKeyObserver({
-        modifiers: [KeyboardModifier.Alt],
-        onKeyDown: () => {
-          setAltKeyDown(true)
-        },
-        onKeyUp: () => {
-          setAltKeyDown(false)
-        },
+    if (notes.length > 1) {
+      const loadingToastId = addToast({
+        type: ToastType.Loading,
+        message: `Exporting ${notes.length} notes...`,
       })
-
-      return () => {
-        removeAltKeyObserver()
-      }
-    }, [application])
-
-    const getNoteFileName = (note: SNNote): string => {
-      const editor = application.componentManager.editorForNote(note)
-      const format = editor?.package_info?.file_type || 'txt'
-      return `${note.title}.${format}`
-    }
-
-    const downloadSelectedItems = async () => {
-      if (notes.length === 1) {
-        application
-          .getArchiveService()
-          .downloadData(new Blob([notes[0].text]), getNoteFileName(notes[0]))
-        return
-      }
-
-      if (notes.length > 1) {
-        const loadingToastId = addToast({
-          type: ToastType.Loading,
-          message: `Exporting ${notes.length} notes...`,
-        })
-        await application.getArchiveService().downloadDataAsZip(
-          notes.map((note) => {
-            return {
-              filename: getNoteFileName(note),
-              content: new Blob([note.text]),
-            }
-          }),
-        )
-        dismissToast(loadingToastId)
-        addToast({
-          type: ToastType.Success,
-          message: `Exported ${notes.length} notes`,
-        })
-      }
-    }
-
-    const duplicateSelectedItems = () => {
-      notes.forEach((note) => {
-        application.mutator.duplicateItem(note).catch(console.error)
+      await application.getArchiveService().downloadDataAsZip(
+        notes.map((note) => {
+          return {
+            filename: getNoteFileName(note),
+            content: new Blob([note.text]),
+          }
+        }),
+      )
+      dismissToast(loadingToastId)
+      addToast({
+        type: ToastType.Success,
+        message: `Exported ${notes.length} notes`,
       })
     }
+  }
 
-    const openRevisionHistoryModal = () => {
-      appState.notes.setShowRevisionHistoryModal(true)
-    }
+  const duplicateSelectedItems = () => {
+    notes.forEach((note) => {
+      application.mutator.duplicateItem(note).catch(console.error)
+    })
+  }
 
-    return (
-      <>
-        {notes.length === 1 && (
-          <>
-            <button
-              onBlur={closeOnBlur}
-              className="sn-dropdown-item"
-              onClick={openRevisionHistoryModal}
-            >
-              <Icon type="history" className={iconClass} />
-              Note history
-            </button>
-            <div className="min-h-1px my-2 bg-border"></div>
-          </>
-        )}
+  const openRevisionHistoryModal = () => {
+    appState.notes.setShowRevisionHistoryModal(true)
+  }
+
+  return (
+    <>
+      {notes.length === 1 && (
+        <>
+          <button onBlur={closeOnBlur} className="sn-dropdown-item" onClick={openRevisionHistoryModal}>
+            <Icon type="history" className={iconClass} />
+            Note history
+          </button>
+          <div className="min-h-1px my-2 bg-border"></div>
+        </>
+      )}
+      <button
+        className="sn-dropdown-item justify-between"
+        onClick={() => {
+          appState.notes.setLockSelectedNotes(!locked)
+        }}
+        onBlur={closeOnBlur}
+      >
+        <span className="flex items-center">
+          <Icon type="pencil-off" className={iconClass} />
+          Prevent editing
+        </span>
+        <Switch className="px-0" checked={locked} />
+      </button>
+      <button
+        className="sn-dropdown-item justify-between"
+        onClick={() => {
+          appState.notes.setHideSelectedNotePreviews(!hidePreviews)
+        }}
+        onBlur={closeOnBlur}
+      >
+        <span className="flex items-center">
+          <Icon type="rich-text" className={iconClass} />
+          Show preview
+        </span>
+        <Switch className="px-0" checked={!hidePreviews} />
+      </button>
+      <button
+        className="sn-dropdown-item justify-between"
+        onClick={() => {
+          appState.notes.setProtectSelectedNotes(!protect).catch(console.error)
+        }}
+        onBlur={closeOnBlur}
+      >
+        <span className="flex items-center">
+          <Icon type="password" className={iconClass} />
+          Password protect
+        </span>
+        <Switch className="px-0" checked={protect} />
+      </button>
+      {notes.length === 1 && (
+        <>
+          <div className="min-h-1px my-2 bg-border"></div>
+          <ChangeEditorOption appState={appState} application={application} note={notes[0]} />
+        </>
+      )}
+      <div className="min-h-1px my-2 bg-border"></div>
+      {appState.tags.tagsCount > 0 && <AddTagOption appState={appState} />}
+      {unpinned && (
         <button
-          className="sn-dropdown-item justify-between"
-          onClick={() => {
-            appState.notes.setLockSelectedNotes(!locked)
-          }}
           onBlur={closeOnBlur}
+          className="sn-dropdown-item"
+          onClick={() => {
+            appState.notes.setPinSelectedNotes(true)
+          }}
         >
-          <span className="flex items-center">
-            <Icon type="pencil-off" className={iconClass} />
-            Prevent editing
-          </span>
-          <Switch className="px-0" checked={locked} />
+          <Icon type="pin" className={iconClass} />
+          Pin to top
         </button>
+      )}
+      {pinned && (
         <button
-          className="sn-dropdown-item justify-between"
-          onClick={() => {
-            appState.notes.setHideSelectedNotePreviews(!hidePreviews)
-          }}
           onBlur={closeOnBlur}
+          className="sn-dropdown-item"
+          onClick={() => {
+            appState.notes.setPinSelectedNotes(false)
+          }}
         >
-          <span className="flex items-center">
-            <Icon type="rich-text" className={iconClass} />
-            Show preview
-          </span>
-          <Switch className="px-0" checked={!hidePreviews} />
+          <Icon type="unpin" className={iconClass} />
+          Unpin
         </button>
+      )}
+      <button onBlur={closeOnBlur} className="sn-dropdown-item" onClick={downloadSelectedItems}>
+        <Icon type="download" className={iconClass} />
+        Export
+      </button>
+      <button onBlur={closeOnBlur} className="sn-dropdown-item" onClick={duplicateSelectedItems}>
+        <Icon type="copy" className={iconClass} />
+        Duplicate
+      </button>
+      {unarchived && (
         <button
-          className="sn-dropdown-item justify-between"
-          onClick={() => {
-            appState.notes.setProtectSelectedNotes(!protect).catch(console.error)
-          }}
           onBlur={closeOnBlur}
+          className="sn-dropdown-item"
+          onClick={() => {
+            appState.notes.setArchiveSelectedNotes(true).catch(console.error)
+          }}
         >
-          <span className="flex items-center">
-            <Icon type="password" className={iconClass} />
-            Protect
-          </span>
-          <Switch className="px-0" checked={protect} />
+          <Icon type="archive" className={iconClassWarning} />
+          <span className="color-warning">Archive</span>
         </button>
-        {notes.length === 1 && (
-          <>
-            <div className="min-h-1px my-2 bg-border"></div>
-            <ChangeEditorOption appState={appState} application={application} note={notes[0]} />
-          </>
-        )}
-        <div className="min-h-1px my-2 bg-border"></div>
-        {appState.tags.tagsCount > 0 && <AddTagOption appState={appState} />}
-        {unpinned && (
-          <button
-            onBlur={closeOnBlur}
-            className="sn-dropdown-item"
-            onClick={() => {
-              appState.notes.setPinSelectedNotes(true)
-            }}
-          >
-            <Icon type="pin" className={iconClass} />
-            Pin to top
-          </button>
-        )}
-        {pinned && (
-          <button
-            onBlur={closeOnBlur}
-            className="sn-dropdown-item"
-            onClick={() => {
-              appState.notes.setPinSelectedNotes(false)
-            }}
-          >
-            <Icon type="unpin" className={iconClass} />
-            Unpin
-          </button>
-        )}
-        <button onBlur={closeOnBlur} className="sn-dropdown-item" onClick={downloadSelectedItems}>
-          <Icon type="download" className={iconClass} />
-          Export
+      )}
+      {archived && (
+        <button
+          onBlur={closeOnBlur}
+          className="sn-dropdown-item"
+          onClick={() => {
+            appState.notes.setArchiveSelectedNotes(false).catch(console.error)
+          }}
+        >
+          <Icon type="unarchive" className={iconClassWarning} />
+          <span className="color-warning">Unarchive</span>
         </button>
-        <button onBlur={closeOnBlur} className="sn-dropdown-item" onClick={duplicateSelectedItems}>
-          <Icon type="copy" className={iconClass} />
-          Duplicate
-        </button>
-        {unarchived && (
+      )}
+      {notTrashed &&
+        (altKeyDown ? (
+          <DeletePermanentlyButton
+            closeOnBlur={closeOnBlur}
+            onClick={async () => {
+              await appState.notes.deleteNotesPermanently()
+            }}
+          />
+        ) : (
           <button
             onBlur={closeOnBlur}
             className="sn-dropdown-item"
-            onClick={() => {
-              appState.notes.setArchiveSelectedNotes(true).catch(console.error)
+            onClick={async () => {
+              await appState.notes.setTrashSelectedNotes(true)
             }}
           >
-            <Icon type="archive" className={iconClass} />
-            Archive
+            <Icon type="trash" className={iconClassDanger} />
+            <span className="color-danger">Move to trash</span>
           </button>
-        )}
-        {archived && (
+        ))}
+      {trashed && (
+        <>
           <button
             onBlur={closeOnBlur}
             className="sn-dropdown-item"
-            onClick={() => {
-              appState.notes.setArchiveSelectedNotes(false).catch(console.error)
+            onClick={async () => {
+              await appState.notes.setTrashSelectedNotes(false)
             }}
           >
-            <Icon type="unarchive" className={iconClass} />
-            Unarchive
+            <Icon type="restore" className={iconClass} />
+            Restore
           </button>
-        )}
-        {notTrashed &&
-          (altKeyDown ? (
-            <DeletePermanentlyButton
-              closeOnBlur={closeOnBlur}
-              onClick={async () => {
-                await appState.notes.deleteNotesPermanently()
-              }}
-            />
-          ) : (
-            <button
-              onBlur={closeOnBlur}
-              className="sn-dropdown-item"
-              onClick={async () => {
-                await appState.notes.setTrashSelectedNotes(true)
-              }}
-            >
-              <Icon type="trash" className={iconClass} />
-              Move to trash
-            </button>
-          ))}
-        {trashed && (
-          <>
-            <button
-              onBlur={closeOnBlur}
-              className="sn-dropdown-item"
-              onClick={async () => {
-                await appState.notes.setTrashSelectedNotes(false)
-              }}
-            >
-              <Icon type="restore" className={iconClass} />
-              Restore
-            </button>
-            <DeletePermanentlyButton
-              closeOnBlur={closeOnBlur}
-              onClick={async () => {
-                await appState.notes.deleteNotesPermanently()
-              }}
-            />
-            <button
-              onBlur={closeOnBlur}
-              className="sn-dropdown-item"
-              onClick={async () => {
-                await appState.notes.emptyTrash()
-              }}
-            >
-              <div className="flex items-start">
-                <Icon type="trash-sweep" className="color-danger mr-2" />
-                <div className="flex-row">
-                  <div className="color-danger">Empty Trash</div>
-                  <div className="text-xs">{appState.notes.trashedNotesCount} notes in Trash</div>
-                </div>
+          <DeletePermanentlyButton
+            closeOnBlur={closeOnBlur}
+            onClick={async () => {
+              await appState.notes.deleteNotesPermanently()
+            }}
+          />
+          <button
+            onBlur={closeOnBlur}
+            className="sn-dropdown-item"
+            onClick={async () => {
+              await appState.notes.emptyTrash()
+            }}
+          >
+            <div className="flex items-start">
+              <Icon type="trash-sweep" className="color-danger mr-2" />
+              <div className="flex-row">
+                <div className="color-danger">Empty Trash</div>
+                <div className="text-xs">{appState.notes.trashedNotesCount} notes in Trash</div>
               </div>
-            </button>
-          </>
-        )}
-        {notes.length === 1 ? (
-          <>
-            <div className="min-h-1px my-2 bg-border"></div>
-            <ListedActionsOption application={application} note={notes[0]} />
-            <div className="min-h-1px my-2 bg-border"></div>
-            <SpellcheckOptions appState={appState} note={notes[0]} />
-            <div className="min-h-1px my-2 bg-border"></div>
-            <NoteAttributes application={application} note={notes[0]} />
-            <NoteSizeWarning note={notes[0]} />
-          </>
-        ) : null}
-      </>
-    )
-  },
-)
+            </div>
+          </button>
+        </>
+      )}
+      {notes.length === 1 ? (
+        <>
+          <div className="min-h-1px my-2 bg-border"></div>
+          <ListedActionsOption application={application} note={notes[0]} />
+          <div className="min-h-1px my-2 bg-border"></div>
+          <SpellcheckOptions appState={appState} note={notes[0]} />
+          <div className="min-h-1px my-2 bg-border"></div>
+          <NoteAttributes application={application} note={notes[0]} />
+          <NoteSizeWarning note={notes[0]} />
+        </>
+      ) : null}
+    </>
+  )
+})
diff --git a/app/assets/javascripts/Components/Preferences/Panes/General/Defaults.tsx b/app/assets/javascripts/Components/Preferences/Panes/General/Defaults.tsx
index 2dd9ecb35..164205f10 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/General/Defaults.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/General/Defaults.tsx
@@ -1,11 +1,5 @@
 import { Dropdown, DropdownItem } from '@/Components/Dropdown'
-import {
-  FeatureIdentifier,
-  PrefKey,
-  ComponentArea,
-  ComponentMutator,
-  SNComponent,
-} from '@standardnotes/snjs'
+import { FeatureIdentifier, PrefKey, ComponentArea, ComponentMutator, SNComponent } from '@standardnotes/snjs'
 import {
   PreferencesGroup,
   PreferencesSegment,
@@ -18,6 +12,7 @@ import { FunctionComponent } from 'preact'
 import { useEffect, useState } from 'preact/hooks'
 import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
 import { Switch } from '@/Components/Switch'
+import { PLAIN_EDITOR_NAME } from '@/Constants'
 
 type Props = {
   application: WebApplication
@@ -27,11 +22,7 @@ type EditorOption = DropdownItem & {
   value: FeatureIdentifier | 'plain-editor'
 }
 
-const makeEditorDefault = (
-  application: WebApplication,
-  component: SNComponent,
-  currentDefault: SNComponent,
-) => {
+const makeEditorDefault = (application: WebApplication, component: SNComponent, currentDefault: SNComponent) => {
   if (currentDefault) {
     removeEditorDefault(application, currentDefault)
   }
@@ -53,9 +44,7 @@ const removeEditorDefault = (application: WebApplication, component: SNComponent
 }
 
 const getDefaultEditor = (application: WebApplication) => {
-  return application.componentManager
-    .componentsForArea(ComponentArea.Editor)
-    .filter((e) => e.isDefaultEditor())[0]
+  return application.componentManager.componentsForArea(ComponentArea.Editor).filter((e) => e.isDefaultEditor())[0]
 }
 
 export const Defaults: FunctionComponent<Props> = ({ application }) => {
@@ -64,9 +53,7 @@ export const Defaults: FunctionComponent<Props> = ({ application }) => {
     () => getDefaultEditor(application)?.package_info?.identifier || 'plain-editor',
   )
 
-  const [spellcheck, setSpellcheck] = useState(() =>
-    application.getPreference(PrefKey.EditorSpellcheck, true),
-  )
+  const [spellcheck, setSpellcheck] = useState(() => application.getPreference(PrefKey.EditorSpellcheck, true))
 
   const [addNoteToParentFolders, setAddNoteToParentFolders] = useState(() =>
     application.getPreference(PrefKey.NoteAddToParentFolders, true),
@@ -95,7 +82,7 @@ export const Defaults: FunctionComponent<Props> = ({ application }) => {
         {
           icon: 'plain-text',
           iconClassName: 'color-accessory-tint-1',
-          label: 'Plain Editor',
+          label: PLAIN_EDITOR_NAME,
           value: 'plain-editor',
         },
       ])
@@ -124,12 +111,12 @@ export const Defaults: FunctionComponent<Props> = ({ application }) => {
       <PreferencesSegment>
         <Title>Defaults</Title>
         <div>
-          <Subtitle>Default Editor</Subtitle>
-          <Text>New notes will be created using this editor.</Text>
+          <Subtitle>Default Note Type</Subtitle>
+          <Text>New notes will be created using this type.</Text>
           <div className="mt-2">
             <Dropdown
               id="def-editor-dropdown"
-              label="Select the default editor"
+              label="Select the default note type"
               items={editorItems}
               value={defaultEditorValue}
               onChange={setDefaultEditor}
@@ -141,9 +128,8 @@ export const Defaults: FunctionComponent<Props> = ({ application }) => {
           <div className="flex flex-col">
             <Subtitle>Spellcheck</Subtitle>
             <Text>
-              The default spellcheck value for new notes. Spellcheck can be configured per note from
-              the note context menu. Spellcheck may degrade overall typing performance with long
-              notes.
+              The default spellcheck value for new notes. Spellcheck can be configured per note from the note context
+              menu. Spellcheck may degrade overall typing performance with long notes.
             </Text>
           </div>
           <Switch onChange={toggleSpellcheck} checked={spellcheck} />
@@ -152,16 +138,11 @@ export const Defaults: FunctionComponent<Props> = ({ application }) => {
         <div className="flex items-center justify-between">
           <div className="flex flex-col">
             <Subtitle>Add all parent tags when adding a nested tag to a note</Subtitle>
-            <Text>
-              When enabled, adding a nested tag to a note will automatically add all associated
-              parent tags.
-            </Text>
+            <Text>When enabled, adding a nested tag to a note will automatically add all associated parent tags.</Text>
           </div>
           <Switch
             onChange={() => {
-              application
-                .setPreference(PrefKey.NoteAddToParentFolders, !addNoteToParentFolders)
-                .catch(console.error)
+              application.setPreference(PrefKey.NoteAddToParentFolders, !addNoteToParentFolders).catch(console.error)
               setAddNoteToParentFolders(!addNoteToParentFolders)
             }}
             checked={addNoteToParentFolders}
diff --git a/app/assets/javascripts/Constants.ts b/app/assets/javascripts/Constants.ts
index 72048b38d..d109eb9dc 100644
--- a/app/assets/javascripts/Constants.ts
+++ b/app/assets/javascripts/Constants.ts
@@ -20,3 +20,5 @@ export const BYTES_IN_ONE_MEGABYTE = 1_000_000
 export const TAG_FOLDERS_FEATURE_NAME = 'Tag folders'
 export const TAG_FOLDERS_FEATURE_TOOLTIP = 'A Plus or Pro plan is required to enable Tag folders.'
 export const SMART_TAGS_FEATURE_NAME = 'Smart Tags'
+
+export const PLAIN_EDITOR_NAME = 'Plain Text'
diff --git a/package.json b/package.json
index fde58f371..4f70d006e 100644
--- a/package.json
+++ b/package.json
@@ -69,10 +69,10 @@
     "@reach/listbox": "^0.16.2",
     "@reach/tooltip": "^0.16.2",
     "@reach/visually-hidden": "^0.16.0",
-    "@standardnotes/components": "1.7.15",
+    "@standardnotes/components": "1.8.0",
     "@standardnotes/filepicker": "1.13.4",
     "@standardnotes/sncrypto-web": "1.9.0",
-    "@standardnotes/snjs": "2.105.3",
+    "@standardnotes/snjs": "2.106.0",
     "@standardnotes/stylekit": "5.25.0",
     "@zip.js/zip.js": "^2.4.10",
     "mobx": "^6.5.0",
diff --git a/yarn.lock b/yarn.lock
index 2a35ef127..b73d4e75c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2437,10 +2437,10 @@
   resolved "https://registry.yarnpkg.com/@standardnotes/common/-/common-1.19.6.tgz#6c672f4f10d5ed123a2c392dfb35dbe3c698b3b9"
   integrity sha512-HxPrV9JhLp//S7h+QjOjlMPy0lgrjLT4iBKzr8JG8lUeWSS1mY3p1I+w0D9+yiraS2SPq2L14Z0VKds0zs9HXw==
 
-"@standardnotes/components@1.7.15":
-  version "1.7.15"
-  resolved "https://registry.yarnpkg.com/@standardnotes/components/-/components-1.7.15.tgz#3d57dd21cd4bf1f95eea7521fce7dd62e8f99455"
-  integrity sha512-fZOaqi62BDhVkqH6Bd9NQhVPyPR3KARob8xm/JhMLWt1d8G1ZFEQ/IOLTMFpYQCt9IroLG/pl6GD0Xj46ISgkw==
+"@standardnotes/components@1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/components/-/components-1.8.0.tgz#eaeadd6c0eb36c034cd2c9d6b625f463a0188482"
+  integrity sha512-mgbekII0aMVkVuNZNXspLUoTP/fTf74Mz6ic91/8ca7S/e/4TcFg9OgTBV5Fqy/ShA42fhHEfJUG4QgRR+KdOw==
 
 "@standardnotes/config@^2.4.1":
   version "2.4.1"
@@ -2450,27 +2450,27 @@
     "@typescript-eslint/eslint-plugin" "^5.12.1"
     "@typescript-eslint/parser" "^5.12.1"
 
-"@standardnotes/domain-events@^2.27.13":
-  version "2.27.13"
-  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.27.13.tgz#ebe9d06b154fa8f40cbda6e4da507856f052f8d0"
-  integrity sha512-Cc+bDNtHFqLnNyr3freB9DmGWDVl1zrWPHHaEahfQyA8RnBkGrQ28xz5+0Q5lKLTsBjGppi7Py/VPD+QMvdNmg==
+"@standardnotes/domain-events@^2.27.14":
+  version "2.27.14"
+  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.27.14.tgz#3d3829f51d4d88b8c64a260b719e6edbc3bfb5f3"
+  integrity sha512-AsuNYvYs9L6Ib+FpLpp86OpP0p9wB0LNfwtJm4aXJtbHxi63vRO7xLZvfiFrGr9Fj8OB6aSZ6lH0TpUSk18H7w==
   dependencies:
     "@standardnotes/auth" "^3.18.11"
-    "@standardnotes/features" "^1.39.0"
+    "@standardnotes/features" "^1.40.0"
 
-"@standardnotes/encryption@^1.6.1":
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.6.1.tgz#51d1d69a1c45e95d5486adfa624af4766fbb94a8"
-  integrity sha512-qKg5An1ZHY+gDHb96T8zEIQl5TcRaZNPeCP2zULQBEyLzhFDlyoz8MMRiZPa6yjiCDEODfwG87gQwlaFGkFR3Q==
+"@standardnotes/encryption@^1.6.2":
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.6.2.tgz#936a1cc7c80fff06b4d960afb9e954569ef953ff"
+  integrity sha512-KqM3ht58VDjQzNAlStFhUquURAHWZs3HH2agQFRGJZZop0KPQqzgs6LIXRgw0Yyo8MrnMreMobRxuINWj8ddGQ==
   dependencies:
-    "@standardnotes/models" "^1.6.2"
-    "@standardnotes/responses" "^1.6.13"
-    "@standardnotes/services" "^1.10.1"
+    "@standardnotes/models" "^1.6.3"
+    "@standardnotes/responses" "^1.6.14"
+    "@standardnotes/services" "^1.10.2"
 
-"@standardnotes/features@^1.39.0":
-  version "1.39.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.39.0.tgz#d2234eec2664fbe8fc3946e2349d6d2c7348c2f1"
-  integrity sha512-r5vuJoDsi6W/ZomOYMMe0DC3YJLbhYDn9NkYglsi0/F5aQUciIg9hLUb0aRrQm/q9zQ5+zEJ8ukN6f5sJGYYcw==
+"@standardnotes/features@^1.40.0":
+  version "1.40.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.40.0.tgz#362f9656b6125cab61752d038981d67f12689fb6"
+  integrity sha512-3C/fj7/HQ6S3HZJujB92QW6ydc0oOaCrUPtYkCMHnjBV0qpGDtpzbR3GLYqmHpmiM5H87s9BppEQleiMu1+dyA==
   dependencies:
     "@standardnotes/auth" "^3.18.11"
     "@standardnotes/common" "^1.19.6"
@@ -2483,43 +2483,43 @@
     "@standardnotes/common" "^1.19.6"
     "@standardnotes/utils" "^1.6.3"
 
-"@standardnotes/files@^1.0.5":
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.0.5.tgz#ed293082167555ca89ce1c2a879eb7307064db61"
-  integrity sha512-ACsl9emP7S9OpCC8FcGZZxdxGJjMjZ3wvshevsjHqGtKcKQX/2/xU8FcUNg05VzvGMicV8Smekp+/6BvcNpjEA==
+"@standardnotes/files@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.0.6.tgz#6fafd7114a014c32c320ecc328f1bfdf9f8856f1"
+  integrity sha512-8/+bLEQP91JQKEh0du8lRRIuHV+jB62s+jTcK+nuyFkg72JR7Qgeu+tUpV3O3vassj9ZaZhO5s1+pgOiJU+QCg==
   dependencies:
-    "@standardnotes/models" "^1.6.2"
-    "@standardnotes/responses" "^1.6.13"
-    "@standardnotes/services" "^1.10.1"
+    "@standardnotes/models" "^1.6.3"
+    "@standardnotes/responses" "^1.6.14"
+    "@standardnotes/services" "^1.10.2"
     "@standardnotes/utils" "^1.6.3"
 
-"@standardnotes/models@^1.6.2":
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.6.2.tgz#45ae19246ba1ac476ed26bbe3f9fa6e3ce6c9271"
-  integrity sha512-WJtlDi2tj+HkG10VQygFbzUfon76N7gV73wuryocJ1LE5LiJT7O+LlQvrVM96QWxDdbjUXxA4fz++W0v4c6m7w==
+"@standardnotes/models@^1.6.3":
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.6.3.tgz#d3d344cc877fd484f87171a3465d732f15f49199"
+  integrity sha512-qmOJsxgpov+VTzhJYc9uqTDP1+JvtFXjJSkhiHiA4E/ZRrejxvTl6iPu6ZF5gVHWf+93KsGhw449pc/kjj/5bA==
   dependencies:
-    "@standardnotes/features" "^1.39.0"
-    "@standardnotes/responses" "^1.6.13"
+    "@standardnotes/features" "^1.40.0"
+    "@standardnotes/responses" "^1.6.14"
     "@standardnotes/utils" "^1.6.3"
 
-"@standardnotes/responses@^1.6.13":
-  version "1.6.13"
-  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.6.13.tgz#aac7da9c9f158150d23e41238eade5fa6fe98b76"
-  integrity sha512-ponGQwqcZlt/5h8QzXnG5gJLiLG7uq6cYmsyQKVigLSSllv4eN/I7WLp1HWdZGcPPyh/+HCYk5z6YgSJM2Rulg==
+"@standardnotes/responses@^1.6.14":
+  version "1.6.14"
+  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.6.14.tgz#5c9cc1b2dbf36c335350c31c4dc5ef2a971365e3"
+  integrity sha512-iEPt0iaYyb1SjicAaKbH3jHgrExDz3R9fzCUlB0wh61B35g/8czi0thSzTmJI2DP3/hMqWOIUDj1M1piN+Rqog==
   dependencies:
     "@standardnotes/auth" "^3.18.11"
     "@standardnotes/common" "^1.19.6"
-    "@standardnotes/features" "^1.39.0"
+    "@standardnotes/features" "^1.40.0"
 
-"@standardnotes/services@^1.10.1":
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.10.1.tgz#ef166ead223d91b7124b9e0f134ae46e4479159c"
-  integrity sha512-Q55OMJXJS/HZpQ5Iwl20u3594kkE7VF9M/yap0H9kFQJcKlyYlsSF1W7QdyFCx5keHT0JLRzjY88muBcb9o9fA==
+"@standardnotes/services@^1.10.2":
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.10.2.tgz#b21ac3596b1b9ea326dc7e99b0ac01e487c0a0db"
+  integrity sha512-LGDa9OMjhSB/nu6uAIo7qG6D0cZ9jg/3dZzspBFx8Jz/eE/ZgjufNXm6iwu5FxhMtybLOw2fUkSCmA8mdCBNkA==
   dependencies:
     "@standardnotes/auth" "^3.18.11"
     "@standardnotes/common" "^1.19.6"
-    "@standardnotes/models" "^1.6.2"
-    "@standardnotes/responses" "^1.6.13"
+    "@standardnotes/models" "^1.6.3"
+    "@standardnotes/responses" "^1.6.14"
     "@standardnotes/utils" "^1.6.3"
 
 "@standardnotes/settings@^1.14.1":
@@ -2541,21 +2541,21 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.105.3":
-  version "2.105.3"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.105.3.tgz#4eebce30c8cc6469ba6aada28ceb9825b47827c5"
-  integrity sha512-dYzGCbljJ6x88+kJX2iMS+8hyKGSvLljJqlmeWYVnoVPs9ZR2CkfZfjugaVkNIMS9mteuAO36t0YUyhQA6yBPQ==
+"@standardnotes/snjs@2.106.0":
+  version "2.106.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.106.0.tgz#2eecf2e1bfcbcd913ed993346c140fd857d93645"
+  integrity sha512-EB1FXqVfe2f/Bgcl8xzi18wWkq9RWVxVDJVNJqYorALEY0yR/3ERjA8ZcV5trY4l0oLiG55rzYYTlgqDHj99/g==
   dependencies:
     "@standardnotes/auth" "^3.18.11"
     "@standardnotes/common" "^1.19.6"
-    "@standardnotes/domain-events" "^2.27.13"
-    "@standardnotes/encryption" "^1.6.1"
-    "@standardnotes/features" "^1.39.0"
+    "@standardnotes/domain-events" "^2.27.14"
+    "@standardnotes/encryption" "^1.6.2"
+    "@standardnotes/features" "^1.40.0"
     "@standardnotes/filepicker" "^1.13.4"
-    "@standardnotes/files" "^1.0.5"
-    "@standardnotes/models" "^1.6.2"
-    "@standardnotes/responses" "^1.6.13"
-    "@standardnotes/services" "^1.10.1"
+    "@standardnotes/files" "^1.0.6"
+    "@standardnotes/models" "^1.6.3"
+    "@standardnotes/responses" "^1.6.14"
+    "@standardnotes/services" "^1.10.2"
     "@standardnotes/settings" "^1.14.1"
     "@standardnotes/sncrypto-common" "^1.8.0"
     "@standardnotes/utils" "^1.6.3"

From 43d94fbcbff4cf7f6bc2703d3c42852e9ffbd51b Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Tue, 3 May 2022 10:51:40 -0500
Subject: [PATCH 060/102] chore: prettier files

---
 .../Components/Abstract/PureComponent.tsx     |   5 +-
 .../AccountMenu/ConfirmPassword.tsx           |   6 +-
 .../Components/AccountMenu/CreateAccount.tsx  |  13 +-
 .../AccountMenu/GeneralAccountMenu.tsx        |  13 +-
 .../Components/AccountMenu/SignIn.tsx         | 320 ++++++------
 .../WorkspaceSwitcherOption.tsx               | 102 ++--
 .../Components/AccountMenu/index.tsx          |   7 +-
 .../Components/Button/RoundIconButton.tsx     |   7 +-
 .../ChallengeModal/ChallengeModal.tsx         |  17 +-
 .../ChallengeModal/ChallengePrompt.tsx        |  22 +-
 .../LockscreenWorkspaceSwitcher.tsx           |  17 +-
 .../javascripts/Components/Checkbox/index.tsx |   8 +-
 .../Components/ComponentView/IsDeprecated.tsx |   9 +-
 .../ComponentView/OfflineRestricted.tsx       |  14 +-
 .../Components/ComponentView/UrlMissing.tsx   |   9 +-
 .../Components/ComponentView/index.tsx        |   9 +-
 .../javascripts/Components/Dropdown/index.tsx |  30 +-
 .../javascripts/Components/Footer/index.tsx   |  36 +-
 .../Components/Input/DecoratedInput.tsx       |   4 +-
 .../Input/DecoratedPasswordInput.tsx          |  12 +-
 .../javascripts/Components/Menu/Menu.tsx      |  19 +-
 .../javascripts/Components/Menu/MenuItem.tsx  |  14 +-
 .../MultipleSelectedNotes/index.tsx           |   4 +-
 .../Components/Navigation/index.tsx           |   7 +-
 .../Components/NoteView/NoteView.test.ts      |  24 +-
 .../Components/NoteView/NoteView.tsx          | 138 ++----
 .../Components/NotesContextMenu/index.tsx     |   4 +-
 .../NotesList/NotesListOptionsMenu.tsx        |  32 +-
 .../NotesOptions/ListedActionsOption.tsx      |  18 +-
 .../NotesOptions/NotesOptionsPanel.tsx        | 134 +++--
 .../Components/NotesView/index.tsx            |  23 +-
 .../Components/OtherSessionsSignOut/index.tsx |  12 +-
 .../Components/PanelResizer/index.tsx         |  18 +-
 .../Components/PasswordWizard/index.tsx       |  45 +-
 .../Components/PermissionsModal/index.tsx     |   5 +-
 .../Preferences/Panes/Account/Advanced.tsx    |  45 +-
 .../Panes/Account/Authentication.tsx          |  22 +-
 .../Account/ChangeEmail/ChangeEmailForm.tsx   |   5 +-
 .../ChangeEmail/ChangeEmailSuccess.tsx        |   4 +-
 .../Panes/Account/ChangeEmail/index.tsx       |  19 +-
 .../Preferences/Panes/Account/Credentials.tsx |  17 +-
 .../Panes/Account/OfflineSubscription.tsx     |   8 +-
 .../Preferences/Panes/Account/SignOutView.tsx |   6 +-
 .../Account/Subscription/NoSubscription.tsx   |  16 +-
 .../Account/Subscription/Subscription.tsx     |  51 +-
 .../Subscription/SubscriptionInformation.tsx  |  88 ++--
 .../Preferences/Panes/Account/Sync.tsx        |  11 +-
 .../Preferences/Panes/Appearance.tsx          |  20 +-
 .../CloudBackups/CloudBackupProvider.tsx      |  13 +-
 .../Panes/Backups/CloudBackups/index.tsx      |  33 +-
 .../Preferences/Panes/Backups/DataBackups.tsx |  29 +-
 .../Panes/Backups/EmailBackups.tsx            |  21 +-
 .../Preferences/Panes/CloudLink.tsx           |  51 +-
 .../Extensions/ConfirmCustomExtension.tsx     |  21 +-
 .../Panes/Extensions/ExtensionItem.tsx        |  20 +-
 .../Extensions/ExtensionsLatestVersions.ts    |   5 +-
 .../Preferences/Panes/Extensions/index.tsx    |  15 +-
 .../Preferences/Panes/General/Labs.tsx        |  70 ++-
 .../Preferences/Panes/General/index.tsx       |   6 +-
 .../Preferences/Panes/HelpFeedback.tsx        |  51 +-
 .../Preferences/Panes/Listed/BlogItem.tsx     |   6 +-
 .../Preferences/Panes/Listed/index.tsx        |   4 +-
 .../Preferences/Panes/Security/Encryption.tsx |   7 +-
 .../Panes/Security/PasscodeLock.tsx           |  54 +-
 .../Preferences/Panes/Security/Privacy.tsx    |  14 +-
 .../Panes/Security/Protections.tsx            |  23 +-
 .../Panes/TwoFactorAuth/AuthAppInfoPopup.tsx  |   8 +-
 .../Panes/TwoFactorAuth/SaveSecretKey.tsx     |  14 +-
 .../Panes/TwoFactorAuth/ScanQRCode.tsx        |  24 +-
 .../TwoFactorAuth/TwoFactorActivation.ts      |   7 +-
 .../Panes/TwoFactorAuth/TwoFactorAuth.ts      |  13 +-
 .../Panes/TwoFactorAuth/TwoFactorAuthView.tsx |   7 +-
 .../Panes/TwoFactorAuth/TwoFactorSuccess.tsx  |  11 +-
 .../Panes/TwoFactorAuth/Verification.tsx      |  19 +-
 .../PreferencesComponents/Content.tsx         |  14 +-
 .../PreferencesComponents/MenuItem.tsx        |   8 +-
 .../PreferencesComponents/PreferencesPane.tsx |   4 +-
 .../Components/Preferences/PreferencesMenu.ts |  19 +-
 .../Preferences/PreferencesView.tsx           |  14 +-
 .../Components/PremiumFeaturesModal/index.tsx |   4 +-
 .../PurchaseFlow/Panes/CreateAccount.tsx      |  11 +-
 .../Components/PurchaseFlow/Panes/SignIn.tsx  |   8 +-
 .../PurchaseFlow/PurchaseFlowView.tsx         |  70 ++-
 .../PurchaseFlow/PurchaseFlowWrapper.tsx      |   4 +-
 .../QuickSettingsMenu/EventHandlers.ts        |   7 +-
 .../QuickSettingsMenu/FocusModeSwitch.tsx     |  15 +-
 .../QuickSettingsMenu/ThemesMenuButton.tsx    |  15 +-
 .../Components/QuickSettingsMenu/index.tsx    | 469 ++++++++----------
 .../HistoryListContainer.tsx                  |  50 +-
 .../RevisionHistoryModal/HistoryListItem.tsx  |  14 +-
 .../LegacyHistoryList.tsx                     |   4 +-
 .../RemoteHistoryList.tsx                     |  12 +-
 .../RevisionContentLocked.tsx                 |   3 +-
 .../RevisionHistoryModalWrapper.tsx           |  28 +-
 .../SelectedRevisionContent.tsx               |   3 +-
 .../SessionHistoryList.tsx                    |   4 +-
 .../Components/RevisionHistoryModal/utils.ts  |  13 +-
 .../Components/SearchOptions/index.tsx        |  18 +-
 .../Components/SessionsModal/index.tsx        |   8 +-
 .../Components/Shared/AccordionItem.tsx       |   6 +-
 .../Components/Shared/ModalDialog.tsx         |  16 +-
 .../javascripts/Components/Switch/index.tsx   |  11 +-
 .../Components/SyncResolutionMenu/index.tsx   |  10 +-
 .../TagAutocomplete/AutocompleteTagInput.tsx  |   8 +-
 .../TagAutocomplete/AutocompleteTagResult.tsx |   8 +-
 .../Components/Tags/RootTagDropZone.tsx       |   5 +-
 .../Components/Tags/SmartViewsList.tsx        |   9 +-
 .../Components/Tags/SmartViewsListItem.tsx    |   8 +-
 .../Components/Tags/TagContextMenu.tsx        |  18 +-
 .../javascripts/Components/Tags/TagsList.tsx  |   4 +-
 .../Components/Tags/TagsListItem.tsx          | 465 +++++++++--------
 .../Components/Tags/TagsSection.tsx           |   6 +-
 .../Components/Tags/TagsSectionTitle.tsx      |  56 +--
 .../Hooks/useCloseOnClickOutside.ts           |   5 +-
 .../Hooks/useListKeyboardNavigation.ts        |  14 +-
 .../javascripts/Hooks/usePremiumModal.tsx     |  52 +-
 .../javascripts/Services/ArchiveManager.ts    |   8 +-
 .../javascripts/Services/ThemeManager.ts      |  75 ++-
 app/assets/javascripts/Strings.ts             |  27 +-
 .../javascripts/UIModels/AppState/AppState.ts |  13 +-
 .../AppState/NoAccountWarningState.ts         |   4 +-
 .../UIModels/AppState/NoteTagsState.ts        |  34 +-
 .../UIModels/AppState/NotesState.ts           |  12 +-
 .../UIModels/AppState/NotesViewState.ts       |  59 +--
 .../UIModels/AppState/SubscriptionState.ts    |   6 +-
 .../CalculateDifferenceBetweenDatesInDays.ts  |  16 +-
 app/assets/javascripts/Utils/StringUtils.ts   |   4 +-
 127 files changed, 1365 insertions(+), 2428 deletions(-)

diff --git a/app/assets/javascripts/Components/Abstract/PureComponent.tsx b/app/assets/javascripts/Components/Abstract/PureComponent.tsx
index 6351b53bd..74041cef2 100644
--- a/app/assets/javascripts/Components/Abstract/PureComponent.tsx
+++ b/app/assets/javascripts/Components/Abstract/PureComponent.tsx
@@ -8,10 +8,7 @@ import { findDOMNode, unmountComponentAtNode } from 'preact/compat'
 export type PureComponentState = Partial<Record<string, any>>
 export type PureComponentProps = Partial<Record<string, any>>
 
-export abstract class PureComponent<
-  P = PureComponentProps,
-  S = PureComponentState,
-> extends Component<P, S> {
+export abstract class PureComponent<P = PureComponentProps, S = PureComponentState> extends Component<P, S> {
   private unsubApp!: () => void
   private unsubState!: () => void
   private reactionDisposers: IReactionDisposer[] = []
diff --git a/app/assets/javascripts/Components/AccountMenu/ConfirmPassword.tsx b/app/assets/javascripts/Components/AccountMenu/ConfirmPassword.tsx
index db4065ebf..66afcc84e 100644
--- a/app/assets/javascripts/Components/AccountMenu/ConfirmPassword.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/ConfirmPassword.tsx
@@ -107,10 +107,8 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
         </div>
         <div className="px-3 mb-3 text-sm">
           Because your notes are encrypted using your password,{' '}
-          <span className="color-dark-red">
-            Standard Notes does not have a password reset option
-          </span>
-          . If you forget your password, you will permanently lose access to your data.
+          <span className="color-dark-red">Standard Notes does not have a password reset option</span>. If you forget
+          your password, you will permanently lose access to your data.
         </div>
         <form onSubmit={handleConfirmFormSubmit} className="px-3 mb-1">
           <DecoratedPasswordInput
diff --git a/app/assets/javascripts/Components/AccountMenu/CreateAccount.tsx b/app/assets/javascripts/Components/AccountMenu/CreateAccount.tsx
index edb3b202d..0c3a4d78f 100644
--- a/app/assets/javascripts/Components/AccountMenu/CreateAccount.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/CreateAccount.tsx
@@ -111,19 +111,10 @@ export const CreateAccount: FunctionComponent<Props> = observer(
             ref={passwordInputRef}
             value={password}
           />
-          <Button
-            className="btn-w-full mt-1"
-            label="Next"
-            variant="primary"
-            onClick={handleRegisterFormSubmit}
-          />
+          <Button className="btn-w-full mt-1" label="Next" variant="primary" onClick={handleRegisterFormSubmit} />
         </form>
         <div className="h-1px my-2 bg-border"></div>
-        <AdvancedOptions
-          application={application}
-          appState={appState}
-          onVaultChange={onVaultChange}
-        />
+        <AdvancedOptions application={application} appState={appState} onVaultChange={onVaultChange} />
       </>
     )
   },
diff --git a/app/assets/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx b/app/assets/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx
index 3834aa89f..64e537a32 100644
--- a/app/assets/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx
@@ -26,9 +26,7 @@ const iconClassName = 'color-neutral mr-2'
 export const GeneralAccountMenu: FunctionComponent<Props> = observer(
   ({ application, appState, setMenuPane, closeMenu, mainApplicationGroup }) => {
     const [isSyncingInProgress, setIsSyncingInProgress] = useState(false)
-    const [lastSyncDate, setLastSyncDate] = useState(
-      formatLastSyncDate(application.sync.getLastSyncDate() as Date),
-    )
+    const [lastSyncDate, setLastSyncDate] = useState(formatLastSyncDate(application.sync.getLastSyncDate() as Date))
 
     const doSynchronization = async () => {
       setIsSyncingInProgress(true)
@@ -97,8 +95,8 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
           <>
             <div className="px-3 mb-1">
               <div className="mb-3 color-foreground">
-                You’re offline. Sign in to sync your notes and preferences across all your devices
-                and enable end-to-end encryption.
+                You’re offline. Sign in to sync your notes and preferences across all your devices and enable end-to-end
+                encryption.
               </div>
               <div className="flex items-center color-grey-1">
                 <Icon type="cloud-off" className="mr-2" />
@@ -114,10 +112,7 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
           initialFocus={!application.hasAccount() ? CREATE_ACCOUNT_INDEX : SWITCHER_INDEX}
         >
           <MenuItemSeparator />
-          <WorkspaceSwitcherOption
-            mainApplicationGroup={mainApplicationGroup}
-            appState={appState}
-          />
+          <WorkspaceSwitcherOption mainApplicationGroup={mainApplicationGroup} appState={appState} />
           <MenuItemSeparator />
           {user ? (
             <MenuItem
diff --git a/app/assets/javascripts/Components/AccountMenu/SignIn.tsx b/app/assets/javascripts/Components/AccountMenu/SignIn.tsx
index bfa7f4d0f..a05b71bbd 100644
--- a/app/assets/javascripts/Components/AccountMenu/SignIn.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/SignIn.tsx
@@ -19,188 +19,186 @@ type Props = {
   setMenuPane: (pane: AccountMenuPane) => void
 }
 
-export const SignInPane: FunctionComponent<Props> = observer(
-  ({ application, appState, setMenuPane }) => {
-    const { notesAndTagsCount } = appState.accountMenu
-    const [email, setEmail] = useState('')
-    const [password, setPassword] = useState('')
-    const [error, setError] = useState('')
-    const [isEphemeral, setIsEphemeral] = useState(false)
+export const SignInPane: FunctionComponent<Props> = observer(({ application, appState, setMenuPane }) => {
+  const { notesAndTagsCount } = appState.accountMenu
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [isEphemeral, setIsEphemeral] = useState(false)
 
-    const [isStrictSignin, setIsStrictSignin] = useState(false)
-    const [isSigningIn, setIsSigningIn] = useState(false)
-    const [shouldMergeLocal, setShouldMergeLocal] = useState(true)
-    const [isVault, setIsVault] = useState(false)
+  const [isStrictSignin, setIsStrictSignin] = useState(false)
+  const [isSigningIn, setIsSigningIn] = useState(false)
+  const [shouldMergeLocal, setShouldMergeLocal] = useState(true)
+  const [isVault, setIsVault] = useState(false)
 
-    const emailInputRef = useRef<HTMLInputElement>(null)
-    const passwordInputRef = useRef<HTMLInputElement>(null)
+  const emailInputRef = useRef<HTMLInputElement>(null)
+  const passwordInputRef = useRef<HTMLInputElement>(null)
 
-    useEffect(() => {
-      if (emailInputRef?.current) {
-        emailInputRef.current?.focus()
-      }
-      if (isDev && window.devAccountEmail) {
-        setEmail(window.devAccountEmail)
-        setPassword(window.devAccountPassword as string)
-      }
-    }, [])
-
-    const resetInvalid = () => {
-      if (error.length) {
-        setError('')
-      }
+  useEffect(() => {
+    if (emailInputRef?.current) {
+      emailInputRef.current?.focus()
     }
-
-    const handleEmailChange = (text: string) => {
-      setEmail(text)
+    if (isDev && window.devAccountEmail) {
+      setEmail(window.devAccountEmail)
+      setPassword(window.devAccountPassword as string)
     }
+  }, [])
 
-    const handlePasswordChange = (text: string) => {
-      if (error.length) {
-        setError('')
-      }
-      setPassword(text)
+  const resetInvalid = () => {
+    if (error.length) {
+      setError('')
     }
+  }
 
-    const handleEphemeralChange = () => {
-      setIsEphemeral(!isEphemeral)
+  const handleEmailChange = (text: string) => {
+    setEmail(text)
+  }
+
+  const handlePasswordChange = (text: string) => {
+    if (error.length) {
+      setError('')
     }
+    setPassword(text)
+  }
 
-    const handleStrictSigninChange = () => {
-      setIsStrictSignin(!isStrictSignin)
-    }
+  const handleEphemeralChange = () => {
+    setIsEphemeral(!isEphemeral)
+  }
 
-    const handleShouldMergeChange = () => {
-      setShouldMergeLocal(!shouldMergeLocal)
-    }
+  const handleStrictSigninChange = () => {
+    setIsStrictSignin(!isStrictSignin)
+  }
 
-    const signIn = () => {
-      setIsSigningIn(true)
-      emailInputRef?.current?.blur()
-      passwordInputRef?.current?.blur()
+  const handleShouldMergeChange = () => {
+    setShouldMergeLocal(!shouldMergeLocal)
+  }
 
-      application
-        .signIn(email, password, isStrictSignin, isEphemeral, shouldMergeLocal)
-        .then((res) => {
-          if (res.error) {
-            throw new Error(res.error.message)
-          }
-          appState.accountMenu.closeAccountMenu()
-        })
-        .catch((err) => {
-          console.error(err)
-          setError(err.message ?? err.toString())
-          setPassword('')
-          passwordInputRef?.current?.blur()
-        })
-        .finally(() => {
-          setIsSigningIn(false)
-        })
-    }
+  const signIn = () => {
+    setIsSigningIn(true)
+    emailInputRef?.current?.blur()
+    passwordInputRef?.current?.blur()
 
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Enter') {
-        handleSignInFormSubmit(e)
-      }
-    }
-
-    const onVaultChange = useCallback(
-      (newIsVault: boolean, vaultedEmail?: string) => {
-        setIsVault(newIsVault)
-        if (newIsVault && vaultedEmail) {
-          setEmail(vaultedEmail)
+    application
+      .signIn(email, password, isStrictSignin, isEphemeral, shouldMergeLocal)
+      .then((res) => {
+        if (res.error) {
+          throw new Error(res.error.message)
         }
-      },
-      [setEmail],
-    )
+        appState.accountMenu.closeAccountMenu()
+      })
+      .catch((err) => {
+        console.error(err)
+        setError(err.message ?? err.toString())
+        setPassword('')
+        passwordInputRef?.current?.blur()
+      })
+      .finally(() => {
+        setIsSigningIn(false)
+      })
+  }
 
-    const handleSignInFormSubmit = (e: Event) => {
-      e.preventDefault()
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleSignInFormSubmit(e)
+    }
+  }
 
-      if (!email || email.length === 0) {
-        emailInputRef?.current?.focus()
-        return
+  const onVaultChange = useCallback(
+    (newIsVault: boolean, vaultedEmail?: string) => {
+      setIsVault(newIsVault)
+      if (newIsVault && vaultedEmail) {
+        setEmail(vaultedEmail)
       }
+    },
+    [setEmail],
+  )
 
-      if (!password || password.length === 0) {
-        passwordInputRef?.current?.focus()
-        return
-      }
+  const handleSignInFormSubmit = (e: Event) => {
+    e.preventDefault()
 
-      signIn()
+    if (!email || email.length === 0) {
+      emailInputRef?.current?.focus()
+      return
     }
 
-    return (
-      <>
-        <div className="flex items-center px-3 mt-1 mb-3">
-          <IconButton
-            icon="arrow-left"
-            title="Go back"
-            className="flex mr-2 color-neutral p-0"
-            onClick={() => setMenuPane(AccountMenuPane.GeneralMenu)}
-            focusable={true}
-            disabled={isSigningIn}
-          />
-          <div className="sn-account-menu-headline">Sign in</div>
-        </div>
-        <div className="px-3 mb-1">
-          <DecoratedInput
-            className={`mb-2 ${error ? 'border-dark-red' : null}`}
-            left={[<Icon type="email" className="color-neutral" />]}
-            type="email"
-            placeholder="Email"
-            value={email}
-            onChange={handleEmailChange}
-            onFocus={resetInvalid}
-            onKeyDown={handleKeyDown}
-            disabled={isSigningIn || isVault}
-            ref={emailInputRef}
-          />
-          <DecoratedPasswordInput
-            className={`mb-2 ${error ? 'border-dark-red' : null}`}
-            disabled={isSigningIn}
-            left={[<Icon type="password" className="color-neutral" />]}
-            onChange={handlePasswordChange}
-            onFocus={resetInvalid}
-            onKeyDown={handleKeyDown}
-            placeholder="Password"
-            ref={passwordInputRef}
-            value={password}
-          />
-          {error ? <div className="color-dark-red my-2">{error}</div> : null}
-          <Button
-            className="btn-w-full mt-1 mb-3"
-            label={isSigningIn ? 'Signing in...' : 'Sign in'}
-            variant="primary"
-            onClick={handleSignInFormSubmit}
-            disabled={isSigningIn}
-          />
-          <Checkbox
-            name="is-ephemeral"
-            label="Stay signed in"
-            checked={!isEphemeral}
-            disabled={isSigningIn}
-            onChange={handleEphemeralChange}
-          />
-          {notesAndTagsCount > 0 ? (
-            <Checkbox
-              name="should-merge-local"
-              label={`Merge local data (${notesAndTagsCount} notes and tags)`}
-              checked={shouldMergeLocal}
-              disabled={isSigningIn}
-              onChange={handleShouldMergeChange}
-            />
-          ) : null}
-        </div>
-        <div className="h-1px my-2 bg-border"></div>
-        <AdvancedOptions
-          appState={appState}
-          application={application}
+    if (!password || password.length === 0) {
+      passwordInputRef?.current?.focus()
+      return
+    }
+
+    signIn()
+  }
+
+  return (
+    <>
+      <div className="flex items-center px-3 mt-1 mb-3">
+        <IconButton
+          icon="arrow-left"
+          title="Go back"
+          className="flex mr-2 color-neutral p-0"
+          onClick={() => setMenuPane(AccountMenuPane.GeneralMenu)}
+          focusable={true}
           disabled={isSigningIn}
-          onVaultChange={onVaultChange}
-          onStrictSignInChange={handleStrictSigninChange}
         />
-      </>
-    )
-  },
-)
+        <div className="sn-account-menu-headline">Sign in</div>
+      </div>
+      <div className="px-3 mb-1">
+        <DecoratedInput
+          className={`mb-2 ${error ? 'border-dark-red' : null}`}
+          left={[<Icon type="email" className="color-neutral" />]}
+          type="email"
+          placeholder="Email"
+          value={email}
+          onChange={handleEmailChange}
+          onFocus={resetInvalid}
+          onKeyDown={handleKeyDown}
+          disabled={isSigningIn || isVault}
+          ref={emailInputRef}
+        />
+        <DecoratedPasswordInput
+          className={`mb-2 ${error ? 'border-dark-red' : null}`}
+          disabled={isSigningIn}
+          left={[<Icon type="password" className="color-neutral" />]}
+          onChange={handlePasswordChange}
+          onFocus={resetInvalid}
+          onKeyDown={handleKeyDown}
+          placeholder="Password"
+          ref={passwordInputRef}
+          value={password}
+        />
+        {error ? <div className="color-dark-red my-2">{error}</div> : null}
+        <Button
+          className="btn-w-full mt-1 mb-3"
+          label={isSigningIn ? 'Signing in...' : 'Sign in'}
+          variant="primary"
+          onClick={handleSignInFormSubmit}
+          disabled={isSigningIn}
+        />
+        <Checkbox
+          name="is-ephemeral"
+          label="Stay signed in"
+          checked={!isEphemeral}
+          disabled={isSigningIn}
+          onChange={handleEphemeralChange}
+        />
+        {notesAndTagsCount > 0 ? (
+          <Checkbox
+            name="should-merge-local"
+            label={`Merge local data (${notesAndTagsCount} notes and tags)`}
+            checked={shouldMergeLocal}
+            disabled={isSigningIn}
+            onChange={handleShouldMergeChange}
+          />
+        ) : null}
+      </div>
+      <div className="h-1px my-2 bg-border"></div>
+      <AdvancedOptions
+        appState={appState}
+        application={application}
+        disabled={isSigningIn}
+        onVaultChange={onVaultChange}
+        onStrictSignInChange={handleStrictSigninChange}
+      />
+    </>
+  )
+})
diff --git a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx
index 284e0a400..79e58b63f 100644
--- a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx
@@ -13,65 +13,55 @@ type Props = {
   appState: AppState
 }
 
-export const WorkspaceSwitcherOption: FunctionComponent<Props> = observer(
-  ({ mainApplicationGroup, appState }) => {
-    const buttonRef = useRef<HTMLButtonElement>(null)
-    const menuRef = useRef<HTMLDivElement>(null)
-    const [isOpen, setIsOpen] = useState(false)
-    const [menuStyle, setMenuStyle] = useState<SubmenuStyle>()
+export const WorkspaceSwitcherOption: FunctionComponent<Props> = observer(({ mainApplicationGroup, appState }) => {
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+  const [isOpen, setIsOpen] = useState(false)
+  const [menuStyle, setMenuStyle] = useState<SubmenuStyle>()
 
-    const toggleMenu = () => {
-      if (!isOpen) {
-        const menuPosition = calculateSubmenuStyle(buttonRef.current)
-        if (menuPosition) {
-          setMenuStyle(menuPosition)
-        }
+  const toggleMenu = () => {
+    if (!isOpen) {
+      const menuPosition = calculateSubmenuStyle(buttonRef.current)
+      if (menuPosition) {
+        setMenuStyle(menuPosition)
       }
-
-      setIsOpen(!isOpen)
     }
 
-    useEffect(() => {
-      if (isOpen) {
-        setTimeout(() => {
-          const newMenuPosition = calculateSubmenuStyle(buttonRef.current, menuRef.current)
+    setIsOpen(!isOpen)
+  }
 
-          if (newMenuPosition) {
-            setMenuStyle(newMenuPosition)
-          }
-        })
-      }
-    }, [isOpen])
+  useEffect(() => {
+    if (isOpen) {
+      setTimeout(() => {
+        const newMenuPosition = calculateSubmenuStyle(buttonRef.current, menuRef.current)
 
-    return (
-      <>
-        <button
-          ref={buttonRef}
-          className="sn-dropdown-item justify-between focus:bg-info-backdrop focus:shadow-none"
-          tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
-          role="menuitem"
-          onClick={toggleMenu}
-        >
-          <div className="flex items-center">
-            <Icon type="user-switch" className="color-neutral mr-2" />
-            Switch workspace
-          </div>
-          <Icon type="chevron-right" className="color-neutral" />
-        </button>
-        {isOpen && (
-          <div
-            ref={menuRef}
-            className="sn-dropdown max-h-120 min-w-68 py-2 fixed overflow-y-auto"
-            style={menuStyle}
-          >
-            <WorkspaceSwitcherMenu
-              mainApplicationGroup={mainApplicationGroup}
-              appState={appState}
-              isOpen={isOpen}
-            />
-          </div>
-        )}
-      </>
-    )
-  },
-)
+        if (newMenuPosition) {
+          setMenuStyle(newMenuPosition)
+        }
+      })
+    }
+  }, [isOpen])
+
+  return (
+    <>
+      <button
+        ref={buttonRef}
+        className="sn-dropdown-item justify-between focus:bg-info-backdrop focus:shadow-none"
+        tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
+        role="menuitem"
+        onClick={toggleMenu}
+      >
+        <div className="flex items-center">
+          <Icon type="user-switch" className="color-neutral mr-2" />
+          Switch workspace
+        </div>
+        <Icon type="chevron-right" className="color-neutral" />
+      </button>
+      {isOpen && (
+        <div ref={menuRef} className="sn-dropdown max-h-120 min-w-68 py-2 fixed overflow-y-auto" style={menuStyle}>
+          <WorkspaceSwitcherMenu mainApplicationGroup={mainApplicationGroup} appState={appState} isOpen={isOpen} />
+        </div>
+      )}
+    </>
+  )
+})
diff --git a/app/assets/javascripts/Components/AccountMenu/index.tsx b/app/assets/javascripts/Components/AccountMenu/index.tsx
index cf4ae5772..d27726865 100644
--- a/app/assets/javascripts/Components/AccountMenu/index.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/index.tsx
@@ -51,9 +51,7 @@ const MenuPaneSelector: FunctionComponent<PaneSelectorProps> = observer(
           />
         )
       case AccountMenuPane.SignIn:
-        return (
-          <SignInPane appState={appState} application={application} setMenuPane={setMenuPane} />
-        )
+        return <SignInPane appState={appState} application={application} setMenuPane={setMenuPane} />
       case AccountMenuPane.Register:
         return (
           <CreateAccount
@@ -82,8 +80,7 @@ const MenuPaneSelector: FunctionComponent<PaneSelectorProps> = observer(
 
 export const AccountMenu: FunctionComponent<Props> = observer(
   ({ application, appState, onClickOutside, mainApplicationGroup }) => {
-    const { currentPane, setCurrentPane, shouldAnimateCloseMenu, closeAccountMenu } =
-      appState.accountMenu
+    const { currentPane, setCurrentPane, shouldAnimateCloseMenu, closeAccountMenu } = appState.accountMenu
 
     const ref = useRef<HTMLDivElement>(null)
     useCloseOnClickOutside(ref, () => {
diff --git a/app/assets/javascripts/Components/Button/RoundIconButton.tsx b/app/assets/javascripts/Components/Button/RoundIconButton.tsx
index ee3d20325..55882f655 100644
--- a/app/assets/javascripts/Components/Button/RoundIconButton.tsx
+++ b/app/assets/javascripts/Components/Button/RoundIconButton.tsx
@@ -21,12 +21,7 @@ interface Props {
  * IconButton component with an icon
  * preventDefault is already handled within the component
  */
-export const RoundIconButton: FunctionComponent<Props> = ({
-  onClick,
-  type,
-  className,
-  icon: iconType,
-}) => {
+export const RoundIconButton: FunctionComponent<Props> = ({ onClick, type, className, icon: iconType }) => {
   const click = (e: MouseEvent) => {
     e.preventDefault()
     onClick()
diff --git a/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx b/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx
index bd1cdb627..d961747fe 100644
--- a/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx
+++ b/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx
@@ -34,10 +34,7 @@ type Props = {
   onDismiss: (challenge: Challenge) => Promise<void>
 }
 
-const validateValues = (
-  values: ChallengeModalValues,
-  prompts: ChallengePrompt[],
-): ChallengeModalValues | undefined => {
+const validateValues = (values: ChallengeModalValues, prompts: ChallengePrompt[]): ChallengeModalValues | undefined => {
   let hasInvalidValues = false
   const validatedValues = { ...values }
   for (const prompt of prompts) {
@@ -75,10 +72,9 @@ export const ChallengeModal: FunctionComponent<Props> = ({
   const [isProcessing, setIsProcessing] = useState(false)
   const [, setProcessingPrompts] = useState<ChallengePrompt[]>([])
   const [bypassModalFocusLock, setBypassModalFocusLock] = useState(false)
-  const shouldShowForgotPasscode = [
-    ChallengeReason.ApplicationUnlock,
-    ChallengeReason.Migration,
-  ].includes(challenge.reason)
+  const shouldShowForgotPasscode = [ChallengeReason.ApplicationUnlock, ChallengeReason.Migration].includes(
+    challenge.reason,
+  )
   const shouldShowWorkspaceSwitcher = challenge.reason === ChallengeReason.ApplicationUnlock
 
   const submit = async () => {
@@ -268,10 +264,7 @@ export const ChallengeModal: FunctionComponent<Props> = ({
           </Button>
         )}
         {shouldShowWorkspaceSwitcher && (
-          <LockscreenWorkspaceSwitcher
-            mainApplicationGroup={mainApplicationGroup}
-            appState={appState}
-          />
+          <LockscreenWorkspaceSwitcher mainApplicationGroup={mainApplicationGroup} appState={appState} />
         )}
       </DialogContent>
     </DialogOverlay>
diff --git a/app/assets/javascripts/Components/ChallengeModal/ChallengePrompt.tsx b/app/assets/javascripts/Components/ChallengeModal/ChallengePrompt.tsx
index 406962e4e..116c7a5f9 100644
--- a/app/assets/javascripts/Components/ChallengeModal/ChallengePrompt.tsx
+++ b/app/assets/javascripts/Components/ChallengeModal/ChallengePrompt.tsx
@@ -1,8 +1,4 @@
-import {
-  ChallengePrompt,
-  ChallengeValidation,
-  ProtectionSessionDurations,
-} from '@standardnotes/snjs'
+import { ChallengePrompt, ChallengeValidation, ProtectionSessionDurations } from '@standardnotes/snjs'
 import { FunctionComponent } from 'preact'
 import { useEffect, useRef } from 'preact/hooks'
 import { DecoratedInput } from '@/Components/Input/DecoratedInput'
@@ -17,13 +13,7 @@ type Props = {
   isInvalid: boolean
 }
 
-export const ChallengeModalPrompt: FunctionComponent<Props> = ({
-  prompt,
-  values,
-  index,
-  onValueChange,
-  isInvalid,
-}) => {
+export const ChallengeModalPrompt: FunctionComponent<Props> = ({ prompt, values, index, onValueChange, isInvalid }) => {
   const inputRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
@@ -49,9 +39,7 @@ export const ChallengeModalPrompt: FunctionComponent<Props> = ({
               return (
                 <label
                   className={`cursor-pointer px-2 py-1.5 rounded ${
-                    selected
-                      ? 'bg-default color-foreground font-semibold'
-                      : 'color-grey-0 hover:bg-grey-3'
+                    selected ? 'bg-default color-foreground font-semibold' : 'color-grey-0 hover:bg-grey-3'
                   }`}
                 >
                   <input
@@ -88,9 +76,7 @@ export const ChallengeModalPrompt: FunctionComponent<Props> = ({
           onChange={(value) => onValueChange(value, prompt)}
         />
       )}
-      {isInvalid && (
-        <div className="text-sm color-danger mt-2">Invalid authentication, please try again.</div>
-      )}
+      {isInvalid && <div className="text-sm color-danger mt-2">Invalid authentication, please try again.</div>}
     </div>
   )
 }
diff --git a/app/assets/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx b/app/assets/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx
index f9f382d80..19f626a02 100644
--- a/app/assets/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx
+++ b/app/assets/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx
@@ -13,10 +13,7 @@ type Props = {
   appState: AppState
 }
 
-export const LockscreenWorkspaceSwitcher: FunctionComponent<Props> = ({
-  mainApplicationGroup,
-  appState,
-}) => {
+export const LockscreenWorkspaceSwitcher: FunctionComponent<Props> = ({ mainApplicationGroup, appState }) => {
   const buttonRef = useRef<HTMLButtonElement>(null)
   const menuRef = useRef<HTMLDivElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
@@ -51,20 +48,12 @@ export const LockscreenWorkspaceSwitcher: FunctionComponent<Props> = ({
 
   return (
     <div ref={containerRef}>
-      <Button
-        ref={buttonRef}
-        onClick={toggleMenu}
-        className="flex items-center justify-center min-w-76 mt-2"
-      >
+      <Button ref={buttonRef} onClick={toggleMenu} className="flex items-center justify-center min-w-76 mt-2">
         <Icon type="user-switch" className="color-neutral mr-2" />
         Switch workspace
       </Button>
       {isOpen && (
-        <div
-          ref={menuRef}
-          className="sn-dropdown max-h-120 min-w-68 py-2 fixed overflow-y-auto"
-          style={menuStyle}
-        >
+        <div ref={menuRef} className="sn-dropdown max-h-120 min-w-68 py-2 fixed overflow-y-auto" style={menuStyle}>
           <WorkspaceSwitcherMenu
             mainApplicationGroup={mainApplicationGroup}
             appState={appState}
diff --git a/app/assets/javascripts/Components/Checkbox/index.tsx b/app/assets/javascripts/Components/Checkbox/index.tsx
index 11bb910e7..4217c543b 100644
--- a/app/assets/javascripts/Components/Checkbox/index.tsx
+++ b/app/assets/javascripts/Components/Checkbox/index.tsx
@@ -8,13 +8,7 @@ type CheckboxProps = {
   label: string
 }
 
-export const Checkbox: FunctionComponent<CheckboxProps> = ({
-  name,
-  checked,
-  onChange,
-  disabled,
-  label,
-}) => {
+export const Checkbox: FunctionComponent<CheckboxProps> = ({ name, checked, onChange, disabled, label }) => {
   return (
     <label htmlFor={name} className="flex items-center fit-content mb-2">
       <input
diff --git a/app/assets/javascripts/Components/ComponentView/IsDeprecated.tsx b/app/assets/javascripts/Components/ComponentView/IsDeprecated.tsx
index a1f4150c1..fab2a95f8 100644
--- a/app/assets/javascripts/Components/ComponentView/IsDeprecated.tsx
+++ b/app/assets/javascripts/Components/ComponentView/IsDeprecated.tsx
@@ -5,18 +5,13 @@ interface IProps {
   dismissDeprecationMessage: () => void
 }
 
-export const IsDeprecated: FunctionalComponent<IProps> = ({
-  deprecationMessage,
-  dismissDeprecationMessage,
-}) => {
+export const IsDeprecated: FunctionalComponent<IProps> = ({ deprecationMessage, dismissDeprecationMessage }) => {
   return (
     <div className={'sn-component'}>
       <div className={'sk-app-bar no-edges no-top-edge dynamic-height'}>
         <div className={'left'}>
           <div className={'sk-app-bar-item'}>
-            <div className={'sk-label warning'}>
-              {deprecationMessage || 'This extension is deprecated.'}
-            </div>
+            <div className={'sk-label warning'}>{deprecationMessage || 'This extension is deprecated.'}</div>
           </div>
         </div>
         <div className={'right'}>
diff --git a/app/assets/javascripts/Components/ComponentView/OfflineRestricted.tsx b/app/assets/javascripts/Components/ComponentView/OfflineRestricted.tsx
index 290ef05d0..ff2fa1063 100644
--- a/app/assets/javascripts/Components/ComponentView/OfflineRestricted.tsx
+++ b/app/assets/javascripts/Components/ComponentView/OfflineRestricted.tsx
@@ -7,21 +7,17 @@ export const OfflineRestricted: FunctionalComponent = () => {
         <div className={'sk-panel-content'}>
           <div className={'sk-panel-section stretch'}>
             <div className={'sk-panel-column'} />
-            <div className={'sk-h1 sk-bold'}>
-              You have restricted this component to not use a hosted version.
-            </div>
-            <div className={'sk-subtitle'}>
-              Locally-installed components are not available in the web application.
-            </div>
+            <div className={'sk-h1 sk-bold'}>You have restricted this component to not use a hosted version.</div>
+            <div className={'sk-subtitle'}>Locally-installed components are not available in the web application.</div>
             <div className={'sk-panel-row'} />
             <div className={'sk-panel-row'}>
               <div className={'sk-panel-column'}>
                 <div className={'sk-p'}>To continue, choose from the following options:</div>
                 <ul>
                   <li className={'sk-p'}>
-                    Enable the Hosted option for this component by opening the Preferences {'>'}{' '}
-                    General {'>'} Advanced Settings menu and toggling 'Use hosted when local is
-                    unavailable' under this component's options. Then press Reload.
+                    Enable the Hosted option for this component by opening the Preferences {'>'} General {'>'} Advanced
+                    Settings menu and toggling 'Use hosted when local is unavailable' under this component's options.
+                    Then press Reload.
                   </li>
                   <li className={'sk-p'}>Use the desktop application.</li>
                 </ul>
diff --git a/app/assets/javascripts/Components/ComponentView/UrlMissing.tsx b/app/assets/javascripts/Components/ComponentView/UrlMissing.tsx
index c077671f6..ee70ebde6 100644
--- a/app/assets/javascripts/Components/ComponentView/UrlMissing.tsx
+++ b/app/assets/javascripts/Components/ComponentView/UrlMissing.tsx
@@ -10,13 +10,8 @@ export const UrlMissing: FunctionalComponent<IProps> = ({ componentName }) => {
       <div className={'sk-panel static'}>
         <div className={'sk-panel-content'}>
           <div className={'sk-panel-section stretch'}>
-            <div className={'sk-panel-section-title'}>
-              This extension is missing its URL property.
-            </div>
-            <p>
-              In order to access your note immediately, please switch from {componentName} to the
-              Plain Editor.
-            </p>
+            <div className={'sk-panel-section-title'}>This extension is missing its URL property.</div>
+            <p>In order to access your note immediately, please switch from {componentName} to the Plain Editor.</p>
             <br />
             <p>Please contact help@standardnotes.com to remedy this issue.</p>
           </div>
diff --git a/app/assets/javascripts/Components/ComponentView/index.tsx b/app/assets/javascripts/Components/ComponentView/index.tsx
index 826649e2e..c1ae26b32 100644
--- a/app/assets/javascripts/Components/ComponentView/index.tsx
+++ b/app/assets/javascripts/Components/ComponentView/index.tsx
@@ -43,9 +43,7 @@ export const ComponentView: FunctionalComponent<IProps> = observer(
 
     const [hasIssueLoading, setHasIssueLoading] = useState(false)
     const [isLoading, setIsLoading] = useState(true)
-    const [featureStatus, setFeatureStatus] = useState<FeatureStatus>(
-      componentViewer.getFeatureStatus(),
-    )
+    const [featureStatus, setFeatureStatus] = useState<FeatureStatus>(componentViewer.getFeatureStatus())
     const [isComponentValid, setIsComponentValid] = useState(true)
     const [error, setError] = useState<ComponentViewerError | undefined>(undefined)
     const [deprecationMessage, setDeprecationMessage] = useState<string | undefined>(undefined)
@@ -199,10 +197,7 @@ export const ComponentView: FunctionalComponent<IProps> = observer(
           />
         )}
         {deprecationMessage && !isDeprecationMessageDismissed && (
-          <IsDeprecated
-            deprecationMessage={deprecationMessage}
-            dismissDeprecationMessage={dismissDeprecationMessage}
-          />
+          <IsDeprecated deprecationMessage={deprecationMessage} dismissDeprecationMessage={dismissDeprecationMessage} />
         )}
         {error === ComponentViewerError.OfflineRestricted && <OfflineRestricted />}
         {error === ComponentViewerError.MissingUrl && <UrlMissing componentName={component.name} />}
diff --git a/app/assets/javascripts/Components/Dropdown/index.tsx b/app/assets/javascripts/Components/Dropdown/index.tsx
index 9bc9b6b22..15667b7e6 100644
--- a/app/assets/javascripts/Components/Dropdown/index.tsx
+++ b/app/assets/javascripts/Components/Dropdown/index.tsx
@@ -1,11 +1,4 @@
-import {
-  ListboxArrow,
-  ListboxButton,
-  ListboxInput,
-  ListboxList,
-  ListboxOption,
-  ListboxPopover,
-} from '@reach/listbox'
+import { ListboxArrow, ListboxButton, ListboxInput, ListboxList, ListboxOption, ListboxPopover } from '@reach/listbox'
 import VisuallyHidden from '@reach/visually-hidden'
 import { FunctionComponent } from 'preact'
 import { Icon } from '@/Components/Icon'
@@ -53,14 +46,7 @@ const CustomDropdownButton: FunctionComponent<ListboxButtonProps> = ({
   </>
 )
 
-export const Dropdown: FunctionComponent<DropdownProps> = ({
-  id,
-  label,
-  items,
-  value,
-  onChange,
-  disabled,
-}) => {
+export const Dropdown: FunctionComponent<DropdownProps> = ({ id, label, items, value, onChange, disabled }) => {
   const labelId = `${id}-label`
 
   const handleChange = (value: string) => {
@@ -72,12 +58,7 @@ export const Dropdown: FunctionComponent<DropdownProps> = ({
   return (
     <>
       <VisuallyHidden id={labelId}>{label}</VisuallyHidden>
-      <ListboxInput
-        value={value}
-        onChange={handleChange}
-        aria-labelledby={labelId}
-        disabled={disabled}
-      >
+      <ListboxInput value={value} onChange={handleChange} aria-labelledby={labelId} disabled={disabled}>
         <ListboxButton
           className="sn-dropdown-button"
           children={({ value, label, isExpanded }) => {
@@ -105,10 +86,7 @@ export const Dropdown: FunctionComponent<DropdownProps> = ({
                 >
                   {item.icon ? (
                     <div className="flex mr-3">
-                      <Icon
-                        type={item.icon}
-                        className={`sn-icon--small ${item.iconClassName ?? ''}`}
-                      />
+                      <Icon type={item.icon} className={`sn-icon--small ${item.iconClassName ?? ''}`} />
                     </div>
                   ) : null}
                   <div className="text-input">{item.label}</div>
diff --git a/app/assets/javascripts/Components/Footer/index.tsx b/app/assets/javascripts/Components/Footer/index.tsx
index 7fc98f308..19f88b541 100644
--- a/app/assets/javascripts/Components/Footer/index.tsx
+++ b/app/assets/javascripts/Components/Footer/index.tsx
@@ -2,12 +2,7 @@ import { WebAppEvent, WebApplication } from '@/UIModels/Application'
 import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
 import { PureComponent } from '@/Components/Abstract/PureComponent'
 import { preventRefreshing } from '@/Utils'
-import {
-  ApplicationEvent,
-  ContentType,
-  CollectionSort,
-  ApplicationDescriptor,
-} from '@standardnotes/snjs'
+import { ApplicationEvent, ContentType, CollectionSort, ApplicationDescriptor } from '@standardnotes/snjs'
 import {
   STRING_NEW_UPDATE_READY,
   STRING_CONFIRM_APP_QUIT_DURING_UPGRADE,
@@ -241,9 +236,7 @@ export class Footer extends PureComponent<Props, State> {
         style: 'percent',
       })
 
-      statusManager.setMessage(
-        `Syncing ${stats.uploadTotalCount} items (${stringPercentage} complete)`,
-      )
+      statusManager.setMessage(`Syncing ${stats.uploadTotalCount} items (${stringPercentage} complete)`)
     } else {
       statusManager.setMessage('')
     }
@@ -330,9 +323,7 @@ export class Footer extends PureComponent<Props, State> {
   betaMessageClickHandler = () => {
     alertDialog({
       title: 'You are using a beta version of the app',
-      text:
-        'If you wish to go back to a stable version, make sure to sign out ' +
-        'of this beta app first.',
+      text: 'If you wish to go back to a stable version, make sure to sign out ' + 'of this beta app first.',
     }).catch(console.error)
   }
 
@@ -357,11 +348,7 @@ export class Footer extends PureComponent<Props, State> {
                   ' w-8 h-full flex items-center justify-center cursor-pointer rounded-full'
                 }
               >
-                <div
-                  className={
-                    this.state.hasError ? 'danger' : (this.user ? 'info' : 'neutral') + ' w-5 h-5'
-                  }
-                >
+                <div className={this.state.hasError ? 'danger' : (this.user ? 'info' : 'neutral') + ' w-5 h-5'}>
                   <Icon type="account-circle" className="hover:color-info w-5 h-5 max-h-5" />
                 </div>
               </div>
@@ -382,10 +369,7 @@ export class Footer extends PureComponent<Props, State> {
                 <div className="h-5">
                   <Icon
                     type="tune"
-                    className={
-                      (this.state.showQuickSettingsMenu ? 'color-info' : '') +
-                      ' rounded hover:color-info'
-                    }
+                    className={(this.state.showQuickSettingsMenu ? 'color-info' : '') + ' rounded hover:color-info'}
                   />
                 </div>
               </div>
@@ -401,10 +385,7 @@ export class Footer extends PureComponent<Props, State> {
               <Fragment>
                 <div className="sk-app-bar-item border" />
                 <div className="sk-app-bar-item">
-                  <a
-                    onClick={this.betaMessageClickHandler}
-                    className="no-decoration sk-label title"
-                  >
+                  <a onClick={this.betaMessageClickHandler} className="no-decoration sk-label title">
                     You are using a beta version of the app
                   </a>
                 </div>
@@ -439,10 +420,7 @@ export class Footer extends PureComponent<Props, State> {
                   </div>
                 )}
                 {this.state.showSyncResolution && (
-                  <SyncResolutionMenu
-                    close={this.syncResolutionClickHandler}
-                    application={this.application}
-                  />
+                  <SyncResolutionMenu close={this.syncResolutionClickHandler} application={this.application} />
                 )}
               </div>
             )}
diff --git a/app/assets/javascripts/Components/Input/DecoratedInput.tsx b/app/assets/javascripts/Components/Input/DecoratedInput.tsx
index 35f469ad2..a4936088b 100644
--- a/app/assets/javascripts/Components/Input/DecoratedInput.tsx
+++ b/app/assets/javascripts/Components/Input/DecoratedInput.tsx
@@ -39,9 +39,7 @@ export const DecoratedInput: FunctionalComponent<DecoratedInputProps> = forwardR
     const classNames = getClassNames(hasLeftDecorations, hasRightDecorations)
 
     return (
-      <div
-        className={`${classNames.container} ${disabled ? classNames.disabled : ''} ${className}`}
-      >
+      <div className={`${classNames.container} ${disabled ? classNames.disabled : ''} ${className}`}>
         {left && (
           <div className="flex items-center px-2 py-1.5">
             {left.map((leftChild) => (
diff --git a/app/assets/javascripts/Components/Input/DecoratedPasswordInput.tsx b/app/assets/javascripts/Components/Input/DecoratedPasswordInput.tsx
index 6dc876e75..11d067e00 100644
--- a/app/assets/javascripts/Components/Input/DecoratedPasswordInput.tsx
+++ b/app/assets/javascripts/Components/Input/DecoratedPasswordInput.tsx
@@ -22,8 +22,8 @@ const Toggle: FunctionComponent<{
 /**
  * Password input that has a toggle to show/hide password and can be decorated on the left and right side
  */
-export const DecoratedPasswordInput: FunctionComponent<Omit<DecoratedInputProps, 'type'>> =
-  forwardRef((props, ref: Ref<HTMLInputElement>) => {
+export const DecoratedPasswordInput: FunctionComponent<Omit<DecoratedInputProps, 'type'>> = forwardRef(
+  (props, ref: Ref<HTMLInputElement>) => {
     const [isToggled, setIsToggled] = useState(false)
 
     const rightSideDecorations = props.right ? [...props.right] : []
@@ -33,10 +33,8 @@ export const DecoratedPasswordInput: FunctionComponent<Omit<DecoratedInputProps,
         {...props}
         ref={ref}
         type={isToggled ? 'text' : 'password'}
-        right={[
-          ...rightSideDecorations,
-          <Toggle isToggled={isToggled} setIsToggled={setIsToggled} />,
-        ]}
+        right={[...rightSideDecorations, <Toggle isToggled={isToggled} setIsToggled={setIsToggled} />]}
       />
     )
-  })
+  },
+)
diff --git a/app/assets/javascripts/Components/Menu/Menu.tsx b/app/assets/javascripts/Components/Menu/Menu.tsx
index e265baa9d..050468f55 100644
--- a/app/assets/javascripts/Components/Menu/Menu.tsx
+++ b/app/assets/javascripts/Components/Menu/Menu.tsx
@@ -1,12 +1,4 @@
-import {
-  JSX,
-  FunctionComponent,
-  ComponentChildren,
-  VNode,
-  RefCallback,
-  ComponentChild,
-  toChildArray,
-} from 'preact'
+import { JSX, FunctionComponent, ComponentChildren, VNode, RefCallback, ComponentChild, toChildArray } from 'preact'
 import { useEffect, useRef } from 'preact/hooks'
 import { JSXInternal } from 'preact/src/jsx'
 import { MenuItem, MenuItemListElement } from './MenuItem'
@@ -70,11 +62,7 @@ export const Menu: FunctionComponent<MenuProps> = ({
     }
   }
 
-  const mapMenuItems = (
-    child: ComponentChild,
-    index: number,
-    array: ComponentChild[],
-  ): ComponentChild => {
+  const mapMenuItems = (child: ComponentChild, index: number, array: ComponentChild[]): ComponentChild => {
     if (!child || (Array.isArray(child) && child.length < 1)) {
       return
     }
@@ -84,8 +72,7 @@ export const Menu: FunctionComponent<MenuProps> = ({
     }
 
     const _child = child as VNode<unknown>
-    const isFirstMenuItem =
-      index === array.findIndex((child) => (child as VNode<unknown>).type === MenuItem)
+    const isFirstMenuItem = index === array.findIndex((child) => (child as VNode<unknown>).type === MenuItem)
 
     const hasMultipleItems = Array.isArray(_child.props.children)
       ? Array.from(_child.props.children as ComponentChild[]).some(
diff --git a/app/assets/javascripts/Components/Menu/MenuItem.tsx b/app/assets/javascripts/Components/Menu/MenuItem.tsx
index 9f2d64e2b..e70a952f9 100644
--- a/app/assets/javascripts/Components/Menu/MenuItem.tsx
+++ b/app/assets/javascripts/Components/Menu/MenuItem.tsx
@@ -65,15 +65,9 @@ export const MenuItem: FunctionComponent<MenuItemProps> = forwardRef(
         onBlur={onBlur}
         {...(type === MenuItemType.RadioButton ? { 'aria-checked': checked } : {})}
       >
-        {type === MenuItemType.IconButton && icon ? (
-          <Icon type={icon} className={iconClassName} />
-        ) : null}
+        {type === MenuItemType.IconButton && icon ? <Icon type={icon} className={iconClassName} /> : null}
         {type === MenuItemType.RadioButton && typeof checked === 'boolean' ? (
-          <div
-            className={`pseudo-radio-btn ${
-              checked ? 'pseudo-radio-btn--checked' : ''
-            } mr-2 flex-shrink-0`}
-          ></div>
+          <div className={`pseudo-radio-btn ${checked ? 'pseudo-radio-btn--checked' : ''} mr-2 flex-shrink-0`}></div>
         ) : null}
         {children}
       </button>
@@ -81,9 +75,7 @@ export const MenuItem: FunctionComponent<MenuItemProps> = forwardRef(
   },
 )
 
-export const MenuItemSeparator: FunctionComponent = () => (
-  <div role="separator" className="h-1px my-2 bg-border"></div>
-)
+export const MenuItemSeparator: FunctionComponent = () => <div role="separator" className="h-1px my-2 bg-border"></div>
 
 type ListElementProps = {
   isFirstMenuItem: boolean
diff --git a/app/assets/javascripts/Components/MultipleSelectedNotes/index.tsx b/app/assets/javascripts/Components/MultipleSelectedNotes/index.tsx
index 02a3c249d..df78e2817 100644
--- a/app/assets/javascripts/Components/MultipleSelectedNotes/index.tsx
+++ b/app/assets/javascripts/Components/MultipleSelectedNotes/index.tsx
@@ -27,9 +27,7 @@ export const MultipleSelectedNotes = observer(({ application, appState }: Props)
       <div className="flex-grow flex flex-col justify-center items-center w-full max-w-md">
         <IlNotesIcon className="block" />
         <h2 className="text-lg m-0 text-center mt-4">{count} selected notes</h2>
-        <p className="text-sm mt-2 text-center max-w-60">
-          Actions will be performed on all selected notes.
-        </p>
+        <p className="text-sm mt-2 text-center max-w-60">Actions will be performed on all selected notes.</p>
       </div>
     </div>
   )
diff --git a/app/assets/javascripts/Components/Navigation/index.tsx b/app/assets/javascripts/Components/Navigation/index.tsx
index e29fe6ca0..6f1d3e408 100644
--- a/app/assets/javascripts/Components/Navigation/index.tsx
+++ b/app/assets/javascripts/Components/Navigation/index.tsx
@@ -6,12 +6,7 @@ import { ApplicationEvent, PrefKey } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
 import { useCallback, useEffect, useMemo, useState } from 'preact/hooks'
-import {
-  PanelSide,
-  ResizeFinishCallback,
-  PanelResizer,
-  PanelResizeType,
-} from '@/Components/PanelResizer'
+import { PanelSide, ResizeFinishCallback, PanelResizer, PanelResizeType } from '@/Components/PanelResizer'
 
 type Props = {
   application: WebApplication
diff --git a/app/assets/javascripts/Components/NoteView/NoteView.test.ts b/app/assets/javascripts/Components/NoteView/NoteView.test.ts
index bfe64f18b..46dac906b 100644
--- a/app/assets/javascripts/Components/NoteView/NoteView.test.ts
+++ b/app/assets/javascripts/Components/NoteView/NoteView.test.ts
@@ -74,9 +74,7 @@ describe('editor-view', () => {
     it("should hide the note if at the time of the session expiration the note wasn't edited for longer than the allowed idle time", async () => {
       jest
         .spyOn(ctrl, 'getSecondsElapsedSinceLastEdit')
-        .mockImplementation(
-          () => ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction + 5,
-        )
+        .mockImplementation(() => ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction + 5)
 
       await ctrl.onAppEvent(ApplicationEvent.UnprotectedSessionExpired)
 
@@ -84,8 +82,7 @@ describe('editor-view', () => {
     })
 
     it('should postpone the note hiding by correct time if the time passed after its last modification is less than the allowed idle time', async () => {
-      const secondsElapsedSinceLastEdit =
-        ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction - 3
+      const secondsElapsedSinceLastEdit = ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction - 3
 
       Object.defineProperty(ctrl.note, 'userModifiedDate', {
         value: new Date(Date.now() - secondsElapsedSinceLastEdit * 1000),
@@ -95,8 +92,7 @@ describe('editor-view', () => {
       await ctrl.onAppEvent(ApplicationEvent.UnprotectedSessionExpired)
 
       const secondsAfterWhichTheNoteShouldHide =
-        ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction -
-        secondsElapsedSinceLastEdit
+        ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction - secondsElapsedSinceLastEdit
       jest.advanceTimersByTime((secondsAfterWhichTheNoteShouldHide - 1) * 1000)
       expect(setShowProtectedWarningSpy).not.toHaveBeenCalled()
 
@@ -114,8 +110,7 @@ describe('editor-view', () => {
       await ctrl.onAppEvent(ApplicationEvent.UnprotectedSessionExpired)
 
       let secondsAfterWhichTheNoteShouldHide =
-        ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction -
-        secondsElapsedSinceLastModification
+        ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction - secondsElapsedSinceLastModification
       jest.advanceTimersByTime((secondsAfterWhichTheNoteShouldHide - 1) * 1000)
 
       // A new modification has just happened
@@ -124,8 +119,7 @@ describe('editor-view', () => {
         configurable: true,
       })
 
-      secondsAfterWhichTheNoteShouldHide =
-        ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction
+      secondsAfterWhichTheNoteShouldHide = ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction
       jest.advanceTimersByTime((secondsAfterWhichTheNoteShouldHide - 1) * 1000)
       expect(setShowProtectedWarningSpy).not.toHaveBeenCalled()
 
@@ -152,9 +146,7 @@ describe('editor-view', () => {
   describe('dismissProtectedWarning', () => {
     describe('the note has protection sources', () => {
       it('should reveal note contents if the authorization has been passed', async () => {
-        jest
-          .spyOn(ctrl['application'], 'authorizeNoteAccess')
-          .mockImplementation(async () => Promise.resolve(true))
+        jest.spyOn(ctrl['application'], 'authorizeNoteAccess').mockImplementation(async () => Promise.resolve(true))
 
         await ctrl.dismissProtectedWarning()
 
@@ -162,9 +154,7 @@ describe('editor-view', () => {
       })
 
       it('should not reveal note contents if the authorization has not been passed', async () => {
-        jest
-          .spyOn(ctrl['application'], 'authorizeNoteAccess')
-          .mockImplementation(async () => Promise.resolve(false))
+        jest.spyOn(ctrl['application'], 'authorizeNoteAccess').mockImplementation(async () => Promise.resolve(false))
 
         await ctrl.dismissProtectedWarning()
 
diff --git a/app/assets/javascripts/Components/NoteView/NoteView.tsx b/app/assets/javascripts/Components/NoteView/NoteView.tsx
index 577156ac2..1f2dc9c77 100644
--- a/app/assets/javascripts/Components/NoteView/NoteView.tsx
+++ b/app/assets/javascripts/Components/NoteView/NoteView.tsx
@@ -20,11 +20,7 @@ import {
 import { debounce, isDesktopApplication } from '@/Utils'
 import { KeyboardModifier, KeyboardKey } from '@/Services/IOService'
 import { EventSource } from '@/UIModels/AppState'
-import {
-  STRING_DELETE_PLACEHOLDER_ATTEMPT,
-  STRING_DELETE_LOCKED_ATTEMPT,
-  StringDeleteNote,
-} from '@/Strings'
+import { STRING_DELETE_PLACEHOLDER_ATTEMPT, STRING_DELETE_LOCKED_ATTEMPT, StringDeleteNote } from '@/Strings'
 import { confirmDialog } from '@/Services/AlertService'
 import { PureComponent } from '@/Components/Abstract/PureComponent'
 import { ProtectedNoteOverlay } from '@/Components/ProtectedNoteOverlay'
@@ -50,10 +46,7 @@ function sortAlphabetically(array: SNComponent[]): SNComponent[] {
   return array.sort((a, b) => (a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1))
 }
 
-export const transactionForAssociateComponentWithCurrentNote = (
-  component: SNComponent,
-  note: SNNote,
-) => {
+export const transactionForAssociateComponentWithCurrentNote = (component: SNComponent, note: SNNote) => {
   const transaction: TransactionalMutation = {
     itemUuid: component.uuid,
     mutate: (m: ItemMutator) => {
@@ -65,10 +58,7 @@ export const transactionForAssociateComponentWithCurrentNote = (
   return transaction
 }
 
-export const transactionForDisassociateComponentWithCurrentNote = (
-  component: SNComponent,
-  note: SNNote,
-) => {
+export const transactionForDisassociateComponentWithCurrentNote = (component: SNComponent, note: SNNote) => {
   const transaction: TransactionalMutation = {
     itemUuid: component.uuid,
     mutate: (m: ItemMutator) => {
@@ -209,11 +199,9 @@ export class NoteView extends PureComponent<Props, State> {
 
     this.registerKeyboardShortcuts()
 
-    this.removeInnerNoteObserver = this.controller.addNoteInnerValueChangeObserver(
-      (note, source) => {
-        this.onNoteInnerChange(note, source)
-      },
-    )
+    this.removeInnerNoteObserver = this.controller.addNoteInnerValueChangeObserver((note, source) => {
+      this.onNoteInnerChange(note, source)
+    })
 
     this.autorun(() => {
       this.setState({
@@ -281,18 +269,15 @@ export class NoteView extends PureComponent<Props, State> {
 
     this.reloadSpellcheck().catch(console.error)
 
-    const isTemplateNoteInsertedToBeInteractableWithEditor =
-      source === PayloadEmitSource.LocalInserted && note.dirty
+    const isTemplateNoteInsertedToBeInteractableWithEditor = source === PayloadEmitSource.LocalInserted && note.dirty
     if (isTemplateNoteInsertedToBeInteractableWithEditor) {
       return
     }
 
     if (note.lastSyncBegan || note.dirty) {
       if (note.lastSyncEnd) {
-        const shouldShowSavingStatus =
-          note.lastSyncBegan && note.lastSyncBegan.getTime() > note.lastSyncEnd.getTime()
-        const shouldShowSavedStatus =
-          note.lastSyncBegan && note.lastSyncEnd.getTime() > note.lastSyncBegan.getTime()
+        const shouldShowSavingStatus = note.lastSyncBegan && note.lastSyncBegan.getTime() > note.lastSyncEnd.getTime()
+        const shouldShowSavedStatus = note.lastSyncBegan && note.lastSyncEnd.getTime() > note.lastSyncBegan.getTime()
         if (note.dirty || shouldShowSavingStatus) {
           this.showSavingStatus()
         } else if (this.state.noteStatus && shouldShowSavedStatus) {
@@ -367,15 +352,11 @@ export class NoteView extends PureComponent<Props, State> {
 
   hideProtectedNoteIfInactive(): void {
     const secondsElapsedSinceLastEdit = this.getSecondsElapsedSinceLastEdit()
-    if (
-      secondsElapsedSinceLastEdit >=
-      ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction
-    ) {
+    if (secondsElapsedSinceLastEdit >= ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction) {
       this.setShowProtectedOverlay(true)
     } else {
       const secondsUntilTheNextCheck =
-        ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction -
-        secondsElapsedSinceLastEdit
+        ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction - secondsElapsedSinceLastEdit
       this.startNoteProtectionInactivityTimer(secondsUntilTheNextCheck)
     }
   }
@@ -406,36 +387,24 @@ export class NoteView extends PureComponent<Props, State> {
   }
 
   streamItems() {
-    this.removeComponentStreamObserver = this.application.streamItems(
-      ContentType.Component,
-      async ({ source }) => {
-        if (
-          isPayloadSourceInternalChange(source) ||
-          source === PayloadEmitSource.InitialObserverRegistrationPush
-        ) {
-          return
-        }
-        if (!this.note) {
-          return
-        }
-        await this.reloadStackComponents()
-        this.debounceReloadEditorComponent()
-      },
-    )
+    this.removeComponentStreamObserver = this.application.streamItems(ContentType.Component, async ({ source }) => {
+      if (isPayloadSourceInternalChange(source) || source === PayloadEmitSource.InitialObserverRegistrationPush) {
+        return
+      }
+      if (!this.note) {
+        return
+      }
+      await this.reloadStackComponents()
+      this.debounceReloadEditorComponent()
+    })
   }
 
   private createComponentViewer(component: SNComponent) {
-    const viewer = this.application.componentManager.createComponentViewer(
-      component,
-      this.note.uuid,
-    )
+    const viewer = this.application.componentManager.createComponentViewer(component, this.note.uuid)
     return viewer
   }
 
-  public editorComponentViewerRequestsReload = async (
-    viewer: ComponentViewer,
-    force?: boolean,
-  ): Promise<void> => {
+  public editorComponentViewerRequestsReload = async (viewer: ComponentViewer, force?: boolean): Promise<void> => {
     if (this.state.editorComponentViewerDidAlreadyReload && !force) {
       return
     }
@@ -698,10 +667,7 @@ export class NoteView extends PureComponent<Props, State> {
   async reloadPreferences() {
     const monospaceFont = this.application.getPreference(PrefKey.EditorMonospaceEnabled, true)
 
-    const marginResizersEnabled = this.application.getPreference(
-      PrefKey.EditorResizersEnabled,
-      true,
-    )
+    const marginResizersEnabled = this.application.getPreference(PrefKey.EditorResizersEnabled, true)
 
     await this.reloadSpellcheck()
 
@@ -758,9 +724,7 @@ export class NoteView extends PureComponent<Props, State> {
 
     const newViewers: ComponentViewer[] = []
     for (const component of needsNewViewer) {
-      newViewers.push(
-        this.application.componentManager.createComponentViewer(component, this.note.uuid),
-      )
+      newViewers.push(this.application.componentManager.createComponentViewer(component, this.note.uuid))
     }
 
     for (const viewer of needsDestroyViewer) {
@@ -773,9 +737,7 @@ export class NoteView extends PureComponent<Props, State> {
   }
 
   stackComponentExpanded = (component: SNComponent): boolean => {
-    return !!this.state.stackComponentViewers.find(
-      (viewer) => viewer.componentUuid === component.uuid,
-    )
+    return !!this.state.stackComponentViewers.find((viewer) => viewer.componentUuid === component.uuid)
   }
 
   toggleStackComponent = async (component: SNComponent) => {
@@ -942,9 +904,7 @@ export class NoteView extends PureComponent<Props, State> {
                   className="sk-app-bar-item"
                 >
                   <div className="sk-label warning flex items-center">
-                    {this.state.showLockedIcon && (
-                      <Icon type="pencil-off" className="flex fill-current mr-2" />
-                    )}
+                    {this.state.showLockedIcon && <Icon type="pencil-off" className="flex fill-current mr-2" />}
                     {this.state.lockText}
                   </div>
                 </div>
@@ -984,9 +944,7 @@ export class NoteView extends PureComponent<Props, State> {
                       >
                         {this.state.noteStatus?.message}
                       </div>
-                      {this.state.noteStatus?.desc && (
-                        <div className="desc">{this.state.noteStatus.desc}</div>
-                      )}
+                      {this.state.noteStatus?.desc && <div className="desc">{this.state.noteStatus.desc}</div>}
                     </div>
                   </div>
                   {this.appState.features.isFilesEnabled && (
@@ -1022,11 +980,7 @@ export class NoteView extends PureComponent<Props, State> {
             </div>
           )}
 
-          <div
-            id={ElementIds.EditorContent}
-            className={ElementIds.EditorContent}
-            ref={this.editorContentRef}
-          >
+          <div id={ElementIds.EditorContent} className={ElementIds.EditorContent} ref={this.editorContentRef}>
             {this.state.marginResizersEnabled && this.editorContentRef.current ? (
               <PanelResizer
                 minWidth={300}
@@ -1053,22 +1007,20 @@ export class NoteView extends PureComponent<Props, State> {
               </div>
             )}
 
-            {this.state.editorStateDidLoad &&
-              !this.state.editorComponentViewer &&
-              !this.state.textareaUnloading && (
-                <textarea
-                  autocomplete="off"
-                  className="editable font-editor"
-                  dir="auto"
-                  id={ElementIds.NoteTextEditor}
-                  onChange={this.onTextAreaChange}
-                  value={this.state.editorText}
-                  readonly={this.state.noteLocked}
-                  onFocus={this.onContentFocus}
-                  spellcheck={this.state.spellcheck}
-                  ref={(ref) => this.onSystemEditorLoad(ref)}
-                ></textarea>
-              )}
+            {this.state.editorStateDidLoad && !this.state.editorComponentViewer && !this.state.textareaUnloading && (
+              <textarea
+                autocomplete="off"
+                className="editable font-editor"
+                dir="auto"
+                id={ElementIds.NoteTextEditor}
+                onChange={this.onTextAreaChange}
+                value={this.state.editorText}
+                readonly={this.state.noteLocked}
+                onFocus={this.onContentFocus}
+                spellcheck={this.state.spellcheck}
+                ref={(ref) => this.onSystemEditorLoad(ref)}
+              ></textarea>
+            )}
 
             {this.state.marginResizersEnabled && this.editorContentRef.current ? (
               <PanelResizer
@@ -1101,9 +1053,7 @@ export class NoteView extends PureComponent<Props, State> {
                         <div className="sk-app-bar-item-column">
                           <div
                             className={
-                              (this.stackComponentExpanded(component) && component.active
-                                ? 'info '
-                                : '') +
+                              (this.stackComponentExpanded(component) && component.active ? 'info ' : '') +
                               (!this.stackComponentExpanded(component) ? 'neutral ' : '') +
                               ' sk-circle small'
                             }
diff --git a/app/assets/javascripts/Components/NotesContextMenu/index.tsx b/app/assets/javascripts/Components/NotesContextMenu/index.tsx
index 55afb1f1d..3ebd53ece 100644
--- a/app/assets/javascripts/Components/NotesContextMenu/index.tsx
+++ b/app/assets/javascripts/Components/NotesContextMenu/index.tsx
@@ -15,9 +15,7 @@ export const NotesContextMenu = observer(({ application, appState }: Props) => {
   const { contextMenuOpen, contextMenuPosition, contextMenuMaxHeight } = appState.notes
 
   const contextMenuRef = useRef<HTMLDivElement>(null)
-  const [closeOnBlur] = useCloseOnBlur(contextMenuRef, (open: boolean) =>
-    appState.notes.setContextMenuOpen(open),
-  )
+  const [closeOnBlur] = useCloseOnBlur(contextMenuRef, (open: boolean) => appState.notes.setContextMenuOpen(open))
 
   useCloseOnClickOutside(contextMenuRef, () => appState.notes.setContextMenuOpen(false))
 
diff --git a/app/assets/javascripts/Components/NotesList/NotesListOptionsMenu.tsx b/app/assets/javascripts/Components/NotesList/NotesListOptionsMenu.tsx
index 850e0c99a..a58ece288 100644
--- a/app/assets/javascripts/Components/NotesList/NotesListOptionsMenu.tsx
+++ b/app/assets/javascripts/Components/NotesList/NotesListOptionsMenu.tsx
@@ -16,30 +16,14 @@ type Props = {
 
 export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
   ({ closeDisplayOptionsMenu, closeOnBlur, application, isOpen }) => {
-    const [sortBy, setSortBy] = useState(() =>
-      application.getPreference(PrefKey.SortNotesBy, CollectionSort.CreatedAt),
-    )
-    const [sortReverse, setSortReverse] = useState(() =>
-      application.getPreference(PrefKey.SortNotesReverse, false),
-    )
-    const [hidePreview, setHidePreview] = useState(() =>
-      application.getPreference(PrefKey.NotesHideNotePreview, false),
-    )
-    const [hideDate, setHideDate] = useState(() =>
-      application.getPreference(PrefKey.NotesHideDate, false),
-    )
-    const [hideTags, setHideTags] = useState(() =>
-      application.getPreference(PrefKey.NotesHideTags, true),
-    )
-    const [hidePinned, setHidePinned] = useState(() =>
-      application.getPreference(PrefKey.NotesHidePinned, false),
-    )
-    const [showArchived, setShowArchived] = useState(() =>
-      application.getPreference(PrefKey.NotesShowArchived, false),
-    )
-    const [showTrashed, setShowTrashed] = useState(() =>
-      application.getPreference(PrefKey.NotesShowTrashed, false),
-    )
+    const [sortBy, setSortBy] = useState(() => application.getPreference(PrefKey.SortNotesBy, CollectionSort.CreatedAt))
+    const [sortReverse, setSortReverse] = useState(() => application.getPreference(PrefKey.SortNotesReverse, false))
+    const [hidePreview, setHidePreview] = useState(() => application.getPreference(PrefKey.NotesHideNotePreview, false))
+    const [hideDate, setHideDate] = useState(() => application.getPreference(PrefKey.NotesHideDate, false))
+    const [hideTags, setHideTags] = useState(() => application.getPreference(PrefKey.NotesHideTags, true))
+    const [hidePinned, setHidePinned] = useState(() => application.getPreference(PrefKey.NotesHidePinned, false))
+    const [showArchived, setShowArchived] = useState(() => application.getPreference(PrefKey.NotesShowArchived, false))
+    const [showTrashed, setShowTrashed] = useState(() => application.getPreference(PrefKey.NotesShowTrashed, false))
     const [hideProtected, setHideProtected] = useState(() =>
       application.getPreference(PrefKey.NotesHideProtected, false),
     )
diff --git a/app/assets/javascripts/Components/NotesOptions/ListedActionsOption.tsx b/app/assets/javascripts/Components/NotesOptions/ListedActionsOption.tsx
index 674292c16..1ae8c7586 100644
--- a/app/assets/javascripts/Components/NotesOptions/ListedActionsOption.tsx
+++ b/app/assets/javascripts/Components/NotesOptions/ListedActionsOption.tsx
@@ -76,11 +76,7 @@ type ListedActionsMenuProps = {
   recalculateMenuStyle: () => void
 }
 
-const ListedActionsMenu: FunctionComponent<ListedActionsMenuProps> = ({
-  application,
-  note,
-  recalculateMenuStyle,
-}) => {
+const ListedActionsMenu: FunctionComponent<ListedActionsMenuProps> = ({ application, note, recalculateMenuStyle }) => {
   const [menuGroups, setMenuGroups] = useState<ListedMenuGroup[]>([])
   const [isFetchingAccounts, setIsFetchingAccounts] = useState(true)
 
@@ -251,11 +247,7 @@ export const ListedActionsOption: FunctionComponent<Props> = ({ application, not
   return (
     <div ref={menuContainerRef}>
       <Disclosure open={isMenuOpen} onChange={toggleListedMenu}>
-        <DisclosureButton
-          ref={menuButtonRef}
-          onBlur={closeOnBlur}
-          className="sn-dropdown-item justify-between"
-        >
+        <DisclosureButton ref={menuButtonRef} onBlur={closeOnBlur} className="sn-dropdown-item justify-between">
           <div className="flex items-center">
             <Icon type="listed" className="color-neutral mr-2" />
             Listed actions
@@ -271,11 +263,7 @@ export const ListedActionsOption: FunctionComponent<Props> = ({ application, not
           className="sn-dropdown flex flex-col max-h-120 min-w-68 pb-1 fixed overflow-y-auto"
         >
           {isMenuOpen && (
-            <ListedActionsMenu
-              application={application}
-              note={note}
-              recalculateMenuStyle={recalculateMenuStyle}
-            />
+            <ListedActionsMenu application={application} note={note} recalculateMenuStyle={recalculateMenuStyle} />
           )}
         </DisclosurePanel>
       </Disclosure>
diff --git a/app/assets/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx b/app/assets/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx
index f88309025..519b1bd80 100644
--- a/app/assets/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx
+++ b/app/assets/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx
@@ -15,76 +15,72 @@ type Props = {
   onClickPreprocessing?: () => Promise<void>
 }
 
-export const NotesOptionsPanel = observer(
-  ({ application, appState, onClickPreprocessing }: Props) => {
-    const [open, setOpen] = useState(false)
-    const [position, setPosition] = useState({
-      top: 0,
-      right: 0,
-    })
-    const [maxHeight, setMaxHeight] = useState<number | 'auto'>('auto')
-    const buttonRef = useRef<HTMLButtonElement>(null)
-    const panelRef = useRef<HTMLDivElement>(null)
-    const [closeOnBlur] = useCloseOnBlur(panelRef, setOpen)
+export const NotesOptionsPanel = observer(({ application, appState, onClickPreprocessing }: Props) => {
+  const [open, setOpen] = useState(false)
+  const [position, setPosition] = useState({
+    top: 0,
+    right: 0,
+  })
+  const [maxHeight, setMaxHeight] = useState<number | 'auto'>('auto')
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const panelRef = useRef<HTMLDivElement>(null)
+  const [closeOnBlur] = useCloseOnBlur(panelRef, setOpen)
 
-    return (
-      <Disclosure
-        open={open}
-        onChange={async () => {
-          const rect = buttonRef.current?.getBoundingClientRect()
-          if (rect) {
-            const { clientHeight } = document.documentElement
-            const footerElementRect = document.getElementById('footer-bar')?.getBoundingClientRect()
-            const footerHeightInPx = footerElementRect?.height
-            if (footerHeightInPx) {
-              setMaxHeight(clientHeight - rect.bottom - footerHeightInPx - 2)
-            }
-            setPosition({
-              top: rect.bottom,
-              right: document.body.clientWidth - rect.right,
-            })
-            const newOpenState = !open
-            if (newOpenState && onClickPreprocessing) {
-              await onClickPreprocessing()
-            }
-            setOpen(newOpenState)
+  return (
+    <Disclosure
+      open={open}
+      onChange={async () => {
+        const rect = buttonRef.current?.getBoundingClientRect()
+        if (rect) {
+          const { clientHeight } = document.documentElement
+          const footerElementRect = document.getElementById('footer-bar')?.getBoundingClientRect()
+          const footerHeightInPx = footerElementRect?.height
+          if (footerHeightInPx) {
+            setMaxHeight(clientHeight - rect.bottom - footerHeightInPx - 2)
+          }
+          setPosition({
+            top: rect.bottom,
+            right: document.body.clientWidth - rect.right,
+          })
+          const newOpenState = !open
+          if (newOpenState && onClickPreprocessing) {
+            await onClickPreprocessing()
+          }
+          setOpen(newOpenState)
+        }
+      }}
+    >
+      <DisclosureButton
+        onKeyDown={(event) => {
+          if (event.key === 'Escape') {
+            setOpen(false)
           }
         }}
+        onBlur={closeOnBlur}
+        ref={buttonRef}
+        className="sn-icon-button border-contrast"
       >
-        <DisclosureButton
-          onKeyDown={(event) => {
-            if (event.key === 'Escape') {
-              setOpen(false)
-            }
-          }}
-          onBlur={closeOnBlur}
-          ref={buttonRef}
-          className="sn-icon-button border-contrast"
-        >
-          <VisuallyHidden>Actions</VisuallyHidden>
-          <Icon type="more" className="block" />
-        </DisclosureButton>
-        <DisclosurePanel
-          onKeyDown={(event) => {
-            if (event.key === 'Escape') {
-              setOpen(false)
-              buttonRef.current?.focus()
-            }
-          }}
-          ref={panelRef}
-          style={{
-            ...position,
-            maxHeight,
-          }}
-          className="sn-dropdown sn-dropdown--animated min-w-80 max-h-120 max-w-xs flex flex-col pt-2 overflow-y-auto fixed"
-          onBlur={closeOnBlur}
-          tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
-        >
-          {open && (
-            <NotesOptions application={application} appState={appState} closeOnBlur={closeOnBlur} />
-          )}
-        </DisclosurePanel>
-      </Disclosure>
-    )
-  },
-)
+        <VisuallyHidden>Actions</VisuallyHidden>
+        <Icon type="more" className="block" />
+      </DisclosureButton>
+      <DisclosurePanel
+        onKeyDown={(event) => {
+          if (event.key === 'Escape') {
+            setOpen(false)
+            buttonRef.current?.focus()
+          }
+        }}
+        ref={panelRef}
+        style={{
+          ...position,
+          maxHeight,
+        }}
+        className="sn-dropdown sn-dropdown--animated min-w-80 max-h-120 max-w-xs flex flex-col pt-2 overflow-y-auto fixed"
+        onBlur={closeOnBlur}
+        tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
+      >
+        {open && <NotesOptions application={application} appState={appState} closeOnBlur={closeOnBlur} />}
+      </DisclosurePanel>
+    </Disclosure>
+  )
+})
diff --git a/app/assets/javascripts/Components/NotesView/index.tsx b/app/assets/javascripts/Components/NotesView/index.tsx
index d0b7d1e26..e5dffacee 100644
--- a/app/assets/javascripts/Components/NotesView/index.tsx
+++ b/app/assets/javascripts/Components/NotesView/index.tsx
@@ -10,12 +10,7 @@ import { NoAccountWarning } from '@/Components/NoAccountWarning'
 import { NotesList } from '@/Components/NotesList'
 import { NotesListOptionsMenu } from '@/Components/NotesList/NotesListOptionsMenu'
 import { SearchOptions } from '@/Components/SearchOptions'
-import {
-  PanelSide,
-  ResizeFinishCallback,
-  PanelResizer,
-  PanelResizeType,
-} from '@/Components/PanelResizer'
+import { PanelSide, ResizeFinishCallback, PanelResizer, PanelResizeType } from '@/Components/PanelResizer'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
 import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
 
@@ -51,10 +46,7 @@ export const NotesView: FunctionComponent<Props> = observer(({ application, appS
   const [showDisplayOptionsMenu, setShowDisplayOptionsMenu] = useState(false)
   const [focusedSearch, setFocusedSearch] = useState(false)
 
-  const [closeDisplayOptMenuOnBlur] = useCloseOnBlur(
-    displayOptionsMenuRef,
-    setShowDisplayOptionsMenu,
-  )
+  const [closeDisplayOptMenuOnBlur] = useCloseOnBlur(displayOptionsMenuRef, setShowDisplayOptionsMenu)
 
   useEffect(() => {
     handleFilterTextChanged()
@@ -125,12 +117,7 @@ export const NotesView: FunctionComponent<Props> = observer(({ application, appS
     }
   }
 
-  const panelResizeFinishCallback: ResizeFinishCallback = (
-    width,
-    _lastLeft,
-    _isMaxWidth,
-    isCollapsed,
-  ) => {
+  const panelResizeFinishCallback: ResizeFinishCallback = (width, _lastLeft, _isMaxWidth, isCollapsed) => {
     application.setPreference(PrefKey.NotesPanelWidth, width).catch(console.error)
     appState.noteTags.reloadTagsContainerMaxWidth()
     appState.panelDidResize(PANEL_NAME_NOTES, isCollapsed)
@@ -229,9 +216,7 @@ export const NotesView: FunctionComponent<Props> = observer(({ application, appS
             </div>
           </div>
         </div>
-        {completedFullSync && !renderedNotes.length ? (
-          <p className="empty-notes-list faded">No notes.</p>
-        ) : null}
+        {completedFullSync && !renderedNotes.length ? <p className="empty-notes-list faded">No notes.</p> : null}
         {!completedFullSync && !renderedNotes.length ? (
           <p className="empty-notes-list faded">Loading notes...</p>
         ) : null}
diff --git a/app/assets/javascripts/Components/OtherSessionsSignOut/index.tsx b/app/assets/javascripts/Components/OtherSessionsSignOut/index.tsx
index f0bbf9914..d1d859178 100644
--- a/app/assets/javascripts/Components/OtherSessionsSignOut/index.tsx
+++ b/app/assets/javascripts/Components/OtherSessionsSignOut/index.tsx
@@ -34,9 +34,9 @@ const ConfirmOtherSessionsSignOut = observer(({ application, appState }: Props)
                 </AlertDialogLabel>
                 <AlertDialogDescription className="sk-panel-row">
                   <p className="color-foreground">
-                    This action will sign out all other devices signed into your account, and remove
-                    your data from those devices when they next regain connection to the internet.
-                    You may sign back in on those devices at any time.
+                    This action will sign out all other devices signed into your account, and remove your data from
+                    those devices when they next regain connection to the internet. You may sign back in on those
+                    devices at any time.
                   </p>
                 </AlertDialogDescription>
                 <div className="flex my-1 mt-4">
@@ -49,11 +49,7 @@ const ConfirmOtherSessionsSignOut = observer(({ application, appState }: Props)
                       application.revokeAllOtherSessions().catch(console.error)
                       closeDialog()
                       application.alertService
-                        .alert(
-                          'You have successfully revoked your sessions from other devices.',
-                          undefined,
-                          'Finish',
-                        )
+                        .alert('You have successfully revoked your sessions from other devices.', undefined, 'Finish')
                         .catch(console.error)
                     }}
                   >
diff --git a/app/assets/javascripts/Components/PanelResizer/index.tsx b/app/assets/javascripts/Components/PanelResizer/index.tsx
index 407c5cdc3..d150bb6bd 100644
--- a/app/assets/javascripts/Components/PanelResizer/index.tsx
+++ b/app/assets/javascripts/Components/PanelResizer/index.tsx
@@ -107,9 +107,7 @@ export class PanelResizer extends Component<Props, State> {
 
   isAtMaxWidth = () => {
     const marginOfError = 5
-    const difference = Math.abs(
-      Math.round(this.lastWidth + this.lastLeft) - Math.round(this.getParentRect().width),
-    )
+    const difference = Math.abs(Math.round(this.lastWidth + this.lastLeft) - Math.round(this.getParentRect().width))
     return difference < marginOfError
   }
 
@@ -159,12 +157,7 @@ export class PanelResizer extends Component<Props, State> {
     if (finish) {
       this.finishSettingWidth()
       if (this.props.resizeFinishCallback) {
-        this.props.resizeFinishCallback(
-          this.lastWidth,
-          this.lastLeft,
-          this.isAtMaxWidth(),
-          this.isCollapsed(),
-        )
+        this.props.resizeFinishCallback(this.lastWidth, this.lastLeft, this.isAtMaxWidth(), this.isCollapsed())
       }
     }
   }
@@ -184,12 +177,7 @@ export class PanelResizer extends Component<Props, State> {
     }
     this.finishSettingWidth()
 
-    this.props.resizeFinishCallback?.(
-      this.lastWidth,
-      this.lastLeft,
-      this.isAtMaxWidth(),
-      this.isCollapsed(),
-    )
+    this.props.resizeFinishCallback?.(this.lastWidth, this.lastLeft, this.isAtMaxWidth(), this.isCollapsed())
   }
 
   handleWidthEvent(event?: MouseEvent) {
diff --git a/app/assets/javascripts/Components/PasswordWizard/index.tsx b/app/assets/javascripts/Components/PasswordWizard/index.tsx
index 3f490e2cc..ad020ccaa 100644
--- a/app/assets/javascripts/Components/PasswordWizard/index.tsx
+++ b/app/assets/javascripts/Components/PasswordWizard/index.tsx
@@ -109,9 +109,7 @@ export class PasswordWizard extends PureComponent<Props, State> {
     const currentPassword = this.state.formData.currentPassword
     const newPass = this.state.formData.newPassword
     if (!currentPassword || currentPassword.length === 0) {
-      this.application.alertService
-        .alert('Please enter your current password.')
-        .catch(console.error)
+      this.application.alertService.alert('Please enter your current password.').catch(console.error)
       return false
     }
 
@@ -120,9 +118,7 @@ export class PasswordWizard extends PureComponent<Props, State> {
       return false
     }
     if (newPass !== this.state.formData.newPasswordConfirmation) {
-      this.application.alertService
-        .alert('Your new password does not match its confirmation.')
-        .catch(console.error)
+      this.application.alertService.alert('Your new password does not match its confirmation.').catch(console.error)
       this.setFormDataState({
         status: undefined,
       }).catch(console.error)
@@ -131,9 +127,7 @@ export class PasswordWizard extends PureComponent<Props, State> {
 
     if (!this.application.getUser()?.email) {
       this.application.alertService
-        .alert(
-          "We don't have your email stored. Please sign out then log back in to fix this issue.",
-        )
+        .alert("We don't have your email stored. Please sign out then log back in to fix this issue.")
         .catch(console.error)
       this.setFormDataState({
         status: undefined,
@@ -142,9 +136,7 @@ export class PasswordWizard extends PureComponent<Props, State> {
     }
 
     /** Validate current password */
-    const success = await this.application.validateAccountPassword(
-      this.state.formData.currentPassword as string,
-    )
+    const success = await this.application.validateAccountPassword(this.state.formData.currentPassword as string)
     if (!success) {
       this.application.alertService
         .alert('The current password you entered is not correct. Please try again.')
@@ -194,9 +186,7 @@ export class PasswordWizard extends PureComponent<Props, State> {
 
   dismiss = () => {
     if (this.state.lockContinue) {
-      this.application.alertService
-        .alert('Cannot close window until pending tasks are complete.')
-        .catch(console.error)
+      this.application.alertService.alert('Cannot close window until pending tasks are complete.').catch(console.error)
     } else {
       this.dismissModal()
     }
@@ -211,25 +201,19 @@ export class PasswordWizard extends PureComponent<Props, State> {
     })
   }
 
-  handleCurrentPasswordInputChange = ({
-    currentTarget,
-  }: JSX.TargetedEvent<HTMLInputElement, Event>) => {
+  handleCurrentPasswordInputChange = ({ currentTarget }: JSX.TargetedEvent<HTMLInputElement, Event>) => {
     this.setFormDataState({
       currentPassword: currentTarget.value,
     }).catch(console.error)
   }
 
-  handleNewPasswordInputChange = ({
-    currentTarget,
-  }: JSX.TargetedEvent<HTMLInputElement, Event>) => {
+  handleNewPasswordInputChange = ({ currentTarget }: JSX.TargetedEvent<HTMLInputElement, Event>) => {
     this.setFormDataState({
       newPassword: currentTarget.value,
     }).catch(console.error)
   }
 
-  handleNewPasswordConfirmationInputChange = ({
-    currentTarget,
-  }: JSX.TargetedEvent<HTMLInputElement, Event>) => {
+  handleNewPasswordConfirmationInputChange = ({ currentTarget }: JSX.TargetedEvent<HTMLInputElement, Event>) => {
     this.setFormDataState({
       newPasswordConfirmation: currentTarget.value,
     }).catch(console.error)
@@ -283,10 +267,7 @@ export class PasswordWizard extends PureComponent<Props, State> {
                             />
                             <div className="sk-panel-row" />
 
-                            <label
-                              htmlFor="password-wiz-confirm-new-password"
-                              className="block mb-1"
-                            >
+                            <label htmlFor="password-wiz-confirm-new-password" className="block mb-1">
                               Confirm New Password
                             </label>
 
@@ -304,12 +285,10 @@ export class PasswordWizard extends PureComponent<Props, State> {
                   )}
                   {this.state.step === Steps.FinishStep && (
                     <div className="sk-panel-section">
-                      <div className="sk-label sk-bold info">
-                        Your password has been successfully changed.
-                      </div>
+                      <div className="sk-label sk-bold info">Your password has been successfully changed.</div>
                       <p className="sk-p">
-                        Please ensure you are running the latest version of Standard Notes on all
-                        platforms to ensure maximum compatibility.
+                        Please ensure you are running the latest version of Standard Notes on all platforms to ensure
+                        maximum compatibility.
                       </p>
                     </div>
                   )}
diff --git a/app/assets/javascripts/Components/PermissionsModal/index.tsx b/app/assets/javascripts/Components/PermissionsModal/index.tsx
index b6e273ffc..528599981 100644
--- a/app/assets/javascripts/Components/PermissionsModal/index.tsx
+++ b/app/assets/javascripts/Components/PermissionsModal/index.tsx
@@ -77,10 +77,7 @@ export class PermissionsModal extends Component<Props> {
                 </div>
               </div>
               <div className="sk-panel-footer">
-                <button
-                  onClick={this.accept}
-                  className="sn-button info block w-full text-base py-3"
-                >
+                <button onClick={this.accept} className="sn-button info block w-full text-base py-3">
                   Continue
                 </button>
               </div>
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/Advanced.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/Advanced.tsx
index ce1be0b8a..3a13cf63a 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Account/Advanced.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/Advanced.tsx
@@ -1,8 +1,5 @@
 import { FunctionalComponent } from 'preact'
-import {
-  PreferencesGroup,
-  PreferencesSegment,
-} from '@/Components/Preferences/PreferencesComponents'
+import { PreferencesGroup, PreferencesSegment } from '@/Components/Preferences/PreferencesComponents'
 import { OfflineSubscription } from '@/Components/Preferences/Panes/Account/OfflineSubscription'
 import { WebApplication } from '@/UIModels/Application'
 import { observer } from 'mobx-react-lite'
@@ -17,25 +14,23 @@ interface IProps {
   extensionsLatestVersions: ExtensionsLatestVersions
 }
 
-export const Advanced: FunctionalComponent<IProps> = observer(
-  ({ application, appState, extensionsLatestVersions }) => {
-    return (
-      <PreferencesGroup>
-        <PreferencesSegment>
-          <AccordionItem title={'Advanced Settings'}>
-            <div className="flex flex-row items-center">
-              <div className="flex-grow flex flex-col">
-                <OfflineSubscription application={application} appState={appState} />
-                <Extensions
-                  className={'mt-3'}
-                  application={application}
-                  extensionsLatestVersions={extensionsLatestVersions}
-                />
-              </div>
+export const Advanced: FunctionalComponent<IProps> = observer(({ application, appState, extensionsLatestVersions }) => {
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <AccordionItem title={'Advanced Settings'}>
+          <div className="flex flex-row items-center">
+            <div className="flex-grow flex flex-col">
+              <OfflineSubscription application={application} appState={appState} />
+              <Extensions
+                className={'mt-3'}
+                application={application}
+                extensionsLatestVersions={extensionsLatestVersions}
+              />
             </div>
-          </AccordionItem>
-        </PreferencesSegment>
-      </PreferencesGroup>
-    )
-  },
-)
+          </div>
+        </AccordionItem>
+      </PreferencesSegment>
+    </PreferencesGroup>
+  )
+})
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/Authentication.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/Authentication.tsx
index 900f93163..1e964529e 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Account/Authentication.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/Authentication.tsx
@@ -1,11 +1,6 @@
 import { AccountMenuPane } from '@/Components/AccountMenu'
 import { Button } from '@/Components/Button/Button'
-import {
-  PreferencesGroup,
-  PreferencesSegment,
-  Text,
-  Title,
-} from '@/Components/Preferences/PreferencesComponents'
+import { PreferencesGroup, PreferencesSegment, Text, Title } from '@/Components/Preferences/PreferencesComponents'
 import { WebApplication } from '@/UIModels/Application'
 import { AppState } from '@/UIModels/AppState'
 import { observer } from 'mobx-react-lite'
@@ -35,21 +30,12 @@ export const Authentication: FunctionComponent<{
           <AccountIllustration className="mb-3" />
           <Title>You're not signed in</Title>
           <Text className="text-center mb-3">
-            Sign in to sync your notes and preferences across all your devices and enable end-to-end
-            encryption.
+            Sign in to sync your notes and preferences across all your devices and enable end-to-end encryption.
           </Text>
-          <Button
-            variant="primary"
-            label="Create free account"
-            onClick={clickRegister}
-            className="mb-3"
-          />
+          <Button variant="primary" label="Create free account" onClick={clickRegister} className="mb-3" />
           <div className="text-input">
             Already have an account?{' '}
-            <button
-              className="border-0 p-0 bg-default color-info underline cursor-pointer"
-              onClick={clickSignIn}
-            >
+            <button className="border-0 p-0 bg-default color-info underline cursor-pointer" onClick={clickSignIn}>
               Sign in
             </button>
           </div>
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmailForm.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmailForm.tsx
index 51e50a1c0..6f94004b6 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmailForm.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmailForm.tsx
@@ -10,10 +10,7 @@ const labelClassName = 'block mb-1'
 
 const inputClassName = 'sk-input contrast'
 
-export const ChangeEmailForm: FunctionalComponent<Props> = ({
-  setNewEmail,
-  setCurrentPassword,
-}) => {
+export const ChangeEmailForm: FunctionalComponent<Props> = ({ setNewEmail, setCurrentPassword }) => {
   return (
     <div className="w-full flex flex-col">
       <div className="mt-2 mb-3">
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmailSuccess.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmailSuccess.tsx
index 9ba2713af..1e735eae0 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmailSuccess.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmailSuccess.tsx
@@ -5,8 +5,8 @@ export const ChangeEmailSuccess: FunctionalComponent = () => {
     <div>
       <div className={'sk-label sk-bold info mt-2'}>Your email has been successfully changed.</div>
       <p className={'sk-p'}>
-        Please ensure you are running the latest version of Standard Notes on all platforms to
-        ensure maximum compatibility.
+        Please ensure you are running the latest version of Standard Notes on all platforms to ensure maximum
+        compatibility.
       </p>
     </div>
   )
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/ChangeEmail/index.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/ChangeEmail/index.tsx
index f9b63ea09..4ca8e618a 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Account/ChangeEmail/index.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/ChangeEmail/index.tsx
@@ -63,9 +63,7 @@ export const ChangeEmail: FunctionalComponent<Props> = ({ onCloseDialog, applica
   const validateNewEmail = async () => {
     if (!isEmailValid(newEmail)) {
       applicationAlertService
-        .alert(
-          'The email you entered has an invalid format. Please review your input and try again.',
-        )
+        .alert('The email you entered has an invalid format. Please review your input and try again.')
         .catch(console.error)
 
       return false
@@ -95,9 +93,7 @@ export const ChangeEmail: FunctionalComponent<Props> = ({ onCloseDialog, applica
 
   const dismiss = () => {
     if (lockContinue) {
-      applicationAlertService
-        .alert('Cannot close window until pending tasks are complete.')
-        .catch(console.error)
+      applicationAlertService.alert('Cannot close window until pending tasks are complete.').catch(console.error)
     } else {
       onCloseDialog()
     }
@@ -139,9 +135,7 @@ export const ChangeEmail: FunctionalComponent<Props> = ({ onCloseDialog, applica
 
   const handleDialogClose = () => {
     if (lockContinue) {
-      applicationAlertService
-        .alert('Cannot close window until pending tasks are complete.')
-        .catch(console.error)
+      applicationAlertService.alert('Cannot close window until pending tasks are complete.').catch(console.error)
     } else {
       onCloseDialog()
     }
@@ -158,12 +152,7 @@ export const ChangeEmail: FunctionalComponent<Props> = ({ onCloseDialog, applica
           {currentStep === Steps.FinishStep && <ChangeEmailSuccess />}
         </ModalDialogDescription>
         <ModalDialogButtons className="px-4.5">
-          <Button
-            className="min-w-20"
-            variant="primary"
-            label={submitButtonTitle}
-            onClick={handleSubmit}
-          />
+          <Button className="min-w-20" variant="primary" label={submitButtonTitle} onClick={handleSubmit} />
         </ModalDialogButtons>
       </ModalDialog>
     </div>
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/Credentials.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/Credentials.tsx
index 9cca4b4e6..86998efe8 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Account/Credentials.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/Credentials.tsx
@@ -30,10 +30,7 @@ export const Credentials: FunctionComponent<Props> = observer(({ application }:
   const passwordCreatedOn = dateToLocalizedString(passwordCreatedAtTimestamp)
 
   const presentPasswordWizard = useCallback(() => {
-    render(
-      <PasswordWizard application={application} />,
-      document.body.appendChild(document.createElement('div')),
-    )
+    render(<PasswordWizard application={application} />, document.body.appendChild(document.createElement('div')))
   }, [application])
 
   return (
@@ -57,17 +54,9 @@ export const Credentials: FunctionComponent<Props> = observer(({ application }:
         <Text>
           Current password was set on <span className="font-bold">{passwordCreatedOn}</span>
         </Text>
-        <Button
-          className="min-w-20 mt-3"
-          variant="normal"
-          label="Change password"
-          onClick={presentPasswordWizard}
-        />
+        <Button className="min-w-20 mt-3" variant="normal" label="Change password" onClick={presentPasswordWizard} />
         {isChangeEmailDialogOpen && (
-          <ChangeEmail
-            onCloseDialog={() => setIsChangeEmailDialogOpen(false)}
-            application={application}
-          />
+          <ChangeEmail onCloseDialog={() => setIsChangeEmailDialogOpen(false)} application={application} />
         )}
       </PreferencesSegment>
     </PreferencesGroup>
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/OfflineSubscription.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/OfflineSubscription.tsx
index d9d327cdd..6a2e3eca6 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Account/OfflineSubscription.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/OfflineSubscription.tsx
@@ -28,9 +28,7 @@ export const OfflineSubscription: FunctionalComponent<IProps> = observer(({ appl
   }, [application])
 
   const shouldShowOfflineSubscription = () => {
-    return (
-      !application.hasAccount() || application.isThirdPartyHostUsed() || hasUserPreviouslyStoredCode
-    )
+    return !application.hasAccount() || application.isThirdPartyHostUsed() || hasUserPreviouslyStoredCode
   }
 
   const handleSubscriptionCodeSubmit = async (event: Event) => {
@@ -98,8 +96,8 @@ export const OfflineSubscription: FunctionalComponent<IProps> = observer(({ appl
             </div>
             {(isSuccessfullyActivated || isSuccessfullyRemoved) && (
               <div className={'mt-3 mb-3 info'}>
-                Your offline subscription code has been successfully{' '}
-                {isSuccessfullyActivated ? 'activated' : 'removed'}.
+                Your offline subscription code has been successfully {isSuccessfullyActivated ? 'activated' : 'removed'}
+                .
               </div>
             )}
             {hasUserPreviouslyStoredCode && (
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/SignOutView.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/SignOutView.tsx
index db6436d78..087ce9f76 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Account/SignOutView.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/SignOutView.tsx
@@ -33,11 +33,7 @@ const SignOutView: FunctionComponent<{
                 appState.accountMenu.setOtherSessionsSignOut(true)
               }}
             />
-            <Button
-              variant="normal"
-              label="Manage sessions"
-              onClick={() => appState.openSessionsModal()}
-            />
+            <Button variant="normal" label="Manage sessions" onClick={() => appState.openSessionsModal()} />
           </div>
         </PreferencesSegment>
         <PreferencesSegment>
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx
index ad5431544..a6f28705a 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx
@@ -12,8 +12,7 @@ export const NoSubscription: FunctionalComponent<{
   const [purchaseFlowError, setPurchaseFlowError] = useState<string | undefined>(undefined)
 
   const onPurchaseClick = async () => {
-    const errorMessage =
-      'There was an error when attempting to redirect you to the subscription page.'
+    const errorMessage = 'There was an error when attempting to redirect you to the subscription page.'
     setIsLoadingPurchaseFlow(true)
     try {
       if (!(await loadPurchaseFlowUrl(application))) {
@@ -32,18 +31,9 @@ export const NoSubscription: FunctionalComponent<{
       {isLoadingPurchaseFlow && <Text>Redirecting you to the subscription page...</Text>}
       {purchaseFlowError && <Text className="color-danger">{purchaseFlowError}</Text>}
       <div className="flex">
-        <LinkButton
-          className="min-w-20 mt-3 mr-3"
-          label="Learn More"
-          link={window.plansUrl as string}
-        />
+        <LinkButton className="min-w-20 mt-3 mr-3" label="Learn More" link={window.plansUrl as string} />
         {application.hasAccount() && (
-          <Button
-            className="min-w-20 mt-3"
-            variant="primary"
-            label="Subscribe"
-            onClick={onPurchaseClick}
-          />
+          <Button className="min-w-20 mt-3" variant="primary" label="Subscribe" onClick={onPurchaseClick} />
         )}
       </div>
     </>
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/Subscription.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/Subscription.tsx
index b9d8822f8..d680c9328 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/Subscription.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/Subscription.tsx
@@ -1,8 +1,4 @@
-import {
-  PreferencesGroup,
-  PreferencesSegment,
-  Title,
-} from '@/Components/Preferences/PreferencesComponents'
+import { PreferencesGroup, PreferencesSegment, Title } from '@/Components/Preferences/PreferencesComponents'
 import { WebApplication } from '@/UIModels/Application'
 import { SubscriptionInformation } from './SubscriptionInformation'
 import { NoSubscription } from './NoSubscription'
@@ -15,31 +11,26 @@ type Props = {
   appState: AppState
 }
 
-export const Subscription: FunctionComponent<Props> = observer(
-  ({ application, appState }: Props) => {
-    const subscriptionState = appState.subscription
-    const { userSubscription } = subscriptionState
+export const Subscription: FunctionComponent<Props> = observer(({ application, appState }: Props) => {
+  const subscriptionState = appState.subscription
+  const { userSubscription } = subscriptionState
 
-    const now = new Date().getTime()
+  const now = new Date().getTime()
 
-    return (
-      <PreferencesGroup>
-        <PreferencesSegment>
-          <div className="flex flex-row items-center">
-            <div className="flex-grow flex flex-col">
-              <Title>Subscription</Title>
-              {userSubscription && userSubscription.endsAt > now ? (
-                <SubscriptionInformation
-                  subscriptionState={subscriptionState}
-                  application={application}
-                />
-              ) : (
-                <NoSubscription application={application} />
-              )}
-            </div>
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <div className="flex flex-row items-center">
+          <div className="flex-grow flex flex-col">
+            <Title>Subscription</Title>
+            {userSubscription && userSubscription.endsAt > now ? (
+              <SubscriptionInformation subscriptionState={subscriptionState} application={application} />
+            ) : (
+              <NoSubscription application={application} />
+            )}
           </div>
-        </PreferencesSegment>
-      </PreferencesGroup>
-    )
-  },
-)
+        </div>
+      </PreferencesSegment>
+    </PreferencesGroup>
+  )
+})
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/SubscriptionInformation.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/SubscriptionInformation.tsx
index 3dcf52b79..0d2e24494 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/SubscriptionInformation.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/SubscriptionInformation.tsx
@@ -10,49 +10,16 @@ type Props = {
   application: WebApplication
 }
 
-const StatusText = observer(
-  ({ subscriptionState }: { subscriptionState: Props['subscriptionState'] }) => {
-    const {
-      userSubscriptionName,
-      userSubscriptionExpirationDate,
-      isUserSubscriptionExpired,
-      isUserSubscriptionCanceled,
-    } = subscriptionState
-    const expirationDateString = userSubscriptionExpirationDate?.toLocaleString()
-
-    if (isUserSubscriptionCanceled) {
-      return (
-        <Text className="mt-1">
-          Your{' '}
-          <span className="font-bold">
-            Standard Notes{userSubscriptionName ? ' ' : ''}
-            {userSubscriptionName}
-          </span>{' '}
-          subscription has been canceled{' '}
-          {isUserSubscriptionExpired ? (
-            <span className="font-bold">and expired on {expirationDateString}</span>
-          ) : (
-            <span className="font-bold">but will remain valid until {expirationDateString}</span>
-          )}
-          . You may resubscribe below if you wish.
-        </Text>
-      )
-    }
-
-    if (isUserSubscriptionExpired) {
-      return (
-        <Text className="mt-1">
-          Your{' '}
-          <span className="font-bold">
-            Standard Notes{userSubscriptionName ? ' ' : ''}
-            {userSubscriptionName}
-          </span>{' '}
-          subscription <span className="font-bold">expired on {expirationDateString}</span>. You may
-          resubscribe below if you wish.
-        </Text>
-      )
-    }
+const StatusText = observer(({ subscriptionState }: { subscriptionState: Props['subscriptionState'] }) => {
+  const {
+    userSubscriptionName,
+    userSubscriptionExpirationDate,
+    isUserSubscriptionExpired,
+    isUserSubscriptionCanceled,
+  } = subscriptionState
+  const expirationDateString = userSubscriptionExpirationDate?.toLocaleString()
 
+  if (isUserSubscriptionCanceled) {
     return (
       <Text className="mt-1">
         Your{' '}
@@ -60,11 +27,42 @@ const StatusText = observer(
           Standard Notes{userSubscriptionName ? ' ' : ''}
           {userSubscriptionName}
         </span>{' '}
-        subscription will be <span className="font-bold">renewed on {expirationDateString}</span>.
+        subscription has been canceled{' '}
+        {isUserSubscriptionExpired ? (
+          <span className="font-bold">and expired on {expirationDateString}</span>
+        ) : (
+          <span className="font-bold">but will remain valid until {expirationDateString}</span>
+        )}
+        . You may resubscribe below if you wish.
       </Text>
     )
-  },
-)
+  }
+
+  if (isUserSubscriptionExpired) {
+    return (
+      <Text className="mt-1">
+        Your{' '}
+        <span className="font-bold">
+          Standard Notes{userSubscriptionName ? ' ' : ''}
+          {userSubscriptionName}
+        </span>{' '}
+        subscription <span className="font-bold">expired on {expirationDateString}</span>. You may resubscribe below if
+        you wish.
+      </Text>
+    )
+  }
+
+  return (
+    <Text className="mt-1">
+      Your{' '}
+      <span className="font-bold">
+        Standard Notes{userSubscriptionName ? ' ' : ''}
+        {userSubscriptionName}
+      </span>{' '}
+      subscription will be <span className="font-bold">renewed on {expirationDateString}</span>.
+    </Text>
+  )
+})
 
 export const SubscriptionInformation = observer(({ subscriptionState, application }: Props) => {
   const manageSubscription = async () => {
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/Sync.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/Sync.tsx
index 4f0ee4478..ca6c809ee 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Account/Sync.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/Sync.tsx
@@ -1,9 +1,4 @@
-import {
-  PreferencesGroup,
-  PreferencesSegment,
-  Text,
-  Title,
-} from '@/Components/Preferences/PreferencesComponents'
+import { PreferencesGroup, PreferencesSegment, Text, Title } from '@/Components/Preferences/PreferencesComponents'
 import { Button } from '@/Components/Button/Button'
 import { SyncQueueStrategy, dateToLocalizedString } from '@standardnotes/snjs'
 import { STRING_GENERIC_SYNC_ERROR } from '@/Strings'
@@ -22,9 +17,7 @@ export const formatLastSyncDate = (lastUpdatedDate: Date) => {
 
 export const Sync: FunctionComponent<Props> = observer(({ application }: Props) => {
   const [isSyncingInProgress, setIsSyncingInProgress] = useState(false)
-  const [lastSyncDate, setLastSyncDate] = useState(
-    formatLastSyncDate(application.sync.getLastSyncDate() as Date),
-  )
+  const [lastSyncDate, setLastSyncDate] = useState(formatLastSyncDate(application.sync.getLastSyncDate() as Date))
 
   const doSynchronization = async () => {
     setIsSyncingInProgress(true)
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Appearance.tsx b/app/assets/javascripts/Components/Preferences/Panes/Appearance.tsx
index 8d1468165..79100c21e 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Appearance.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Appearance.tsx
@@ -3,14 +3,7 @@ import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
 import { Switch } from '@/Components/Switch'
 import { WebApplication } from '@/UIModels/Application'
-import {
-  ContentType,
-  FeatureIdentifier,
-  FeatureStatus,
-  PrefKey,
-  GetFeatures,
-  SNTheme,
-} from '@standardnotes/snjs'
+import { ContentType, FeatureIdentifier, FeatureStatus, PrefKey, GetFeatures, SNTheme } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
 import { useEffect, useState } from 'preact/hooks'
@@ -31,8 +24,7 @@ type Props = {
 export const Appearance: FunctionComponent<Props> = observer(({ application }) => {
   const premiumModal = usePremiumModal()
   const isEntitledToMidnightTheme =
-    application.features.getFeatureStatus(FeatureIdentifier.MidnightTheme) ===
-    FeatureStatus.Entitled
+    application.features.getFeatureStatus(FeatureIdentifier.MidnightTheme) === FeatureStatus.Entitled
 
   const [themeItems, setThemeItems] = useState<DropdownItem[]>([])
   const [autoLightTheme, setAutoLightTheme] = useState<string>(
@@ -100,9 +92,7 @@ export const Appearance: FunctionComponent<Props> = observer(({ application }) =
     if (item.icon === 'premium-feature') {
       premiumModal.activate(`${item.label} theme`)
     } else {
-      application
-        .setPreference(PrefKey.AutoLightThemeIdentifier, value as FeatureIdentifier)
-        .catch(console.error)
+      application.setPreference(PrefKey.AutoLightThemeIdentifier, value as FeatureIdentifier).catch(console.error)
       setAutoLightTheme(value)
     }
   }
@@ -111,9 +101,7 @@ export const Appearance: FunctionComponent<Props> = observer(({ application }) =
     if (item.icon === 'premium-feature') {
       premiumModal.activate(`${item.label} theme`)
     } else {
-      application
-        .setPreference(PrefKey.AutoDarkThemeIdentifier, value as FeatureIdentifier)
-        .catch(console.error)
+      application.setPreference(PrefKey.AutoDarkThemeIdentifier, value as FeatureIdentifier).catch(console.error)
       setAutoDarkTheme(value)
     }
   }
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Backups/CloudBackups/CloudBackupProvider.tsx b/app/assets/javascripts/Components/Preferences/Panes/Backups/CloudBackups/CloudBackupProvider.tsx
index 90ad25d2b..aa66e0058 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Backups/CloudBackups/CloudBackupProvider.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Backups/CloudBackups/CloudBackupProvider.tsx
@@ -66,18 +66,13 @@ export const CloudBackupProvider: FunctionComponent<Props> = ({
   const performBackupNow = async () => {
     // A backup is performed anytime the setting is updated with the integration token, so just update it here
     try {
-      await application.settings.updateSetting(
-        backupFrequencySettingName,
-        backupFrequency as string,
-      )
+      await application.settings.updateSetting(backupFrequencySettingName, backupFrequency as string)
       void application.alertService.alert(
         'A backup has been triggered for this provider. Please allow a couple minutes for your backup to be processed.',
       )
     } catch (err) {
       application.alertService
-        .alert(
-          'There was an error while trying to trigger a backup for this provider. Please try again.',
-        )
+        .alert('There was an error while trying to trigger a backup for this provider. Please try again.')
         .catch(console.error)
     }
   }
@@ -184,8 +179,8 @@ export const CloudBackupProvider: FunctionComponent<Props> = ({
       {authBegan && (
         <div>
           <p className="sk-panel-row">
-            Complete authentication from the newly opened window. Upon completion, a confirmation
-            code will be displayed. Enter this code below:
+            Complete authentication from the newly opened window. Upon completion, a confirmation code will be
+            displayed. Enter this code below:
           </p>
           <div className={'mt-1'}>
             <input
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Backups/CloudBackups/index.tsx b/app/assets/javascripts/Components/Preferences/Panes/Backups/CloudBackups/index.tsx
index c2d5cb3a2..6b98d9c2a 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Backups/CloudBackups/index.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Backups/CloudBackups/index.tsx
@@ -22,11 +22,7 @@ import { Switch } from '@/Components/Switch'
 import { convertStringifiedBooleanToBoolean } from '@/Utils'
 import { STRING_FAILED_TO_UPDATE_USER_SETTING } from '@/Strings'
 
-const providerData = [
-  { name: CloudProvider.Dropbox },
-  { name: CloudProvider.Google },
-  { name: CloudProvider.OneDrive },
-]
+const providerData = [{ name: CloudProvider.Dropbox }, { name: CloudProvider.Google }, { name: CloudProvider.OneDrive }]
 
 type Props = {
   application: WebApplication
@@ -62,20 +58,12 @@ export const CloudLink: FunctionComponent<Props> = ({ application }) => {
   }, [application])
 
   useEffect(() => {
-    const dailyDropboxBackupStatus = application.features.getFeatureStatus(
-      FeatureIdentifier.DailyDropboxBackup,
+    const dailyDropboxBackupStatus = application.features.getFeatureStatus(FeatureIdentifier.DailyDropboxBackup)
+    const dailyGdriveBackupStatus = application.features.getFeatureStatus(FeatureIdentifier.DailyGDriveBackup)
+    const dailyOneDriveBackupStatus = application.features.getFeatureStatus(FeatureIdentifier.DailyOneDriveBackup)
+    const isCloudBackupsAllowed = [dailyDropboxBackupStatus, dailyGdriveBackupStatus, dailyOneDriveBackupStatus].every(
+      (status) => status === FeatureStatus.Entitled,
     )
-    const dailyGdriveBackupStatus = application.features.getFeatureStatus(
-      FeatureIdentifier.DailyGDriveBackup,
-    )
-    const dailyOneDriveBackupStatus = application.features.getFeatureStatus(
-      FeatureIdentifier.DailyOneDriveBackup,
-    )
-    const isCloudBackupsAllowed = [
-      dailyDropboxBackupStatus,
-      dailyGdriveBackupStatus,
-      dailyOneDriveBackupStatus,
-    ].every((status) => status === FeatureStatus.Entitled)
 
     setIsEntitledToCloudBackups(isCloudBackupsAllowed)
     loadIsFailedCloudBackupEmailMutedSetting().catch(console.error)
@@ -114,9 +102,8 @@ export const CloudLink: FunctionComponent<Props> = ({ application }) => {
         {!isEntitledToCloudBackups && (
           <>
             <Text>
-              A <span className={'font-bold'}>Plus</span> or{' '}
-              <span className={'font-bold'}>Pro</span> subscription plan is required to enable Cloud
-              Backups.{' '}
+              A <span className={'font-bold'}>Plus</span> or <span className={'font-bold'}>Pro</span> subscription plan
+              is required to enable Cloud Backups.{' '}
               <a target="_blank" href="https://standardnotes.com/features">
                 Learn more
               </a>
@@ -127,8 +114,8 @@ export const CloudLink: FunctionComponent<Props> = ({ application }) => {
         )}
         <div>
           <Text className={additionalClass}>
-            Configure the integrations below to enable automatic daily backups of your encrypted
-            data set to your third-party cloud provider.
+            Configure the integrations below to enable automatic daily backups of your encrypted data set to your
+            third-party cloud provider.
           </Text>
           <div>
             <HorizontalSeparator classes={`mt-3 mb-3 ${additionalClass}`} />
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Backups/DataBackups.tsx b/app/assets/javascripts/Components/Preferences/Panes/Backups/DataBackups.tsx
index 23f494f7c..1763af116 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Backups/DataBackups.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Backups/DataBackups.tsx
@@ -160,8 +160,7 @@ export const DataBackups = observer(({ application, appState }: Props) => {
 
           {!isDesktopApplication() && (
             <Text className="mb-3">
-              Backups are automatically created on desktop and can be managed via the "Backups"
-              top-level menu.
+              Backups are automatically created on desktop and can be managed via the "Backups" top-level menu.
             </Text>
           )}
 
@@ -171,43 +170,25 @@ export const DataBackups = observer(({ application, appState }: Props) => {
             <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}
-                  />
+                  <input type="radio" onChange={() => setIsBackupEncrypted(true)} checked={isBackupEncrypted} />
                   <Subtitle>Encrypted</Subtitle>
                 </label>
                 <label className="sk-horizontal-group tight">
-                  <input
-                    type="radio"
-                    onChange={() => setIsBackupEncrypted(false)}
-                    checked={!isBackupEncrypted}
-                  />
+                  <input type="radio" onChange={() => setIsBackupEncrypted(false)} checked={!isBackupEncrypted} />
                   <Subtitle>Decrypted</Subtitle>
                 </label>
               </div>
             </form>
           )}
 
-          <Button
-            variant="normal"
-            onClick={downloadDataArchive}
-            label="Download backup"
-            className="mt-2"
-          />
+          <Button variant="normal" onClick={downloadDataArchive} label="Download backup" className="mt-2" />
         </PreferencesSegment>
         <PreferencesSegment>
           <Subtitle>Import a previously saved backup file</Subtitle>
 
           <div class="flex flex-row items-center mt-3">
             <Button variant="normal" label="Import backup" onClick={handleImportFile} />
-            <input
-              type="file"
-              ref={fileInputRef}
-              onChange={importFileSelected}
-              className="hidden"
-            />
+            <input type="file" ref={fileInputRef} onChange={importFileSelected} className="hidden" />
             {isImportDataLoading && <div className="sk-spinner normal info ml-4" />}
           </div>
         </PreferencesSegment>
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Backups/EmailBackups.tsx b/app/assets/javascripts/Components/Preferences/Panes/Backups/EmailBackups.tsx
index 769425131..abdc6fc2e 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Backups/EmailBackups.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Backups/EmailBackups.tsx
@@ -27,9 +27,7 @@ type Props = {
 
 export const EmailBackups = observer(({ application }: Props) => {
   const [isLoading, setIsLoading] = useState(false)
-  const [emailFrequency, setEmailFrequency] = useState<EmailBackupFrequency>(
-    EmailBackupFrequency.Disabled,
-  )
+  const [emailFrequency, setEmailFrequency] = useState<EmailBackupFrequency>(EmailBackupFrequency.Disabled)
   const [emailFrequencyOptions, setEmailFrequencyOptions] = useState<DropdownItem[]>([])
   const [isFailedBackupEmailMuted, setIsFailedBackupEmailMuted] = useState(true)
   const [isEntitledToEmailBackups, setIsEntitledToEmailBackups] = useState(false)
@@ -64,9 +62,7 @@ export const EmailBackups = observer(({ application }: Props) => {
   }, [application])
 
   useEffect(() => {
-    const emailBackupsFeatureStatus = application.features.getFeatureStatus(
-      FeatureIdentifier.DailyEmailBackup,
-    )
+    const emailBackupsFeatureStatus = application.features.getFeatureStatus(FeatureIdentifier.DailyEmailBackup)
     setIsEntitledToEmailBackups(emailBackupsFeatureStatus === FeatureStatus.Entitled)
 
     const frequencyOptions = []
@@ -109,10 +105,7 @@ export const EmailBackups = observer(({ application }: Props) => {
     const previousValue = isFailedBackupEmailMuted
     setIsFailedBackupEmailMuted(!isFailedBackupEmailMuted)
 
-    const updateResult = await updateSetting(
-      SettingName.MuteFailedBackupsEmails,
-      `${!isFailedBackupEmailMuted}`,
-    )
+    const updateResult = await updateSetting(SettingName.MuteFailedBackupsEmails, `${!isFailedBackupEmailMuted}`)
     if (!updateResult) {
       setIsFailedBackupEmailMuted(previousValue)
     }
@@ -132,9 +125,8 @@ export const EmailBackups = observer(({ application }: Props) => {
         {!isEntitledToEmailBackups && (
           <>
             <Text>
-              A <span className={'font-bold'}>Plus</span> or{' '}
-              <span className={'font-bold'}>Pro</span> subscription plan is required to enable Email
-              Backups.{' '}
+              A <span className={'font-bold'}>Plus</span> or <span className={'font-bold'}>Pro</span> subscription plan
+              is required to enable Email Backups.{' '}
               <a target="_blank" href="https://standardnotes.com/features">
                 Learn more
               </a>
@@ -146,8 +138,7 @@ export const EmailBackups = observer(({ application }: Props) => {
         <div className={isEntitledToEmailBackups ? '' : 'faded cursor-default pointer-events-none'}>
           {!isDesktopApplication() && (
             <Text className="mb-3">
-              Daily encrypted email backups of your entire data set delivered directly to your
-              inbox.
+              Daily encrypted email backups of your entire data set delivered directly to your inbox.
             </Text>
           )}
           <Subtitle>Email frequency</Subtitle>
diff --git a/app/assets/javascripts/Components/Preferences/Panes/CloudLink.tsx b/app/assets/javascripts/Components/Preferences/Panes/CloudLink.tsx
index a9c85db1f..c6e06d35f 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/CloudLink.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/CloudLink.tsx
@@ -17,10 +17,10 @@ export const CloudLink: FunctionComponent = () => (
         <div className="h-2 w-full" />
         <Subtitle>Who can read my private notes?</Subtitle>
         <Text>
-          Quite simply: no one but you. Not us, not your ISP, not a hacker, and not a government
-          agency. As long as you keep your password safe, and your password is reasonably strong,
-          then you are the only person in the world with the ability to decrypt your notes. For more
-          on how we handle your privacy and security, check out our easy to read{' '}
+          Quite simply: no one but you. Not us, not your ISP, not a hacker, and not a government agency. As long as you
+          keep your password safe, and your password is reasonably strong, then you are the only person in the world
+          with the ability to decrypt your notes. For more on how we handle your privacy and security, check out our
+          easy to read{' '}
           <a target="_blank" href="https://standardnotes.com/privacy">
             Privacy Manifesto.
           </a>
@@ -29,21 +29,17 @@ export const CloudLink: FunctionComponent = () => (
       <PreferencesSegment>
         <Subtitle>Can I collaborate with others on a note?</Subtitle>
         <Text>
-          Because of our encrypted architecture, Standard Notes does not currently provide a
-          real-time collaboration solution. Multiple users can share the same account however, but
-          editing at the same time may result in sync conflicts, which may result in the duplication
-          of notes.
+          Because of our encrypted architecture, Standard Notes does not currently provide a real-time collaboration
+          solution. Multiple users can share the same account however, but editing at the same time may result in sync
+          conflicts, which may result in the duplication of notes.
         </Text>
       </PreferencesSegment>
       <PreferencesSegment>
         <Subtitle>Can I use Standard Notes totally offline?</Subtitle>
         <Text>
-          Standard Notes can be used totally offline without an account, and without an internet
-          connection. You can find{' '}
-          <a
-            target="_blank"
-            href="https://standardnotes.com/help/59/can-i-use-standard-notes-totally-offline"
-          >
+          Standard Notes can be used totally offline without an account, and without an internet connection. You can
+          find{' '}
+          <a target="_blank" href="https://standardnotes.com/help/59/can-i-use-standard-notes-totally-offline">
             more details here.
           </a>
         </Text>
@@ -57,38 +53,25 @@ export const CloudLink: FunctionComponent = () => (
       <PreferencesSegment>
         <Title>Community forum</Title>
         <Text>
-          If you have an issue, found a bug or want to suggest a feature, you can browse or post to
-          the forum. It’s recommended for non-account related issues. Please read our{' '}
+          If you have an issue, found a bug or want to suggest a feature, you can browse or post to the forum. It’s
+          recommended for non-account related issues. Please read our{' '}
           <a target="_blank" href="https://standardnotes.com/longevity/">
             Longevity statement
           </a>{' '}
           before advocating for a feature request.
         </Text>
-        <LinkButton
-          className="mt-3"
-          label="Go to the forum"
-          link="https://forum.standardnotes.org/"
-        />
+        <LinkButton className="mt-3" label="Go to the forum" link="https://forum.standardnotes.org/" />
       </PreferencesSegment>
     </PreferencesGroup>
     <PreferencesGroup>
       <PreferencesSegment>
         <Title>Community groups</Title>
         <Text>
-          Want to meet other passionate note-takers and privacy enthusiasts? Want to share your
-          feedback with us? Join the Standard Notes community groups for discussions on security,
-          themes, editors and more.
+          Want to meet other passionate note-takers and privacy enthusiasts? Want to share your feedback with us? Join
+          the Standard Notes community groups for discussions on security, themes, editors and more.
         </Text>
-        <LinkButton
-          className="mt-3"
-          link="https://standardnotes.com/slack"
-          label="Join our Slack"
-        />
-        <LinkButton
-          className="mt-3"
-          link="https://standardnotes.com/discord"
-          label="Join our Discord"
-        />
+        <LinkButton className="mt-3" link="https://standardnotes.com/slack" label="Join our Slack" />
+        <LinkButton className="mt-3" link="https://standardnotes.com/discord" label="Join our Discord" />
       </PreferencesSegment>
     </PreferencesGroup>
     <PreferencesGroup>
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Extensions/ConfirmCustomExtension.tsx b/app/assets/javascripts/Components/Preferences/Panes/Extensions/ConfirmCustomExtension.tsx
index b7e0a7771..71f67bcd3 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Extensions/ConfirmCustomExtension.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Extensions/ConfirmCustomExtension.tsx
@@ -1,12 +1,7 @@
 import { DisplayStringForContentType, SNComponent } from '@standardnotes/snjs'
 import { Button } from '@/Components/Button/Button'
 import { FunctionComponent } from 'preact'
-import {
-  Title,
-  Text,
-  Subtitle,
-  PreferencesSegment,
-} from '@/Components/Preferences/PreferencesComponents'
+import { Title, Text, Subtitle, PreferencesSegment } from '@/Components/Preferences/PreferencesComponents'
 
 export const ConfirmCustomExtension: FunctionComponent<{
   component: SNComponent
@@ -59,21 +54,11 @@ export const ConfirmCustomExtension: FunctionComponent<{
       <div className="min-h-3" />
 
       <div className="flex flex-row">
-        <Button
-          className="min-w-20"
-          variant="normal"
-          label="Cancel"
-          onClick={() => callback(false)}
-        />
+        <Button className="min-w-20" variant="normal" label="Cancel" onClick={() => callback(false)} />
 
         <div className="min-w-3" />
 
-        <Button
-          className="min-w-20"
-          variant="normal"
-          label="Install"
-          onClick={() => callback(true)}
-        />
+        <Button className="min-w-20" variant="normal" label="Install" onClick={() => callback(true)} />
       </div>
     </PreferencesSegment>
   )
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionItem.tsx b/app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionItem.tsx
index caec18d0a..865a7a0a7 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionItem.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionItem.tsx
@@ -1,10 +1,6 @@
 import { FunctionComponent } from 'preact'
 import { SNComponent } from '@standardnotes/snjs'
-import {
-  PreferencesSegment,
-  SubtitleLight,
-  Title,
-} from '@/Components/Preferences/PreferencesComponents'
+import { PreferencesSegment, SubtitleLight, Title } from '@/Components/Preferences/PreferencesComponents'
 import { Switch } from '@/Components/Switch'
 import { WebApplication } from '@/UIModels/Application'
 import { useState } from 'preact/hooks'
@@ -30,12 +26,7 @@ export interface ExtensionItemProps {
   toggleActivate?: (extension: SNComponent) => void
 }
 
-export const ExtensionItem: FunctionComponent<ExtensionItemProps> = ({
-  application,
-  extension,
-  first,
-  uninstall,
-}) => {
+export const ExtensionItem: FunctionComponent<ExtensionItemProps> = ({ application, extension, first, uninstall }) => {
   const [offlineOnly, setOfflineOnly] = useState(extension.offlineOnly ?? false)
   const [extensionName, setExtensionName] = useState(extension.name)
 
@@ -95,12 +86,7 @@ export const ExtensionItem: FunctionComponent<ExtensionItemProps> = ({
       <>
         <div className="min-h-2" />
         <div className="flex flex-row">
-          <Button
-            className="min-w-20"
-            variant="normal"
-            label="Uninstall"
-            onClick={() => uninstall(extension)}
-          />
+          <Button className="min-w-20" variant="normal" label="Uninstall" onClick={() => uninstall(extension)} />
         </div>
       </>
     </PreferencesSegment>
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionsLatestVersions.ts b/app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionsLatestVersions.ts
index c24f8daa1..4c998faac 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionsLatestVersions.ts
+++ b/app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionsLatestVersions.ts
@@ -29,10 +29,7 @@ export class ExtensionsLatestVersions {
   }
 }
 
-function collectFeatures(
-  features: FeatureDescription[] | undefined,
-  versionMap: Map<string, string>,
-) {
+function collectFeatures(features: FeatureDescription[] | undefined, versionMap: Map<string, string>) {
   if (features == undefined) {
     return
   }
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Extensions/index.tsx b/app/assets/javascripts/Components/Preferences/Panes/Extensions/index.tsx
index f0b5476fd..be93d93e9 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Extensions/index.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Extensions/index.tsx
@@ -11,11 +11,7 @@ import { ExtensionItem } from './ExtensionItem'
 import { ConfirmCustomExtension } from './ConfirmCustomExtension'
 
 const loadExtensions = (application: WebApplication) =>
-  application.items.getItems([
-    ContentType.ActionsExtension,
-    ContentType.Component,
-    ContentType.Theme,
-  ]) as SNComponent[]
+  application.items.getItems([ContentType.ActionsExtension, ContentType.Component, ContentType.Theme]) as SNComponent[]
 
 export const Extensions: FunctionComponent<{
   application: WebApplication
@@ -23,9 +19,7 @@ export const Extensions: FunctionComponent<{
   className?: string
 }> = observer(({ application, extensionsLatestVersions, className = '' }) => {
   const [customUrl, setCustomUrl] = useState('')
-  const [confirmableExtension, setConfirmableExtension] = useState<SNComponent | undefined>(
-    undefined,
-  )
+  const [confirmableExtension, setConfirmableExtension] = useState<SNComponent | undefined>(undefined)
   const [extensions, setExtensions] = useState(loadExtensions(application))
 
   const confirmableEnd = useRef<HTMLDivElement>(null)
@@ -122,10 +116,7 @@ export const Extensions: FunctionComponent<{
         )}
         {confirmableExtension && (
           <PreferencesSegment>
-            <ConfirmCustomExtension
-              component={confirmableExtension}
-              callback={handleConfirmExtensionSubmit}
-            />
+            <ConfirmCustomExtension component={confirmableExtension} callback={handleConfirmExtensionSubmit} />
             <div ref={confirmableEnd} />
           </PreferencesSegment>
         )}
diff --git a/app/assets/javascripts/Components/Preferences/Panes/General/Labs.tsx b/app/assets/javascripts/Components/Preferences/Panes/General/Labs.tsx
index f32ccb657..37896bc65 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/General/Labs.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/General/Labs.tsx
@@ -29,19 +29,16 @@ export const LabsPane: FunctionComponent<Props> = ({ application }) => {
   const [experimentalFeatures, setExperimentalFeatures] = useState<ExperimentalFeatureItem[]>([])
 
   const reloadExperimentalFeatures = useCallback(() => {
-    const experimentalFeatures = application.features
-      .getExperimentalFeatures()
-      .map((featureIdentifier) => {
-        const feature = FindNativeFeature(featureIdentifier)
-        return {
-          identifier: featureIdentifier,
-          name: feature?.name ?? featureIdentifier,
-          description: feature?.description ?? '',
-          isEnabled: application.features.isExperimentalFeatureEnabled(featureIdentifier),
-          isEntitled:
-            application.features.getFeatureStatus(featureIdentifier) === FeatureStatus.Entitled,
-        }
-      })
+    const experimentalFeatures = application.features.getExperimentalFeatures().map((featureIdentifier) => {
+      const feature = FindNativeFeature(featureIdentifier)
+      return {
+        identifier: featureIdentifier,
+        name: feature?.name ?? featureIdentifier,
+        description: feature?.description ?? '',
+        isEnabled: application.features.isExperimentalFeatureEnabled(featureIdentifier),
+        isEntitled: application.features.getFeatureStatus(featureIdentifier) === FeatureStatus.Entitled,
+      }
+    })
     setExperimentalFeatures(experimentalFeatures)
   }, [application.features])
 
@@ -56,35 +53,32 @@ export const LabsPane: FunctionComponent<Props> = ({ application }) => {
       <PreferencesSegment>
         <Title>Labs</Title>
         <div>
-          {experimentalFeatures.map(
-            ({ identifier, name, description, isEnabled, isEntitled }, index: number) => {
-              const toggleFeature = () => {
-                if (!isEntitled) {
-                  premiumModal.activate(name)
-                  return
-                }
-
-                application.features.toggleExperimentalFeature(identifier)
-                reloadExperimentalFeatures()
+          {experimentalFeatures.map(({ identifier, name, description, isEnabled, isEntitled }, index: number) => {
+            const toggleFeature = () => {
+              if (!isEntitled) {
+                premiumModal.activate(name)
+                return
               }
 
-              const showHorizontalSeparator =
-                experimentalFeatures.length > 1 && index !== experimentalFeatures.length - 1
+              application.features.toggleExperimentalFeature(identifier)
+              reloadExperimentalFeatures()
+            }
 
-              return (
-                <>
-                  <div className="flex items-center justify-between">
-                    <div className="flex flex-col">
-                      <Subtitle>{name}</Subtitle>
-                      <Text>{description}</Text>
-                    </div>
-                    <Switch onChange={toggleFeature} checked={isEnabled} />
+            const showHorizontalSeparator = experimentalFeatures.length > 1 && index !== experimentalFeatures.length - 1
+
+            return (
+              <>
+                <div className="flex items-center justify-between">
+                  <div className="flex flex-col">
+                    <Subtitle>{name}</Subtitle>
+                    <Text>{description}</Text>
                   </div>
-                  {showHorizontalSeparator && <HorizontalSeparator classes="mt-5 mb-3" />}
-                </>
-              )
-            },
-          )}
+                  <Switch onChange={toggleFeature} checked={isEnabled} />
+                </div>
+                {showHorizontalSeparator && <HorizontalSeparator classes="mt-5 mb-3" />}
+              </>
+            )
+          })}
           {experimentalFeatures.length === 0 && (
             <div className="flex items-center justify-between">
               <div className="flex flex-col">
diff --git a/app/assets/javascripts/Components/Preferences/Panes/General/index.tsx b/app/assets/javascripts/Components/Preferences/Panes/General/index.tsx
index adf637e00..353dcf226 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/General/index.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/General/index.tsx
@@ -21,11 +21,7 @@ export const General: FunctionComponent<GeneralProps> = observer(
       <Tools application={application} />
       <Defaults application={application} />
       <LabsPane application={application} />
-      <Advanced
-        application={application}
-        appState={appState}
-        extensionsLatestVersions={extensionsLatestVersions}
-      />
+      <Advanced application={application} appState={appState} extensionsLatestVersions={extensionsLatestVersions} />
     </PreferencesPane>
   ),
 )
diff --git a/app/assets/javascripts/Components/Preferences/Panes/HelpFeedback.tsx b/app/assets/javascripts/Components/Preferences/Panes/HelpFeedback.tsx
index e8e630197..e08b94462 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/HelpFeedback.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/HelpFeedback.tsx
@@ -17,10 +17,10 @@ export const HelpAndFeedback: FunctionComponent = () => (
         <div className="h-2 w-full" />
         <Subtitle>Who can read my private notes?</Subtitle>
         <Text>
-          Quite simply: no one but you. Not us, not your ISP, not a hacker, and not a government
-          agency. As long as you keep your password safe, and your password is reasonably strong,
-          then you are the only person in the world with the ability to decrypt your notes. For more
-          on how we handle your privacy and security, check out our easy to read{' '}
+          Quite simply: no one but you. Not us, not your ISP, not a hacker, and not a government agency. As long as you
+          keep your password safe, and your password is reasonably strong, then you are the only person in the world
+          with the ability to decrypt your notes. For more on how we handle your privacy and security, check out our
+          easy to read{' '}
           <a target="_blank" href="https://standardnotes.com/privacy">
             Privacy Manifesto.
           </a>
@@ -29,21 +29,17 @@ export const HelpAndFeedback: FunctionComponent = () => (
       <PreferencesSegment>
         <Subtitle>Can I collaborate with others on a note?</Subtitle>
         <Text>
-          Because of our encrypted architecture, Standard Notes does not currently provide a
-          real-time collaboration solution. Multiple users can share the same account however, but
-          editing at the same time may result in sync conflicts, which may result in the duplication
-          of notes.
+          Because of our encrypted architecture, Standard Notes does not currently provide a real-time collaboration
+          solution. Multiple users can share the same account however, but editing at the same time may result in sync
+          conflicts, which may result in the duplication of notes.
         </Text>
       </PreferencesSegment>
       <PreferencesSegment>
         <Subtitle>Can I use Standard Notes totally offline?</Subtitle>
         <Text>
-          Standard Notes can be used totally offline without an account, and without an internet
-          connection. You can find{' '}
-          <a
-            target="_blank"
-            href="https://standardnotes.com/help/59/can-i-use-standard-notes-totally-offline"
-          >
+          Standard Notes can be used totally offline without an account, and without an internet connection. You can
+          find{' '}
+          <a target="_blank" href="https://standardnotes.com/help/59/can-i-use-standard-notes-totally-offline">
             more details here.
           </a>
         </Text>
@@ -57,38 +53,25 @@ export const HelpAndFeedback: FunctionComponent = () => (
       <PreferencesSegment>
         <Title>Community forum</Title>
         <Text>
-          If you have an issue, found a bug or want to suggest a feature, you can browse or post to
-          the forum. It’s recommended for non-account related issues. Please read our{' '}
+          If you have an issue, found a bug or want to suggest a feature, you can browse or post to the forum. It’s
+          recommended for non-account related issues. Please read our{' '}
           <a target="_blank" href="https://standardnotes.com/longevity/">
             Longevity statement
           </a>{' '}
           before advocating for a feature request.
         </Text>
-        <LinkButton
-          className="mt-3"
-          label="Go to the forum"
-          link="https://forum.standardnotes.org/"
-        />
+        <LinkButton className="mt-3" label="Go to the forum" link="https://forum.standardnotes.org/" />
       </PreferencesSegment>
     </PreferencesGroup>
     <PreferencesGroup>
       <PreferencesSegment>
         <Title>Community groups</Title>
         <Text>
-          Want to meet other passionate note-takers and privacy enthusiasts? Want to share your
-          feedback with us? Join the Standard Notes community groups for discussions on security,
-          themes, editors and more.
+          Want to meet other passionate note-takers and privacy enthusiasts? Want to share your feedback with us? Join
+          the Standard Notes community groups for discussions on security, themes, editors and more.
         </Text>
-        <LinkButton
-          className="mt-3"
-          link="https://standardnotes.com/slack"
-          label="Join our Slack"
-        />
-        <LinkButton
-          className="mt-3"
-          link="https://standardnotes.com/discord"
-          label="Join our Discord"
-        />
+        <LinkButton className="mt-3" link="https://standardnotes.com/slack" label="Join our Slack" />
+        <LinkButton className="mt-3" link="https://standardnotes.com/discord" label="Join our Discord" />
       </PreferencesSegment>
     </PreferencesGroup>
     <PreferencesGroup>
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Listed/BlogItem.tsx b/app/assets/javascripts/Components/Preferences/Panes/Listed/BlogItem.tsx
index b49119969..a5fba599b 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Listed/BlogItem.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Listed/BlogItem.tsx
@@ -11,11 +11,7 @@ type Props = {
   application: WebApplication
 }
 
-export const ListedAccountItem: FunctionalComponent<Props> = ({
-  account,
-  showSeparator,
-  application,
-}) => {
+export const ListedAccountItem: FunctionalComponent<Props> = ({ account, showSeparator, application }) => {
   const [isLoading, setIsLoading] = useState(false)
   const [accountInfo, setAccountInfo] = useState<ListedAccountInfo>()
 
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Listed/index.tsx b/app/assets/javascripts/Components/Preferences/Panes/Listed/index.tsx
index 3ad762495..68fb663a5 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Listed/index.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Listed/index.tsx
@@ -84,8 +84,8 @@ export const Listed = observer(({ application }: Props) => {
           <div className="h-2 w-full" />
           <Subtitle>What is Listed?</Subtitle>
           <Text>
-            Listed is a free blogging platform that allows you to create a public journal published
-            directly from your notes.{' '}
+            Listed is a free blogging platform that allows you to create a public journal published directly from your
+            notes.{' '}
             <a target="_blank" href="https://listed.to" rel="noreferrer noopener">
               Learn more
             </a>
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Security/Encryption.tsx b/app/assets/javascripts/Components/Preferences/Panes/Security/Encryption.tsx
index 3f26822d1..6acb0e571 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Security/Encryption.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Security/Encryption.tsx
@@ -3,12 +3,7 @@ import { STRING_E2E_ENABLED, STRING_ENC_NOT_ENABLED, STRING_LOCAL_ENC_ENABLED }
 import { AppState } from '@/UIModels/AppState'
 import { observer } from 'mobx-react-lite'
 import { ComponentChild, FunctionComponent } from 'preact'
-import {
-  PreferencesGroup,
-  PreferencesSegment,
-  Text,
-  Title,
-} from '@/Components/Preferences/PreferencesComponents'
+import { PreferencesGroup, PreferencesSegment, Text, Title } from '@/Components/Preferences/PreferencesComponents'
 
 const formatCount = (count: number, itemType: string) => `${count} / ${count} ${itemType}`
 
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Security/PasscodeLock.tsx b/app/assets/javascripts/Components/Preferences/Panes/Security/PasscodeLock.tsx
index 895085a6e..6aea88040 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Security/PasscodeLock.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Security/PasscodeLock.tsx
@@ -18,12 +18,7 @@ import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { ApplicationEvent } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { AppState } from '@/UIModels/AppState'
-import {
-  PreferencesSegment,
-  Title,
-  Text,
-  PreferencesGroup,
-} from '@/Components/Preferences/PreferencesComponents'
+import { PreferencesSegment, Title, Text, PreferencesGroup } from '@/Components/Preferences/PreferencesComponents'
 import { Button } from '@/Components/Button/Button'
 
 type Props = {
@@ -35,8 +30,7 @@ export const PasscodeLock = observer(({ application, appState }: Props) => {
   const keyStorageInfo = StringUtils.keyStorageInfo(application)
   const passcodeAutoLockOptions = application.getAutolockService().getAutoLockIntervalOptions()
 
-  const { setIsEncryptionEnabled, setIsBackupEncrypted, setEncryptionStatusString } =
-    appState.accountMenu
+  const { setIsEncryptionEnabled, setIsBackupEncrypted, setEncryptionStatusString } = appState.accountMenu
 
   const passcodeInputRef = useRef<HTMLInputElement>(null)
 
@@ -109,9 +103,7 @@ export const PasscodeLock = observer(({ application, appState }: Props) => {
     setPasscodeConfirmation(value)
   }
 
-  const submitPasscodeForm = async (
-    event: TargetedEvent<HTMLFormElement> | TargetedMouseEvent<HTMLButtonElement>,
-  ) => {
+  const submitPasscodeForm = async (event: TargetedEvent<HTMLFormElement> | TargetedMouseEvent<HTMLButtonElement>) => {
     event.preventDefault()
 
     if (!passcode || passcode.length === 0) {
@@ -183,22 +175,18 @@ export const PasscodeLock = observer(({ application, appState }: Props) => {
 
           {!hasPasscode && canAddPasscode && (
             <>
-              <Text className="mb-3">
-                Add a passcode to lock the application and encrypt on-device key storage.
-              </Text>
+              <Text className="mb-3">Add a passcode to lock the application and encrypt on-device key storage.</Text>
 
               {keyStorageInfo && <Text className="mb-3">{keyStorageInfo}</Text>}
 
-              {!showPasscodeForm && (
-                <Button label="Add passcode" onClick={handleAddPassCode} variant="primary" />
-              )}
+              {!showPasscodeForm && <Button label="Add passcode" onClick={handleAddPassCode} variant="primary" />}
             </>
           )}
 
           {!hasPasscode && !canAddPasscode && (
             <Text>
-              Adding a passcode is not supported in temporary sessions. Please sign out, then sign
-              back in with the "Stay signed in" option checked.
+              Adding a passcode is not supported in temporary sessions. Please sign out, then sign back in with the
+              "Stay signed in" option checked.
             </Text>
           )}
 
@@ -221,12 +209,7 @@ export const PasscodeLock = observer(({ application, appState }: Props) => {
                 placeholder="Confirm Passcode"
               />
               <div className="min-h-2" />
-              <Button
-                variant="primary"
-                onClick={submitPasscodeForm}
-                label="Set Passcode"
-                className="mr-3"
-              />
+              <Button variant="primary" onClick={submitPasscodeForm} label="Set Passcode" className="mr-3" />
               <Button variant="normal" onClick={() => setShowPasscodeForm(false)} label="Cancel" />
             </form>
           )}
@@ -235,17 +218,8 @@ export const PasscodeLock = observer(({ application, appState }: Props) => {
             <>
               <Text>Passcode lock is enabled.</Text>
               <div className="flex flex-row mt-3">
-                <Button
-                  variant="normal"
-                  label="Change Passcode"
-                  onClick={changePasscodePressed}
-                  className="mr-3"
-                />
-                <Button
-                  dangerStyle={true}
-                  label="Remove Passcode"
-                  onClick={removePasscodePressed}
-                />
+                <Button variant="normal" label="Change Passcode" onClick={changePasscodePressed} className="mr-3" />
+                <Button dangerStyle={true} label="Remove Passcode" onClick={removePasscodePressed} />
               </div>
             </>
           )}
@@ -258,16 +232,12 @@ export const PasscodeLock = observer(({ application, appState }: Props) => {
           <PreferencesGroup>
             <PreferencesSegment>
               <Title>Autolock</Title>
-              <Text className="mb-3">
-                The autolock timer begins when the window or tab loses focus.
-              </Text>
+              <Text className="mb-3">The autolock timer begins when the window or tab loses focus.</Text>
               <div className="flex flex-row items-center">
                 {passcodeAutoLockOptions.map((option) => {
                   return (
                     <a
-                      className={`sk-a info mr-3 ${
-                        option.value === selectedAutoLockInterval ? 'boxed' : ''
-                      }`}
+                      className={`sk-a info mr-3 ${option.value === selectedAutoLockInterval ? 'boxed' : ''}`}
                       onClick={() => selectAutoLockInterval(option.value)}
                     >
                       {option.label}
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Security/Privacy.tsx b/app/assets/javascripts/Components/Preferences/Panes/Security/Privacy.tsx
index 163d0784f..237a80421 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Security/Privacy.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Security/Privacy.tsx
@@ -71,9 +71,7 @@ export const Privacy: FunctionalComponent<Props> = observer(({ application }: Pr
   const toggleMuteSignInEmails = async () => {
     const previousValue = signInEmailsMutedValue
     const newValue =
-      previousValue === MuteSignInEmailsOption.Muted
-        ? MuteSignInEmailsOption.NotMuted
-        : MuteSignInEmailsOption.Muted
+      previousValue === MuteSignInEmailsOption.Muted ? MuteSignInEmailsOption.NotMuted : MuteSignInEmailsOption.Muted
     setSignInEmailsMutedValue(newValue)
 
     const updateResult = await updateSetting(SettingName.MuteSignInEmails, newValue)
@@ -107,8 +105,8 @@ export const Privacy: FunctionalComponent<Props> = observer(({ application }: Pr
             <div className="flex flex-col">
               <Subtitle>Disable sign-in notification emails</Subtitle>
               <Text>
-                Disables email notifications when a new sign-in occurs on your account. (Email
-                notifications are available to paid subscribers).
+                Disables email notifications when a new sign-in occurs on your account. (Email notifications are
+                available to paid subscribers).
               </Text>
             </div>
             {isLoading ? (
@@ -125,9 +123,9 @@ export const Privacy: FunctionalComponent<Props> = observer(({ application }: Pr
             <div className="flex flex-col">
               <Subtitle>Session user agent logging</Subtitle>
               <Text>
-                User agent logging allows you to identify the devices or browsers signed into your
-                account. For increased privacy, you can disable this feature, which will remove all
-                saved user agent values from our server, and disable future logging of this value.
+                User agent logging allows you to identify the devices or browsers signed into your account. For
+                increased privacy, you can disable this feature, which will remove all saved user agent values from our
+                server, and disable future logging of this value.
               </Text>
             </div>
             {isLoading ? (
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Security/Protections.tsx b/app/assets/javascripts/Components/Preferences/Panes/Security/Protections.tsx
index f705ecc00..9dfa530b7 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Security/Protections.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Security/Protections.tsx
@@ -3,12 +3,7 @@ import { FunctionalComponent } from 'preact'
 import { useCallback, useState, useEffect } from 'preact/hooks'
 import { ApplicationEvent } from '@standardnotes/snjs'
 import { isSameDay } from '@/Utils'
-import {
-  PreferencesGroup,
-  PreferencesSegment,
-  Title,
-  Text,
-} from '@/Components/Preferences/PreferencesComponents'
+import { PreferencesGroup, PreferencesSegment, Title, Text } from '@/Components/Preferences/PreferencesComponents'
 import { Button } from '@/Components/Button/Button'
 
 type Props = {
@@ -47,9 +42,7 @@ export const Protections: FunctionalComponent<Props> = ({ application }) => {
     return null
   }, [application])
 
-  const [protectionsDisabledUntil, setProtectionsDisabledUntil] = useState(
-    getProtectionsDisabledUntil(),
-  )
+  const [protectionsDisabledUntil, setProtectionsDisabledUntil] = useState(getProtectionsDisabledUntil())
 
   useEffect(() => {
     const removeUnprotectedSessionBeginObserver = application.addEventObserver(async () => {
@@ -85,17 +78,11 @@ export const Protections: FunctionalComponent<Props> = ({ application }) => {
           <Text className="info">Protections are enabled.</Text>
         )}
         <Text className="mt-2">
-          Actions like viewing or searching protected notes, exporting decrypted backups, or
-          revoking an active session require additional authentication such as entering your account
-          password or application passcode.
+          Actions like viewing or searching protected notes, exporting decrypted backups, or revoking an active session
+          require additional authentication such as entering your account password or application passcode.
         </Text>
         {protectionsDisabledUntil && (
-          <Button
-            className="mt-3"
-            variant="primary"
-            label="End Unprotected Access"
-            onClick={enableProtections}
-          />
+          <Button className="mt-3" variant="primary" label="End Unprotected Access" onClick={enableProtections} />
         )}
       </PreferencesSegment>
     </PreferencesGroup>
diff --git a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/AuthAppInfoPopup.tsx b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/AuthAppInfoPopup.tsx
index 8cff061cf..a1c358325 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/AuthAppInfoPopup.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/AuthAppInfoPopup.tsx
@@ -14,9 +14,7 @@ const DisclosureIconButton: FunctionComponent<{
   <DisclosureButton
     onMouseEnter={onMouseEnter}
     onMouseLeave={onMouseLeave}
-    className={`no-border cursor-pointer bg-transparent hover:brightness-130 p-0 ${
-      className ?? ''
-    }`}
+    className={`no-border cursor-pointer bg-transparent hover:brightness-130 p-0 ${className ?? ''}`}
   >
     <Icon type={icon} />
   </DisclosureButton>
@@ -56,8 +54,8 @@ export const AuthAppInfoTooltip: FunctionComponent = () => {
             className={`bg-inverted-default color-inverted-default text-center rounded shadow-overlay 
 py-1.5 px-2 absolute w-103 -top-10 -left-51`}
           >
-            Some apps, like Google Authenticator, do not back up and restore your secret keys if you
-            lose your device or get a new one.
+            Some apps, like Google Authenticator, do not back up and restore your secret keys if you lose your device or
+            get a new one.
           </div>
         </DisclosurePanel>
       </div>
diff --git a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/SaveSecretKey.tsx b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/SaveSecretKey.tsx
index fca856281..931b9254b 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/SaveSecretKey.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/SaveSecretKey.tsx
@@ -76,18 +76,8 @@ export const SaveSecretKey: FunctionComponent<{
         </div>
       </ModalDialogDescription>
       <ModalDialogButtons>
-        <Button
-          className="min-w-20"
-          variant="normal"
-          label="Back"
-          onClick={() => act.openScanQRCode()}
-        />
-        <Button
-          className="min-w-20"
-          variant="primary"
-          label="Next"
-          onClick={() => act.openVerification()}
-        />
+        <Button className="min-w-20" variant="normal" label="Back" onClick={() => act.openScanQRCode()} />
+        <Button className="min-w-20" variant="primary" label="Next" onClick={() => act.openVerification()} />
       </ModalDialogButtons>
     </ModalDialog>
   )
diff --git a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/ScanQRCode.tsx b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/ScanQRCode.tsx
index 7516e2790..ed4d3596a 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/ScanQRCode.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/ScanQRCode.tsx
@@ -19,16 +19,10 @@ export const ScanQRCode: FunctionComponent<{
 }> = observer(({ activation: act }) => {
   return (
     <ModalDialog>
-      <ModalDialogLabel closeDialog={act.cancelActivation}>
-        Step 1 of 3 - Scan QR code
-      </ModalDialogLabel>
+      <ModalDialogLabel closeDialog={act.cancelActivation}>Step 1 of 3 - Scan QR code</ModalDialogLabel>
       <ModalDialogDescription className="h-33">
         <div className="w-25 h-25 flex items-center justify-center bg-info">
-          <QRCode
-            className="border-neutral-contrast-bg border-solid border-2"
-            value={act.qrCode}
-            size={100}
-          />
+          <QRCode className="border-neutral-contrast-bg border-solid border-2" value={act.qrCode} size={100} />
         </div>
         <div className="min-w-5" />
         <div className="flex-grow flex flex-col">
@@ -59,18 +53,8 @@ export const ScanQRCode: FunctionComponent<{
         </div>
       </ModalDialogDescription>
       <ModalDialogButtons>
-        <Button
-          className="min-w-20"
-          variant="normal"
-          label="Cancel"
-          onClick={() => act.cancelActivation()}
-        />
-        <Button
-          className="min-w-20"
-          variant="primary"
-          label="Next"
-          onClick={() => act.openSaveSecretKey()}
-        />
+        <Button className="min-w-20" variant="normal" label="Cancel" onClick={() => act.cancelActivation()} />
+        <Button className="min-w-20" variant="primary" label="Next" onClick={() => act.openSaveSecretKey()} />
       </ModalDialogButtons>
     </ModalDialog>
   )
diff --git a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorActivation.ts b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorActivation.ts
index 8e978d89b..7b2f1d9b7 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorActivation.ts
+++ b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorActivation.ts
@@ -25,12 +25,7 @@ export class TwoFactorActivation {
 
     makeAutoObservable<
       TwoFactorActivation,
-      | '_secretKey'
-      | '_authCode'
-      | '_step'
-      | '_enable2FAVerification'
-      | 'inputOtpToken'
-      | 'inputSecretKey'
+      '_secretKey' | '_authCode' | '_step' | '_enable2FAVerification' | 'inputOtpToken' | 'inputSecretKey'
     >(
       this,
       {
diff --git a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuth.ts b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuth.ts
index f595d2f3f..1263e38c0 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuth.ts
+++ b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuth.ts
@@ -10,23 +10,16 @@ export const is2FADisabled = (status: TwoFactorStatus): status is 'two-factor-di
 export const is2FAActivation = (status: TwoFactorStatus): status is TwoFactorActivation =>
   (status as TwoFactorActivation)?.type === 'two-factor-activation'
 
-export const is2FAEnabled = (status: TwoFactorStatus): status is 'two-factor-enabled' =>
-  status === 'two-factor-enabled'
+export const is2FAEnabled = (status: TwoFactorStatus): status is 'two-factor-enabled' => status === 'two-factor-enabled'
 
 export class TwoFactorAuth {
   private _status: TwoFactorStatus | 'fetching' = 'fetching'
   private _errorMessage: string | null
 
-  constructor(
-    private readonly mfaProvider: MfaProvider,
-    private readonly userProvider: UserProvider,
-  ) {
+  constructor(private readonly mfaProvider: MfaProvider, private readonly userProvider: UserProvider) {
     this._errorMessage = null
 
-    makeAutoObservable<
-      TwoFactorAuth,
-      '_status' | '_errorMessage' | 'deactivateMfa' | 'startActivation'
-    >(
+    makeAutoObservable<TwoFactorAuth, '_status' | '_errorMessage' | 'deactivateMfa' | 'startActivation'>(
       this,
       {
         _status: observable,
diff --git a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView.tsx b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView.tsx
index 0d842301a..c9ab5fbfc 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView.tsx
@@ -1,10 +1,5 @@
 import { FunctionComponent } from 'preact'
-import {
-  Title,
-  Text,
-  PreferencesGroup,
-  PreferencesSegment,
-} from '@/Components/Preferences/PreferencesComponents'
+import { Title, Text, PreferencesGroup, PreferencesSegment } from '@/Components/Preferences/PreferencesComponents'
 import { Switch } from '@/Components/Switch'
 import { observer } from 'mobx-react-lite'
 import { is2FAActivation, is2FADisabled, TwoFactorAuth } from './TwoFactorAuth'
diff --git a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorSuccess.tsx b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorSuccess.tsx
index be6716bc0..1b3270bec 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorSuccess.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorSuccess.tsx
@@ -16,18 +16,11 @@ export const TwoFactorSuccess: FunctionComponent<{
     <ModalDialogLabel closeDialog={act.finishActivation}>Successfully Enabled</ModalDialogLabel>
     <ModalDialogDescription>
       <div className="flex flex-row items-center justify-center pt-2">
-        <Subtitle>
-          Two-factor authentication has been successfully enabled for your account.
-        </Subtitle>
+        <Subtitle>Two-factor authentication has been successfully enabled for your account.</Subtitle>
       </div>
     </ModalDialogDescription>
     <ModalDialogButtons>
-      <Button
-        className="min-w-20"
-        variant="primary"
-        label="Finish"
-        onClick={act.finishActivation}
-      />
+      <Button className="min-w-20" variant="primary" label="Finish" onClick={act.finishActivation} />
     </ModalDialogButtons>
   </ModalDialog>
 ))
diff --git a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/Verification.tsx b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/Verification.tsx
index d337cad9f..7bd7409d6 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/Verification.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/Verification.tsx
@@ -18,9 +18,7 @@ export const Verification: FunctionComponent<{
   const authTokenClass = act.verificationStatus === 'invalid-auth-code' ? 'border-danger' : ''
   return (
     <ModalDialog>
-      <ModalDialogLabel closeDialog={act.cancelActivation}>
-        Step 3 of 3 - Verification
-      </ModalDialogLabel>
+      <ModalDialogLabel closeDialog={act.cancelActivation}>Step 3 of 3 - Verification</ModalDialogLabel>
       <ModalDialogDescription className="h-33">
         <div className="flex-grow flex flex-col">
           <div className="flex flex-row items-center mb-4">
@@ -45,21 +43,12 @@ export const Verification: FunctionComponent<{
       </ModalDialogDescription>
       <ModalDialogButtons>
         {act.verificationStatus === 'invalid-auth-code' && (
-          <div className="text-sm color-danger flex-grow">
-            Incorrect authentication code, please try again.
-          </div>
+          <div className="text-sm color-danger flex-grow">Incorrect authentication code, please try again.</div>
         )}
         {act.verificationStatus === 'invalid-secret' && (
-          <div className="text-sm color-danger flex-grow">
-            Incorrect secret key, please try again.
-          </div>
+          <div className="text-sm color-danger flex-grow">Incorrect secret key, please try again.</div>
         )}
-        <Button
-          className="min-w-20"
-          variant="normal"
-          label="Back"
-          onClick={act.openSaveSecretKey}
-        />
+        <Button className="min-w-20" variant="normal" label="Back" onClick={act.openSaveSecretKey} />
         <Button className="min-w-20" variant="primary" label="Next" onClick={act.enable2FA} />
       </ModalDialogButtons>
     </ModalDialog>
diff --git a/app/assets/javascripts/Components/Preferences/PreferencesComponents/Content.tsx b/app/assets/javascripts/Components/Preferences/PreferencesComponents/Content.tsx
index 6303dc6fc..eb7ef2dd4 100644
--- a/app/assets/javascripts/Components/Preferences/PreferencesComponents/Content.tsx
+++ b/app/assets/javascripts/Components/Preferences/PreferencesComponents/Content.tsx
@@ -7,15 +7,13 @@ export const Title: FunctionComponent = ({ children }) => (
   </>
 )
 
-export const Subtitle: FunctionComponent<{ className?: string }> = ({
-  children,
-  className = '',
-}) => <h4 className={`font-medium text-sm m-0 mb-1 ${className}`}>{children}</h4>
+export const Subtitle: FunctionComponent<{ className?: string }> = ({ children, className = '' }) => (
+  <h4 className={`font-medium text-sm m-0 mb-1 ${className}`}>{children}</h4>
+)
 
-export const SubtitleLight: FunctionComponent<{ className?: string }> = ({
-  children,
-  className = '',
-}) => <h4 className={`font-normal text-sm m-0 mb-1 ${className}`}>{children}</h4>
+export const SubtitleLight: FunctionComponent<{ className?: string }> = ({ children, className = '' }) => (
+  <h4 className={`font-normal text-sm m-0 mb-1 ${className}`}>{children}</h4>
+)
 
 export const Text: FunctionComponent<{ className?: string }> = ({ children, className = '' }) => (
   <p className={`${className} text-xs`}>{children}</p>
diff --git a/app/assets/javascripts/Components/Preferences/PreferencesComponents/MenuItem.tsx b/app/assets/javascripts/Components/Preferences/PreferencesComponents/MenuItem.tsx
index d0dd42875..70da7940c 100644
--- a/app/assets/javascripts/Components/Preferences/PreferencesComponents/MenuItem.tsx
+++ b/app/assets/javascripts/Components/Preferences/PreferencesComponents/MenuItem.tsx
@@ -10,13 +10,7 @@ interface Props {
   onClick: () => void
 }
 
-export const MenuItem: FunctionComponent<Props> = ({
-  iconType,
-  label,
-  selected,
-  onClick,
-  hasBubble,
-}) => (
+export const MenuItem: FunctionComponent<Props> = ({ iconType, label, selected, onClick, hasBubble }) => (
   <div
     className={`preferences-menu-item select-none ${selected ? 'selected' : ''}`}
     onClick={(e) => {
diff --git a/app/assets/javascripts/Components/Preferences/PreferencesComponents/PreferencesPane.tsx b/app/assets/javascripts/Components/Preferences/PreferencesComponents/PreferencesPane.tsx
index 3b276179a..614a5ed5a 100644
--- a/app/assets/javascripts/Components/Preferences/PreferencesComponents/PreferencesPane.tsx
+++ b/app/assets/javascripts/Components/Preferences/PreferencesComponents/PreferencesPane.tsx
@@ -4,9 +4,7 @@ export const PreferencesPane: FunctionComponent = ({ children }) => (
   <div className="color-foreground flex-grow flex flex-row overflow-y-auto min-h-0">
     <div className="flex-grow flex flex-col py-6 items-center">
       <div className="w-125 max-w-125 flex flex-col">
-        {children != undefined && Array.isArray(children)
-          ? children.filter((child) => child != undefined)
-          : children}
+        {children != undefined && Array.isArray(children) ? children.filter((child) => child != undefined) : children}
       </div>
     </div>
     <div className="flex-basis-55 flex-shrink" />
diff --git a/app/assets/javascripts/Components/Preferences/PreferencesMenu.ts b/app/assets/javascripts/Components/Preferences/PreferencesMenu.ts
index 71a19626c..414841651 100644
--- a/app/assets/javascripts/Components/Preferences/PreferencesMenu.ts
+++ b/app/assets/javascripts/Components/Preferences/PreferencesMenu.ts
@@ -59,27 +59,16 @@ const READY_PREFERENCES_MENU_ITEMS: PreferencesMenuItem[] = [
 export class PreferencesMenu {
   private _selectedPane: PreferenceId = 'account'
   private _menu: PreferencesMenuItem[]
-  private _extensionLatestVersions: ExtensionsLatestVersions = new ExtensionsLatestVersions(
-    new Map(),
-  )
+  private _extensionLatestVersions: ExtensionsLatestVersions = new ExtensionsLatestVersions(new Map())
 
-  constructor(
-    private application: WebApplication,
-    private readonly _enableUnfinishedFeatures: boolean,
-  ) {
-    this._menu = this._enableUnfinishedFeatures
-      ? PREFERENCES_MENU_ITEMS
-      : READY_PREFERENCES_MENU_ITEMS
+  constructor(private application: WebApplication, private readonly _enableUnfinishedFeatures: boolean) {
+    this._menu = this._enableUnfinishedFeatures ? PREFERENCES_MENU_ITEMS : READY_PREFERENCES_MENU_ITEMS
 
     this.loadLatestVersions()
 
     makeAutoObservable<
       PreferencesMenu,
-      | '_selectedPane'
-      | '_twoFactorAuth'
-      | '_extensionPanes'
-      | '_extensionLatestVersions'
-      | 'loadLatestVersions'
+      '_selectedPane' | '_twoFactorAuth' | '_extensionPanes' | '_extensionLatestVersions' | 'loadLatestVersions'
     >(this, {
       _twoFactorAuth: observable,
       _selectedPane: observable,
diff --git a/app/assets/javascripts/Components/Preferences/PreferencesView.tsx b/app/assets/javascripts/Components/Preferences/PreferencesView.tsx
index 794b93437..26bd2bd60 100644
--- a/app/assets/javascripts/Components/Preferences/PreferencesView.tsx
+++ b/app/assets/javascripts/Components/Preferences/PreferencesView.tsx
@@ -67,14 +67,12 @@ const PaneSelector: FunctionComponent<PreferencesProps & { menu: PreferencesMenu
   },
 )
 
-const PreferencesCanvas: FunctionComponent<PreferencesProps & { menu: PreferencesMenu }> = observer(
-  (props) => (
-    <div className="flex flex-row flex-grow min-h-0 justify-between">
-      <PreferencesMenuView menu={props.menu} />
-      <PaneSelector {...props} />
-    </div>
-  ),
-)
+const PreferencesCanvas: FunctionComponent<PreferencesProps & { menu: PreferencesMenu }> = observer((props) => (
+  <div className="flex flex-row flex-grow min-h-0 justify-between">
+    <PreferencesMenuView menu={props.menu} />
+    <PaneSelector {...props} />
+  </div>
+))
 
 export const PreferencesView: FunctionComponent<PreferencesProps> = observer((props) => {
   const menu = useMemo(
diff --git a/app/assets/javascripts/Components/PremiumFeaturesModal/index.tsx b/app/assets/javascripts/Components/PremiumFeaturesModal/index.tsx
index 436311a41..ae1be2c8f 100644
--- a/app/assets/javascripts/Components/PremiumFeaturesModal/index.tsx
+++ b/app/assets/javascripts/Components/PremiumFeaturesModal/index.tsx
@@ -51,8 +51,8 @@ export const PremiumFeaturesModal: FunctionalComponent<Props> = ({
             <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.
+            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
diff --git a/app/assets/javascripts/Components/PurchaseFlow/Panes/CreateAccount.tsx b/app/assets/javascripts/Components/PurchaseFlow/Panes/CreateAccount.tsx
index 5f5196e6b..bffcf8bee 100644
--- a/app/assets/javascripts/Components/PurchaseFlow/Panes/CreateAccount.tsx
+++ b/app/assets/javascripts/Components/PurchaseFlow/Panes/CreateAccount.tsx
@@ -8,12 +8,7 @@ import { useEffect, useRef, useState } from 'preact/hooks'
 import { FloatingLabelInput } from '@/Components/Input/FloatingLabelInput'
 import { isEmailValid } from '@/Utils'
 import { loadPurchaseFlowUrl } from '@/Components/PurchaseFlow/PurchaseFlowWrapper'
-import {
-  BlueDotIcon,
-  CircleIcon,
-  DiamondIcon,
-  CreateAccountIllustration,
-} from '@standardnotes/stylekit'
+import { BlueDotIcon, CircleIcon, DiamondIcon, CreateAccountIllustration } from '@standardnotes/stylekit'
 
 type Props = {
   appState: AppState
@@ -145,9 +140,7 @@ export const CreateAccount: FunctionComponent<Props> = observer(({ appState, app
               disabled={isCreatingAccount}
               isInvalid={isEmailInvalid}
             />
-            {isEmailInvalid ? (
-              <div className="color-dark-red mb-4">Please provide a valid email.</div>
-            ) : null}
+            {isEmailInvalid ? <div className="color-dark-red mb-4">Please provide a valid email.</div> : null}
             <FloatingLabelInput
               className="min-w-90 xs:min-w-auto mb-4"
               id="purchase-create-account-password"
diff --git a/app/assets/javascripts/Components/PurchaseFlow/Panes/SignIn.tsx b/app/assets/javascripts/Components/PurchaseFlow/Panes/SignIn.tsx
index 530d86e85..bb3bee0ff 100644
--- a/app/assets/javascripts/Components/PurchaseFlow/Panes/SignIn.tsx
+++ b/app/assets/javascripts/Components/PurchaseFlow/Panes/SignIn.tsx
@@ -114,9 +114,7 @@ export const SignIn: FunctionComponent<Props> = observer(({ appState, applicatio
         <form onSubmit={handleSignIn}>
           <div className="flex flex-col">
             <FloatingLabelInput
-              className={`min-w-90 xs:min-w-auto ${
-                isEmailInvalid && !otherErrorMessage ? 'mb-2' : 'mb-4'
-              }`}
+              className={`min-w-90 xs:min-w-auto ${isEmailInvalid && !otherErrorMessage ? 'mb-2' : 'mb-4'}`}
               id="purchase-sign-in-email"
               type="email"
               label="Email"
@@ -140,9 +138,7 @@ export const SignIn: FunctionComponent<Props> = observer(({ appState, applicatio
               disabled={isSigningIn}
               isInvalid={isPasswordInvalid}
             />
-            {otherErrorMessage ? (
-              <div className="color-dark-red mb-4">{otherErrorMessage}</div>
-            ) : null}
+            {otherErrorMessage ? <div className="color-dark-red mb-4">{otherErrorMessage}</div> : null}
           </div>
           <Button
             className={`${isSigningIn ? 'min-w-30' : 'min-w-24'} py-2.5 mb-5`}
diff --git a/app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowView.tsx b/app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowView.tsx
index 0697d08e7..e9b15ad66 100644
--- a/app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowView.tsx
+++ b/app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowView.tsx
@@ -16,11 +16,7 @@ type PurchaseFlowViewProps = {
   application: WebApplication
 }
 
-const PurchaseFlowPaneSelector: FunctionComponent<PaneSelectorProps> = ({
-  currentPane,
-  appState,
-  application,
-}) => {
+const PurchaseFlowPaneSelector: FunctionComponent<PaneSelectorProps> = ({ currentPane, appState, application }) => {
   switch (currentPane) {
     case PurchaseFlowPane.CreateAccount:
       return <CreateAccount appState={appState} application={application} />
@@ -29,41 +25,35 @@ const PurchaseFlowPaneSelector: FunctionComponent<PaneSelectorProps> = ({
   }
 }
 
-export const PurchaseFlowView: FunctionComponent<PurchaseFlowViewProps> = observer(
-  ({ appState, application }) => {
-    const { currentPane } = appState.purchaseFlow
+export const PurchaseFlowView: FunctionComponent<PurchaseFlowViewProps> = observer(({ appState, application }) => {
+  const { currentPane } = appState.purchaseFlow
 
-    return (
-      <div className="flex items-center justify-center overflow-hidden h-full w-full absolute top-left-0 z-index-purchase-flow bg-grey-super-light">
-        <div className="relative fit-content">
-          <div className="relative p-12 xs:px-8 mb-4 bg-default border-1 border-solid border-main rounded xs:rounded-0">
-            <SNLogoFull className="mb-5" />
-            <PurchaseFlowPaneSelector
-              currentPane={currentPane}
-              appState={appState}
-              application={application}
-            />
-          </div>
-          <div className="flex justify-end xs:px-4">
-            <a
-              className="mr-3 font-medium color-grey-1"
-              href="https://standardnotes.com/privacy"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Privacy
-            </a>
-            <a
-              className="font-medium color-grey-1"
-              href="https://standardnotes.com/help"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Help
-            </a>
-          </div>
+  return (
+    <div className="flex items-center justify-center overflow-hidden h-full w-full absolute top-left-0 z-index-purchase-flow bg-grey-super-light">
+      <div className="relative fit-content">
+        <div className="relative p-12 xs:px-8 mb-4 bg-default border-1 border-solid border-main rounded xs:rounded-0">
+          <SNLogoFull className="mb-5" />
+          <PurchaseFlowPaneSelector currentPane={currentPane} appState={appState} application={application} />
+        </div>
+        <div className="flex justify-end xs:px-4">
+          <a
+            className="mr-3 font-medium color-grey-1"
+            href="https://standardnotes.com/privacy"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Privacy
+          </a>
+          <a
+            className="font-medium color-grey-1"
+            href="https://standardnotes.com/help"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Help
+          </a>
         </div>
       </div>
-    )
-  },
-)
+    </div>
+  )
+})
diff --git a/app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowWrapper.tsx b/app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowWrapper.tsx
index 3e22f8904..09eeb3f8b 100644
--- a/app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowWrapper.tsx
+++ b/app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowWrapper.tsx
@@ -10,9 +10,7 @@ export type PurchaseFlowWrapperProps = {
   application: WebApplication
 }
 
-export const getPurchaseFlowUrl = async (
-  application: WebApplication,
-): Promise<string | undefined> => {
+export const getPurchaseFlowUrl = async (application: WebApplication): Promise<string | undefined> => {
   const currentUrl = window.location.origin
   const successUrl = isDesktopApplication() ? 'standardnotes://' : currentUrl
   if (application.noAccount()) {
diff --git a/app/assets/javascripts/Components/QuickSettingsMenu/EventHandlers.ts b/app/assets/javascripts/Components/QuickSettingsMenu/EventHandlers.ts
index 195f43301..4cbe3b719 100644
--- a/app/assets/javascripts/Components/QuickSettingsMenu/EventHandlers.ts
+++ b/app/assets/javascripts/Components/QuickSettingsMenu/EventHandlers.ts
@@ -9,8 +9,7 @@ export const quickSettingsKeyDownHandler = (
   themesMenuOpen: boolean,
 ) => {
   if (quickSettingsMenuRef?.current) {
-    const items: NodeListOf<HTMLButtonElement> =
-      quickSettingsMenuRef.current.querySelectorAll(':scope > button')
+    const items: NodeListOf<HTMLButtonElement> = quickSettingsMenuRef.current.querySelectorAll(':scope > button')
     const currentFocusedIndex = Array.from(items).findIndex((btn) => btn === document.activeElement)
 
     if (!themesMenuOpen) {
@@ -45,9 +44,7 @@ export const themesMenuKeyDownHandler = (
 ) => {
   if (themesMenuRef?.current) {
     const themes = themesMenuRef.current.querySelectorAll('button')
-    const currentFocusedIndex = Array.from(themes).findIndex(
-      (themeBtn) => themeBtn === document.activeElement,
-    )
+    const currentFocusedIndex = Array.from(themes).findIndex((themeBtn) => themeBtn === document.activeElement)
 
     switch (event.key) {
       case 'Escape':
diff --git a/app/assets/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx b/app/assets/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx
index e70440c55..8f7ef7545 100644
--- a/app/assets/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx
+++ b/app/assets/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx
@@ -14,15 +14,9 @@ type Props = {
   isEnabled: boolean
 }
 
-export const FocusModeSwitch: FunctionComponent<Props> = ({
-  application,
-  onToggle,
-  onClose,
-  isEnabled,
-}) => {
+export const FocusModeSwitch: FunctionComponent<Props> = ({ application, onToggle, onClose, isEnabled }) => {
   const premiumModal = usePremiumModal()
-  const isEntitled =
-    application.features.getFeatureStatus(FeatureIdentifier.FocusMode) === FeatureStatus.Entitled
+  const isEntitled = application.features.getFeatureStatus(FeatureIdentifier.FocusMode) === FeatureStatus.Entitled
 
   const toggle = useCallback(
     (e: JSXInternal.TargetedMouseEvent<HTMLButtonElement>) => {
@@ -40,10 +34,7 @@ export const FocusModeSwitch: FunctionComponent<Props> = ({
 
   return (
     <>
-      <button
-        className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none justify-between"
-        onClick={toggle}
-      >
+      <button className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none justify-between" onClick={toggle}>
         <div className="flex items-center">
           <Icon type="menu-close" className="color-neutral mr-2" />
           Focused Writing
diff --git a/app/assets/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx b/app/assets/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
index 42cc3112a..fab7d76fc 100644
--- a/app/assets/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
+++ b/app/assets/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
@@ -25,10 +25,7 @@ export const ThemesMenuButton: FunctionComponent<Props> = ({ application, item,
     () => application.features.getFeatureStatus(item.identifier) === FeatureStatus.Entitled,
     [application, item.identifier],
   )
-  const canActivateTheme = useMemo(
-    () => isEntitledToTheme || isThirdPartyTheme,
-    [isEntitledToTheme, isThirdPartyTheme],
-  )
+  const canActivateTheme = useMemo(() => isEntitledToTheme || isThirdPartyTheme, [isEntitledToTheme, isThirdPartyTheme])
 
   const toggleTheme: JSXInternal.MouseEventHandler<HTMLButtonElement> = (e) => {
     e.preventDefault()
@@ -61,14 +58,8 @@ export const ThemesMenuButton: FunctionComponent<Props> = ({ application, item,
       ) : (
         <>
           <div className="flex items-center">
-            <div
-              className={`pseudo-radio-btn ${
-                item.component?.active ? 'pseudo-radio-btn--checked' : ''
-              } mr-2`}
-            ></div>
-            <span className={item.component?.active ? 'font-semibold' : undefined}>
-              {item.name}
-            </span>
+            <div className={`pseudo-radio-btn ${item.component?.active ? 'pseudo-radio-btn--checked' : ''} mr-2`}></div>
+            <span className={item.component?.active ? 'font-semibold' : undefined}>{item.name}</span>
           </div>
           {item.component && canActivateTheme ? (
             <div
diff --git a/app/assets/javascripts/Components/QuickSettingsMenu/index.tsx b/app/assets/javascripts/Components/QuickSettingsMenu/index.tsx
index 96e7b56ca..98855c4ae 100644
--- a/app/assets/javascripts/Components/QuickSettingsMenu/index.tsx
+++ b/app/assets/javascripts/Components/QuickSettingsMenu/index.tsx
@@ -1,14 +1,7 @@
 import { WebApplication } from '@/UIModels/Application'
 import { AppState } from '@/UIModels/AppState'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
-import {
-  ComponentArea,
-  ContentType,
-  FeatureIdentifier,
-  GetFeatures,
-  SNComponent,
-  SNTheme,
-} from '@standardnotes/snjs'
+import { ComponentArea, ContentType, FeatureIdentifier, GetFeatures, SNComponent, SNTheme } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
@@ -25,8 +18,7 @@ import { sortThemes } from '@/Utils/SortThemes'
 
 const focusModeAnimationDuration = 1255
 
-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'
+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 MenuProps = {
   appState: AppState
@@ -48,266 +40,241 @@ const toggleFocusMode = (enabled: boolean) => {
   }
 }
 
-export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
-  ({ application, appState, onClickOutside }) => {
-    const {
-      closeQuickSettingsMenu,
-      shouldAnimateCloseMenu,
-      focusModeEnabled,
-      setFocusModeEnabled,
-    } = appState.quickSettingsMenu
-    const [themes, setThemes] = useState<ThemeItem[]>([])
-    const [toggleableComponents, setToggleableComponents] = useState<SNComponent[]>([])
-    const [themesMenuOpen, setThemesMenuOpen] = useState(false)
-    const [themesMenuPosition, setThemesMenuPosition] = useState({})
-    const [defaultThemeOn, setDefaultThemeOn] = useState(false)
+export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(({ application, appState, onClickOutside }) => {
+  const { closeQuickSettingsMenu, shouldAnimateCloseMenu, focusModeEnabled, setFocusModeEnabled } =
+    appState.quickSettingsMenu
+  const [themes, setThemes] = useState<ThemeItem[]>([])
+  const [toggleableComponents, setToggleableComponents] = useState<SNComponent[]>([])
+  const [themesMenuOpen, setThemesMenuOpen] = useState(false)
+  const [themesMenuPosition, setThemesMenuPosition] = useState({})
+  const [defaultThemeOn, setDefaultThemeOn] = useState(false)
 
-    const themesMenuRef = useRef<HTMLDivElement>(null)
-    const themesButtonRef = useRef<HTMLButtonElement>(null)
-    const prefsButtonRef = useRef<HTMLButtonElement>(null)
-    const quickSettingsMenuRef = useRef<HTMLDivElement>(null)
-    const defaultThemeButtonRef = useRef<HTMLButtonElement>(null)
+  const themesMenuRef = useRef<HTMLDivElement>(null)
+  const themesButtonRef = useRef<HTMLButtonElement>(null)
+  const prefsButtonRef = useRef<HTMLButtonElement>(null)
+  const quickSettingsMenuRef = useRef<HTMLDivElement>(null)
+  const defaultThemeButtonRef = useRef<HTMLButtonElement>(null)
 
-    const mainRef = useRef<HTMLDivElement>(null)
-    useCloseOnClickOutside(mainRef, () => {
-      onClickOutside()
+  const mainRef = useRef<HTMLDivElement>(null)
+  useCloseOnClickOutside(mainRef, () => {
+    onClickOutside()
+  })
+
+  useEffect(() => {
+    toggleFocusMode(focusModeEnabled)
+  }, [focusModeEnabled])
+
+  const reloadThemes = useCallback(() => {
+    const themes = application.items.getDisplayableItems<SNTheme>(ContentType.Theme).map((item) => {
+      return {
+        name: item.name,
+        identifier: item.identifier,
+        component: item,
+      }
+    }) as ThemeItem[]
+
+    GetFeatures()
+      .filter((feature) => feature.content_type === ContentType.Theme && !feature.layerable)
+      .forEach((theme) => {
+        if (themes.findIndex((item) => item.identifier === theme.identifier) === -1) {
+          themes.push({
+            name: theme.name as string,
+            identifier: theme.identifier,
+          })
+        }
+      })
+
+    setThemes(themes.sort(sortThemes))
+
+    setDefaultThemeOn(!themes.map((item) => item?.component).find((theme) => theme?.active && !theme.isLayerable()))
+  }, [application])
+
+  const reloadToggleableComponents = useCallback(() => {
+    const toggleableComponents = application.items
+      .getDisplayableItems<SNComponent>(ContentType.Component)
+      .filter(
+        (component) =>
+          [ComponentArea.EditorStack].includes(component.area) &&
+          component.identifier !== FeatureIdentifier.DeprecatedFoldersComponent,
+      )
+
+    setToggleableComponents(toggleableComponents)
+  }, [application])
+
+  useEffect(() => {
+    if (!themes.length) {
+      reloadThemes()
+    }
+  }, [reloadThemes, themes.length])
+
+  useEffect(() => {
+    const cleanupItemStream = application.streamItems(ContentType.Theme, () => {
+      reloadThemes()
     })
 
-    useEffect(() => {
-      toggleFocusMode(focusModeEnabled)
-    }, [focusModeEnabled])
+    return () => {
+      cleanupItemStream()
+    }
+  }, [application, reloadThemes])
 
-    const reloadThemes = useCallback(() => {
-      const themes = application.items
-        .getDisplayableItems<SNTheme>(ContentType.Theme)
-        .map((item) => {
-          return {
-            name: item.name,
-            identifier: item.identifier,
-            component: item,
-          }
-        }) as ThemeItem[]
+  useEffect(() => {
+    const cleanupItemStream = application.streamItems(ContentType.Component, () => {
+      reloadToggleableComponents()
+    })
 
-      GetFeatures()
-        .filter((feature) => feature.content_type === ContentType.Theme && !feature.layerable)
-        .forEach((theme) => {
-          if (themes.findIndex((item) => item.identifier === theme.identifier) === -1) {
-            themes.push({
-              name: theme.name as string,
-              identifier: theme.identifier,
-            })
-          }
-        })
+    return () => {
+      cleanupItemStream()
+    }
+  }, [application, reloadToggleableComponents])
 
-      setThemes(themes.sort(sortThemes))
+  useEffect(() => {
+    if (themesMenuOpen) {
+      defaultThemeButtonRef.current?.focus()
+    }
+  }, [themesMenuOpen])
 
-      setDefaultThemeOn(
-        !themes
-          .map((item) => item?.component)
-          .find((theme) => theme?.active && !theme.isLayerable()),
-      )
-    }, [application])
+  useEffect(() => {
+    prefsButtonRef.current?.focus()
+  }, [])
 
-    const reloadToggleableComponents = useCallback(() => {
-      const toggleableComponents = application.items
-        .getDisplayableItems<SNComponent>(ContentType.Component)
-        .filter(
-          (component) =>
-            [ComponentArea.EditorStack].includes(component.area) &&
-            component.identifier !== FeatureIdentifier.DeprecatedFoldersComponent,
-        )
+  const [closeOnBlur] = useCloseOnBlur(themesMenuRef, setThemesMenuOpen)
 
-      setToggleableComponents(toggleableComponents)
-    }, [application])
-
-    useEffect(() => {
-      if (!themes.length) {
-        reloadThemes()
-      }
-    }, [reloadThemes, themes.length])
-
-    useEffect(() => {
-      const cleanupItemStream = application.streamItems(ContentType.Theme, () => {
-        reloadThemes()
+  const toggleThemesMenu = () => {
+    if (!themesMenuOpen && themesButtonRef.current) {
+      const themesButtonRect = themesButtonRef.current.getBoundingClientRect()
+      setThemesMenuPosition({
+        left: themesButtonRect.right,
+        bottom: document.documentElement.clientHeight - themesButtonRect.bottom,
       })
+      setThemesMenuOpen(true)
+    } else {
+      setThemesMenuOpen(false)
+    }
+  }
 
-      return () => {
-        cleanupItemStream()
-      }
-    }, [application, reloadThemes])
+  const openPreferences = () => {
+    closeQuickSettingsMenu()
+    appState.preferences.openPreferences()
+  }
 
-    useEffect(() => {
-      const cleanupItemStream = application.streamItems(ContentType.Component, () => {
-        reloadToggleableComponents()
-      })
+  const toggleComponent = (component: SNComponent) => {
+    if (component.isTheme()) {
+      application.mutator.toggleTheme(component).catch(console.error)
+    } else {
+      application.mutator.toggleComponent(component).catch(console.error)
+    }
+  }
 
-      return () => {
-        cleanupItemStream()
-      }
-    }, [application, reloadToggleableComponents])
-
-    useEffect(() => {
-      if (themesMenuOpen) {
-        defaultThemeButtonRef.current?.focus()
-      }
-    }, [themesMenuOpen])
-
-    useEffect(() => {
-      prefsButtonRef.current?.focus()
-    }, [])
-
-    const [closeOnBlur] = useCloseOnBlur(themesMenuRef, setThemesMenuOpen)
-
-    const toggleThemesMenu = () => {
-      if (!themesMenuOpen && themesButtonRef.current) {
-        const themesButtonRect = themesButtonRef.current.getBoundingClientRect()
-        setThemesMenuPosition({
-          left: themesButtonRect.right,
-          bottom: document.documentElement.clientHeight - themesButtonRect.bottom,
-        })
-        setThemesMenuOpen(true)
-      } else {
+  const handleBtnKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = (event) => {
+    switch (event.key) {
+      case 'Escape':
         setThemesMenuOpen(false)
-      }
+        themesButtonRef.current?.focus()
+        break
+      case 'ArrowRight':
+        if (!themesMenuOpen) {
+          toggleThemesMenu()
+        }
     }
+  }
 
-    const openPreferences = () => {
-      closeQuickSettingsMenu()
-      appState.preferences.openPreferences()
+  const handleQuickSettingsKeyDown: JSXInternal.KeyboardEventHandler<HTMLDivElement> = (event) => {
+    quickSettingsKeyDownHandler(closeQuickSettingsMenu, event, quickSettingsMenuRef, themesMenuOpen)
+  }
+
+  const handlePanelKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
+    themesMenuKeyDownHandler(event, themesMenuRef, setThemesMenuOpen, themesButtonRef)
+  }
+
+  const toggleDefaultTheme = () => {
+    const activeTheme = themes.map((item) => item.component).find((theme) => theme?.active && !theme.isLayerable())
+    if (activeTheme) {
+      application.mutator.toggleTheme(activeTheme).catch(console.error)
     }
+  }
 
-    const toggleComponent = (component: SNComponent) => {
-      if (component.isTheme()) {
-        application.mutator.toggleTheme(component).catch(console.error)
-      } else {
-        application.mutator.toggleComponent(component).catch(console.error)
-      }
-    }
-
-    const handleBtnKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = (event) => {
-      switch (event.key) {
-        case 'Escape':
-          setThemesMenuOpen(false)
-          themesButtonRef.current?.focus()
-          break
-        case 'ArrowRight':
-          if (!themesMenuOpen) {
-            toggleThemesMenu()
-          }
-      }
-    }
-
-    const handleQuickSettingsKeyDown: JSXInternal.KeyboardEventHandler<HTMLDivElement> = (
-      event,
-    ) => {
-      quickSettingsKeyDownHandler(
-        closeQuickSettingsMenu,
-        event,
-        quickSettingsMenuRef,
-        themesMenuOpen,
-      )
-    }
-
-    const handlePanelKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
-      themesMenuKeyDownHandler(event, themesMenuRef, setThemesMenuOpen, themesButtonRef)
-    }
-
-    const toggleDefaultTheme = () => {
-      const activeTheme = themes
-        .map((item) => item.component)
-        .find((theme) => theme?.active && !theme.isLayerable())
-      if (activeTheme) {
-        application.mutator.toggleTheme(activeTheme).catch(console.error)
-      }
-    }
-
-    return (
-      <div ref={mainRef} className="sn-component">
-        <div
-          className={`sn-quick-settings-menu absolute ${MENU_CLASSNAME} ${
-            shouldAnimateCloseMenu ? 'slide-up-animation' : 'sn-dropdown--animated'
-          }`}
-          ref={quickSettingsMenuRef}
-          onKeyDown={handleQuickSettingsKeyDown}
-        >
-          <div className="px-3 mt-1 mb-2 font-semibold color-text uppercase">Quick Settings</div>
-          <Disclosure open={themesMenuOpen} onChange={toggleThemesMenu}>
-            <DisclosureButton
-              onKeyDown={handleBtnKeyDown}
-              onBlur={closeOnBlur}
-              ref={themesButtonRef}
-              className="sn-dropdown-item justify-between focus:bg-info-backdrop focus:shadow-none"
-            >
-              <div className="flex items-center">
-                <Icon type="themes" className="color-neutral mr-2" />
-                Themes
-              </div>
-              <Icon type="chevron-right" className="color-neutral" />
-            </DisclosureButton>
-            <DisclosurePanel
-              onBlur={closeOnBlur}
-              ref={themesMenuRef}
-              onKeyDown={handlePanelKeyDown}
-              style={{
-                ...themesMenuPosition,
-              }}
-              className={`${MENU_CLASSNAME} fixed sn-dropdown--animated`}
-            >
-              <div className="px-3 my-1 font-semibold color-text uppercase">Themes</div>
-              <button
-                className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
-                onClick={toggleDefaultTheme}
-                onBlur={closeOnBlur}
-                ref={defaultThemeButtonRef}
-              >
-                <div
-                  className={`pseudo-radio-btn ${
-                    defaultThemeOn ? 'pseudo-radio-btn--checked' : ''
-                  } mr-2`}
-                ></div>
-                Default
-              </button>
-              {themes.map((theme) => (
-                <ThemesMenuButton
-                  item={theme}
-                  application={application}
-                  key={theme.component?.uuid ?? theme.identifier}
-                  onBlur={closeOnBlur}
-                />
-              ))}
-            </DisclosurePanel>
-          </Disclosure>
-          {toggleableComponents.map((component) => (
-            <button
-              className="sn-dropdown-item justify-between focus:bg-info-backdrop focus:shadow-none"
-              onClick={() => {
-                toggleComponent(component)
-              }}
-            >
-              <div className="flex items-center">
-                <Icon type="window" className="color-neutral mr-2" />
-                {component.name}
-              </div>
-              <Switch checked={component.active} className="px-0" />
-            </button>
-          ))}
-          <FocusModeSwitch
-            application={application}
-            onToggle={setFocusModeEnabled}
-            onClose={closeQuickSettingsMenu}
-            isEnabled={focusModeEnabled}
-          />
-          <div className="h-1px my-2 bg-border"></div>
-          <button
-            className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
-            onClick={openPreferences}
-            ref={prefsButtonRef}
+  return (
+    <div ref={mainRef} className="sn-component">
+      <div
+        className={`sn-quick-settings-menu absolute ${MENU_CLASSNAME} ${
+          shouldAnimateCloseMenu ? 'slide-up-animation' : 'sn-dropdown--animated'
+        }`}
+        ref={quickSettingsMenuRef}
+        onKeyDown={handleQuickSettingsKeyDown}
+      >
+        <div className="px-3 mt-1 mb-2 font-semibold color-text uppercase">Quick Settings</div>
+        <Disclosure open={themesMenuOpen} onChange={toggleThemesMenu}>
+          <DisclosureButton
+            onKeyDown={handleBtnKeyDown}
+            onBlur={closeOnBlur}
+            ref={themesButtonRef}
+            className="sn-dropdown-item justify-between focus:bg-info-backdrop focus:shadow-none"
           >
-            <Icon type="more" className="color-neutral mr-2" />
-            Open Preferences
+            <div className="flex items-center">
+              <Icon type="themes" className="color-neutral mr-2" />
+              Themes
+            </div>
+            <Icon type="chevron-right" className="color-neutral" />
+          </DisclosureButton>
+          <DisclosurePanel
+            onBlur={closeOnBlur}
+            ref={themesMenuRef}
+            onKeyDown={handlePanelKeyDown}
+            style={{
+              ...themesMenuPosition,
+            }}
+            className={`${MENU_CLASSNAME} fixed sn-dropdown--animated`}
+          >
+            <div className="px-3 my-1 font-semibold color-text uppercase">Themes</div>
+            <button
+              className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
+              onClick={toggleDefaultTheme}
+              onBlur={closeOnBlur}
+              ref={defaultThemeButtonRef}
+            >
+              <div className={`pseudo-radio-btn ${defaultThemeOn ? 'pseudo-radio-btn--checked' : ''} mr-2`}></div>
+              Default
+            </button>
+            {themes.map((theme) => (
+              <ThemesMenuButton
+                item={theme}
+                application={application}
+                key={theme.component?.uuid ?? theme.identifier}
+                onBlur={closeOnBlur}
+              />
+            ))}
+          </DisclosurePanel>
+        </Disclosure>
+        {toggleableComponents.map((component) => (
+          <button
+            className="sn-dropdown-item justify-between focus:bg-info-backdrop focus:shadow-none"
+            onClick={() => {
+              toggleComponent(component)
+            }}
+          >
+            <div className="flex items-center">
+              <Icon type="window" className="color-neutral mr-2" />
+              {component.name}
+            </div>
+            <Switch checked={component.active} className="px-0" />
           </button>
-        </div>
+        ))}
+        <FocusModeSwitch
+          application={application}
+          onToggle={setFocusModeEnabled}
+          onClose={closeQuickSettingsMenu}
+          isEnabled={focusModeEnabled}
+        />
+        <div className="h-1px my-2 bg-border"></div>
+        <button
+          className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
+          onClick={openPreferences}
+          ref={prefsButtonRef}
+        >
+          <Icon type="more" className="color-neutral mr-2" />
+          Open Preferences
+        </button>
       </div>
-    )
-  },
-)
+    </div>
+  )
+})
diff --git a/app/assets/javascripts/Components/RevisionHistoryModal/HistoryListContainer.tsx b/app/assets/javascripts/Components/RevisionHistoryModal/HistoryListContainer.tsx
index 3f4f1ceab..22ef1632f 100644
--- a/app/assets/javascripts/Components/RevisionHistoryModal/HistoryListContainer.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/HistoryListContainer.tsx
@@ -1,12 +1,5 @@
 import { WebApplication } from '@/UIModels/Application'
-import {
-  Action,
-  ActionVerb,
-  HistoryEntry,
-  NoteHistoryEntry,
-  RevisionListEntry,
-  SNNote,
-} from '@standardnotes/snjs'
+import { Action, ActionVerb, HistoryEntry, NoteHistoryEntry, RevisionListEntry, SNNote } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
 import { StateUpdater, useCallback, useState } from 'preact/hooks'
@@ -55,26 +48,19 @@ export const HistoryListContainer: FunctionComponent<Props> = observer(
       const fetchLegacyHistory = async () => {
         const actionExtensions = application.actionsManager.getExtensions()
         actionExtensions.forEach(async (ext) => {
-          const actionExtension = await application.actionsManager.loadExtensionInContextOfItem(
-            ext,
-            note,
-          )
+          const actionExtension = await application.actionsManager.loadExtensionInContextOfItem(ext, note)
 
           if (!actionExtension) {
             return
           }
 
-          const isLegacyNoteHistoryExt = actionExtension?.actions.some(
-            (action) => action.verb === ActionVerb.Nested,
-          )
+          const isLegacyNoteHistoryExt = actionExtension?.actions.some((action) => action.verb === ActionVerb.Nested)
 
           if (!isLegacyNoteHistoryExt) {
             return
           }
 
-          const legacyHistoryEntries = actionExtension.actions.filter(
-            (action) => action.subactions?.[0],
-          )
+          const legacyHistoryEntries = actionExtension.actions.filter((action) => action.subactions?.[0])
 
           setLegacyHistory(legacyHistoryEntries)
         })
@@ -114,10 +100,7 @@ export const HistoryListContainer: FunctionComponent<Props> = observer(
             throw new Error('Could not find revision action url')
           }
 
-          const response = await application.actionsManager.runAction(
-            revisionListEntry.subactions[0],
-            note,
-          )
+          const response = await application.actionsManager.runAction(revisionListEntry.subactions[0], note)
 
           if (!response) {
             throw new Error('Could not fetch revision')
@@ -131,13 +114,7 @@ export const HistoryListContainer: FunctionComponent<Props> = observer(
           setIsFetchingSelectedRevision(false)
         }
       },
-      [
-        application.actionsManager,
-        note,
-        setIsFetchingSelectedRevision,
-        setSelectedRemoteEntry,
-        setSelectedRevision,
-      ],
+      [application.actionsManager, note, setIsFetchingSelectedRevision, setSelectedRemoteEntry, setSelectedRevision],
     )
 
     const fetchAndSetRemoteRevision = useCallback(
@@ -150,10 +127,7 @@ export const HistoryListContainer: FunctionComponent<Props> = observer(
           setSelectedRemoteEntry(undefined)
 
           try {
-            const remoteRevision = await application.historyManager.fetchRemoteRevision(
-              note,
-              revisionListEntry,
-            )
+            const remoteRevision = await application.historyManager.fetchRemoteRevision(note, revisionListEntry)
             setSelectedRevision(remoteRevision)
             setSelectedRemoteEntry(revisionListEntry)
           } catch (err) {
@@ -177,17 +151,11 @@ export const HistoryListContainer: FunctionComponent<Props> = observer(
     )
 
     return (
-      <div
-        className={
-          'flex flex-col min-w-60 border-0 border-r-1px border-solid border-main overflow-auto h-full'
-        }
-      >
+      <div className={'flex flex-col min-w-60 border-0 border-r-1px border-solid border-main overflow-auto h-full'}>
         <div className="flex border-0 border-b-1 border-solid border-main">
           <TabButton type={RevisionListTabType.Remote} />
           <TabButton type={RevisionListTabType.Session} />
-          {legacyHistory && legacyHistory.length > 0 && (
-            <TabButton type={RevisionListTabType.Legacy} />
-          )}
+          {legacyHistory && legacyHistory.length > 0 && <TabButton type={RevisionListTabType.Legacy} />}
         </div>
         <div className={'min-h-0 overflow-auto py-1.5 h-full'}>
           {selectedTab === RevisionListTabType.Session && (
diff --git a/app/assets/javascripts/Components/RevisionHistoryModal/HistoryListItem.tsx b/app/assets/javascripts/Components/RevisionHistoryModal/HistoryListItem.tsx
index aae3cc0ed..4ee116cbe 100644
--- a/app/assets/javascripts/Components/RevisionHistoryModal/HistoryListItem.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/HistoryListItem.tsx
@@ -6,23 +6,15 @@ type HistoryListItemProps = {
   onClick: () => void
 }
 
-export const HistoryListItem: FunctionComponent<HistoryListItemProps> = ({
-  children,
-  isSelected,
-  onClick,
-}) => {
+export const HistoryListItem: FunctionComponent<HistoryListItemProps> = ({ children, isSelected, onClick }) => {
   return (
     <button
       tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
-      className={`sn-dropdown-item py-2.5 focus:bg-contrast focus:shadow-none ${
-        isSelected ? 'bg-info-backdrop' : ''
-      }`}
+      className={`sn-dropdown-item py-2.5 focus:bg-contrast focus:shadow-none ${isSelected ? 'bg-info-backdrop' : ''}`}
       onClick={onClick}
       data-selected={isSelected}
     >
-      <div
-        className={`pseudo-radio-btn ${isSelected ? 'pseudo-radio-btn--checked' : ''} mr-2`}
-      ></div>
+      <div className={`pseudo-radio-btn ${isSelected ? 'pseudo-radio-btn--checked' : ''} mr-2`}></div>
       {children}
     </button>
   )
diff --git a/app/assets/javascripts/Components/RevisionHistoryModal/LegacyHistoryList.tsx b/app/assets/javascripts/Components/RevisionHistoryModal/LegacyHistoryList.tsx
index 30df06582..35aca66bc 100644
--- a/app/assets/javascripts/Components/RevisionHistoryModal/LegacyHistoryList.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/LegacyHistoryList.tsx
@@ -68,9 +68,7 @@ export const LegacyHistoryList: FunctionComponent<Props> = ({
           </HistoryListItem>
         )
       })}
-      {!legacyHistory?.length && (
-        <div className="color-grey-0 select-none">No legacy history found</div>
-      )}
+      {!legacyHistory?.length && <div className="color-grey-0 select-none">No legacy history found</div>}
     </div>
   )
 }
diff --git a/app/assets/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx b/app/assets/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx
index 4a23de6ce..4d1bfff85 100644
--- a/app/assets/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx
@@ -43,13 +43,7 @@ export const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> = obse
       if (firstEntry && !selectedEntryUuid.length) {
         selectFirstEntry()
       }
-    }, [
-      fetchAndSetRemoteRevision,
-      firstEntry,
-      remoteHistory,
-      selectFirstEntry,
-      selectedEntryUuid.length,
-    ])
+    }, [fetchAndSetRemoteRevision, firstEntry, remoteHistory, selectFirstEntry, selectedEntryUuid.length])
 
     return (
       <div
@@ -76,9 +70,7 @@ export const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> = obse
                 >
                   <div className="flex flex-grow items-center justify-between">
                     <div>{previewHistoryEntryTitle(entry)}</div>
-                    {!application.features.hasMinimumRole(entry.required_role) && (
-                      <Icon type="premium-feature" />
-                    )}
+                    {!application.features.hasMinimumRole(entry.required_role) && <Icon type="premium-feature" />}
                   </div>
                 </HistoryListItem>
               ))}
diff --git a/app/assets/javascripts/Components/RevisionHistoryModal/RevisionContentLocked.tsx b/app/assets/javascripts/Components/RevisionHistoryModal/RevisionContentLocked.tsx
index 6d237d9a9..75c674082 100644
--- a/app/assets/javascripts/Components/RevisionHistoryModal/RevisionContentLocked.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/RevisionContentLocked.tsx
@@ -22,8 +22,7 @@ const getPremiumContentCopy = (planName: string | undefined) => {
 export const RevisionContentLocked: FunctionComponent<{
   appState: AppState
 }> = observer(({ appState }) => {
-  const { userSubscriptionName, isUserSubscriptionExpired, isUserSubscriptionCanceled } =
-    appState.subscription
+  const { userSubscriptionName, isUserSubscriptionExpired, isUserSubscriptionCanceled } = appState.subscription
 
   return (
     <div className="flex w-full h-full items-center justify-center">
diff --git a/app/assets/javascripts/Components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx b/app/assets/javascripts/Components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
index 98a502c13..5cee07d3e 100644
--- a/app/assets/javascripts/Components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
@@ -46,13 +46,9 @@ const RevisionContentPlaceholder: FunctionComponent<RevisionContentPlaceholderPr
         : '-z-index-1'
     }`}
   >
-    {isFetchingSelectedRevision && (
-      <div className={`sk-spinner w-5 h-5 spinner-info ${ABSOLUTE_CENTER_CLASSNAME}`} />
-    )}
+    {isFetchingSelectedRevision && <div className={`sk-spinner w-5 h-5 spinner-info ${ABSOLUTE_CENTER_CLASSNAME}`} />}
     {!isFetchingSelectedRevision && !selectedRevision ? (
-      <div className={`color-grey-0 select-none ${ABSOLUTE_CENTER_CLASSNAME}`}>
-        No revision selected
-      </div>
+      <div className={`color-grey-0 select-none ${ABSOLUTE_CENTER_CLASSNAME}`}>No revision selected</div>
     ) : null}
   </div>
 )
@@ -87,8 +83,7 @@ export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps>
         try {
           const initialRemoteHistory = await application.historyManager.remoteHistoryForItem(note)
 
-          const remoteHistoryAsGroups =
-            sortRevisionListIntoGroups<RevisionListEntry>(initialRemoteHistory)
+          const remoteHistoryAsGroups = sortRevisionListIntoGroups<RevisionListEntry>(initialRemoteHistory)
 
           setRemoteHistory(remoteHistoryAsGroups)
         } catch (err) {
@@ -240,9 +235,7 @@ export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps>
                   isFetchingSelectedRevision={isFetchingSelectedRevision}
                   showContentLockedScreen={showContentLockedScreen}
                 />
-                {showContentLockedScreen && !selectedRevision && (
-                  <RevisionContentLocked appState={appState} />
-                )}
+                {showContentLockedScreen && !selectedRevision && <RevisionContentLocked appState={appState} />}
                 {selectedRevision && templateNoteForRevision && (
                   <SelectedRevisionContent
                     application={application}
@@ -267,11 +260,7 @@ export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps>
               {selectedRevision && (
                 <div class="flex items-center">
                   {selectedRemoteEntry && (
-                    <Button
-                      className="py-1.35 mr-2.5"
-                      onClick={deleteSelectedRevision}
-                      variant="normal"
-                    >
+                    <Button className="py-1.35 mr-2.5" onClick={deleteSelectedRevision} variant="normal">
                       {isDeletingRevision ? (
                         <div className="sk-spinner my-1 w-3 h-3 spinner-info" />
                       ) : (
@@ -285,12 +274,7 @@ export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps>
                     onClick={restoreAsCopy}
                     variant="normal"
                   />
-                  <Button
-                    className="py-1.35"
-                    label="Restore version"
-                    onClick={restore}
-                    variant="primary"
-                  />
+                  <Button className="py-1.35" label="Restore version" onClick={restore} variant="primary" />
                 </div>
               )}
             </div>
diff --git a/app/assets/javascripts/Components/RevisionHistoryModal/SelectedRevisionContent.tsx b/app/assets/javascripts/Components/RevisionHistoryModal/SelectedRevisionContent.tsx
index f95062d76..a5f4f86cc 100644
--- a/app/assets/javascripts/Components/RevisionHistoryModal/SelectedRevisionContent.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/SelectedRevisionContent.tsx
@@ -24,8 +24,7 @@ export const SelectedRevisionContent: FunctionComponent<SelectedRevisionContentP
         return undefined
       }
 
-      const componentViewer =
-        application.componentManager.createComponentViewer(editorForCurrentNote)
+      const componentViewer = application.componentManager.createComponentViewer(editorForCurrentNote)
       componentViewer.setReadonly(true)
       componentViewer.lockReadonly = true
       componentViewer.overrideContextItem = templateNoteForRevision
diff --git a/app/assets/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx b/app/assets/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx
index ed5fd31e3..f1f6d0aa1 100644
--- a/app/assets/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx
@@ -75,9 +75,7 @@ export const SessionHistoryList: FunctionComponent<Props> = ({
           </Fragment>
         ) : null),
       )}
-      {!sessionHistoryLength && (
-        <div className="color-grey-0 select-none">No session history found</div>
-      )}
+      {!sessionHistoryLength && <div className="color-grey-0 select-none">No session history found</div>}
     </div>
   )
 }
diff --git a/app/assets/javascripts/Components/RevisionHistoryModal/utils.ts b/app/assets/javascripts/Components/RevisionHistoryModal/utils.ts
index be5ca333f..efc0d64b5 100644
--- a/app/assets/javascripts/Components/RevisionHistoryModal/utils.ts
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/utils.ts
@@ -25,9 +25,7 @@ export const formatDateAsMonthYearString = (date: Date) =>
 
 export const getGroupIndexForEntry = (entry: RevisionEntry, groups: ListGroup<RevisionEntry>[]) => {
   const todayAsDate = new Date()
-  const entryDate = new Date(
-    (entry as RevisionListEntry).created_at ?? (entry as NoteHistoryEntry).payload.created_at,
-  )
+  const entryDate = new Date((entry as RevisionListEntry).created_at ?? (entry as NoteHistoryEntry).payload.created_at)
 
   const differenceBetweenDatesInDays = calculateDifferenceBetweenDatesInDays(todayAsDate, entryDate)
 
@@ -52,9 +50,7 @@ const GROUP_TITLE_TODAY = 'Today'
 const GROUP_TITLE_WEEK = 'This Week'
 const GROUP_TITLE_YEAR = 'More Than A Year Ago'
 
-export const sortRevisionListIntoGroups = <EntryType extends RevisionEntry>(
-  revisionList: EntryType[] | undefined,
-) => {
+export const sortRevisionListIntoGroups = <EntryType extends RevisionEntry>(revisionList: EntryType[] | undefined) => {
   const sortedGroups: ListGroup<EntryType>[] = [
     {
       title: GROUP_TITLE_TODAY,
@@ -82,10 +78,7 @@ export const sortRevisionListIntoGroups = <EntryType extends RevisionEntry>(
     } else {
       addBeforeLastGroup({
         title: formatDateAsMonthYearString(
-          new Date(
-            (entry as RevisionListEntry).created_at ??
-              (entry as NoteHistoryEntry).payload.created_at,
-          ),
+          new Date((entry as RevisionListEntry).created_at ?? (entry as NoteHistoryEntry).payload.created_at),
         ),
         entries: [entry],
       })
diff --git a/app/assets/javascripts/Components/SearchOptions/index.tsx b/app/assets/javascripts/Components/SearchOptions/index.tsx
index 934b50f24..ea26ec0e8 100644
--- a/app/assets/javascripts/Components/SearchOptions/index.tsx
+++ b/app/assets/javascripts/Components/SearchOptions/index.tsx
@@ -18,28 +18,16 @@ export const SearchOptions = observer(({ appState }: Props) => {
   }
 
   return (
-    <div
-      role="tablist"
-      className="search-options justify-center"
-      onMouseDown={(e) => e.preventDefault()}
-    >
+    <div role="tablist" className="search-options justify-center" onMouseDown={(e) => e.preventDefault()}>
       <Bubble
         label="Protected Contents"
         selected={includeProtectedContents}
         onSelect={toggleIncludeProtectedContents}
       />
 
-      <Bubble
-        label="Archived"
-        selected={includeArchived}
-        onSelect={searchOptions.toggleIncludeArchived}
-      />
+      <Bubble label="Archived" selected={includeArchived} onSelect={searchOptions.toggleIncludeArchived} />
 
-      <Bubble
-        label="Trashed"
-        selected={includeTrashed}
-        onSelect={searchOptions.toggleIncludeTrashed}
-      />
+      <Bubble label="Trashed" selected={includeTrashed} onSelect={searchOptions.toggleIncludeTrashed} />
     </div>
   )
 })
diff --git a/app/assets/javascripts/Components/SessionsModal/index.tsx b/app/assets/javascripts/Components/SessionsModal/index.tsx
index 1ea7988c2..df6ff0f17 100644
--- a/app/assets/javascripts/Components/SessionsModal/index.tsx
+++ b/app/assets/javascripts/Components/SessionsModal/index.tsx
@@ -1,11 +1,5 @@
 import { AppState } from '@/UIModels/AppState'
-import {
-  SNApplication,
-  SessionStrings,
-  UuidString,
-  isNullOrUndefined,
-  RemoteSession,
-} from '@standardnotes/snjs'
+import { SNApplication, SessionStrings, UuidString, isNullOrUndefined, RemoteSession } from '@standardnotes/snjs'
 import { FunctionComponent } from 'preact'
 import { useState, useEffect, useRef, useMemo } from 'preact/hooks'
 import { Dialog } from '@reach/dialog'
diff --git a/app/assets/javascripts/Components/Shared/AccordionItem.tsx b/app/assets/javascripts/Components/Shared/AccordionItem.tsx
index 2f88a3f87..8f4272b54 100644
--- a/app/assets/javascripts/Components/Shared/AccordionItem.tsx
+++ b/app/assets/javascripts/Components/Shared/AccordionItem.tsx
@@ -28,11 +28,7 @@ export const AccordionItem: FunctionalComponent<Props> = ({ title, className = '
           data-is-expanded={isExpanded}
         />
       </div>
-      <div
-        className={'accordion-contents-container cursor-auto'}
-        data-is-expanded={isExpanded}
-        ref={elementRef}
-      >
+      <div className={'accordion-contents-container cursor-auto'} data-is-expanded={isExpanded} ref={elementRef}>
         {children}
       </div>
     </div>
diff --git a/app/assets/javascripts/Components/Shared/ModalDialog.tsx b/app/assets/javascripts/Components/Shared/ModalDialog.tsx
index 03ea14eec..7e6571d66 100644
--- a/app/assets/javascripts/Components/Shared/ModalDialog.tsx
+++ b/app/assets/javascripts/Components/Shared/ModalDialog.tsx
@@ -1,9 +1,5 @@
 import { FunctionComponent } from 'preact'
-import {
-  AlertDialog,
-  AlertDialogDescription,
-  AlertDialogLabel,
-} from '@node_modules/@reach/alert-dialog'
+import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@node_modules/@reach/alert-dialog'
 import { useRef } from '@node_modules/preact/hooks'
 
 export const ModalDialog: FunctionComponent = ({ children }) => {
@@ -16,10 +12,7 @@ export const ModalDialog: FunctionComponent = ({ children }) => {
           at the sn-component level, only below it. tabIndex -1 disables focus
           and enables it on the child component */}
       <div tabIndex={-1} className="sn-component">
-        <div
-          tabIndex={0}
-          className="sk-panel w-160 bg-default rounded shadow-overlay focus:padded-ring-info"
-        >
+        <div tabIndex={0} className="sk-panel w-160 bg-default rounded shadow-overlay focus:padded-ring-info">
           {children}
         </div>
       </div>
@@ -50,10 +43,7 @@ export const ModalDialogDescription: FunctionComponent<{
   </AlertDialogDescription>
 )
 
-export const ModalDialogButtons: FunctionComponent<{ className?: string }> = ({
-  children,
-  className,
-}) => (
+export const ModalDialogButtons: FunctionComponent<{ className?: string }> = ({ children, className }) => (
   <>
     <hr className="h-1px bg-border no-border m-0" />
     <div className={`px-4 py-4 flex flex-row items-center ${className}`}>
diff --git a/app/assets/javascripts/Components/Switch/index.tsx b/app/assets/javascripts/Components/Switch/index.tsx
index 2123b5599..086ebe564 100644
--- a/app/assets/javascripts/Components/Switch/index.tsx
+++ b/app/assets/javascripts/Components/Switch/index.tsx
@@ -1,8 +1,4 @@
-import {
-  CustomCheckboxContainer,
-  CustomCheckboxInput,
-  CustomCheckboxInputProps,
-} from '@reach/checkbox'
+import { CustomCheckboxContainer, CustomCheckboxInput, CustomCheckboxInputProps } from '@reach/checkbox'
 import '@reach/checkbox/styles.css'
 import { ComponentChildren, FunctionalComponent } from 'preact'
 import { useState } from 'preact/hooks'
@@ -49,10 +45,7 @@ export const Switch: FunctionalComponent<SwitchProps> = (props: SwitchProps) =>
             children: undefined,
           } as CustomCheckboxInputProps)}
         />
-        <span
-          aria-hidden
-          className={`sn-switch-handle ${checked ? 'sn-switch-handle--right' : ''}`}
-        />
+        <span aria-hidden className={`sn-switch-handle ${checked ? 'sn-switch-handle--right' : ''}`} />
       </CustomCheckboxContainer>
     </label>
   )
diff --git a/app/assets/javascripts/Components/SyncResolutionMenu/index.tsx b/app/assets/javascripts/Components/SyncResolutionMenu/index.tsx
index 31e8dc11b..0e3c45350 100644
--- a/app/assets/javascripts/Components/SyncResolutionMenu/index.tsx
+++ b/app/assets/javascripts/Components/SyncResolutionMenu/index.tsx
@@ -28,9 +28,8 @@ export class SyncResolutionMenu extends PureComponent<Props> {
           <div className="sk-panel-content">
             <div className="sk-panel-section">
               <div className="sk-panel-row sk-p">
-                We've detected that the data in the current application session may not match the
-                data on the server. An attempt was made to auto-resolve the issue, but it was unable
-                to reconcile the differences.
+                We've detected that the data in the current application session may not match the data on the server. An
+                attempt was made to auto-resolve the issue, but it was unable to reconcile the differences.
               </div>
               <div className="sk-p sk-panel-row">
                 <div className="sk-panel-column">
@@ -44,9 +43,8 @@ export class SyncResolutionMenu extends PureComponent<Props> {
                 <div className="sk-panel-column">
                   <strong className="sk-panel-row">Option 2 — Sign Out and Back In:</strong>
                   <div className="sk-p">
-                    Sign out of your account, then sign back in. This will ensure your data is
-                    consistent with the server. Be sure to download a backup of your data before
-                    doing so.
+                    Sign out of your account, then sign back in. This will ensure your data is consistent with the
+                    server. Be sure to download a backup of your data before doing so.
                   </div>
                 </div>
               </div>
diff --git a/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagInput.tsx b/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagInput.tsx
index aa7db862b..07f2bf3fb 100644
--- a/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagInput.tsx
+++ b/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagInput.tsx
@@ -115,9 +115,7 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
           />
           {dropdownVisible && (autocompleteTagResults.length > 0 || autocompleteTagHintVisible) && (
             <DisclosurePanel
-              className={`${
-                tags.length > 0 ? 'w-80' : 'w-70 mr-10'
-              } sn-dropdown flex flex-col py-2 absolute`}
+              className={`${tags.length > 0 ? 'w-80' : 'w-70 mr-10'} sn-dropdown flex flex-col py-2 absolute`}
               style={{
                 maxHeight: dropdownMaxHeight,
                 maxWidth: tagsContainerMaxWidth,
@@ -134,9 +132,7 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
                   />
                 ))}
               </div>
-              {autocompleteTagHintVisible && (
-                <AutocompleteTagHint appState={appState} closeOnBlur={closeOnBlur} />
-              )}
+              {autocompleteTagHintVisible && <AutocompleteTagHint appState={appState} closeOnBlur={closeOnBlur} />}
             </DisclosurePanel>
           )}
         </Disclosure>
diff --git a/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagResult.tsx b/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagResult.tsx
index ba552071d..bd0e8589b 100644
--- a/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagResult.tsx
+++ b/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagResult.tsx
@@ -12,12 +12,8 @@ type Props = {
 }
 
 export const AutocompleteTagResult = observer(({ appState, tagResult, closeOnBlur }: Props) => {
-  const {
-    autocompleteSearchQuery,
-    autocompleteTagHintVisible,
-    autocompleteTagResults,
-    focusedTagResultUuid,
-  } = appState.noteTags
+  const { autocompleteSearchQuery, autocompleteTagHintVisible, autocompleteTagResults, focusedTagResultUuid } =
+    appState.noteTags
 
   const tagResultRef = useRef<HTMLButtonElement>(null)
 
diff --git a/app/assets/javascripts/Components/Tags/RootTagDropZone.tsx b/app/assets/javascripts/Components/Tags/RootTagDropZone.tsx
index 4f2e00696..7981c6d12 100644
--- a/app/assets/javascripts/Components/Tags/RootTagDropZone.tsx
+++ b/app/assets/javascripts/Components/Tags/RootTagDropZone.tsx
@@ -32,10 +32,7 @@ export const RootTagDropZone: React.FC<Props> = observer(({ tagsState }) => {
   )
 
   return (
-    <div
-      ref={dropRef}
-      className={`root-drop ${canDrop ? 'active' : ''} ${isOver ? 'is-drag-over' : ''}`}
-    >
+    <div ref={dropRef} className={`root-drop ${canDrop ? 'active' : ''} ${isOver ? 'is-drag-over' : ''}`}>
       <Icon className="color-neutral" type="link-off" />
       <p className="content">
         Move the tag here to <br />
diff --git a/app/assets/javascripts/Components/Tags/SmartViewsList.tsx b/app/assets/javascripts/Components/Tags/SmartViewsList.tsx
index 27ac287d4..65c58411f 100644
--- a/app/assets/javascripts/Components/Tags/SmartViewsList.tsx
+++ b/app/assets/javascripts/Components/Tags/SmartViewsList.tsx
@@ -13,14 +13,7 @@ export const SmartViewsList: FunctionComponent<Props> = observer(({ appState })
   return (
     <>
       {allViews.map((view) => {
-        return (
-          <SmartViewsListItem
-            key={view.uuid}
-            view={view}
-            tagsState={appState.tags}
-            features={appState.features}
-          />
-        )
+        return <SmartViewsListItem key={view.uuid} view={view} tagsState={appState.tags} features={appState.features} />
       })}
     </>
   )
diff --git a/app/assets/javascripts/Components/Tags/SmartViewsListItem.tsx b/app/assets/javascripts/Components/Tags/SmartViewsListItem.tsx
index 86f768a6c..5b21b2b89 100644
--- a/app/assets/javascripts/Components/Tags/SmartViewsListItem.tsx
+++ b/app/assets/javascripts/Components/Tags/SmartViewsListItem.tsx
@@ -117,16 +117,12 @@ export const SmartViewsListItem: FunctionComponent<Props> = observer(({ view, ta
             spellCheck={false}
             ref={inputRef}
           />
-          <div className="count">
-            {view.uuid === SystemViewId.AllNotes && tagsState.allNotesCount}
-          </div>
+          <div className="count">{view.uuid === SystemViewId.AllNotes && tagsState.allNotesCount}</div>
         </div>
 
         {!isSystemView(view) && (
           <div className="meta">
-            {view.conflictOf && (
-              <div className="danger small-text font-bold">Conflicted Copy {view.conflictOf}</div>
-            )}
+            {view.conflictOf && <div className="danger small-text font-bold">Conflicted Copy {view.conflictOf}</div>}
 
             {isSelected && (
               <div className="menu">
diff --git a/app/assets/javascripts/Components/Tags/TagContextMenu.tsx b/app/assets/javascripts/Components/Tags/TagContextMenu.tsx
index 460fcb807..3783aad18 100644
--- a/app/assets/javascripts/Components/Tags/TagContextMenu.tsx
+++ b/app/assets/javascripts/Components/Tags/TagContextMenu.tsx
@@ -24,9 +24,7 @@ export const TagsContextMenu: FunctionComponent<Props> = observer(({ appState })
   const { contextMenuOpen, contextMenuPosition, contextMenuMaxHeight } = appState.tags
 
   const contextMenuRef = useRef<HTMLDivElement>(null)
-  const [closeOnBlur] = useCloseOnBlur(contextMenuRef, (open: boolean) =>
-    appState.tags.setContextMenuOpen(open),
-  )
+  const [closeOnBlur] = useCloseOnBlur(contextMenuRef, (open: boolean) => appState.tags.setContextMenuOpen(open))
 
   const reloadContextMenuLayout = useCallback(() => {
     appState.tags.reloadContextMenuLayout()
@@ -86,21 +84,11 @@ export const TagsContextMenu: FunctionComponent<Props> = observer(({ appState })
           </div>
           {!appState.features.hasFolders && <Icon type="premium-feature" />}
         </MenuItem>
-        <MenuItem
-          type={MenuItemType.IconButton}
-          onBlur={closeOnBlur}
-          className={'py-1.5'}
-          onClick={onClickRename}
-        >
+        <MenuItem type={MenuItemType.IconButton} onBlur={closeOnBlur} className={'py-1.5'} onClick={onClickRename}>
           <Icon type="pencil-filled" className="color-neutral mr-2" />
           Rename
         </MenuItem>
-        <MenuItem
-          type={MenuItemType.IconButton}
-          onBlur={closeOnBlur}
-          className={'py-1.5'}
-          onClick={onClickDelete}
-        >
+        <MenuItem type={MenuItemType.IconButton} onBlur={closeOnBlur} className={'py-1.5'} onClick={onClickDelete}>
           <Icon type="trash" className="mr-2 color-danger" />
           <span className="color-danger">Delete</span>
         </MenuItem>
diff --git a/app/assets/javascripts/Components/Tags/TagsList.tsx b/app/assets/javascripts/Components/Tags/TagsList.tsx
index a570c4804..7721fae08 100644
--- a/app/assets/javascripts/Components/Tags/TagsList.tsx
+++ b/app/assets/javascripts/Components/Tags/TagsList.tsx
@@ -36,9 +36,7 @@ export const TagsList: FunctionComponent<Props> = observer(({ appState }) => {
   return (
     <DndProvider backend={backend}>
       {allTags.length === 0 ? (
-        <div className="no-tags-placeholder">
-          No tags or folders. Create one using the add button above.
-        </div>
+        <div className="no-tags-placeholder">No tags or folders. Create one using the add button above.</div>
       ) : (
         <>
           {allTags.map((tag) => {
diff --git a/app/assets/javascripts/Components/Tags/TagsListItem.tsx b/app/assets/javascripts/Components/Tags/TagsListItem.tsx
index f50859215..ce1bcba0f 100644
--- a/app/assets/javascripts/Components/Tags/TagsListItem.tsx
+++ b/app/assets/javascripts/Components/Tags/TagsListItem.tsx
@@ -24,270 +24,261 @@ type Props = {
 const PADDING_BASE_PX = 14
 const PADDING_PER_LEVEL_PX = 21
 
-export const TagsListItem: FunctionComponent<Props> = observer(
-  ({ tag, features, tagsState, level, onContextMenu }) => {
-    const [title, setTitle] = useState(tag.title || '')
-    const [subtagTitle, setSubtagTitle] = useState('')
-    const inputRef = useRef<HTMLInputElement>(null)
-    const subtagInputRef = useRef<HTMLInputElement>(null)
-    const menuButtonRef = useRef<HTMLButtonElement>(null)
+export const TagsListItem: FunctionComponent<Props> = observer(({ tag, features, tagsState, level, onContextMenu }) => {
+  const [title, setTitle] = useState(tag.title || '')
+  const [subtagTitle, setSubtagTitle] = useState('')
+  const inputRef = useRef<HTMLInputElement>(null)
+  const subtagInputRef = useRef<HTMLInputElement>(null)
+  const menuButtonRef = useRef<HTMLButtonElement>(null)
 
-    const isSelected = tagsState.selected === tag
-    const isEditing = tagsState.editingTag === tag
-    const isAddingSubtag = tagsState.addingSubtagTo === tag
-    const noteCounts = computed(() => tagsState.getNotesCount(tag))
+  const isSelected = tagsState.selected === tag
+  const isEditing = tagsState.editingTag === tag
+  const isAddingSubtag = tagsState.addingSubtagTo === tag
+  const noteCounts = computed(() => tagsState.getNotesCount(tag))
 
-    const childrenTags = computed(() => tagsState.getChildren(tag)).get()
-    const hasChildren = childrenTags.length > 0
+  const childrenTags = computed(() => tagsState.getChildren(tag)).get()
+  const hasChildren = childrenTags.length > 0
 
-    const hasFolders = features.hasFolders
-    const hasAtLeastOneFolder = tagsState.hasAtLeastOneFolder
+  const hasFolders = features.hasFolders
+  const hasAtLeastOneFolder = tagsState.hasAtLeastOneFolder
 
-    const premiumModal = usePremiumModal()
+  const premiumModal = usePremiumModal()
 
-    const [showChildren, setShowChildren] = useState(tag.expanded)
-    const [hadChildren, setHadChildren] = useState(hasChildren)
+  const [showChildren, setShowChildren] = useState(tag.expanded)
+  const [hadChildren, setHadChildren] = useState(hasChildren)
 
-    useEffect(() => {
-      if (!hadChildren && hasChildren) {
-        setShowChildren(true)
-      }
-      setHadChildren(hasChildren)
-    }, [hadChildren, hasChildren])
+  useEffect(() => {
+    if (!hadChildren && hasChildren) {
+      setShowChildren(true)
+    }
+    setHadChildren(hasChildren)
+  }, [hadChildren, hasChildren])
 
-    useEffect(() => {
-      setTitle(tag.title || '')
-    }, [setTitle, tag])
+  useEffect(() => {
+    setTitle(tag.title || '')
+  }, [setTitle, tag])
 
-    const toggleChildren = useCallback(
-      (e: MouseEvent) => {
-        e.stopPropagation()
-        setShowChildren((x) => {
-          tagsState.setExpanded(tag, !x)
-          return !x
-        })
-      },
-      [setShowChildren, tag, tagsState],
-    )
+  const toggleChildren = useCallback(
+    (e: MouseEvent) => {
+      e.stopPropagation()
+      setShowChildren((x) => {
+        tagsState.setExpanded(tag, !x)
+        return !x
+      })
+    },
+    [setShowChildren, tag, tagsState],
+  )
 
-    const selectCurrentTag = useCallback(() => {
-      tagsState.selected = tag
-    }, [tagsState, tag])
+  const selectCurrentTag = useCallback(() => {
+    tagsState.selected = tag
+  }, [tagsState, tag])
 
-    const onBlur = useCallback(() => {
-      tagsState.save(tag, title).catch(console.error)
-      setTitle(tag.title)
-    }, [tagsState, tag, title, setTitle])
+  const onBlur = useCallback(() => {
+    tagsState.save(tag, title).catch(console.error)
+    setTitle(tag.title)
+  }, [tagsState, tag, title, setTitle])
 
-    const onInput = useCallback(
-      (e: JSX.TargetedEvent<HTMLInputElement>) => {
-        const value = (e.target as HTMLInputElement).value
-        setTitle(value)
-      },
-      [setTitle],
-    )
-
-    const onKeyDown = useCallback(
-      (e: KeyboardEvent) => {
-        if (e.key === KeyboardKey.Enter) {
-          inputRef.current?.blur()
-          e.preventDefault()
-        }
-      },
-      [inputRef],
-    )
-
-    useEffect(() => {
-      if (isEditing) {
-        inputRef.current?.focus()
-      }
-    }, [inputRef, isEditing])
-
-    const onSubtagInput = useCallback((e: JSX.TargetedEvent<HTMLInputElement>) => {
+  const onInput = useCallback(
+    (e: JSX.TargetedEvent<HTMLInputElement>) => {
       const value = (e.target as HTMLInputElement).value
-      setSubtagTitle(value)
-    }, [])
+      setTitle(value)
+    },
+    [setTitle],
+  )
 
-    const onSubtagInputBlur = useCallback(() => {
-      tagsState.createSubtagAndAssignParent(tag, subtagTitle).catch(console.error)
-      setSubtagTitle('')
-    }, [subtagTitle, tag, tagsState])
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === KeyboardKey.Enter) {
+        inputRef.current?.blur()
+        e.preventDefault()
+      }
+    },
+    [inputRef],
+  )
 
-    const onSubtagKeyDown = useCallback(
-      (e: KeyboardEvent) => {
-        if (e.key === KeyboardKey.Enter) {
-          e.preventDefault()
-          subtagInputRef.current?.blur()
-        }
+  useEffect(() => {
+    if (isEditing) {
+      inputRef.current?.focus()
+    }
+  }, [inputRef, isEditing])
+
+  const onSubtagInput = useCallback((e: JSX.TargetedEvent<HTMLInputElement>) => {
+    const value = (e.target as HTMLInputElement).value
+    setSubtagTitle(value)
+  }, [])
+
+  const onSubtagInputBlur = useCallback(() => {
+    tagsState.createSubtagAndAssignParent(tag, subtagTitle).catch(console.error)
+    setSubtagTitle('')
+  }, [subtagTitle, tag, tagsState])
+
+  const onSubtagKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === KeyboardKey.Enter) {
+        e.preventDefault()
+        subtagInputRef.current?.blur()
+      }
+    },
+    [subtagInputRef],
+  )
+
+  useEffect(() => {
+    if (isAddingSubtag) {
+      subtagInputRef.current?.focus()
+    }
+  }, [subtagInputRef, isAddingSubtag])
+
+  const [, dragRef] = useDrag(
+    () => ({
+      type: ItemTypes.TAG,
+      item: { uuid: tag.uuid },
+      canDrag: () => {
+        return true
       },
-      [subtagInputRef],
-    )
-
-    useEffect(() => {
-      if (isAddingSubtag) {
-        subtagInputRef.current?.focus()
-      }
-    }, [subtagInputRef, isAddingSubtag])
-
-    const [, dragRef] = useDrag(
-      () => ({
-        type: ItemTypes.TAG,
-        item: { uuid: tag.uuid },
-        canDrag: () => {
-          return true
-        },
-        collect: (monitor) => ({
-          isDragging: !!monitor.isDragging(),
-        }),
+      collect: (monitor) => ({
+        isDragging: !!monitor.isDragging(),
       }),
-      [tag],
-    )
+    }),
+    [tag],
+  )
 
-    const [{ isOver, canDrop }, dropRef] = useDrop<DropItem, void, DropProps>(
-      () => ({
-        accept: ItemTypes.TAG,
-        canDrop: (item) => {
-          return tagsState.isValidTagParent(tag, item as SNTag)
-        },
-        drop: (item) => {
-          if (!hasFolders) {
-            premiumModal.activate(TAG_FOLDERS_FEATURE_NAME)
-            return
-          }
-          tagsState.assignParent(item.uuid, tag.uuid).catch(console.error)
-        },
-        collect: (monitor) => ({
-          isOver: !!monitor.isOver(),
-          canDrop: !!monitor.canDrop(),
-        }),
+  const [{ isOver, canDrop }, dropRef] = useDrop<DropItem, void, DropProps>(
+    () => ({
+      accept: ItemTypes.TAG,
+      canDrop: (item) => {
+        return tagsState.isValidTagParent(tag, item as SNTag)
+      },
+      drop: (item) => {
+        if (!hasFolders) {
+          premiumModal.activate(TAG_FOLDERS_FEATURE_NAME)
+          return
+        }
+        tagsState.assignParent(item.uuid, tag.uuid).catch(console.error)
+      },
+      collect: (monitor) => ({
+        isOver: !!monitor.isOver(),
+        canDrop: !!monitor.canDrop(),
       }),
-      [tag, tagsState, hasFolders, premiumModal],
-    )
+    }),
+    [tag, tagsState, hasFolders, premiumModal],
+  )
 
-    const readyToDrop = isOver && canDrop
+  const readyToDrop = isOver && canDrop
 
-    const toggleContextMenu = () => {
-      if (!menuButtonRef.current) {
-        return
-      }
-
-      const contextMenuOpen = tagsState.contextMenuOpen
-      const menuButtonRect = menuButtonRef.current?.getBoundingClientRect()
-
-      if (contextMenuOpen) {
-        tagsState.setContextMenuOpen(false)
-      } else {
-        onContextMenu(tag, menuButtonRect.right, menuButtonRect.top)
-      }
+  const toggleContextMenu = () => {
+    if (!menuButtonRef.current) {
+      return
     }
 
-    return (
-      <>
-        <button
-          className={`tag focus:shadow-inner ${isSelected ? 'selected' : ''} ${
-            readyToDrop ? 'is-drag-over' : ''
-          }`}
-          onClick={selectCurrentTag}
-          ref={dragRef}
+    const contextMenuOpen = tagsState.contextMenuOpen
+    const menuButtonRect = menuButtonRef.current?.getBoundingClientRect()
+
+    if (contextMenuOpen) {
+      tagsState.setContextMenuOpen(false)
+    } else {
+      onContextMenu(tag, menuButtonRect.right, menuButtonRect.top)
+    }
+  }
+
+  return (
+    <>
+      <button
+        className={`tag focus:shadow-inner ${isSelected ? 'selected' : ''} ${readyToDrop ? 'is-drag-over' : ''}`}
+        onClick={selectCurrentTag}
+        ref={dragRef}
+        style={{
+          paddingLeft: `${level * PADDING_PER_LEVEL_PX + PADDING_BASE_PX}px`,
+        }}
+        onContextMenu={(e: MouseEvent) => {
+          e.preventDefault()
+          onContextMenu(tag, e.clientX, e.clientY)
+        }}
+      >
+        <div className="tag-info" title={title} ref={dropRef}>
+          {hasAtLeastOneFolder && (
+            <div className="tag-fold-container">
+              <button
+                className={`tag-fold focus:shadow-inner ${showChildren ? 'opened' : 'closed'} ${
+                  !hasChildren ? 'invisible' : ''
+                }`}
+                onClick={hasChildren ? toggleChildren : undefined}
+              >
+                <Icon className={'color-neutral'} type={showChildren ? 'menu-arrow-down-alt' : 'menu-arrow-right'} />
+              </button>
+            </div>
+          )}
+          <div className={'tag-icon draggable mr-1'} ref={dragRef}>
+            <Icon type="hashtag" className={`${isSelected ? 'color-info' : 'color-neutral'}`} />
+          </div>
+          <input
+            className={`title ${isEditing ? 'editing' : ''}`}
+            id={`react-tag-${tag.uuid}`}
+            disabled={!isEditing}
+            onBlur={onBlur}
+            onInput={onInput}
+            value={title}
+            onKeyDown={onKeyDown}
+            spellCheck={false}
+            ref={inputRef}
+          />
+          <div className="flex items-center">
+            <button
+              className={`border-0 mr-2 bg-transparent hover:bg-contrast focus:shadow-inner cursor-pointer ${
+                isSelected ? 'visible' : 'invisible'
+              }`}
+              onClick={toggleContextMenu}
+              ref={menuButtonRef}
+            >
+              <Icon type="more" className="color-neutral" />
+            </button>
+            <div className="count">{noteCounts.get()}</div>
+          </div>
+        </div>
+
+        <div className={`meta ${hasAtLeastOneFolder ? 'with-folders' : ''}`}>
+          {tag.conflictOf && <div className="danger small-text font-bold">Conflicted Copy {tag.conflictOf}</div>}
+        </div>
+      </button>
+      {isAddingSubtag && (
+        <div
+          className="tag overflow-hidden"
           style={{
-            paddingLeft: `${level * PADDING_PER_LEVEL_PX + PADDING_BASE_PX}px`,
-          }}
-          onContextMenu={(e: MouseEvent) => {
-            e.preventDefault()
-            onContextMenu(tag, e.clientX, e.clientY)
+            paddingLeft: `${(level + 1) * PADDING_PER_LEVEL_PX + PADDING_BASE_PX}px`,
           }}
         >
-          <div className="tag-info" title={title} ref={dropRef}>
-            {hasAtLeastOneFolder && (
-              <div className="tag-fold-container">
-                <button
-                  className={`tag-fold focus:shadow-inner ${showChildren ? 'opened' : 'closed'} ${
-                    !hasChildren ? 'invisible' : ''
-                  }`}
-                  onClick={hasChildren ? toggleChildren : undefined}
-                >
-                  <Icon
-                    className={'color-neutral'}
-                    type={showChildren ? 'menu-arrow-down-alt' : 'menu-arrow-right'}
-                  />
-                </button>
-              </div>
-            )}
-            <div className={'tag-icon draggable mr-1'} ref={dragRef}>
-              <Icon type="hashtag" className={`${isSelected ? 'color-info' : 'color-neutral'}`} />
+          <div className="tag-info">
+            <div className="tag-fold" />
+            <div className="tag-icon mr-1">
+              <Icon type="hashtag" className="color-neutral mr-1" />
             </div>
             <input
-              className={`title ${isEditing ? 'editing' : ''}`}
-              id={`react-tag-${tag.uuid}`}
-              disabled={!isEditing}
-              onBlur={onBlur}
-              onInput={onInput}
-              value={title}
-              onKeyDown={onKeyDown}
-              spellCheck={false}
-              ref={inputRef}
+              className="title w-full focus:shadow-none"
+              type="text"
+              ref={subtagInputRef}
+              onBlur={onSubtagInputBlur}
+              onKeyDown={onSubtagKeyDown}
+              value={subtagTitle}
+              onInput={onSubtagInput}
             />
-            <div className="flex items-center">
-              <button
-                className={`border-0 mr-2 bg-transparent hover:bg-contrast focus:shadow-inner cursor-pointer ${
-                  isSelected ? 'visible' : 'invisible'
-                }`}
-                onClick={toggleContextMenu}
-                ref={menuButtonRef}
-              >
-                <Icon type="more" className="color-neutral" />
-              </button>
-              <div className="count">{noteCounts.get()}</div>
-            </div>
           </div>
-
-          <div className={`meta ${hasAtLeastOneFolder ? 'with-folders' : ''}`}>
-            {tag.conflictOf && (
-              <div className="danger small-text font-bold">Conflicted Copy {tag.conflictOf}</div>
-            )}
-          </div>
-        </button>
-        {isAddingSubtag && (
-          <div
-            className="tag overflow-hidden"
-            style={{
-              paddingLeft: `${(level + 1) * PADDING_PER_LEVEL_PX + PADDING_BASE_PX}px`,
-            }}
-          >
-            <div className="tag-info">
-              <div className="tag-fold" />
-              <div className="tag-icon mr-1">
-                <Icon type="hashtag" className="color-neutral mr-1" />
-              </div>
-              <input
-                className="title w-full focus:shadow-none"
-                type="text"
-                ref={subtagInputRef}
-                onBlur={onSubtagInputBlur}
-                onKeyDown={onSubtagKeyDown}
-                value={subtagTitle}
-                onInput={onSubtagInput}
+        </div>
+      )}
+      {showChildren && (
+        <>
+          {childrenTags.map((tag) => {
+            return (
+              <TagsListItem
+                level={level + 1}
+                key={tag.uuid}
+                tag={tag}
+                tagsState={tagsState}
+                features={features}
+                onContextMenu={onContextMenu}
               />
-            </div>
-          </div>
-        )}
-        {showChildren && (
-          <>
-            {childrenTags.map((tag) => {
-              return (
-                <TagsListItem
-                  level={level + 1}
-                  key={tag.uuid}
-                  tag={tag}
-                  tagsState={tagsState}
-                  features={features}
-                  onContextMenu={onContextMenu}
-                />
-              )
-            })}
-          </>
-        )}
-      </>
-    )
-  },
-)
+            )
+          })}
+        </>
+      )}
+    </>
+  )
+})
diff --git a/app/assets/javascripts/Components/Tags/TagsSection.tsx b/app/assets/javascripts/Components/Tags/TagsSection.tsx
index 7b10f7343..2d9aba885 100644
--- a/app/assets/javascripts/Components/Tags/TagsSection.tsx
+++ b/app/assets/javascripts/Components/Tags/TagsSection.tsx
@@ -52,11 +52,7 @@ export const TagsSection: FunctionComponent<Props> = observer(({ appState }) =>
     <section>
       <div className="section-title-bar">
         <div className="section-title-bar-header">
-          <TagsSectionTitle
-            features={appState.features}
-            hasMigration={hasMigration}
-            onClickMigration={runMigration}
-          />
+          <TagsSectionTitle features={appState.features} hasMigration={hasMigration} onClickMigration={runMigration} />
           <TagsSectionAddButton tags={appState.tags} features={appState.features} />
         </div>
       </div>
diff --git a/app/assets/javascripts/Components/Tags/TagsSectionTitle.tsx b/app/assets/javascripts/Components/Tags/TagsSectionTitle.tsx
index 965d9471d..4188fd321 100644
--- a/app/assets/javascripts/Components/Tags/TagsSectionTitle.tsx
+++ b/app/assets/javascripts/Components/Tags/TagsSectionTitle.tsx
@@ -12,41 +12,39 @@ type Props = {
   onClickMigration: () => void
 }
 
-export const TagsSectionTitle: FunctionComponent<Props> = observer(
-  ({ features, hasMigration, onClickMigration }) => {
-    const entitledToFolders = features.hasFolders
-    const modal = usePremiumModal()
+export const TagsSectionTitle: FunctionComponent<Props> = observer(({ features, hasMigration, onClickMigration }) => {
+  const entitledToFolders = features.hasFolders
+  const modal = usePremiumModal()
 
-    const showPremiumAlert = useCallback(() => {
-      modal.activate(TAG_FOLDERS_FEATURE_NAME)
-    }, [modal])
-
-    if (entitledToFolders) {
-      return (
-        <>
-          <div className="sk-h3 title">
-            <span className="sk-bold">Folders</span>
-            {hasMigration && (
-              <label className="ml-1 sk-bold color-info cursor-pointer" onClick={onClickMigration}>
-                Migration Available
-              </label>
-            )}
-          </div>
-        </>
-      )
-    }
+  const showPremiumAlert = useCallback(() => {
+    modal.activate(TAG_FOLDERS_FEATURE_NAME)
+  }, [modal])
 
+  if (entitledToFolders) {
     return (
       <>
         <div className="sk-h3 title">
-          <span className="sk-bold">Tags</span>
-          <Tooltip label={TAG_FOLDERS_FEATURE_TOOLTIP}>
-            <label className="ml-1 sk-bold color-grey-2 cursor-pointer" onClick={showPremiumAlert}>
-              Folders
+          <span className="sk-bold">Folders</span>
+          {hasMigration && (
+            <label className="ml-1 sk-bold color-info cursor-pointer" onClick={onClickMigration}>
+              Migration Available
             </label>
-          </Tooltip>
+          )}
         </div>
       </>
     )
-  },
-)
+  }
+
+  return (
+    <>
+      <div className="sk-h3 title">
+        <span className="sk-bold">Tags</span>
+        <Tooltip label={TAG_FOLDERS_FEATURE_TOOLTIP}>
+          <label className="ml-1 sk-bold color-grey-2 cursor-pointer" onClick={showPremiumAlert}>
+            Folders
+          </label>
+        </Tooltip>
+      </div>
+    </>
+  )
+})
diff --git a/app/assets/javascripts/Hooks/useCloseOnClickOutside.ts b/app/assets/javascripts/Hooks/useCloseOnClickOutside.ts
index 6129c8fa2..b9b86c562 100644
--- a/app/assets/javascripts/Hooks/useCloseOnClickOutside.ts
+++ b/app/assets/javascripts/Hooks/useCloseOnClickOutside.ts
@@ -1,9 +1,6 @@
 import { useCallback, useEffect } from 'preact/hooks'
 
-export function useCloseOnClickOutside(
-  container: { current: HTMLDivElement | null },
-  callback: () => void,
-): void {
+export function useCloseOnClickOutside(container: { current: HTMLDivElement | null }, callback: () => void): void {
   const closeOnClickOutside = useCallback(
     (event: { target: EventTarget | null }) => {
       if (!container.current) {
diff --git a/app/assets/javascripts/Hooks/useListKeyboardNavigation.ts b/app/assets/javascripts/Hooks/useListKeyboardNavigation.ts
index 648dccbc7..7f9945b3c 100644
--- a/app/assets/javascripts/Hooks/useListKeyboardNavigation.ts
+++ b/app/assets/javascripts/Hooks/useListKeyboardNavigation.ts
@@ -34,11 +34,7 @@ export const useListKeyboardNavigation = (container: Ref<HTMLElement | null>, in
       }
 
       if (!listItems?.length) {
-        setListItems(
-          Array.from(
-            container.current?.querySelectorAll('button') as NodeListOf<HTMLButtonElement>,
-          ),
-        )
+        setListItems(Array.from(container.current?.querySelectorAll('button') as NodeListOf<HTMLButtonElement>))
       }
 
       if (listItems) {
@@ -67,15 +63,11 @@ export const useListKeyboardNavigation = (container: Ref<HTMLElement | null>, in
   const containerFocusHandler = useCallback(() => {
     let temporaryItems = listItems && listItems?.length > 0 ? listItems : []
     if (!temporaryItems.length) {
-      temporaryItems = Array.from(
-        container.current?.querySelectorAll('button') as NodeListOf<HTMLButtonElement>,
-      )
+      temporaryItems = Array.from(container.current?.querySelectorAll('button') as NodeListOf<HTMLButtonElement>)
       setListItems(temporaryItems)
     }
     if (temporaryItems.length > 0) {
-      const selectedItemIndex = Array.from(temporaryItems).findIndex(
-        (item) => item.dataset.selected,
-      )
+      const selectedItemIndex = Array.from(temporaryItems).findIndex((item) => item.dataset.selected)
       const indexToFocus = selectedItemIndex > -1 ? selectedItemIndex : initialFocus
       setTimeout(() => {
         focusItemWithIndex(indexToFocus, temporaryItems)
diff --git a/app/assets/javascripts/Hooks/usePremiumModal.tsx b/app/assets/javascripts/Hooks/usePremiumModal.tsx
index d58755289..b817e63b4 100644
--- a/app/assets/javascripts/Hooks/usePremiumModal.tsx
+++ b/app/assets/javascripts/Hooks/usePremiumModal.tsx
@@ -29,33 +29,31 @@ interface Props {
   appState: AppState
 }
 
-export const PremiumModalProvider: FunctionalComponent<Props> = observer(
-  ({ application, appState, children }) => {
-    const featureName = appState.features.premiumAlertFeatureName
-    const activate = appState.features.showPremiumAlert
-    const close = appState.features.closePremiumAlert
+export const PremiumModalProvider: FunctionalComponent<Props> = observer(({ application, appState, children }) => {
+  const featureName = appState.features.premiumAlertFeatureName
+  const activate = appState.features.showPremiumAlert
+  const close = appState.features.closePremiumAlert
 
-    const showModal = !!featureName
+  const showModal = !!featureName
 
-    const hasSubscription = Boolean(
-      appState.subscription.userSubscription &&
-        !appState.subscription.isUserSubscriptionExpired &&
-        !appState.subscription.isUserSubscriptionCanceled,
-    )
+  const hasSubscription = Boolean(
+    appState.subscription.userSubscription &&
+      !appState.subscription.isUserSubscriptionExpired &&
+      !appState.subscription.isUserSubscriptionCanceled,
+  )
 
-    return (
-      <>
-        {showModal && (
-          <PremiumFeaturesModal
-            application={application}
-            featureName={featureName}
-            hasSubscription={hasSubscription}
-            onClose={close}
-            showModal={!!featureName}
-          />
-        )}
-        <PremiumModalProvider_ value={{ activate }}>{children}</PremiumModalProvider_>
-      </>
-    )
-  },
-)
+  return (
+    <>
+      {showModal && (
+        <PremiumFeaturesModal
+          application={application}
+          featureName={featureName}
+          hasSubscription={hasSubscription}
+          onClose={close}
+          showModal={!!featureName}
+        />
+      )}
+      <PremiumModalProvider_ value={{ activate }}>{children}</PremiumModalProvider_>
+    </>
+  )
+})
diff --git a/app/assets/javascripts/Services/ArchiveManager.ts b/app/assets/javascripts/Services/ArchiveManager.ts
index f3762c97c..09a4f52fc 100644
--- a/app/assets/javascripts/Services/ArchiveManager.ts
+++ b/app/assets/javascripts/Services/ArchiveManager.ts
@@ -52,10 +52,7 @@ export class ArchiveManager {
     })
 
     if (encrypted) {
-      this.downloadData(
-        blobData,
-        `Standard Notes Encrypted Backup and Import File - ${this.formattedDate()}.txt`,
-      )
+      this.downloadData(blobData, `Standard Notes Encrypted Backup and Import File - ${this.formattedDate()}.txt`)
     } else {
       this.downloadZippedDecryptedItems(data).catch(console.error)
     }
@@ -103,8 +100,7 @@ export class ArchiveManager {
 
       const blob = new Blob([contents], { type: 'text/plain' })
       const fileName =
-        `Items/${sanitizeFileName(item.content_type)}/` +
-        zippableFileName(name, `-${item.uuid.split('-')[0]}`)
+        `Items/${sanitizeFileName(item.content_type)}/` + zippableFileName(name, `-${item.uuid.split('-')[0]}`)
       await zipWriter.add(fileName, new zip.BlobReader(blob))
 
       index++
diff --git a/app/assets/javascripts/Services/ThemeManager.ts b/app/assets/javascripts/Services/ThemeManager.ts
index b3fd59ad7..ac86eab41 100644
--- a/app/assets/javascripts/Services/ThemeManager.ts
+++ b/app/assets/javascripts/Services/ThemeManager.ts
@@ -42,9 +42,7 @@ export class ThemeManager extends ApplicationService {
       case ApplicationEvent.SignedOut: {
         this.deactivateAllThemes()
         this.activeThemes = []
-        this.application
-          ?.removeValue(CachedThemesKey, StorageValueModes.Nonwrapped)
-          .catch(console.error)
+        this.application?.removeValue(CachedThemesKey, StorageValueModes.Nonwrapped).catch(console.error)
         break
       }
       case ApplicationEvent.StorageReady: {
@@ -56,9 +54,7 @@ export class ThemeManager extends ApplicationService {
         break
       }
       case ApplicationEvent.Launched: {
-        window
-          .matchMedia('(prefers-color-scheme: dark)')
-          .addEventListener('change', this.colorSchemeEventHandler)
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this.colorSchemeEventHandler)
         break
       }
       case ApplicationEvent.PreferencesChanged: {
@@ -69,10 +65,7 @@ export class ThemeManager extends ApplicationService {
   }
 
   private handlePreferencesChangeEvent(): void {
-    const useDeviceThemeSettings = this.application.getPreference(
-      PrefKey.UseSystemColorScheme,
-      false,
-    )
+    const useDeviceThemeSettings = this.application.getPreference(PrefKey.UseSystemColorScheme, false)
 
     if (useDeviceThemeSettings !== this.lastUseDeviceThemeSettings) {
       this.lastUseDeviceThemeSettings = useDeviceThemeSettings
@@ -97,9 +90,7 @@ export class ThemeManager extends ApplicationService {
     ;(this.unregisterDesktop as unknown) = undefined
     ;(this.unregisterStream as unknown) = undefined
 
-    window
-      .matchMedia('(prefers-color-scheme: dark)')
-      .removeEventListener('change', this.colorSchemeEventHandler)
+    window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', this.colorSchemeEventHandler)
     super.deinit()
   }
 
@@ -172,19 +163,14 @@ export class ThemeManager extends ApplicationService {
   }
 
   private setThemeAsPerColorScheme(prefersDarkColorScheme: boolean) {
-    const preference = prefersDarkColorScheme
-      ? PrefKey.AutoDarkThemeIdentifier
-      : PrefKey.AutoLightThemeIdentifier
+    const preference = prefersDarkColorScheme ? PrefKey.AutoDarkThemeIdentifier : PrefKey.AutoLightThemeIdentifier
 
     const themes = this.application.items.getDisplayableItems(ContentType.Theme) as SNTheme[]
 
     const activeTheme = themes.find((theme) => theme.active && !theme.isLayerable())
     const activeThemeIdentifier = activeTheme ? activeTheme.identifier : DefaultThemeIdentifier
 
-    const themeIdentifier = this.application.getPreference(
-      preference,
-      DefaultThemeIdentifier,
-    ) as string
+    const themeIdentifier = this.application.getPreference(preference, DefaultThemeIdentifier) as string
 
     const setTheme = () => {
       if (themeIdentifier === DefaultThemeIdentifier && activeTheme) {
@@ -212,35 +198,30 @@ export class ThemeManager extends ApplicationService {
   }
 
   private registerObservers() {
-    this.unregisterDesktop = this.webApplication
-      .getDesktopService()
-      ?.registerUpdateObserver((component) => {
-        if (component.active && component.isTheme()) {
-          this.deactivateTheme(component.uuid)
-          setTimeout(() => {
-            this.activateTheme(component as SNTheme)
-            this.cacheThemeState().catch(console.error)
-          }, 10)
-        }
-      })
-
-    this.unregisterStream = this.application.streamItems(
-      ContentType.Theme,
-      ({ changed, inserted, source }) => {
-        const items = changed.concat(inserted)
-        const themes = items as SNTheme[]
-        for (const theme of themes) {
-          if (theme.active) {
-            this.activateTheme(theme)
-          } else {
-            this.deactivateTheme(theme.uuid)
-          }
-        }
-        if (source !== PayloadEmitSource.LocalRetrieved) {
+    this.unregisterDesktop = this.webApplication.getDesktopService()?.registerUpdateObserver((component) => {
+      if (component.active && component.isTheme()) {
+        this.deactivateTheme(component.uuid)
+        setTimeout(() => {
+          this.activateTheme(component as SNTheme)
           this.cacheThemeState().catch(console.error)
+        }, 10)
+      }
+    })
+
+    this.unregisterStream = this.application.streamItems(ContentType.Theme, ({ changed, inserted, source }) => {
+      const items = changed.concat(inserted)
+      const themes = items as SNTheme[]
+      for (const theme of themes) {
+        if (theme.active) {
+          this.activateTheme(theme)
+        } else {
+          this.deactivateTheme(theme.uuid)
         }
-      },
-    )
+      }
+      if (source !== PayloadEmitSource.LocalRetrieved) {
+        this.cacheThemeState().catch(console.error)
+      }
+    })
   }
 
   public deactivateAllThemes() {
diff --git a/app/assets/javascripts/Strings.ts b/app/assets/javascripts/Strings.ts
index b88385e51..5cdbf2f28 100644
--- a/app/assets/javascripts/Strings.ts
+++ b/app/assets/javascripts/Strings.ts
@@ -61,18 +61,13 @@ export const STRING_LOCAL_ENC_ENABLED =
 export const STRING_ENC_NOT_ENABLED =
   'Encryption is not enabled. Sign in, register, or add a passcode lock to enable encryption.'
 export const STRING_IMPORT_SUCCESS = 'Your data has been successfully imported.'
-export const STRING_REMOVE_PASSCODE_CONFIRMATION =
-  'Are you sure you want to remove your application passcode?'
-export const STRING_REMOVE_PASSCODE_OFFLINE_ADDENDUM =
-  ' This will remove encryption from your local data.'
-export const STRING_NON_MATCHING_PASSCODES =
-  'The two passcodes you entered do not match. Please try again.'
-export const STRING_NON_MATCHING_PASSWORDS =
-  'The two passwords you entered do not match. Please try again.'
+export const STRING_REMOVE_PASSCODE_CONFIRMATION = 'Are you sure you want to remove your application passcode?'
+export const STRING_REMOVE_PASSCODE_OFFLINE_ADDENDUM = ' This will remove encryption from your local data.'
+export const STRING_NON_MATCHING_PASSCODES = 'The two passcodes you entered do not match. Please try again.'
+export const STRING_NON_MATCHING_PASSWORDS = 'The two passwords you entered do not match. Please try again.'
 export const STRING_GENERATING_LOGIN_KEYS = 'Generating Login Keys...'
 export const STRING_GENERATING_REGISTER_KEYS = 'Generating Account Keys...'
-export const STRING_INVALID_IMPORT_FILE =
-  'Unable to open file. Ensure it is a proper JSON file and try again.'
+export const STRING_INVALID_IMPORT_FILE = 'Unable to open file. Ensure it is a proper JSON file and try again.'
 export const STRING_IMPORTING_ZIP_FILE =
   'The file you selected is not a valid backup file. Please extract the contents of the zip file, then upload the contained .txt file.'
 export function StringImportError(errorCount: number) {
@@ -86,16 +81,13 @@ export const STRING_FAILED_PASSWORD_CHANGE =
   'There was an error re-encrypting your items. Your password was changed, but not all your items were properly re-encrypted and synced. You should try syncing again. If all else fails, you should restore your notes from backup.'
 
 export const STRING_CONFIRM_APP_QUIT_DURING_UPGRADE =
-  'The encryption upgrade is in progress. You may lose data if you quit the app. ' +
-  'Are you sure you want to quit?'
+  'The encryption upgrade is in progress. You may lose data if you quit the app. ' + 'Are you sure you want to quit?'
 
 export const STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_CHANGE =
-  'A passcode change is in progress. You may lose data if you quit the app. ' +
-  'Are you sure you want to quit?'
+  'A passcode change is in progress. You may lose data if you quit the app. ' + 'Are you sure you want to quit?'
 
 export const STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_REMOVAL =
-  'A passcode removal is in progress. You may lose data if you quit the app. ' +
-  'Are you sure you want to quit?'
+  'A passcode removal is in progress. You may lose data if you quit the app. ' + 'Are you sure you want to quit?'
 
 export const STRING_UPGRADE_ACCOUNT_CONFIRM_TITLE = 'Encryption upgrade available'
 export const STRING_UPGRADE_ACCOUNT_CONFIRM_TEXT =
@@ -105,8 +97,7 @@ export const STRING_UPGRADE_ACCOUNT_CONFIRM_TEXT =
   '<a href="https://standardnotes.com/help/security" target="_blank">Security Upgrade page.</a>'
 export const STRING_UPGRADE_ACCOUNT_CONFIRM_BUTTON = 'Upgrade'
 
-export const STRING_REMOVE_OFFLINE_KEY_CONFIRMATION =
-  'This will delete the previously saved offline key.'
+export const STRING_REMOVE_OFFLINE_KEY_CONFIRMATION = 'This will delete the previously saved offline key.'
 
 export const STRING_FAILED_TO_UPDATE_USER_SETTING =
   'There was an error while trying to update your settings. Please try again.'
diff --git a/app/assets/javascripts/UIModels/AppState/AppState.ts b/app/assets/javascripts/UIModels/AppState/AppState.ts
index 0697efaff..b05455041 100644
--- a/app/assets/javascripts/UIModels/AppState/AppState.ts
+++ b/app/assets/javascripts/UIModels/AppState/AppState.ts
@@ -208,14 +208,9 @@ export class AppState {
 
     const selectedTag = this.selectedTag
 
-    const activeRegularTagUuid =
-      selectedTag && selectedTag instanceof SNTag ? selectedTag.uuid : undefined
+    const activeRegularTagUuid = selectedTag && selectedTag instanceof SNTag ? selectedTag.uuid : undefined
 
-    await this.application.noteControllerGroup.createNoteView(
-      undefined,
-      title,
-      activeRegularTagUuid,
-    )
+    await this.application.noteControllerGroup.createNoteView(undefined, title, activeRegularTagUuid)
   }
 
   getActiveNoteController() {
@@ -304,9 +299,7 @@ export class AppState {
           }
         }
 
-        const changedOrInserted = [...changed, ...inserted].filter(
-          (i) => i.content_type === ContentType.Note,
-        )
+        const changedOrInserted = [...changed, ...inserted].filter((i) => i.content_type === ContentType.Note)
 
         const selectedTag = this.tags.selected
 
diff --git a/app/assets/javascripts/UIModels/AppState/NoAccountWarningState.ts b/app/assets/javascripts/UIModels/AppState/NoAccountWarningState.ts
index a0725211d..183b41309 100644
--- a/app/assets/javascripts/UIModels/AppState/NoAccountWarningState.ts
+++ b/app/assets/javascripts/UIModels/AppState/NoAccountWarningState.ts
@@ -5,9 +5,7 @@ import { runInAction, makeObservable, observable, action } from 'mobx'
 export class NoAccountWarningState {
   show: boolean
   constructor(application: SNApplication, appObservers: (() => void)[]) {
-    this.show = application.hasAccount()
-      ? false
-      : storage.get(StorageKey.ShowNoAccountWarning) ?? true
+    this.show = application.hasAccount() ? false : storage.get(StorageKey.ShowNoAccountWarning) ?? true
 
     appObservers.push(
       application.addEventObserver(async () => {
diff --git a/app/assets/javascripts/UIModels/AppState/NoteTagsState.ts b/app/assets/javascripts/UIModels/AppState/NoteTagsState.ts
index a776dedfb..7daba47b4 100644
--- a/app/assets/javascripts/UIModels/AppState/NoteTagsState.ts
+++ b/app/assets/javascripts/UIModels/AppState/NoteTagsState.ts
@@ -1,12 +1,5 @@
 import { ElementIds } from '@/ElementIDs'
-import {
-  ApplicationEvent,
-  ContentType,
-  PrefKey,
-  SNNote,
-  SNTag,
-  UuidString,
-} from '@standardnotes/snjs'
+import { ApplicationEvent, ContentType, PrefKey, SNNote, SNTag, UuidString } from '@standardnotes/snjs'
 import { action, computed, makeObservable, observable } from 'mobx'
 import { WebApplication } from '../Application'
 import { AppState } from './AppState'
@@ -22,11 +15,7 @@ export class NoteTagsState {
   tagsContainerMaxWidth: number | 'auto' = 0
   addNoteToParentFolders: boolean
 
-  constructor(
-    private application: WebApplication,
-    private appState: AppState,
-    appEventListeners: (() => void)[],
-  ) {
+  constructor(private application: WebApplication, private appState: AppState, appEventListeners: (() => void)[]) {
     makeObservable(this, {
       autocompleteInputFocused: observable,
       autocompleteSearchQuery: observable,
@@ -56,10 +45,7 @@ export class NoteTagsState {
         this.reloadTags()
       }),
       application.addSingleEventObserver(ApplicationEvent.PreferencesChanged, async () => {
-        this.addNoteToParentFolders = application.getPreference(
-          PrefKey.NoteAddToParentFolders,
-          true,
-        )
+        this.addNoteToParentFolders = application.getPreference(PrefKey.NoteAddToParentFolders, true)
       }),
     )
   }
@@ -71,9 +57,7 @@ export class NoteTagsState {
   get autocompleteTagHintVisible(): boolean {
     return (
       this.autocompleteSearchQuery !== '' &&
-      !this.autocompleteTagResults.some(
-        (tagResult) => tagResult.title === this.autocompleteSearchQuery,
-      )
+      !this.autocompleteTagResults.some((tagResult) => tagResult.title === this.autocompleteSearchQuery)
     )
   }
 
@@ -146,20 +130,14 @@ export class NoteTagsState {
 
   focusPreviousTagResult(tagResult: SNTag): void {
     const previousTagResultIndex = this.getTagIndex(tagResult, this.autocompleteTagResults) - 1
-    if (
-      previousTagResultIndex > -1 &&
-      this.autocompleteTagResults.length > previousTagResultIndex
-    ) {
+    if (previousTagResultIndex > -1 && this.autocompleteTagResults.length > previousTagResultIndex) {
       const previousTagResult = this.autocompleteTagResults[previousTagResultIndex]
       this.setFocusedTagResultUuid(previousTagResult.uuid)
     }
   }
 
   searchActiveNoteAutocompleteTags(): void {
-    const newResults = this.application.items.searchTags(
-      this.autocompleteSearchQuery,
-      this.activeNote,
-    )
+    const newResults = this.application.items.searchTags(this.autocompleteSearchQuery, this.activeNote)
     this.setAutocompleteTagResults(newResults)
   }
 
diff --git a/app/assets/javascripts/UIModels/AppState/NotesState.ts b/app/assets/javascripts/UIModels/AppState/NotesState.ts
index d85a45c48..7ab1ce379 100644
--- a/app/assets/javascripts/UIModels/AppState/NotesState.ts
+++ b/app/assets/javascripts/UIModels/AppState/NotesState.ts
@@ -85,9 +85,7 @@ export class NotesState {
   private async selectNotesRange(selectedNote: SNNote): Promise<void> {
     const notes = this.application.items.getDisplayableNotes()
 
-    const lastSelectedNoteIndex = notes.findIndex(
-      (note) => note.uuid == this.lastSelectedNote?.uuid,
-    )
+    const lastSelectedNoteIndex = notes.findIndex((note) => note.uuid == this.lastSelectedNote?.uuid)
     const selectedNoteIndex = notes.findIndex((note) => note.uuid == selectedNote.uuid)
 
     let notesToSelect = []
@@ -351,9 +349,7 @@ export class NotesState {
   }
 
   getSpellcheckStateForNote(note: SNNote) {
-    return note.spellcheck != undefined
-      ? note.spellcheck
-      : this.appState.isGlobalSpellcheckEnabled()
+    return note.spellcheck != undefined ? note.spellcheck : this.appState.isGlobalSpellcheckEnabled()
   }
 
   async toggleGlobalSpellcheckForNote(note: SNNote) {
@@ -395,9 +391,7 @@ export class NotesState {
 
   isTagInSelectedNotes(tag: SNTag): boolean {
     const selectedNotes = Object.values(this.selectedNotes)
-    return selectedNotes.every((note) =>
-      this.appState.getNoteTags(note).find((noteTag) => noteTag.uuid === tag.uuid),
-    )
+    return selectedNotes.every((note) => this.appState.getNoteTags(note).find((noteTag) => noteTag.uuid === tag.uuid))
   }
 
   setShowProtectedWarning(show: boolean): void {
diff --git a/app/assets/javascripts/UIModels/AppState/NotesViewState.ts b/app/assets/javascripts/UIModels/AppState/NotesViewState.ts
index e3ec77235..88e661b40 100644
--- a/app/assets/javascripts/UIModels/AppState/NotesViewState.ts
+++ b/app/assets/javascripts/UIModels/AppState/NotesViewState.ts
@@ -59,11 +59,7 @@ export class NotesViewState {
     hideEditorIcon: false,
   }
 
-  constructor(
-    private application: WebApplication,
-    private appState: AppState,
-    appObservers: (() => void)[],
-  ) {
+  constructor(private application: WebApplication, private appState: AppState, appObservers: (() => void)[]) {
     this.resetPagination()
 
     appObservers.push(
@@ -78,11 +74,7 @@ export class NotesViewState {
               this.appState.selectedTag instanceof SmartView &&
               this.appState.selectedTag?.uuid === SystemViewId.TrashedNotes
 
-            if (
-              activeNote.trashed &&
-              !browsingTrashedNotes &&
-              !this.appState?.searchOptions.includeTrashed
-            ) {
+            if (activeNote.trashed && !browsingTrashedNotes && !this.appState?.searchOptions.includeTrashed) {
               this.selectNextOrCreateNew()
             } else if (!this.selectedNotes[activeNote.uuid]) {
               this.selectNote(activeNote).catch(console.error)
@@ -99,10 +91,7 @@ export class NotesViewState {
         this.reloadNotesDisplayOptions()
         this.reloadNotes()
 
-        if (
-          this.appState.selectedTag &&
-          findInArray(tags, 'uuid', this.appState.selectedTag.uuid)
-        ) {
+        if (this.appState.selectedTag && findInArray(tags, 'uuid', this.appState.selectedTag.uuid)) {
           /** Tag title could have changed */
           this.reloadPanelTitle()
         }
@@ -271,33 +260,15 @@ export class NotesViewState {
       sortBy = CollectionSort.UpdatedAt
     }
     freshDisplayOptions.sortBy = sortBy
-    freshDisplayOptions.sortReverse = this.application.getPreference(
-      PrefKey.SortNotesReverse,
-      false,
-    )
-    freshDisplayOptions.showArchived = this.application.getPreference(
-      PrefKey.NotesShowArchived,
-      false,
-    )
-    freshDisplayOptions.showTrashed = this.application.getPreference(
-      PrefKey.NotesShowTrashed,
-      false,
-    ) as boolean
+    freshDisplayOptions.sortReverse = this.application.getPreference(PrefKey.SortNotesReverse, false)
+    freshDisplayOptions.showArchived = this.application.getPreference(PrefKey.NotesShowArchived, false)
+    freshDisplayOptions.showTrashed = this.application.getPreference(PrefKey.NotesShowTrashed, false) as boolean
     freshDisplayOptions.hidePinned = this.application.getPreference(PrefKey.NotesHidePinned, false)
-    freshDisplayOptions.hideProtected = this.application.getPreference(
-      PrefKey.NotesHideProtected,
-      false,
-    )
-    freshDisplayOptions.hideNotePreview = this.application.getPreference(
-      PrefKey.NotesHideNotePreview,
-      false,
-    )
+    freshDisplayOptions.hideProtected = this.application.getPreference(PrefKey.NotesHideProtected, false)
+    freshDisplayOptions.hideNotePreview = this.application.getPreference(PrefKey.NotesHideNotePreview, false)
     freshDisplayOptions.hideDate = this.application.getPreference(PrefKey.NotesHideDate, false)
     freshDisplayOptions.hideTags = this.application.getPreference(PrefKey.NotesHideTags, true)
-    freshDisplayOptions.hideEditorIcon = this.application.getPreference(
-      PrefKey.NotesHideEditorIcon,
-      false,
-    )
+    freshDisplayOptions.hideEditorIcon = this.application.getPreference(PrefKey.NotesHideEditorIcon, false)
     const displayOptionsChanged =
       freshDisplayOptions.sortBy !== this.displayOptions.sortBy ||
       freshDisplayOptions.sortReverse !== this.displayOptions.sortReverse ||
@@ -339,11 +310,7 @@ export class NotesViewState {
 
   createPlaceholderNote = () => {
     const selectedTag = this.appState.selectedTag
-    if (
-      selectedTag &&
-      selectedTag instanceof SmartView &&
-      selectedTag.uuid !== SystemViewId.AllNotes
-    ) {
+    if (selectedTag && selectedTag instanceof SmartView && selectedTag.uuid !== SystemViewId.AllNotes) {
       return
     }
     return this.createNewNote()
@@ -405,11 +372,7 @@ export class NotesViewState {
     return document.getElementById(ELEMENT_ID_SCROLL_CONTAINER)
   }
 
-  selectNote = async (
-    note: SNNote,
-    userTriggered?: boolean,
-    scrollIntoView = true,
-  ): Promise<void> => {
+  selectNote = async (note: SNNote, userTriggered?: boolean, scrollIntoView = true): Promise<void> => {
     await this.appState.notes.selectNote(note.uuid, userTriggered)
     if (scrollIntoView) {
       const noteElement = document.getElementById(`note-${note.uuid}`)
diff --git a/app/assets/javascripts/UIModels/AppState/SubscriptionState.ts b/app/assets/javascripts/UIModels/AppState/SubscriptionState.ts
index 2a16df98b..f6fa5b6b6 100644
--- a/app/assets/javascripts/UIModels/AppState/SubscriptionState.ts
+++ b/app/assets/javascripts/UIModels/AppState/SubscriptionState.ts
@@ -1,8 +1,4 @@
-import {
-  ApplicationEvent,
-  ClientDisplayableError,
-  convertTimestampToMilliseconds,
-} from '@standardnotes/snjs'
+import { ApplicationEvent, ClientDisplayableError, convertTimestampToMilliseconds } from '@standardnotes/snjs'
 import { action, computed, makeObservable, observable } from 'mobx'
 import { WebApplication } from '../Application'
 
diff --git a/app/assets/javascripts/Utils/CalculateDifferenceBetweenDatesInDays.ts b/app/assets/javascripts/Utils/CalculateDifferenceBetweenDatesInDays.ts
index c7a6b3ed2..47c5e5173 100644
--- a/app/assets/javascripts/Utils/CalculateDifferenceBetweenDatesInDays.ts
+++ b/app/assets/javascripts/Utils/CalculateDifferenceBetweenDatesInDays.ts
@@ -1,19 +1,9 @@
 import { MILLISECONDS_IN_A_DAY } from '@/Constants'
 
 export const calculateDifferenceBetweenDatesInDays = (firstDate: Date, secondDate: Date) => {
-  const firstDateAsUTCMilliseconds = Date.UTC(
-    firstDate.getFullYear(),
-    firstDate.getMonth(),
-    firstDate.getDate(),
-  )
+  const firstDateAsUTCMilliseconds = Date.UTC(firstDate.getFullYear(), firstDate.getMonth(), firstDate.getDate())
 
-  const secondDateAsUTCMilliseconds = Date.UTC(
-    secondDate.getFullYear(),
-    secondDate.getMonth(),
-    secondDate.getDate(),
-  )
+  const secondDateAsUTCMilliseconds = Date.UTC(secondDate.getFullYear(), secondDate.getMonth(), secondDate.getDate())
 
-  return Math.round(
-    (firstDateAsUTCMilliseconds - secondDateAsUTCMilliseconds) / MILLISECONDS_IN_A_DAY,
-  )
+  return Math.round((firstDateAsUTCMilliseconds - secondDateAsUTCMilliseconds) / MILLISECONDS_IN_A_DAY)
 }
diff --git a/app/assets/javascripts/Utils/StringUtils.ts b/app/assets/javascripts/Utils/StringUtils.ts
index 8b93649e8..bb589944b 100644
--- a/app/assets/javascripts/Utils/StringUtils.ts
+++ b/app/assets/javascripts/Utils/StringUtils.ts
@@ -6,9 +6,7 @@ export const splitRangeWithinString = (string: string, start: number, end: numbe
   if (isStartOutOfBounds || isEndOutOfBounds || isInvalidRange) {
     return [string]
   } else {
-    return [string.slice(0, start), string.slice(start, end), string.slice(end)].filter(
-      (slice) => slice.length > 0,
-    )
+    return [string.slice(0, start), string.slice(start, end), string.slice(end)].filter((slice) => slice.length > 0)
   }
 }
 

From c7e849ac9089442ca2ec3e1189d02331c7325e3a Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Wed, 4 May 2022 14:01:53 +0530
Subject: [PATCH 061/102] fix: modifier-only key observers not working (#1009)

---
 app/assets/javascripts/Services/IOService.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/Services/IOService.ts b/app/assets/javascripts/Services/IOService.ts
index 9ee0660ba..9190ef9f9 100644
--- a/app/assets/javascripts/Services/IOService.ts
+++ b/app/assets/javascripts/Services/IOService.ts
@@ -142,7 +142,7 @@ export class IOService {
 
   private eventMatchesKeyAndModifiers(
     event: KeyboardEvent,
-    key: KeyboardKey | string,
+    key: KeyboardKey | string | undefined,
     modifiers: KeyboardModifier[] = [],
   ): boolean {
     const eventModifiers = this.modifiersForEvent(event)
@@ -186,7 +186,7 @@ export class IOService {
         continue
       }
 
-      if (observer.key && this.eventMatchesKeyAndModifiers(event, observer.key, observer.modifiers)) {
+      if (this.eventMatchesKeyAndModifiers(event, observer.key, observer.modifiers)) {
         const callback = keyEvent === KeyboardKeyEvent.Down ? observer.onKeyDown : observer.onKeyUp
         if (callback) {
           callback(event)

From bb4fd2449af61f161683afa0af5d0c3ae178f0a1 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Wed, 4 May 2022 21:03:39 +0530
Subject: [PATCH 062/102] fix: exception when selected note is deleted
 permanently (#1010)

---
 .../AttachedFilesButton.tsx                   | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
index b4ced4d06..08ab451d0 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
@@ -8,7 +8,7 @@ import { FunctionComponent } from 'preact'
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { Icon } from '@/Components/Icon'
 import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
-import { ChallengeReason, CollectionSort, ContentType, SNFile } from '@standardnotes/snjs'
+import { ChallengeReason, CollectionSort, ContentType, SNFile, SNNote } from '@standardnotes/snjs'
 import { confirmDialog } from '@/Services/AlertService'
 import { addToast, dismissToast, ToastType } from '@standardnotes/stylekit'
 import { StreamingFileReader } from '@standardnotes/filepicker'
@@ -46,7 +46,7 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
     const premiumModal = usePremiumModal()
     const filePreviewModal = useFilePreviewModal()
 
-    const note = Object.values(appState.notes.selectedNotes)[0]
+    const note: SNNote | undefined = Object.values(appState.notes.selectedNotes)[0]
 
     const [open, setOpen] = useState(false)
     const [position, setPosition] = useState({
@@ -69,7 +69,9 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
 
       const unregisterFileStream = application.streamItems(ContentType.File, () => {
         setAllFiles(application.items.getDisplayableItems<SNFile>(ContentType.File))
-        setAttachedFiles(application.items.getFilesForNote(note))
+        if (note) {
+          setAttachedFiles(application.items.getFilesForNote(note))
+        }
       })
 
       return () => {
@@ -132,12 +134,27 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
 
     const attachFileToNote = useCallback(
       async (file: SNFile) => {
+        if (!note) {
+          addToast({
+            type: ToastType.Error,
+            message: 'Could not attach file because selected note was deleted',
+          })
+          return
+        }
+
         await application.items.associateFileWithNote(file, note)
       },
       [application.items, note],
     )
 
     const detachFileFromNote = async (file: SNFile) => {
+      if (!note) {
+        addToast({
+          type: ToastType.Error,
+          message: 'Could not attach file because selected note was deleted',
+        })
+        return
+      }
       await application.items.disassociateFileWithNote(file, note)
     }
 

From 2c807e2b8022e9b117d4bb8634dfb76767d16d20 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Thu, 5 May 2022 19:45:39 +0530
Subject: [PATCH 063/102] feat: show download progress in file preview modal
 (#1011)

---
 .../Components/Files/FilePreviewModal.tsx     | 21 ++++++++++++++++---
 .../UIModels/AppState/FilesState.ts           | 11 ++++------
 config/application.rb                         |  2 +-
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/Components/Files/FilePreviewModal.tsx b/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
index 18abf9dd6..9d66ff812 100644
--- a/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
+++ b/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
@@ -2,7 +2,7 @@ import { WebApplication } from '@/UIModels/Application'
 import { concatenateUint8Arrays } from '@/Utils/ConcatenateUint8Arrays'
 import { DialogContent, DialogOverlay } from '@reach/dialog'
 import { SNFile } from '@standardnotes/snjs'
-import { NoPreviewIllustration } from '@standardnotes/stylekit'
+import { addToast, NoPreviewIllustration, ToastType } from '@standardnotes/stylekit'
 import { FunctionComponent } from 'preact'
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { getFileIconComponent } from '@/Components/AttachedFilesPopover/PopoverFileItem'
@@ -28,6 +28,7 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, files,
   const [objectUrl, setObjectUrl] = useState<string>()
   const [isFilePreviewable, setIsFilePreviewable] = useState(false)
   const [isLoadingFile, setIsLoadingFile] = useState(true)
+  const [fileDownloadProgress, setFileDownloadProgress] = useState(0)
   const [showFileInfoPanel, setShowFileInfoPanel] = useState(false)
   const currentFileIdRef = useRef<string>()
   const closeButtonRef = useRef<HTMLButtonElement>(null)
@@ -35,8 +36,12 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, files,
   const getObjectUrl = useCallback(async () => {
     try {
       const chunks: Uint8Array[] = []
-      await application.files.downloadFile(file, async (decryptedChunk: Uint8Array) => {
+      setFileDownloadProgress(0)
+      await application.files.downloadFile(file, async (decryptedChunk, progress) => {
         chunks.push(decryptedChunk)
+        if (progress) {
+          setFileDownloadProgress(Math.round(progress.percentComplete))
+        }
       })
       const finalDecryptedBytes = concatenateUint8Arrays(chunks)
       setObjectUrl(
@@ -150,6 +155,10 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, files,
                 className="mr-4"
                 onClick={() => {
                   application.getArchiveService().downloadData(objectUrl, file.name)
+                  addToast({
+                    type: ToastType.Success,
+                    message: 'Successfully downloaded file',
+                  })
                 }}
               >
                 Download
@@ -168,7 +177,13 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, files,
         <div className="flex flex-grow min-h-0">
           <div className="flex flex-grow items-center justify-center relative max-w-full">
             {isLoadingFile ? (
-              <div className="sk-spinner w-5 h-5 spinner-info"></div>
+              <div className="flex flex-col items-center">
+                <div className="flex items-center">
+                  <div className="sk-spinner w-5 h-5 spinner-info mr-3"></div>
+                  <div className="text-base font-semibold">{fileDownloadProgress}%</div>
+                </div>
+                <span className="mt-3">Loading file...</span>
+              </div>
             ) : objectUrl ? (
               <PreviewComponent file={file} objectUrl={objectUrl} />
             ) : (
diff --git a/app/assets/javascripts/UIModels/AppState/FilesState.ts b/app/assets/javascripts/UIModels/AppState/FilesState.ts
index 3fdd3f079..aad700e3a 100644
--- a/app/assets/javascripts/UIModels/AppState/FilesState.ts
+++ b/app/assets/javascripts/UIModels/AppState/FilesState.ts
@@ -42,13 +42,11 @@ export class FilesState {
         }
 
         if (progress) {
-          const progressPercent = Number.isInteger(progress.percentComplete)
-            ? progress.percentComplete
-            : progress.percentComplete.toFixed(2)
+          const progressPercent = Math.floor(progress.percentComplete)
 
           updateToast(downloadingToastId, {
             message: `Downloading file "${file.name}" (${progressPercent}%)`,
-            progress: progress.percentComplete,
+            progress: progressPercent,
           })
         }
       })
@@ -136,10 +134,9 @@ export class FilesState {
         const onChunk = async (chunk: Uint8Array, index: number, isLast: boolean) => {
           await this.application.files.pushBytesForUpload(operation, chunk, index, isLast)
 
-          const progress = operation.getProgress().percentComplete
-          const formattedProgress = Number.isInteger(progress) ? progress : progress.toFixed(2)
+          const progress = Math.round(operation.getProgress().percentComplete)
           updateToast(toastId, {
-            message: `Uploading file "${file.name}" (${formattedProgress}%)`,
+            message: `Uploading file "${file.name}" (${progress}%)`,
             progress,
           })
         }
diff --git a/config/application.rb b/config/application.rb
index 4ba820593..44305e849 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -51,7 +51,7 @@ module Web
          img_src: ["'self'", '* data:', 'blob:'],
          manifest_src: %w('self'),
          media_src: %w('self' blob: *.standardnotes.com),
-         object_src: %w('self'),
+         object_src: %w('self' blob: *.standardnotes.com),
          plugin_types: %w(),
          script_src: %w('self' 'unsafe-inline' 'unsafe-eval'),
          style_src: %w(* 'unsafe-inline'),

From a3d5f57657ba85b0f1d5a54ed1c67dbcb5fe1efa Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Thu, 5 May 2022 20:55:14 +0530
Subject: [PATCH 064/102] fix: pinch zoom on preview modal (#1012)

---
 app/assets/javascripts/Components/Files/FilePreviewModal.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/javascripts/Components/Files/FilePreviewModal.tsx b/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
index 9d66ff812..32682380c 100644
--- a/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
+++ b/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
@@ -118,6 +118,7 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, files,
       aria-label="File preview modal"
       onDismiss={onDismiss}
       initialFocusRef={closeButtonRef}
+      dangerouslyBypassScrollLock
     >
       <DialogContent
         className="flex flex-col rounded shadow-overlay"

From c981cdced4e55cee806e32a17d3963df2696a1d1 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Thu, 5 May 2022 22:29:15 +0530
Subject: [PATCH 065/102] feat: drag file on tab button to switch to that tab
 (#1013)

---
 .../AttachedFilesButton.tsx                   | 31 +++++++------------
 .../AttachedFilesPopover.tsx                  |  8 ++---
 .../AttachedFilesPopover/PopoverTabs.ts       |  4 +++
 3 files changed, 18 insertions(+), 25 deletions(-)
 create mode 100644 app/assets/javascripts/Components/AttachedFilesPopover/PopoverTabs.ts

diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
index 08ab451d0..8c878d802 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
@@ -13,9 +13,10 @@ import { confirmDialog } from '@/Services/AlertService'
 import { addToast, dismissToast, ToastType } from '@standardnotes/stylekit'
 import { StreamingFileReader } from '@standardnotes/filepicker'
 import { PopoverFileItemAction, PopoverFileItemActionType } from './PopoverFileItemAction'
-import { AttachedFilesPopover, PopoverTabs } from './AttachedFilesPopover'
+import { AttachedFilesPopover } from './AttachedFilesPopover'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import { useFilePreviewModal } from '../Files/FilePreviewModalProvider'
+import { PopoverTabs } from './PopoverTabs'
 
 type Props = {
   application: WebApplication
@@ -23,21 +24,6 @@ type Props = {
   onClickPreprocessing?: () => Promise<void>
 }
 
-const createDragOverlay = () => {
-  if (document.getElementById('drag-overlay')) {
-    return
-  }
-
-  const overlayElementTemplate =
-    '<div class="sn-component" id="drag-overlay"><div class="absolute top-0 left-0 w-full h-full z-index-1001"></div></div>'
-  const overlayFragment = document.createRange().createContextualFragment(overlayElementTemplate)
-  document.body.appendChild(overlayFragment)
-}
-
-const removeDragOverlay = () => {
-  document.getElementById('drag-overlay')?.remove()
-}
-
 const isHandlingFileDrag = (event: DragEvent) =>
   event.dataTransfer?.items && Array.from(event.dataTransfer.items).some((item) => item.kind === 'file')
 
@@ -252,11 +238,19 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
         event.preventDefault()
         event.stopPropagation()
 
+        switch ((event.target as HTMLElement).id) {
+          case PopoverTabs.AllFiles:
+            setCurrentTab(PopoverTabs.AllFiles)
+            break
+          case PopoverTabs.AttachedFiles:
+            setCurrentTab(PopoverTabs.AttachedFiles)
+            break
+        }
+
         dragCounter.current = dragCounter.current + 1
 
         if (event.dataTransfer?.items.length) {
           setIsDraggingFiles(true)
-          createDragOverlay()
           if (!open) {
             toggleAttachedFilesMenu().catch(console.error)
           }
@@ -279,8 +273,6 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
         return
       }
 
-      removeDragOverlay()
-
       setIsDraggingFiles(false)
     }
 
@@ -294,7 +286,6 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
         event.stopPropagation()
 
         setIsDraggingFiles(false)
-        removeDragOverlay()
 
         if (event.dataTransfer?.items.length) {
           Array.from(event.dataTransfer.items).forEach(async (item) => {
diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
index 15221a5ad..f3e471b07 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
@@ -10,11 +10,7 @@ import { Button } from '@/Components/Button/Button'
 import { Icon } from '@/Components/Icon'
 import { PopoverFileItem } from './PopoverFileItem'
 import { PopoverFileItemAction, PopoverFileItemActionType } from './PopoverFileItemAction'
-
-export enum PopoverTabs {
-  AttachedFiles,
-  AllFiles,
-}
+import { PopoverTabs } from './PopoverTabs'
 
 type Props = {
   application: WebApplication
@@ -75,6 +71,7 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
       >
         <div className="flex border-0 border-b-1 border-solid border-main">
           <button
+            id={PopoverTabs.AttachedFiles}
             className={`bg-default border-0 cursor-pointer px-3 py-2.5 relative focus:bg-info-backdrop focus:shadow-bottom ${
               currentTab === PopoverTabs.AttachedFiles ? 'color-info font-medium shadow-bottom' : 'color-text'
             }`}
@@ -86,6 +83,7 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
             Attached
           </button>
           <button
+            id={PopoverTabs.AllFiles}
             className={`bg-default border-0 cursor-pointer px-3 py-2.5 relative focus:bg-info-backdrop focus:shadow-bottom ${
               currentTab === PopoverTabs.AllFiles ? 'color-info font-medium shadow-bottom' : 'color-text'
             }`}
diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/PopoverTabs.ts b/app/assets/javascripts/Components/AttachedFilesPopover/PopoverTabs.ts
new file mode 100644
index 000000000..98088aed0
--- /dev/null
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/PopoverTabs.ts
@@ -0,0 +1,4 @@
+export enum PopoverTabs {
+  AttachedFiles = 'attached-files-tab',
+  AllFiles = 'all-files-tab',
+}

From da7d839fdd4d3265cf7628485d54cfba5c76bbfd Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Thu, 5 May 2022 22:22:46 -0500
Subject: [PATCH 066/102] chore: bump snjs deps

---
 package.json |   8 +-
 yarn.lock    | 230 ++++++++++++++++++++++++++++-----------------------
 2 files changed, 130 insertions(+), 108 deletions(-)

diff --git a/package.json b/package.json
index 4f70d006e..383f19f31 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "@babel/plugin-transform-react-jsx": "^7.17.3",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-typescript": "^7.16.7",
-    "@standardnotes/config": "^2.4.1",
+    "@standardnotes/config": "^2.4.3",
     "@svgr/webpack": "^6.2.1",
     "@types/jest": "^27.4.1",
     "@types/react": "^17.0.42",
@@ -70,9 +70,9 @@
     "@reach/tooltip": "^0.16.2",
     "@reach/visually-hidden": "^0.16.0",
     "@standardnotes/components": "1.8.0",
-    "@standardnotes/filepicker": "1.13.4",
-    "@standardnotes/sncrypto-web": "1.9.0",
-    "@standardnotes/snjs": "2.106.0",
+    "@standardnotes/filepicker": "1.13.7",
+    "@standardnotes/sncrypto-web": "1.9.2",
+    "@standardnotes/snjs": "2.106.5",
     "@standardnotes/stylekit": "5.25.0",
     "@zip.js/zip.js": "^2.4.10",
     "mobx": "^6.5.0",
diff --git a/yarn.lock b/yarn.lock
index b73d4e75c..dbfad97a0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2424,141 +2424,144 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@standardnotes/auth@^3.18.11":
-  version "3.18.11"
-  resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.18.11.tgz#1044698e9c07d940b243d63f0deb0349481687c4"
-  integrity sha512-NygrMeYRTg/aqxlLroiRRoqsn1fL5Mz+gq/t0zz6+ecy3V4Pqz9fGu32l3IMYHQvI1B4vbgI1nnTp0jP5XPbjg==
+"@standardnotes/auth@^3.18.13":
+  version "3.18.13"
+  resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.18.13.tgz#16016ce68150dadae6239d3bc993115339456b50"
+  integrity sha512-V71y7vLJ8PiD7uuQDIN7CSPFcPGtgt8S7bGkhHIjxy2z3/Cu6W1j7wl8jq4foekTstGFKz+3yGiuhmPMiZUwpg==
   dependencies:
-    "@standardnotes/common" "^1.19.6"
+    "@standardnotes/common" "^1.19.8"
     jsonwebtoken "^8.5.1"
 
-"@standardnotes/common@^1.19.6":
-  version "1.19.6"
-  resolved "https://registry.yarnpkg.com/@standardnotes/common/-/common-1.19.6.tgz#6c672f4f10d5ed123a2c392dfb35dbe3c698b3b9"
-  integrity sha512-HxPrV9JhLp//S7h+QjOjlMPy0lgrjLT4iBKzr8JG8lUeWSS1mY3p1I+w0D9+yiraS2SPq2L14Z0VKds0zs9HXw==
+"@standardnotes/common@^1.19.8":
+  version "1.19.8"
+  resolved "https://registry.yarnpkg.com/@standardnotes/common/-/common-1.19.8.tgz#ca44cab69cf5562e874d091e875c1773789a0416"
+  integrity sha512-Fv9o1nvvY3eIU1Yf0yXsPCGSHXWdGb6Uh9dttB67IjFWlHd5g7JuB4YWNsMZLyvtoeOOuA/6rt65cxZ8Fg/2Lw==
 
 "@standardnotes/components@1.8.0":
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/@standardnotes/components/-/components-1.8.0.tgz#eaeadd6c0eb36c034cd2c9d6b625f463a0188482"
   integrity sha512-mgbekII0aMVkVuNZNXspLUoTP/fTf74Mz6ic91/8ca7S/e/4TcFg9OgTBV5Fqy/ShA42fhHEfJUG4QgRR+KdOw==
 
-"@standardnotes/config@^2.4.1":
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/config/-/config-2.4.1.tgz#df92445efbdd7ed99a70e011d7f32de35fc12f05"
-  integrity sha512-NQ9ajPJOUwd0/sDuvNQH+4yVFM00oWRmBCceHFzKur7rtT50XUyelVesdlcUm12M9LRdVOf9jWb9iNSvvQjhvg==
+"@standardnotes/config@^2.4.3":
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/@standardnotes/config/-/config-2.4.3.tgz#0f0b0fb590d802572b6831f0fd60a4e359c40685"
+  integrity sha512-QWWtawpaf92od0Q7GVpC3lKirkHQDiV7jb/amF6BVb8Tf8xeiYpBKA53yXUrdnHJRA/vDIMWHW4p7m3XzR1IeQ==
   dependencies:
     "@typescript-eslint/eslint-plugin" "^5.12.1"
     "@typescript-eslint/parser" "^5.12.1"
+    eslint-config-prettier "^8.5.0"
+    eslint-plugin-prettier "^4.0.0"
+    prettier "^2.6.2"
 
-"@standardnotes/domain-events@^2.27.14":
-  version "2.27.14"
-  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.27.14.tgz#3d3829f51d4d88b8c64a260b719e6edbc3bfb5f3"
-  integrity sha512-AsuNYvYs9L6Ib+FpLpp86OpP0p9wB0LNfwtJm4aXJtbHxi63vRO7xLZvfiFrGr9Fj8OB6aSZ6lH0TpUSk18H7w==
+"@standardnotes/domain-events@^2.28.0":
+  version "2.28.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.28.0.tgz#f2b52ef0f38463b5eb55161b0739dbc88c9f127c"
+  integrity sha512-e8pj/2H3cftU/KBqyJeab6Gl41jERrCCUGPA749l8Myl/HcrvquKoYTg23wnMt5cCDAFjqdcCzLvsmsKQcD4Yg==
   dependencies:
-    "@standardnotes/auth" "^3.18.11"
-    "@standardnotes/features" "^1.40.0"
+    "@standardnotes/auth" "^3.18.13"
+    "@standardnotes/features" "^1.41.0"
 
-"@standardnotes/encryption@^1.6.2":
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.6.2.tgz#936a1cc7c80fff06b4d960afb9e954569ef953ff"
-  integrity sha512-KqM3ht58VDjQzNAlStFhUquURAHWZs3HH2agQFRGJZZop0KPQqzgs6LIXRgw0Yyo8MrnMreMobRxuINWj8ddGQ==
+"@standardnotes/encryption@^1.6.6":
+  version "1.6.6"
+  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.6.6.tgz#c341a4d3cdbb23adbddfcf184207fef68f298312"
+  integrity sha512-qLnQ1DndlNaWzOMPgUnT8hZ5om0cBlueFUnuQT4uCGVoTLdbGLNNjjoOTymfFRZ4NJ3ZaeBVFbur0p4l4WRG6A==
   dependencies:
-    "@standardnotes/models" "^1.6.3"
-    "@standardnotes/responses" "^1.6.14"
-    "@standardnotes/services" "^1.10.2"
+    "@standardnotes/models" "^1.6.7"
+    "@standardnotes/responses" "^1.6.17"
+    "@standardnotes/services" "^1.10.6"
 
-"@standardnotes/features@^1.40.0":
-  version "1.40.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.40.0.tgz#362f9656b6125cab61752d038981d67f12689fb6"
-  integrity sha512-3C/fj7/HQ6S3HZJujB92QW6ydc0oOaCrUPtYkCMHnjBV0qpGDtpzbR3GLYqmHpmiM5H87s9BppEQleiMu1+dyA==
+"@standardnotes/features@^1.41.0":
+  version "1.41.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.41.0.tgz#d6aaea9bf98bfb4bf3f95b8ee7bdc0e6eea15f2a"
+  integrity sha512-Ku0eT9nfpAYsD6dfmbaU13ir5FK42n59j3br9nnKLsPCgC4+/AbIukZ4qWfCetV2Ttiy2odBnCdDBc0Lor35pw==
   dependencies:
-    "@standardnotes/auth" "^3.18.11"
-    "@standardnotes/common" "^1.19.6"
+    "@standardnotes/auth" "^3.18.13"
+    "@standardnotes/common" "^1.19.8"
 
-"@standardnotes/filepicker@1.13.4", "@standardnotes/filepicker@^1.13.4":
-  version "1.13.4"
-  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.13.4.tgz#92107587ef3d37d5d54b65e6ce589b96a2723c70"
-  integrity sha512-v7xk1PmuehCjKGv4hEiQkhqtdlbH9tv1D8GE737V9JZU/09b9t96wJ6kYDm2Nwl72/5gipI6LoLuwAcc/jD/GQ==
+"@standardnotes/filepicker@1.13.7", "@standardnotes/filepicker@^1.13.7":
+  version "1.13.7"
+  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.13.7.tgz#8e9f0736defa6630e8c3fb541d02a9286d8d8875"
+  integrity sha512-SOqgYqzerhCg2d47j+QkzOBISN9KHU5uxsV7+Heaxag/jJFfyplxWYOskNJzFm5DtgSwV57Y753hIQN8S7YTKA==
   dependencies:
-    "@standardnotes/common" "^1.19.6"
-    "@standardnotes/utils" "^1.6.3"
+    "@standardnotes/common" "^1.19.8"
+    "@standardnotes/utils" "^1.6.6"
 
-"@standardnotes/files@^1.0.6":
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.0.6.tgz#6fafd7114a014c32c320ecc328f1bfdf9f8856f1"
-  integrity sha512-8/+bLEQP91JQKEh0du8lRRIuHV+jB62s+jTcK+nuyFkg72JR7Qgeu+tUpV3O3vassj9ZaZhO5s1+pgOiJU+QCg==
+"@standardnotes/files@^1.0.10":
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.0.10.tgz#dac27cf777f948962935427132a82f6ad3a87f5d"
+  integrity sha512-+4JgKIVEklJTV6oY7b8Mg0cYhApXrzINd3gMMbWhva2dzSQX8OsdBfNpgHDL8D4SQ8UbwvVjJd19usWXwmTcZQ==
   dependencies:
-    "@standardnotes/models" "^1.6.3"
-    "@standardnotes/responses" "^1.6.14"
-    "@standardnotes/services" "^1.10.2"
-    "@standardnotes/utils" "^1.6.3"
+    "@standardnotes/models" "^1.6.7"
+    "@standardnotes/responses" "^1.6.17"
+    "@standardnotes/services" "^1.10.6"
+    "@standardnotes/utils" "^1.6.6"
 
-"@standardnotes/models@^1.6.3":
-  version "1.6.3"
-  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.6.3.tgz#d3d344cc877fd484f87171a3465d732f15f49199"
-  integrity sha512-qmOJsxgpov+VTzhJYc9uqTDP1+JvtFXjJSkhiHiA4E/ZRrejxvTl6iPu6ZF5gVHWf+93KsGhw449pc/kjj/5bA==
+"@standardnotes/models@^1.6.7":
+  version "1.6.7"
+  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.6.7.tgz#b59f597ab9ec80d93be3b0578cb995022d5e659c"
+  integrity sha512-H9+tjD2uzrpwxj+QCA79d2xRELJWGAKDN7jds0m8GMSg+6TFeFhv7qghQkr2FYsbkf8GrBfA42N5iYNRr1dBDA==
   dependencies:
-    "@standardnotes/features" "^1.40.0"
-    "@standardnotes/responses" "^1.6.14"
-    "@standardnotes/utils" "^1.6.3"
+    "@standardnotes/features" "^1.41.0"
+    "@standardnotes/responses" "^1.6.17"
+    "@standardnotes/utils" "^1.6.6"
 
-"@standardnotes/responses@^1.6.14":
-  version "1.6.14"
-  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.6.14.tgz#5c9cc1b2dbf36c335350c31c4dc5ef2a971365e3"
-  integrity sha512-iEPt0iaYyb1SjicAaKbH3jHgrExDz3R9fzCUlB0wh61B35g/8czi0thSzTmJI2DP3/hMqWOIUDj1M1piN+Rqog==
+"@standardnotes/responses@^1.6.17":
+  version "1.6.17"
+  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.6.17.tgz#14bc4dfedecf21be851f60b9fbc0a5c1d2336cd8"
+  integrity sha512-L98sC1KjRYPPIilg1jitDqdiUYgqxz2Vw7TBCL1CzWUXI/rfFeqWMrnKjastQ9125+W+FgOQZAdUD1moG0b+qg==
   dependencies:
-    "@standardnotes/auth" "^3.18.11"
-    "@standardnotes/common" "^1.19.6"
-    "@standardnotes/features" "^1.40.0"
+    "@standardnotes/auth" "^3.18.13"
+    "@standardnotes/common" "^1.19.8"
+    "@standardnotes/features" "^1.41.0"
 
-"@standardnotes/services@^1.10.2":
-  version "1.10.2"
-  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.10.2.tgz#b21ac3596b1b9ea326dc7e99b0ac01e487c0a0db"
-  integrity sha512-LGDa9OMjhSB/nu6uAIo7qG6D0cZ9jg/3dZzspBFx8Jz/eE/ZgjufNXm6iwu5FxhMtybLOw2fUkSCmA8mdCBNkA==
+"@standardnotes/services@^1.10.6":
+  version "1.10.6"
+  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.10.6.tgz#7b2cacc7c454e830ad89e2adcb5f0abe048daeff"
+  integrity sha512-TxNlve/IzoREpih/wodUkK/XX1mrhM4eHHv4z1E/Qx2ac1gc3wX2s4sNWBjUNqb/G5qMYeIwLn7Iy882I655DA==
   dependencies:
-    "@standardnotes/auth" "^3.18.11"
-    "@standardnotes/common" "^1.19.6"
-    "@standardnotes/models" "^1.6.3"
-    "@standardnotes/responses" "^1.6.14"
-    "@standardnotes/utils" "^1.6.3"
+    "@standardnotes/auth" "^3.18.13"
+    "@standardnotes/common" "^1.19.8"
+    "@standardnotes/models" "^1.6.7"
+    "@standardnotes/responses" "^1.6.17"
+    "@standardnotes/utils" "^1.6.6"
 
-"@standardnotes/settings@^1.14.1":
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/settings/-/settings-1.14.1.tgz#8b6c84e2eeeab274a557bad25cb16a62d60916ec"
-  integrity sha512-zRRBoflI77Zqa5ejZcXFPnvwVKf/gbLNtutB/pQE5SYlDMUgWtg6Qm8r4667Ue/nBUWZixCH0sznEN8XK8rCBw==
+"@standardnotes/settings@^1.14.3":
+  version "1.14.3"
+  resolved "https://registry.yarnpkg.com/@standardnotes/settings/-/settings-1.14.3.tgz#021085e8c383a9893a2c49daa74cc0754ccd67b5"
+  integrity sha512-wJQ4apQVXScYcwZbJJoEe1LFx9DMqlp0NKOXGzeL6eNIqAvMQJvLtIdgp/jx2OSJKzdRV5/TYqwVnDMcFdRfCg==
 
-"@standardnotes/sncrypto-common@^1.8.0":
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/sncrypto-common/-/sncrypto-common-1.8.0.tgz#7904e5c9eb907e2db3fa3c1a0c364607b3057243"
-  integrity sha512-+of+U+mTCV0LJVsCIzALLx2TvgGkqriT2NTcHjnIawbz7eoUZGXqWw/mSshhboDLtINje9Wz8qqRyYPmacu9VA==
+"@standardnotes/sncrypto-common@^1.8.2":
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/@standardnotes/sncrypto-common/-/sncrypto-common-1.8.2.tgz#3fd8a4a110e3c8981538fcb470ce6f2c19a01954"
+  integrity sha512-2tlXpCaAnvNjj6gXRQnsuo/acb7Q7i9RqBBv3PV8O+rdKnSfQOH/6973+3FxOsjTRcvrQVA2oAuw1+/PzLYXUg==
 
-"@standardnotes/sncrypto-web@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/sncrypto-web/-/sncrypto-web-1.9.0.tgz#6ea796fb95948bed94463da3f3eeaf64db0b9e9a"
-  integrity sha512-c3iVBiUE3JMX7Q9exsD8RxnwVNVp9ttG20BsPSiX2z2svoncTBXI0HKTpKpnBoJJqCD/YizQ8uJ2L73Wj03AyA==
+"@standardnotes/sncrypto-web@1.9.2":
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/@standardnotes/sncrypto-web/-/sncrypto-web-1.9.2.tgz#3e2ba32ae997ebc129d82c50292847de0d7288c4"
+  integrity sha512-wrxKmqMrnFQ+K+fxlbRILk84mlBRXrGoVStnRFDCXTpOvrOwxei5GG4hq2w8C5Yb87nEWkIJkJeamr4lvwtoLg==
   dependencies:
-    "@standardnotes/sncrypto-common" "^1.8.0"
+    "@standardnotes/sncrypto-common" "^1.8.2"
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.106.0":
-  version "2.106.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.106.0.tgz#2eecf2e1bfcbcd913ed993346c140fd857d93645"
-  integrity sha512-EB1FXqVfe2f/Bgcl8xzi18wWkq9RWVxVDJVNJqYorALEY0yR/3ERjA8ZcV5trY4l0oLiG55rzYYTlgqDHj99/g==
+"@standardnotes/snjs@2.106.5":
+  version "2.106.5"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.106.5.tgz#14637de4dbf5f8960cba2492cd0041f88b5505a3"
+  integrity sha512-HfE998o4gs9wGb1F6pmQJXcSylfuJRwBDtMZDxuSHnGeiTb+iRJFiR5O259QebxABeK8XSJ7h1WoOYV75EMxuQ==
   dependencies:
-    "@standardnotes/auth" "^3.18.11"
-    "@standardnotes/common" "^1.19.6"
-    "@standardnotes/domain-events" "^2.27.14"
-    "@standardnotes/encryption" "^1.6.2"
-    "@standardnotes/features" "^1.40.0"
-    "@standardnotes/filepicker" "^1.13.4"
-    "@standardnotes/files" "^1.0.6"
-    "@standardnotes/models" "^1.6.3"
-    "@standardnotes/responses" "^1.6.14"
-    "@standardnotes/services" "^1.10.2"
-    "@standardnotes/settings" "^1.14.1"
-    "@standardnotes/sncrypto-common" "^1.8.0"
-    "@standardnotes/utils" "^1.6.3"
+    "@standardnotes/auth" "^3.18.13"
+    "@standardnotes/common" "^1.19.8"
+    "@standardnotes/domain-events" "^2.28.0"
+    "@standardnotes/encryption" "^1.6.6"
+    "@standardnotes/features" "^1.41.0"
+    "@standardnotes/filepicker" "^1.13.7"
+    "@standardnotes/files" "^1.0.10"
+    "@standardnotes/models" "^1.6.7"
+    "@standardnotes/responses" "^1.6.17"
+    "@standardnotes/services" "^1.10.6"
+    "@standardnotes/settings" "^1.14.3"
+    "@standardnotes/sncrypto-common" "^1.8.2"
+    "@standardnotes/utils" "^1.6.6"
 
 "@standardnotes/stylekit@5.25.0":
   version "5.25.0"
@@ -2573,12 +2576,12 @@
     nanostores "^0.5.10"
     prop-types "^15.8.1"
 
-"@standardnotes/utils@^1.6.3":
-  version "1.6.3"
-  resolved "https://registry.yarnpkg.com/@standardnotes/utils/-/utils-1.6.3.tgz#29486e4fd2d83e9a2616102244d747d9ae8e0597"
-  integrity sha512-cb46bd/b8Xo919BceWDoN347VE8/jKb74I9U8IUO1sTPAIi/YDNYRiBouqotuvgif3SxNBdst+ad6NElhhgm2Q==
+"@standardnotes/utils@^1.6.6":
+  version "1.6.6"
+  resolved "https://registry.yarnpkg.com/@standardnotes/utils/-/utils-1.6.6.tgz#8a1e40c99d393d03c0890382772208bd8f9a290b"
+  integrity sha512-zKb9/JELti6FLDgUQGVC08i1m06D5LxE/ySViqyFroZ7gLLQnSOM5+bnHqGYXwChuCMyGYGIwCZuD6QqPoqB2A==
   dependencies:
-    "@standardnotes/common" "^1.19.6"
+    "@standardnotes/common" "^1.19.8"
     dompurify "^2.3.6"
     lodash "^4.17.21"
 
@@ -5025,6 +5028,13 @@ eslint-config-prettier@^8.5.0:
   resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz#5a81680ec934beca02c7b1a61cf8ca34b66feab1"
   integrity sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==
 
+eslint-plugin-prettier@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz#8b99d1e4b8b24a762472b4567992023619cb98e0"
+  integrity sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==
+  dependencies:
+    prettier-linter-helpers "^1.0.0"
+
 eslint-plugin-react-hooks@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.4.0.tgz#71c39e528764c848d8253e1aa2c7024ed505f6c4"
@@ -5278,6 +5288,11 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-diff@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
+  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
+
 fast-glob@^3.1.1:
   version "3.2.5"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.5.tgz#7939af2a656de79a4f1901903ee8adcaa7cb9661"
@@ -8510,6 +8525,13 @@ prepend-http@^2.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
   integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
 
+prettier-linter-helpers@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
+  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
+  dependencies:
+    fast-diff "^1.1.2"
+
 prettier@^2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.2.tgz#e26d71a18a74c3d0f0597f55f01fb6c06c206032"

From cc2b223d0d5161b367019779497f37159241bb5e Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Thu, 5 May 2022 22:33:17 -0500
Subject: [PATCH 067/102] chore: lint

---
 .../PreferencesGroup.tsx                      |  5 +-
 .../RemoteHistoryList.tsx                     | 52 ++++++++++---------
 .../SessionHistoryList.tsx                    | 48 +++++++++--------
 3 files changed, 57 insertions(+), 48 deletions(-)

diff --git a/app/assets/javascripts/Components/Preferences/PreferencesComponents/PreferencesGroup.tsx b/app/assets/javascripts/Components/Preferences/PreferencesComponents/PreferencesGroup.tsx
index 5dd982d9f..deae99ce3 100644
--- a/app/assets/javascripts/Components/Preferences/PreferencesComponents/PreferencesGroup.tsx
+++ b/app/assets/javascripts/Components/Preferences/PreferencesComponents/PreferencesGroup.tsx
@@ -1,8 +1,9 @@
 import { FunctionComponent } from 'preact'
 import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
 
-const HorizontalLine: FunctionComponent<{ index: number; length: number }> = ({ index, length }) =>
-  (index < length - 1 ? <HorizontalSeparator classes="my-4" /> : null)
+const HorizontalLine: FunctionComponent<{ index: number; length: number }> = ({ index, length }) => {
+  return index < length - 1 ? <HorizontalSeparator classes="my-4" /> : null
+}
 
 export const PreferencesGroup: FunctionComponent = ({ children }) => (
   <div className="bg-default border-1 border-solid rounded border-main px-6 py-6 flex flex-col mb-3">
diff --git a/app/assets/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx b/app/assets/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx
index 4d1bfff85..ef164d5df 100644
--- a/app/assets/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx
@@ -53,30 +53,34 @@ export const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> = obse
         ref={remoteHistoryListRef}
       >
         {isFetchingRemoteHistory && <div className="sk-spinner w-5 h-5 spinner-info"></div>}
-        {remoteHistory?.map((group) =>
-          (group.entries && group.entries.length ? (
-            <Fragment key={group.title}>
-              <div className="px-3 mt-2.5 mb-1 font-semibold color-text uppercase color-grey-0 select-none">
-                {group.title}
-              </div>
-              {group.entries.map((entry) => (
-                <HistoryListItem
-                  key={entry.uuid}
-                  isSelected={selectedEntryUuid === entry.uuid}
-                  onClick={() => {
-                    setSelectedEntryUuid(entry.uuid)
-                    fetchAndSetRemoteRevision(entry).catch(console.error)
-                  }}
-                >
-                  <div className="flex flex-grow items-center justify-between">
-                    <div>{previewHistoryEntryTitle(entry)}</div>
-                    {!application.features.hasMinimumRole(entry.required_role) && <Icon type="premium-feature" />}
-                  </div>
-                </HistoryListItem>
-              ))}
-            </Fragment>
-          ) : null),
-        )}
+        {remoteHistory?.map((group) => {
+          if (group.entries && group.entries.length) {
+            return (
+              <Fragment key={group.title}>
+                <div className="px-3 mt-2.5 mb-1 font-semibold color-text uppercase color-grey-0 select-none">
+                  {group.title}
+                </div>
+                {group.entries.map((entry) => (
+                  <HistoryListItem
+                    key={entry.uuid}
+                    isSelected={selectedEntryUuid === entry.uuid}
+                    onClick={() => {
+                      setSelectedEntryUuid(entry.uuid)
+                      fetchAndSetRemoteRevision(entry).catch(console.error)
+                    }}
+                  >
+                    <div className="flex flex-grow items-center justify-between">
+                      <div>{previewHistoryEntryTitle(entry)}</div>
+                      {!application.features.hasMinimumRole(entry.required_role) && <Icon type="premium-feature" />}
+                    </div>
+                  </HistoryListItem>
+                ))}
+              </Fragment>
+            )
+          } else {
+            return null
+          }
+        })}
         {!remoteHistoryLength && !isFetchingRemoteHistory && (
           <div className="color-grey-0 select-none">No remote history found</div>
         )}
diff --git a/app/assets/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx b/app/assets/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx
index f1f6d0aa1..1953918b2 100644
--- a/app/assets/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx
@@ -53,28 +53,32 @@ export const SessionHistoryList: FunctionComponent<Props> = ({
       }`}
       ref={sessionHistoryListRef}
     >
-      {sessionHistory?.map((group) =>
-        (group.entries && group.entries.length ? (
-          <Fragment key={group.title}>
-            <div className="px-3 mt-2.5 mb-1 font-semibold color-text uppercase color-grey-0 select-none">
-              {group.title}
-            </div>
-            {group.entries.map((entry, index) => (
-              <HistoryListItem
-                key={index}
-                isSelected={selectedItemCreatedAt === entry.payload.created_at}
-                onClick={() => {
-                  setSelectedItemCreatedAt(entry.payload.created_at)
-                  setSelectedRevision(entry)
-                  setSelectedRemoteEntry(undefined)
-                }}
-              >
-                {entry.previewTitle()}
-              </HistoryListItem>
-            ))}
-          </Fragment>
-        ) : null),
-      )}
+      {sessionHistory?.map((group) => {
+        if (group.entries && group.entries.length) {
+          return (
+            <Fragment key={group.title}>
+              <div className="px-3 mt-2.5 mb-1 font-semibold color-text uppercase color-grey-0 select-none">
+                {group.title}
+              </div>
+              {group.entries.map((entry, index) => (
+                <HistoryListItem
+                  key={index}
+                  isSelected={selectedItemCreatedAt === entry.payload.created_at}
+                  onClick={() => {
+                    setSelectedItemCreatedAt(entry.payload.created_at)
+                    setSelectedRevision(entry)
+                    setSelectedRemoteEntry(undefined)
+                  }}
+                >
+                  {entry.previewTitle()}
+                </HistoryListItem>
+              ))}
+            </Fragment>
+          )
+        } else {
+          return null
+        }
+      })}
       {!sessionHistoryLength && <div className="color-grey-0 select-none">No session history found</div>}
     </div>
   )

From 8ca9e37ae1bc70f002c63d3f2a00bdcaa99ba5cb Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Sat, 7 May 2022 17:53:30 +0530
Subject: [PATCH 068/102] fix: minor files related fixes (#1016)

---
 .../Components/AttachedFilesPopover/AttachedFilesPopover.tsx    | 2 +-
 app/assets/javascripts/UIModels/AppState/FeaturesState.ts       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
index f3e471b07..aeeeb675a 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
@@ -101,7 +101,7 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
               <div className="relative">
                 <input
                   type="text"
-                  className="w-full rounded py-1.5 px-3 text-input bg-default border-solid border-1 border-main"
+                  className="color-text w-full rounded py-1.5 px-3 text-input bg-default border-solid border-1 border-main"
                   placeholder="Search files..."
                   value={searchQuery}
                   onInput={(e) => {
diff --git a/app/assets/javascripts/UIModels/AppState/FeaturesState.ts b/app/assets/javascripts/UIModels/AppState/FeaturesState.ts
index 3e9391c46..8bcb2475e 100644
--- a/app/assets/javascripts/UIModels/AppState/FeaturesState.ts
+++ b/app/assets/javascripts/UIModels/AppState/FeaturesState.ts
@@ -76,7 +76,7 @@ export class FeaturesState {
   }
 
   private isEntitledToFilesBeta(): boolean {
-    if (window.enabledUnfinishedFeatures) {
+    if (isDev && this.application.hasAccount()) {
       return true
     }
 

From f35a454614cd4e5f4bb970e57850e3d28be96405 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 9 May 2022 20:52:10 +0530
Subject: [PATCH 069/102] fix: don't close popover when previewing file (#1017)

---
 .../Components/ApplicationView/index.tsx      | 93 +++++++++----------
 .../AttachedFilesButton.tsx                   | 13 ++-
 .../Components/Files/FilePreviewModal.tsx     | 66 ++++++-------
 .../Files/FilePreviewModalProvider.tsx        | 53 -----------
 .../javascripts/UIModels/AppState/AppState.ts |  2 +
 .../AppState/FilePreviewModalState.ts         | 34 +++++++
 6 files changed, 126 insertions(+), 135 deletions(-)
 delete mode 100644 app/assets/javascripts/Components/Files/FilePreviewModalProvider.tsx
 create mode 100644 app/assets/javascripts/UIModels/AppState/FilePreviewModalState.ts

diff --git a/app/assets/javascripts/Components/ApplicationView/index.tsx b/app/assets/javascripts/Components/ApplicationView/index.tsx
index e1379234d..0e5e9e115 100644
--- a/app/assets/javascripts/Components/ApplicationView/index.tsx
+++ b/app/assets/javascripts/Components/ApplicationView/index.tsx
@@ -22,7 +22,7 @@ import { PremiumModalProvider } from '@/Hooks/usePremiumModal'
 import { ConfirmSignoutContainer } from '@/Components/ConfirmSignoutModal'
 import { TagsContextMenu } from '@/Components/Tags/TagContextMenu'
 import { ToastContainer } from '@standardnotes/stylekit'
-import { FilePreviewModalProvider } from '@/Components/Files/FilePreviewModalProvider'
+import { FilePreviewModal } from '../Files/FilePreviewModal'
 
 type Props = {
   application: WebApplication
@@ -169,54 +169,53 @@ export class ApplicationView extends PureComponent<Props, State> {
     const renderAppContents = !this.state.needsUnlock && this.state.launched
 
     return (
-      <FilePreviewModalProvider application={this.application}>
-        <PremiumModalProvider application={this.application} appState={this.appState}>
-          <div className={this.platformString + ' main-ui-view sn-component'}>
-            {renderAppContents && (
-              <div id="app" className={this.state.appClass + ' app app-column-container'}>
-                <Navigation application={this.application} />
-                <NotesView application={this.application} appState={this.appState} />
-                <NoteGroupView application={this.application} />
-              </div>
-            )}
-            {renderAppContents && (
-              <>
-                <Footer application={this.application} applicationGroup={this.props.mainApplicationGroup} />
-                <SessionsModal application={this.application} appState={this.appState} />
-                <PreferencesViewWrapper appState={this.appState} application={this.application} />
-                <RevisionHistoryModalWrapper application={this.application} appState={this.appState} />
-              </>
-            )}
-            {this.state.challenges.map((challenge) => {
-              return (
-                <div className="sk-modal">
-                  <ChallengeModal
-                    key={challenge.id}
-                    application={this.application}
-                    appState={this.appState}
-                    mainApplicationGroup={this.props.mainApplicationGroup}
-                    challenge={challenge}
-                    onDismiss={this.removeChallenge}
-                  />
-                </div>
-              )
-            })}
-            {renderAppContents && (
-              <>
-                <NotesContextMenu application={this.application} appState={this.appState} />
-                <TagsContextMenu appState={this.appState} />
-                <PurchaseFlowWrapper application={this.application} appState={this.appState} />
-                <ConfirmSignoutContainer
-                  applicationGroup={this.props.mainApplicationGroup}
-                  appState={this.appState}
+      <PremiumModalProvider application={this.application} appState={this.appState}>
+        <div className={this.platformString + ' main-ui-view sn-component'}>
+          {renderAppContents && (
+            <div id="app" className={this.state.appClass + ' app app-column-container'}>
+              <Navigation application={this.application} />
+              <NotesView application={this.application} appState={this.appState} />
+              <NoteGroupView application={this.application} />
+            </div>
+          )}
+          {renderAppContents && (
+            <>
+              <Footer application={this.application} applicationGroup={this.props.mainApplicationGroup} />
+              <SessionsModal application={this.application} appState={this.appState} />
+              <PreferencesViewWrapper appState={this.appState} application={this.application} />
+              <RevisionHistoryModalWrapper application={this.application} appState={this.appState} />
+            </>
+          )}
+          {this.state.challenges.map((challenge) => {
+            return (
+              <div className="sk-modal">
+                <ChallengeModal
+                  key={challenge.id}
                   application={this.application}
+                  appState={this.appState}
+                  mainApplicationGroup={this.props.mainApplicationGroup}
+                  challenge={challenge}
+                  onDismiss={this.removeChallenge}
                 />
-                <ToastContainer />
-              </>
-            )}
-          </div>
-        </PremiumModalProvider>
-      </FilePreviewModalProvider>
+              </div>
+            )
+          })}
+          {renderAppContents && (
+            <>
+              <NotesContextMenu application={this.application} appState={this.appState} />
+              <TagsContextMenu appState={this.appState} />
+              <PurchaseFlowWrapper application={this.application} appState={this.appState} />
+              <ConfirmSignoutContainer
+                applicationGroup={this.props.mainApplicationGroup}
+                appState={this.appState}
+                application={this.application}
+              />
+              <ToastContainer />
+              <FilePreviewModal application={this.application} appState={this.appState} />
+            </>
+          )}
+        </div>
+      </PremiumModalProvider>
     )
   }
 }
diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
index 8c878d802..ca55425fd 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
@@ -15,7 +15,6 @@ import { StreamingFileReader } from '@standardnotes/filepicker'
 import { PopoverFileItemAction, PopoverFileItemActionType } from './PopoverFileItemAction'
 import { AttachedFilesPopover } from './AttachedFilesPopover'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
-import { useFilePreviewModal } from '../Files/FilePreviewModalProvider'
 import { PopoverTabs } from './PopoverTabs'
 
 type Props = {
@@ -30,7 +29,6 @@ const isHandlingFileDrag = (event: DragEvent) =>
 export const AttachedFilesButton: FunctionComponent<Props> = observer(
   ({ application, appState, onClickPreprocessing }) => {
     const premiumModal = usePremiumModal()
-    const filePreviewModal = useFilePreviewModal()
 
     const note: SNNote | undefined = Object.values(appState.notes.selectedNotes)[0]
 
@@ -45,6 +43,14 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
     const containerRef = useRef<HTMLDivElement>(null)
     const [closeOnBlur, keepMenuOpen] = useCloseOnBlur(containerRef, setOpen)
 
+    useEffect(() => {
+      if (appState.filePreviewModal.isOpen) {
+        keepMenuOpen(true)
+      } else {
+        keepMenuOpen(false)
+      }
+    }, [appState.filePreviewModal.isOpen, keepMenuOpen])
+
     const [currentTab, setCurrentTab] = useState(PopoverTabs.AttachedFiles)
     const [allFiles, setAllFiles] = useState<SNFile[]>([])
     const [attachedFiles, setAttachedFiles] = useState<SNFile[]>([])
@@ -205,7 +211,8 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
           await renameFile(file, action.payload.name)
           break
         case PopoverFileItemActionType.PreviewFile:
-          filePreviewModal.activate(file, currentTab === PopoverTabs.AllFiles ? allFiles : attachedFiles)
+          keepMenuOpen(true)
+          appState.filePreviewModal.activate(file, currentTab === PopoverTabs.AllFiles ? allFiles : attachedFiles)
           break
       }
 
diff --git a/app/assets/javascripts/Components/Files/FilePreviewModal.tsx b/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
index 32682380c..2fe6eccaf 100644
--- a/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
+++ b/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
@@ -1,7 +1,6 @@
 import { WebApplication } from '@/UIModels/Application'
 import { concatenateUint8Arrays } from '@/Utils/ConcatenateUint8Arrays'
 import { DialogContent, DialogOverlay } from '@reach/dialog'
-import { SNFile } from '@standardnotes/snjs'
 import { addToast, NoPreviewIllustration, ToastType } from '@standardnotes/stylekit'
 import { FunctionComponent } from 'preact'
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
@@ -12,18 +11,21 @@ import { FilePreviewInfoPanel } from './FilePreviewInfoPanel'
 import { isFileTypePreviewable } from './isFilePreviewable'
 import { PreviewComponent } from './PreviewComponent'
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants'
-import { useFilePreviewModal } from './FilePreviewModalProvider'
 import { KeyboardKey } from '@/Services/IOService'
+import { AppState } from '@/UIModels/AppState'
+import { observer } from 'mobx-react-lite'
 
 type Props = {
   application: WebApplication
-  files: SNFile[]
-  file: SNFile
-  onDismiss: () => void
+  appState: AppState
 }
 
-export const FilePreviewModal: FunctionComponent<Props> = ({ application, files, file, onDismiss }) => {
-  const context = useFilePreviewModal()
+export const FilePreviewModal: FunctionComponent<Props> = observer(({ application, appState }) => {
+  const { currentFile, setCurrentFile, otherFiles, dismiss, isOpen } = appState.filePreviewModal
+
+  if (!currentFile || !isOpen) {
+    return null
+  }
 
   const [objectUrl, setObjectUrl] = useState<string>()
   const [isFilePreviewable, setIsFilePreviewable] = useState(false)
@@ -37,7 +39,7 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, files,
     try {
       const chunks: Uint8Array[] = []
       setFileDownloadProgress(0)
-      await application.files.downloadFile(file, async (decryptedChunk, progress) => {
+      await application.files.downloadFile(currentFile, async (decryptedChunk, progress) => {
         chunks.push(decryptedChunk)
         if (progress) {
           setFileDownloadProgress(Math.round(progress.percentComplete))
@@ -47,7 +49,7 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, files,
       setObjectUrl(
         URL.createObjectURL(
           new Blob([finalDecryptedBytes], {
-            type: file.mimeType,
+            type: currentFile.mimeType,
           }),
         ),
       )
@@ -56,32 +58,32 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, files,
     } finally {
       setIsLoadingFile(false)
     }
-  }, [application.files, file])
+  }, [application.files, currentFile])
 
   useEffect(() => {
     setIsLoadingFile(true)
-  }, [file.uuid])
+  }, [currentFile.uuid])
 
   useEffect(() => {
-    const isPreviewable = isFileTypePreviewable(file.mimeType)
+    const isPreviewable = isFileTypePreviewable(currentFile.mimeType)
     setIsFilePreviewable(isPreviewable)
 
     if (!isPreviewable) {
       setIsLoadingFile(false)
     }
 
-    if (currentFileIdRef.current !== file.uuid && isPreviewable) {
+    if (currentFileIdRef.current !== currentFile.uuid && isPreviewable) {
       getObjectUrl().catch(console.error)
     }
 
-    currentFileIdRef.current = file.uuid
+    currentFileIdRef.current = currentFile.uuid
 
     return () => {
       if (objectUrl) {
         URL.revokeObjectURL(objectUrl)
       }
     }
-  }, [file, getObjectUrl, objectUrl])
+  }, [currentFile, getObjectUrl, objectUrl])
 
   const keyDownHandler = (event: KeyboardEvent) => {
     if (event.key !== KeyboardKey.Left && event.key !== KeyboardKey.Right) {
@@ -90,22 +92,22 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, files,
 
     event.preventDefault()
 
-    const currentFileIndex = files.findIndex((fileFromArray) => fileFromArray.uuid === file.uuid)
+    const currentFileIndex = otherFiles.findIndex((fileFromArray) => fileFromArray.uuid === currentFile.uuid)
 
     switch (event.key) {
       case KeyboardKey.Left: {
-        const previousFileIndex = currentFileIndex - 1 >= 0 ? currentFileIndex - 1 : files.length - 1
-        const previousFile = files[previousFileIndex]
+        const previousFileIndex = currentFileIndex - 1 >= 0 ? currentFileIndex - 1 : otherFiles.length - 1
+        const previousFile = otherFiles[previousFileIndex]
         if (previousFile) {
-          context.setCurrentFile(previousFile)
+          setCurrentFile(previousFile)
         }
         break
       }
       case KeyboardKey.Right: {
-        const nextFileIndex = currentFileIndex + 1 < files.length ? currentFileIndex + 1 : 0
-        const nextFile = files[nextFileIndex]
+        const nextFileIndex = currentFileIndex + 1 < otherFiles.length ? currentFileIndex + 1 : 0
+        const nextFile = otherFiles[nextFileIndex]
         if (nextFile) {
-          context.setCurrentFile(nextFile)
+          setCurrentFile(nextFile)
         }
         break
       }
@@ -116,7 +118,7 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, files,
     <DialogOverlay
       className="sn-component"
       aria-label="File preview modal"
-      onDismiss={onDismiss}
+      onDismiss={dismiss}
       initialFocusRef={closeButtonRef}
       dangerouslyBypassScrollLock
     >
@@ -137,11 +139,11 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, files,
           <div className="flex items-center">
             <div className="w-6 h-6">
               {getFileIconComponent(
-                application.iconsController.getIconForFileType(file.mimeType),
+                application.iconsController.getIconForFileType(currentFile.mimeType),
                 'w-6 h-6 flex-shrink-0',
               )}
             </div>
-            <span className="ml-3 font-medium">{file.name}</span>
+            <span className="ml-3 font-medium">{currentFile.name}</span>
           </div>
           <div className="flex items-center">
             <button
@@ -155,7 +157,7 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, files,
                 variant="primary"
                 className="mr-4"
                 onClick={() => {
-                  application.getArchiveService().downloadData(objectUrl, file.name)
+                  application.getArchiveService().downloadData(objectUrl, currentFile.name)
                   addToast({
                     type: ToastType.Success,
                     message: 'Successfully downloaded file',
@@ -167,7 +169,7 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, files,
             )}
             <button
               ref={closeButtonRef}
-              onClick={onDismiss}
+              onClick={dismiss}
               aria-label="Close modal"
               className="flex p-1 bg-transparent hover:bg-contrast border-0 cursor-pointer rounded"
             >
@@ -186,7 +188,7 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, files,
                 <span className="mt-3">Loading file...</span>
               </div>
             ) : objectUrl ? (
-              <PreviewComponent file={file} objectUrl={objectUrl} />
+              <PreviewComponent file={currentFile} objectUrl={objectUrl} />
             ) : (
               <div className="flex flex-col items-center">
                 <NoPreviewIllustration className="w-30 h-30 mb-4" />
@@ -210,7 +212,7 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, files,
                       <Button
                         variant="normal"
                         onClick={() => {
-                          application.getAppState().files.downloadFile(file).catch(console.error)
+                          application.getAppState().files.downloadFile(currentFile).catch(console.error)
                         }}
                       >
                         Download
@@ -225,7 +227,7 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, files,
                     <Button
                       variant="primary"
                       onClick={() => {
-                        application.getAppState().files.downloadFile(file).catch(console.error)
+                        application.getAppState().files.downloadFile(currentFile).catch(console.error)
                       }}
                     >
                       Download
@@ -235,9 +237,9 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, files,
               </div>
             )}
           </div>
-          {showFileInfoPanel && <FilePreviewInfoPanel file={file} />}
+          {showFileInfoPanel && <FilePreviewInfoPanel file={currentFile} />}
         </div>
       </DialogContent>
     </DialogOverlay>
   )
-}
+})
diff --git a/app/assets/javascripts/Components/Files/FilePreviewModalProvider.tsx b/app/assets/javascripts/Components/Files/FilePreviewModalProvider.tsx
deleted file mode 100644
index 92760bdb0..000000000
--- a/app/assets/javascripts/Components/Files/FilePreviewModalProvider.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { WebApplication } from '@/UIModels/Application'
-import { SNFile } from '@standardnotes/snjs'
-import { createContext, FunctionComponent } from 'preact'
-import { useContext, useState } from 'preact/hooks'
-import { FilePreviewModal } from './FilePreviewModal'
-
-type FilePreviewActivateFunction = (file: SNFile, files: SNFile[]) => void
-
-type FilePreviewModalContextData = {
-  activate: FilePreviewActivateFunction
-  setCurrentFile: (file: SNFile) => void
-}
-
-const FilePreviewModalContext = createContext<FilePreviewModalContextData | null>(null)
-
-export const useFilePreviewModal = (): FilePreviewModalContextData => {
-  const value = useContext(FilePreviewModalContext)
-
-  if (!value) {
-    throw new Error('FilePreviewModalProvider not found.')
-  }
-
-  return value
-}
-
-export const FilePreviewModalProvider: FunctionComponent<{
-  application: WebApplication
-}> = ({ application, children }) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const [currentFile, setCurrentFile] = useState<SNFile>()
-  const [files, setFiles] = useState<SNFile[]>([])
-
-  const activate: FilePreviewActivateFunction = (file, files) => {
-    setCurrentFile(file)
-    setFiles(files)
-    setIsOpen(true)
-  }
-
-  const close = () => {
-    setIsOpen(false)
-  }
-
-  return (
-    <>
-      <FilePreviewModalContext.Provider value={{ activate, setCurrentFile }}>
-        {isOpen && currentFile && (
-          <FilePreviewModal application={application} files={files} file={currentFile} onDismiss={close} />
-        )}
-        {children}
-      </FilePreviewModalContext.Provider>
-    </>
-  )
-}
diff --git a/app/assets/javascripts/UIModels/AppState/AppState.ts b/app/assets/javascripts/UIModels/AppState/AppState.ts
index b05455041..5402695f2 100644
--- a/app/assets/javascripts/UIModels/AppState/AppState.ts
+++ b/app/assets/javascripts/UIModels/AppState/AppState.ts
@@ -32,6 +32,7 @@ import { SubscriptionState } from './SubscriptionState'
 import { SyncState } from './SyncState'
 import { TagsState } from './TagsState'
 import { WebOrDesktopDevice } from '@/Device/WebOrDesktopDevice'
+import { FilePreviewModalState } from './FilePreviewModalState'
 
 export enum AppStateEvent {
   TagChanged,
@@ -84,6 +85,7 @@ export class AppState {
   readonly notesView: NotesViewState
   readonly subscription: SubscriptionState
   readonly files: FilesState
+  readonly filePreviewModal = new FilePreviewModalState()
 
   isSessionsModalVisible = false
 
diff --git a/app/assets/javascripts/UIModels/AppState/FilePreviewModalState.ts b/app/assets/javascripts/UIModels/AppState/FilePreviewModalState.ts
new file mode 100644
index 000000000..44cd7635f
--- /dev/null
+++ b/app/assets/javascripts/UIModels/AppState/FilePreviewModalState.ts
@@ -0,0 +1,34 @@
+import { SNFile } from '@standardnotes/snjs/dist/@types'
+import { action, makeObservable, observable } from 'mobx'
+
+export class FilePreviewModalState {
+  isOpen = false
+  currentFile: SNFile | undefined = undefined
+  otherFiles: SNFile[] = []
+
+  constructor() {
+    makeObservable(this, {
+      isOpen: observable,
+      currentFile: observable,
+      otherFiles: observable,
+
+      activate: action,
+      dismiss: action,
+      setCurrentFile: action,
+    })
+  }
+
+  setCurrentFile = (currentFile: SNFile) => {
+    this.currentFile = currentFile
+  }
+
+  activate = (currentFile: SNFile, otherFiles: SNFile[]) => {
+    this.currentFile = currentFile
+    this.otherFiles = otherFiles
+    this.isOpen = true
+  }
+
+  dismiss = () => {
+    this.isOpen = false
+  }
+}

From 9e370df2e83a9ac095eaed0b4e03662bf1b98fde Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 9 May 2022 23:07:02 +0530
Subject: [PATCH 070/102] fix: download success toast showing up even if
 download errors (#1018)

---
 app/assets/javascripts/UIModels/AppState/FilesState.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/UIModels/AppState/FilesState.ts b/app/assets/javascripts/UIModels/AppState/FilesState.ts
index aad700e3a..ddf6bda05 100644
--- a/app/assets/javascripts/UIModels/AppState/FilesState.ts
+++ b/app/assets/javascripts/UIModels/AppState/FilesState.ts
@@ -34,7 +34,7 @@ export class FilesState {
 
       const decryptedBytesArray: Uint8Array[] = []
 
-      await this.application.files.downloadFile(file, async (decryptedBytes, progress) => {
+      const result = await this.application.files.downloadFile(file, async (decryptedBytes, progress) => {
         if (isUsingStreamingSaver) {
           await saver.pushBytes(decryptedBytes)
         } else {
@@ -51,6 +51,10 @@ export class FilesState {
         }
       })
 
+      if (result instanceof ClientDisplayableError) {
+        throw new Error(result.text)
+      }
+
       if (isUsingStreamingSaver) {
         await saver.finish()
       } else {

From 034cae7b626ea74f169da4905fb43a22c9e3e2e6 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Mon, 9 May 2022 13:57:37 -0500
Subject: [PATCH 071/102] refactor: vaults to private workspace (#1019)

* refactor: vaults to private workspace

* chore: fix types
---
 .../AccountMenu/AdvancedOptions.tsx           | 81 ++++++++++---------
 .../Components/AccountMenu/CreateAccount.tsx  | 18 +++--
 .../Components/AccountMenu/SignIn.tsx         | 16 ++--
 package.json                                  |  2 +-
 yarn.lock                                     | 58 ++++++-------
 5 files changed, 91 insertions(+), 84 deletions(-)

diff --git a/app/assets/javascripts/Components/AccountMenu/AdvancedOptions.tsx b/app/assets/javascripts/Components/AccountMenu/AdvancedOptions.tsx
index 266660f11..a9f62e42f 100644
--- a/app/assets/javascripts/Components/AccountMenu/AdvancedOptions.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/AdvancedOptions.tsx
@@ -11,53 +11,56 @@ type Props = {
   application: WebApplication
   appState: AppState
   disabled?: boolean
-  onVaultChange?: (isVault: boolean, vaultedEmail?: string) => void
+  onPrivateWorkspaceChange?: (isPrivate: boolean, identifier?: string) => void
   onStrictSignInChange?: (isStrictSignIn: boolean) => void
 }
 
 export const AdvancedOptions: FunctionComponent<Props> = observer(
-  ({ appState, application, disabled = false, onVaultChange, onStrictSignInChange, children }) => {
+  ({ appState, application, disabled = false, onPrivateWorkspaceChange, onStrictSignInChange, children }) => {
     const { server, setServer, enableServerOption, setEnableServerOption } = appState.accountMenu
     const [showAdvanced, setShowAdvanced] = useState(false)
 
-    const [isVault, setIsVault] = useState(false)
-    const [vaultName, setVaultName] = useState('')
-    const [vaultUserphrase, setVaultUserphrase] = useState('')
+    const [isPrivateWorkspace, setIsPrivateWorkspace] = useState(false)
+    const [privateWorkspaceName, setPrivateWorkspaceName] = useState('')
+    const [privateWorkspaceUserphrase, setPrivateWorkspaceUserphrase] = useState('')
 
     const [isStrictSignin, setIsStrictSignin] = useState(false)
 
     useEffect(() => {
-      const recomputeVaultedEmail = async () => {
-        const vaultedEmail = await application.vaultToEmail(vaultName, vaultUserphrase)
+      const recomputePrivateWorkspaceIdentifier = async () => {
+        const identifier = await application.computePrivateWorkspaceIdentifier(
+          privateWorkspaceName,
+          privateWorkspaceUserphrase,
+        )
 
-        if (!vaultedEmail) {
-          if (vaultName?.length > 0 && vaultUserphrase?.length > 0) {
-            application.alertService.alert('Unable to compute vault name.').catch(console.error)
+        if (!identifier) {
+          if (privateWorkspaceName?.length > 0 && privateWorkspaceUserphrase?.length > 0) {
+            application.alertService.alert('Unable to compute private workspace name.').catch(console.error)
           }
           return
         }
-        onVaultChange?.(true, vaultedEmail)
+        onPrivateWorkspaceChange?.(true, identifier)
       }
 
-      if (vaultName && vaultUserphrase) {
-        recomputeVaultedEmail().catch(console.error)
+      if (privateWorkspaceName && privateWorkspaceUserphrase) {
+        recomputePrivateWorkspaceIdentifier().catch(console.error)
       }
-    }, [vaultName, vaultUserphrase, application, onVaultChange])
+    }, [privateWorkspaceName, privateWorkspaceUserphrase, application, onPrivateWorkspaceChange])
 
     useEffect(() => {
-      onVaultChange?.(isVault)
-    }, [isVault, onVaultChange])
+      onPrivateWorkspaceChange?.(isPrivateWorkspace)
+    }, [isPrivateWorkspace, onPrivateWorkspaceChange])
 
-    const handleIsVaultChange = () => {
-      setIsVault(!isVault)
+    const handleIsPrivateWorkspaceChange = () => {
+      setIsPrivateWorkspace(!isPrivateWorkspace)
     }
 
-    const handleVaultNameChange = (name: string) => {
-      setVaultName(name)
+    const handlePrivateWorkspaceNameChange = (name: string) => {
+      setPrivateWorkspaceName(name)
     }
 
-    const handleVaultUserphraseChange = (userphrase: string) => {
-      setVaultUserphrase(userphrase)
+    const handlePrivateWorkspaceUserphraseChange = (userphrase: string) => {
+      setPrivateWorkspaceUserphrase(userphrase)
     }
 
     const handleServerOptionChange = (e: Event) => {
@@ -99,11 +102,11 @@ export const AdvancedOptions: FunctionComponent<Props> = observer(
             {appState.enableUnfinishedFeatures && (
               <div className="flex justify-between items-center mb-1">
                 <Checkbox
-                  name="vault-mode"
-                  label="Vault Mode"
-                  checked={isVault}
+                  name="private-workspace"
+                  label="Private workspace"
+                  checked={isPrivateWorkspace}
                   disabled={disabled}
-                  onChange={handleIsVaultChange}
+                  onChange={handleIsPrivateWorkspaceChange}
                 />
                 <a
                   href="https://standardnotes.com/help/80"
@@ -116,24 +119,24 @@ export const AdvancedOptions: FunctionComponent<Props> = observer(
               </div>
             )}
 
-            {appState.enableUnfinishedFeatures && isVault && (
+            {appState.enableUnfinishedFeatures && isPrivateWorkspace && (
               <>
-                <DecoratedInput
-                  className={'mb-2'}
-                  left={[<Icon type="folder" className="color-neutral" />]}
-                  type="text"
-                  placeholder="Vault name"
-                  value={vaultName}
-                  onChange={handleVaultNameChange}
-                  disabled={disabled}
-                />
                 <DecoratedInput
                   className={'mb-2'}
                   left={[<Icon type="server" className="color-neutral" />]}
                   type="text"
-                  placeholder="Vault userphrase"
-                  value={vaultUserphrase}
-                  onChange={handleVaultUserphraseChange}
+                  placeholder="Userphrase"
+                  value={privateWorkspaceUserphrase}
+                  onChange={handlePrivateWorkspaceUserphraseChange}
+                  disabled={disabled}
+                />
+                <DecoratedInput
+                  className={'mb-2'}
+                  left={[<Icon type="folder" className="color-neutral" />]}
+                  type="text"
+                  placeholder="Name"
+                  value={privateWorkspaceName}
+                  onChange={handlePrivateWorkspaceNameChange}
                   disabled={disabled}
                 />
               </>
diff --git a/app/assets/javascripts/Components/AccountMenu/CreateAccount.tsx b/app/assets/javascripts/Components/AccountMenu/CreateAccount.tsx
index 0c3a4d78f..91127a0d3 100644
--- a/app/assets/javascripts/Components/AccountMenu/CreateAccount.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/CreateAccount.tsx
@@ -25,7 +25,7 @@ export const CreateAccount: FunctionComponent<Props> = observer(
   ({ appState, application, setMenuPane, email, setEmail, password, setPassword }) => {
     const emailInputRef = useRef<HTMLInputElement>(null)
     const passwordInputRef = useRef<HTMLInputElement>(null)
-    const [isVault, setIsVault] = useState(false)
+    const [isPrivateWorkspace, setIsPrivateWorkspace] = useState(false)
 
     useEffect(() => {
       if (emailInputRef.current) {
@@ -71,10 +71,10 @@ export const CreateAccount: FunctionComponent<Props> = observer(
       setPassword('')
     }
 
-    const onVaultChange = (isVault: boolean, vaultedEmail?: string) => {
-      setIsVault(isVault)
-      if (isVault && vaultedEmail) {
-        setEmail(vaultedEmail)
+    const onPrivateWorkspaceChange = (isPrivateWorkspace: boolean, privateWorkspaceIdentifier?: string) => {
+      setIsPrivateWorkspace(isPrivateWorkspace)
+      if (isPrivateWorkspace && privateWorkspaceIdentifier) {
+        setEmail(privateWorkspaceIdentifier)
       }
     }
 
@@ -93,7 +93,7 @@ export const CreateAccount: FunctionComponent<Props> = observer(
         <form onSubmit={handleRegisterFormSubmit} className="px-3 mb-1">
           <DecoratedInput
             className="mb-2"
-            disabled={isVault}
+            disabled={isPrivateWorkspace}
             left={[<Icon type="email" className="color-neutral" />]}
             onChange={handleEmailChange}
             onKeyDown={handleKeyDown}
@@ -114,7 +114,11 @@ export const CreateAccount: FunctionComponent<Props> = observer(
           <Button className="btn-w-full mt-1" label="Next" variant="primary" onClick={handleRegisterFormSubmit} />
         </form>
         <div className="h-1px my-2 bg-border"></div>
-        <AdvancedOptions application={application} appState={appState} onVaultChange={onVaultChange} />
+        <AdvancedOptions
+          application={application}
+          appState={appState}
+          onPrivateWorkspaceChange={onPrivateWorkspaceChange}
+        />
       </>
     )
   },
diff --git a/app/assets/javascripts/Components/AccountMenu/SignIn.tsx b/app/assets/javascripts/Components/AccountMenu/SignIn.tsx
index a05b71bbd..20ce1e013 100644
--- a/app/assets/javascripts/Components/AccountMenu/SignIn.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/SignIn.tsx
@@ -29,7 +29,7 @@ export const SignInPane: FunctionComponent<Props> = observer(({ application, app
   const [isStrictSignin, setIsStrictSignin] = useState(false)
   const [isSigningIn, setIsSigningIn] = useState(false)
   const [shouldMergeLocal, setShouldMergeLocal] = useState(true)
-  const [isVault, setIsVault] = useState(false)
+  const [isPrivateWorkspace, setIsPrivateWorkspace] = useState(false)
 
   const emailInputRef = useRef<HTMLInputElement>(null)
   const passwordInputRef = useRef<HTMLInputElement>(null)
@@ -103,11 +103,11 @@ export const SignInPane: FunctionComponent<Props> = observer(({ application, app
     }
   }
 
-  const onVaultChange = useCallback(
-    (newIsVault: boolean, vaultedEmail?: string) => {
-      setIsVault(newIsVault)
-      if (newIsVault && vaultedEmail) {
-        setEmail(vaultedEmail)
+  const onPrivateWorkspaceChange = useCallback(
+    (newIsPrivateWorkspace: boolean, privateWorkspaceIdentifier?: string) => {
+      setIsPrivateWorkspace(newIsPrivateWorkspace)
+      if (newIsPrivateWorkspace && privateWorkspaceIdentifier) {
+        setEmail(privateWorkspaceIdentifier)
       }
     },
     [setEmail],
@@ -152,7 +152,7 @@ export const SignInPane: FunctionComponent<Props> = observer(({ application, app
           onChange={handleEmailChange}
           onFocus={resetInvalid}
           onKeyDown={handleKeyDown}
-          disabled={isSigningIn || isVault}
+          disabled={isSigningIn || isPrivateWorkspace}
           ref={emailInputRef}
         />
         <DecoratedPasswordInput
@@ -196,7 +196,7 @@ export const SignInPane: FunctionComponent<Props> = observer(({ application, app
         appState={appState}
         application={application}
         disabled={isSigningIn}
-        onVaultChange={onVaultChange}
+        onPrivateWorkspaceChange={onPrivateWorkspaceChange}
         onStrictSignInChange={handleStrictSigninChange}
       />
     </>
diff --git a/package.json b/package.json
index 383f19f31..c44101efd 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
     "@standardnotes/components": "1.8.0",
     "@standardnotes/filepicker": "1.13.7",
     "@standardnotes/sncrypto-web": "1.9.2",
-    "@standardnotes/snjs": "2.106.5",
+    "@standardnotes/snjs": "2.106.7",
     "@standardnotes/stylekit": "5.25.0",
     "@zip.js/zip.js": "^2.4.10",
     "mobx": "^6.5.0",
diff --git a/yarn.lock b/yarn.lock
index dbfad97a0..1d97488c6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2461,14 +2461,14 @@
     "@standardnotes/auth" "^3.18.13"
     "@standardnotes/features" "^1.41.0"
 
-"@standardnotes/encryption@^1.6.6":
-  version "1.6.6"
-  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.6.6.tgz#c341a4d3cdbb23adbddfcf184207fef68f298312"
-  integrity sha512-qLnQ1DndlNaWzOMPgUnT8hZ5om0cBlueFUnuQT4uCGVoTLdbGLNNjjoOTymfFRZ4NJ3ZaeBVFbur0p4l4WRG6A==
+"@standardnotes/encryption@^1.6.8":
+  version "1.6.8"
+  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.6.8.tgz#a6bc8fc9a0224eaabfab3959f2594d9b3176c09a"
+  integrity sha512-eOb+U4c7/YhBIQa2T5rmtpNBdbke6ycBa6XixkD1JHv5qsCiQTrO1wuiyl+Md4wr7nnntg3/HM56cwqOChqwdQ==
   dependencies:
-    "@standardnotes/models" "^1.6.7"
+    "@standardnotes/models" "^1.6.8"
     "@standardnotes/responses" "^1.6.17"
-    "@standardnotes/services" "^1.10.6"
+    "@standardnotes/services" "^1.10.7"
 
 "@standardnotes/features@^1.41.0":
   version "1.41.0"
@@ -2486,20 +2486,20 @@
     "@standardnotes/common" "^1.19.8"
     "@standardnotes/utils" "^1.6.6"
 
-"@standardnotes/files@^1.0.10":
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.0.10.tgz#dac27cf777f948962935427132a82f6ad3a87f5d"
-  integrity sha512-+4JgKIVEklJTV6oY7b8Mg0cYhApXrzINd3gMMbWhva2dzSQX8OsdBfNpgHDL8D4SQ8UbwvVjJd19usWXwmTcZQ==
+"@standardnotes/files@^1.0.11":
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.0.11.tgz#d80e1c7f32bba97316f208fcddd9ed67b27d9bb7"
+  integrity sha512-lwgIoyXRsVIeOUspHAZadlvBIN/kloz4eZPoyernIQTZ3V74WReqBJZtexf+VOArJX9Ded0jUD7cQ4kk4joRRA==
   dependencies:
-    "@standardnotes/models" "^1.6.7"
+    "@standardnotes/models" "^1.6.8"
     "@standardnotes/responses" "^1.6.17"
-    "@standardnotes/services" "^1.10.6"
+    "@standardnotes/services" "^1.10.7"
     "@standardnotes/utils" "^1.6.6"
 
-"@standardnotes/models@^1.6.7":
-  version "1.6.7"
-  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.6.7.tgz#b59f597ab9ec80d93be3b0578cb995022d5e659c"
-  integrity sha512-H9+tjD2uzrpwxj+QCA79d2xRELJWGAKDN7jds0m8GMSg+6TFeFhv7qghQkr2FYsbkf8GrBfA42N5iYNRr1dBDA==
+"@standardnotes/models@^1.6.8":
+  version "1.6.8"
+  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.6.8.tgz#e5223cc5c3c17ade58f1a74afe144739ced4831e"
+  integrity sha512-6RZ4G7Km78YYFMsY0HtSH1C9mX0ZU3Ohs74aArMTk1pPRWASsSrlDU7pafcC7Jy/cSropVf1PwR5kkR/TXMqnw==
   dependencies:
     "@standardnotes/features" "^1.41.0"
     "@standardnotes/responses" "^1.6.17"
@@ -2514,14 +2514,14 @@
     "@standardnotes/common" "^1.19.8"
     "@standardnotes/features" "^1.41.0"
 
-"@standardnotes/services@^1.10.6":
-  version "1.10.6"
-  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.10.6.tgz#7b2cacc7c454e830ad89e2adcb5f0abe048daeff"
-  integrity sha512-TxNlve/IzoREpih/wodUkK/XX1mrhM4eHHv4z1E/Qx2ac1gc3wX2s4sNWBjUNqb/G5qMYeIwLn7Iy882I655DA==
+"@standardnotes/services@^1.10.7":
+  version "1.10.7"
+  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.10.7.tgz#27d6210048f01d949f66c1b4a993e46434bebba5"
+  integrity sha512-AxpyEAbSqLV9UGXQYcxRtZgyW1t9akINiESTUKP+AzEJQCWKu6z694z8RO3UYCmd5R7RYUXQwl4N226kxF2mzw==
   dependencies:
     "@standardnotes/auth" "^3.18.13"
     "@standardnotes/common" "^1.19.8"
-    "@standardnotes/models" "^1.6.7"
+    "@standardnotes/models" "^1.6.8"
     "@standardnotes/responses" "^1.6.17"
     "@standardnotes/utils" "^1.6.6"
 
@@ -2544,21 +2544,21 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.106.5":
-  version "2.106.5"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.106.5.tgz#14637de4dbf5f8960cba2492cd0041f88b5505a3"
-  integrity sha512-HfE998o4gs9wGb1F6pmQJXcSylfuJRwBDtMZDxuSHnGeiTb+iRJFiR5O259QebxABeK8XSJ7h1WoOYV75EMxuQ==
+"@standardnotes/snjs@2.106.7":
+  version "2.106.7"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.106.7.tgz#986b4c5f42dc1304bc31f4aabacd4f846accd674"
+  integrity sha512-Vks0HvdsHC+kA8roArS3XoORUDtoplibQrxhah/G9ayUXbcymPb+AKNYCwfZakCE70s6gtxjdPmAuwWA8oV6Rg==
   dependencies:
     "@standardnotes/auth" "^3.18.13"
     "@standardnotes/common" "^1.19.8"
     "@standardnotes/domain-events" "^2.28.0"
-    "@standardnotes/encryption" "^1.6.6"
+    "@standardnotes/encryption" "^1.6.8"
     "@standardnotes/features" "^1.41.0"
     "@standardnotes/filepicker" "^1.13.7"
-    "@standardnotes/files" "^1.0.10"
-    "@standardnotes/models" "^1.6.7"
+    "@standardnotes/files" "^1.0.11"
+    "@standardnotes/models" "^1.6.8"
     "@standardnotes/responses" "^1.6.17"
-    "@standardnotes/services" "^1.10.6"
+    "@standardnotes/services" "^1.10.7"
     "@standardnotes/settings" "^1.14.3"
     "@standardnotes/sncrypto-common" "^1.8.2"
     "@standardnotes/utils" "^1.6.6"

From f623afeed8528cbdb7e4bdcee73ed284380dcbb1 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Mon, 9 May 2022 17:01:43 -0500
Subject: [PATCH 072/102] feat: remove unfinished flag for private workspaces

---
 .../AccountMenu/AdvancedOptions.tsx           | 33 ++++++++-----------
 1 file changed, 13 insertions(+), 20 deletions(-)

diff --git a/app/assets/javascripts/Components/AccountMenu/AdvancedOptions.tsx b/app/assets/javascripts/Components/AccountMenu/AdvancedOptions.tsx
index a9f62e42f..469f7a2e7 100644
--- a/app/assets/javascripts/Components/AccountMenu/AdvancedOptions.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/AdvancedOptions.tsx
@@ -99,27 +99,20 @@ export const AdvancedOptions: FunctionComponent<Props> = observer(
           <div className="px-3 my-2">
             {children}
 
-            {appState.enableUnfinishedFeatures && (
-              <div className="flex justify-between items-center mb-1">
-                <Checkbox
-                  name="private-workspace"
-                  label="Private workspace"
-                  checked={isPrivateWorkspace}
-                  disabled={disabled}
-                  onChange={handleIsPrivateWorkspaceChange}
-                />
-                <a
-                  href="https://standardnotes.com/help/80"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  title="Learn more"
-                >
-                  <Icon type="info" className="color-neutral" />
-                </a>
-              </div>
-            )}
+            <div className="flex justify-between items-center mb-1">
+              <Checkbox
+                name="private-workspace"
+                label="Private workspace"
+                checked={isPrivateWorkspace}
+                disabled={disabled}
+                onChange={handleIsPrivateWorkspaceChange}
+              />
+              <a href="https://standardnotes.com/help/80" target="_blank" rel="noopener noreferrer" title="Learn more">
+                <Icon type="info" className="color-neutral" />
+              </a>
+            </div>
 
-            {appState.enableUnfinishedFeatures && isPrivateWorkspace && (
+            {isPrivateWorkspace && (
               <>
                 <DecoratedInput
                   className={'mb-2'}

From fa5ebca2ee7753d0867c7b66095c21a36366a89e Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Mon, 9 May 2022 17:39:38 -0500
Subject: [PATCH 073/102] chore: bump deps and version

---
 package.json |   4 +-
 yarn.lock    | 102 +++++++++++++++++++++++++--------------------------
 2 files changed, 53 insertions(+), 53 deletions(-)

diff --git a/package.json b/package.json
index c44101efd..288a328aa 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "standard-notes-web",
-  "version": "3.15.0",
+  "version": "3.20.0",
   "license": "AGPL-3.0-or-later",
   "repository": {
     "type": "git",
@@ -72,7 +72,7 @@
     "@standardnotes/components": "1.8.0",
     "@standardnotes/filepicker": "1.13.7",
     "@standardnotes/sncrypto-web": "1.9.2",
-    "@standardnotes/snjs": "2.106.7",
+    "@standardnotes/snjs": "2.106.8",
     "@standardnotes/stylekit": "5.25.0",
     "@zip.js/zip.js": "^2.4.10",
     "mobx": "^6.5.0",
diff --git a/yarn.lock b/yarn.lock
index 1d97488c6..6da0babd6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2453,27 +2453,27 @@
     eslint-plugin-prettier "^4.0.0"
     prettier "^2.6.2"
 
-"@standardnotes/domain-events@^2.28.0":
-  version "2.28.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.28.0.tgz#f2b52ef0f38463b5eb55161b0739dbc88c9f127c"
-  integrity sha512-e8pj/2H3cftU/KBqyJeab6Gl41jERrCCUGPA749l8Myl/HcrvquKoYTg23wnMt5cCDAFjqdcCzLvsmsKQcD4Yg==
+"@standardnotes/domain-events@^2.28.1":
+  version "2.28.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.28.1.tgz#473350cf867b5af9f18d19cdf5e772f37f11a621"
+  integrity sha512-1IjE0HA30AwzZ/7RZkVYUQNgWbkRSB8h3xFsbuCLvBUfl/lXrDlHvD2CZMUGKPXlMHBjRivW/r8f7FjDlXNJ9w==
   dependencies:
     "@standardnotes/auth" "^3.18.13"
-    "@standardnotes/features" "^1.41.0"
+    "@standardnotes/features" "^1.42.0"
 
-"@standardnotes/encryption@^1.6.8":
-  version "1.6.8"
-  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.6.8.tgz#a6bc8fc9a0224eaabfab3959f2594d9b3176c09a"
-  integrity sha512-eOb+U4c7/YhBIQa2T5rmtpNBdbke6ycBa6XixkD1JHv5qsCiQTrO1wuiyl+Md4wr7nnntg3/HM56cwqOChqwdQ==
+"@standardnotes/encryption@^1.6.9":
+  version "1.6.9"
+  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.6.9.tgz#9d039016d7dd6b12c1ba33f038bbfbfdb2632e3b"
+  integrity sha512-0yoNf4x/E4yDWOcnXsHxAdYAR873xpcxq/BJCCR/UDHD+Oz9Rs+oidokMxsWfYkNv1KCwEYsrF7y1QU+gSzN3Q==
   dependencies:
-    "@standardnotes/models" "^1.6.8"
-    "@standardnotes/responses" "^1.6.17"
-    "@standardnotes/services" "^1.10.7"
+    "@standardnotes/models" "^1.6.9"
+    "@standardnotes/responses" "^1.6.18"
+    "@standardnotes/services" "^1.10.8"
 
-"@standardnotes/features@^1.41.0":
-  version "1.41.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.41.0.tgz#d6aaea9bf98bfb4bf3f95b8ee7bdc0e6eea15f2a"
-  integrity sha512-Ku0eT9nfpAYsD6dfmbaU13ir5FK42n59j3br9nnKLsPCgC4+/AbIukZ4qWfCetV2Ttiy2odBnCdDBc0Lor35pw==
+"@standardnotes/features@^1.42.0":
+  version "1.42.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.42.0.tgz#154171a8436f68bef1f9e797415feea04f60b0c2"
+  integrity sha512-W79WVV68jWwG0CtiYcT/51N7/IIOCPbkL5UBjKLcZ3XNUoptVTFYvHd+UDhdkc3DuMPghjDghD7pQS7W4KdbVA==
   dependencies:
     "@standardnotes/auth" "^3.18.13"
     "@standardnotes/common" "^1.19.8"
@@ -2486,43 +2486,43 @@
     "@standardnotes/common" "^1.19.8"
     "@standardnotes/utils" "^1.6.6"
 
-"@standardnotes/files@^1.0.11":
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.0.11.tgz#d80e1c7f32bba97316f208fcddd9ed67b27d9bb7"
-  integrity sha512-lwgIoyXRsVIeOUspHAZadlvBIN/kloz4eZPoyernIQTZ3V74WReqBJZtexf+VOArJX9Ded0jUD7cQ4kk4joRRA==
+"@standardnotes/files@^1.0.12":
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.0.12.tgz#3413d554ffc33e8a42855d1143422cb141fa0525"
+  integrity sha512-WnovZEA1Sy/b2tPUOay01y5leARbEO3obxLKhgLww0nKOwNBI6oT6TR/YTmBoDTff3Oj6ORUp4OYlYD4MY/zRg==
   dependencies:
-    "@standardnotes/models" "^1.6.8"
-    "@standardnotes/responses" "^1.6.17"
-    "@standardnotes/services" "^1.10.7"
+    "@standardnotes/models" "^1.6.9"
+    "@standardnotes/responses" "^1.6.18"
+    "@standardnotes/services" "^1.10.8"
     "@standardnotes/utils" "^1.6.6"
 
-"@standardnotes/models@^1.6.8":
-  version "1.6.8"
-  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.6.8.tgz#e5223cc5c3c17ade58f1a74afe144739ced4831e"
-  integrity sha512-6RZ4G7Km78YYFMsY0HtSH1C9mX0ZU3Ohs74aArMTk1pPRWASsSrlDU7pafcC7Jy/cSropVf1PwR5kkR/TXMqnw==
+"@standardnotes/models@^1.6.9":
+  version "1.6.9"
+  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.6.9.tgz#2cc95861e5cb057de499d396f8711a1370c4c273"
+  integrity sha512-eIaw0CF9Jx/MYmKLgBPK9mkfbPZdrBnpiRaYWl/E8WSX0fepzCy/dv3kW8DGY+5WNSk4Hm8Vwf8XCG9LAixMqw==
   dependencies:
-    "@standardnotes/features" "^1.41.0"
-    "@standardnotes/responses" "^1.6.17"
+    "@standardnotes/features" "^1.42.0"
+    "@standardnotes/responses" "^1.6.18"
     "@standardnotes/utils" "^1.6.6"
 
-"@standardnotes/responses@^1.6.17":
-  version "1.6.17"
-  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.6.17.tgz#14bc4dfedecf21be851f60b9fbc0a5c1d2336cd8"
-  integrity sha512-L98sC1KjRYPPIilg1jitDqdiUYgqxz2Vw7TBCL1CzWUXI/rfFeqWMrnKjastQ9125+W+FgOQZAdUD1moG0b+qg==
+"@standardnotes/responses@^1.6.18":
+  version "1.6.18"
+  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.6.18.tgz#ad448cfe78449f7cef27b9ff169635ef6dca3476"
+  integrity sha512-Onmhxd8zKbFGJ3ECbD1yuGqiY58JV/FE7PymNT8WL6P1CuThzqQ3V6hS10tswJgbu50A570i1uBg7i+WjyaHiA==
   dependencies:
     "@standardnotes/auth" "^3.18.13"
     "@standardnotes/common" "^1.19.8"
-    "@standardnotes/features" "^1.41.0"
+    "@standardnotes/features" "^1.42.0"
 
-"@standardnotes/services@^1.10.7":
-  version "1.10.7"
-  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.10.7.tgz#27d6210048f01d949f66c1b4a993e46434bebba5"
-  integrity sha512-AxpyEAbSqLV9UGXQYcxRtZgyW1t9akINiESTUKP+AzEJQCWKu6z694z8RO3UYCmd5R7RYUXQwl4N226kxF2mzw==
+"@standardnotes/services@^1.10.8":
+  version "1.10.8"
+  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.10.8.tgz#44b989acb1ab3a7682a7ae8e3ab84dbe2bde909e"
+  integrity sha512-VK/g+KYehj3G/kyzYb8GSobMhUqhG+nINrg7Eazi59M5gK1ARWe7nG9ZWNj3x5mjqUOhufJ2P8ISZnd1/Yn0ow==
   dependencies:
     "@standardnotes/auth" "^3.18.13"
     "@standardnotes/common" "^1.19.8"
-    "@standardnotes/models" "^1.6.8"
-    "@standardnotes/responses" "^1.6.17"
+    "@standardnotes/models" "^1.6.9"
+    "@standardnotes/responses" "^1.6.18"
     "@standardnotes/utils" "^1.6.6"
 
 "@standardnotes/settings@^1.14.3":
@@ -2544,21 +2544,21 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.106.7":
-  version "2.106.7"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.106.7.tgz#986b4c5f42dc1304bc31f4aabacd4f846accd674"
-  integrity sha512-Vks0HvdsHC+kA8roArS3XoORUDtoplibQrxhah/G9ayUXbcymPb+AKNYCwfZakCE70s6gtxjdPmAuwWA8oV6Rg==
+"@standardnotes/snjs@2.106.8":
+  version "2.106.8"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.106.8.tgz#e8767bc5de5696fd181aeea2736877222bd7190c"
+  integrity sha512-r0h4X70W3eMGo4zu5xDnim0FNC8hgNQhjLE+l9jHjp5FriNaniMPuTXGEnGY5XxyO68tOMvOic++1EAfQpSAVw==
   dependencies:
     "@standardnotes/auth" "^3.18.13"
     "@standardnotes/common" "^1.19.8"
-    "@standardnotes/domain-events" "^2.28.0"
-    "@standardnotes/encryption" "^1.6.8"
-    "@standardnotes/features" "^1.41.0"
+    "@standardnotes/domain-events" "^2.28.1"
+    "@standardnotes/encryption" "^1.6.9"
+    "@standardnotes/features" "^1.42.0"
     "@standardnotes/filepicker" "^1.13.7"
-    "@standardnotes/files" "^1.0.11"
-    "@standardnotes/models" "^1.6.8"
-    "@standardnotes/responses" "^1.6.17"
-    "@standardnotes/services" "^1.10.7"
+    "@standardnotes/files" "^1.0.12"
+    "@standardnotes/models" "^1.6.9"
+    "@standardnotes/responses" "^1.6.18"
+    "@standardnotes/services" "^1.10.8"
     "@standardnotes/settings" "^1.14.3"
     "@standardnotes/sncrypto-common" "^1.8.2"
     "@standardnotes/utils" "^1.6.6"

From 026a26ac045fb4bf8a94be473cd65e2c992702fd Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Tue, 10 May 2022 07:40:39 -0500
Subject: [PATCH 074/102] chore: bump snjs

---
 package.json |  2 +-
 yarn.lock    | 58 ++++++++++++++++++++++++++--------------------------
 2 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index 288a328aa..66beb7bfb 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
     "@standardnotes/components": "1.8.0",
     "@standardnotes/filepicker": "1.13.7",
     "@standardnotes/sncrypto-web": "1.9.2",
-    "@standardnotes/snjs": "2.106.8",
+    "@standardnotes/snjs": "2.106.9",
     "@standardnotes/stylekit": "5.25.0",
     "@zip.js/zip.js": "^2.4.10",
     "mobx": "^6.5.0",
diff --git a/yarn.lock b/yarn.lock
index 6da0babd6..6b6aee0db 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2461,14 +2461,14 @@
     "@standardnotes/auth" "^3.18.13"
     "@standardnotes/features" "^1.42.0"
 
-"@standardnotes/encryption@^1.6.9":
-  version "1.6.9"
-  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.6.9.tgz#9d039016d7dd6b12c1ba33f038bbfbfdb2632e3b"
-  integrity sha512-0yoNf4x/E4yDWOcnXsHxAdYAR873xpcxq/BJCCR/UDHD+Oz9Rs+oidokMxsWfYkNv1KCwEYsrF7y1QU+gSzN3Q==
+"@standardnotes/encryption@^1.6.10":
+  version "1.6.10"
+  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.6.10.tgz#054bb07e2d49e8b6ec690219c71e4d567838d8aa"
+  integrity sha512-S89WpBqEPnruFV4vMn8etfxKUAGL3StN+I70ujz61OI5ReZhOEf/DobQBFm2u/lSTtnvleEdThLsRp5QZZH0kA==
   dependencies:
-    "@standardnotes/models" "^1.6.9"
+    "@standardnotes/models" "^1.6.10"
     "@standardnotes/responses" "^1.6.18"
-    "@standardnotes/services" "^1.10.8"
+    "@standardnotes/services" "^1.10.9"
 
 "@standardnotes/features@^1.42.0":
   version "1.42.0"
@@ -2486,20 +2486,20 @@
     "@standardnotes/common" "^1.19.8"
     "@standardnotes/utils" "^1.6.6"
 
-"@standardnotes/files@^1.0.12":
-  version "1.0.12"
-  resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.0.12.tgz#3413d554ffc33e8a42855d1143422cb141fa0525"
-  integrity sha512-WnovZEA1Sy/b2tPUOay01y5leARbEO3obxLKhgLww0nKOwNBI6oT6TR/YTmBoDTff3Oj6ORUp4OYlYD4MY/zRg==
+"@standardnotes/files@^1.0.13":
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.0.13.tgz#45feff6f34c49f6a3a845c3b6e71cb25e0132fad"
+  integrity sha512-MISbGjXnjAIYIVUqalw3pKMoxXh5sVBbXYrWcpB8okiq/EcLHiVPhGkedxqjkELqzlM/fa3DkougmJBKWh43fQ==
   dependencies:
-    "@standardnotes/models" "^1.6.9"
+    "@standardnotes/models" "^1.6.10"
     "@standardnotes/responses" "^1.6.18"
-    "@standardnotes/services" "^1.10.8"
+    "@standardnotes/services" "^1.10.9"
     "@standardnotes/utils" "^1.6.6"
 
-"@standardnotes/models@^1.6.9":
-  version "1.6.9"
-  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.6.9.tgz#2cc95861e5cb057de499d396f8711a1370c4c273"
-  integrity sha512-eIaw0CF9Jx/MYmKLgBPK9mkfbPZdrBnpiRaYWl/E8WSX0fepzCy/dv3kW8DGY+5WNSk4Hm8Vwf8XCG9LAixMqw==
+"@standardnotes/models@^1.6.10":
+  version "1.6.10"
+  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.6.10.tgz#3a6142b849ed1d7973611011be44dcbefa6df461"
+  integrity sha512-EpxDvB7GVN+suPYCQ5QmDq/1NezPBVeAzfg56O1I5I8yhl1cyaqLmtSHcPGdgfgnQiio2kbTA16cta3YxtnG/g==
   dependencies:
     "@standardnotes/features" "^1.42.0"
     "@standardnotes/responses" "^1.6.18"
@@ -2514,14 +2514,14 @@
     "@standardnotes/common" "^1.19.8"
     "@standardnotes/features" "^1.42.0"
 
-"@standardnotes/services@^1.10.8":
-  version "1.10.8"
-  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.10.8.tgz#44b989acb1ab3a7682a7ae8e3ab84dbe2bde909e"
-  integrity sha512-VK/g+KYehj3G/kyzYb8GSobMhUqhG+nINrg7Eazi59M5gK1ARWe7nG9ZWNj3x5mjqUOhufJ2P8ISZnd1/Yn0ow==
+"@standardnotes/services@^1.10.9":
+  version "1.10.9"
+  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.10.9.tgz#44a79c8235bc7eaf55d66fc1e8df90ce1ecbceb7"
+  integrity sha512-009VuEWbSV9ULaabFodXIUnzLkOxuy8QTNNrXusQg30kY02dzxLqhh0F+t5YLc1SbVkk+n2/IahPTlUUaCKHQQ==
   dependencies:
     "@standardnotes/auth" "^3.18.13"
     "@standardnotes/common" "^1.19.8"
-    "@standardnotes/models" "^1.6.9"
+    "@standardnotes/models" "^1.6.10"
     "@standardnotes/responses" "^1.6.18"
     "@standardnotes/utils" "^1.6.6"
 
@@ -2544,21 +2544,21 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.106.8":
-  version "2.106.8"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.106.8.tgz#e8767bc5de5696fd181aeea2736877222bd7190c"
-  integrity sha512-r0h4X70W3eMGo4zu5xDnim0FNC8hgNQhjLE+l9jHjp5FriNaniMPuTXGEnGY5XxyO68tOMvOic++1EAfQpSAVw==
+"@standardnotes/snjs@2.106.9":
+  version "2.106.9"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.106.9.tgz#34197275ec2ebfd4522c63c091b47b5c974fcaac"
+  integrity sha512-B/kujDluQNs/xYpRaWYvEWpfflYnLhl4ugW3r15WgcLJSjSLreBOVLaRWXhALl8I4e63rkRwMKeCiwrL7auXWg==
   dependencies:
     "@standardnotes/auth" "^3.18.13"
     "@standardnotes/common" "^1.19.8"
     "@standardnotes/domain-events" "^2.28.1"
-    "@standardnotes/encryption" "^1.6.9"
+    "@standardnotes/encryption" "^1.6.10"
     "@standardnotes/features" "^1.42.0"
     "@standardnotes/filepicker" "^1.13.7"
-    "@standardnotes/files" "^1.0.12"
-    "@standardnotes/models" "^1.6.9"
+    "@standardnotes/files" "^1.0.13"
+    "@standardnotes/models" "^1.6.10"
     "@standardnotes/responses" "^1.6.18"
-    "@standardnotes/services" "^1.10.8"
+    "@standardnotes/services" "^1.10.9"
     "@standardnotes/settings" "^1.14.3"
     "@standardnotes/sncrypto-common" "^1.8.2"
     "@standardnotes/utils" "^1.6.6"

From d7ba3935edd97f8f6cf52d02916220f429e4daac Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Tue, 10 May 2022 10:32:05 -0500
Subject: [PATCH 075/102] feat: files related improvements

---
 .../AttachedFilesButton.tsx                   | 10 +++--
 .../Components/Files/FilePreviewInfoPanel.tsx |  5 ++-
 .../Components/NoteView/NoteView.tsx          | 16 +++----
 .../Components/NotesList/NotesListItem.tsx    |  6 +++
 .../Preferences/Panes/Account/index.tsx       |  2 +-
 .../Components/PremiumFeaturesModal/index.tsx |  4 +-
 .../UIModels/AppState/FeaturesState.ts        | 45 +++++++------------
 7 files changed, 42 insertions(+), 46 deletions(-)

diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
index ca55425fd..78799a23f 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
@@ -72,7 +72,7 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
     }, [application, note])
 
     const toggleAttachedFilesMenu = useCallback(async () => {
-      if (!appState.features.isEntitledToFiles) {
+      if (!appState.features.hasFiles) {
         premiumModal.activate('Files')
         return
       }
@@ -99,7 +99,7 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
 
         setOpen(newOpenState)
       }
-    }, [appState.features.isEntitledToFiles, onClickPreprocessing, open, premiumModal])
+    }, [appState.features.hasFiles, onClickPreprocessing, open, premiumModal])
 
     const deleteFile = async (file: SNFile) => {
       const shouldDelete = await confirmDialog({
@@ -294,6 +294,10 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
 
         setIsDraggingFiles(false)
 
+        if (!appState.features.hasFiles) {
+          return
+        }
+
         if (event.dataTransfer?.items.length) {
           Array.from(event.dataTransfer.items).forEach(async (item) => {
             const fileOrHandle = StreamingFileReader.available()
@@ -321,7 +325,7 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
           dragCounter.current = 0
         }
       },
-      [appState.files, attachFileToNote, currentTab],
+      [appState.files, appState.features.hasFiles, attachFileToNote, currentTab],
     )
 
     useEffect(() => {
diff --git a/app/assets/javascripts/Components/Files/FilePreviewInfoPanel.tsx b/app/assets/javascripts/Components/Files/FilePreviewInfoPanel.tsx
index 2c6a1da76..b106e9acc 100644
--- a/app/assets/javascripts/Components/Files/FilePreviewInfoPanel.tsx
+++ b/app/assets/javascripts/Components/Files/FilePreviewInfoPanel.tsx
@@ -18,7 +18,10 @@ export const FilePreviewInfoPanel: FunctionComponent<Props> = ({ file }) => {
         <span className="font-semibold">Type:</span> {file.mimeType}
       </div>
       <div className="mb-3">
-        <span className="font-semibold">Size:</span> {formatSizeToReadableString(file.decryptedSize)}
+        <span className="font-semibold">Decrypted Size:</span> {formatSizeToReadableString(file.decryptedSize)}
+      </div>
+      <div className="mb-3">
+        <span className="font-semibold">Encrypted Size:</span> {formatSizeToReadableString(file.encryptedSize)}
       </div>
       <div className="mb-3">
         <span className="font-semibold">Created:</span> {file.created_at.toLocaleString()}
diff --git a/app/assets/javascripts/Components/NoteView/NoteView.tsx b/app/assets/javascripts/Components/NoteView/NoteView.tsx
index 1f2dc9c77..dd09f1a56 100644
--- a/app/assets/javascripts/Components/NoteView/NoteView.tsx
+++ b/app/assets/javascripts/Components/NoteView/NoteView.tsx
@@ -947,15 +947,13 @@ export class NoteView extends PureComponent<Props, State> {
                       {this.state.noteStatus?.desc && <div className="desc">{this.state.noteStatus.desc}</div>}
                     </div>
                   </div>
-                  {this.appState.features.isFilesEnabled && (
-                    <div className="mr-3">
-                      <AttachedFilesButton
-                        application={this.application}
-                        appState={this.appState}
-                        onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
-                      />
-                    </div>
-                  )}
+                  <div className="mr-3">
+                    <AttachedFilesButton
+                      application={this.application}
+                      appState={this.appState}
+                      onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
+                    />
+                  </div>
                   <div className="mr-3">
                     <ChangeEditorButton
                       application={this.application}
diff --git a/app/assets/javascripts/Components/NotesList/NotesListItem.tsx b/app/assets/javascripts/Components/NotesList/NotesListItem.tsx
index 03a33a262..329ba57d3 100644
--- a/app/assets/javascripts/Components/NotesList/NotesListItem.tsx
+++ b/app/assets/javascripts/Components/NotesList/NotesListItem.tsx
@@ -49,6 +49,7 @@ export const NotesListItem: FunctionComponent<Props> = ({
   tags,
 }) => {
   const flags = flagsForNote(note)
+  const hasFiles = application.items.getFilesForNote(note).length > 0
   const showModifiedDate = sortedBy === CollectionSort.UpdatedAt
   const editorForNote = application.componentManager.editorForNote(note)
   const editorName = editorForNote?.name ?? PLAIN_EDITOR_NAME
@@ -132,6 +133,11 @@ export const NotesListItem: FunctionComponent<Props> = ({
             <Icon ariaLabel="Pinned" type="pin-filled" className="sn-icon--small color-info" />
           </span>
         )}
+        {hasFiles && (
+          <span title="Files">
+            <Icon ariaLabel="Files" type="attachment-file" className="sn-icon--small color-info" />
+          </span>
+        )}
       </div>
     </div>
   )
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx
index 0f9f8fefe..bed91f9a0 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx
@@ -25,7 +25,7 @@ export const AccountPreferences = observer(({ application, appState }: Props) =>
       </>
     )}
     <Subscription application={application} appState={appState} />
-    {application.hasAccount() && appState.features.isEntitledToFiles && <FilesSection application={application} />}
+    {application.hasAccount() && appState.features.hasFiles && <FilesSection application={application} />}
     <SignOutWrapper application={application} appState={appState} />
   </PreferencesPane>
 ))
diff --git a/app/assets/javascripts/Components/PremiumFeaturesModal/index.tsx b/app/assets/javascripts/Components/PremiumFeaturesModal/index.tsx
index ae1be2c8f..e9a03f6e0 100644
--- a/app/assets/javascripts/Components/PremiumFeaturesModal/index.tsx
+++ b/app/assets/javascripts/Components/PremiumFeaturesModal/index.tsx
@@ -48,10 +48,10 @@ export const PremiumFeaturesModal: FunctionalComponent<Props> = ({
             <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>
+            <div className="text-lg text-center font-bold mb-1">Enable Advanced 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
+            In order to use <span className="font-semibold">{featureName}</span> and other advanced features, please
             purchase a subscription or upgrade your current plan.
           </AlertDialogDescription>
           <div className="p-4">
diff --git a/app/assets/javascripts/UIModels/AppState/FeaturesState.ts b/app/assets/javascripts/UIModels/AppState/FeaturesState.ts
index 8bcb2475e..f8b06bf2f 100644
--- a/app/assets/javascripts/UIModels/AppState/FeaturesState.ts
+++ b/app/assets/javascripts/UIModels/AppState/FeaturesState.ts
@@ -1,27 +1,23 @@
 import { WebApplication } from '@/UIModels/Application'
-import { isDev } from '@/Utils'
 import { ApplicationEvent, FeatureIdentifier, FeatureStatus } from '@standardnotes/snjs'
-import { action, computed, makeObservable, observable, runInAction, when } from 'mobx'
+import { action, makeObservable, observable, runInAction, when } from 'mobx'
 
 export class FeaturesState {
   hasFolders: boolean
   hasSmartViews: boolean
-  hasFilesBeta: boolean
+  hasFiles: boolean
   premiumAlertFeatureName: string | undefined
 
   constructor(private application: WebApplication, appObservers: (() => void)[]) {
-    this.hasFolders = this.hasNativeFolders()
-    this.hasSmartViews = this.hasNativeSmartViews()
-    this.hasFilesBeta = this.isEntitledToFilesBeta()
+    this.hasFolders = this.isEntitledToFolders()
+    this.hasSmartViews = this.isEntitledToSmartViews()
+    this.hasFiles = this.isEntitledToFiles()
     this.premiumAlertFeatureName = undefined
 
     makeObservable(this, {
       hasFolders: observable,
       hasSmartViews: observable,
-
-      hasFilesBeta: observable,
-      isFilesEnabled: computed,
-      isEntitledToFiles: computed,
+      hasFiles: observable,
 
       premiumAlertFeatureName: observable,
       showPremiumAlert: action,
@@ -37,9 +33,9 @@ export class FeaturesState {
           case ApplicationEvent.FeaturesUpdated:
           case ApplicationEvent.Launched:
             runInAction(() => {
-              this.hasFolders = this.hasNativeFolders()
-              this.hasSmartViews = this.hasNativeSmartViews()
-              this.hasFilesBeta = this.isEntitledToFilesBeta()
+              this.hasFolders = this.isEntitledToFolders()
+              this.hasSmartViews = this.isEntitledToSmartViews()
+              this.hasFiles = this.isEntitledToFiles()
             })
         }
       }),
@@ -55,32 +51,21 @@ export class FeaturesState {
     this.premiumAlertFeatureName = undefined
   }
 
-  get isFilesEnabled(): boolean {
-    return this.hasFilesBeta || window.enabledUnfinishedFeatures || isDev
+  private isEntitledToFiles(): boolean {
+    const status = this.application.features.getFeatureStatus(FeatureIdentifier.Files)
+
+    return status === FeatureStatus.Entitled
   }
 
-  get isEntitledToFiles(): boolean {
-    return this.hasFilesBeta
-  }
-
-  private hasNativeFolders(): boolean {
+  private isEntitledToFolders(): boolean {
     const status = this.application.features.getFeatureStatus(FeatureIdentifier.TagNesting)
 
     return status === FeatureStatus.Entitled
   }
 
-  private hasNativeSmartViews(): boolean {
+  private isEntitledToSmartViews(): boolean {
     const status = this.application.features.getFeatureStatus(FeatureIdentifier.SmartFilters)
 
     return status === FeatureStatus.Entitled
   }
-
-  private isEntitledToFilesBeta(): boolean {
-    if (isDev && this.application.hasAccount()) {
-      return true
-    }
-
-    const status = this.application.features.getFeatureStatus(FeatureIdentifier.FilesBeta)
-    return status === FeatureStatus.Entitled
-  }
 }

From 072af12ffec2050f29ee7c49b3786730ef1a81a3 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Tue, 10 May 2022 10:43:24 -0500
Subject: [PATCH 076/102] fix: dimmed tags issue on safari + increase tag
 density

---
 app/assets/stylesheets/_columns.scss    | 2 +-
 app/assets/stylesheets/_navigation.scss | 6 ++----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/_columns.scss b/app/assets/stylesheets/_columns.scss
index 5f020b4f1..9bf22927e 100644
--- a/app/assets/stylesheets/_columns.scss
+++ b/app/assets/stylesheets/_columns.scss
@@ -4,7 +4,7 @@
 }
 
 .app-column-first {
-  width: 180px;
+  width: 220px;
   flex-shrink: 0.2;
 }
 
diff --git a/app/assets/stylesheets/_navigation.scss b/app/assets/stylesheets/_navigation.scss
index 2b5f461ea..0b8628527 100644
--- a/app/assets/stylesheets/_navigation.scss
+++ b/app/assets/stylesheets/_navigation.scss
@@ -73,10 +73,7 @@ $content-horizontal-padding: 16px;
   .tag,
   .root-drop {
     font-size: 14px;
-    line-height: 18px;
-
-    min-height: 29px;
-    padding: 5px 14px;
+    padding: 4px 14px;
     cursor: pointer;
     transition: height 0.1s ease-in-out;
     position: relative;
@@ -127,6 +124,7 @@ $content-horizontal-padding: 16px;
         background-color: transparent;
         font-weight: 600;
         color: var(--sn-stylekit-secondary-foreground-color);
+        -webkit-text-fill-color: var(--sn-stylekit-secondary-foreground-color);
         border: none;
         cursor: pointer;
         text-overflow: ellipsis;

From ae1097f20771506f8539fc754009e49aa1e8661c Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 10 May 2022 21:54:12 +0530
Subject: [PATCH 077/102] fix: switching between previewable & non-previewable
 files (#1021)

---
 .../AttachedFilesPopover/AttachedFilesButton.tsx         | 9 +++++++--
 .../javascripts/Components/Files/FilePreviewModal.tsx    | 1 +
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
index 78799a23f..d555d94f9 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
@@ -210,10 +210,15 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
         case PopoverFileItemActionType.RenameFile:
           await renameFile(file, action.payload.name)
           break
-        case PopoverFileItemActionType.PreviewFile:
+        case PopoverFileItemActionType.PreviewFile: {
           keepMenuOpen(true)
-          appState.filePreviewModal.activate(file, currentTab === PopoverTabs.AllFiles ? allFiles : attachedFiles)
+          const otherFiles = currentTab === PopoverTabs.AllFiles ? allFiles : attachedFiles
+          appState.filePreviewModal.activate(
+            file,
+            otherFiles.filter((file) => !file.protected),
+          )
           break
+        }
       }
 
       if (
diff --git a/app/assets/javascripts/Components/Files/FilePreviewModal.tsx b/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
index 2fe6eccaf..42635ecc8 100644
--- a/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
+++ b/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
@@ -69,6 +69,7 @@ export const FilePreviewModal: FunctionComponent<Props> = observer(({ applicatio
     setIsFilePreviewable(isPreviewable)
 
     if (!isPreviewable) {
+      setObjectUrl('')
       setIsLoadingFile(false)
     }
 

From ada8d5ab80ca79f81e503f2cf3da98d3b319bcc5 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 10 May 2022 22:41:40 +0530
Subject: [PATCH 078/102] fix: popover closing on delete dialog (#1022)

---
 .../AttachedFilesPopover/AttachedFilesButton.tsx     |  2 +-
 app/assets/javascripts/Hooks/useCloseOnBlur.ts       | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
index d555d94f9..1ca005cdf 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
@@ -41,7 +41,7 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
     const buttonRef = useRef<HTMLButtonElement>(null)
     const panelRef = useRef<HTMLDivElement>(null)
     const containerRef = useRef<HTMLDivElement>(null)
-    const [closeOnBlur, keepMenuOpen] = useCloseOnBlur(containerRef, setOpen)
+    const [closeOnBlur, keepMenuOpen] = useCloseOnBlur(containerRef, setOpen, true)
 
     useEffect(() => {
       if (appState.filePreviewModal.isOpen) {
diff --git a/app/assets/javascripts/Hooks/useCloseOnBlur.ts b/app/assets/javascripts/Hooks/useCloseOnBlur.ts
index 0396859c5..9655a930c 100644
--- a/app/assets/javascripts/Hooks/useCloseOnBlur.ts
+++ b/app/assets/javascripts/Hooks/useCloseOnBlur.ts
@@ -8,16 +8,20 @@ import { StateUpdater, useCallback, useState } from 'preact/hooks'
 export function useCloseOnBlur(
   container: { current?: HTMLDivElement | null },
   setOpen: (open: boolean) => void,
+  keepOpenOnDialogs = false,
 ): [(event: { relatedTarget: EventTarget | null }) => void, StateUpdater<boolean>] {
   const [locked, setLocked] = useState(false)
   return [
     useCallback(
       function onBlur(event: { relatedTarget: EventTarget | null }) {
-        if (!locked && !container.current?.contains(event.relatedTarget as Node)) {
-          setOpen(false)
-        }
+        setTimeout(() => {
+          const keepOpen = keepOpenOnDialogs && document.activeElement?.closest('[role="dialog"], .sk-modal')
+          if (!keepOpen && !locked && !container.current?.contains(event.relatedTarget as Node)) {
+            setOpen(false)
+          }
+        })
       },
-      [container, setOpen, locked],
+      [keepOpenOnDialogs, locked, container, setOpen],
     ),
     setLocked,
   ]

From b671ecb2b9293191343799e391f0895b37d25309 Mon Sep 17 00:00:00 2001
From: Johnny A <5891646+johnny243@users.noreply.github.com>
Date: Thu, 12 May 2022 11:05:48 -0400
Subject: [PATCH 079/102] chore(deps): update stylekit (#1023)

Co-authored-by: Johnny Almonte <johnny243@users.noreply.github.com>
---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 66beb7bfb..1d341080d 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,7 @@
     "@standardnotes/filepicker": "1.13.7",
     "@standardnotes/sncrypto-web": "1.9.2",
     "@standardnotes/snjs": "2.106.9",
-    "@standardnotes/stylekit": "5.25.0",
+    "@standardnotes/stylekit": "5.26.0",
     "@zip.js/zip.js": "^2.4.10",
     "mobx": "^6.5.0",
     "mobx-react-lite": "^3.3.0",
diff --git a/yarn.lock b/yarn.lock
index 6b6aee0db..39273cfcb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2563,10 +2563,10 @@
     "@standardnotes/sncrypto-common" "^1.8.2"
     "@standardnotes/utils" "^1.6.6"
 
-"@standardnotes/stylekit@5.25.0":
-  version "5.25.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.25.0.tgz#dd79f8c7bd9c2a6f810bc6283f76928dd268f9e8"
-  integrity sha512-zc/qsWJ6UYNFZeEPpifJbN19GXZy2VBrha2njvnmLy+Yr9XZuDBR+kwzBvvDYIb33OijkATNQ4EyUja245edKQ==
+"@standardnotes/stylekit@5.26.0":
+  version "5.26.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.26.0.tgz#76c1fd2d9db872fe67cef147a9956c38d49a7078"
+  integrity sha512-CLR3sXp3NARkuJOw/zYwYBrDjxYQvS/M+4B76Fn3vNncHCvu1nRFos78yrvvIjYf/Ck4IqChxJC57HBP2Fojpw==
   dependencies:
     "@nanostores/preact" "^0.1.3"
     "@reach/listbox" "^0.16.2"

From 942226e15a5676ec4dd127e2e67e3b89ab159530 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Thu, 12 May 2022 18:26:11 -0500
Subject: [PATCH 080/102] feat: file backups (#1024)

---
 .../AttachedFilesButton.tsx                   |  68 ++--
 .../ChallengeModal/ChallengeModal.tsx         |   2 +-
 .../javascripts/Components/Footer/index.tsx   |  12 +-
 .../Preferences/Panes/Backups/FileBackups.tsx | 355 ++++++++++++++++++
 .../Preferences/Panes/Backups/index.tsx       |   2 +
 .../Preferences/Panes/Security/Encryption.tsx |   7 +-
 app/assets/javascripts/Database.ts            |   4 +-
 .../Device/DesktopDeviceInterface.ts          |  11 -
 .../javascripts/Device/DesktopSnjsExports.ts  |  10 +-
 .../Device/DesktopWebCommunication.ts         |  42 ---
 app/assets/javascripts/Device/WebDevice.ts    |   2 +-
 .../javascripts/Device/WebOrDesktopDevice.ts  |   4 +-
 .../Device/WebOrDesktopDeviceInterface.ts     |   9 -
 .../javascripts/Services/DesktopManager.ts    |   4 +-
 .../javascripts/Services/StatusManager.ts     |  30 --
 .../javascripts/UIModels/AppState/AppState.ts |   4 +-
 .../javascripts/UIModels/Application.ts       |   9 +-
 .../javascripts/UIModels/ApplicationGroup.ts  |  13 +-
 package.json                                  |   4 +-
 yarn.lock                                     | 114 +++---
 20 files changed, 499 insertions(+), 207 deletions(-)
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/Backups/FileBackups.tsx
 delete mode 100644 app/assets/javascripts/Device/DesktopDeviceInterface.ts
 delete mode 100644 app/assets/javascripts/Device/DesktopWebCommunication.ts
 delete mode 100644 app/assets/javascripts/Device/WebOrDesktopDeviceInterface.ts
 delete mode 100644 app/assets/javascripts/Services/StatusManager.ts

diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
index 1ca005cdf..587736362 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
@@ -23,8 +23,20 @@ type Props = {
   onClickPreprocessing?: () => Promise<void>
 }
 
-const isHandlingFileDrag = (event: DragEvent) =>
-  event.dataTransfer?.items && Array.from(event.dataTransfer.items).some((item) => item.kind === 'file')
+const isHandlingFileDrag = (event: DragEvent, application: WebApplication) => {
+  const items = event.dataTransfer?.items
+
+  if (!items) {
+    return false
+  }
+
+  return Array.from(items).some((item) => {
+    const isFile = item.kind === 'file'
+    const fileName = item.getAsFile()?.name || ''
+    const isBackupMetadataFile = application.files.isFileNameFileBackupMetadataFile(fileName)
+    return isFile && !isBackupMetadataFile
+  })
+}
 
 export const AttachedFilesButton: FunctionComponent<Props> = observer(
   ({ application, appState, onClickPreprocessing }) => {
@@ -234,16 +246,19 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
     const [isDraggingFiles, setIsDraggingFiles] = useState(false)
     const dragCounter = useRef(0)
 
-    const handleDrag = (event: DragEvent) => {
-      if (isHandlingFileDrag(event)) {
-        event.preventDefault()
-        event.stopPropagation()
-      }
-    }
+    const handleDrag = useCallback(
+      (event: DragEvent) => {
+        if (isHandlingFileDrag(event, application)) {
+          event.preventDefault()
+          event.stopPropagation()
+        }
+      },
+      [application],
+    )
 
     const handleDragIn = useCallback(
       (event: DragEvent) => {
-        if (!isHandlingFileDrag(event)) {
+        if (!isHandlingFileDrag(event, application)) {
           return
         }
 
@@ -268,29 +283,32 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
           }
         }
       },
-      [open, toggleAttachedFilesMenu],
+      [open, toggleAttachedFilesMenu, application],
     )
 
-    const handleDragOut = (event: DragEvent) => {
-      if (!isHandlingFileDrag(event)) {
-        return
-      }
+    const handleDragOut = useCallback(
+      (event: DragEvent) => {
+        if (!isHandlingFileDrag(event, application)) {
+          return
+        }
 
-      event.preventDefault()
-      event.stopPropagation()
+        event.preventDefault()
+        event.stopPropagation()
 
-      dragCounter.current = dragCounter.current - 1
+        dragCounter.current = dragCounter.current - 1
 
-      if (dragCounter.current > 0) {
-        return
-      }
+        if (dragCounter.current > 0) {
+          return
+        }
 
-      setIsDraggingFiles(false)
-    }
+        setIsDraggingFiles(false)
+      },
+      [application],
+    )
 
     const handleDrop = useCallback(
       (event: DragEvent) => {
-        if (!isHandlingFileDrag(event)) {
+        if (!isHandlingFileDrag(event, application)) {
           return
         }
 
@@ -330,7 +348,7 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
           dragCounter.current = 0
         }
       },
-      [appState.files, appState.features.hasFiles, attachFileToNote, currentTab],
+      [appState.files, appState.features.hasFiles, attachFileToNote, currentTab, application],
     )
 
     useEffect(() => {
@@ -345,7 +363,7 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
         window.removeEventListener('dragover', handleDrag)
         window.removeEventListener('drop', handleDrop)
       }
-    }, [handleDragIn, handleDrop])
+    }, [handleDragIn, handleDrop, handleDrag, handleDragOut])
 
     return (
       <div ref={containerRef}>
diff --git a/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx b/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx
index d961747fe..c3210f5af 100644
--- a/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx
+++ b/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx
@@ -90,7 +90,7 @@ export const ChallengeModal: FunctionComponent<Props> = ({
     const valuesToProcess: ChallengeValue[] = []
     for (const inputValue of Object.values(validatedValues)) {
       const rawValue = inputValue.value
-      const value = new ChallengeValue(inputValue.prompt, rawValue)
+      const value = { prompt: inputValue.prompt, value: rawValue }
       valuesToProcess.push(value)
     }
     const processingPrompts = valuesToProcess.map((v) => v.prompt)
diff --git a/app/assets/javascripts/Components/Footer/index.tsx b/app/assets/javascripts/Components/Footer/index.tsx
index 19f88b541..7304bd612 100644
--- a/app/assets/javascripts/Components/Footer/index.tsx
+++ b/app/assets/javascripts/Components/Footer/index.tsx
@@ -76,7 +76,7 @@ export class Footer extends PureComponent<Props, State> {
 
   override componentDidMount(): void {
     super.componentDidMount()
-    this.application.getStatusManager().onStatusChange((message) => {
+    this.application.status.addEventObserver((_event, message) => {
       this.setState({
         arbitraryStatusMessage: message,
       })
@@ -124,7 +124,7 @@ export class Footer extends PureComponent<Props, State> {
   }
 
   override onAppStateEvent(eventName: AppStateEvent, data: any) {
-    const statusService = this.application.getStatusManager()
+    const statusService = this.application.status
     switch (eventName) {
       case AppStateEvent.EditorFocused:
         if (data.eventSource === EventSource.UserInteraction) {
@@ -172,7 +172,7 @@ export class Footer extends PureComponent<Props, State> {
         break
       case ApplicationEvent.CompletedFullSync:
         if (!this.completedInitialSync) {
-          this.application.getStatusManager().setMessage('')
+          this.application.status.setMessage('')
           this.completedInitialSync = true
         }
         if (!this.didCheckForOffline) {
@@ -202,7 +202,7 @@ export class Footer extends PureComponent<Props, State> {
         break
       case ApplicationEvent.WillSync:
         if (!this.completedInitialSync) {
-          this.application.getStatusManager().setMessage('Syncing…')
+          this.application.status.setMessage('Syncing…')
         }
         break
     }
@@ -213,7 +213,7 @@ export class Footer extends PureComponent<Props, State> {
   }
 
   updateSyncStatus() {
-    const statusManager = this.application.getStatusManager()
+    const statusManager = this.application.status
     const syncStatus = this.application.sync.getSyncStatus()
     const stats = syncStatus.getStats()
     if (syncStatus.hasError()) {
@@ -243,7 +243,7 @@ export class Footer extends PureComponent<Props, State> {
   }
 
   updateLocalDataStatus() {
-    const statusManager = this.application.getStatusManager()
+    const statusManager = this.application.status
     const syncStatus = this.application.sync.getSyncStatus()
     const stats = syncStatus.getStats()
     const encryption = this.application.isEncryptionAvailable()
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Backups/FileBackups.tsx b/app/assets/javascripts/Components/Preferences/Panes/Backups/FileBackups.tsx
new file mode 100644
index 000000000..e31868b79
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/Backups/FileBackups.tsx
@@ -0,0 +1,355 @@
+import { WebApplication } from '@/UIModels/Application'
+import { observer } from 'mobx-react-lite'
+import {
+  PreferencesGroup,
+  PreferencesSegment,
+  Title,
+  Text,
+  Subtitle,
+} from '@/Components/Preferences/PreferencesComponents'
+import { useCallback, useEffect, useMemo, useState } from 'preact/hooks'
+import { Button } from '@/Components/Button/Button'
+import { FileBackupMetadataFile, FileContent, FileHandleRead } from '@standardnotes/snjs'
+import { Switch } from '@/Components/Switch'
+import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
+import { EncryptionStatusItem } from '../Security/Encryption'
+import { Icon } from '@/Components/Icon'
+import { StreamingFileApi } from '@standardnotes/filepicker'
+import { FunctionComponent } from 'preact'
+
+type Props = {
+  application: WebApplication
+}
+
+export const FileBackups = observer(({ application }: Props) => {
+  const [backupsEnabled, setBackupsEnabled] = useState(false)
+  const [backupsLocation, setBackupsLocation] = useState('')
+  const backupsService = useMemo(() => application.fileBackups, [application.fileBackups])
+
+  if (!backupsService) {
+    return (
+      <>
+        <PreferencesGroup>
+          <PreferencesSegment>
+            <Title>File Backups</Title>
+            <Subtitle>Automatically save encrypted backups of files uploaded to any device to this computer.</Subtitle>
+            <Text className="mt-3">To enable file backups, use the Standard Notes desktop application.</Text>
+          </PreferencesSegment>
+          <PreferencesSegment>
+            <BackupsDropZone application={application} />
+          </PreferencesSegment>
+        </PreferencesGroup>
+      </>
+    )
+  }
+
+  useEffect(() => {
+    void backupsService.isFilesBackupsEnabled().then(setBackupsEnabled)
+  }, [backupsService])
+
+  useEffect(() => {
+    if (backupsEnabled) {
+      void backupsService.getFilesBackupsLocation().then(setBackupsLocation)
+    }
+  }, [backupsService, backupsEnabled])
+
+  const changeBackupsLocation = useCallback(async () => {
+    await backupsService.changeFilesBackupsLocation()
+
+    setBackupsLocation(await backupsService.getFilesBackupsLocation())
+  }, [backupsService])
+
+  const openBackupsLocation = useCallback(async () => {
+    await backupsService.openFilesBackupsLocation()
+  }, [backupsService])
+
+  const toggleBackups = useCallback(async () => {
+    if (backupsEnabled) {
+      await backupsService.disableFilesBackups()
+    } else {
+      await backupsService.enableFilesBackups()
+    }
+
+    setBackupsEnabled(await backupsService.isFilesBackupsEnabled())
+  }, [backupsService, backupsEnabled])
+
+  return (
+    <>
+      <PreferencesGroup>
+        <PreferencesSegment>
+          <Title>File Backups</Title>
+
+          <div className="flex items-center justify-between">
+            <div className="flex flex-col mr-10">
+              <Subtitle>
+                Automatically save encrypted backups of files uploaded on any device to this computer.
+              </Subtitle>
+            </div>
+            <Switch onChange={toggleBackups} checked={backupsEnabled} />
+          </div>
+
+          {!backupsEnabled && (
+            <>
+              <HorizontalSeparator classes="mt-5 mb-4" />
+              <Text>File backups are not enabled. Enable to choose where your files are backed up.</Text>
+            </>
+          )}
+        </PreferencesSegment>
+
+        {backupsEnabled && (
+          <>
+            <PreferencesSegment>
+              <>
+                <Text className="mb-3">
+                  Files backups are enabled. When you upload a new file on any device and open this application, files
+                  will be downloaded in encrypted form to:
+                </Text>
+
+                <EncryptionStatusItem
+                  status={backupsLocation}
+                  icon={[<Icon type="attachment-file" className="min-w-5 min-h-5" />]}
+                  checkmark={false}
+                />
+                <div className="flex flex-row mt-5">
+                  <Button
+                    variant="normal"
+                    label="Open Backups Location"
+                    className={'mr-3 text-xs'}
+                    onClick={openBackupsLocation}
+                  />
+                  <Button
+                    variant="normal"
+                    label="Change Backups Location"
+                    className={'mr-3 text-xs'}
+                    onClick={changeBackupsLocation}
+                  />
+                </div>
+              </>
+            </PreferencesSegment>
+          </>
+        )}
+
+        <PreferencesSegment>
+          <BackupsDropZone application={application} />
+        </PreferencesSegment>
+      </PreferencesGroup>
+    </>
+  )
+})
+
+const isHandlingBackupDrag = (event: DragEvent, application: WebApplication) => {
+  const items = event.dataTransfer?.items
+
+  if (!items) {
+    return false
+  }
+
+  return Array.from(items).every((item) => {
+    const isFile = item.kind === 'file'
+    const fileName = item.getAsFile()?.name || ''
+    const isBackupMetadataFile = application.files.isFileNameFileBackupMetadataFile(fileName)
+    return isFile && isBackupMetadataFile
+  })
+}
+
+export const BackupsDropZone: FunctionComponent<Props> = ({ application }) => {
+  const [droppedFile, setDroppedFile] = useState<FileBackupMetadataFile | undefined>(undefined)
+  const [decryptedFileContent, setDecryptedFileContent] = useState<FileContent | undefined>(undefined)
+  const [binaryFile, setBinaryFile] = useState<FileHandleRead | undefined>(undefined)
+  const [isSavingAsDecrypted, setIsSavingAsDecrypted] = useState(false)
+
+  const fileSystem = useMemo(() => new StreamingFileApi(), [])
+
+  useEffect(() => {
+    if (droppedFile) {
+      void application.files.decryptBackupMetadataFile(droppedFile).then(setDecryptedFileContent)
+    } else {
+      setDecryptedFileContent(undefined)
+    }
+  }, [droppedFile, application])
+
+  const chooseRelatedBinaryFile = useCallback(async () => {
+    const selection = await application.files.selectFile(fileSystem)
+
+    if (selection === 'aborted' || selection === 'failed') {
+      return
+    }
+
+    setBinaryFile(selection)
+  }, [application, fileSystem])
+
+  const downloadBinaryFileAsDecrypted = useCallback(async () => {
+    if (!decryptedFileContent || !binaryFile) {
+      return
+    }
+
+    setIsSavingAsDecrypted(true)
+
+    const result = await application.files.readBackupFileAndSaveDecrypted(binaryFile, decryptedFileContent, fileSystem)
+
+    if (result === 'success') {
+      void application.alertService.alert(
+        `<strong>${decryptedFileContent.name}</strong> has been successfully decrypted and saved to your chosen directory.`,
+      )
+      setBinaryFile(undefined)
+      setDecryptedFileContent(undefined)
+      setDroppedFile(undefined)
+    } else if (result === 'failed') {
+      void application.alertService.alert(
+        'Unable to save file to local directory. This may be caused by failure to decrypt, or failure to save the file locally.',
+      )
+    }
+
+    setIsSavingAsDecrypted(false)
+  }, [decryptedFileContent, application, binaryFile, fileSystem])
+
+  const handleDrag = useCallback(
+    (event: DragEvent) => {
+      if (isHandlingBackupDrag(event, application)) {
+        event.preventDefault()
+        event.stopPropagation()
+      }
+    },
+    [application],
+  )
+
+  const handleDragIn = useCallback(
+    (event: DragEvent) => {
+      if (!isHandlingBackupDrag(event, application)) {
+        return
+      }
+
+      event.preventDefault()
+      event.stopPropagation()
+    },
+    [application],
+  )
+
+  const handleDragOut = useCallback(
+    (event: DragEvent) => {
+      if (!isHandlingBackupDrag(event, application)) {
+        return
+      }
+
+      event.preventDefault()
+      event.stopPropagation()
+    },
+    [application],
+  )
+
+  const handleDrop = useCallback(
+    async (event: DragEvent) => {
+      if (!isHandlingBackupDrag(event, application)) {
+        return
+      }
+
+      event.preventDefault()
+      event.stopPropagation()
+
+      const items = event.dataTransfer?.items
+
+      if (!items || items.length === 0) {
+        return
+      }
+
+      const item = items[0]
+      const file = item.getAsFile()
+
+      if (!file) {
+        return
+      }
+
+      const text = await file.text()
+
+      try {
+        const metadata = JSON.parse(text) as FileBackupMetadataFile
+        setDroppedFile(metadata)
+      } catch (error) {
+        console.error(error)
+      }
+
+      event.dataTransfer.clearData()
+    },
+    [application],
+  )
+
+  useEffect(() => {
+    window.addEventListener('dragenter', handleDragIn)
+    window.addEventListener('dragleave', handleDragOut)
+    window.addEventListener('dragover', handleDrag)
+    window.addEventListener('drop', handleDrop)
+
+    return () => {
+      window.removeEventListener('dragenter', handleDragIn)
+      window.removeEventListener('dragleave', handleDragOut)
+      window.removeEventListener('dragover', handleDrag)
+      window.removeEventListener('drop', handleDrop)
+    }
+  }, [handleDragIn, handleDrop, handleDrag, handleDragOut])
+
+  if (!droppedFile) {
+    return (
+      <Text>
+        To decrypt a backup file, drag and drop the file's respective <i>metadata.sn.json</i> file here.
+      </Text>
+    )
+  }
+
+  return (
+    <>
+      <PreferencesSegment>
+        {!decryptedFileContent && <Text>Attempting to decrypt metadata file...</Text>}
+
+        {decryptedFileContent && (
+          <>
+            <Title>Backup Decryption</Title>
+
+            <Subtitle className="success">
+              Successfully decrypted metadata file for <i>{decryptedFileContent.name}.</i>
+            </Subtitle>
+
+            <HorizontalSeparator classes={'mt-3 mb-3'} />
+
+            <div className="flex justify-between items-center">
+              <div>
+                <Subtitle>1. Choose related data file</Subtitle>
+                <Text>{droppedFile.file.uuid}</Text>
+              </div>
+              <div>
+                <Button
+                  variant="normal"
+                  label="Choose"
+                  className={'px-1 text-xs min-w-40'}
+                  onClick={chooseRelatedBinaryFile}
+                  disabled={!!binaryFile}
+                />
+              </div>
+            </div>
+
+            <HorizontalSeparator classes={'mt-3 mb-3'} />
+
+            <div className="flex justify-between items-center">
+              <Subtitle>2. Decrypt and save file to your computer</Subtitle>
+
+              <div>
+                <Button
+                  variant="normal"
+                  label={isSavingAsDecrypted ? undefined : 'Save'}
+                  className={'px-1 text-xs min-w-40'}
+                  onClick={downloadBinaryFileAsDecrypted}
+                  disabled={isSavingAsDecrypted || !binaryFile}
+                >
+                  {isSavingAsDecrypted && (
+                    <div className="flex justify-center w-full">
+                      <div className="sk-spinner w-5 h-5 spinner-info"></div>
+                    </div>
+                  )}
+                </Button>
+              </div>
+            </div>
+          </>
+        )}
+      </PreferencesSegment>
+    </>
+  )
+}
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Backups/index.tsx b/app/assets/javascripts/Components/Preferences/Panes/Backups/index.tsx
index 2912525c7..8dc7be868 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Backups/index.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Backups/index.tsx
@@ -5,6 +5,7 @@ import { PreferencesPane } from '@/Components/Preferences/PreferencesComponents'
 import { CloudLink } from './CloudBackups'
 import { DataBackups } from './DataBackups'
 import { EmailBackups } from './EmailBackups'
+import { FileBackups } from './FileBackups'
 
 interface Props {
   appState: AppState
@@ -15,6 +16,7 @@ export const Backups: FunctionComponent<Props> = ({ application, appState }) =>
   return (
     <PreferencesPane>
       <DataBackups application={application} appState={appState} />
+      <FileBackups application={application} />
       <EmailBackups application={application} />
       <CloudLink application={application} />
     </PreferencesPane>
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Security/Encryption.tsx b/app/assets/javascripts/Components/Preferences/Panes/Security/Encryption.tsx
index 6acb0e571..2d9380e71 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Security/Encryption.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Security/Encryption.tsx
@@ -7,16 +7,17 @@ import { PreferencesGroup, PreferencesSegment, Text, Title } from '@/Components/
 
 const formatCount = (count: number, itemType: string) => `${count} / ${count} ${itemType}`
 
-const EncryptionStatusItem: FunctionComponent<{
+export const EncryptionStatusItem: FunctionComponent<{
   icon: ComponentChild
   status: string
-}> = ({ icon, status }) => (
+  checkmark?: boolean
+}> = ({ icon, status, checkmark = true }) => (
   <div className="w-full rounded py-1.5 px-3 text-input my-1 min-h-8 flex flex-row items-center bg-contrast no-border focus-within:ring-info">
     {icon}
     <div className="min-w-3 min-h-1" />
     <div className="flex-grow color-text text-sm">{status}</div>
     <div className="min-w-3 min-h-1" />
-    <Icon className="success min-w-4 min-h-4" type="check-bold" />
+    {checkmark && <Icon className="success min-w-4 min-h-4" type="check-bold" />}
   </div>
 )
 
diff --git a/app/assets/javascripts/Database.ts b/app/assets/javascripts/Database.ts
index 640c0ee95..9de3e9dbf 100644
--- a/app/assets/javascripts/Database.ts
+++ b/app/assets/javascripts/Database.ts
@@ -21,7 +21,7 @@ export class Database {
 
   constructor(public databaseName: string, private alertService: AlertService) {}
 
-  public deinit() {
+  public deinit(): void {
     ;(this.alertService as any) = undefined
     this.db = undefined
   }
@@ -29,7 +29,7 @@ export class Database {
   /**
    * Relinquishes the lock and allows db operations to proceed
    */
-  public unlock() {
+  public unlock(): void {
     this.locked = false
   }
 
diff --git a/app/assets/javascripts/Device/DesktopDeviceInterface.ts b/app/assets/javascripts/Device/DesktopDeviceInterface.ts
deleted file mode 100644
index c36d12952..000000000
--- a/app/assets/javascripts/Device/DesktopDeviceInterface.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { DeviceInterface, Environment } from '@standardnotes/snjs'
-import { WebClientRequiresDesktopMethods } from './DesktopWebCommunication'
-import { WebOrDesktopDeviceInterface } from './WebOrDesktopDeviceInterface'
-
-export function isDesktopDevice(x: DeviceInterface): x is DesktopDeviceInterface {
-  return x.environment === Environment.Desktop
-}
-
-export interface DesktopDeviceInterface extends WebOrDesktopDeviceInterface, WebClientRequiresDesktopMethods {
-  environment: Environment.Desktop
-}
diff --git a/app/assets/javascripts/Device/DesktopSnjsExports.ts b/app/assets/javascripts/Device/DesktopSnjsExports.ts
index acd1a5c72..c6728d847 100644
--- a/app/assets/javascripts/Device/DesktopSnjsExports.ts
+++ b/app/assets/javascripts/Device/DesktopSnjsExports.ts
@@ -1 +1,9 @@
-export { Environment, RawKeychainValue } from '@standardnotes/snjs'
+export {
+  Environment,
+  RawKeychainValue,
+  DesktopDeviceInterface,
+  WebOrDesktopDeviceInterface,
+  DesktopClientRequiresWebMethods,
+  FileBackupsMapping,
+  FileBackupsDevice,
+} from '@standardnotes/snjs'
diff --git a/app/assets/javascripts/Device/DesktopWebCommunication.ts b/app/assets/javascripts/Device/DesktopWebCommunication.ts
deleted file mode 100644
index 47e17af72..000000000
--- a/app/assets/javascripts/Device/DesktopWebCommunication.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { DecryptedTransferPayload } from '@standardnotes/snjs'
-
-export interface WebClientRequiresDesktopMethods {
-  localBackupsCount(): Promise<number>
-
-  viewlocalBackups(): void
-
-  deleteLocalBackups(): Promise<void>
-
-  syncComponents(payloads: unknown[]): void
-
-  onMajorDataChange(): void
-
-  onInitialDataLoad(): void
-
-  /**
-   * Destroys all sensitive storage data, such as localStorage, IndexedDB, and other log files.
-   */
-  destroyAllData(): void
-
-  onSearch(text?: string): void
-
-  downloadBackup(): void | Promise<void>
-
-  get extensionsServerHost(): string
-}
-
-export interface DesktopClientRequiresWebMethods {
-  updateAvailable(): void
-
-  windowGainedFocus(): void
-
-  windowLostFocus(): void
-
-  onComponentInstallationComplete(componentData: DecryptedTransferPayload, error: unknown): Promise<void>
-
-  requestBackupFile(): Promise<string | undefined>
-
-  didBeginBackup(): void
-
-  didFinishBackup(success: boolean): void
-}
diff --git a/app/assets/javascripts/Device/WebDevice.ts b/app/assets/javascripts/Device/WebDevice.ts
index 97f3917b0..e38d5bfa3 100644
--- a/app/assets/javascripts/Device/WebDevice.ts
+++ b/app/assets/javascripts/Device/WebDevice.ts
@@ -1,5 +1,5 @@
 import { Environment, RawKeychainValue } from '@standardnotes/snjs'
-import { WebOrDesktopDevice } from '@/Device/WebOrDesktopDevice'
+import { WebOrDesktopDevice } from './WebOrDesktopDevice'
 
 const KEYCHAIN_STORAGE_KEY = 'keychain'
 
diff --git a/app/assets/javascripts/Device/WebOrDesktopDevice.ts b/app/assets/javascripts/Device/WebOrDesktopDevice.ts
index 1adaf0556..66c63c922 100644
--- a/app/assets/javascripts/Device/WebOrDesktopDevice.ts
+++ b/app/assets/javascripts/Device/WebOrDesktopDevice.ts
@@ -7,9 +7,9 @@ import {
   TransferPayload,
   NamespacedRootKeyInKeychain,
   extendArray,
+  WebOrDesktopDeviceInterface,
 } from '@standardnotes/snjs'
 import { Database } from '../Database'
-import { WebOrDesktopDeviceInterface } from './WebOrDesktopDeviceInterface'
 
 export abstract class WebOrDesktopDevice implements WebOrDesktopDeviceInterface {
   constructor(public appVersion: string) {}
@@ -18,7 +18,7 @@ export abstract class WebOrDesktopDevice implements WebOrDesktopDeviceInterface
 
   abstract environment: Environment
 
-  setApplication(application: SNApplication) {
+  setApplication(application: SNApplication): void {
     const database = new Database(application.identifier, application.alertService)
 
     this.databases.push(database)
diff --git a/app/assets/javascripts/Device/WebOrDesktopDeviceInterface.ts b/app/assets/javascripts/Device/WebOrDesktopDeviceInterface.ts
deleted file mode 100644
index ccd8e08f2..000000000
--- a/app/assets/javascripts/Device/WebOrDesktopDeviceInterface.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { DeviceInterface, RawKeychainValue } from '@standardnotes/snjs'
-
-export interface WebOrDesktopDeviceInterface extends DeviceInterface {
-  readonly appVersion: string
-
-  getKeychainValue(): Promise<RawKeychainValue>
-
-  setKeychainValue(value: RawKeychainValue): Promise<void>
-}
diff --git a/app/assets/javascripts/Services/DesktopManager.ts b/app/assets/javascripts/Services/DesktopManager.ts
index ecdf84855..c45d1a560 100644
--- a/app/assets/javascripts/Services/DesktopManager.ts
+++ b/app/assets/javascripts/Services/DesktopManager.ts
@@ -10,10 +10,10 @@ import {
   DecryptedTransferPayload,
   ComponentContent,
   assert,
+  DesktopClientRequiresWebMethods,
+  DesktopDeviceInterface,
 } from '@standardnotes/snjs'
 import { WebAppEvent, WebApplication } from '@/UIModels/Application'
-import { DesktopDeviceInterface } from '../Device/DesktopDeviceInterface'
-import { DesktopClientRequiresWebMethods } from '@/Device/DesktopWebCommunication'
 
 export class DesktopManager
   extends ApplicationService
diff --git a/app/assets/javascripts/Services/StatusManager.ts b/app/assets/javascripts/Services/StatusManager.ts
deleted file mode 100644
index 5b606aa30..000000000
--- a/app/assets/javascripts/Services/StatusManager.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { removeFromArray } from '@standardnotes/snjs'
-
-type StatusCallback = (string: string) => void
-
-export class StatusManager {
-  private _message = ''
-  private observers: StatusCallback[] = []
-
-  get message(): string {
-    return this._message
-  }
-
-  setMessage(message: string) {
-    this._message = message
-    this.notifyObservers()
-  }
-
-  onStatusChange(callback: StatusCallback) {
-    this.observers.push(callback)
-    return () => {
-      removeFromArray(this.observers, callback)
-    }
-  }
-
-  private notifyObservers() {
-    for (const observer of this.observers) {
-      observer(this._message)
-    }
-  }
-}
diff --git a/app/assets/javascripts/UIModels/AppState/AppState.ts b/app/assets/javascripts/UIModels/AppState/AppState.ts
index 5402695f2..b959e7cec 100644
--- a/app/assets/javascripts/UIModels/AppState/AppState.ts
+++ b/app/assets/javascripts/UIModels/AppState/AppState.ts
@@ -15,6 +15,7 @@ import {
   removeFromArray,
   Uuid,
   PayloadEmitSource,
+  WebOrDesktopDeviceInterface,
 } from '@standardnotes/snjs'
 import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'
 import { ActionsMenuState } from './ActionsMenuState'
@@ -31,7 +32,6 @@ import { SearchOptionsState } from './SearchOptionsState'
 import { SubscriptionState } from './SubscriptionState'
 import { SyncState } from './SyncState'
 import { TagsState } from './TagsState'
-import { WebOrDesktopDevice } from '@/Device/WebOrDesktopDevice'
 import { FilePreviewModalState } from './FilePreviewModalState'
 
 export enum AppStateEvent {
@@ -93,7 +93,7 @@ export class AppState {
 
   private readonly tagChangedDisposer: IReactionDisposer
 
-  constructor(application: WebApplication, private device: WebOrDesktopDevice) {
+  constructor(application: WebApplication, private device: WebOrDesktopDeviceInterface) {
     this.application = application
     this.notes = new NotesState(
       application,
diff --git a/app/assets/javascripts/UIModels/Application.ts b/app/assets/javascripts/UIModels/Application.ts
index c02ac0b5e..8fef1e5ec 100644
--- a/app/assets/javascripts/UIModels/Application.ts
+++ b/app/assets/javascripts/UIModels/Application.ts
@@ -2,10 +2,8 @@ import { WebCrypto } from '@/Crypto'
 import { WebAlertService } from '@/Services/AlertService'
 import { ArchiveManager } from '@/Services/ArchiveManager'
 import { AutolockService } from '@/Services/AutolockService'
-import { DesktopDeviceInterface, isDesktopDevice } from '@/Device/DesktopDeviceInterface'
 import { DesktopManager } from '@/Services/DesktopManager'
 import { IOService } from '@/Services/IOService'
-import { StatusManager } from '@/Services/StatusManager'
 import { ThemeManager } from '@/Services/ThemeManager'
 import { AppState } from '@/UIModels/AppState'
 import { WebOrDesktopDevice } from '@/Device/WebOrDesktopDevice'
@@ -17,6 +15,8 @@ import {
   removeFromArray,
   IconsController,
   Runtime,
+  DesktopDeviceInterface,
+  isDesktopDevice,
 } from '@standardnotes/snjs'
 
 type WebServices = {
@@ -24,7 +24,6 @@ type WebServices = {
   desktopService?: DesktopManager
   autolockService: AutolockService
   archiveService: ArchiveManager
-  statusManager: StatusManager
   themeService: ThemeManager
   io: IOService
 }
@@ -137,10 +136,6 @@ export class WebApplication extends SNApplication {
     return undefined
   }
 
-  getStatusManager() {
-    return this.webServices.statusManager
-  }
-
   public getThemeService() {
     return this.webServices.themeService
   }
diff --git a/app/assets/javascripts/UIModels/ApplicationGroup.ts b/app/assets/javascripts/UIModels/ApplicationGroup.ts
index 64b6a3c1f..036bee6ab 100644
--- a/app/assets/javascripts/UIModels/ApplicationGroup.ts
+++ b/app/assets/javascripts/UIModels/ApplicationGroup.ts
@@ -1,15 +1,20 @@
 import { WebApplication } from './Application'
-import { ApplicationDescriptor, SNApplicationGroup, Platform, Runtime, InternalEventBus } from '@standardnotes/snjs'
+import {
+  ApplicationDescriptor,
+  SNApplicationGroup,
+  Platform,
+  Runtime,
+  InternalEventBus,
+  isDesktopDevice,
+} from '@standardnotes/snjs'
 import { AppState } from '@/UIModels/AppState'
 import { getPlatform, isDesktopApplication } from '@/Utils'
 import { ArchiveManager } from '@/Services/ArchiveManager'
 import { DesktopManager } from '@/Services/DesktopManager'
 import { IOService } from '@/Services/IOService'
 import { AutolockService } from '@/Services/AutolockService'
-import { StatusManager } from '@/Services/StatusManager'
 import { ThemeManager } from '@/Services/ThemeManager'
 import { WebOrDesktopDevice } from '@/Device/WebOrDesktopDevice'
-import { isDesktopDevice } from '@/Device/DesktopDeviceInterface'
 
 export class ApplicationGroup extends SNApplicationGroup<WebOrDesktopDevice> {
   constructor(
@@ -53,7 +58,6 @@ export class ApplicationGroup extends SNApplicationGroup<WebOrDesktopDevice> {
     const archiveService = new ArchiveManager(application)
     const io = new IOService(platform === Platform.MacWeb || platform === Platform.MacDesktop)
     const autolockService = new AutolockService(application, new InternalEventBus())
-    const statusManager = new StatusManager()
     const themeService = new ThemeManager(application)
 
     application.setWebServices({
@@ -62,7 +66,6 @@ export class ApplicationGroup extends SNApplicationGroup<WebOrDesktopDevice> {
       desktopService: isDesktopDevice(this.device) ? new DesktopManager(application, this.device) : undefined,
       io,
       autolockService,
-      statusManager,
       themeService,
     })
 
diff --git a/package.json b/package.json
index 1d341080d..ac791b086 100644
--- a/package.json
+++ b/package.json
@@ -70,9 +70,9 @@
     "@reach/tooltip": "^0.16.2",
     "@reach/visually-hidden": "^0.16.0",
     "@standardnotes/components": "1.8.0",
-    "@standardnotes/filepicker": "1.13.7",
+    "@standardnotes/filepicker": "1.14.0",
     "@standardnotes/sncrypto-web": "1.9.2",
-    "@standardnotes/snjs": "2.106.9",
+    "@standardnotes/snjs": "2.107.0",
     "@standardnotes/stylekit": "5.26.0",
     "@zip.js/zip.js": "^2.4.10",
     "mobx": "^6.5.0",
diff --git a/yarn.lock b/yarn.lock
index 39273cfcb..ebc0d6154 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2453,76 +2453,78 @@
     eslint-plugin-prettier "^4.0.0"
     prettier "^2.6.2"
 
-"@standardnotes/domain-events@^2.28.1":
-  version "2.28.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.28.1.tgz#473350cf867b5af9f18d19cdf5e772f37f11a621"
-  integrity sha512-1IjE0HA30AwzZ/7RZkVYUQNgWbkRSB8h3xFsbuCLvBUfl/lXrDlHvD2CZMUGKPXlMHBjRivW/r8f7FjDlXNJ9w==
+"@standardnotes/domain-events@^2.28.3":
+  version "2.28.3"
+  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.28.3.tgz#96e56009faf6626bd0cf967c7db9969fd08e7dd7"
+  integrity sha512-ehWn+6Ii1R0BcNX+ro02eIUZ6j8kiu9hR4Rvd59NS7NNsnAJCTyUmuDxURchwLNZTT4OSeqDBuvp98PiWn5Adg==
   dependencies:
     "@standardnotes/auth" "^3.18.13"
-    "@standardnotes/features" "^1.42.0"
+    "@standardnotes/features" "^1.42.1"
 
-"@standardnotes/encryption@^1.6.10":
-  version "1.6.10"
-  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.6.10.tgz#054bb07e2d49e8b6ec690219c71e4d567838d8aa"
-  integrity sha512-S89WpBqEPnruFV4vMn8etfxKUAGL3StN+I70ujz61OI5ReZhOEf/DobQBFm2u/lSTtnvleEdThLsRp5QZZH0kA==
+"@standardnotes/encryption@^1.7.0":
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.7.0.tgz#3012bed5283e23ddeaae01e9fbaa80c24e8af42d"
+  integrity sha512-gBVcTCZ53Eg3/2eZkVrBrS98BU95CR2h23ofnNGhCcy0FlWwv6fAqupSsPufOdce8gh27gF0mhRbi80ljYxCUA==
   dependencies:
-    "@standardnotes/models" "^1.6.10"
-    "@standardnotes/responses" "^1.6.18"
-    "@standardnotes/services" "^1.10.9"
+    "@standardnotes/models" "^1.8.0"
+    "@standardnotes/responses" "^1.6.19"
+    "@standardnotes/services" "^1.11.0"
 
-"@standardnotes/features@^1.42.0":
-  version "1.42.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.42.0.tgz#154171a8436f68bef1f9e797415feea04f60b0c2"
-  integrity sha512-W79WVV68jWwG0CtiYcT/51N7/IIOCPbkL5UBjKLcZ3XNUoptVTFYvHd+UDhdkc3DuMPghjDghD7pQS7W4KdbVA==
+"@standardnotes/features@^1.42.1":
+  version "1.42.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.42.1.tgz#29d1f753f445328c485ccc0ea95d557b9299c131"
+  integrity sha512-wMm0N112HeIa+VskpmPMfL5eHh3U3s+aCpxiq0HvITD+3BOoQgbbAQ+O+FjpwwhvN8mfBAM+LvNjksXFHhqoJg==
   dependencies:
     "@standardnotes/auth" "^3.18.13"
     "@standardnotes/common" "^1.19.8"
 
-"@standardnotes/filepicker@1.13.7", "@standardnotes/filepicker@^1.13.7":
-  version "1.13.7"
-  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.13.7.tgz#8e9f0736defa6630e8c3fb541d02a9286d8d8875"
-  integrity sha512-SOqgYqzerhCg2d47j+QkzOBISN9KHU5uxsV7+Heaxag/jJFfyplxWYOskNJzFm5DtgSwV57Y753hIQN8S7YTKA==
+"@standardnotes/filepicker@1.14.0", "@standardnotes/filepicker@^1.14.0":
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.14.0.tgz#f1ea5e66a453cfc2131bbf665f676b430f649cf2"
+  integrity sha512-E/frksUJhHbMVlLNu4UdHLIdFNuQe9Co8dq/WQgeK/X+Ic+5t5Jm91c4GA1LvCUVF1vhYl/Vo76LY8gE1J2mfg==
   dependencies:
     "@standardnotes/common" "^1.19.8"
+    "@standardnotes/services" "^1.11.0"
     "@standardnotes/utils" "^1.6.6"
 
-"@standardnotes/files@^1.0.13":
-  version "1.0.13"
-  resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.0.13.tgz#45feff6f34c49f6a3a845c3b6e71cb25e0132fad"
-  integrity sha512-MISbGjXnjAIYIVUqalw3pKMoxXh5sVBbXYrWcpB8okiq/EcLHiVPhGkedxqjkELqzlM/fa3DkougmJBKWh43fQ==
+"@standardnotes/files@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.1.0.tgz#c2499f50fdc31addf3b0307388d4c78420415dfe"
+  integrity sha512-O4cB8nxBTSLPUCoLyglzbj5oshaJ6hKuBleAWPaC+treaiwpWVyfxn3TF7G4MejlNUMIrGfb566YAZ3R5YVfGg==
   dependencies:
-    "@standardnotes/models" "^1.6.10"
-    "@standardnotes/responses" "^1.6.18"
-    "@standardnotes/services" "^1.10.9"
+    "@standardnotes/encryption" "^1.7.0"
+    "@standardnotes/models" "^1.8.0"
+    "@standardnotes/responses" "^1.6.19"
+    "@standardnotes/services" "^1.11.0"
     "@standardnotes/utils" "^1.6.6"
 
-"@standardnotes/models@^1.6.10":
-  version "1.6.10"
-  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.6.10.tgz#3a6142b849ed1d7973611011be44dcbefa6df461"
-  integrity sha512-EpxDvB7GVN+suPYCQ5QmDq/1NezPBVeAzfg56O1I5I8yhl1cyaqLmtSHcPGdgfgnQiio2kbTA16cta3YxtnG/g==
+"@standardnotes/models@^1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.8.0.tgz#b295ba16f0392549eb79cd02d67b7e2455f2d9be"
+  integrity sha512-Tl1EZNk/8axTSTb6p7kU9qfS6Fyqxyc+/MxRGj0th+Ry70/UHvRV7iDGT6FKBzBUQR8/5hDK0JG1pDzUSRAhhQ==
   dependencies:
-    "@standardnotes/features" "^1.42.0"
-    "@standardnotes/responses" "^1.6.18"
+    "@standardnotes/features" "^1.42.1"
+    "@standardnotes/responses" "^1.6.19"
     "@standardnotes/utils" "^1.6.6"
 
-"@standardnotes/responses@^1.6.18":
-  version "1.6.18"
-  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.6.18.tgz#ad448cfe78449f7cef27b9ff169635ef6dca3476"
-  integrity sha512-Onmhxd8zKbFGJ3ECbD1yuGqiY58JV/FE7PymNT8WL6P1CuThzqQ3V6hS10tswJgbu50A570i1uBg7i+WjyaHiA==
+"@standardnotes/responses@^1.6.19":
+  version "1.6.19"
+  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.6.19.tgz#ac8bf70f35cd7a5649e52b280f53a2bd97f39b76"
+  integrity sha512-Oj9CS52UCJhAZCqCN6GReqQ9zosgCV2HZ1uaJLXEDxNeNTxDnPOU9C7CH7tXmA3zoQ44pFpQbeAuee8ZnlH3XQ==
   dependencies:
     "@standardnotes/auth" "^3.18.13"
     "@standardnotes/common" "^1.19.8"
-    "@standardnotes/features" "^1.42.0"
+    "@standardnotes/features" "^1.42.1"
 
-"@standardnotes/services@^1.10.9":
-  version "1.10.9"
-  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.10.9.tgz#44a79c8235bc7eaf55d66fc1e8df90ce1ecbceb7"
-  integrity sha512-009VuEWbSV9ULaabFodXIUnzLkOxuy8QTNNrXusQg30kY02dzxLqhh0F+t5YLc1SbVkk+n2/IahPTlUUaCKHQQ==
+"@standardnotes/services@^1.11.0":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.11.0.tgz#7b214093a4d5ef540ce2b6a40cf0f83517c1a2da"
+  integrity sha512-bR084UoR7EzTC6GD5QxFi7FmcoqhOhZmdeWIwByEOQEDeWG9h0i/lNZo4pAyYykDDv8Z/U3+kNjify4wI+ksZw==
   dependencies:
     "@standardnotes/auth" "^3.18.13"
     "@standardnotes/common" "^1.19.8"
-    "@standardnotes/models" "^1.6.10"
-    "@standardnotes/responses" "^1.6.18"
+    "@standardnotes/models" "^1.8.0"
+    "@standardnotes/responses" "^1.6.19"
     "@standardnotes/utils" "^1.6.6"
 
 "@standardnotes/settings@^1.14.3":
@@ -2544,21 +2546,21 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.106.9":
-  version "2.106.9"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.106.9.tgz#34197275ec2ebfd4522c63c091b47b5c974fcaac"
-  integrity sha512-B/kujDluQNs/xYpRaWYvEWpfflYnLhl4ugW3r15WgcLJSjSLreBOVLaRWXhALl8I4e63rkRwMKeCiwrL7auXWg==
+"@standardnotes/snjs@2.107.0":
+  version "2.107.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.107.0.tgz#1254f8ae439023e6dab60dae73b4c8435bf117d2"
+  integrity sha512-3FOxSDlRADoQoSr3gSvAA9eFQbvo7vOaeeLXtoN7ElUUtG78DadPORtwyQtsUee9EfxQnlaWBXVImPAoy2LUew==
   dependencies:
     "@standardnotes/auth" "^3.18.13"
     "@standardnotes/common" "^1.19.8"
-    "@standardnotes/domain-events" "^2.28.1"
-    "@standardnotes/encryption" "^1.6.10"
-    "@standardnotes/features" "^1.42.0"
-    "@standardnotes/filepicker" "^1.13.7"
-    "@standardnotes/files" "^1.0.13"
-    "@standardnotes/models" "^1.6.10"
-    "@standardnotes/responses" "^1.6.18"
-    "@standardnotes/services" "^1.10.9"
+    "@standardnotes/domain-events" "^2.28.3"
+    "@standardnotes/encryption" "^1.7.0"
+    "@standardnotes/features" "^1.42.1"
+    "@standardnotes/filepicker" "^1.14.0"
+    "@standardnotes/files" "^1.1.0"
+    "@standardnotes/models" "^1.8.0"
+    "@standardnotes/responses" "^1.6.19"
+    "@standardnotes/services" "^1.11.0"
     "@standardnotes/settings" "^1.14.3"
     "@standardnotes/sncrypto-common" "^1.8.2"
     "@standardnotes/utils" "^1.6.6"

From 131f13c5580db2438df44f3442414b3052acc34c Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Thu, 12 May 2022 18:27:45 -0500
Subject: [PATCH 081/102] fix: background color to use for selected note cell

---
 app/assets/stylesheets/_notes.scss | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/_notes.scss b/app/assets/stylesheets/_notes.scss
index 673f5d0e0..bc6b28b93 100644
--- a/app/assets/stylesheets/_notes.scss
+++ b/app/assets/stylesheets/_notes.scss
@@ -127,7 +127,7 @@
     cursor: pointer;
 
     &:hover {
-      background-color: var(--sn-stylekit-grey-5);
+      background-color: var(--sn-stylekit-contrast-background-color);
     }
 
     .icon {
@@ -299,7 +299,7 @@
     }
 
     &.selected {
-      background-color: var(--sn-stylekit-grey-5);
+      background-color: var(--sn-stylekit-contrast-background-color);
       border-left: 2px solid var(--sn-stylekit-info-color);
 
       progress {
@@ -321,3 +321,4 @@
     }
   }
 }
+

From d47d2952984f898664ff78e9c6a85b73c41a5dcc Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Fri, 13 May 2022 01:10:10 -0500
Subject: [PATCH 082/102] fix: don't show entitlement modal if dragging file
 backup

---
 .../AttachedFilesButton.tsx                   | 32 ++++++++---
 .../Preferences/Panes/Backups/FileBackups.tsx | 16 ++++--
 package.json                                  |  4 +-
 yarn.lock                                     | 56 +++++++++----------
 4 files changed, 64 insertions(+), 44 deletions(-)

diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
index 587736362..9814f8d59 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
@@ -84,11 +84,6 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
     }, [application, note])
 
     const toggleAttachedFilesMenu = useCallback(async () => {
-      if (!appState.features.hasFiles) {
-        premiumModal.activate('Files')
-        return
-      }
-
       const rect = buttonRef.current?.getBoundingClientRect()
       if (rect) {
         const { clientHeight } = document.documentElement
@@ -111,7 +106,20 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
 
         setOpen(newOpenState)
       }
-    }, [appState.features.hasFiles, onClickPreprocessing, open, premiumModal])
+    }, [onClickPreprocessing, open])
+
+    const prospectivelyShowFilesPremiumModal = useCallback(() => {
+      if (!appState.features.hasFiles) {
+        premiumModal.activate('Files')
+        return
+      }
+    }, [appState.features.hasFiles, premiumModal])
+
+    const toggleAttachedFilesMenuWithEntitlementCheck = useCallback(async () => {
+      prospectivelyShowFilesPremiumModal()
+
+      await toggleAttachedFilesMenu()
+    }, [toggleAttachedFilesMenu, prospectivelyShowFilesPremiumModal])
 
     const deleteFile = async (file: SNFile) => {
       const shouldDelete = await confirmDialog({
@@ -318,6 +326,7 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
         setIsDraggingFiles(false)
 
         if (!appState.features.hasFiles) {
+          prospectivelyShowFilesPremiumModal()
           return
         }
 
@@ -348,7 +357,14 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
           dragCounter.current = 0
         }
       },
-      [appState.files, appState.features.hasFiles, attachFileToNote, currentTab, application],
+      [
+        appState.files,
+        appState.features.hasFiles,
+        attachFileToNote,
+        currentTab,
+        application,
+        prospectivelyShowFilesPremiumModal,
+      ],
     )
 
     useEffect(() => {
@@ -367,7 +383,7 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
 
     return (
       <div ref={containerRef}>
-        <Disclosure open={open} onChange={toggleAttachedFilesMenu}>
+        <Disclosure open={open} onChange={toggleAttachedFilesMenuWithEntitlementCheck}>
           <DisclosureButton
             onKeyDown={(event) => {
               if (event.key === 'Escape') {
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Backups/FileBackups.tsx b/app/assets/javascripts/Components/Preferences/Panes/Backups/FileBackups.tsx
index e31868b79..5736e53a8 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Backups/FileBackups.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Backups/FileBackups.tsx
@@ -9,7 +9,7 @@ import {
 } from '@/Components/Preferences/PreferencesComponents'
 import { useCallback, useEffect, useMemo, useState } from 'preact/hooks'
 import { Button } from '@/Components/Button/Button'
-import { FileBackupMetadataFile, FileContent, FileHandleRead } from '@standardnotes/snjs'
+import { FileBackupMetadataFile, FileBackupsConstantsV1, FileContent, FileHandleRead } from '@standardnotes/snjs'
 import { Switch } from '@/Components/Switch'
 import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
 import { EncryptionStatusItem } from '../Security/Encryption'
@@ -102,7 +102,7 @@ export const FileBackups = observer(({ application }: Props) => {
               <>
                 <Text className="mb-3">
                   Files backups are enabled. When you upload a new file on any device and open this application, files
-                  will be downloaded in encrypted form to:
+                  will be backed up in encrypted form to:
                 </Text>
 
                 <EncryptionStatusItem
@@ -304,16 +304,20 @@ export const BackupsDropZone: FunctionComponent<Props> = ({ application }) => {
           <>
             <Title>Backup Decryption</Title>
 
-            <Subtitle className="success">
-              Successfully decrypted metadata file for <i>{decryptedFileContent.name}.</i>
-            </Subtitle>
+            <EncryptionStatusItem
+              status={decryptedFileContent.name}
+              icon={[<Icon type="attachment-file" className="min-w-5 min-h-5" />]}
+              checkmark={true}
+            />
 
             <HorizontalSeparator classes={'mt-3 mb-3'} />
 
             <div className="flex justify-between items-center">
               <div>
                 <Subtitle>1. Choose related data file</Subtitle>
-                <Text>{droppedFile.file.uuid}</Text>
+                <Text className={`text-xs mr-3 em ${binaryFile ? 'font-bold success' : ''}`}>
+                  {droppedFile.file.uuid}/{FileBackupsConstantsV1.BinaryFileName}
+                </Text>
               </div>
               <div>
                 <Button
diff --git a/package.json b/package.json
index ac791b086..b4e7e40e0 100644
--- a/package.json
+++ b/package.json
@@ -70,9 +70,9 @@
     "@reach/tooltip": "^0.16.2",
     "@reach/visually-hidden": "^0.16.0",
     "@standardnotes/components": "1.8.0",
-    "@standardnotes/filepicker": "1.14.0",
+    "@standardnotes/filepicker": "1.14.1",
     "@standardnotes/sncrypto-web": "1.9.2",
-    "@standardnotes/snjs": "2.107.0",
+    "@standardnotes/snjs": "2.107.2",
     "@standardnotes/stylekit": "5.26.0",
     "@zip.js/zip.js": "^2.4.10",
     "mobx": "^6.5.0",
diff --git a/yarn.lock b/yarn.lock
index ebc0d6154..038916711 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2461,14 +2461,14 @@
     "@standardnotes/auth" "^3.18.13"
     "@standardnotes/features" "^1.42.1"
 
-"@standardnotes/encryption@^1.7.0":
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.7.0.tgz#3012bed5283e23ddeaae01e9fbaa80c24e8af42d"
-  integrity sha512-gBVcTCZ53Eg3/2eZkVrBrS98BU95CR2h23ofnNGhCcy0FlWwv6fAqupSsPufOdce8gh27gF0mhRbi80ljYxCUA==
+"@standardnotes/encryption@^1.7.1":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.7.1.tgz#7d84389e204a6ca2906617daa62423ce9ec38879"
+  integrity sha512-5SZy5MG0ike80y889SmBTJMGAG753PdvOtc23+tNwbleBoubZjzw8gTgZYY52kl74KLtXmAEKiw2Ym2Pq5FcOg==
   dependencies:
     "@standardnotes/models" "^1.8.0"
     "@standardnotes/responses" "^1.6.19"
-    "@standardnotes/services" "^1.11.0"
+    "@standardnotes/services" "^1.11.1"
 
 "@standardnotes/features@^1.42.1":
   version "1.42.1"
@@ -2478,24 +2478,24 @@
     "@standardnotes/auth" "^3.18.13"
     "@standardnotes/common" "^1.19.8"
 
-"@standardnotes/filepicker@1.14.0", "@standardnotes/filepicker@^1.14.0":
-  version "1.14.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.14.0.tgz#f1ea5e66a453cfc2131bbf665f676b430f649cf2"
-  integrity sha512-E/frksUJhHbMVlLNu4UdHLIdFNuQe9Co8dq/WQgeK/X+Ic+5t5Jm91c4GA1LvCUVF1vhYl/Vo76LY8gE1J2mfg==
+"@standardnotes/filepicker@1.14.1", "@standardnotes/filepicker@^1.14.1":
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.14.1.tgz#81a3ba2be6e3615103875e528dc1720fa3698dea"
+  integrity sha512-AOR+iQqNqbfZU7ur/LKsF/M0x9EoBT0kXhewZBs7h3OwrtJES7nFRr/janJMrecvUL/ZdfXmazudadZdvcxPyg==
   dependencies:
     "@standardnotes/common" "^1.19.8"
-    "@standardnotes/services" "^1.11.0"
+    "@standardnotes/services" "^1.11.1"
     "@standardnotes/utils" "^1.6.6"
 
-"@standardnotes/files@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.1.0.tgz#c2499f50fdc31addf3b0307388d4c78420415dfe"
-  integrity sha512-O4cB8nxBTSLPUCoLyglzbj5oshaJ6hKuBleAWPaC+treaiwpWVyfxn3TF7G4MejlNUMIrGfb566YAZ3R5YVfGg==
+"@standardnotes/files@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.1.2.tgz#6e75d6233975f359173ddcb352647b21c587be89"
+  integrity sha512-Q3f+gYd/FkWb8nuNHgUqGSxkAKkAU3kwb+Ar89LhqSNkgq0e4MsUigy+lzOagdiavwT/C1SE8j5d7E4oIZWynw==
   dependencies:
-    "@standardnotes/encryption" "^1.7.0"
+    "@standardnotes/encryption" "^1.7.1"
     "@standardnotes/models" "^1.8.0"
     "@standardnotes/responses" "^1.6.19"
-    "@standardnotes/services" "^1.11.0"
+    "@standardnotes/services" "^1.11.1"
     "@standardnotes/utils" "^1.6.6"
 
 "@standardnotes/models@^1.8.0":
@@ -2516,10 +2516,10 @@
     "@standardnotes/common" "^1.19.8"
     "@standardnotes/features" "^1.42.1"
 
-"@standardnotes/services@^1.11.0":
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.11.0.tgz#7b214093a4d5ef540ce2b6a40cf0f83517c1a2da"
-  integrity sha512-bR084UoR7EzTC6GD5QxFi7FmcoqhOhZmdeWIwByEOQEDeWG9h0i/lNZo4pAyYykDDv8Z/U3+kNjify4wI+ksZw==
+"@standardnotes/services@^1.11.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.11.1.tgz#2fa3ce3c7025a048964204321a4c50591134d7ac"
+  integrity sha512-MvDAJM1Cn9586sMm+w4iCgznsqT6uli3bpf/xZKOHWITkrH6dik/FpgpbxmRfOz2VnbZ6lyLVjsnNDIWFZDqxw==
   dependencies:
     "@standardnotes/auth" "^3.18.13"
     "@standardnotes/common" "^1.19.8"
@@ -2546,21 +2546,21 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.107.0":
-  version "2.107.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.107.0.tgz#1254f8ae439023e6dab60dae73b4c8435bf117d2"
-  integrity sha512-3FOxSDlRADoQoSr3gSvAA9eFQbvo7vOaeeLXtoN7ElUUtG78DadPORtwyQtsUee9EfxQnlaWBXVImPAoy2LUew==
+"@standardnotes/snjs@2.107.2":
+  version "2.107.2"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.107.2.tgz#b50be49a44a96eac0158e44df7d547e2b1ecfe5a"
+  integrity sha512-zTa1n+Bed6ElWOepA/5gJew1aI03XB4lKiysJmDduKS2QsYEdyeQ2p3SuJZSDFX57e/PVYnU9uI851CobrN/Fg==
   dependencies:
     "@standardnotes/auth" "^3.18.13"
     "@standardnotes/common" "^1.19.8"
     "@standardnotes/domain-events" "^2.28.3"
-    "@standardnotes/encryption" "^1.7.0"
+    "@standardnotes/encryption" "^1.7.1"
     "@standardnotes/features" "^1.42.1"
-    "@standardnotes/filepicker" "^1.14.0"
-    "@standardnotes/files" "^1.1.0"
+    "@standardnotes/filepicker" "^1.14.1"
+    "@standardnotes/files" "^1.1.2"
     "@standardnotes/models" "^1.8.0"
     "@standardnotes/responses" "^1.6.19"
-    "@standardnotes/services" "^1.11.0"
+    "@standardnotes/services" "^1.11.1"
     "@standardnotes/settings" "^1.14.3"
     "@standardnotes/sncrypto-common" "^1.8.2"
     "@standardnotes/utils" "^1.6.6"

From 59df5b56d0b9472e03fff1e5f7928b38f06048f5 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Fri, 13 May 2022 08:31:21 -0500
Subject: [PATCH 083/102] chore: remove redundant return

---
 .../Components/AttachedFilesPopover/AttachedFilesButton.tsx      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
index 9814f8d59..4b9f0f8ed 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
@@ -111,7 +111,6 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
     const prospectivelyShowFilesPremiumModal = useCallback(() => {
       if (!appState.features.hasFiles) {
         premiumModal.activate('Files')
-        return
       }
     }, [appState.features.hasFiles, premiumModal])
 

From 65852618dc2938b8edef7ee42b0ea50d239c8eb5 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Fri, 13 May 2022 08:37:27 -0500
Subject: [PATCH 084/102] chore: break up file backups into two components

---
 .../AttachedFilesButton.tsx                   |  16 +-
 .../BackupsDropZone.tsx}                      | 150 +-----------------
 .../Panes/Backups/Files/FileBackups.tsx       | 136 ++++++++++++++++
 .../Preferences/Panes/Backups/index.tsx       |   2 +-
 .../javascripts/Utils/DragTypeCheck.tsx       |  31 ++++
 5 files changed, 173 insertions(+), 162 deletions(-)
 rename app/assets/javascripts/Components/Preferences/Panes/Backups/{FileBackups.tsx => Files/BackupsDropZone.tsx} (58%)
 create mode 100644 app/assets/javascripts/Components/Preferences/Panes/Backups/Files/FileBackups.tsx
 create mode 100644 app/assets/javascripts/Utils/DragTypeCheck.tsx

diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
index 4b9f0f8ed..975c2b724 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
@@ -16,6 +16,7 @@ import { PopoverFileItemAction, PopoverFileItemActionType } from './PopoverFileI
 import { AttachedFilesPopover } from './AttachedFilesPopover'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import { PopoverTabs } from './PopoverTabs'
+import { isHandlingFileDrag } from '@/Utils/DragTypeCheck'
 
 type Props = {
   application: WebApplication
@@ -23,21 +24,6 @@ type Props = {
   onClickPreprocessing?: () => Promise<void>
 }
 
-const isHandlingFileDrag = (event: DragEvent, application: WebApplication) => {
-  const items = event.dataTransfer?.items
-
-  if (!items) {
-    return false
-  }
-
-  return Array.from(items).some((item) => {
-    const isFile = item.kind === 'file'
-    const fileName = item.getAsFile()?.name || ''
-    const isBackupMetadataFile = application.files.isFileNameFileBackupMetadataFile(fileName)
-    return isFile && !isBackupMetadataFile
-  })
-}
-
 export const AttachedFilesButton: FunctionComponent<Props> = observer(
   ({ application, appState, onClickPreprocessing }) => {
     const premiumModal = usePremiumModal()
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Backups/FileBackups.tsx b/app/assets/javascripts/Components/Preferences/Panes/Backups/Files/BackupsDropZone.tsx
similarity index 58%
rename from app/assets/javascripts/Components/Preferences/Panes/Backups/FileBackups.tsx
rename to app/assets/javascripts/Components/Preferences/Panes/Backups/Files/BackupsDropZone.tsx
index 5736e53a8..96bacced8 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Backups/FileBackups.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Backups/Files/BackupsDropZone.tsx
@@ -1,156 +1,14 @@
-import { WebApplication } from '@/UIModels/Application'
-import { observer } from 'mobx-react-lite'
-import {
-  PreferencesGroup,
-  PreferencesSegment,
-  Title,
-  Text,
-  Subtitle,
-} from '@/Components/Preferences/PreferencesComponents'
+import { PreferencesSegment, Title, Text, Subtitle } from '@/Components/Preferences/PreferencesComponents'
 import { useCallback, useEffect, useMemo, useState } from 'preact/hooks'
 import { Button } from '@/Components/Button/Button'
 import { FileBackupMetadataFile, FileBackupsConstantsV1, FileContent, FileHandleRead } from '@standardnotes/snjs'
-import { Switch } from '@/Components/Switch'
 import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
-import { EncryptionStatusItem } from '../Security/Encryption'
+import { EncryptionStatusItem } from '../../Security/Encryption'
 import { Icon } from '@/Components/Icon'
 import { StreamingFileApi } from '@standardnotes/filepicker'
 import { FunctionComponent } from 'preact'
-
-type Props = {
-  application: WebApplication
-}
-
-export const FileBackups = observer(({ application }: Props) => {
-  const [backupsEnabled, setBackupsEnabled] = useState(false)
-  const [backupsLocation, setBackupsLocation] = useState('')
-  const backupsService = useMemo(() => application.fileBackups, [application.fileBackups])
-
-  if (!backupsService) {
-    return (
-      <>
-        <PreferencesGroup>
-          <PreferencesSegment>
-            <Title>File Backups</Title>
-            <Subtitle>Automatically save encrypted backups of files uploaded to any device to this computer.</Subtitle>
-            <Text className="mt-3">To enable file backups, use the Standard Notes desktop application.</Text>
-          </PreferencesSegment>
-          <PreferencesSegment>
-            <BackupsDropZone application={application} />
-          </PreferencesSegment>
-        </PreferencesGroup>
-      </>
-    )
-  }
-
-  useEffect(() => {
-    void backupsService.isFilesBackupsEnabled().then(setBackupsEnabled)
-  }, [backupsService])
-
-  useEffect(() => {
-    if (backupsEnabled) {
-      void backupsService.getFilesBackupsLocation().then(setBackupsLocation)
-    }
-  }, [backupsService, backupsEnabled])
-
-  const changeBackupsLocation = useCallback(async () => {
-    await backupsService.changeFilesBackupsLocation()
-
-    setBackupsLocation(await backupsService.getFilesBackupsLocation())
-  }, [backupsService])
-
-  const openBackupsLocation = useCallback(async () => {
-    await backupsService.openFilesBackupsLocation()
-  }, [backupsService])
-
-  const toggleBackups = useCallback(async () => {
-    if (backupsEnabled) {
-      await backupsService.disableFilesBackups()
-    } else {
-      await backupsService.enableFilesBackups()
-    }
-
-    setBackupsEnabled(await backupsService.isFilesBackupsEnabled())
-  }, [backupsService, backupsEnabled])
-
-  return (
-    <>
-      <PreferencesGroup>
-        <PreferencesSegment>
-          <Title>File Backups</Title>
-
-          <div className="flex items-center justify-between">
-            <div className="flex flex-col mr-10">
-              <Subtitle>
-                Automatically save encrypted backups of files uploaded on any device to this computer.
-              </Subtitle>
-            </div>
-            <Switch onChange={toggleBackups} checked={backupsEnabled} />
-          </div>
-
-          {!backupsEnabled && (
-            <>
-              <HorizontalSeparator classes="mt-5 mb-4" />
-              <Text>File backups are not enabled. Enable to choose where your files are backed up.</Text>
-            </>
-          )}
-        </PreferencesSegment>
-
-        {backupsEnabled && (
-          <>
-            <PreferencesSegment>
-              <>
-                <Text className="mb-3">
-                  Files backups are enabled. When you upload a new file on any device and open this application, files
-                  will be backed up in encrypted form to:
-                </Text>
-
-                <EncryptionStatusItem
-                  status={backupsLocation}
-                  icon={[<Icon type="attachment-file" className="min-w-5 min-h-5" />]}
-                  checkmark={false}
-                />
-                <div className="flex flex-row mt-5">
-                  <Button
-                    variant="normal"
-                    label="Open Backups Location"
-                    className={'mr-3 text-xs'}
-                    onClick={openBackupsLocation}
-                  />
-                  <Button
-                    variant="normal"
-                    label="Change Backups Location"
-                    className={'mr-3 text-xs'}
-                    onClick={changeBackupsLocation}
-                  />
-                </div>
-              </>
-            </PreferencesSegment>
-          </>
-        )}
-
-        <PreferencesSegment>
-          <BackupsDropZone application={application} />
-        </PreferencesSegment>
-      </PreferencesGroup>
-    </>
-  )
-})
-
-const isHandlingBackupDrag = (event: DragEvent, application: WebApplication) => {
-  const items = event.dataTransfer?.items
-
-  if (!items) {
-    return false
-  }
-
-  return Array.from(items).every((item) => {
-    const isFile = item.kind === 'file'
-    const fileName = item.getAsFile()?.name || ''
-    const isBackupMetadataFile = application.files.isFileNameFileBackupMetadataFile(fileName)
-    return isFile && isBackupMetadataFile
-  })
-}
+import { Props } from './FileBackups'
+import { isHandlingBackupDrag } from '@/Utils/DragTypeCheck'
 
 export const BackupsDropZone: FunctionComponent<Props> = ({ application }) => {
   const [droppedFile, setDroppedFile] = useState<FileBackupMetadataFile | undefined>(undefined)
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Backups/Files/FileBackups.tsx b/app/assets/javascripts/Components/Preferences/Panes/Backups/Files/FileBackups.tsx
new file mode 100644
index 000000000..ae40b5264
--- /dev/null
+++ b/app/assets/javascripts/Components/Preferences/Panes/Backups/Files/FileBackups.tsx
@@ -0,0 +1,136 @@
+import { WebApplication } from '@/UIModels/Application'
+import { observer } from 'mobx-react-lite'
+import {
+  PreferencesGroup,
+  PreferencesSegment,
+  Title,
+  Text,
+  Subtitle,
+} from '@/Components/Preferences/PreferencesComponents'
+import { useCallback, useEffect, useMemo, useState } from 'preact/hooks'
+import { Button } from '@/Components/Button/Button'
+import { Switch } from '@/Components/Switch'
+import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
+import { EncryptionStatusItem } from '../../Security/Encryption'
+import { Icon } from '@/Components/Icon'
+import { BackupsDropZone } from './BackupsDropZone'
+
+export type Props = {
+  application: WebApplication
+}
+
+export const FileBackups = observer(({ application }: Props) => {
+  const [backupsEnabled, setBackupsEnabled] = useState(false)
+  const [backupsLocation, setBackupsLocation] = useState('')
+  const backupsService = useMemo(() => application.fileBackups, [application.fileBackups])
+
+  if (!backupsService) {
+    return (
+      <>
+        <PreferencesGroup>
+          <PreferencesSegment>
+            <Title>File Backups</Title>
+            <Subtitle>Automatically save encrypted backups of files uploaded to any device to this computer.</Subtitle>
+            <Text className="mt-3">To enable file backups, use the Standard Notes desktop application.</Text>
+          </PreferencesSegment>
+          <PreferencesSegment>
+            <BackupsDropZone application={application} />
+          </PreferencesSegment>
+        </PreferencesGroup>
+      </>
+    )
+  }
+
+  useEffect(() => {
+    void backupsService.isFilesBackupsEnabled().then(setBackupsEnabled)
+  }, [backupsService])
+
+  useEffect(() => {
+    if (backupsEnabled) {
+      void backupsService.getFilesBackupsLocation().then(setBackupsLocation)
+    }
+  }, [backupsService, backupsEnabled])
+
+  const changeBackupsLocation = useCallback(async () => {
+    await backupsService.changeFilesBackupsLocation()
+
+    setBackupsLocation(await backupsService.getFilesBackupsLocation())
+  }, [backupsService])
+
+  const openBackupsLocation = useCallback(async () => {
+    await backupsService.openFilesBackupsLocation()
+  }, [backupsService])
+
+  const toggleBackups = useCallback(async () => {
+    if (backupsEnabled) {
+      await backupsService.disableFilesBackups()
+    } else {
+      await backupsService.enableFilesBackups()
+    }
+
+    setBackupsEnabled(await backupsService.isFilesBackupsEnabled())
+  }, [backupsService, backupsEnabled])
+
+  return (
+    <>
+      <PreferencesGroup>
+        <PreferencesSegment>
+          <Title>File Backups</Title>
+
+          <div className="flex items-center justify-between">
+            <div className="flex flex-col mr-10">
+              <Subtitle>
+                Automatically save encrypted backups of files uploaded on any device to this computer.
+              </Subtitle>
+            </div>
+            <Switch onChange={toggleBackups} checked={backupsEnabled} />
+          </div>
+
+          {!backupsEnabled && (
+            <>
+              <HorizontalSeparator classes="mt-5 mb-4" />
+              <Text>File backups are not enabled. Enable to choose where your files are backed up.</Text>
+            </>
+          )}
+        </PreferencesSegment>
+
+        {backupsEnabled && (
+          <>
+            <PreferencesSegment>
+              <>
+                <Text className="mb-3">
+                  Files backups are enabled. When you upload a new file on any device and open this application, files
+                  will be backed up in encrypted form to:
+                </Text>
+
+                <EncryptionStatusItem
+                  status={backupsLocation}
+                  icon={[<Icon type="attachment-file" className="min-w-5 min-h-5" />]}
+                  checkmark={false}
+                />
+                <div className="flex flex-row mt-5">
+                  <Button
+                    variant="normal"
+                    label="Open Backups Location"
+                    className={'mr-3 text-xs'}
+                    onClick={openBackupsLocation}
+                  />
+                  <Button
+                    variant="normal"
+                    label="Change Backups Location"
+                    className={'mr-3 text-xs'}
+                    onClick={changeBackupsLocation}
+                  />
+                </div>
+              </>
+            </PreferencesSegment>
+          </>
+        )}
+
+        <PreferencesSegment>
+          <BackupsDropZone application={application} />
+        </PreferencesSegment>
+      </PreferencesGroup>
+    </>
+  )
+})
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Backups/index.tsx b/app/assets/javascripts/Components/Preferences/Panes/Backups/index.tsx
index 8dc7be868..cb1910d96 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Backups/index.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Backups/index.tsx
@@ -5,7 +5,7 @@ import { PreferencesPane } from '@/Components/Preferences/PreferencesComponents'
 import { CloudLink } from './CloudBackups'
 import { DataBackups } from './DataBackups'
 import { EmailBackups } from './EmailBackups'
-import { FileBackups } from './FileBackups'
+import { FileBackups } from './Files/FileBackups'
 
 interface Props {
   appState: AppState
diff --git a/app/assets/javascripts/Utils/DragTypeCheck.tsx b/app/assets/javascripts/Utils/DragTypeCheck.tsx
new file mode 100644
index 000000000..4ed350455
--- /dev/null
+++ b/app/assets/javascripts/Utils/DragTypeCheck.tsx
@@ -0,0 +1,31 @@
+import { WebApplication } from '@/UIModels/Application'
+
+export const isHandlingFileDrag = (event: DragEvent, application: WebApplication) => {
+  const items = event.dataTransfer?.items
+
+  if (!items) {
+    return false
+  }
+
+  return Array.from(items).some((item) => {
+    const isFile = item.kind === 'file'
+    const fileName = item.getAsFile()?.name || ''
+    const isBackupMetadataFile = application.files.isFileNameFileBackupMetadataFile(fileName)
+    return isFile && !isBackupMetadataFile
+  })
+}
+
+export const isHandlingBackupDrag = (event: DragEvent, application: WebApplication) => {
+  const items = event.dataTransfer?.items
+
+  if (!items) {
+    return false
+  }
+
+  return Array.from(items).every((item) => {
+    const isFile = item.kind === 'file'
+    const fileName = item.getAsFile()?.name || ''
+    const isBackupMetadataFile = application.files.isFileNameFileBackupMetadataFile(fileName)
+    return isFile && isBackupMetadataFile
+  })
+}

From c99c20b6ec51144fec722868ff8dabcad261054a Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Fri, 13 May 2022 08:39:17 -0500
Subject: [PATCH 085/102] chore: fix props import

---
 .../Preferences/Panes/Backups/Files/BackupsDropZone.tsx     | 6 +++++-
 .../Preferences/Panes/Backups/Files/FileBackups.tsx         | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/Components/Preferences/Panes/Backups/Files/BackupsDropZone.tsx b/app/assets/javascripts/Components/Preferences/Panes/Backups/Files/BackupsDropZone.tsx
index 96bacced8..9effee653 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Backups/Files/BackupsDropZone.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Backups/Files/BackupsDropZone.tsx
@@ -7,8 +7,12 @@ import { EncryptionStatusItem } from '../../Security/Encryption'
 import { Icon } from '@/Components/Icon'
 import { StreamingFileApi } from '@standardnotes/filepicker'
 import { FunctionComponent } from 'preact'
-import { Props } from './FileBackups'
 import { isHandlingBackupDrag } from '@/Utils/DragTypeCheck'
+import { WebApplication } from '@/UIModels/Application'
+
+type Props = {
+  application: WebApplication
+}
 
 export const BackupsDropZone: FunctionComponent<Props> = ({ application }) => {
   const [droppedFile, setDroppedFile] = useState<FileBackupMetadataFile | undefined>(undefined)
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Backups/Files/FileBackups.tsx b/app/assets/javascripts/Components/Preferences/Panes/Backups/Files/FileBackups.tsx
index ae40b5264..af07b3641 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Backups/Files/FileBackups.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Backups/Files/FileBackups.tsx
@@ -15,7 +15,7 @@ import { EncryptionStatusItem } from '../../Security/Encryption'
 import { Icon } from '@/Components/Icon'
 import { BackupsDropZone } from './BackupsDropZone'
 
-export type Props = {
+type Props = {
   application: WebApplication
 }
 

From 754a1895320fddf1b4f559f2a580a6a023bd84ac Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Fri, 13 May 2022 09:36:22 -0500
Subject: [PATCH 086/102] feat: use tint color for pref section headers

---
 .../Components/Preferences/PreferencesComponents/Content.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/Components/Preferences/PreferencesComponents/Content.tsx b/app/assets/javascripts/Components/Preferences/PreferencesComponents/Content.tsx
index eb7ef2dd4..39894a1da 100644
--- a/app/assets/javascripts/Components/Preferences/PreferencesComponents/Content.tsx
+++ b/app/assets/javascripts/Components/Preferences/PreferencesComponents/Content.tsx
@@ -2,7 +2,7 @@ import { FunctionComponent } from 'preact'
 
 export const Title: FunctionComponent = ({ children }) => (
   <>
-    <h2 className="text-base m-0 mb-1">{children}</h2>
+    <h2 className="text-base m-0 mb-1 info">{children}</h2>
     <div className="min-h-2" />
   </>
 )

From 62cf34e8947831017b2d4d586e7d902aad328bf9 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Mon, 16 May 2022 21:14:18 -0500
Subject: [PATCH 087/102] chore: app group optimizations (#1027)

---
 app/assets/javascripts/@types/Svg.d.ts        |   4 +
 app/assets/javascripts/@types/modules.ts      |   3 -
 app/assets/javascripts/App.tsx                |  55 ++-
 .../Components/Abstract/PureComponent.tsx     |  10 +
 .../AccountMenu/AdvancedOptions.tsx           |  46 ++-
 .../AccountMenu/ConfirmPassword.tsx           | 100 ++---
 .../Components/AccountMenu/CreateAccount.tsx  |  83 ++--
 .../AccountMenu/GeneralAccountMenu.tsx        |  72 ++--
 .../Components/AccountMenu/SignIn.tsx         |  81 ++--
 .../WorkspaceSwitcher/WorkspaceMenuItem.tsx   |  21 +-
 .../WorkspaceSwitcherMenu.tsx                 |  32 +-
 .../WorkspaceSwitcherOption.tsx               |   6 +-
 .../Components/AccountMenu/index.tsx          |  44 +-
 .../Components/ApplicationGroupView/index.tsx | 124 +++++-
 .../Components/ApplicationView/index.tsx      | 377 +++++++++---------
 .../AttachedFilesButton.tsx                   |  32 +-
 .../AttachedFilesPopover.tsx                  |  10 +-
 .../AttachedFilesPopover/PopoverFileItem.tsx  |   6 +-
 .../PopoverFileItemAction.tsx                 |   8 +-
 .../PopoverFileSubmenu.tsx                    |   8 +-
 .../ChallengeModal/ChallengeModal.tsx         |  34 +-
 .../ChallengeModal/ChallengePrompt.tsx        |   2 +-
 .../LockscreenWorkspaceSwitcher.tsx           |   6 +-
 .../ChangeEditor/ChangeEditorButton.tsx       |   7 +-
 .../Components/Files/FilePreviewInfoPanel.tsx |   4 +-
 .../Components/Files/FilePreviewModal.tsx     |   3 +-
 .../Components/Files/PreviewComponent.tsx     |   4 +-
 .../javascripts/Components/Footer/index.tsx   |  13 +-
 .../javascripts/Components/Icon/index.tsx     |   2 +-
 .../Components/Input/DecoratedInput.tsx       |   2 +
 .../javascripts/Components/Menu/Menu.tsx      |  78 ++--
 .../javascripts/Components/Menu/MenuItem.tsx  |   1 -
 .../MultipleSelectedNotes/index.tsx           |   2 +-
 .../Components/NoAccountWarning/index.tsx     |  26 +-
 .../Components/NoteGroupView/index.tsx        |  26 +-
 .../Components/NoteTags/NoteTag.tsx           | 108 ++---
 .../Components/NoteTags/NoteTagsContainer.tsx |   7 +-
 .../Components/NoteView/NoteView.tsx          |  27 +-
 .../Components/NotesContextMenu/index.tsx     |   2 +-
 .../Components/NotesList/NotesListItem.tsx    |   2 +-
 .../NotesList/NotesListOptionsMenu.tsx        |  69 ++--
 .../Components/NotesList/index.tsx            | 104 +++--
 .../Components/NotesOptions/AddTagOption.tsx  |   4 +-
 .../NotesOptions/ChangeEditorOption.tsx       |   6 +-
 .../NotesOptions/ListedActionsOption.tsx      |  51 +--
 .../Components/NotesOptions/NotesOptions.tsx  |  27 +-
 .../Components/NotesView/index.tsx            |  80 ++--
 .../Components/OtherSessionsSignOut/index.tsx |   7 +-
 .../Components/PinNoteButton/index.tsx        |  12 +-
 .../Panes/Account/Authentication.tsx          |   2 +-
 .../Preferences/Panes/Account/Files.tsx       |   2 +-
 .../Panes/Backups/Files/BackupsDropZone.tsx   |  30 +-
 .../Panes/Backups/Files/FileBackups.tsx       |   2 +-
 .../Preferences/Panes/General/Defaults.tsx    |   2 +-
 .../Preferences/Panes/General/Labs.tsx        |   2 +-
 .../Panes/TwoFactorAuth/AuthAppInfoPopup.tsx  |   7 +-
 .../Components/PremiumFeaturesModal/index.tsx |   8 +-
 .../PurchaseFlow/Panes/CreateAccount.tsx      |   2 +-
 .../Components/PurchaseFlow/Panes/SignIn.tsx  |   2 +-
 .../PurchaseFlow/PurchaseFlowView.tsx         |   2 +-
 .../QuickSettingsMenu/ThemesMenuButton.tsx    |  25 +-
 .../Components/QuickSettingsMenu/index.tsx    |  69 ++--
 .../HistoryListContainer.tsx                  |   5 +-
 .../RevisionContentLocked.tsx                 |   2 +-
 .../RevisionHistoryModalWrapper.tsx           |   4 +-
 .../SelectedRevisionContent.tsx               |   4 +-
 .../Components/SearchOptions/index.tsx        |   5 +-
 .../Components/Shared/AccordionItem.tsx       |   2 +-
 .../Components/Shared/ModalDialog.tsx         |   4 +-
 .../javascripts/Components/Switch/index.tsx   |   5 +-
 .../TagAutocomplete/AutocompleteTagHint.tsx   |  44 +-
 .../TagAutocomplete/AutocompleteTagInput.tsx  |   2 +-
 .../TagAutocomplete/AutocompleteTagResult.tsx |   2 +-
 .../Components/Tags/SmartViewsList.tsx        |   7 +-
 .../Components/Tags/TagContextMenu.tsx        |  15 +-
 .../javascripts/Components/Tags/TagsList.tsx  |  38 +-
 .../Components/Tags/TagsListItem.tsx          |   4 +-
 .../Components/Tags/TagsSection.tsx           |  12 +-
 app/assets/javascripts/Device/WebDevice.ts    |  15 +
 .../javascripts/Device/WebOrDesktopDevice.ts  |   8 +
 .../javascripts/Hooks/usePremiumModal.tsx     |  73 ++--
 app/assets/javascripts/Services/IOService.ts  |   5 +-
 .../javascripts/Services/ThemeManager.ts      |   3 +
 .../UIModels/AppState/AbstractState.ts        |  23 ++
 .../UIModels/AppState/AccountMenuState.ts     |  17 +-
 .../javascripts/UIModels/AppState/AppState.ts | 104 +++--
 .../UIModels/AppState/FeaturesState.ts        |  22 +-
 .../AppState/FilePreviewModalState.ts         |  10 +-
 .../UIModels/AppState/FilesState.ts           |  12 +-
 .../AppState/NoAccountWarningState.ts         |  11 +-
 .../UIModels/AppState/NoteTagsState.ts        |  18 +-
 .../UIModels/AppState/NotesState.ts           |  24 +-
 .../UIModels/AppState/NotesViewState.ts       |  45 ++-
 .../UIModels/AppState/PurchaseFlowState.ts    |   7 +-
 .../UIModels/AppState/SearchOptionsState.ts   |   7 +-
 .../UIModels/AppState/SubscriptionState.ts    |  23 +-
 .../UIModels/AppState/TagsState.ts            |  22 +-
 .../javascripts/UIModels/Application.ts       |  13 +-
 .../javascripts/UIModels/ApplicationGroup.ts  |  85 ++--
 .../{DragTypeCheck.tsx => DragTypeCheck.ts}   |  16 +-
 app/assets/javascripts/Utils/PreactUtils.ts   |  10 +
 app/assets/javascripts/Utils/Utils.ts         |  10 +
 app/assets/javascripts/tsconfig.json          |   2 +-
 app/assets/svg/il-history-locked.svg          |  26 --
 package.json                                  |   6 +-
 webpack.config.js                             |  25 +-
 webpack.prod.js                               |  12 +-
 yarn.lock                                     | 181 +++++----
 108 files changed, 1796 insertions(+), 1187 deletions(-)
 create mode 100644 app/assets/javascripts/@types/Svg.d.ts
 delete mode 100644 app/assets/javascripts/@types/modules.ts
 create mode 100644 app/assets/javascripts/UIModels/AppState/AbstractState.ts
 rename app/assets/javascripts/Utils/{DragTypeCheck.tsx => DragTypeCheck.ts} (52%)
 create mode 100644 app/assets/javascripts/Utils/PreactUtils.ts
 delete mode 100644 app/assets/svg/il-history-locked.svg

diff --git a/app/assets/javascripts/@types/Svg.d.ts b/app/assets/javascripts/@types/Svg.d.ts
new file mode 100644
index 000000000..9b9471da0
--- /dev/null
+++ b/app/assets/javascripts/@types/Svg.d.ts
@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: any
+  export default content
+}
diff --git a/app/assets/javascripts/@types/modules.ts b/app/assets/javascripts/@types/modules.ts
deleted file mode 100644
index 8b139eba2..000000000
--- a/app/assets/javascripts/@types/modules.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-declare module '*.svg' {
-  export default function SvgComponent(props: React.SVGProps<SVGSVGElement>): JSX.Element
-}
diff --git a/app/assets/javascripts/App.tsx b/app/assets/javascripts/App.tsx
index a4df70848..1222efb87 100644
--- a/app/assets/javascripts/App.tsx
+++ b/app/assets/javascripts/App.tsx
@@ -13,18 +13,30 @@ declare global {
     startApplication?: StartApplication
     websocketUrl: string
     electronAppVersion?: string
+    webClient?: DesktopManagerInterface
+
+    application?: WebApplication
+    mainApplicationGroup?: ApplicationGroup
   }
 }
 
 import { IsWebPlatform, WebAppVersion } from '@/Version'
-import { Runtime, SNLog } from '@standardnotes/snjs'
+import { DesktopManagerInterface, SNLog } from '@standardnotes/snjs'
 import { render } from 'preact'
 import { ApplicationGroupView } from './Components/ApplicationGroupView'
 import { WebDevice } from './Device/WebDevice'
 import { StartApplication } from './Device/StartApplication'
 import { ApplicationGroup } from './UIModels/ApplicationGroup'
-import { isDev } from './Utils'
 import { WebOrDesktopDevice } from './Device/WebOrDesktopDevice'
+import { WebApplication } from './UIModels/Application'
+import { unmountComponentAtRoot } from './Utils/PreactUtils'
+
+let keyCount = 0
+const getKey = () => {
+  return keyCount++
+}
+
+const RootId = 'app-group-root'
 
 const startApplication: StartApplication = async function startApplication(
   defaultSyncServerHost: string,
@@ -35,34 +47,41 @@ const startApplication: StartApplication = async function startApplication(
   SNLog.onLog = console.log
   SNLog.onError = console.error
 
-  const mainApplicationGroup = new ApplicationGroup(
-    defaultSyncServerHost,
-    device,
-    enableUnfinishedFeatures ? Runtime.Dev : Runtime.Prod,
-    webSocketUrl,
-  )
-
-  if (isDev) {
-    Object.defineProperties(window, {
-      application: {
-        get: () => mainApplicationGroup.primaryApplication,
-      },
-    })
+  const onDestroy = () => {
+    const root = document.getElementById(RootId) as HTMLElement
+    unmountComponentAtRoot(root)
+    root.remove()
+    renderApp()
   }
 
   const renderApp = () => {
+    const root = document.createElement('div')
+    root.id = RootId
+
+    const parentNode = document.body.appendChild(root)
+
     render(
-      <ApplicationGroupView mainApplicationGroup={mainApplicationGroup} />,
-      document.body.appendChild(document.createElement('div')),
+      <ApplicationGroupView
+        key={getKey()}
+        server={defaultSyncServerHost}
+        device={device}
+        enableUnfinished={enableUnfinishedFeatures}
+        websocketUrl={webSocketUrl}
+        onDestroy={onDestroy}
+      />,
+      parentNode,
     )
   }
 
   const domReady = document.readyState === 'complete' || document.readyState === 'interactive'
+
   if (domReady) {
     renderApp()
   } else {
-    window.addEventListener('DOMContentLoaded', () => {
+    window.addEventListener('DOMContentLoaded', function callback() {
       renderApp()
+
+      window.removeEventListener('DOMContentLoaded', callback)
     })
   }
 }
diff --git a/app/assets/javascripts/Components/Abstract/PureComponent.tsx b/app/assets/javascripts/Components/Abstract/PureComponent.tsx
index 74041cef2..1d562d7ec 100644
--- a/app/assets/javascripts/Components/Abstract/PureComponent.tsx
+++ b/app/assets/javascripts/Components/Abstract/PureComponent.tsx
@@ -31,6 +31,9 @@ export abstract class PureComponent<P = PureComponentProps, S = PureComponentSta
     this.reactionDisposers.length = 0
     ;(this.unsubApp as unknown) = undefined
     ;(this.unsubState as unknown) = undefined
+    ;(this.application as unknown) = undefined
+    ;(this.props as unknown) = undefined
+    ;(this.state as unknown) = undefined
   }
 
   protected dismissModal(): void {
@@ -81,11 +84,18 @@ export abstract class PureComponent<P = PureComponentProps, S = PureComponentSta
     if (this.application.isStarted()) {
       this.onAppStart().catch(console.error)
     }
+
     if (this.application.isLaunched()) {
       this.onAppLaunch().catch(console.error)
     }
+
     this.unsubApp = this.application.addEventObserver(async (eventName, data: unknown) => {
+      if (!this.application) {
+        return
+      }
+
       this.onAppEvent(eventName, data)
+
       if (eventName === ApplicationEvent.Started) {
         await this.onAppStart()
       } else if (eventName === ApplicationEvent.Launched) {
diff --git a/app/assets/javascripts/Components/AccountMenu/AdvancedOptions.tsx b/app/assets/javascripts/Components/AccountMenu/AdvancedOptions.tsx
index 469f7a2e7..7aa70e5dc 100644
--- a/app/assets/javascripts/Components/AccountMenu/AdvancedOptions.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/AdvancedOptions.tsx
@@ -2,7 +2,7 @@ import { WebApplication } from '@/UIModels/Application'
 import { AppState } from '@/UIModels/AppState'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
-import { useEffect, useState } from 'preact/hooks'
+import { useCallback, useEffect, useState } from 'preact/hooks'
 import { Checkbox } from '@/Components/Checkbox'
 import { DecoratedInput } from '@/Components/Input/DecoratedInput'
 import { Icon } from '@/Components/Icon'
@@ -51,38 +51,44 @@ export const AdvancedOptions: FunctionComponent<Props> = observer(
       onPrivateWorkspaceChange?.(isPrivateWorkspace)
     }, [isPrivateWorkspace, onPrivateWorkspaceChange])
 
-    const handleIsPrivateWorkspaceChange = () => {
+    const handleIsPrivateWorkspaceChange = useCallback(() => {
       setIsPrivateWorkspace(!isPrivateWorkspace)
-    }
+    }, [isPrivateWorkspace])
 
-    const handlePrivateWorkspaceNameChange = (name: string) => {
+    const handlePrivateWorkspaceNameChange = useCallback((name: string) => {
       setPrivateWorkspaceName(name)
-    }
+    }, [])
 
-    const handlePrivateWorkspaceUserphraseChange = (userphrase: string) => {
+    const handlePrivateWorkspaceUserphraseChange = useCallback((userphrase: string) => {
       setPrivateWorkspaceUserphrase(userphrase)
-    }
+    }, [])
 
-    const handleServerOptionChange = (e: Event) => {
-      if (e.target instanceof HTMLInputElement) {
-        setEnableServerOption(e.target.checked)
-      }
-    }
+    const handleServerOptionChange = useCallback(
+      (e: Event) => {
+        if (e.target instanceof HTMLInputElement) {
+          setEnableServerOption(e.target.checked)
+        }
+      },
+      [setEnableServerOption],
+    )
 
-    const handleSyncServerChange = (server: string) => {
-      setServer(server)
-      application.setCustomHost(server).catch(console.error)
-    }
+    const handleSyncServerChange = useCallback(
+      (server: string) => {
+        setServer(server)
+        application.setCustomHost(server).catch(console.error)
+      },
+      [application, setServer],
+    )
 
-    const handleStrictSigninChange = () => {
+    const handleStrictSigninChange = useCallback(() => {
       const newValue = !isStrictSignin
       setIsStrictSignin(newValue)
       onStrictSignInChange?.(newValue)
-    }
+    }, [isStrictSignin, onStrictSignInChange])
 
-    const toggleShowAdvanced = () => {
+    const toggleShowAdvanced = useCallback(() => {
       setShowAdvanced(!showAdvanced)
-    }
+    }, [showAdvanced])
 
     return (
       <>
diff --git a/app/assets/javascripts/Components/AccountMenu/ConfirmPassword.tsx b/app/assets/javascripts/Components/AccountMenu/ConfirmPassword.tsx
index 66afcc84e..67774a613 100644
--- a/app/assets/javascripts/Components/AccountMenu/ConfirmPassword.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/ConfirmPassword.tsx
@@ -3,7 +3,7 @@ import { WebApplication } from '@/UIModels/Application'
 import { AppState } from '@/UIModels/AppState'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
-import { useEffect, useRef, useState } from 'preact/hooks'
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { AccountMenuPane } from '.'
 import { Button } from '@/Components/Button/Button'
 import { Checkbox } from '@/Components/Checkbox'
@@ -34,63 +34,69 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
       passwordInputRef.current?.focus()
     }, [])
 
-    const handlePasswordChange = (text: string) => {
+    const handlePasswordChange = useCallback((text: string) => {
       setConfirmPassword(text)
-    }
+    }, [])
 
-    const handleEphemeralChange = () => {
+    const handleEphemeralChange = useCallback(() => {
       setIsEphemeral(!isEphemeral)
-    }
+    }, [isEphemeral])
 
-    const handleShouldMergeChange = () => {
+    const handleShouldMergeChange = useCallback(() => {
       setShouldMergeLocal(!shouldMergeLocal)
-    }
+    }, [shouldMergeLocal])
 
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (error.length) {
-        setError('')
-      }
-      if (e.key === 'Enter') {
-        handleConfirmFormSubmit(e)
-      }
-    }
+    const handleConfirmFormSubmit = useCallback(
+      (e: Event) => {
+        e.preventDefault()
 
-    const handleConfirmFormSubmit = (e: Event) => {
-      e.preventDefault()
+        if (!password) {
+          passwordInputRef.current?.focus()
+          return
+        }
 
-      if (!password) {
-        passwordInputRef.current?.focus()
-        return
-      }
+        if (password === confirmPassword) {
+          setIsRegistering(true)
+          application
+            .register(email, password, isEphemeral, shouldMergeLocal)
+            .then((res) => {
+              if (res.error) {
+                throw new Error(res.error.message)
+              }
+              appState.accountMenu.closeAccountMenu()
+              appState.accountMenu.setCurrentPane(AccountMenuPane.GeneralMenu)
+            })
+            .catch((err) => {
+              console.error(err)
+              setError(err.message)
+            })
+            .finally(() => {
+              setIsRegistering(false)
+            })
+        } else {
+          setError(STRING_NON_MATCHING_PASSWORDS)
+          setConfirmPassword('')
+          passwordInputRef.current?.focus()
+        }
+      },
+      [appState, application, confirmPassword, email, isEphemeral, password, shouldMergeLocal],
+    )
 
-      if (password === confirmPassword) {
-        setIsRegistering(true)
-        application
-          .register(email, password, isEphemeral, shouldMergeLocal)
-          .then((res) => {
-            if (res.error) {
-              throw new Error(res.error.message)
-            }
-            appState.accountMenu.closeAccountMenu()
-            appState.accountMenu.setCurrentPane(AccountMenuPane.GeneralMenu)
-          })
-          .catch((err) => {
-            console.error(err)
-            setError(err.message)
-          })
-          .finally(() => {
-            setIsRegistering(false)
-          })
-      } else {
-        setError(STRING_NON_MATCHING_PASSWORDS)
-        setConfirmPassword('')
-        passwordInputRef.current?.focus()
-      }
-    }
+    const handleKeyDown = useCallback(
+      (e: KeyboardEvent) => {
+        if (error.length) {
+          setError('')
+        }
+        if (e.key === 'Enter') {
+          handleConfirmFormSubmit(e)
+        }
+      },
+      [handleConfirmFormSubmit, error],
+    )
 
-    const handleGoBack = () => {
+    const handleGoBack = useCallback(() => {
       setMenuPane(AccountMenuPane.Register)
-    }
+    }, [setMenuPane])
 
     return (
       <>
diff --git a/app/assets/javascripts/Components/AccountMenu/CreateAccount.tsx b/app/assets/javascripts/Components/AccountMenu/CreateAccount.tsx
index 91127a0d3..23ee0be3b 100644
--- a/app/assets/javascripts/Components/AccountMenu/CreateAccount.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/CreateAccount.tsx
@@ -2,7 +2,7 @@ import { WebApplication } from '@/UIModels/Application'
 import { AppState } from '@/UIModels/AppState'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
-import { StateUpdater, useEffect, useRef, useState } from 'preact/hooks'
+import { StateUpdater, useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { AccountMenuPane } from '.'
 import { Button } from '@/Components/Button/Button'
 import { DecoratedInput } from '@/Components/Input/DecoratedInput'
@@ -33,50 +33,65 @@ export const CreateAccount: FunctionComponent<Props> = observer(
       }
     }, [])
 
-    const handleEmailChange = (text: string) => {
-      setEmail(text)
-    }
+    const handleEmailChange = useCallback(
+      (text: string) => {
+        setEmail(text)
+      },
+      [setEmail],
+    )
 
-    const handlePasswordChange = (text: string) => {
-      setPassword(text)
-    }
+    const handlePasswordChange = useCallback(
+      (text: string) => {
+        setPassword(text)
+      },
+      [setPassword],
+    )
 
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Enter') {
-        handleRegisterFormSubmit(e)
-      }
-    }
+    const handleRegisterFormSubmit = useCallback(
+      (e: Event) => {
+        e.preventDefault()
 
-    const handleRegisterFormSubmit = (e: Event) => {
-      e.preventDefault()
+        if (!email || email.length === 0) {
+          emailInputRef.current?.focus()
+          return
+        }
 
-      if (!email || email.length === 0) {
-        emailInputRef.current?.focus()
-        return
-      }
+        if (!password || password.length === 0) {
+          passwordInputRef.current?.focus()
+          return
+        }
 
-      if (!password || password.length === 0) {
-        passwordInputRef.current?.focus()
-        return
-      }
+        setEmail(email)
+        setPassword(password)
+        setMenuPane(AccountMenuPane.ConfirmPassword)
+      },
+      [email, password, setPassword, setMenuPane, setEmail],
+    )
 
-      setEmail(email)
-      setPassword(password)
-      setMenuPane(AccountMenuPane.ConfirmPassword)
-    }
+    const handleKeyDown = useCallback(
+      (e: KeyboardEvent) => {
+        if (e.key === 'Enter') {
+          handleRegisterFormSubmit(e)
+        }
+      },
+      [handleRegisterFormSubmit],
+    )
 
-    const handleClose = () => {
+    const handleClose = useCallback(() => {
       setMenuPane(AccountMenuPane.GeneralMenu)
       setEmail('')
       setPassword('')
-    }
+    }, [setEmail, setMenuPane, setPassword])
 
-    const onPrivateWorkspaceChange = (isPrivateWorkspace: boolean, privateWorkspaceIdentifier?: string) => {
-      setIsPrivateWorkspace(isPrivateWorkspace)
-      if (isPrivateWorkspace && privateWorkspaceIdentifier) {
-        setEmail(privateWorkspaceIdentifier)
-      }
-    }
+    const onPrivateWorkspaceChange = useCallback(
+      (isPrivateWorkspace: boolean, privateWorkspaceIdentifier?: string) => {
+        setIsPrivateWorkspace(isPrivateWorkspace)
+        if (isPrivateWorkspace && privateWorkspaceIdentifier) {
+          setEmail(privateWorkspaceIdentifier)
+        }
+      },
+      [setEmail],
+    )
 
     return (
       <>
diff --git a/app/assets/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx b/app/assets/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx
index 64e537a32..48f6c2509 100644
--- a/app/assets/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx
@@ -5,7 +5,7 @@ import { Icon } from '@/Components/Icon'
 import { formatLastSyncDate } from '@/Components/Preferences/Panes/Account/Sync'
 import { SyncQueueStrategy } from '@standardnotes/snjs'
 import { STRING_GENERIC_SYNC_ERROR } from '@/Strings'
-import { useState } from 'preact/hooks'
+import { useCallback, useMemo, useState } from 'preact/hooks'
 import { AccountMenuPane } from '.'
 import { FunctionComponent } from 'preact'
 import { Menu } from '@/Components/Menu/Menu'
@@ -28,7 +28,7 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
     const [isSyncingInProgress, setIsSyncingInProgress] = useState(false)
     const [lastSyncDate, setLastSyncDate] = useState(formatLastSyncDate(application.sync.getLastSyncDate() as Date))
 
-    const doSynchronization = async () => {
+    const doSynchronization = useCallback(async () => {
       setIsSyncingInProgress(true)
 
       application.sync
@@ -49,9 +49,33 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
         .finally(() => {
           setIsSyncingInProgress(false)
         })
-    }
+    }, [application])
 
-    const user = application.getUser()
+    const user = useMemo(() => application.getUser(), [application])
+
+    const openPreferences = useCallback(() => {
+      appState.accountMenu.closeAccountMenu()
+      appState.preferences.setCurrentPane('account')
+      appState.preferences.openPreferences()
+    }, [appState])
+
+    const openHelp = useCallback(() => {
+      appState.accountMenu.closeAccountMenu()
+      appState.preferences.setCurrentPane('help-feedback')
+      appState.preferences.openPreferences()
+    }, [appState])
+
+    const signOut = useCallback(() => {
+      appState.accountMenu.setSigningOut(true)
+    }, [appState])
+
+    const activateRegisterPane = useCallback(() => {
+      setMenuPane(AccountMenuPane.Register)
+    }, [setMenuPane])
+
+    const activateSignInPane = useCallback(() => {
+      setMenuPane(AccountMenuPane.SignIn)
+    }, [setMenuPane])
 
     const CREATE_ACCOUNT_INDEX = 1
     const SWITCHER_INDEX = 0
@@ -115,48 +139,23 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
           <WorkspaceSwitcherOption mainApplicationGroup={mainApplicationGroup} appState={appState} />
           <MenuItemSeparator />
           {user ? (
-            <MenuItem
-              type={MenuItemType.IconButton}
-              onClick={() => {
-                appState.accountMenu.closeAccountMenu()
-                appState.preferences.setCurrentPane('account')
-                appState.preferences.openPreferences()
-              }}
-            >
+            <MenuItem type={MenuItemType.IconButton} onClick={openPreferences}>
               <Icon type="user" className={iconClassName} />
               Account settings
             </MenuItem>
           ) : (
             <>
-              <MenuItem
-                type={MenuItemType.IconButton}
-                onClick={() => {
-                  setMenuPane(AccountMenuPane.Register)
-                }}
-              >
+              <MenuItem type={MenuItemType.IconButton} onClick={activateRegisterPane}>
                 <Icon type="user" className={iconClassName} />
                 Create free account
               </MenuItem>
-              <MenuItem
-                type={MenuItemType.IconButton}
-                onClick={() => {
-                  setMenuPane(AccountMenuPane.SignIn)
-                }}
-              >
+              <MenuItem type={MenuItemType.IconButton} onClick={activateSignInPane}>
                 <Icon type="signIn" className={iconClassName} />
                 Sign in
               </MenuItem>
             </>
           )}
-          <MenuItem
-            className="justify-between"
-            type={MenuItemType.IconButton}
-            onClick={() => {
-              appState.accountMenu.closeAccountMenu()
-              appState.preferences.setCurrentPane('help-feedback')
-              appState.preferences.openPreferences()
-            }}
-          >
+          <MenuItem className="justify-between" type={MenuItemType.IconButton} onClick={openHelp}>
             <div className="flex items-center">
               <Icon type="help" className={iconClassName} />
               Help &amp; feedback
@@ -166,12 +165,7 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
           {user ? (
             <>
               <MenuItemSeparator />
-              <MenuItem
-                type={MenuItemType.IconButton}
-                onClick={() => {
-                  appState.accountMenu.setSigningOut(true)
-                }}
-              >
+              <MenuItem type={MenuItemType.IconButton} onClick={signOut}>
                 <Icon type="signOut" className={iconClassName} />
                 Sign out workspace
               </MenuItem>
diff --git a/app/assets/javascripts/Components/AccountMenu/SignIn.tsx b/app/assets/javascripts/Components/AccountMenu/SignIn.tsx
index 20ce1e013..f03e0949e 100644
--- a/app/assets/javascripts/Components/AccountMenu/SignIn.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/SignIn.tsx
@@ -44,36 +44,39 @@ export const SignInPane: FunctionComponent<Props> = observer(({ application, app
     }
   }, [])
 
-  const resetInvalid = () => {
+  const resetInvalid = useCallback(() => {
     if (error.length) {
       setError('')
     }
-  }
+  }, [setError, error])
 
-  const handleEmailChange = (text: string) => {
+  const handleEmailChange = useCallback((text: string) => {
     setEmail(text)
-  }
+  }, [])
 
-  const handlePasswordChange = (text: string) => {
-    if (error.length) {
-      setError('')
-    }
-    setPassword(text)
-  }
+  const handlePasswordChange = useCallback(
+    (text: string) => {
+      if (error.length) {
+        setError('')
+      }
+      setPassword(text)
+    },
+    [setPassword, error],
+  )
 
-  const handleEphemeralChange = () => {
+  const handleEphemeralChange = useCallback(() => {
     setIsEphemeral(!isEphemeral)
-  }
+  }, [isEphemeral])
 
-  const handleStrictSigninChange = () => {
+  const handleStrictSigninChange = useCallback(() => {
     setIsStrictSignin(!isStrictSignin)
-  }
+  }, [isStrictSignin])
 
-  const handleShouldMergeChange = () => {
+  const handleShouldMergeChange = useCallback(() => {
     setShouldMergeLocal(!shouldMergeLocal)
-  }
+  }, [shouldMergeLocal])
 
-  const signIn = () => {
+  const signIn = useCallback(() => {
     setIsSigningIn(true)
     emailInputRef?.current?.blur()
     passwordInputRef?.current?.blur()
@@ -95,13 +98,7 @@ export const SignInPane: FunctionComponent<Props> = observer(({ application, app
       .finally(() => {
         setIsSigningIn(false)
       })
-  }
-
-  const handleKeyDown = (e: KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      handleSignInFormSubmit(e)
-    }
-  }
+  }, [appState, application, email, isEphemeral, isStrictSignin, password, shouldMergeLocal])
 
   const onPrivateWorkspaceChange = useCallback(
     (newIsPrivateWorkspace: boolean, privateWorkspaceIdentifier?: string) => {
@@ -113,21 +110,33 @@ export const SignInPane: FunctionComponent<Props> = observer(({ application, app
     [setEmail],
   )
 
-  const handleSignInFormSubmit = (e: Event) => {
-    e.preventDefault()
+  const handleSignInFormSubmit = useCallback(
+    (e: Event) => {
+      e.preventDefault()
 
-    if (!email || email.length === 0) {
-      emailInputRef?.current?.focus()
-      return
-    }
+      if (!email || email.length === 0) {
+        emailInputRef?.current?.focus()
+        return
+      }
 
-    if (!password || password.length === 0) {
-      passwordInputRef?.current?.focus()
-      return
-    }
+      if (!password || password.length === 0) {
+        passwordInputRef?.current?.focus()
+        return
+      }
 
-    signIn()
-  }
+      signIn()
+    },
+    [email, password, signIn],
+  )
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        handleSignInFormSubmit(e)
+      }
+    },
+    [handleSignInFormSubmit],
+  )
 
   return (
     <>
diff --git a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
index 2e0bdb9a7..663dd919a 100644
--- a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
@@ -1,9 +1,9 @@
 import { Icon } from '@/Components/Icon'
 import { MenuItem, MenuItemType } from '@/Components/Menu/MenuItem'
 import { KeyboardKey } from '@/Services/IOService'
-import { ApplicationDescriptor } from '@standardnotes/snjs/dist/@types'
+import { ApplicationDescriptor } from '@standardnotes/snjs'
 import { FunctionComponent } from 'preact'
-import { useEffect, useRef, useState } from 'preact/hooks'
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 
 type Props = {
   descriptor: ApplicationDescriptor
@@ -29,17 +29,20 @@ export const WorkspaceMenuItem: FunctionComponent<Props> = ({
     }
   }, [isRenaming])
 
-  const handleInputKeyDown = (event: KeyboardEvent) => {
+  const handleInputKeyDown = useCallback((event: KeyboardEvent) => {
     if (event.key === KeyboardKey.Enter) {
       inputRef.current?.blur()
     }
-  }
+  }, [])
 
-  const handleInputBlur = (event: FocusEvent) => {
-    const name = (event.target as HTMLInputElement).value
-    renameDescriptor(name)
-    setIsRenaming(false)
-  }
+  const handleInputBlur = useCallback(
+    (event: FocusEvent) => {
+      const name = (event.target as HTMLInputElement).value
+      renameDescriptor(name)
+      setIsRenaming(false)
+    },
+    [renameDescriptor],
+  )
 
   return (
     <MenuItem
diff --git a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx
index d59224cdd..9b49e1ebd 100644
--- a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx
@@ -1,6 +1,6 @@
 import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
 import { AppState } from '@/UIModels/AppState'
-import { ApplicationDescriptor, ButtonType } from '@standardnotes/snjs'
+import { ApplicationDescriptor, ApplicationGroupEvent, ButtonType } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
 import { useCallback, useEffect, useState } from 'preact/hooks'
@@ -17,13 +17,18 @@ type Props = {
 }
 
 export const WorkspaceSwitcherMenu: FunctionComponent<Props> = observer(
-  ({ mainApplicationGroup, appState, isOpen, hideWorkspaceOptions = false }) => {
+  ({ mainApplicationGroup, appState, isOpen, hideWorkspaceOptions = false }: Props) => {
     const [applicationDescriptors, setApplicationDescriptors] = useState<ApplicationDescriptor[]>([])
 
     useEffect(() => {
-      const removeAppGroupObserver = mainApplicationGroup.addApplicationChangeObserver(() => {
-        const applicationDescriptors = mainApplicationGroup.getDescriptors()
-        setApplicationDescriptors(applicationDescriptors)
+      const applicationDescriptors = mainApplicationGroup.getDescriptors()
+      setApplicationDescriptors(applicationDescriptors)
+
+      const removeAppGroupObserver = mainApplicationGroup.addEventObserver((event) => {
+        if (event === ApplicationGroupEvent.DescriptorsDataChanged) {
+          const applicationDescriptors = mainApplicationGroup.getDescriptors()
+          setApplicationDescriptors(applicationDescriptors)
+        }
       })
 
       return () => {
@@ -42,20 +47,21 @@ export const WorkspaceSwitcherMenu: FunctionComponent<Props> = observer(
         return
       }
       mainApplicationGroup.signOutAllWorkspaces().catch(console.error)
-    }, [mainApplicationGroup, appState.application.alertService])
+    }, [mainApplicationGroup, appState])
+
+    const destroyWorkspace = useCallback(() => {
+      appState.accountMenu.setSigningOut(true)
+    }, [appState])
 
     return (
       <Menu a11yLabel="Workspace switcher menu" className="px-0 focus:shadow-none" isOpen={isOpen}>
         {applicationDescriptors.map((descriptor) => (
           <WorkspaceMenuItem
+            key={descriptor.identifier}
             descriptor={descriptor}
             hideOptions={hideWorkspaceOptions}
-            onDelete={() => {
-              appState.accountMenu.setSigningOut(true)
-            }}
-            onClick={() => {
-              mainApplicationGroup.loadApplicationForDescriptor(descriptor)
-            }}
+            onDelete={destroyWorkspace}
+            onClick={() => void mainApplicationGroup.unloadCurrentAndActivateDescriptor(descriptor)}
             renameDescriptor={(label: string) => mainApplicationGroup.renameDescriptor(descriptor, label)}
           />
         ))}
@@ -64,7 +70,7 @@ export const WorkspaceSwitcherMenu: FunctionComponent<Props> = observer(
         <MenuItem
           type={MenuItemType.IconButton}
           onClick={() => {
-            mainApplicationGroup.addNewApplication()
+            void mainApplicationGroup.unloadCurrentAndCreateNewDescriptor()
           }}
         >
           <Icon type="user-add" className="color-neutral mr-2" />
diff --git a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx
index 79e58b63f..a8881180c 100644
--- a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx
@@ -4,7 +4,7 @@ import { AppState } from '@/UIModels/AppState'
 import { calculateSubmenuStyle, SubmenuStyle } from '@/Utils/CalculateSubmenuStyle'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
-import { useEffect, useRef, useState } from 'preact/hooks'
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { Icon } from '@/Components/Icon'
 import { WorkspaceSwitcherMenu } from './WorkspaceSwitcherMenu'
 
@@ -19,7 +19,7 @@ export const WorkspaceSwitcherOption: FunctionComponent<Props> = observer(({ mai
   const [isOpen, setIsOpen] = useState(false)
   const [menuStyle, setMenuStyle] = useState<SubmenuStyle>()
 
-  const toggleMenu = () => {
+  const toggleMenu = useCallback(() => {
     if (!isOpen) {
       const menuPosition = calculateSubmenuStyle(buttonRef.current)
       if (menuPosition) {
@@ -28,7 +28,7 @@ export const WorkspaceSwitcherOption: FunctionComponent<Props> = observer(({ mai
     }
 
     setIsOpen(!isOpen)
-  }
+  }, [isOpen, setIsOpen])
 
   useEffect(() => {
     if (isOpen) {
diff --git a/app/assets/javascripts/Components/AccountMenu/index.tsx b/app/assets/javascripts/Components/AccountMenu/index.tsx
index d27726865..982231644 100644
--- a/app/assets/javascripts/Components/AccountMenu/index.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/index.tsx
@@ -2,7 +2,7 @@ import { observer } from 'mobx-react-lite'
 import { useCloseOnClickOutside } from '@/Hooks/useCloseOnClickOutside'
 import { AppState } from '@/UIModels/AppState'
 import { WebApplication } from '@/UIModels/Application'
-import { useRef, useState } from 'preact/hooks'
+import { useCallback, useRef, useState } from 'preact/hooks'
 import { GeneralAccountMenu } from './GeneralAccountMenu'
 import { FunctionComponent } from 'preact'
 import { SignInPane } from './SignIn'
@@ -80,26 +80,40 @@ const MenuPaneSelector: FunctionComponent<PaneSelectorProps> = observer(
 
 export const AccountMenu: FunctionComponent<Props> = observer(
   ({ application, appState, onClickOutside, mainApplicationGroup }) => {
-    const { currentPane, setCurrentPane, shouldAnimateCloseMenu, closeAccountMenu } = appState.accountMenu
+    const { currentPane, shouldAnimateCloseMenu } = appState.accountMenu
+
+    const closeAccountMenu = useCallback(() => {
+      appState.accountMenu.closeAccountMenu()
+    }, [appState])
+
+    const setCurrentPane = useCallback(
+      (pane: AccountMenuPane) => {
+        appState.accountMenu.setCurrentPane(pane)
+      },
+      [appState],
+    )
 
     const ref = useRef<HTMLDivElement>(null)
     useCloseOnClickOutside(ref, () => {
       onClickOutside()
     })
 
-    const handleKeyDown: JSXInternal.KeyboardEventHandler<HTMLDivElement> = (event) => {
-      switch (event.key) {
-        case 'Escape':
-          if (currentPane === AccountMenuPane.GeneralMenu) {
-            closeAccountMenu()
-          } else if (currentPane === AccountMenuPane.ConfirmPassword) {
-            setCurrentPane(AccountMenuPane.Register)
-          } else {
-            setCurrentPane(AccountMenuPane.GeneralMenu)
-          }
-          break
-      }
-    }
+    const handleKeyDown: JSXInternal.KeyboardEventHandler<HTMLDivElement> = useCallback(
+      (event) => {
+        switch (event.key) {
+          case 'Escape':
+            if (currentPane === AccountMenuPane.GeneralMenu) {
+              closeAccountMenu()
+            } else if (currentPane === AccountMenuPane.ConfirmPassword) {
+              setCurrentPane(AccountMenuPane.Register)
+            } else {
+              setCurrentPane(AccountMenuPane.GeneralMenu)
+            }
+            break
+        }
+      },
+      [closeAccountMenu, currentPane, setCurrentPane],
+    )
 
     return (
       <div ref={ref} id="account-menu" className="sn-component">
diff --git a/app/assets/javascripts/Components/ApplicationGroupView/index.tsx b/app/assets/javascripts/Components/ApplicationGroupView/index.tsx
index 570673766..102d2a953 100644
--- a/app/assets/javascripts/Components/ApplicationGroupView/index.tsx
+++ b/app/assets/javascripts/Components/ApplicationGroupView/index.tsx
@@ -2,40 +2,126 @@ import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
 import { WebApplication } from '@/UIModels/Application'
 import { Component } from 'preact'
 import { ApplicationView } from '@/Components/ApplicationView'
+import { WebOrDesktopDevice } from '@/Device/WebOrDesktopDevice'
+import { ApplicationGroupEvent, Runtime } from '@standardnotes/snjs'
+import { unmountComponentAtNode, findDOMNode } from 'preact/compat'
+import { DialogContent, DialogOverlay } from '@reach/dialog'
+import { isDesktopApplication } from '@/Utils'
+
+type Props = {
+  server: string
+  device: WebOrDesktopDevice
+  enableUnfinished: boolean
+  websocketUrl: string
+  onDestroy: () => void
+}
 
 type State = {
   activeApplication?: WebApplication
-}
-
-type Props = {
-  mainApplicationGroup: ApplicationGroup
+  dealloced?: boolean
+  deviceDestroyed?: boolean
 }
 
 export class ApplicationGroupView extends Component<Props, State> {
+  applicationObserverRemover?: () => void
+  private group?: ApplicationGroup
+  private application?: WebApplication
+
   constructor(props: Props) {
     super(props)
 
-    props.mainApplicationGroup.addApplicationChangeObserver(() => {
-      const activeApplication = props.mainApplicationGroup.primaryApplication as WebApplication
-      this.setState({ activeApplication })
+    if (props.device.isDeviceDestroyed()) {
+      this.state = {
+        deviceDestroyed: true,
+      }
+
+      return
+    }
+
+    this.group = new ApplicationGroup(
+      props.server,
+      props.device,
+      props.enableUnfinished ? Runtime.Dev : Runtime.Prod,
+      props.websocketUrl,
+    )
+
+    window.mainApplicationGroup = this.group
+
+    this.applicationObserverRemover = this.group.addEventObserver((event, data) => {
+      if (event === ApplicationGroupEvent.PrimaryApplicationSet) {
+        this.application = data?.primaryApplication as WebApplication
+
+        this.setState({ activeApplication: this.application })
+      } else if (event === ApplicationGroupEvent.DeviceWillRestart) {
+        this.setState({ dealloced: true })
+      }
     })
 
-    props.mainApplicationGroup.initialize().catch(console.error)
+    this.state = {}
+
+    this.group.initialize().catch(console.error)
+  }
+
+  deinit() {
+    this.application = undefined
+
+    this.applicationObserverRemover?.()
+    ;(this.applicationObserverRemover as unknown) = undefined
+
+    this.group?.deinit()
+    ;(this.group as unknown) = undefined
+
+    this.setState({ dealloced: true, activeApplication: undefined })
+
+    const onDestroy = this.props.onDestroy
+
+    const node = findDOMNode(this) as Element
+    unmountComponentAtNode(node)
+
+    onDestroy()
   }
 
   render() {
+    const renderDialog = (message: string) => {
+      return (
+        <DialogOverlay className={'sn-component challenge-modal-overlay'}>
+          <DialogContent
+            className={
+              'challenge-modal flex flex-col items-center bg-default p-8 rounded relative shadow-overlay-light border-1 border-solid border-main'
+            }
+          >
+            {message}
+          </DialogContent>
+        </DialogOverlay>
+      )
+    }
+
+    if (this.state.deviceDestroyed) {
+      const message = `Secure memory has destroyed this application instance. ${
+        isDesktopApplication()
+          ? 'Restart the app to continue.'
+          : 'Close this browser tab and open a new one to continue.'
+      }`
+
+      return renderDialog(message)
+    }
+
+    if (this.state.dealloced) {
+      return renderDialog('Switching workspace...')
+    }
+
+    if (!this.group || !this.state.activeApplication || this.state.activeApplication.dealloced) {
+      return null
+    }
+
     return (
-      <>
-        {this.state.activeApplication && (
-          <div id={this.state.activeApplication.identifier}>
-            <ApplicationView
-              key={this.state.activeApplication.ephemeralIdentifier}
-              mainApplicationGroup={this.props.mainApplicationGroup}
-              application={this.state.activeApplication}
-            />
-          </div>
-        )}
-      </>
+      <div id={this.state.activeApplication.identifier} key={this.state.activeApplication.ephemeralIdentifier}>
+        <ApplicationView
+          key={this.state.activeApplication.ephemeralIdentifier}
+          mainApplicationGroup={this.group}
+          application={this.state.activeApplication}
+        />
+      </div>
     )
   }
 }
diff --git a/app/assets/javascripts/Components/ApplicationView/index.tsx b/app/assets/javascripts/Components/ApplicationView/index.tsx
index 0e5e9e115..80f6d1def 100644
--- a/app/assets/javascripts/Components/ApplicationView/index.tsx
+++ b/app/assets/javascripts/Components/ApplicationView/index.tsx
@@ -4,8 +4,7 @@ import { AppStateEvent, PanelResizedData } from '@/UIModels/AppState'
 import { ApplicationEvent, Challenge, PermissionDialog, removeFromArray } from '@standardnotes/snjs'
 import { PANEL_NAME_NOTES, PANEL_NAME_NAVIGATION } from '@/Constants'
 import { alertDialog } from '@/Services/AlertService'
-import { WebAppEvent, WebApplication } from '@/UIModels/Application'
-import { PureComponent } from '@/Components/Abstract/PureComponent'
+import { WebApplication } from '@/UIModels/Application'
 import { Navigation } from '@/Components/Navigation'
 import { NotesView } from '@/Components/NotesView'
 import { NoteGroupView } from '@/Components/NoteGroupView'
@@ -15,7 +14,7 @@ import { PreferencesViewWrapper } from '@/Components/Preferences/PreferencesView
 import { ChallengeModal } from '@/Components/ChallengeModal/ChallengeModal'
 import { NotesContextMenu } from '@/Components/NotesContextMenu'
 import { PurchaseFlowWrapper } from '@/Components/PurchaseFlow/PurchaseFlowWrapper'
-import { render } from 'preact'
+import { render, FunctionComponent } from 'preact'
 import { PermissionsModal } from '@/Components/PermissionsModal'
 import { RevisionHistoryModalWrapper } from '@/Components/RevisionHistoryModal/RevisionHistoryModalWrapper'
 import { PremiumModalProvider } from '@/Hooks/usePremiumModal'
@@ -23,199 +22,221 @@ import { ConfirmSignoutContainer } from '@/Components/ConfirmSignoutModal'
 import { TagsContextMenu } from '@/Components/Tags/TagContextMenu'
 import { ToastContainer } from '@standardnotes/stylekit'
 import { FilePreviewModal } from '../Files/FilePreviewModal'
+import { useCallback, useEffect, useMemo, useState } from 'preact/hooks'
+import { isStateDealloced } from '@/UIModels/AppState/AbstractState'
 
 type Props = {
   application: WebApplication
   mainApplicationGroup: ApplicationGroup
 }
 
-type State = {
-  started?: boolean
-  launched?: boolean
-  needsUnlock?: boolean
-  appClass: string
-  challenges: Challenge[]
-}
+export const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicationGroup }) => {
+  const platformString = getPlatformString()
+  const [appClass, setAppClass] = useState('')
+  const [launched, setLaunched] = useState(false)
+  const [needsUnlock, setNeedsUnlock] = useState(true)
+  const [challenges, setChallenges] = useState<Challenge[]>([])
+  const [dealloced, setDealloced] = useState(false)
 
-export class ApplicationView extends PureComponent<Props, State> {
-  public readonly platformString = getPlatformString()
+  const componentManager = application.componentManager
+  const appState = application.getAppState()
 
-  constructor(props: Props) {
-    super(props, props.application)
-    this.state = {
-      appClass: '',
-      challenges: [],
-    }
-  }
+  useEffect(() => {
+    setDealloced(application.dealloced)
+  }, [application.dealloced])
 
-  override deinit() {
-    ;(this.application as unknown) = undefined
-    super.deinit()
-  }
-
-  override componentDidMount(): void {
-    super.componentDidMount()
-
-    void this.loadApplication()
-  }
-
-  async loadApplication() {
-    const desktopService = this.application.getDesktopService()
-    if (desktopService) {
-      this.application.componentManager.setDesktopManager(desktopService)
-    }
-
-    await this.application.prepareForLaunch({
-      receiveChallenge: async (challenge) => {
-        const challenges = this.state.challenges.slice()
-        challenges.push(challenge)
-        this.setState({ challenges: challenges })
-      },
-    })
-
-    await this.application.launch()
-  }
-
-  public removeChallenge = async (challenge: Challenge) => {
-    const challenges = this.state.challenges.slice()
-    removeFromArray(challenges, challenge)
-    this.setState({ challenges: challenges })
-  }
-
-  override async onAppStart() {
-    super.onAppStart().catch(console.error)
-    this.setState({
-      started: true,
-      needsUnlock: this.application.hasPasscode(),
-    })
-
-    this.application.componentManager.presentPermissionsDialog = this.presentPermissionsDialog
-  }
-
-  override async onAppLaunch() {
-    super.onAppLaunch().catch(console.error)
-    this.setState({
-      launched: true,
-      needsUnlock: false,
-    })
-    this.handleDemoSignInFromParams().catch(console.error)
-  }
-
-  onUpdateAvailable() {
-    this.application.notifyWebEvent(WebAppEvent.NewUpdateAvailable)
-  }
-
-  override async onAppEvent(eventName: ApplicationEvent) {
-    super.onAppEvent(eventName)
-    switch (eventName) {
-      case ApplicationEvent.LocalDatabaseReadError:
-        alertDialog({
-          text: 'Unable to load local database. Please restart the app and try again.',
-        }).catch(console.error)
-        break
-      case ApplicationEvent.LocalDatabaseWriteError:
-        alertDialog({
-          text: 'Unable to write to local database. Please restart the app and try again.',
-        }).catch(console.error)
-        break
-    }
-  }
-
-  override async onAppStateEvent(eventName: AppStateEvent, data?: unknown) {
-    if (eventName === AppStateEvent.PanelResized) {
-      const { panel, collapsed } = data as PanelResizedData
-      let appClass = ''
-      if (panel === PANEL_NAME_NOTES && collapsed) {
-        appClass += 'collapsed-notes'
-      }
-      if (panel === PANEL_NAME_NAVIGATION && collapsed) {
-        appClass += ' collapsed-navigation'
-      }
-      this.setState({ appClass })
-    } else if (eventName === AppStateEvent.WindowDidFocus) {
-      if (!(await this.application.isLocked())) {
-        this.application.sync.sync().catch(console.error)
-      }
-    }
-  }
-
-  async handleDemoSignInFromParams() {
-    const token = getWindowUrlParams().get('demo-token')
-    if (!token || this.application.hasAccount()) {
+  useEffect(() => {
+    if (dealloced) {
       return
     }
 
-    await this.application.sessions.populateSessionFromDemoShareToken(token)
-  }
+    const desktopService = application.getDesktopService()
 
-  presentPermissionsDialog = (dialog: PermissionDialog) => {
-    render(
-      <PermissionsModal
-        application={this.application}
-        callback={dialog.callback}
-        component={dialog.component}
-        permissionsString={dialog.permissionsString}
-      />,
-      document.body.appendChild(document.createElement('div')),
-    )
-  }
-
-  override render() {
-    if (this.application['dealloced'] === true) {
-      console.error('Attempting to render dealloced application')
-      return <div></div>
+    if (desktopService) {
+      application.componentManager.setDesktopManager(desktopService)
     }
 
-    const renderAppContents = !this.state.needsUnlock && this.state.launched
+    application
+      .prepareForLaunch({
+        receiveChallenge: async (challenge) => {
+          const challengesCopy = challenges.slice()
+          challengesCopy.push(challenge)
+          setChallenges(challengesCopy)
+        },
+      })
+      .then(() => {
+        void application.launch()
+      })
+      .catch(console.error)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [application, dealloced])
 
+  const removeChallenge = useCallback(
+    (challenge: Challenge) => {
+      const challengesCopy = challenges.slice()
+      removeFromArray(challengesCopy, challenge)
+      setChallenges(challengesCopy)
+    },
+    [challenges],
+  )
+
+  const presentPermissionsDialog = useCallback(
+    (dialog: PermissionDialog) => {
+      render(
+        <PermissionsModal
+          application={application}
+          callback={dialog.callback}
+          component={dialog.component}
+          permissionsString={dialog.permissionsString}
+        />,
+        document.body.appendChild(document.createElement('div')),
+      )
+    },
+    [application],
+  )
+
+  const onAppStart = useCallback(() => {
+    setNeedsUnlock(application.hasPasscode())
+    componentManager.presentPermissionsDialog = presentPermissionsDialog
+
+    return () => {
+      ;(componentManager.presentPermissionsDialog as unknown) = undefined
+    }
+  }, [application, componentManager, presentPermissionsDialog])
+
+  const handleDemoSignInFromParams = useCallback(() => {
+    const token = getWindowUrlParams().get('demo-token')
+    if (!token || application.hasAccount()) {
+      return
+    }
+
+    void application.sessions.populateSessionFromDemoShareToken(token)
+  }, [application])
+
+  const onAppLaunch = useCallback(() => {
+    setLaunched(true)
+    setNeedsUnlock(false)
+    handleDemoSignInFromParams()
+  }, [handleDemoSignInFromParams])
+
+  useEffect(() => {
+    if (application.isStarted()) {
+      onAppStart()
+    }
+
+    if (application.isLaunched()) {
+      onAppLaunch()
+    }
+
+    const removeAppObserver = application.addEventObserver(async (eventName) => {
+      if (eventName === ApplicationEvent.Started) {
+        onAppStart()
+      } else if (eventName === ApplicationEvent.Launched) {
+        onAppLaunch()
+      } else if (eventName === ApplicationEvent.LocalDatabaseReadError) {
+        alertDialog({
+          text: 'Unable to load local database. Please restart the app and try again.',
+        }).catch(console.error)
+      } else if (eventName === ApplicationEvent.LocalDatabaseWriteError) {
+        alertDialog({
+          text: 'Unable to write to local database. Please restart the app and try again.',
+        }).catch(console.error)
+      }
+    })
+
+    return () => {
+      removeAppObserver()
+    }
+  }, [application, onAppLaunch, onAppStart])
+
+  useEffect(() => {
+    const removeObserver = application.getAppState().addObserver(async (eventName, data) => {
+      if (eventName === AppStateEvent.PanelResized) {
+        const { panel, collapsed } = data as PanelResizedData
+        let appClass = ''
+        if (panel === PANEL_NAME_NOTES && collapsed) {
+          appClass += 'collapsed-notes'
+        }
+        if (panel === PANEL_NAME_NAVIGATION && collapsed) {
+          appClass += ' collapsed-navigation'
+        }
+        setAppClass(appClass)
+      } else if (eventName === AppStateEvent.WindowDidFocus) {
+        if (!(await application.isLocked())) {
+          application.sync.sync().catch(console.error)
+        }
+      }
+    })
+
+    return () => {
+      removeObserver()
+    }
+  }, [application])
+
+  const renderAppContents = useMemo(() => {
+    return !needsUnlock && launched
+  }, [needsUnlock, launched])
+
+  const renderChallenges = useCallback(() => {
     return (
-      <PremiumModalProvider application={this.application} appState={this.appState}>
-        <div className={this.platformString + ' main-ui-view sn-component'}>
-          {renderAppContents && (
-            <div id="app" className={this.state.appClass + ' app app-column-container'}>
-              <Navigation application={this.application} />
-              <NotesView application={this.application} appState={this.appState} />
-              <NoteGroupView application={this.application} />
-            </div>
-          )}
-          {renderAppContents && (
-            <>
-              <Footer application={this.application} applicationGroup={this.props.mainApplicationGroup} />
-              <SessionsModal application={this.application} appState={this.appState} />
-              <PreferencesViewWrapper appState={this.appState} application={this.application} />
-              <RevisionHistoryModalWrapper application={this.application} appState={this.appState} />
-            </>
-          )}
-          {this.state.challenges.map((challenge) => {
-            return (
-              <div className="sk-modal">
-                <ChallengeModal
-                  key={challenge.id}
-                  application={this.application}
-                  appState={this.appState}
-                  mainApplicationGroup={this.props.mainApplicationGroup}
-                  challenge={challenge}
-                  onDismiss={this.removeChallenge}
-                />
-              </div>
-            )
-          })}
-          {renderAppContents && (
-            <>
-              <NotesContextMenu application={this.application} appState={this.appState} />
-              <TagsContextMenu appState={this.appState} />
-              <PurchaseFlowWrapper application={this.application} appState={this.appState} />
-              <ConfirmSignoutContainer
-                applicationGroup={this.props.mainApplicationGroup}
-                appState={this.appState}
-                application={this.application}
+      <>
+        {challenges.map((challenge) => {
+          return (
+            <div className="sk-modal">
+              <ChallengeModal
+                key={`${challenge.id}${application.ephemeralIdentifier}`}
+                application={application}
+                appState={appState}
+                mainApplicationGroup={mainApplicationGroup}
+                challenge={challenge}
+                onDismiss={removeChallenge}
               />
-              <ToastContainer />
-              <FilePreviewModal application={this.application} appState={this.appState} />
-            </>
-          )}
-        </div>
-      </PremiumModalProvider>
+            </div>
+          )
+        })}
+      </>
     )
+  }, [appState, challenges, mainApplicationGroup, removeChallenge, application])
+
+  if (dealloced || isStateDealloced(appState)) {
+    return null
   }
+
+  if (!renderAppContents) {
+    return renderChallenges()
+  }
+
+  return (
+    <PremiumModalProvider application={application} appState={appState}>
+      <div className={platformString + ' main-ui-view sn-component'}>
+        <div id="app" className={appClass + ' app app-column-container'}>
+          <Navigation application={application} />
+          <NotesView application={application} appState={appState} />
+          <NoteGroupView application={application} />
+        </div>
+
+        <>
+          <Footer application={application} applicationGroup={mainApplicationGroup} />
+          <SessionsModal application={application} appState={appState} />
+          <PreferencesViewWrapper appState={appState} application={application} />
+          <RevisionHistoryModalWrapper application={application} appState={appState} />
+        </>
+
+        {renderChallenges()}
+
+        <>
+          <NotesContextMenu application={application} appState={appState} />
+          <TagsContextMenu appState={appState} />
+          <PurchaseFlowWrapper application={application} appState={appState} />
+          <ConfirmSignoutContainer
+            applicationGroup={mainApplicationGroup}
+            appState={appState}
+            application={application}
+          />
+          <ToastContainer />
+          <FilePreviewModal application={application} appState={appState} />
+        </>
+      </div>
+    </PremiumModalProvider>
+  )
 }
diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
index 975c2b724..164fdf0a1 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
@@ -8,7 +8,7 @@ import { FunctionComponent } from 'preact'
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { Icon } from '@/Components/Icon'
 import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
-import { ChallengeReason, CollectionSort, ContentType, SNFile, SNNote } from '@standardnotes/snjs'
+import { ChallengeReason, CollectionSort, ContentType, FileItem, SNNote } from '@standardnotes/snjs'
 import { confirmDialog } from '@/Services/AlertService'
 import { addToast, dismissToast, ToastType } from '@standardnotes/stylekit'
 import { StreamingFileReader } from '@standardnotes/filepicker'
@@ -17,6 +17,7 @@ import { AttachedFilesPopover } from './AttachedFilesPopover'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import { PopoverTabs } from './PopoverTabs'
 import { isHandlingFileDrag } from '@/Utils/DragTypeCheck'
+import { isStateDealloced } from '@/UIModels/AppState/AbstractState'
 
 type Props = {
   application: WebApplication
@@ -25,9 +26,12 @@ type Props = {
 }
 
 export const AttachedFilesButton: FunctionComponent<Props> = observer(
-  ({ application, appState, onClickPreprocessing }) => {
-    const premiumModal = usePremiumModal()
+  ({ application, appState, onClickPreprocessing }: Props) => {
+    if (isStateDealloced(appState)) {
+      return null
+    }
 
+    const premiumModal = usePremiumModal()
     const note: SNNote | undefined = Object.values(appState.notes.selectedNotes)[0]
 
     const [open, setOpen] = useState(false)
@@ -50,15 +54,15 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
     }, [appState.filePreviewModal.isOpen, keepMenuOpen])
 
     const [currentTab, setCurrentTab] = useState(PopoverTabs.AttachedFiles)
-    const [allFiles, setAllFiles] = useState<SNFile[]>([])
-    const [attachedFiles, setAttachedFiles] = useState<SNFile[]>([])
+    const [allFiles, setAllFiles] = useState<FileItem[]>([])
+    const [attachedFiles, setAttachedFiles] = useState<FileItem[]>([])
     const attachedFilesCount = attachedFiles.length
 
     useEffect(() => {
       application.items.setDisplayOptions(ContentType.File, CollectionSort.Title, 'dsc')
 
       const unregisterFileStream = application.streamItems(ContentType.File, () => {
-        setAllFiles(application.items.getDisplayableItems<SNFile>(ContentType.File))
+        setAllFiles(application.items.getDisplayableItems<FileItem>(ContentType.File))
         if (note) {
           setAttachedFiles(application.items.getFilesForNote(note))
         }
@@ -106,7 +110,7 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
       await toggleAttachedFilesMenu()
     }, [toggleAttachedFilesMenu, prospectivelyShowFilesPremiumModal])
 
-    const deleteFile = async (file: SNFile) => {
+    const deleteFile = async (file: FileItem) => {
       const shouldDelete = await confirmDialog({
         text: `Are you sure you want to permanently delete "${file.name}"?`,
         confirmButtonStyle: 'danger',
@@ -125,12 +129,12 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
       }
     }
 
-    const downloadFile = async (file: SNFile) => {
+    const downloadFile = async (file: FileItem) => {
       appState.files.downloadFile(file).catch(console.error)
     }
 
     const attachFileToNote = useCallback(
-      async (file: SNFile) => {
+      async (file: FileItem) => {
         if (!note) {
           addToast({
             type: ToastType.Error,
@@ -144,7 +148,7 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
       [application.items, note],
     )
 
-    const detachFileFromNote = async (file: SNFile) => {
+    const detachFileFromNote = async (file: FileItem) => {
       if (!note) {
         addToast({
           type: ToastType.Error,
@@ -155,8 +159,8 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
       await application.items.disassociateFileWithNote(file, note)
     }
 
-    const toggleFileProtection = async (file: SNFile) => {
-      let result: SNFile | undefined
+    const toggleFileProtection = async (file: FileItem) => {
+      let result: FileItem | undefined
       if (file.protected) {
         keepMenuOpen(true)
         result = await application.mutator.unprotectFile(file)
@@ -169,13 +173,13 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
       return isProtected
     }
 
-    const authorizeProtectedActionForFile = async (file: SNFile, challengeReason: ChallengeReason) => {
+    const authorizeProtectedActionForFile = async (file: FileItem, challengeReason: ChallengeReason) => {
       const authorizedFiles = await application.protections.authorizeProtectedActionForFiles([file], challengeReason)
       const isAuthorized = authorizedFiles.length > 0 && authorizedFiles.includes(file)
       return isAuthorized
     }
 
-    const renameFile = async (file: SNFile, fileName: string) => {
+    const renameFile = async (file: FileItem, fileName: string) => {
       await application.items.renameFile(file, fileName)
     }
 
diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
index aeeeb675a..6c978617e 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
@@ -1,8 +1,8 @@
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants'
 import { WebApplication } from '@/UIModels/Application'
 import { AppState } from '@/UIModels/AppState'
-import { SNFile } from '@standardnotes/snjs'
-import { FilesIllustration } from '@standardnotes/stylekit'
+import { FileItem } from '@standardnotes/snjs'
+import { FilesIllustration } from '@standardnotes/icons'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
 import { StateUpdater, useRef, useState } from 'preact/hooks'
@@ -15,8 +15,8 @@ import { PopoverTabs } from './PopoverTabs'
 type Props = {
   application: WebApplication
   appState: AppState
-  allFiles: SNFile[]
-  attachedFiles: SNFile[]
+  allFiles: FileItem[]
+  attachedFiles: FileItem[]
   closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
   currentTab: PopoverTabs
   handleFileAction: (action: PopoverFileItemAction) => Promise<boolean>
@@ -126,7 +126,7 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
             </div>
           ) : null}
           {filteredList.length > 0 ? (
-            filteredList.map((file: SNFile) => {
+            filteredList.map((file: FileItem) => {
               return (
                 <PopoverFileItem
                   key={file.uuid}
diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx
index 7700965f4..1516b4f3a 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx
@@ -1,7 +1,7 @@
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants'
 import { KeyboardKey } from '@/Services/IOService'
 import { formatSizeToReadableString } from '@standardnotes/filepicker'
-import { IconType, SNFile } from '@standardnotes/snjs'
+import { IconType, FileItem } from '@standardnotes/snjs'
 import { FunctionComponent } from 'preact'
 import { useEffect, useRef, useState } from 'preact/hooks'
 import { Icon, ICONS } from '@/Components/Icon'
@@ -15,7 +15,7 @@ export const getFileIconComponent = (iconType: string, className: string) => {
 }
 
 export type PopoverFileItemProps = {
-  file: SNFile
+  file: FileItem
   isAttachedToNote: boolean
   handleFileAction: (action: PopoverFileItemAction) => Promise<boolean>
   getIconType(type: string): IconType
@@ -40,7 +40,7 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
     }
   }, [isRenamingFile])
 
-  const renameFile = async (file: SNFile, name: string) => {
+  const renameFile = async (file: FileItem, name: string) => {
     await handleFileAction({
       type: PopoverFileItemActionType.RenameFile,
       payload: {
diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItemAction.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItemAction.tsx
index 6f6cdf994..b1e9368e6 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItemAction.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItemAction.tsx
@@ -1,4 +1,4 @@
-import { SNFile } from '@standardnotes/snjs'
+import { FileItem } from '@standardnotes/snjs'
 
 export enum PopoverFileItemActionType {
   AttachFileToNote,
@@ -16,17 +16,17 @@ export type PopoverFileItemAction =
         PopoverFileItemActionType,
         PopoverFileItemActionType.RenameFile | PopoverFileItemActionType.ToggleFileProtection
       >
-      payload: SNFile
+      payload: FileItem
     }
   | {
       type: PopoverFileItemActionType.ToggleFileProtection
-      payload: SNFile
+      payload: FileItem
       callback: (isProtected: boolean) => void
     }
   | {
       type: PopoverFileItemActionType.RenameFile
       payload: {
-        file: SNFile
+        file: FileItem
         name: string
       }
     }
diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx
index d1d77a054..649ab903c 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx
@@ -34,11 +34,11 @@ export const PopoverFileSubmenu: FunctionComponent<Props> = ({
   })
   const [closeOnBlur] = useCloseOnBlur(menuContainerRef, setIsMenuOpen)
 
-  const closeMenu = () => {
+  const closeMenu = useCallback(() => {
     setIsMenuOpen(false)
-  }
+  }, [])
 
-  const toggleMenu = () => {
+  const toggleMenu = useCallback(() => {
     if (!isMenuOpen) {
       const menuPosition = calculateSubmenuStyle(menuButtonRef.current)
       if (menuPosition) {
@@ -47,7 +47,7 @@ export const PopoverFileSubmenu: FunctionComponent<Props> = ({
     }
 
     setIsMenuOpen(!isMenuOpen)
-  }
+  }, [isMenuOpen])
 
   const recalculateMenuStyle = useCallback(() => {
     const newMenuPosition = calculateSubmenuStyle(menuButtonRef.current, menuRef.current)
diff --git a/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx b/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx
index c3210f5af..93c4586f4 100644
--- a/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx
+++ b/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx
@@ -8,7 +8,7 @@ import {
   ChallengeValue,
   removeFromArray,
 } from '@standardnotes/snjs'
-import { ProtectedIllustration } from '@standardnotes/stylekit'
+import { ProtectedIllustration } from '@standardnotes/icons'
 import { FunctionComponent } from 'preact'
 import { useCallback, useEffect, useState } from 'preact/hooks'
 import { Button } from '@/Components/Button/Button'
@@ -31,7 +31,7 @@ type Props = {
   appState: AppState
   mainApplicationGroup: ApplicationGroup
   challenge: Challenge
-  onDismiss: (challenge: Challenge) => Promise<void>
+  onDismiss?: (challenge: Challenge) => void
 }
 
 const validateValues = (values: ChallengeModalValues, prompts: ChallengePrompt[]): ChallengeModalValues | undefined => {
@@ -77,7 +77,7 @@ export const ChallengeModal: FunctionComponent<Props> = ({
   )
   const shouldShowWorkspaceSwitcher = challenge.reason === ChallengeReason.ApplicationUnlock
 
-  const submit = async () => {
+  const submit = useCallback(() => {
     const validatedValues = validateValues(values, challenge.prompts)
     if (!validatedValues) {
       return
@@ -87,12 +87,14 @@ export const ChallengeModal: FunctionComponent<Props> = ({
     }
     setIsSubmitting(true)
     setIsProcessing(true)
+
     const valuesToProcess: ChallengeValue[] = []
     for (const inputValue of Object.values(validatedValues)) {
       const rawValue = inputValue.value
       const value = { prompt: inputValue.prompt, value: rawValue }
       valuesToProcess.push(value)
     }
+
     const processingPrompts = valuesToProcess.map((v) => v.prompt)
     setIsProcessing(processingPrompts.length > 0)
     setProcessingPrompts(processingPrompts)
@@ -109,7 +111,7 @@ export const ChallengeModal: FunctionComponent<Props> = ({
       }
       setIsSubmitting(false)
     }, 50)
-  }
+  }, [application, challenge, isProcessing, isSubmitting, values])
 
   const onValueChange = useCallback(
     (value: string | number, prompt: ChallengePrompt) => {
@@ -121,12 +123,12 @@ export const ChallengeModal: FunctionComponent<Props> = ({
     [values],
   )
 
-  const cancelChallenge = () => {
+  const cancelChallenge = useCallback(() => {
     if (challenge.cancelable) {
       application.cancelChallenge(challenge)
-      onDismiss(challenge).catch(console.error)
+      onDismiss?.(challenge)
     }
-  }
+  }, [application, challenge, onDismiss])
 
   useEffect(() => {
     const removeChallengeObserver = application.addChallengeObserver(challenge, {
@@ -163,10 +165,10 @@ export const ChallengeModal: FunctionComponent<Props> = ({
         }
       },
       onComplete: () => {
-        onDismiss(challenge).catch(console.error)
+        onDismiss?.(challenge)
       },
       onCancel: () => {
-        onDismiss(challenge).catch(console.error)
+        onDismiss?.(challenge)
       },
     })
 
@@ -186,6 +188,7 @@ export const ChallengeModal: FunctionComponent<Props> = ({
       }`}
       onDismiss={cancelChallenge}
       dangerouslyBypassFocusLock={bypassModalFocusLock}
+      key={challenge.id}
     >
       <DialogContent
         className={`challenge-modal flex flex-col items-center bg-default p-8 rounded relative ${
@@ -205,14 +208,16 @@ export const ChallengeModal: FunctionComponent<Props> = ({
         )}
         <ProtectedIllustration className="w-30 h-30 mb-4" />
         <div className="font-bold text-lg text-center max-w-76 mb-3">{challenge.heading}</div>
+
         {challenge.subheading && (
           <div className="text-center text-sm max-w-76 mb-4 break-word">{challenge.subheading}</div>
         )}
+
         <form
           className="flex flex-col items-center min-w-76"
           onSubmit={(e) => {
             e.preventDefault()
-            submit().catch(console.error)
+            submit()
           }}
         >
           {challenge.prompts.map((prompt, index) => (
@@ -226,14 +231,7 @@ export const ChallengeModal: FunctionComponent<Props> = ({
             />
           ))}
         </form>
-        <Button
-          variant="primary"
-          disabled={isProcessing}
-          className="min-w-76 mt-1 mb-3.5"
-          onClick={() => {
-            submit().catch(console.error)
-          }}
-        >
+        <Button variant="primary" disabled={isProcessing} className="min-w-76 mt-1 mb-3.5" onClick={submit}>
           {isProcessing ? 'Generating Keys...' : 'Submit'}
         </Button>
         {shouldShowForgotPasscode && (
diff --git a/app/assets/javascripts/Components/ChallengeModal/ChallengePrompt.tsx b/app/assets/javascripts/Components/ChallengeModal/ChallengePrompt.tsx
index 116c7a5f9..4f2159d1a 100644
--- a/app/assets/javascripts/Components/ChallengeModal/ChallengePrompt.tsx
+++ b/app/assets/javascripts/Components/ChallengeModal/ChallengePrompt.tsx
@@ -29,7 +29,7 @@ export const ChallengeModalPrompt: FunctionComponent<Props> = ({ prompt, values,
   }, [isInvalid])
 
   return (
-    <div className="w-full mb-3">
+    <div key={prompt.id} className="w-full mb-3">
       {prompt.validation === ChallengeValidation.ProtectionSessionDuration ? (
         <div className="min-w-76">
           <div className="text-sm font-medium mb-2">Allow protected access for</div>
diff --git a/app/assets/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx b/app/assets/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx
index 19f626a02..ece6735ab 100644
--- a/app/assets/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx
+++ b/app/assets/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx
@@ -2,7 +2,7 @@ import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
 import { AppState } from '@/UIModels/AppState'
 import { calculateSubmenuStyle, SubmenuStyle } from '@/Utils/CalculateSubmenuStyle'
 import { FunctionComponent } from 'preact'
-import { useEffect, useRef, useState } from 'preact/hooks'
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { WorkspaceSwitcherMenu } from '@/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu'
 import { Button } from '@/Components/Button/Button'
 import { Icon } from '@/Components/Icon'
@@ -22,7 +22,7 @@ export const LockscreenWorkspaceSwitcher: FunctionComponent<Props> = ({ mainAppl
 
   useCloseOnClickOutside(containerRef, () => setIsOpen(false))
 
-  const toggleMenu = () => {
+  const toggleMenu = useCallback(() => {
     if (!isOpen) {
       const menuPosition = calculateSubmenuStyle(buttonRef.current)
       if (menuPosition) {
@@ -31,7 +31,7 @@ export const LockscreenWorkspaceSwitcher: FunctionComponent<Props> = ({ mainAppl
     }
 
     setIsOpen(!isOpen)
-  }
+  }, [isOpen])
 
   useEffect(() => {
     if (isOpen) {
diff --git a/app/assets/javascripts/Components/ChangeEditor/ChangeEditorButton.tsx b/app/assets/javascripts/Components/ChangeEditor/ChangeEditorButton.tsx
index 35db46c92..bc77f8d65 100644
--- a/app/assets/javascripts/Components/ChangeEditor/ChangeEditorButton.tsx
+++ b/app/assets/javascripts/Components/ChangeEditor/ChangeEditorButton.tsx
@@ -9,6 +9,7 @@ import { useRef, useState } from 'preact/hooks'
 import { Icon } from '@/Components/Icon'
 import { ChangeEditorMenu } from './ChangeEditorMenu'
 import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
+import { isStateDealloced } from '@/UIModels/AppState/AbstractState'
 
 type Props = {
   application: WebApplication
@@ -17,7 +18,11 @@ type Props = {
 }
 
 export const ChangeEditorButton: FunctionComponent<Props> = observer(
-  ({ application, appState, onClickPreprocessing }) => {
+  ({ application, appState, onClickPreprocessing }: Props) => {
+    if (isStateDealloced(appState)) {
+      return null
+    }
+
     const note = Object.values(appState.notes.selectedNotes)[0]
     const [isOpen, setIsOpen] = useState(false)
     const [isVisible, setIsVisible] = useState(false)
diff --git a/app/assets/javascripts/Components/Files/FilePreviewInfoPanel.tsx b/app/assets/javascripts/Components/Files/FilePreviewInfoPanel.tsx
index b106e9acc..6db5878cf 100644
--- a/app/assets/javascripts/Components/Files/FilePreviewInfoPanel.tsx
+++ b/app/assets/javascripts/Components/Files/FilePreviewInfoPanel.tsx
@@ -1,10 +1,10 @@
 import { formatSizeToReadableString } from '@standardnotes/filepicker'
-import { SNFile } from '@standardnotes/snjs'
+import { FileItem } from '@standardnotes/snjs'
 import { FunctionComponent } from 'preact'
 import { Icon } from '@/Components/Icon'
 
 type Props = {
-  file: SNFile
+  file: FileItem
 }
 
 export const FilePreviewInfoPanel: FunctionComponent<Props> = ({ file }) => {
diff --git a/app/assets/javascripts/Components/Files/FilePreviewModal.tsx b/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
index 42635ecc8..e1facb053 100644
--- a/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
+++ b/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
@@ -1,7 +1,8 @@
 import { WebApplication } from '@/UIModels/Application'
 import { concatenateUint8Arrays } from '@/Utils/ConcatenateUint8Arrays'
 import { DialogContent, DialogOverlay } from '@reach/dialog'
-import { addToast, NoPreviewIllustration, ToastType } from '@standardnotes/stylekit'
+import { addToast, ToastType } from '@standardnotes/stylekit'
+import { NoPreviewIllustration } from '@standardnotes/icons'
 import { FunctionComponent } from 'preact'
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { getFileIconComponent } from '@/Components/AttachedFilesPopover/PopoverFileItem'
diff --git a/app/assets/javascripts/Components/Files/PreviewComponent.tsx b/app/assets/javascripts/Components/Files/PreviewComponent.tsx
index 0da65f88d..f673dc62d 100644
--- a/app/assets/javascripts/Components/Files/PreviewComponent.tsx
+++ b/app/assets/javascripts/Components/Files/PreviewComponent.tsx
@@ -1,9 +1,9 @@
-import { SNFile } from '@standardnotes/snjs'
+import { FileItem } from '@standardnotes/snjs'
 import { FunctionComponent } from 'preact'
 import { ImagePreview } from './ImagePreview'
 
 type Props = {
-  file: SNFile
+  file: FileItem
   objectUrl: string
 }
 
diff --git a/app/assets/javascripts/Components/Footer/index.tsx b/app/assets/javascripts/Components/Footer/index.tsx
index 7304bd612..0ca9fe746 100644
--- a/app/assets/javascripts/Components/Footer/index.tsx
+++ b/app/assets/javascripts/Components/Footer/index.tsx
@@ -1,7 +1,7 @@
 import { WebAppEvent, WebApplication } from '@/UIModels/Application'
 import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
 import { PureComponent } from '@/Components/Abstract/PureComponent'
-import { preventRefreshing } from '@/Utils'
+import { destroyAllObjectProperties, preventRefreshing } from '@/Utils'
 import { ApplicationEvent, ContentType, CollectionSort, ApplicationDescriptor } from '@standardnotes/snjs'
 import {
   STRING_NEW_UPDATE_READY,
@@ -44,6 +44,7 @@ export class Footer extends PureComponent<Props, State> {
   private completedInitialSync = false
   private showingDownloadStatus = false
   private webEventListenerDestroyer: () => void
+  private removeStatusObserver!: () => void
 
   constructor(props: Props) {
     super(props, props.application)
@@ -69,18 +70,26 @@ export class Footer extends PureComponent<Props, State> {
   }
 
   override deinit() {
+    this.removeStatusObserver()
+    ;(this.removeStatusObserver as unknown) = undefined
+
     this.webEventListenerDestroyer()
     ;(this.webEventListenerDestroyer as unknown) = undefined
+
     super.deinit()
+
+    destroyAllObjectProperties(this)
   }
 
   override componentDidMount(): void {
     super.componentDidMount()
-    this.application.status.addEventObserver((_event, message) => {
+
+    this.removeStatusObserver = this.application.status.addEventObserver((_event, message) => {
       this.setState({
         arbitraryStatusMessage: message,
       })
     })
+
     this.autorun(() => {
       const showBetaWarning = this.appState.showBetaWarning
       this.setState({
diff --git a/app/assets/javascripts/Components/Icon/index.tsx b/app/assets/javascripts/Components/Icon/index.tsx
index 35d2cf2cc..cb3593814 100644
--- a/app/assets/javascripts/Components/Icon/index.tsx
+++ b/app/assets/javascripts/Components/Icon/index.tsx
@@ -89,7 +89,7 @@ import {
   WarningIcon,
   WindowIcon,
   SubtractIcon,
-} from '@standardnotes/stylekit'
+} from '@standardnotes/icons'
 
 export const ICONS = {
   'account-circle': AccountCircleIcon,
diff --git a/app/assets/javascripts/Components/Input/DecoratedInput.tsx b/app/assets/javascripts/Components/Input/DecoratedInput.tsx
index a4936088b..6548c09cf 100644
--- a/app/assets/javascripts/Components/Input/DecoratedInput.tsx
+++ b/app/assets/javascripts/Components/Input/DecoratedInput.tsx
@@ -47,6 +47,7 @@ export const DecoratedInput: FunctionalComponent<DecoratedInputProps> = forwardR
             ))}
           </div>
         )}
+
         <input
           type={type}
           className={`${classNames.input} ${disabled ? classNames.disabled : ''}`}
@@ -60,6 +61,7 @@ export const DecoratedInput: FunctionalComponent<DecoratedInputProps> = forwardR
           autocomplete={autocomplete ? 'on' : 'off'}
           ref={ref}
         />
+
         {right && (
           <div className="flex items-center px-2 py-1.5">
             {right.map((rightChild, index) => (
diff --git a/app/assets/javascripts/Components/Menu/Menu.tsx b/app/assets/javascripts/Components/Menu/Menu.tsx
index 050468f55..74410c2f9 100644
--- a/app/assets/javascripts/Components/Menu/Menu.tsx
+++ b/app/assets/javascripts/Components/Menu/Menu.tsx
@@ -1,5 +1,5 @@
 import { JSX, FunctionComponent, ComponentChildren, VNode, RefCallback, ComponentChild, toChildArray } from 'preact'
-import { useEffect, useRef } from 'preact/hooks'
+import { useCallback, useEffect, useRef } from 'preact/hooks'
 import { JSXInternal } from 'preact/src/jsx'
 import { MenuItem, MenuItemListElement } from './MenuItem'
 import { KeyboardKey } from '@/Services/IOService'
@@ -28,16 +28,19 @@ export const Menu: FunctionComponent<MenuProps> = ({
 
   const menuElementRef = useRef<HTMLMenuElement>(null)
 
-  const handleKeyDown: JSXInternal.KeyboardEventHandler<HTMLMenuElement> = (event) => {
-    if (!menuItemRefs.current) {
-      return
-    }
+  const handleKeyDown: JSXInternal.KeyboardEventHandler<HTMLMenuElement> = useCallback(
+    (event) => {
+      if (!menuItemRefs.current) {
+        return
+      }
 
-    if (event.key === KeyboardKey.Escape) {
-      closeMenu?.()
-      return
-    }
-  }
+      if (event.key === KeyboardKey.Escape) {
+        closeMenu?.()
+        return
+      }
+    },
+    [closeMenu],
+  )
 
   useListKeyboardNavigation(menuElementRef, initialFocus)
 
@@ -49,7 +52,7 @@ export const Menu: FunctionComponent<MenuProps> = ({
     }
   }, [isOpen])
 
-  const pushRefToArray: RefCallback<HTMLLIElement> = (instance) => {
+  const pushRefToArray: RefCallback<HTMLLIElement> = useCallback((instance) => {
     if (instance && instance.children) {
       Array.from(instance.children).forEach((child) => {
         if (
@@ -60,36 +63,39 @@ export const Menu: FunctionComponent<MenuProps> = ({
         }
       })
     }
-  }
+  }, [])
 
-  const mapMenuItems = (child: ComponentChild, index: number, array: ComponentChild[]): ComponentChild => {
-    if (!child || (Array.isArray(child) && child.length < 1)) {
-      return
-    }
+  const mapMenuItems = useCallback(
+    (child: ComponentChild, index: number, array: ComponentChild[]): ComponentChild => {
+      if (!child || (Array.isArray(child) && child.length < 1)) {
+        return
+      }
 
-    if (Array.isArray(child)) {
-      return child.map(mapMenuItems)
-    }
+      if (Array.isArray(child)) {
+        return child.map(mapMenuItems)
+      }
 
-    const _child = child as VNode<unknown>
-    const isFirstMenuItem = index === array.findIndex((child) => (child as VNode<unknown>).type === MenuItem)
+      const _child = child as VNode<unknown>
+      const isFirstMenuItem = index === array.findIndex((child) => (child as VNode<unknown>).type === MenuItem)
 
-    const hasMultipleItems = Array.isArray(_child.props.children)
-      ? Array.from(_child.props.children as ComponentChild[]).some(
-          (child) => (child as VNode<unknown>).type === MenuItem,
+      const hasMultipleItems = Array.isArray(_child.props.children)
+        ? Array.from(_child.props.children as ComponentChild[]).some(
+            (child) => (child as VNode<unknown>).type === MenuItem,
+          )
+        : false
+
+      const items = hasMultipleItems ? [...(_child.props.children as ComponentChild[])] : [_child]
+
+      return items.map((child) => {
+        return (
+          <MenuItemListElement isFirstMenuItem={isFirstMenuItem} ref={pushRefToArray}>
+            {child}
+          </MenuItemListElement>
         )
-      : false
-
-    const items = hasMultipleItems ? [...(_child.props.children as ComponentChild[])] : [_child]
-
-    return items.map((child) => {
-      return (
-        <MenuItemListElement isFirstMenuItem={isFirstMenuItem} ref={pushRefToArray}>
-          {child}
-        </MenuItemListElement>
-      )
-    })
-  }
+      })
+    },
+    [pushRefToArray],
+  )
 
   return (
     <menu
diff --git a/app/assets/javascripts/Components/Menu/MenuItem.tsx b/app/assets/javascripts/Components/Menu/MenuItem.tsx
index e70a952f9..10f74ed8b 100644
--- a/app/assets/javascripts/Components/Menu/MenuItem.tsx
+++ b/app/assets/javascripts/Components/Menu/MenuItem.tsx
@@ -85,7 +85,6 @@ type ListElementProps = {
 export const MenuItemListElement: FunctionComponent<ListElementProps> = forwardRef(
   ({ children, isFirstMenuItem }: ListElementProps, ref: Ref<HTMLLIElement>) => {
     const child = children as VNode<unknown>
-
     return (
       <li className="list-style-none" role="none" ref={ref}>
         {{
diff --git a/app/assets/javascripts/Components/MultipleSelectedNotes/index.tsx b/app/assets/javascripts/Components/MultipleSelectedNotes/index.tsx
index df78e2817..432672c6c 100644
--- a/app/assets/javascripts/Components/MultipleSelectedNotes/index.tsx
+++ b/app/assets/javascripts/Components/MultipleSelectedNotes/index.tsx
@@ -1,5 +1,5 @@
 import { AppState } from '@/UIModels/AppState'
-import { IlNotesIcon } from '@standardnotes/stylekit'
+import { IlNotesIcon } from '@standardnotes/icons'
 import { observer } from 'mobx-react-lite'
 import { NotesOptionsPanel } from '@/Components/NotesOptions/NotesOptionsPanel'
 import { WebApplication } from '@/UIModels/Application'
diff --git a/app/assets/javascripts/Components/NoAccountWarning/index.tsx b/app/assets/javascripts/Components/NoAccountWarning/index.tsx
index c0b4db0de..9a222cfcc 100644
--- a/app/assets/javascripts/Components/NoAccountWarning/index.tsx
+++ b/app/assets/javascripts/Components/NoAccountWarning/index.tsx
@@ -1,6 +1,7 @@
 import { Icon } from '@/Components/Icon'
 import { AppState } from '@/UIModels/AppState'
 import { observer } from 'mobx-react-lite'
+import { useCallback } from 'preact/hooks'
 
 type Props = { appState: AppState }
 
@@ -9,23 +10,28 @@ export const NoAccountWarning = observer(({ appState }: Props) => {
   if (!canShow) {
     return null
   }
+
+  const showAccountMenu = useCallback(
+    (event: Event) => {
+      event.stopPropagation()
+      appState.accountMenu.setShow(true)
+    },
+    [appState],
+  )
+
+  const hideWarning = useCallback(() => {
+    appState.noAccountWarning.hide()
+  }, [appState])
+
   return (
     <div className="mt-5 p-5 rounded-md shadow-sm grid grid-template-cols-1fr">
       <h1 className="sk-h3 m-0 font-semibold">Data not backed up</h1>
       <p className="m-0 mt-1 col-start-1 col-end-3">Sign in or register to back up your notes.</p>
-      <button
-        className="sn-button small info mt-3 col-start-1 col-end-3 justify-self-start"
-        onClick={(event) => {
-          event.stopPropagation()
-          appState.accountMenu.setShow(true)
-        }}
-      >
+      <button className="sn-button small info mt-3 col-start-1 col-end-3 justify-self-start" onClick={showAccountMenu}>
         Open Account menu
       </button>
       <button
-        onClick={() => {
-          appState.noAccountWarning.hide()
-        }}
+        onClick={hideWarning}
         title="Ignore"
         label="Ignore"
         style="height: 20px"
diff --git a/app/assets/javascripts/Components/NoteGroupView/index.tsx b/app/assets/javascripts/Components/NoteGroupView/index.tsx
index 7f9abdbb3..a5da0cd2d 100644
--- a/app/assets/javascripts/Components/NoteGroupView/index.tsx
+++ b/app/assets/javascripts/Components/NoteGroupView/index.tsx
@@ -15,6 +15,8 @@ type Props = {
 }
 
 export class NoteGroupView extends PureComponent<Props, State> {
+  private removeChangeObserver!: () => void
+
   constructor(props: Props) {
     super(props, props.application)
     this.state = {
@@ -25,18 +27,32 @@ export class NoteGroupView extends PureComponent<Props, State> {
 
   override componentDidMount(): void {
     super.componentDidMount()
-    this.application.noteControllerGroup.addActiveControllerChangeObserver(() => {
+
+    const controllerGroup = this.application.noteControllerGroup
+    this.removeChangeObserver = this.application.noteControllerGroup.addActiveControllerChangeObserver(() => {
+      const controllers = controllerGroup.noteControllers
+
       this.setState({
-        controllers: this.application.noteControllerGroup.noteControllers,
+        controllers: controllers,
       })
     })
+
     this.autorun(() => {
-      this.setState({
-        showMultipleSelectedNotes: this.appState.notes.selectedNotesCount > 1,
-      })
+      if (this.appState && this.appState.notes) {
+        this.setState({
+          showMultipleSelectedNotes: this.appState.notes.selectedNotesCount > 1,
+        })
+      }
     })
   }
 
+  override deinit() {
+    this.removeChangeObserver?.()
+    ;(this.removeChangeObserver as unknown) = undefined
+
+    super.deinit()
+  }
+
   override render() {
     return (
       <div id={ElementIds.EditorColumn} className="h-full app-column app-column-third">
diff --git a/app/assets/javascripts/Components/NoteTags/NoteTag.tsx b/app/assets/javascripts/Components/NoteTags/NoteTag.tsx
index 9a5604907..489c15290 100644
--- a/app/assets/javascripts/Components/NoteTags/NoteTag.tsx
+++ b/app/assets/javascripts/Components/NoteTags/NoteTag.tsx
@@ -1,5 +1,5 @@
 import { Icon } from '@/Components/Icon'
-import { useEffect, useRef, useState } from 'preact/hooks'
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { AppState } from '@/UIModels/AppState'
 import { SNTag } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
@@ -24,40 +24,49 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
   const prefixTitle = noteTags.getPrefixTitle(tag)
   const longTitle = noteTags.getLongTitle(tag)
 
-  const deleteTag = () => {
+  const deleteTag = useCallback(() => {
     appState.noteTags.focusPreviousTag(tag)
     appState.noteTags.removeTagFromActiveNote(tag).catch(console.error)
-  }
+  }, [appState, tag])
 
-  const onDeleteTagClick = (event: MouseEvent) => {
-    event.stopImmediatePropagation()
-    event.stopPropagation()
-    deleteTag()
-  }
+  const onDeleteTagClick = useCallback(
+    (event: MouseEvent) => {
+      event.stopImmediatePropagation()
+      event.stopPropagation()
+      deleteTag()
+    },
+    [deleteTag],
+  )
 
-  const onTagClick = (event: MouseEvent) => {
-    if (tagClicked && event.target !== deleteTagRef.current) {
-      setTagClicked(false)
-      appState.selectedTag = tag
-    } else {
-      setTagClicked(true)
-    }
-  }
+  const onTagClick = useCallback(
+    (event: MouseEvent) => {
+      if (tagClicked && event.target !== deleteTagRef.current) {
+        setTagClicked(false)
+        appState.selectedTag = tag
+      } else {
+        setTagClicked(true)
+      }
+    },
+    [appState, tagClicked, tag],
+  )
 
-  const onFocus = () => {
+  const onFocus = useCallback(() => {
     appState.noteTags.setFocusedTagUuid(tag.uuid)
     setShowDeleteButton(true)
-  }
+  }, [appState, tag])
 
-  const onBlur = (event: FocusEvent) => {
-    const relatedTarget = event.relatedTarget as Node
-    if (relatedTarget !== deleteTagRef.current) {
-      appState.noteTags.setFocusedTagUuid(undefined)
-      setShowDeleteButton(false)
-    }
-  }
+  const onBlur = useCallback(
+    (event: FocusEvent) => {
+      const relatedTarget = event.relatedTarget as Node
+      if (relatedTarget !== deleteTagRef.current) {
+        appState.noteTags.setFocusedTagUuid(undefined)
+        setShowDeleteButton(false)
+      }
+    },
+    [appState],
+  )
 
-  const getTabIndex = () => {
+  const getTabIndex = useCallback(() => {
     if (focusedTagUuid) {
       return focusedTagUuid === tag.uuid ? 0 : -1
     }
@@ -65,34 +74,37 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
       return -1
     }
     return tags[0].uuid === tag.uuid ? 0 : -1
-  }
+  }, [autocompleteInputFocused, tags, tag, focusedTagUuid])
 
-  const onKeyDown = (event: KeyboardEvent) => {
-    const tagIndex = appState.noteTags.getTagIndex(tag, tags)
-    switch (event.key) {
-      case 'Backspace':
-        deleteTag()
-        break
-      case 'ArrowLeft':
-        appState.noteTags.focusPreviousTag(tag)
-        break
-      case 'ArrowRight':
-        if (tagIndex === tags.length - 1) {
-          appState.noteTags.setAutocompleteInputFocused(true)
-        } else {
-          appState.noteTags.focusNextTag(tag)
-        }
-        break
-      default:
-        return
-    }
-  }
+  const onKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      const tagIndex = appState.noteTags.getTagIndex(tag, tags)
+      switch (event.key) {
+        case 'Backspace':
+          deleteTag()
+          break
+        case 'ArrowLeft':
+          appState.noteTags.focusPreviousTag(tag)
+          break
+        case 'ArrowRight':
+          if (tagIndex === tags.length - 1) {
+            appState.noteTags.setAutocompleteInputFocused(true)
+          } else {
+            appState.noteTags.focusNextTag(tag)
+          }
+          break
+        default:
+          return
+      }
+    },
+    [appState, deleteTag, tag, tags],
+  )
 
   useEffect(() => {
     if (focusedTagUuid === tag.uuid) {
       tagRef.current?.focus()
     }
-  }, [appState.noteTags, focusedTagUuid, tag])
+  }, [appState, focusedTagUuid, tag])
 
   return (
     <button
diff --git a/app/assets/javascripts/Components/NoteTags/NoteTagsContainer.tsx b/app/assets/javascripts/Components/NoteTags/NoteTagsContainer.tsx
index 743674374..3ce97c92c 100644
--- a/app/assets/javascripts/Components/NoteTags/NoteTagsContainer.tsx
+++ b/app/assets/javascripts/Components/NoteTags/NoteTagsContainer.tsx
@@ -3,17 +3,22 @@ import { observer } from 'mobx-react-lite'
 import { AutocompleteTagInput } from '@/Components/TagAutocomplete/AutocompleteTagInput'
 import { NoteTag } from './NoteTag'
 import { useEffect } from 'preact/hooks'
+import { isStateDealloced } from '@/UIModels/AppState/AbstractState'
 
 type Props = {
   appState: AppState
 }
 
 export const NoteTagsContainer = observer(({ appState }: Props) => {
+  if (isStateDealloced(appState)) {
+    return null
+  }
+
   const { tags, tagsContainerMaxWidth } = appState.noteTags
 
   useEffect(() => {
     appState.noteTags.reloadTagsContainerMaxWidth()
-  }, [appState.noteTags])
+  }, [appState])
 
   return (
     <div
diff --git a/app/assets/javascripts/Components/NoteView/NoteView.tsx b/app/assets/javascripts/Components/NoteView/NoteView.tsx
index dd09f1a56..41de3de7e 100644
--- a/app/assets/javascripts/Components/NoteView/NoteView.tsx
+++ b/app/assets/javascripts/Components/NoteView/NoteView.tsx
@@ -134,6 +134,7 @@ export class NoteView extends PureComponent<Props, State> {
 
   constructor(props: Props) {
     super(props, props.application)
+
     this.controller = props.controller
 
     this.onEditorComponentLoad = () => {
@@ -171,19 +172,42 @@ export class NoteView extends PureComponent<Props, State> {
   override deinit() {
     this.removeComponentStreamObserver?.()
     ;(this.removeComponentStreamObserver as unknown) = undefined
+
     this.removeInnerNoteObserver?.()
     ;(this.removeInnerNoteObserver as unknown) = undefined
+
     this.removeComponentManagerObserver?.()
     ;(this.removeComponentManagerObserver as unknown) = undefined
+
     this.removeTrashKeyObserver?.()
     this.removeTrashKeyObserver = undefined
+
     this.clearNoteProtectionInactivityTimer()
+    ;(this.ensureNoteIsInsertedBeforeUIAction as unknown) = undefined
+    ;(this.controller as unknown) = undefined
+
     this.removeTabObserver?.()
     this.removeTabObserver = undefined
     this.onEditorComponentLoad = undefined
+
     this.statusTimeout = undefined
     ;(this.onPanelResizeFinish as unknown) = undefined
     super.deinit()
+    ;(this.dismissProtectedWarning as unknown) = undefined
+    ;(this.editorComponentViewerRequestsReload as unknown) = undefined
+    ;(this.onTextAreaChange as unknown) = undefined
+    ;(this.onTitleEnter as unknown) = undefined
+    ;(this.onTitleChange as unknown) = undefined
+    ;(this.onContentFocus as unknown) = undefined
+    ;(this.onPanelResizeFinish as unknown) = undefined
+    ;(this.stackComponentExpanded as unknown) = undefined
+    ;(this.toggleStackComponent as unknown) = undefined
+    ;(this.setScrollPosition as unknown) = undefined
+    ;(this.resetScrollPosition as unknown) = undefined
+    ;(this.onSystemEditorLoad as unknown) = undefined
+    ;(this.debounceReloadEditorComponent as unknown) = undefined
+    ;(this.textAreaChangeDebounceSave as unknown) = undefined
+    ;(this.editorContentRef as unknown) = undefined
   }
 
   getState() {
@@ -295,6 +319,7 @@ export class NoteView extends PureComponent<Props, State> {
     }
     super.componentWillUnmount()
   }
+
   override async onAppLaunch() {
     await super.onAppLaunch()
     this.streamItems()
@@ -1016,7 +1041,7 @@ export class NoteView extends PureComponent<Props, State> {
                 readonly={this.state.noteLocked}
                 onFocus={this.onContentFocus}
                 spellcheck={this.state.spellcheck}
-                ref={(ref) => this.onSystemEditorLoad(ref)}
+                ref={(ref) => ref && this.onSystemEditorLoad(ref)}
               ></textarea>
             )}
 
diff --git a/app/assets/javascripts/Components/NotesContextMenu/index.tsx b/app/assets/javascripts/Components/NotesContextMenu/index.tsx
index 3ebd53ece..d3968d2ab 100644
--- a/app/assets/javascripts/Components/NotesContextMenu/index.tsx
+++ b/app/assets/javascripts/Components/NotesContextMenu/index.tsx
@@ -21,7 +21,7 @@ export const NotesContextMenu = observer(({ application, appState }: Props) => {
 
   const reloadContextMenuLayout = useCallback(() => {
     appState.notes.reloadContextMenuLayout()
-  }, [appState.notes])
+  }, [appState])
 
   useEffect(() => {
     window.addEventListener('resize', reloadContextMenuLayout)
diff --git a/app/assets/javascripts/Components/NotesList/NotesListItem.tsx b/app/assets/javascripts/Components/NotesList/NotesListItem.tsx
index 329ba57d3..d8a9740b6 100644
--- a/app/assets/javascripts/Components/NotesList/NotesListItem.tsx
+++ b/app/assets/javascripts/Components/NotesList/NotesListItem.tsx
@@ -53,7 +53,7 @@ export const NotesListItem: FunctionComponent<Props> = ({
   const showModifiedDate = sortedBy === CollectionSort.UpdatedAt
   const editorForNote = application.componentManager.editorForNote(note)
   const editorName = editorForNote?.name ?? PLAIN_EDITOR_NAME
-  const [icon, tint] = application.iconsController.getIconAndTintForEditor(editorForNote?.identifier)
+  const [icon, tint] = application.iconsController.getIconAndTintForNoteType(editorForNote?.package_info.note_type)
 
   return (
     <div
diff --git a/app/assets/javascripts/Components/NotesList/NotesListOptionsMenu.tsx b/app/assets/javascripts/Components/NotesList/NotesListOptionsMenu.tsx
index a58ece288..bc1439a7e 100644
--- a/app/assets/javascripts/Components/NotesList/NotesListOptionsMenu.tsx
+++ b/app/assets/javascripts/Components/NotesList/NotesListOptionsMenu.tsx
@@ -2,7 +2,7 @@ import { WebApplication } from '@/UIModels/Application'
 import { CollectionSort, CollectionSortProperty, PrefKey } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
-import { useState } from 'preact/hooks'
+import { useCallback, useState } from 'preact/hooks'
 import { Icon } from '@/Components/Icon'
 import { Menu } from '@/Components/Menu/Menu'
 import { MenuItem, MenuItemSeparator, MenuItemType } from '@/Components/Menu/MenuItem'
@@ -31,71 +31,74 @@ export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
       application.getPreference(PrefKey.NotesHideEditorIcon, false),
     )
 
-    const toggleSortReverse = () => {
+    const toggleSortReverse = useCallback(() => {
       application.setPreference(PrefKey.SortNotesReverse, !sortReverse).catch(console.error)
       setSortReverse(!sortReverse)
-    }
+    }, [application, sortReverse])
 
-    const toggleSortBy = (sort: CollectionSortProperty) => {
-      if (sortBy === sort) {
-        toggleSortReverse()
-      } else {
-        setSortBy(sort)
-        application.setPreference(PrefKey.SortNotesBy, sort).catch(console.error)
-      }
-    }
+    const toggleSortBy = useCallback(
+      (sort: CollectionSortProperty) => {
+        if (sortBy === sort) {
+          toggleSortReverse()
+        } else {
+          setSortBy(sort)
+          application.setPreference(PrefKey.SortNotesBy, sort).catch(console.error)
+        }
+      },
+      [application, sortBy, toggleSortReverse],
+    )
 
-    const toggleSortByDateModified = () => {
+    const toggleSortByDateModified = useCallback(() => {
       toggleSortBy(CollectionSort.UpdatedAt)
-    }
+    }, [toggleSortBy])
 
-    const toggleSortByCreationDate = () => {
+    const toggleSortByCreationDate = useCallback(() => {
       toggleSortBy(CollectionSort.CreatedAt)
-    }
+    }, [toggleSortBy])
 
-    const toggleSortByTitle = () => {
+    const toggleSortByTitle = useCallback(() => {
       toggleSortBy(CollectionSort.Title)
-    }
+    }, [toggleSortBy])
 
-    const toggleHidePreview = () => {
+    const toggleHidePreview = useCallback(() => {
       setHidePreview(!hidePreview)
       application.setPreference(PrefKey.NotesHideNotePreview, !hidePreview).catch(console.error)
-    }
+    }, [application, hidePreview])
 
-    const toggleHideDate = () => {
+    const toggleHideDate = useCallback(() => {
       setHideDate(!hideDate)
       application.setPreference(PrefKey.NotesHideDate, !hideDate).catch(console.error)
-    }
+    }, [application, hideDate])
 
-    const toggleHideTags = () => {
+    const toggleHideTags = useCallback(() => {
       setHideTags(!hideTags)
       application.setPreference(PrefKey.NotesHideTags, !hideTags).catch(console.error)
-    }
+    }, [application, hideTags])
 
-    const toggleHidePinned = () => {
+    const toggleHidePinned = useCallback(() => {
       setHidePinned(!hidePinned)
       application.setPreference(PrefKey.NotesHidePinned, !hidePinned).catch(console.error)
-    }
+    }, [application, hidePinned])
 
-    const toggleShowArchived = () => {
+    const toggleShowArchived = useCallback(() => {
       setShowArchived(!showArchived)
       application.setPreference(PrefKey.NotesShowArchived, !showArchived).catch(console.error)
-    }
+    }, [application, showArchived])
 
-    const toggleShowTrashed = () => {
+    const toggleShowTrashed = useCallback(() => {
       setShowTrashed(!showTrashed)
       application.setPreference(PrefKey.NotesShowTrashed, !showTrashed).catch(console.error)
-    }
+    }, [application, showTrashed])
 
-    const toggleHideProtected = () => {
+    const toggleHideProtected = useCallback(() => {
       setHideProtected(!hideProtected)
       application.setPreference(PrefKey.NotesHideProtected, !hideProtected).catch(console.error)
-    }
+    }, [application, hideProtected])
 
-    const toggleEditorIcon = () => {
+    const toggleEditorIcon = useCallback(() => {
       setHideEditorIcon(!hideEditorIcon)
       application.setPreference(PrefKey.NotesHideEditorIcon, !hideEditorIcon).catch(console.error)
-    }
+    }, [application, hideEditorIcon])
 
     return (
       <Menu
diff --git a/app/assets/javascripts/Components/NotesList/index.tsx b/app/assets/javascripts/Components/NotesList/index.tsx
index 24dbdaf7d..e2bd10784 100644
--- a/app/assets/javascripts/Components/NotesList/index.tsx
+++ b/app/assets/javascripts/Components/NotesList/index.tsx
@@ -7,6 +7,7 @@ import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
 import { NotesListItem } from './NotesListItem'
 import { FOCUSABLE_BUT_NOT_TABBABLE, NOTES_LIST_SCROLL_THRESHOLD } from '@/Constants'
+import { useCallback } from 'preact/hooks'
 
 type Props = {
   application: WebApplication
@@ -19,55 +20,72 @@ type Props = {
 
 export const NotesList: FunctionComponent<Props> = observer(
   ({ application, appState, notes, selectedNotes, displayOptions, paginate }) => {
-    const { selectPreviousNote, selectNextNote } = appState.notesView
+    const selectNextNote = useCallback(() => appState.notesView.selectNextNote, [appState])
+    const selectPreviousNote = useCallback(() => appState.notesView.selectPreviousNote, [appState])
+
     const { hideTags, hideDate, hideNotePreview, hideEditorIcon, sortBy } = displayOptions
 
-    const tagsForNote = (note: SNNote): string[] => {
-      if (hideTags) {
-        return []
-      }
-      const selectedTag = appState.selectedTag
-      if (!selectedTag) {
-        return []
-      }
-      const tags = appState.getNoteTags(note)
-      if (selectedTag instanceof SNTag && tags.length === 1) {
-        return []
-      }
-      return tags.map((tag) => tag.title).sort()
-    }
+    const tagsForNote = useCallback(
+      (note: SNNote): string[] => {
+        if (hideTags) {
+          return []
+        }
+        const selectedTag = appState.selectedTag
+        if (!selectedTag) {
+          return []
+        }
+        const tags = appState.getNoteTags(note)
+        if (selectedTag instanceof SNTag && tags.length === 1) {
+          return []
+        }
+        return tags.map((tag) => tag.title).sort()
+      },
+      [appState, hideTags],
+    )
 
-    const openNoteContextMenu = (posX: number, posY: number) => {
-      appState.notes.setContextMenuClickLocation({
-        x: posX,
-        y: posY,
-      })
-      appState.notes.reloadContextMenuLayout()
-      appState.notes.setContextMenuOpen(true)
-    }
+    const openNoteContextMenu = useCallback(
+      (posX: number, posY: number) => {
+        appState.notes.setContextMenuClickLocation({
+          x: posX,
+          y: posY,
+        })
+        appState.notes.reloadContextMenuLayout()
+        appState.notes.setContextMenuOpen(true)
+      },
+      [appState],
+    )
 
-    const onContextMenu = (note: SNNote, posX: number, posY: number) => {
-      appState.notes.selectNote(note.uuid, true).catch(console.error)
-      openNoteContextMenu(posX, posY)
-    }
+    const onContextMenu = useCallback(
+      (note: SNNote, posX: number, posY: number) => {
+        appState.notes.selectNote(note.uuid, true).catch(console.error)
+        openNoteContextMenu(posX, posY)
+      },
+      [appState, openNoteContextMenu],
+    )
 
-    const onScroll = (e: Event) => {
-      const offset = NOTES_LIST_SCROLL_THRESHOLD
-      const element = e.target as HTMLElement
-      if (element.scrollTop + element.offsetHeight >= element.scrollHeight - offset) {
-        paginate()
-      }
-    }
+    const onScroll = useCallback(
+      (e: Event) => {
+        const offset = NOTES_LIST_SCROLL_THRESHOLD
+        const element = e.target as HTMLElement
+        if (element.scrollTop + element.offsetHeight >= element.scrollHeight - offset) {
+          paginate()
+        }
+      },
+      [paginate],
+    )
 
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === KeyboardKey.Up) {
-        e.preventDefault()
-        selectPreviousNote()
-      } else if (e.key === KeyboardKey.Down) {
-        e.preventDefault()
-        selectNextNote()
-      }
-    }
+    const onKeyDown = useCallback(
+      (e: KeyboardEvent) => {
+        if (e.key === KeyboardKey.Up) {
+          e.preventDefault()
+          selectPreviousNote()
+        } else if (e.key === KeyboardKey.Down) {
+          e.preventDefault()
+          selectNextNote()
+        }
+      },
+      [selectNextNote, selectPreviousNote],
+    )
 
     return (
       <div
diff --git a/app/assets/javascripts/Components/NotesOptions/AddTagOption.tsx b/app/assets/javascripts/Components/NotesOptions/AddTagOption.tsx
index 4bfdb8cc2..461549827 100644
--- a/app/assets/javascripts/Components/NotesOptions/AddTagOption.tsx
+++ b/app/assets/javascripts/Components/NotesOptions/AddTagOption.tsx
@@ -25,7 +25,7 @@ export const AddTagOption: FunctionComponent<Props> = observer(({ appState }) =>
 
   const [closeOnBlur] = useCloseOnBlur(menuContainerRef, setIsMenuOpen)
 
-  const toggleTagsMenu = () => {
+  const toggleTagsMenu = useCallback(() => {
     if (!isMenuOpen) {
       const menuPosition = calculateSubmenuStyle(menuButtonRef.current)
       if (menuPosition) {
@@ -34,7 +34,7 @@ export const AddTagOption: FunctionComponent<Props> = observer(({ appState }) =>
     }
 
     setIsMenuOpen(!isMenuOpen)
-  }
+  }, [isMenuOpen])
 
   const recalculateMenuStyle = useCallback(() => {
     const newMenuPosition = calculateSubmenuStyle(menuButtonRef.current, menuRef.current)
diff --git a/app/assets/javascripts/Components/NotesOptions/ChangeEditorOption.tsx b/app/assets/javascripts/Components/NotesOptions/ChangeEditorOption.tsx
index 3b7a96593..aadec84b4 100644
--- a/app/assets/javascripts/Components/NotesOptions/ChangeEditorOption.tsx
+++ b/app/assets/javascripts/Components/NotesOptions/ChangeEditorOption.tsx
@@ -4,7 +4,7 @@ import { AppState } from '@/UIModels/AppState'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
 import { IconType, SNComponent, SNNote } from '@standardnotes/snjs'
 import { FunctionComponent } from 'preact'
-import { useEffect, useRef, useState } from 'preact/hooks'
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { Icon } from '@/Components/Icon'
 import { ChangeEditorMenu } from '@/Components/ChangeEditor/ChangeEditorMenu'
 import { calculateSubmenuStyle, SubmenuStyle } from '@/Utils/CalculateSubmenuStyle'
@@ -48,7 +48,7 @@ export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
     setIsVisible(open)
   })
 
-  const toggleChangeEditorMenu = () => {
+  const toggleChangeEditorMenu = useCallback(() => {
     if (!isOpen) {
       const menuStyle = calculateSubmenuStyle(buttonRef.current)
       if (menuStyle) {
@@ -57,7 +57,7 @@ export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
     }
 
     setIsOpen(!isOpen)
-  }
+  }, [isOpen])
 
   useEffect(() => {
     if (isOpen) {
diff --git a/app/assets/javascripts/Components/NotesOptions/ListedActionsOption.tsx b/app/assets/javascripts/Components/NotesOptions/ListedActionsOption.tsx
index 1ae8c7586..ac4f02068 100644
--- a/app/assets/javascripts/Components/NotesOptions/ListedActionsOption.tsx
+++ b/app/assets/javascripts/Components/NotesOptions/ListedActionsOption.tsx
@@ -35,7 +35,7 @@ const ListedMenuItem: FunctionComponent<ListedMenuItemProps> = ({
 }) => {
   const [isRunning, setIsRunning] = useState(false)
 
-  const handleClick = async () => {
+  const handleClick = useCallback(async () => {
     if (isRunning) {
       return
     }
@@ -47,7 +47,7 @@ const ListedMenuItem: FunctionComponent<ListedMenuItemProps> = ({
     setIsRunning(false)
 
     reloadMenuGroup(group).catch(console.error)
-  }
+  }, [application, action, group, isRunning, note, reloadMenuGroup])
 
   return (
     <button
@@ -80,29 +80,32 @@ const ListedActionsMenu: FunctionComponent<ListedActionsMenuProps> = ({ applicat
   const [menuGroups, setMenuGroups] = useState<ListedMenuGroup[]>([])
   const [isFetchingAccounts, setIsFetchingAccounts] = useState(true)
 
-  const reloadMenuGroup = async (group: ListedMenuGroup) => {
-    const updatedAccountInfo = await application.getListedAccountInfo(group.account, note.uuid)
+  const reloadMenuGroup = useCallback(
+    async (group: ListedMenuGroup) => {
+      const updatedAccountInfo = await application.getListedAccountInfo(group.account, note.uuid)
 
-    if (!updatedAccountInfo) {
-      return
-    }
-
-    const updatedGroup: ListedMenuGroup = {
-      name: updatedAccountInfo.display_name,
-      account: group.account,
-      actions: updatedAccountInfo.actions as Action[],
-    }
-
-    const updatedGroups = menuGroups.map((group) => {
-      if (updatedGroup.account.authorId === group.account.authorId) {
-        return updatedGroup
-      } else {
-        return group
+      if (!updatedAccountInfo) {
+        return
       }
-    })
 
-    setMenuGroups(updatedGroups)
-  }
+      const updatedGroup: ListedMenuGroup = {
+        name: updatedAccountInfo.display_name,
+        account: group.account,
+        actions: updatedAccountInfo.actions as Action[],
+      }
+
+      const updatedGroups = menuGroups.map((group) => {
+        if (updatedGroup.account.authorId === group.account.authorId) {
+          return updatedGroup
+        } else {
+          return group
+        }
+      })
+
+      setMenuGroups(updatedGroups)
+    },
+    [application, menuGroups, note],
+  )
 
   useEffect(() => {
     const fetchListedAccounts = async () => {
@@ -217,7 +220,7 @@ export const ListedActionsOption: FunctionComponent<Props> = ({ application, not
 
   const [closeOnBlur] = useCloseOnBlur(menuContainerRef, setIsMenuOpen)
 
-  const toggleListedMenu = () => {
+  const toggleListedMenu = useCallback(() => {
     if (!isMenuOpen) {
       const menuPosition = calculateSubmenuStyle(menuButtonRef.current)
       if (menuPosition) {
@@ -226,7 +229,7 @@ export const ListedActionsOption: FunctionComponent<Props> = ({ application, not
     }
 
     setIsMenuOpen(!isMenuOpen)
-  }
+  }, [isMenuOpen])
 
   const recalculateMenuStyle = useCallback(() => {
     const newMenuPosition = calculateSubmenuStyle(menuButtonRef.current, menuRef.current)
diff --git a/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx b/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx
index 51a564c29..c92da9c76 100644
--- a/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx
+++ b/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx
@@ -2,7 +2,7 @@ import { AppState } from '@/UIModels/AppState'
 import { Icon } from '@/Components/Icon'
 import { Switch } from '@/Components/Switch'
 import { observer } from 'mobx-react-lite'
-import { useState, useEffect, useMemo } from 'preact/hooks'
+import { useState, useEffect, useMemo, useCallback } from 'preact/hooks'
 import { SNApplication, SNNote } from '@standardnotes/snjs'
 import { WebApplication } from '@/UIModels/Application'
 import { KeyboardModifier } from '@/Services/IOService'
@@ -211,13 +211,16 @@ export const NotesOptions = observer(({ application, appState, closeOnBlur }: No
     }
   }, [application])
 
-  const getNoteFileName = (note: SNNote): string => {
-    const editor = application.componentManager.editorForNote(note)
-    const format = editor?.package_info?.file_type || 'txt'
-    return `${note.title}.${format}`
-  }
+  const getNoteFileName = useCallback(
+    (note: SNNote): string => {
+      const editor = application.componentManager.editorForNote(note)
+      const format = editor?.package_info?.file_type || 'txt'
+      return `${note.title}.${format}`
+    },
+    [application],
+  )
 
-  const downloadSelectedItems = async () => {
+  const downloadSelectedItems = useCallback(async () => {
     if (notes.length === 1) {
       application.getArchiveService().downloadData(new Blob([notes[0].text]), getNoteFileName(notes[0]))
       return
@@ -242,17 +245,17 @@ export const NotesOptions = observer(({ application, appState, closeOnBlur }: No
         message: `Exported ${notes.length} notes`,
       })
     }
-  }
+  }, [application, getNoteFileName, notes])
 
-  const duplicateSelectedItems = () => {
+  const duplicateSelectedItems = useCallback(() => {
     notes.forEach((note) => {
       application.mutator.duplicateItem(note).catch(console.error)
     })
-  }
+  }, [application, notes])
 
-  const openRevisionHistoryModal = () => {
+  const openRevisionHistoryModal = useCallback(() => {
     appState.notes.setShowRevisionHistoryModal(true)
-  }
+  }, [appState])
 
   return (
     <>
diff --git a/app/assets/javascripts/Components/NotesView/index.tsx b/app/assets/javascripts/Components/NotesView/index.tsx
index e5dffacee..df464e44f 100644
--- a/app/assets/javascripts/Components/NotesView/index.tsx
+++ b/app/assets/javascripts/Components/NotesView/index.tsx
@@ -5,7 +5,7 @@ import { PANEL_NAME_NOTES } from '@/Constants'
 import { PrefKey } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
-import { useEffect, useRef, useState } from 'preact/hooks'
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { NoAccountWarning } from '@/Components/NoAccountWarning'
 import { NotesList } from '@/Components/NotesList'
 import { NotesListOptionsMenu } from '@/Components/NotesList/NotesListOptionsMenu'
@@ -13,45 +13,46 @@ import { SearchOptions } from '@/Components/SearchOptions'
 import { PanelSide, ResizeFinishCallback, PanelResizer, PanelResizeType } from '@/Components/PanelResizer'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
 import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
+import { isStateDealloced } from '@/UIModels/AppState/AbstractState'
 
 type Props = {
   application: WebApplication
   appState: AppState
 }
 
-export const NotesView: FunctionComponent<Props> = observer(({ application, appState }) => {
+export const NotesView: FunctionComponent<Props> = observer(({ application, appState }: Props) => {
+  if (isStateDealloced(appState)) {
+    return null
+  }
+
   const notesViewPanelRef = useRef<HTMLDivElement>(null)
   const displayOptionsMenuRef = useRef<HTMLDivElement>(null)
 
   const {
     completedFullSync,
-    createNewNote,
     displayOptions,
     noteFilterText,
     optionsSubtitle,
     panelTitle,
     renderedNotes,
     selectedNotes,
-    setNoteFilterText,
     searchBarElement,
-    selectNextNote,
-    selectPreviousNote,
-    onFilterEnter,
-    handleFilterTextChanged,
-    clearFilterText,
     paginate,
     panelWidth,
   } = appState.notesView
 
+  const createNewNote = useCallback(() => appState.notesView.createNewNote, [appState])
+  const onFilterEnter = useCallback(() => appState.notesView.onFilterEnter, [appState])
+  const clearFilterText = useCallback(() => appState.notesView.clearFilterText, [appState])
+  const setNoteFilterText = useCallback((text: string) => appState.notesView.setNoteFilterText(text), [appState])
+  const selectNextNote = useCallback(() => appState.notesView.selectNextNote, [appState])
+  const selectPreviousNote = useCallback(() => appState.notesView.selectPreviousNote, [appState])
+
   const [showDisplayOptionsMenu, setShowDisplayOptionsMenu] = useState(false)
   const [focusedSearch, setFocusedSearch] = useState(false)
 
   const [closeDisplayOptMenuOnBlur] = useCloseOnBlur(displayOptionsMenuRef, setShowDisplayOptionsMenu)
 
-  useEffect(() => {
-    handleFilterTextChanged()
-  }, [noteFilterText, handleFilterTextChanged])
-
   useEffect(() => {
     /**
      * In the browser we're not allowed to override cmd/ctrl + n, so we have to
@@ -63,7 +64,7 @@ export const NotesView: FunctionComponent<Props> = observer(({ application, appS
       modifiers: [KeyboardModifier.Meta, KeyboardModifier.Ctrl],
       onKeyDown: (event) => {
         event.preventDefault()
-        createNewNote().catch(console.error)
+        createNewNote()
       },
     })
 
@@ -102,34 +103,43 @@ export const NotesView: FunctionComponent<Props> = observer(({ application, appS
       previousNoteKeyObserver()
       searchKeyObserver()
     }
-  }, [application.io, createNewNote, searchBarElement, selectNextNote, selectPreviousNote])
+  }, [application, createNewNote, selectPreviousNote, searchBarElement, selectNextNote])
 
-  const onNoteFilterTextChange = (e: Event) => {
-    setNoteFilterText((e.target as HTMLInputElement).value)
-  }
+  const onNoteFilterTextChange = useCallback(
+    (e: Event) => {
+      setNoteFilterText((e.target as HTMLInputElement).value)
+    },
+    [setNoteFilterText],
+  )
 
-  const onSearchFocused = () => setFocusedSearch(true)
-  const onSearchBlurred = () => setFocusedSearch(false)
+  const onSearchFocused = useCallback(() => setFocusedSearch(true), [])
+  const onSearchBlurred = useCallback(() => setFocusedSearch(false), [])
 
-  const onNoteFilterKeyUp = (e: KeyboardEvent) => {
-    if (e.key === KeyboardKey.Enter) {
-      onFilterEnter()
-    }
-  }
+  const onNoteFilterKeyUp = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === KeyboardKey.Enter) {
+        onFilterEnter()
+      }
+    },
+    [onFilterEnter],
+  )
 
-  const panelResizeFinishCallback: ResizeFinishCallback = (width, _lastLeft, _isMaxWidth, isCollapsed) => {
-    application.setPreference(PrefKey.NotesPanelWidth, width).catch(console.error)
+  const panelResizeFinishCallback: ResizeFinishCallback = useCallback(
+    (width, _lastLeft, _isMaxWidth, isCollapsed) => {
+      application.setPreference(PrefKey.NotesPanelWidth, width).catch(console.error)
+      appState.noteTags.reloadTagsContainerMaxWidth()
+      appState.panelDidResize(PANEL_NAME_NOTES, isCollapsed)
+    },
+    [appState, application],
+  )
+
+  const panelWidthEventCallback = useCallback(() => {
     appState.noteTags.reloadTagsContainerMaxWidth()
-    appState.panelDidResize(PANEL_NAME_NOTES, isCollapsed)
-  }
+  }, [appState])
 
-  const panelWidthEventCallback = () => {
-    appState.noteTags.reloadTagsContainerMaxWidth()
-  }
-
-  const toggleDisplayOptionsMenu = () => {
+  const toggleDisplayOptionsMenu = useCallback(() => {
     setShowDisplayOptionsMenu(!showDisplayOptionsMenu)
-  }
+  }, [showDisplayOptionsMenu])
 
   return (
     <div
diff --git a/app/assets/javascripts/Components/OtherSessionsSignOut/index.tsx b/app/assets/javascripts/Components/OtherSessionsSignOut/index.tsx
index d1d859178..b5fa46311 100644
--- a/app/assets/javascripts/Components/OtherSessionsSignOut/index.tsx
+++ b/app/assets/javascripts/Components/OtherSessionsSignOut/index.tsx
@@ -1,4 +1,4 @@
-import { useRef } from 'preact/hooks'
+import { useCallback, useRef } from 'preact/hooks'
 import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
 import { WebApplication } from '@/UIModels/Application'
 import { AppState } from '@/UIModels/AppState'
@@ -18,9 +18,10 @@ export const OtherSessionsSignOutContainer = observer((props: Props) => {
 
 const ConfirmOtherSessionsSignOut = observer(({ application, appState }: Props) => {
   const cancelRef = useRef<HTMLButtonElement>(null)
-  function closeDialog() {
+
+  const closeDialog = useCallback(() => {
     appState.accountMenu.setOtherSessionsSignOut(false)
-  }
+  }, [appState])
 
   return (
     <AlertDialog onDismiss={closeDialog} leastDestructiveRef={cancelRef}>
diff --git a/app/assets/javascripts/Components/PinNoteButton/index.tsx b/app/assets/javascripts/Components/PinNoteButton/index.tsx
index 6ecf95ea9..e126c0894 100644
--- a/app/assets/javascripts/Components/PinNoteButton/index.tsx
+++ b/app/assets/javascripts/Components/PinNoteButton/index.tsx
@@ -3,6 +3,8 @@ import VisuallyHidden from '@reach/visually-hidden'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
 import { Icon } from '@/Components/Icon'
+import { useCallback } from 'preact/hooks'
+import { isStateDealloced } from '@/UIModels/AppState/AbstractState'
 
 type Props = {
   appState: AppState
@@ -11,11 +13,15 @@ type Props = {
 }
 
 export const PinNoteButton: FunctionComponent<Props> = observer(
-  ({ appState, className = '', onClickPreprocessing }) => {
+  ({ appState, className = '', onClickPreprocessing }: Props) => {
+    if (isStateDealloced(appState)) {
+      return null
+    }
+
     const notes = Object.values(appState.notes.selectedNotes)
     const pinned = notes.some((note) => note.pinned)
 
-    const togglePinned = async () => {
+    const togglePinned = useCallback(async () => {
       if (onClickPreprocessing) {
         await onClickPreprocessing()
       }
@@ -24,7 +30,7 @@ export const PinNoteButton: FunctionComponent<Props> = observer(
       } else {
         appState.notes.setPinSelectedNotes(false)
       }
-    }
+    }, [appState, onClickPreprocessing, pinned])
 
     return (
       <button
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/Authentication.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/Authentication.tsx
index 1e964529e..9d982d875 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Account/Authentication.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/Authentication.tsx
@@ -5,7 +5,7 @@ import { WebApplication } from '@/UIModels/Application'
 import { AppState } from '@/UIModels/AppState'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
-import { AccountIllustration } from '@standardnotes/stylekit'
+import { AccountIllustration } from '@standardnotes/icons'
 
 export const Authentication: FunctionComponent<{
   application: WebApplication
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/Files.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/Files.tsx
index a38d97c26..c1e84e0ee 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Account/Files.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/Files.tsx
@@ -34,7 +34,7 @@ export const FilesSection: FunctionComponent<Props> = ({ application }) => {
     }
 
     getFilesQuota().catch(console.error)
-  }, [application.settings])
+  }, [application])
 
   return (
     <PreferencesGroup>
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Backups/Files/BackupsDropZone.tsx b/app/assets/javascripts/Components/Preferences/Panes/Backups/Files/BackupsDropZone.tsx
index 9effee653..5e65e6631 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Backups/Files/BackupsDropZone.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Backups/Files/BackupsDropZone.tsx
@@ -1,7 +1,7 @@
 import { PreferencesSegment, Title, Text, Subtitle } from '@/Components/Preferences/PreferencesComponents'
 import { useCallback, useEffect, useMemo, useState } from 'preact/hooks'
 import { Button } from '@/Components/Button/Button'
-import { FileBackupMetadataFile, FileBackupsConstantsV1, FileContent, FileHandleRead } from '@standardnotes/snjs'
+import { FileBackupMetadataFile, FileBackupsConstantsV1, FileItem, FileHandleRead } from '@standardnotes/snjs'
 import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
 import { EncryptionStatusItem } from '../../Security/Encryption'
 import { Icon } from '@/Components/Icon'
@@ -16,7 +16,7 @@ type Props = {
 
 export const BackupsDropZone: FunctionComponent<Props> = ({ application }) => {
   const [droppedFile, setDroppedFile] = useState<FileBackupMetadataFile | undefined>(undefined)
-  const [decryptedFileContent, setDecryptedFileContent] = useState<FileContent | undefined>(undefined)
+  const [decryptedFileItem, setDecryptedFileItem] = useState<FileItem | undefined>(undefined)
   const [binaryFile, setBinaryFile] = useState<FileHandleRead | undefined>(undefined)
   const [isSavingAsDecrypted, setIsSavingAsDecrypted] = useState(false)
 
@@ -24,9 +24,9 @@ export const BackupsDropZone: FunctionComponent<Props> = ({ application }) => {
 
   useEffect(() => {
     if (droppedFile) {
-      void application.files.decryptBackupMetadataFile(droppedFile).then(setDecryptedFileContent)
+      void application.files.decryptBackupMetadataFile(droppedFile).then(setDecryptedFileItem)
     } else {
-      setDecryptedFileContent(undefined)
+      setDecryptedFileItem(undefined)
     }
   }, [droppedFile, application])
 
@@ -41,20 +41,20 @@ export const BackupsDropZone: FunctionComponent<Props> = ({ application }) => {
   }, [application, fileSystem])
 
   const downloadBinaryFileAsDecrypted = useCallback(async () => {
-    if (!decryptedFileContent || !binaryFile) {
+    if (!decryptedFileItem || !binaryFile) {
       return
     }
 
     setIsSavingAsDecrypted(true)
 
-    const result = await application.files.readBackupFileAndSaveDecrypted(binaryFile, decryptedFileContent, fileSystem)
+    const result = await application.files.readBackupFileAndSaveDecrypted(binaryFile, decryptedFileItem, fileSystem)
 
     if (result === 'success') {
       void application.alertService.alert(
-        `<strong>${decryptedFileContent.name}</strong> has been successfully decrypted and saved to your chosen directory.`,
+        `<strong>${decryptedFileItem.name}</strong> has been successfully decrypted and saved to your chosen directory.`,
       )
       setBinaryFile(undefined)
-      setDecryptedFileContent(undefined)
+      setDecryptedFileItem(undefined)
       setDroppedFile(undefined)
     } else if (result === 'failed') {
       void application.alertService.alert(
@@ -63,7 +63,7 @@ export const BackupsDropZone: FunctionComponent<Props> = ({ application }) => {
     }
 
     setIsSavingAsDecrypted(false)
-  }, [decryptedFileContent, application, binaryFile, fileSystem])
+  }, [decryptedFileItem, application, binaryFile, fileSystem])
 
   const handleDrag = useCallback(
     (event: DragEvent) => {
@@ -123,6 +123,12 @@ export const BackupsDropZone: FunctionComponent<Props> = ({ application }) => {
 
       const text = await file.text()
 
+      const type = application.files.isFileNameFileBackupRelated(file.name)
+      if (type === 'binary') {
+        void application.alertService.alert('Please drag the metadata file instead of the encrypted data file.')
+        return
+      }
+
       try {
         const metadata = JSON.parse(text) as FileBackupMetadataFile
         setDroppedFile(metadata)
@@ -160,14 +166,14 @@ export const BackupsDropZone: FunctionComponent<Props> = ({ application }) => {
   return (
     <>
       <PreferencesSegment>
-        {!decryptedFileContent && <Text>Attempting to decrypt metadata file...</Text>}
+        {!decryptedFileItem && <Text>Attempting to decrypt metadata file...</Text>}
 
-        {decryptedFileContent && (
+        {decryptedFileItem && (
           <>
             <Title>Backup Decryption</Title>
 
             <EncryptionStatusItem
-              status={decryptedFileContent.name}
+              status={decryptedFileItem.name}
               icon={[<Icon type="attachment-file" className="min-w-5 min-h-5" />]}
               checkmark={true}
             />
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Backups/Files/FileBackups.tsx b/app/assets/javascripts/Components/Preferences/Panes/Backups/Files/FileBackups.tsx
index af07b3641..7511b110d 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Backups/Files/FileBackups.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Backups/Files/FileBackups.tsx
@@ -22,7 +22,7 @@ type Props = {
 export const FileBackups = observer(({ application }: Props) => {
   const [backupsEnabled, setBackupsEnabled] = useState(false)
   const [backupsLocation, setBackupsLocation] = useState('')
-  const backupsService = useMemo(() => application.fileBackups, [application.fileBackups])
+  const backupsService = useMemo(() => application.fileBackups, [application])
 
   if (!backupsService) {
     return (
diff --git a/app/assets/javascripts/Components/Preferences/Panes/General/Defaults.tsx b/app/assets/javascripts/Components/Preferences/Panes/General/Defaults.tsx
index 164205f10..f0b92dfcb 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/General/Defaults.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/General/Defaults.tsx
@@ -69,7 +69,7 @@ export const Defaults: FunctionComponent<Props> = ({ application }) => {
       .componentsForArea(ComponentArea.Editor)
       .map((editor): EditorOption => {
         const identifier = editor.package_info.identifier
-        const [iconType, tint] = application.iconsController.getIconAndTintForEditor(identifier)
+        const [iconType, tint] = application.iconsController.getIconAndTintForNoteType(editor.package_info.note_type)
 
         return {
           label: editor.name,
diff --git a/app/assets/javascripts/Components/Preferences/Panes/General/Labs.tsx b/app/assets/javascripts/Components/Preferences/Panes/General/Labs.tsx
index 37896bc65..ffb4bb11b 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/General/Labs.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/General/Labs.tsx
@@ -40,7 +40,7 @@ export const LabsPane: FunctionComponent<Props> = ({ application }) => {
       }
     })
     setExperimentalFeatures(experimentalFeatures)
-  }, [application.features])
+  }, [application])
 
   useEffect(() => {
     reloadExperimentalFeatures()
diff --git a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/AuthAppInfoPopup.tsx b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/AuthAppInfoPopup.tsx
index a1c358325..86d51b00c 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/AuthAppInfoPopup.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/AuthAppInfoPopup.tsx
@@ -1,15 +1,14 @@
 import { Icon } from '@/Components/Icon'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
 import { FunctionComponent } from 'preact'
-import { MouseEventHandler } from 'react'
 import { useState, useRef, useEffect } from 'preact/hooks'
 import { IconType } from '@standardnotes/snjs'
 
 const DisclosureIconButton: FunctionComponent<{
   className?: string
   icon: IconType
-  onMouseEnter?: MouseEventHandler
-  onMouseLeave?: MouseEventHandler
+  onMouseEnter?: any
+  onMouseLeave?: any
 }> = ({ className = '', icon, onMouseEnter, onMouseLeave }) => (
   <DisclosureButton
     onMouseEnter={onMouseEnter}
@@ -51,7 +50,7 @@ export const AuthAppInfoTooltip: FunctionComponent = () => {
         />
         <DisclosurePanel>
           <div
-            className={`bg-inverted-default color-inverted-default text-center rounded shadow-overlay 
+            className={`bg-inverted-default color-inverted-default text-center rounded shadow-overlay
 py-1.5 px-2 absolute w-103 -top-10 -left-51`}
           >
             Some apps, like Google Authenticator, do not back up and restore your secret keys if you lose your device or
diff --git a/app/assets/javascripts/Components/PremiumFeaturesModal/index.tsx b/app/assets/javascripts/Components/PremiumFeaturesModal/index.tsx
index e9a03f6e0..d602475ab 100644
--- a/app/assets/javascripts/Components/PremiumFeaturesModal/index.tsx
+++ b/app/assets/javascripts/Components/PremiumFeaturesModal/index.tsx
@@ -1,8 +1,8 @@
 import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
 import { FunctionalComponent } from 'preact'
 import { Icon } from '@/Components/Icon'
-import { PremiumIllustration } from '@standardnotes/stylekit'
-import { useRef } from 'preact/hooks'
+import { PremiumIllustration } from '@standardnotes/icons'
+import { useCallback, useRef } from 'preact/hooks'
 import { WebApplication } from '@/UIModels/Application'
 import { openSubscriptionDashboard } from '@/Utils/ManageSubscription'
 
@@ -23,13 +23,13 @@ export const PremiumFeaturesModal: FunctionalComponent<Props> = ({
 }) => {
   const plansButtonRef = useRef<HTMLButtonElement>(null)
 
-  const handleClick = () => {
+  const handleClick = useCallback(() => {
     if (hasSubscription) {
       openSubscriptionDashboard(application)
     } else if (window.plansUrl) {
       window.location.assign(window.plansUrl)
     }
-  }
+  }, [application, hasSubscription])
 
   return showModal ? (
     <AlertDialog leastDestructiveRef={plansButtonRef}>
diff --git a/app/assets/javascripts/Components/PurchaseFlow/Panes/CreateAccount.tsx b/app/assets/javascripts/Components/PurchaseFlow/Panes/CreateAccount.tsx
index bffcf8bee..fa33ffb2c 100644
--- a/app/assets/javascripts/Components/PurchaseFlow/Panes/CreateAccount.tsx
+++ b/app/assets/javascripts/Components/PurchaseFlow/Panes/CreateAccount.tsx
@@ -8,7 +8,7 @@ import { useEffect, useRef, useState } from 'preact/hooks'
 import { FloatingLabelInput } from '@/Components/Input/FloatingLabelInput'
 import { isEmailValid } from '@/Utils'
 import { loadPurchaseFlowUrl } from '@/Components/PurchaseFlow/PurchaseFlowWrapper'
-import { BlueDotIcon, CircleIcon, DiamondIcon, CreateAccountIllustration } from '@standardnotes/stylekit'
+import { BlueDotIcon, CircleIcon, DiamondIcon, CreateAccountIllustration } from '@standardnotes/icons'
 
 type Props = {
   appState: AppState
diff --git a/app/assets/javascripts/Components/PurchaseFlow/Panes/SignIn.tsx b/app/assets/javascripts/Components/PurchaseFlow/Panes/SignIn.tsx
index bb3bee0ff..59ca2280d 100644
--- a/app/assets/javascripts/Components/PurchaseFlow/Panes/SignIn.tsx
+++ b/app/assets/javascripts/Components/PurchaseFlow/Panes/SignIn.tsx
@@ -8,7 +8,7 @@ import { useEffect, useRef, useState } from 'preact/hooks'
 import { FloatingLabelInput } from '@/Components/Input/FloatingLabelInput'
 import { isEmailValid } from '@/Utils'
 import { loadPurchaseFlowUrl } from '@/Components/PurchaseFlow/PurchaseFlowWrapper'
-import { BlueDotIcon, CircleIcon, DiamondIcon } from '@standardnotes/stylekit'
+import { BlueDotIcon, CircleIcon, DiamondIcon } from '@standardnotes/icons'
 
 type Props = {
   appState: AppState
diff --git a/app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowView.tsx b/app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowView.tsx
index e9b15ad66..2a6d61577 100644
--- a/app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowView.tsx
+++ b/app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowView.tsx
@@ -5,7 +5,7 @@ import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
 import { CreateAccount } from './Panes/CreateAccount'
 import { SignIn } from './Panes/SignIn'
-import { SNLogoFull } from '@standardnotes/stylekit'
+import { SNLogoFull } from '@standardnotes/icons'
 
 type PaneSelectorProps = {
   currentPane: PurchaseFlowPane
diff --git a/app/assets/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx b/app/assets/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
index fab7d76fc..f980a2b33 100644
--- a/app/assets/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
+++ b/app/assets/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
@@ -1,7 +1,7 @@
 import { WebApplication } from '@/UIModels/Application'
 import { FeatureStatus } from '@standardnotes/snjs'
 import { FunctionComponent } from 'preact'
-import { useMemo } from 'preact/hooks'
+import { useCallback, useMemo } from 'preact/hooks'
 import { JSXInternal } from 'preact/src/jsx'
 import { Icon } from '@/Components/Icon'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
@@ -27,19 +27,22 @@ export const ThemesMenuButton: FunctionComponent<Props> = ({ application, item,
   )
   const canActivateTheme = useMemo(() => isEntitledToTheme || isThirdPartyTheme, [isEntitledToTheme, isThirdPartyTheme])
 
-  const toggleTheme: JSXInternal.MouseEventHandler<HTMLButtonElement> = (e) => {
-    e.preventDefault()
+  const toggleTheme: JSXInternal.MouseEventHandler<HTMLButtonElement> = useCallback(
+    (e) => {
+      e.preventDefault()
 
-    if (item.component && canActivateTheme) {
-      const themeIsLayerableOrNotActive = item.component.isLayerable() || !item.component.active
+      if (item.component && canActivateTheme) {
+        const themeIsLayerableOrNotActive = item.component.isLayerable() || !item.component.active
 
-      if (themeIsLayerableOrNotActive) {
-        application.mutator.toggleTheme(item.component).catch(console.error)
+        if (themeIsLayerableOrNotActive) {
+          application.mutator.toggleTheme(item.component).catch(console.error)
+        }
+      } else {
+        premiumModal.activate(`${item.name} theme`)
       }
-    } else {
-      premiumModal.activate(`${item.name} theme`)
-    }
-  }
+    },
+    [application, canActivateTheme, item, premiumModal],
+  )
 
   return (
     <button
diff --git a/app/assets/javascripts/Components/QuickSettingsMenu/index.tsx b/app/assets/javascripts/Components/QuickSettingsMenu/index.tsx
index 98855c4ae..970b2de2e 100644
--- a/app/assets/javascripts/Components/QuickSettingsMenu/index.tsx
+++ b/app/assets/javascripts/Components/QuickSettingsMenu/index.tsx
@@ -139,7 +139,7 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(({ appli
 
   const [closeOnBlur] = useCloseOnBlur(themesMenuRef, setThemesMenuOpen)
 
-  const toggleThemesMenu = () => {
+  const toggleThemesMenu = useCallback(() => {
     if (!themesMenuOpen && themesButtonRef.current) {
       const themesButtonRect = themesButtonRef.current.getBoundingClientRect()
       setThemesMenuPosition({
@@ -150,48 +150,57 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(({ appli
     } else {
       setThemesMenuOpen(false)
     }
-  }
+  }, [themesMenuOpen])
 
-  const openPreferences = () => {
+  const openPreferences = useCallback(() => {
     closeQuickSettingsMenu()
     appState.preferences.openPreferences()
-  }
+  }, [appState, closeQuickSettingsMenu])
 
-  const toggleComponent = (component: SNComponent) => {
-    if (component.isTheme()) {
-      application.mutator.toggleTheme(component).catch(console.error)
-    } else {
-      application.mutator.toggleComponent(component).catch(console.error)
-    }
-  }
+  const toggleComponent = useCallback(
+    (component: SNComponent) => {
+      if (component.isTheme()) {
+        application.mutator.toggleTheme(component).catch(console.error)
+      } else {
+        application.mutator.toggleComponent(component).catch(console.error)
+      }
+    },
+    [application],
+  )
 
-  const handleBtnKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = (event) => {
-    switch (event.key) {
-      case 'Escape':
-        setThemesMenuOpen(false)
-        themesButtonRef.current?.focus()
-        break
-      case 'ArrowRight':
-        if (!themesMenuOpen) {
-          toggleThemesMenu()
-        }
-    }
-  }
+  const handleBtnKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = useCallback(
+    (event) => {
+      switch (event.key) {
+        case 'Escape':
+          setThemesMenuOpen(false)
+          themesButtonRef.current?.focus()
+          break
+        case 'ArrowRight':
+          if (!themesMenuOpen) {
+            toggleThemesMenu()
+          }
+      }
+    },
+    [themesMenuOpen, toggleThemesMenu],
+  )
 
-  const handleQuickSettingsKeyDown: JSXInternal.KeyboardEventHandler<HTMLDivElement> = (event) => {
-    quickSettingsKeyDownHandler(closeQuickSettingsMenu, event, quickSettingsMenuRef, themesMenuOpen)
-  }
+  const handleQuickSettingsKeyDown: JSXInternal.KeyboardEventHandler<HTMLDivElement> = useCallback(
+    (event) => {
+      quickSettingsKeyDownHandler(closeQuickSettingsMenu, event, quickSettingsMenuRef, themesMenuOpen)
+    },
+    [closeQuickSettingsMenu, themesMenuOpen],
+  )
 
-  const handlePanelKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
+  const handlePanelKeyDown: React.KeyboardEventHandler<HTMLDivElement> = useCallback((event) => {
     themesMenuKeyDownHandler(event, themesMenuRef, setThemesMenuOpen, themesButtonRef)
-  }
+  }, [])
 
-  const toggleDefaultTheme = () => {
+  const toggleDefaultTheme = useCallback(() => {
     const activeTheme = themes.map((item) => item.component).find((theme) => theme?.active && !theme.isLayerable())
     if (activeTheme) {
       application.mutator.toggleTheme(activeTheme).catch(console.error)
     }
-  }
+  }, [application, themes])
 
   return (
     <div ref={mainRef} className="sn-component">
diff --git a/app/assets/javascripts/Components/RevisionHistoryModal/HistoryListContainer.tsx b/app/assets/javascripts/Components/RevisionHistoryModal/HistoryListContainer.tsx
index 22ef1632f..871d7765c 100644
--- a/app/assets/javascripts/Components/RevisionHistoryModal/HistoryListContainer.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/HistoryListContainer.tsx
@@ -2,8 +2,7 @@ import { WebApplication } from '@/UIModels/Application'
 import { Action, ActionVerb, HistoryEntry, NoteHistoryEntry, RevisionListEntry, SNNote } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
-import { StateUpdater, useCallback, useState } from 'preact/hooks'
-import { useEffect } from 'react'
+import { StateUpdater, useCallback, useState, useEffect } from 'preact/hooks'
 import { LegacyHistoryList } from './LegacyHistoryList'
 import { RemoteHistoryList } from './RemoteHistoryList'
 import { SessionHistoryList } from './SessionHistoryList'
@@ -67,7 +66,7 @@ export const HistoryListContainer: FunctionComponent<Props> = observer(
       }
 
       fetchLegacyHistory().catch(console.error)
-    }, [application.actionsManager, note])
+    }, [application, note])
 
     const TabButton: FunctionComponent<{
       type: RevisionListTabType
diff --git a/app/assets/javascripts/Components/RevisionHistoryModal/RevisionContentLocked.tsx b/app/assets/javascripts/Components/RevisionHistoryModal/RevisionContentLocked.tsx
index 75c674082..c2c41c9e1 100644
--- a/app/assets/javascripts/Components/RevisionHistoryModal/RevisionContentLocked.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/RevisionContentLocked.tsx
@@ -1,7 +1,7 @@
 import { AppState } from '@/UIModels/AppState'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
-import HistoryLockedIllustration from '../../../svg/il-history-locked.svg'
+import { HistoryLockedIllustration } from '@standardnotes/icons'
 import { Button } from '@/Components/Button/Button'
 
 const getPlanHistoryDuration = (planName: string | undefined) => {
diff --git a/app/assets/javascripts/Components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx b/app/assets/javascripts/Components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
index 5cee07d3e..6e7dad12b 100644
--- a/app/assets/javascripts/Components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
@@ -64,7 +64,7 @@ export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps>
     const note = Object.values(appState.notes.selectedNotes)[0]
     const editorForCurrentNote = useMemo(() => {
       return application.componentManager.editorForNote(note)
-    }, [application.componentManager, note])
+    }, [application, note])
 
     const [isFetchingSelectedRevision, setIsFetchingSelectedRevision] = useState(false)
     const [selectedRevision, setSelectedRevision] = useState<HistoryEntry | LegacyHistoryEntry>()
@@ -92,7 +92,7 @@ export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps>
           setIsFetchingRemoteHistory(false)
         }
       }
-    }, [application.historyManager, note])
+    }, [application, note])
 
     useEffect(() => {
       if (!remoteHistory?.length) {
diff --git a/app/assets/javascripts/Components/RevisionHistoryModal/SelectedRevisionContent.tsx b/app/assets/javascripts/Components/RevisionHistoryModal/SelectedRevisionContent.tsx
index a5f4f86cc..0fa5d620b 100644
--- a/app/assets/javascripts/Components/RevisionHistoryModal/SelectedRevisionContent.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/SelectedRevisionContent.tsx
@@ -29,7 +29,7 @@ export const SelectedRevisionContent: FunctionComponent<SelectedRevisionContentP
       componentViewer.lockReadonly = true
       componentViewer.overrideContextItem = templateNoteForRevision
       return componentViewer
-    }, [application.componentManager, editorForCurrentNote, templateNoteForRevision])
+    }, [application, editorForCurrentNote, templateNoteForRevision])
 
     useEffect(() => {
       return () => {
@@ -37,7 +37,7 @@ export const SelectedRevisionContent: FunctionComponent<SelectedRevisionContentP
           application.componentManager.destroyComponentViewer(componentViewer)
         }
       }
-    }, [application.componentManager, componentViewer])
+    }, [application, componentViewer])
 
     return (
       <div className="flex flex-col h-full overflow-hidden">
diff --git a/app/assets/javascripts/Components/SearchOptions/index.tsx b/app/assets/javascripts/Components/SearchOptions/index.tsx
index ea26ec0e8..5f872ecec 100644
--- a/app/assets/javascripts/Components/SearchOptions/index.tsx
+++ b/app/assets/javascripts/Components/SearchOptions/index.tsx
@@ -2,6 +2,7 @@ import { AppState } from '@/UIModels/AppState'
 import { WebApplication } from '@/UIModels/Application'
 import { observer } from 'mobx-react-lite'
 import Bubble from '@/Components/Bubble'
+import { useCallback } from 'preact/hooks'
 
 type Props = {
   appState: AppState
@@ -13,9 +14,9 @@ export const SearchOptions = observer(({ appState }: Props) => {
 
   const { includeProtectedContents, includeArchived, includeTrashed } = searchOptions
 
-  async function toggleIncludeProtectedContents() {
+  const toggleIncludeProtectedContents = useCallback(async () => {
     await searchOptions.toggleIncludeProtectedContents()
-  }
+  }, [searchOptions])
 
   return (
     <div role="tablist" className="search-options justify-center" onMouseDown={(e) => e.preventDefault()}>
diff --git a/app/assets/javascripts/Components/Shared/AccordionItem.tsx b/app/assets/javascripts/Components/Shared/AccordionItem.tsx
index 8f4272b54..c33dcb692 100644
--- a/app/assets/javascripts/Components/Shared/AccordionItem.tsx
+++ b/app/assets/javascripts/Components/Shared/AccordionItem.tsx
@@ -1,6 +1,6 @@
 import { FunctionalComponent } from 'preact'
 import { useRef, useState } from 'preact/hooks'
-import { ArrowDownCheckmarkIcon } from '@standardnotes/stylekit'
+import { ArrowDownCheckmarkIcon } from '@standardnotes/icons'
 import { Title } from '@/Components/Preferences/PreferencesComponents'
 
 type Props = {
diff --git a/app/assets/javascripts/Components/Shared/ModalDialog.tsx b/app/assets/javascripts/Components/Shared/ModalDialog.tsx
index 7e6571d66..11af27610 100644
--- a/app/assets/javascripts/Components/Shared/ModalDialog.tsx
+++ b/app/assets/javascripts/Components/Shared/ModalDialog.tsx
@@ -1,6 +1,6 @@
 import { FunctionComponent } from 'preact'
-import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@node_modules/@reach/alert-dialog'
-import { useRef } from '@node_modules/preact/hooks'
+import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
+import { useRef } from 'preact/hooks'
 
 export const ModalDialog: FunctionComponent = ({ children }) => {
   const ldRef = useRef<HTMLButtonElement>(null)
diff --git a/app/assets/javascripts/Components/Switch/index.tsx b/app/assets/javascripts/Components/Switch/index.tsx
index 086ebe564..b07a54e3c 100644
--- a/app/assets/javascripts/Components/Switch/index.tsx
+++ b/app/assets/javascripts/Components/Switch/index.tsx
@@ -2,15 +2,16 @@ import { CustomCheckboxContainer, CustomCheckboxInput, CustomCheckboxInputProps
 import '@reach/checkbox/styles.css'
 import { ComponentChildren, FunctionalComponent } from 'preact'
 import { useState } from 'preact/hooks'
-import { HTMLProps } from 'react'
 
-export type SwitchProps = HTMLProps<HTMLInputElement> & {
+export type SwitchProps = {
   checked?: boolean
   // Optional in case it is wrapped in a button (e.g. a menu item)
   onChange?: (checked: boolean) => void
   className?: string
   children?: ComponentChildren
   role?: string
+  disabled?: boolean
+  tabIndex?: number
 }
 
 export const Switch: FunctionalComponent<SwitchProps> = (props: SwitchProps) => {
diff --git a/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagHint.tsx b/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagHint.tsx
index bf7926b51..4a948d30d 100644
--- a/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagHint.tsx
+++ b/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagHint.tsx
@@ -1,6 +1,6 @@
 import { AppState } from '@/UIModels/AppState'
 import { observer } from 'mobx-react-lite'
-import { useRef, useEffect } from 'preact/hooks'
+import { useRef, useEffect, useCallback } from 'preact/hooks'
 import { Icon } from '@/Components/Icon'
 
 type Props = {
@@ -15,36 +15,42 @@ export const AutocompleteTagHint = observer(({ appState, closeOnBlur }: Props) =
 
   const { autocompleteSearchQuery, autocompleteTagResults } = appState.noteTags
 
-  const onTagHintClick = async () => {
+  const onTagHintClick = useCallback(async () => {
     await appState.noteTags.createAndAddNewTag()
     appState.noteTags.setAutocompleteInputFocused(true)
-  }
+  }, [appState])
 
-  const onFocus = () => {
+  const onFocus = useCallback(() => {
     appState.noteTags.setAutocompleteTagHintFocused(true)
-  }
+  }, [appState])
 
-  const onBlur = (event: FocusEvent) => {
-    closeOnBlur(event)
-    appState.noteTags.setAutocompleteTagHintFocused(false)
-  }
+  const onBlur = useCallback(
+    (event: FocusEvent) => {
+      closeOnBlur(event)
+      appState.noteTags.setAutocompleteTagHintFocused(false)
+    },
+    [appState, closeOnBlur],
+  )
 
-  const onKeyDown = (event: KeyboardEvent) => {
-    if (event.key === 'ArrowUp') {
-      if (autocompleteTagResults.length > 0) {
-        const lastTagResult = autocompleteTagResults[autocompleteTagResults.length - 1]
-        appState.noteTags.setFocusedTagResultUuid(lastTagResult.uuid)
-      } else {
-        appState.noteTags.setAutocompleteInputFocused(true)
+  const onKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === 'ArrowUp') {
+        if (autocompleteTagResults.length > 0) {
+          const lastTagResult = autocompleteTagResults[autocompleteTagResults.length - 1]
+          appState.noteTags.setFocusedTagResultUuid(lastTagResult.uuid)
+        } else {
+          appState.noteTags.setAutocompleteInputFocused(true)
+        }
       }
-    }
-  }
+    },
+    [appState, autocompleteTagResults],
+  )
 
   useEffect(() => {
     if (autocompleteTagHintFocused) {
       hintRef.current?.focus()
     }
-  }, [appState.noteTags, autocompleteTagHintFocused])
+  }, [appState, autocompleteTagHintFocused])
 
   return (
     <>
diff --git a/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagInput.tsx b/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagInput.tsx
index 07f2bf3fb..07215243b 100644
--- a/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagInput.tsx
+++ b/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagInput.tsx
@@ -94,7 +94,7 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
     if (autocompleteInputFocused) {
       inputRef.current?.focus()
     }
-  }, [appState.noteTags, autocompleteInputFocused])
+  }, [appState, autocompleteInputFocused])
 
   return (
     <div ref={containerRef}>
diff --git a/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagResult.tsx b/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagResult.tsx
index bd0e8589b..6df45657f 100644
--- a/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagResult.tsx
+++ b/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagResult.tsx
@@ -64,7 +64,7 @@ export const AutocompleteTagResult = observer(({ appState, tagResult, closeOnBlu
       tagResultRef.current?.focus()
       appState.noteTags.setFocusedTagResultUuid(undefined)
     }
-  }, [appState.noteTags, focusedTagResultUuid, tagResult])
+  }, [appState, focusedTagResultUuid, tagResult])
 
   return (
     <button
diff --git a/app/assets/javascripts/Components/Tags/SmartViewsList.tsx b/app/assets/javascripts/Components/Tags/SmartViewsList.tsx
index 65c58411f..381dadba5 100644
--- a/app/assets/javascripts/Components/Tags/SmartViewsList.tsx
+++ b/app/assets/javascripts/Components/Tags/SmartViewsList.tsx
@@ -1,4 +1,5 @@
 import { AppState } from '@/UIModels/AppState'
+import { isStateDealloced } from '@/UIModels/AppState/AbstractState'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
 import { SmartViewsListItem } from './SmartViewsListItem'
@@ -7,7 +8,11 @@ type Props = {
   appState: AppState
 }
 
-export const SmartViewsList: FunctionComponent<Props> = observer(({ appState }) => {
+export const SmartViewsList: FunctionComponent<Props> = observer(({ appState }: Props) => {
+  if (isStateDealloced(appState)) {
+    return null
+  }
+
   const allViews = appState.tags.smartViews
 
   return (
diff --git a/app/assets/javascripts/Components/Tags/TagContextMenu.tsx b/app/assets/javascripts/Components/Tags/TagContextMenu.tsx
index 3783aad18..c62c025a6 100644
--- a/app/assets/javascripts/Components/Tags/TagContextMenu.tsx
+++ b/app/assets/javascripts/Components/Tags/TagContextMenu.tsx
@@ -8,12 +8,17 @@ import { MenuItem, MenuItemType } from '@/Components/Menu/MenuItem'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
 import { SNTag } from '@standardnotes/snjs'
+import { isStateDealloced } from '@/UIModels/AppState/AbstractState'
 
 type Props = {
   appState: AppState
 }
 
-export const TagsContextMenu: FunctionComponent<Props> = observer(({ appState }) => {
+export const TagsContextMenu: FunctionComponent<Props> = observer(({ appState }: Props) => {
+  if (isStateDealloced(appState)) {
+    return null
+  }
+
   const premiumModal = usePremiumModal()
   const selectedTag = appState.tags.selected
 
@@ -28,7 +33,7 @@ export const TagsContextMenu: FunctionComponent<Props> = observer(({ appState })
 
   const reloadContextMenuLayout = useCallback(() => {
     appState.tags.reloadContextMenuLayout()
-  }, [appState.tags])
+  }, [appState])
 
   useEffect(() => {
     window.addEventListener('resize', reloadContextMenuLayout)
@@ -45,16 +50,16 @@ export const TagsContextMenu: FunctionComponent<Props> = observer(({ appState })
 
     appState.tags.setContextMenuOpen(false)
     appState.tags.setAddingSubtagTo(selectedTag)
-  }, [appState.features.hasFolders, appState.tags, premiumModal, selectedTag])
+  }, [appState, selectedTag, premiumModal])
 
   const onClickRename = useCallback(() => {
     appState.tags.setContextMenuOpen(false)
     appState.tags.editingTag = selectedTag
-  }, [appState.tags, selectedTag])
+  }, [appState, selectedTag])
 
   const onClickDelete = useCallback(() => {
     appState.tags.remove(selectedTag, true).catch(console.error)
-  }, [appState.tags, selectedTag])
+  }, [appState, selectedTag])
 
   return contextMenuOpen ? (
     <div
diff --git a/app/assets/javascripts/Components/Tags/TagsList.tsx b/app/assets/javascripts/Components/Tags/TagsList.tsx
index 7721fae08..2bb8db491 100644
--- a/app/assets/javascripts/Components/Tags/TagsList.tsx
+++ b/app/assets/javascripts/Components/Tags/TagsList.tsx
@@ -1,8 +1,10 @@
 import { AppState } from '@/UIModels/AppState'
+import { isStateDealloced } from '@/UIModels/AppState/AbstractState'
 import { isMobile } from '@/Utils'
 import { SNTag } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
+import { useCallback } from 'preact/hooks'
 import { DndProvider } from 'react-dnd'
 import { HTML5Backend } from 'react-dnd-html5-backend'
 import { TouchBackend } from 'react-dnd-touch-backend'
@@ -13,25 +15,35 @@ type Props = {
   appState: AppState
 }
 
-export const TagsList: FunctionComponent<Props> = observer(({ appState }) => {
+export const TagsList: FunctionComponent<Props> = observer(({ appState }: Props) => {
+  if (isStateDealloced(appState)) {
+    return null
+  }
+
   const tagsState = appState.tags
   const allTags = tagsState.allLocalRootTags
 
   const backend = isMobile({ tablet: true }) ? TouchBackend : HTML5Backend
 
-  const openTagContextMenu = (posX: number, posY: number) => {
-    appState.tags.setContextMenuClickLocation({
-      x: posX,
-      y: posY,
-    })
-    appState.tags.reloadContextMenuLayout()
-    appState.tags.setContextMenuOpen(true)
-  }
+  const openTagContextMenu = useCallback(
+    (posX: number, posY: number) => {
+      appState.tags.setContextMenuClickLocation({
+        x: posX,
+        y: posY,
+      })
+      appState.tags.reloadContextMenuLayout()
+      appState.tags.setContextMenuOpen(true)
+    },
+    [appState],
+  )
 
-  const onContextMenu = (tag: SNTag, posX: number, posY: number) => {
-    appState.tags.selected = tag
-    openTagContextMenu(posX, posY)
-  }
+  const onContextMenu = useCallback(
+    (tag: SNTag, posX: number, posY: number) => {
+      appState.tags.selected = tag
+      openTagContextMenu(posX, posY)
+    },
+    [appState, openTagContextMenu],
+  )
 
   return (
     <DndProvider backend={backend}>
diff --git a/app/assets/javascripts/Components/Tags/TagsListItem.tsx b/app/assets/javascripts/Components/Tags/TagsListItem.tsx
index ce1bcba0f..711b5a9bc 100644
--- a/app/assets/javascripts/Components/Tags/TagsListItem.tsx
+++ b/app/assets/javascripts/Components/Tags/TagsListItem.tsx
@@ -165,7 +165,7 @@ export const TagsListItem: FunctionComponent<Props> = observer(({ tag, features,
 
   const readyToDrop = isOver && canDrop
 
-  const toggleContextMenu = () => {
+  const toggleContextMenu = useCallback(() => {
     if (!menuButtonRef.current) {
       return
     }
@@ -178,7 +178,7 @@ export const TagsListItem: FunctionComponent<Props> = observer(({ tag, features,
     } else {
       onContextMenu(tag, menuButtonRect.right, menuButtonRect.top)
     }
-  }
+  }, [onContextMenu, tagsState, tag])
 
   return (
     <>
diff --git a/app/assets/javascripts/Components/Tags/TagsSection.tsx b/app/assets/javascripts/Components/Tags/TagsSection.tsx
index 2d9aba885..5d3b158bd 100644
--- a/app/assets/javascripts/Components/Tags/TagsSection.tsx
+++ b/app/assets/javascripts/Components/Tags/TagsSection.tsx
@@ -16,16 +16,20 @@ export const TagsSection: FunctionComponent<Props> = observer(({ appState }) =>
 
   const checkIfMigrationNeeded = useCallback(() => {
     setHasMigration(appState.application.items.hasTagsNeedingFoldersMigration())
-  }, [appState.application])
+  }, [appState])
 
   useEffect(() => {
-    appState.application.addEventObserver(async (event) => {
+    const removeObserver = appState.application.addEventObserver(async (event) => {
       const events = [ApplicationEvent.CompletedInitialSync, ApplicationEvent.SignedIn]
       if (events.includes(event)) {
         checkIfMigrationNeeded()
       }
     })
-  }, [appState.application, checkIfMigrationNeeded])
+
+    return () => {
+      removeObserver()
+    }
+  }, [appState, checkIfMigrationNeeded])
 
   const runMigration = useCallback(async () => {
     if (
@@ -46,7 +50,7 @@ export const TagsSection: FunctionComponent<Props> = observer(({ appState }) =>
         })
         .catch(console.error)
     }
-  }, [appState.application, checkIfMigrationNeeded])
+  }, [appState, checkIfMigrationNeeded])
 
   return (
     <section>
diff --git a/app/assets/javascripts/Device/WebDevice.ts b/app/assets/javascripts/Device/WebDevice.ts
index e38d5bfa3..1f6a6359c 100644
--- a/app/assets/javascripts/Device/WebDevice.ts
+++ b/app/assets/javascripts/Device/WebDevice.ts
@@ -2,6 +2,8 @@ import { Environment, RawKeychainValue } from '@standardnotes/snjs'
 import { WebOrDesktopDevice } from './WebOrDesktopDevice'
 
 const KEYCHAIN_STORAGE_KEY = 'keychain'
+const DESTROYED_DEVICE_URL_PARAM = 'destroyed'
+const DESTROYED_DEVICE_URL_VALUE = 'true'
 
 export class WebDevice extends WebOrDesktopDevice {
   environment = Environment.Web
@@ -23,4 +25,17 @@ export class WebDevice extends WebOrDesktopDevice {
   async clearRawKeychainValue(): Promise<void> {
     localStorage.removeItem(KEYCHAIN_STORAGE_KEY)
   }
+
+  async performHardReset(): Promise<void> {
+    const url = new URL(window.location.href)
+    const params = url.searchParams
+    params.append(DESTROYED_DEVICE_URL_PARAM, DESTROYED_DEVICE_URL_VALUE)
+    window.location.replace(url.href)
+  }
+
+  public isDeviceDestroyed(): boolean {
+    const url = new URL(window.location.href)
+    const params = url.searchParams
+    return params.get(DESTROYED_DEVICE_URL_PARAM) === DESTROYED_DEVICE_URL_VALUE
+  }
 }
diff --git a/app/assets/javascripts/Device/WebOrDesktopDevice.ts b/app/assets/javascripts/Device/WebOrDesktopDevice.ts
index 66c63c922..ea8758752 100644
--- a/app/assets/javascripts/Device/WebOrDesktopDevice.ts
+++ b/app/assets/javascripts/Device/WebOrDesktopDevice.ts
@@ -181,4 +181,12 @@ export abstract class WebOrDesktopDevice implements WebOrDesktopDeviceInterface
   abstract setKeychainValue(value: unknown): Promise<void>
 
   abstract clearRawKeychainValue(): Promise<void>
+
+  abstract isDeviceDestroyed(): boolean
+
+  abstract performHardReset(): Promise<void>
+
+  async performSoftReset(): Promise<void> {
+    window.location.reload()
+  }
 }
diff --git a/app/assets/javascripts/Hooks/usePremiumModal.tsx b/app/assets/javascripts/Hooks/usePremiumModal.tsx
index b817e63b4..41d496ad2 100644
--- a/app/assets/javascripts/Hooks/usePremiumModal.tsx
+++ b/app/assets/javascripts/Hooks/usePremiumModal.tsx
@@ -1,9 +1,9 @@
 import { WebApplication } from '@/UIModels/Application'
 import { AppState } from '@/UIModels/AppState'
 import { observer } from 'mobx-react-lite'
-import { FunctionalComponent } from 'preact'
-import { useContext } from 'preact/hooks'
-import { createContext } from 'react'
+import { ComponentChildren, FunctionalComponent, createContext } from 'preact'
+import { useCallback, useContext } from 'preact/hooks'
+
 import { PremiumFeaturesModal } from '@/Components/PremiumFeaturesModal'
 
 type PremiumModalContextData = {
@@ -27,33 +27,50 @@ export const usePremiumModal = (): PremiumModalContextData => {
 interface Props {
   application: WebApplication
   appState: AppState
+  children: ComponentChildren | ComponentChildren[]
 }
 
-export const PremiumModalProvider: FunctionalComponent<Props> = observer(({ application, appState, children }) => {
-  const featureName = appState.features.premiumAlertFeatureName
-  const activate = appState.features.showPremiumAlert
-  const close = appState.features.closePremiumAlert
+export const PremiumModalProvider: FunctionalComponent<Props> = observer(
+  ({ application, appState, children }: Props) => {
+    const dealloced = !appState || appState.dealloced == undefined
+    if (dealloced) {
+      return null
+    }
 
-  const showModal = !!featureName
+    const featureName = appState.features.premiumAlertFeatureName || ''
 
-  const hasSubscription = Boolean(
-    appState.subscription.userSubscription &&
-      !appState.subscription.isUserSubscriptionExpired &&
-      !appState.subscription.isUserSubscriptionCanceled,
-  )
+    const showModal = !!featureName
 
-  return (
-    <>
-      {showModal && (
-        <PremiumFeaturesModal
-          application={application}
-          featureName={featureName}
-          hasSubscription={hasSubscription}
-          onClose={close}
-          showModal={!!featureName}
-        />
-      )}
-      <PremiumModalProvider_ value={{ activate }}>{children}</PremiumModalProvider_>
-    </>
-  )
-})
+    const hasSubscription = Boolean(
+      appState.subscription.userSubscription &&
+        !appState.subscription.isUserSubscriptionExpired &&
+        !appState.subscription.isUserSubscriptionCanceled,
+    )
+
+    const activate = useCallback(
+      (feature: string) => {
+        appState.features.showPremiumAlert(feature).catch(console.error)
+      },
+      [appState],
+    )
+
+    const close = useCallback(() => {
+      appState.features.closePremiumAlert()
+    }, [appState])
+
+    return (
+      <>
+        {showModal && (
+          <PremiumFeaturesModal
+            application={application}
+            featureName={featureName}
+            hasSubscription={hasSubscription}
+            onClose={close}
+            showModal={!!featureName}
+          />
+        )}
+        <PremiumModalProvider_ value={{ activate }}>{children}</PremiumModalProvider_>
+      </>
+    )
+  },
+)
diff --git a/app/assets/javascripts/Services/IOService.ts b/app/assets/javascripts/Services/IOService.ts
index 9190ef9f9..9f79b0f93 100644
--- a/app/assets/javascripts/Services/IOService.ts
+++ b/app/assets/javascripts/Services/IOService.ts
@@ -62,6 +62,7 @@ export class IOService {
     if (!modifier) {
       return
     }
+
     switch (modifier) {
       case KeyboardModifier.Meta: {
         if (this.isMac) {
@@ -197,8 +198,10 @@ export class IOService {
 
   addKeyObserver(observer: KeyboardObserver): () => void {
     this.observers.push(observer)
+
+    const thislessObservers = this.observers
     return () => {
-      removeFromArray(this.observers, observer)
+      removeFromArray(thislessObservers, observer)
     }
   }
 }
diff --git a/app/assets/javascripts/Services/ThemeManager.ts b/app/assets/javascripts/Services/ThemeManager.ts
index ac86eab41..50a3d672f 100644
--- a/app/assets/javascripts/Services/ThemeManager.ts
+++ b/app/assets/javascripts/Services/ThemeManager.ts
@@ -38,6 +38,7 @@ export class ThemeManager extends ApplicationService {
 
   override async onAppEvent(event: ApplicationEvent) {
     super.onAppEvent(event).catch(console.error)
+
     switch (event) {
       case ApplicationEvent.SignedOut: {
         this.deactivateAllThemes()
@@ -91,6 +92,7 @@ export class ThemeManager extends ApplicationService {
     ;(this.unregisterStream as unknown) = undefined
 
     window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', this.colorSchemeEventHandler)
+
     super.deinit()
   }
 
@@ -226,6 +228,7 @@ export class ThemeManager extends ApplicationService {
 
   public deactivateAllThemes() {
     const activeThemes = this.activeThemes.slice()
+
     for (const uuid of activeThemes) {
       this.deactivateTheme(uuid)
     }
diff --git a/app/assets/javascripts/UIModels/AppState/AbstractState.ts b/app/assets/javascripts/UIModels/AppState/AbstractState.ts
new file mode 100644
index 000000000..aca9bafd8
--- /dev/null
+++ b/app/assets/javascripts/UIModels/AppState/AbstractState.ts
@@ -0,0 +1,23 @@
+import { DeinitSource } from '@standardnotes/snjs'
+import { WebApplication } from '../Application'
+
+export function isStateDealloced(state: AbstractState): boolean {
+  return state.dealloced == undefined || state.dealloced === true
+}
+
+export abstract class AbstractState {
+  application: WebApplication
+  appState?: AbstractState
+  dealloced = false
+
+  constructor(application: WebApplication, appState?: AbstractState) {
+    this.application = application
+    this.appState = appState
+  }
+
+  deinit(_source: DeinitSource): void {
+    this.dealloced = true
+    ;(this.application as unknown) = undefined
+    ;(this.appState as unknown) = undefined
+  }
+}
diff --git a/app/assets/javascripts/UIModels/AppState/AccountMenuState.ts b/app/assets/javascripts/UIModels/AppState/AccountMenuState.ts
index 5fe5b3ee1..ed0c0075b 100644
--- a/app/assets/javascripts/UIModels/AppState/AccountMenuState.ts
+++ b/app/assets/javascripts/UIModels/AppState/AccountMenuState.ts
@@ -1,8 +1,9 @@
-import { isDev } from '@/Utils'
+import { destroyAllObjectProperties, isDev } from '@/Utils'
 import { action, computed, makeObservable, observable, runInAction } from 'mobx'
-import { ApplicationEvent, ContentType, SNNote, SNTag } from '@standardnotes/snjs'
+import { ApplicationEvent, ContentType, DeinitSource, SNNote, SNTag } from '@standardnotes/snjs'
 import { WebApplication } from '@/UIModels/Application'
 import { AccountMenuPane } from '@/Components/AccountMenu'
+import { AbstractState } from './AbstractState'
 
 type StructuredItemsCount = {
   notes: number
@@ -11,7 +12,7 @@ type StructuredItemsCount = {
   archived: number
 }
 
-export class AccountMenuState {
+export class AccountMenuState extends AbstractState {
   show = false
   signingOut = false
   otherSessionsSignOut = false
@@ -26,7 +27,15 @@ export class AccountMenuState {
   shouldAnimateCloseMenu = false
   currentPane = AccountMenuPane.GeneralMenu
 
-  constructor(private application: WebApplication, private appEventListeners: (() => void)[]) {
+  override deinit(source: DeinitSource) {
+    super.deinit(source)
+    ;(this.notesAndTags as unknown) = undefined
+
+    destroyAllObjectProperties(this)
+  }
+
+  constructor(application: WebApplication, private appEventListeners: (() => void)[]) {
+    super(application)
     makeObservable(this, {
       show: observable,
       signingOut: observable,
diff --git a/app/assets/javascripts/UIModels/AppState/AppState.ts b/app/assets/javascripts/UIModels/AppState/AppState.ts
index b959e7cec..3fde70684 100644
--- a/app/assets/javascripts/UIModels/AppState/AppState.ts
+++ b/app/assets/javascripts/UIModels/AppState/AppState.ts
@@ -1,7 +1,7 @@
 import { storage, StorageKey } from '@/Services/LocalStorage'
 import { WebApplication, WebAppEvent } from '@/UIModels/Application'
 import { AccountMenuState } from '@/UIModels/AppState/AccountMenuState'
-import { isDesktopApplication } from '@/Utils'
+import { destroyAllObjectProperties, isDesktopApplication } from '@/Utils'
 import {
   ApplicationEvent,
   ContentType,
@@ -33,6 +33,7 @@ import { SubscriptionState } from './SubscriptionState'
 import { SyncState } from './SyncState'
 import { TagsState } from './TagsState'
 import { FilePreviewModalState } from './FilePreviewModalState'
+import { AbstractState } from './AbstractState'
 
 export enum AppStateEvent {
   TagChanged,
@@ -57,35 +58,34 @@ export enum EventSource {
 
 type ObserverCallback = (event: AppStateEvent, data?: any) => Promise<void>
 
-export class AppState {
+export class AppState extends AbstractState {
   readonly enableUnfinishedFeatures: boolean = window?.enabledUnfinishedFeatures
 
-  application: WebApplication
   observers: ObserverCallback[] = []
   locked = true
-  unsubApp: any
+  unsubAppEventObserver!: () => void
   webAppEventDisposer?: () => void
-  onVisibilityChange: any
+  onVisibilityChange: () => void
   showBetaWarning: boolean
 
   private multiEditorSupport = false
 
-  readonly quickSettingsMenu = new QuickSettingsState()
   readonly accountMenu: AccountMenuState
   readonly actionsMenu = new ActionsMenuState()
+  readonly features: FeaturesState
+  readonly filePreviewModal = new FilePreviewModalState()
+  readonly files: FilesState
+  readonly noAccountWarning: NoAccountWarningState
+  readonly notes: NotesState
+  readonly notesView: NotesViewState
+  readonly noteTags: NoteTagsState
   readonly preferences = new PreferencesState()
   readonly purchaseFlow: PurchaseFlowState
-  readonly noAccountWarning: NoAccountWarningState
-  readonly noteTags: NoteTagsState
-  readonly sync = new SyncState()
+  readonly quickSettingsMenu = new QuickSettingsState()
   readonly searchOptions: SearchOptionsState
-  readonly notes: NotesState
-  readonly features: FeaturesState
-  readonly tags: TagsState
-  readonly notesView: NotesViewState
   readonly subscription: SubscriptionState
-  readonly files: FilesState
-  readonly filePreviewModal = new FilePreviewModalState()
+  readonly sync = new SyncState()
+  readonly tags: TagsState
 
   isSessionsModalVisible = false
 
@@ -94,7 +94,8 @@ export class AppState {
   private readonly tagChangedDisposer: IReactionDisposer
 
   constructor(application: WebApplication, private device: WebOrDesktopDeviceInterface) {
-    this.application = application
+    super(application)
+
     this.notes = new NotesState(
       application,
       this,
@@ -103,6 +104,7 @@ export class AppState {
       },
       this.appEventObserverRemovers,
     )
+
     this.noteTags = new NoteTagsState(application, this, this.appEventObserverRemovers)
     this.features = new FeaturesState(application, this.appEventObserverRemovers)
     this.tags = new TagsState(application, this.appEventObserverRemovers, this.features)
@@ -144,41 +146,72 @@ export class AppState {
     this.tagChangedDisposer = this.tagChangedNotifier()
   }
 
-  deinit(source: DeinitSource): void {
+  override deinit(source: DeinitSource): void {
+    super.deinit(source)
+
     if (source === DeinitSource.SignOut) {
       storage.remove(StorageKey.ShowBetaWarning)
       this.noAccountWarning.reset()
     }
-    ;(this.application as unknown) = undefined
-    this.actionsMenu.reset()
-    this.unsubApp?.()
-    this.unsubApp = undefined
+
+    this.unsubAppEventObserver?.()
+    ;(this.unsubAppEventObserver as unknown) = undefined
     this.observers.length = 0
 
     this.appEventObserverRemovers.forEach((remover) => remover())
     this.appEventObserverRemovers.length = 0
-    ;(this.features as unknown) = undefined
+    ;(this.device as unknown) = undefined
 
     this.webAppEventDisposer?.()
     this.webAppEventDisposer = undefined
-    ;(this.quickSettingsMenu as unknown) = undefined
-    ;(this.accountMenu as unknown) = undefined
-    ;(this.actionsMenu as unknown) = undefined
+    ;(this.filePreviewModal as unknown) = undefined
     ;(this.preferences as unknown) = undefined
-    ;(this.purchaseFlow as unknown) = undefined
-    ;(this.noteTags as unknown) = undefined
+    ;(this.quickSettingsMenu as unknown) = undefined
     ;(this.sync as unknown) = undefined
-    ;(this.searchOptions as unknown) = undefined
-    ;(this.notes as unknown) = undefined
+
+    this.actionsMenu.reset()
+    ;(this.actionsMenu as unknown) = undefined
+
+    this.features.deinit(source)
     ;(this.features as unknown) = undefined
-    ;(this.tags as unknown) = undefined
+
+    this.accountMenu.deinit(source)
+    ;(this.accountMenu as unknown) = undefined
+
+    this.files.deinit(source)
+    ;(this.files as unknown) = undefined
+
+    this.noAccountWarning.deinit(source)
+    ;(this.noAccountWarning as unknown) = undefined
+
+    this.notes.deinit(source)
+    ;(this.notes as unknown) = undefined
+
+    this.notesView.deinit(source)
     ;(this.notesView as unknown) = undefined
 
+    this.noteTags.deinit(source)
+    ;(this.noteTags as unknown) = undefined
+
+    this.purchaseFlow.deinit(source)
+    ;(this.purchaseFlow as unknown) = undefined
+
+    this.searchOptions.deinit(source)
+    ;(this.searchOptions as unknown) = undefined
+
+    this.subscription.deinit(source)
+    ;(this.subscription as unknown) = undefined
+
+    this.tags.deinit(source)
+    ;(this.tags as unknown) = undefined
+
     document.removeEventListener('visibilitychange', this.onVisibilityChange)
-    this.onVisibilityChange = undefined
+    ;(this.onVisibilityChange as unknown) = undefined
 
     this.tagChangedDisposer()
     ;(this.tagChangedDisposer as unknown) = undefined
+
+    destroyAllObjectProperties(this)
   }
 
   openSessionsModal(): void {
@@ -333,7 +366,7 @@ export class AppState {
   }
 
   addAppEventObserver() {
-    this.unsubApp = this.application.addEventObserver(async (eventName) => {
+    this.unsubAppEventObserver = this.application.addEventObserver(async (eventName) => {
       switch (eventName) {
         case ApplicationEvent.Started:
           this.locked = true
@@ -370,11 +403,12 @@ export class AppState {
     }
   }
 
-  /** @returns  A function that unregisters this observer */
-  addObserver(callback: ObserverCallback) {
+  addObserver(callback: ObserverCallback): () => void {
     this.observers.push(callback)
+
+    const thislessObservers = this.observers
     return () => {
-      removeFromArray(this.observers, callback)
+      removeFromArray(thislessObservers, callback)
     }
   }
 
diff --git a/app/assets/javascripts/UIModels/AppState/FeaturesState.ts b/app/assets/javascripts/UIModels/AppState/FeaturesState.ts
index f8b06bf2f..78b0567b5 100644
--- a/app/assets/javascripts/UIModels/AppState/FeaturesState.ts
+++ b/app/assets/javascripts/UIModels/AppState/FeaturesState.ts
@@ -1,14 +1,30 @@
 import { WebApplication } from '@/UIModels/Application'
-import { ApplicationEvent, FeatureIdentifier, FeatureStatus } from '@standardnotes/snjs'
+import { destroyAllObjectProperties } from '@/Utils'
+import { ApplicationEvent, DeinitSource, FeatureIdentifier, FeatureStatus } from '@standardnotes/snjs'
 import { action, makeObservable, observable, runInAction, when } from 'mobx'
+import { AbstractState } from './AbstractState'
 
-export class FeaturesState {
+export class FeaturesState extends AbstractState {
   hasFolders: boolean
   hasSmartViews: boolean
   hasFiles: boolean
   premiumAlertFeatureName: string | undefined
 
-  constructor(private application: WebApplication, appObservers: (() => void)[]) {
+  override deinit(source: DeinitSource) {
+    super.deinit(source)
+    ;(this.showPremiumAlert as unknown) = undefined
+    ;(this.closePremiumAlert as unknown) = undefined
+    ;(this.hasFolders as unknown) = undefined
+    ;(this.hasSmartViews as unknown) = undefined
+    ;(this.hasFiles as unknown) = undefined
+    ;(this.premiumAlertFeatureName as unknown) = undefined
+
+    destroyAllObjectProperties(this)
+  }
+
+  constructor(application: WebApplication, appObservers: (() => void)[]) {
+    super(application)
+
     this.hasFolders = this.isEntitledToFolders()
     this.hasSmartViews = this.isEntitledToSmartViews()
     this.hasFiles = this.isEntitledToFiles()
diff --git a/app/assets/javascripts/UIModels/AppState/FilePreviewModalState.ts b/app/assets/javascripts/UIModels/AppState/FilePreviewModalState.ts
index 44cd7635f..6a92dc807 100644
--- a/app/assets/javascripts/UIModels/AppState/FilePreviewModalState.ts
+++ b/app/assets/javascripts/UIModels/AppState/FilePreviewModalState.ts
@@ -1,10 +1,10 @@
-import { SNFile } from '@standardnotes/snjs/dist/@types'
+import { FileItem } from '@standardnotes/snjs'
 import { action, makeObservable, observable } from 'mobx'
 
 export class FilePreviewModalState {
   isOpen = false
-  currentFile: SNFile | undefined = undefined
-  otherFiles: SNFile[] = []
+  currentFile: FileItem | undefined = undefined
+  otherFiles: FileItem[] = []
 
   constructor() {
     makeObservable(this, {
@@ -18,11 +18,11 @@ export class FilePreviewModalState {
     })
   }
 
-  setCurrentFile = (currentFile: SNFile) => {
+  setCurrentFile = (currentFile: FileItem) => {
     this.currentFile = currentFile
   }
 
-  activate = (currentFile: SNFile, otherFiles: SNFile[]) => {
+  activate = (currentFile: FileItem, otherFiles: FileItem[]) => {
     this.currentFile = currentFile
     this.otherFiles = otherFiles
     this.isOpen = true
diff --git a/app/assets/javascripts/UIModels/AppState/FilesState.ts b/app/assets/javascripts/UIModels/AppState/FilesState.ts
index ddf6bda05..9c859cd96 100644
--- a/app/assets/javascripts/UIModels/AppState/FilesState.ts
+++ b/app/assets/javascripts/UIModels/AppState/FilesState.ts
@@ -7,14 +7,12 @@ import {
   ClassicFileSaver,
   parseFileName,
 } from '@standardnotes/filepicker'
-import { ClientDisplayableError, SNFile } from '@standardnotes/snjs'
+import { ClientDisplayableError, FileItem } from '@standardnotes/snjs'
 import { addToast, dismissToast, ToastType, updateToast } from '@standardnotes/stylekit'
-import { WebApplication } from '../Application'
+import { AbstractState } from './AbstractState'
 
-export class FilesState {
-  constructor(private application: WebApplication) {}
-
-  public async downloadFile(file: SNFile): Promise<void> {
+export class FilesState extends AbstractState {
+  public async downloadFile(file: FileItem): Promise<void> {
     let downloadingToastId = ''
 
     try {
@@ -102,7 +100,7 @@ export class FilesState {
         return
       }
 
-      const uploadedFiles: SNFile[] = []
+      const uploadedFiles: FileItem[] = []
 
       for (const file of selectedFiles) {
         if (!shouldUseStreamingReader && maxFileSize && file.size >= maxFileSize) {
diff --git a/app/assets/javascripts/UIModels/AppState/NoAccountWarningState.ts b/app/assets/javascripts/UIModels/AppState/NoAccountWarningState.ts
index 183b41309..0f4cffd92 100644
--- a/app/assets/javascripts/UIModels/AppState/NoAccountWarningState.ts
+++ b/app/assets/javascripts/UIModels/AppState/NoAccountWarningState.ts
@@ -1,10 +1,15 @@
 import { storage, StorageKey } from '@/Services/LocalStorage'
-import { SNApplication, ApplicationEvent } from '@standardnotes/snjs'
+import { ApplicationEvent } from '@standardnotes/snjs'
 import { runInAction, makeObservable, observable, action } from 'mobx'
+import { WebApplication } from '../Application'
+import { AbstractState } from './AbstractState'
 
-export class NoAccountWarningState {
+export class NoAccountWarningState extends AbstractState {
   show: boolean
-  constructor(application: SNApplication, appObservers: (() => void)[]) {
+
+  constructor(application: WebApplication, appObservers: (() => void)[]) {
+    super(application)
+
     this.show = application.hasAccount() ? false : storage.get(StorageKey.ShowNoAccountWarning) ?? true
 
     appObservers.push(
diff --git a/app/assets/javascripts/UIModels/AppState/NoteTagsState.ts b/app/assets/javascripts/UIModels/AppState/NoteTagsState.ts
index 7daba47b4..fb0393687 100644
--- a/app/assets/javascripts/UIModels/AppState/NoteTagsState.ts
+++ b/app/assets/javascripts/UIModels/AppState/NoteTagsState.ts
@@ -1,10 +1,12 @@
 import { ElementIds } from '@/ElementIDs'
-import { ApplicationEvent, ContentType, PrefKey, SNNote, SNTag, UuidString } from '@standardnotes/snjs'
+import { destroyAllObjectProperties } from '@/Utils'
+import { ApplicationEvent, ContentType, DeinitSource, PrefKey, SNNote, SNTag, UuidString } from '@standardnotes/snjs'
 import { action, computed, makeObservable, observable } from 'mobx'
 import { WebApplication } from '../Application'
+import { AbstractState } from './AbstractState'
 import { AppState } from './AppState'
 
-export class NoteTagsState {
+export class NoteTagsState extends AbstractState {
   autocompleteInputFocused = false
   autocompleteSearchQuery = ''
   autocompleteTagHintFocused = false
@@ -15,7 +17,17 @@ export class NoteTagsState {
   tagsContainerMaxWidth: number | 'auto' = 0
   addNoteToParentFolders: boolean
 
-  constructor(private application: WebApplication, private appState: AppState, appEventListeners: (() => void)[]) {
+  override deinit(source: DeinitSource) {
+    super.deinit(source)
+    ;(this.tags as unknown) = undefined
+    ;(this.autocompleteTagResults as unknown) = undefined
+
+    destroyAllObjectProperties(this)
+  }
+
+  constructor(application: WebApplication, override appState: AppState, appEventListeners: (() => void)[]) {
+    super(application, appState)
+
     makeObservable(this, {
       autocompleteInputFocused: observable,
       autocompleteSearchQuery: observable,
diff --git a/app/assets/javascripts/UIModels/AppState/NotesState.ts b/app/assets/javascripts/UIModels/AppState/NotesState.ts
index 7ab1ce379..13988a892 100644
--- a/app/assets/javascripts/UIModels/AppState/NotesState.ts
+++ b/app/assets/javascripts/UIModels/AppState/NotesState.ts
@@ -1,3 +1,4 @@
+import { destroyAllObjectProperties } from '@/Utils'
 import { confirmDialog } from '@/Services/AlertService'
 import { KeyboardModifier } from '@/Services/IOService'
 import { StringEmptyTrash, Strings, StringUtils } from '@/Strings'
@@ -10,12 +11,14 @@ import {
   SNTag,
   ChallengeReason,
   NoteViewController,
+  DeinitSource,
 } from '@standardnotes/snjs'
 import { makeObservable, observable, action, computed, runInAction } from 'mobx'
 import { WebApplication } from '../Application'
 import { AppState } from './AppState'
+import { AbstractState } from './AbstractState'
 
-export class NotesState {
+export class NotesState extends AbstractState {
   lastSelectedNote: SNNote | undefined
   selectedNotes: Record<UuidString, SNNote> = {}
   contextMenuOpen = false
@@ -28,12 +31,23 @@ export class NotesState {
   showProtectedWarning = false
   showRevisionHistoryModal = false
 
+  override deinit(source: DeinitSource) {
+    super.deinit(source)
+    ;(this.lastSelectedNote as unknown) = undefined
+    ;(this.selectedNotes as unknown) = undefined
+    ;(this.onActiveEditorChanged as unknown) = undefined
+
+    destroyAllObjectProperties(this)
+  }
+
   constructor(
-    private application: WebApplication,
-    private appState: AppState,
+    application: WebApplication,
+    public override appState: AppState,
     private onActiveEditorChanged: () => Promise<void>,
     appEventListeners: (() => void)[],
   ) {
+    super(application, appState)
+
     makeObservable(this, {
       selectedNotes: observable,
       contextMenuOpen: observable,
@@ -75,6 +89,10 @@ export class NotesState {
   }
 
   get selectedNotesCount(): number {
+    if (this.dealloced) {
+      return 0
+    }
+
     return Object.keys(this.selectedNotes).length
   }
 
diff --git a/app/assets/javascripts/UIModels/AppState/NotesViewState.ts b/app/assets/javascripts/UIModels/AppState/NotesViewState.ts
index 88e661b40..d71e4e9ef 100644
--- a/app/assets/javascripts/UIModels/AppState/NotesViewState.ts
+++ b/app/assets/javascripts/UIModels/AppState/NotesViewState.ts
@@ -1,8 +1,10 @@
+import { destroyAllObjectProperties } from '@/Utils'
 import {
   ApplicationEvent,
   CollectionSort,
   CollectionSortProperty,
   ContentType,
+  DeinitSource,
   findInArray,
   NotesDisplayCriteria,
   PrefKey,
@@ -15,6 +17,7 @@ import {
 import { action, autorun, computed, makeObservable, observable, reaction } from 'mobx'
 import { AppState, AppStateEvent } from '.'
 import { WebApplication } from '../Application'
+import { AbstractState } from './AbstractState'
 
 const MIN_NOTE_CELL_HEIGHT = 51.0
 const DEFAULT_LIST_NUM_NOTES = 20
@@ -34,7 +37,7 @@ export type DisplayOptions = {
   hideEditorIcon: boolean
 }
 
-export class NotesViewState {
+export class NotesViewState extends AbstractState {
   completedFullSync = false
   noteFilterText = ''
   notes: SNNote[] = []
@@ -59,22 +62,34 @@ export class NotesViewState {
     hideEditorIcon: false,
   }
 
-  constructor(private application: WebApplication, private appState: AppState, appObservers: (() => void)[]) {
+  override deinit(source: DeinitSource) {
+    super.deinit(source)
+    ;(this.noteFilterText as unknown) = undefined
+    ;(this.notes as unknown) = undefined
+    ;(this.renderedNotes as unknown) = undefined
+    ;(this.selectedNotes as unknown) = undefined
+    ;(window.onresize as unknown) = undefined
+
+    destroyAllObjectProperties(this)
+  }
+
+  constructor(application: WebApplication, override appState: AppState, appObservers: (() => void)[]) {
+    super(application, appState)
+
     this.resetPagination()
 
     appObservers.push(
       application.streamItems<SNNote>(ContentType.Note, () => {
         this.reloadNotes()
 
-        const activeNote = this.appState.notes.activeNoteController?.note
+        const activeNote = appState.notes.activeNoteController?.note
 
-        if (this.application.getAppState().notes.selectedNotesCount < 2) {
+        if (appState.notes.selectedNotesCount < 2) {
           if (activeNote) {
             const browsingTrashedNotes =
-              this.appState.selectedTag instanceof SmartView &&
-              this.appState.selectedTag?.uuid === SystemViewId.TrashedNotes
+              appState.selectedTag instanceof SmartView && appState.selectedTag?.uuid === SystemViewId.TrashedNotes
 
-            if (activeNote.trashed && !browsingTrashedNotes && !this.appState?.searchOptions.includeTrashed) {
+            if (activeNote.trashed && !browsingTrashedNotes && !appState?.searchOptions.includeTrashed) {
               this.selectNextOrCreateNew()
             } else if (!this.selectedNotes[activeNote.uuid]) {
               this.selectNote(activeNote).catch(console.error)
@@ -91,7 +106,7 @@ export class NotesViewState {
         this.reloadNotesDisplayOptions()
         this.reloadNotes()
 
-        if (this.appState.selectedTag && findInArray(tags, 'uuid', this.appState.selectedTag.uuid)) {
+        if (appState.selectedTag && findInArray(tags, 'uuid', appState.selectedTag.uuid)) {
           /** Tag title could have changed */
           this.reloadPanelTitle()
         }
@@ -100,7 +115,7 @@ export class NotesViewState {
         this.reloadPreferences()
       }, ApplicationEvent.PreferencesChanged),
       application.addEventObserver(async () => {
-        this.appState.closeAllNoteControllers()
+        appState.closeAllNoteControllers()
         this.selectFirstNote()
         this.setCompletedFullSync(false)
       }, ApplicationEvent.SignedIn),
@@ -108,20 +123,22 @@ export class NotesViewState {
         this.reloadNotes()
         if (
           this.notes.length === 0 &&
-          this.appState.selectedTag instanceof SmartView &&
-          this.appState.selectedTag.uuid === SystemViewId.AllNotes &&
+          appState.selectedTag instanceof SmartView &&
+          appState.selectedTag.uuid === SystemViewId.AllNotes &&
           this.noteFilterText === '' &&
-          !this.appState.notes.activeNoteController
+          !appState.notes.activeNoteController
         ) {
           this.createPlaceholderNote()?.catch(console.error)
         }
         this.setCompletedFullSync(true)
       }, ApplicationEvent.CompletedFullSync),
+
       autorun(() => {
         if (appState.notes.selectedNotes) {
           this.syncSelectedNotes()
         }
       }),
+
       reaction(
         () => [
           appState.searchOptions.includeProtectedContents,
@@ -133,6 +150,7 @@ export class NotesViewState {
           this.reloadNotes()
         },
       ),
+
       appState.addObserver(async (eventName) => {
         if (eventName === AppStateEvent.TagChanged) {
           this.handleTagChange()
@@ -414,6 +432,7 @@ export class NotesViewState {
 
   selectPreviousNote = () => {
     const displayableNotes = this.notes
+
     if (this.activeEditorNote) {
       const currentIndex = displayableNotes.indexOf(this.activeEditorNote)
       if (currentIndex - 1 >= 0) {
@@ -426,11 +445,13 @@ export class NotesViewState {
         return false
       }
     }
+
     return undefined
   }
 
   setNoteFilterText = (text: string) => {
     this.noteFilterText = text
+    this.handleFilterTextChanged()
   }
 
   syncSelectedNotes = () => {
diff --git a/app/assets/javascripts/UIModels/AppState/PurchaseFlowState.ts b/app/assets/javascripts/UIModels/AppState/PurchaseFlowState.ts
index 5008ab2ff..e2a625b95 100644
--- a/app/assets/javascripts/UIModels/AppState/PurchaseFlowState.ts
+++ b/app/assets/javascripts/UIModels/AppState/PurchaseFlowState.ts
@@ -1,17 +1,20 @@
 import { loadPurchaseFlowUrl } from '@/Components/PurchaseFlow/PurchaseFlowWrapper'
 import { action, makeObservable, observable } from 'mobx'
 import { WebApplication } from '../Application'
+import { AbstractState } from './AbstractState'
 
 export enum PurchaseFlowPane {
   SignIn,
   CreateAccount,
 }
 
-export class PurchaseFlowState {
+export class PurchaseFlowState extends AbstractState {
   isOpen = false
   currentPane = PurchaseFlowPane.CreateAccount
 
-  constructor(private application: WebApplication) {
+  constructor(application: WebApplication) {
+    super(application)
+
     makeObservable(this, {
       isOpen: observable,
       currentPane: observable,
diff --git a/app/assets/javascripts/UIModels/AppState/SearchOptionsState.ts b/app/assets/javascripts/UIModels/AppState/SearchOptionsState.ts
index 9af20e472..aee41ccff 100644
--- a/app/assets/javascripts/UIModels/AppState/SearchOptionsState.ts
+++ b/app/assets/javascripts/UIModels/AppState/SearchOptionsState.ts
@@ -1,13 +1,16 @@
 import { ApplicationEvent } from '@standardnotes/snjs'
 import { makeObservable, observable, action, runInAction } from 'mobx'
 import { WebApplication } from '../Application'
+import { AbstractState } from './AbstractState'
 
-export class SearchOptionsState {
+export class SearchOptionsState extends AbstractState {
   includeProtectedContents = false
   includeArchived = false
   includeTrashed = false
 
-  constructor(private application: WebApplication, appObservers: (() => void)[]) {
+  constructor(application: WebApplication, appObservers: (() => void)[]) {
+    super(application)
+
     makeObservable(this, {
       includeProtectedContents: observable,
       includeTrashed: observable,
diff --git a/app/assets/javascripts/UIModels/AppState/SubscriptionState.ts b/app/assets/javascripts/UIModels/AppState/SubscriptionState.ts
index f6fa5b6b6..0b94f24e3 100644
--- a/app/assets/javascripts/UIModels/AppState/SubscriptionState.ts
+++ b/app/assets/javascripts/UIModels/AppState/SubscriptionState.ts
@@ -1,6 +1,13 @@
-import { ApplicationEvent, ClientDisplayableError, convertTimestampToMilliseconds } from '@standardnotes/snjs'
+import { destroyAllObjectProperties } from '@/Utils'
+import {
+  ApplicationEvent,
+  ClientDisplayableError,
+  convertTimestampToMilliseconds,
+  DeinitSource,
+} from '@standardnotes/snjs'
 import { action, computed, makeObservable, observable } from 'mobx'
 import { WebApplication } from '../Application'
+import { AbstractState } from './AbstractState'
 
 type Subscription = {
   planName: string
@@ -14,11 +21,21 @@ type AvailableSubscriptions = {
   }
 }
 
-export class SubscriptionState {
+export class SubscriptionState extends AbstractState {
   userSubscription: Subscription | undefined = undefined
   availableSubscriptions: AvailableSubscriptions | undefined = undefined
 
-  constructor(private application: WebApplication, appObservers: (() => void)[]) {
+  override deinit(source: DeinitSource) {
+    super.deinit(source)
+    ;(this.userSubscription as unknown) = undefined
+    ;(this.availableSubscriptions as unknown) = undefined
+
+    destroyAllObjectProperties(this)
+  }
+
+  constructor(application: WebApplication, appObservers: (() => void)[]) {
+    super(application)
+
     makeObservable(this, {
       userSubscription: observable,
       availableSubscriptions: observable,
diff --git a/app/assets/javascripts/UIModels/AppState/TagsState.ts b/app/assets/javascripts/UIModels/AppState/TagsState.ts
index de089a454..fff5bf2a9 100644
--- a/app/assets/javascripts/UIModels/AppState/TagsState.ts
+++ b/app/assets/javascripts/UIModels/AppState/TagsState.ts
@@ -12,10 +12,13 @@ import {
   UuidString,
   isSystemView,
   FindItem,
+  DeinitSource,
 } from '@standardnotes/snjs'
 import { action, computed, makeAutoObservable, makeObservable, observable, runInAction } from 'mobx'
 import { WebApplication } from '../Application'
 import { FeaturesState } from './FeaturesState'
+import { AbstractState } from './AbstractState'
+import { destroyAllObjectProperties } from '@/Utils'
 
 type AnyTag = SNTag | SmartView
 
@@ -56,7 +59,7 @@ const isValidFutureSiblings = (application: SNApplication, futureSiblings: SNTag
   return true
 }
 
-export class TagsState {
+export class TagsState extends AbstractState {
   tags: SNTag[] = []
   smartViews: SmartView[] = []
   allNotesCount_ = 0
@@ -75,7 +78,9 @@ export class TagsState {
 
   private readonly tagsCountsState: TagsCountsState
 
-  constructor(private application: WebApplication, appEventListeners: (() => void)[], private features: FeaturesState) {
+  constructor(application: WebApplication, appEventListeners: (() => void)[], private features: FeaturesState) {
+    super(application)
+
     this.tagsCountsState = new TagsCountsState(this.application)
 
     this.selected_ = undefined
@@ -164,6 +169,19 @@ export class TagsState {
     )
   }
 
+  override deinit(source: DeinitSource) {
+    super.deinit(source)
+    ;(this.features as unknown) = undefined
+    ;(this.tags as unknown) = undefined
+    ;(this.smartViews as unknown) = undefined
+    ;(this.selected_ as unknown) = undefined
+    ;(this.previouslySelected_ as unknown) = undefined
+    ;(this.editing_ as unknown) = undefined
+    ;(this.addingSubtagTo as unknown) = undefined
+
+    destroyAllObjectProperties(this)
+  }
+
   async createSubtagAndAssignParent(parent: SNTag, title: string) {
     const hasEmptyTitle = title.length === 0
 
diff --git a/app/assets/javascripts/UIModels/Application.ts b/app/assets/javascripts/UIModels/Application.ts
index 8fef1e5ec..defd3d991 100644
--- a/app/assets/javascripts/UIModels/Application.ts
+++ b/app/assets/javascripts/UIModels/Application.ts
@@ -17,6 +17,7 @@ import {
   Runtime,
   DesktopDeviceInterface,
   isDesktopDevice,
+  DeinitMode,
 } from '@standardnotes/snjs'
 
 type WebServices = {
@@ -68,13 +69,10 @@ export class WebApplication extends SNApplication {
     this.iconsController = new IconsController()
   }
 
-  override deinit(source: DeinitSource): void {
-    super.deinit(source)
-    try {
-      if (source === DeinitSource.AppGroupUnload) {
-        this.getThemeService().deactivateAllThemes()
-      }
+  override deinit(mode: DeinitMode, source: DeinitSource): void {
+    super.deinit(mode, source)
 
+    try {
       for (const service of Object.values(this.webServices)) {
         if (!service) {
           continue
@@ -88,7 +86,10 @@ export class WebApplication extends SNApplication {
       }
 
       this.webServices = {} as WebServices
+
       this.noteControllerGroup.deinit()
+      ;(this.noteControllerGroup as unknown) = undefined
+
       this.webEventObservers.length = 0
     } catch (error) {
       console.error('Error while deiniting application', error)
diff --git a/app/assets/javascripts/UIModels/ApplicationGroup.ts b/app/assets/javascripts/UIModels/ApplicationGroup.ts
index 036bee6ab..0ac07bca8 100644
--- a/app/assets/javascripts/UIModels/ApplicationGroup.ts
+++ b/app/assets/javascripts/UIModels/ApplicationGroup.ts
@@ -16,10 +16,47 @@ import { AutolockService } from '@/Services/AutolockService'
 import { ThemeManager } from '@/Services/ThemeManager'
 import { WebOrDesktopDevice } from '@/Device/WebOrDesktopDevice'
 
+const createApplication = (
+  descriptor: ApplicationDescriptor,
+  deviceInterface: WebOrDesktopDevice,
+  defaultSyncServerHost: string,
+  device: WebOrDesktopDevice,
+  runtime: Runtime,
+  webSocketUrl: string,
+) => {
+  const platform = getPlatform()
+
+  const application = new WebApplication(
+    deviceInterface,
+    platform,
+    descriptor.identifier,
+    defaultSyncServerHost,
+    webSocketUrl,
+    runtime,
+  )
+
+  const appState = new AppState(application, device)
+  const archiveService = new ArchiveManager(application)
+  const io = new IOService(platform === Platform.MacWeb || platform === Platform.MacDesktop)
+  const autolockService = new AutolockService(application, new InternalEventBus())
+  const themeService = new ThemeManager(application)
+
+  application.setWebServices({
+    appState,
+    archiveService,
+    desktopService: isDesktopDevice(device) ? new DesktopManager(application, device) : undefined,
+    io,
+    autolockService,
+    themeService,
+  })
+
+  return application
+}
+
 export class ApplicationGroup extends SNApplicationGroup<WebOrDesktopDevice> {
   constructor(
     private defaultSyncServerHost: string,
-    private device: WebOrDesktopDevice,
+    device: WebOrDesktopDevice,
     private runtime: Runtime,
     private webSocketUrl: string,
   ) {
@@ -27,8 +64,14 @@ export class ApplicationGroup extends SNApplicationGroup<WebOrDesktopDevice> {
   }
 
   override async initialize(): Promise<void> {
+    const defaultSyncServerHost = this.defaultSyncServerHost
+    const runtime = this.runtime
+    const webSocketUrl = this.webSocketUrl
+
     await super.initialize({
-      applicationCreator: this.createApplication,
+      applicationCreator: async (descriptor, device) => {
+        return createApplication(descriptor, device, defaultSyncServerHost, device, runtime, webSocketUrl)
+      },
     })
 
     if (isDesktopApplication()) {
@@ -38,37 +81,15 @@ export class ApplicationGroup extends SNApplicationGroup<WebOrDesktopDevice> {
     }
   }
 
-  override handleAllWorkspacesSignedOut(): void {
-    isDesktopDevice(this.deviceInterface) && this.deviceInterface.destroyAllData()
+  override deinit() {
+    super.deinit()
+
+    if (isDesktopApplication()) {
+      delete window.webClient
+    }
   }
 
-  private createApplication = (descriptor: ApplicationDescriptor, deviceInterface: WebOrDesktopDevice) => {
-    const platform = getPlatform()
-
-    const application = new WebApplication(
-      deviceInterface,
-      platform,
-      descriptor.identifier,
-      this.defaultSyncServerHost,
-      this.webSocketUrl,
-      this.runtime,
-    )
-
-    const appState = new AppState(application, this.device)
-    const archiveService = new ArchiveManager(application)
-    const io = new IOService(platform === Platform.MacWeb || platform === Platform.MacDesktop)
-    const autolockService = new AutolockService(application, new InternalEventBus())
-    const themeService = new ThemeManager(application)
-
-    application.setWebServices({
-      appState,
-      archiveService,
-      desktopService: isDesktopDevice(this.device) ? new DesktopManager(application, this.device) : undefined,
-      io,
-      autolockService,
-      themeService,
-    })
-
-    return application
+  override handleAllWorkspacesSignedOut(): void {
+    isDesktopDevice(this.device) && this.device.destroyAllData()
   }
 }
diff --git a/app/assets/javascripts/Utils/DragTypeCheck.tsx b/app/assets/javascripts/Utils/DragTypeCheck.ts
similarity index 52%
rename from app/assets/javascripts/Utils/DragTypeCheck.tsx
rename to app/assets/javascripts/Utils/DragTypeCheck.ts
index 4ed350455..adf8b4ad3 100644
--- a/app/assets/javascripts/Utils/DragTypeCheck.tsx
+++ b/app/assets/javascripts/Utils/DragTypeCheck.ts
@@ -1,5 +1,11 @@
 import { WebApplication } from '@/UIModels/Application'
 
+const isBackupRelatedFile = (item: DataTransferItem, application: WebApplication): boolean => {
+  const fileName = item.getAsFile()?.name || ''
+  const isBackupMetadataFile = application.files.isFileNameFileBackupRelated(fileName) !== false
+  return isBackupMetadataFile
+}
+
 export const isHandlingFileDrag = (event: DragEvent, application: WebApplication) => {
   const items = event.dataTransfer?.items
 
@@ -8,10 +14,7 @@ export const isHandlingFileDrag = (event: DragEvent, application: WebApplication
   }
 
   return Array.from(items).some((item) => {
-    const isFile = item.kind === 'file'
-    const fileName = item.getAsFile()?.name || ''
-    const isBackupMetadataFile = application.files.isFileNameFileBackupMetadataFile(fileName)
-    return isFile && !isBackupMetadataFile
+    return item.kind === 'file' && !isBackupRelatedFile(item, application)
   })
 }
 
@@ -23,9 +26,6 @@ export const isHandlingBackupDrag = (event: DragEvent, application: WebApplicati
   }
 
   return Array.from(items).every((item) => {
-    const isFile = item.kind === 'file'
-    const fileName = item.getAsFile()?.name || ''
-    const isBackupMetadataFile = application.files.isFileNameFileBackupMetadataFile(fileName)
-    return isFile && isBackupMetadataFile
+    return item.kind === 'file' && isBackupRelatedFile(item, application)
   })
 }
diff --git a/app/assets/javascripts/Utils/PreactUtils.ts b/app/assets/javascripts/Utils/PreactUtils.ts
new file mode 100644
index 000000000..20bf725be
--- /dev/null
+++ b/app/assets/javascripts/Utils/PreactUtils.ts
@@ -0,0 +1,10 @@
+import { render } from 'preact'
+
+/**
+ * Source: https://stackoverflow.com/questions/50946950/how-to-destroy-root-preact-node
+ * For some reason importing `import { unmountComponentAtNode } from 'preact/compat'` inside of app/index.tsx
+ * results in the app failing to compile.
+ */
+export function unmountComponentAtRoot(root: HTMLElement) {
+  render(null, root)
+}
diff --git a/app/assets/javascripts/Utils/Utils.ts b/app/assets/javascripts/Utils/Utils.ts
index 3f14170b9..603992ab7 100644
--- a/app/assets/javascripts/Utils/Utils.ts
+++ b/app/assets/javascripts/Utils/Utils.ts
@@ -134,6 +134,16 @@ if (!IsWebPlatform && !IsDesktopPlatform) {
   throw Error('Neither __WEB__ nor __DESKTOP__ is true. Check your configuration files.')
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function destroyAllObjectProperties(object: any): void {
+  for (const prop of Object.getOwnPropertyNames(object)) {
+    try {
+      delete object[prop]
+      // eslint-disable-next-line no-empty
+    } catch (error) {}
+  }
+}
+
 export function isDesktopApplication() {
   return IsDesktopPlatform
 }
diff --git a/app/assets/javascripts/tsconfig.json b/app/assets/javascripts/tsconfig.json
index cedc7fc58..8a5ac4bce 100644
--- a/app/assets/javascripts/tsconfig.json
+++ b/app/assets/javascripts/tsconfig.json
@@ -26,4 +26,4 @@
       "@node_modules/*": ["../../../node_modules/*"]
     }
   }
-}
+}
\ No newline at end of file
diff --git a/app/assets/svg/il-history-locked.svg b/app/assets/svg/il-history-locked.svg
deleted file mode 100644
index d9a69b188..000000000
--- a/app/assets/svg/il-history-locked.svg
+++ /dev/null
@@ -1,26 +0,0 @@
-<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="60" cy="60" r="60" fill="#F4F5F7" />
-  <g filter="url(#filter0_d_39_37)">
-    <path
-      d="M78.75 45.3333C80.4076 45.3333 81.9973 45.9755 83.1694 47.1186C84.3415 48.2617 85 49.812 85 51.4286V81.9048C85 83.5213 84.3415 85.0717 83.1694 86.2147C81.9973 87.3578 80.4076 88 78.75 88H41.25C39.5924 88 38.0027 87.3578 36.8306 86.2147C35.6585 85.0717 35 83.5213 35 81.9048V51.4286C35 48.0457 37.8125 45.3333 41.25 45.3333H44.375V39.2381C44.375 35.1967 46.0212 31.3208 48.9515 28.4631C51.8817 25.6054 55.856 24 60 24C62.0519 24 64.0837 24.3941 65.9794 25.1599C67.8751 25.9257 69.5976 27.0481 71.0485 28.4631C72.4995 29.8781 73.6504 31.558 74.4356 33.4067C75.2208 35.2555 75.625 37.237 75.625 39.2381V45.3333H78.75ZM60 30.0952C57.5136 30.0952 55.129 31.0585 53.3709 32.7731C51.6127 34.4877 50.625 36.8133 50.625 39.2381V45.3333H69.375V39.2381C69.375 36.8133 68.3873 34.4877 66.6291 32.7731C64.871 31.0585 62.4864 30.0952 60 30.0952Z"
-      fill="white" />
-  </g>
-  <path d="M61.0714 61.3889H59.1428V67.7778L64.6457 71.0234L65.5714 69.4772L61.0714 66.8195V61.3889Z" fill="#BBBEC4"
-    stroke="#BBBEC4" stroke-width="2" />
-  <path
-    d="M60.8571 52C57.1062 52 53.5089 53.5277 50.8566 56.247C48.2043 58.9662 46.7143 62.6544 46.7143 66.5H42L48.2229 72.9928L54.5714 66.5H49.8571C49.8571 63.5089 51.0161 60.6404 53.079 58.5254C55.1419 56.4104 57.9398 55.2222 60.8571 55.2222C63.7745 55.2222 66.5724 56.4104 68.6353 58.5254C70.6982 60.6404 71.8571 63.5089 71.8571 66.5C71.8571 69.4911 70.6982 72.3596 68.6353 74.4746C66.5724 76.5896 63.7745 77.7778 60.8571 77.7778C57.8243 77.7778 55.0743 76.505 53.0943 74.4589L50.8629 76.7467C53.4243 79.3889 56.9286 81 60.8571 81C64.6081 81 68.2054 79.4723 70.8577 76.753C73.51 74.0338 75 70.3456 75 66.5C75 62.6544 73.51 58.9662 70.8577 56.247C68.2054 53.5277 64.6081 52 60.8571 52Z"
-    fill="#BBBEC4" stroke="#BBBEC4" />
-  <defs>
-    <filter id="filter0_d_39_37" x="23" y="16" width="74" height="88" filterUnits="userSpaceOnUse"
-      color-interpolation-filters="sRGB">
-      <feFlood flood-opacity="0" result="BackgroundImageFix" />
-      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-        result="hardAlpha" />
-      <feOffset dy="4" />
-      <feGaussianBlur stdDeviation="6" />
-      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0" />
-      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_39_37" />
-      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_39_37" result="shape" />
-    </filter>
-  </defs>
-</svg>
\ No newline at end of file
diff --git a/package.json b/package.json
index b4e7e40e0..4e5abbfe2 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,6 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-typescript": "^7.16.7",
     "@standardnotes/config": "^2.4.3",
-    "@svgr/webpack": "^6.2.1",
     "@types/jest": "^27.4.1",
     "@types/react": "^17.0.42",
     "@types/wicg-file-system-access": "^2020.9.5",
@@ -70,9 +69,10 @@
     "@reach/tooltip": "^0.16.2",
     "@reach/visually-hidden": "^0.16.0",
     "@standardnotes/components": "1.8.0",
-    "@standardnotes/filepicker": "1.14.1",
+    "@standardnotes/filepicker": "1.14.5",
+    "@standardnotes/icons": "^1.1.7",
     "@standardnotes/sncrypto-web": "1.9.2",
-    "@standardnotes/snjs": "2.107.2",
+    "@standardnotes/snjs": "2.108.3",
     "@standardnotes/stylekit": "5.26.0",
     "@zip.js/zip.js": "^2.4.10",
     "mobx": "^6.5.0",
diff --git a/webpack.config.js b/webpack.config.js
index 1db03de72..be6da2f76 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,11 +1,11 @@
-const path = require('path');
-const webpack = require('webpack');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const mergeWithEnvDefaults = require('./webpack-defaults');
-require('dotenv').config();
+const path = require('path')
+const webpack = require('webpack')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const mergeWithEnvDefaults = require('./webpack-defaults')
+require('dotenv').config()
 
 module.exports = (env) => {
-  mergeWithEnvDefaults(env);
+  mergeWithEnvDefaults(env)
   return {
     entry: './app/assets/javascripts/index.ts',
     output: {
@@ -32,10 +32,7 @@ module.exports = (env) => {
       alias: {
         '%': path.resolve(__dirname, 'app/assets/templates'),
         '@': path.resolve(__dirname, 'app/assets/javascripts'),
-        '@Controllers': path.resolve(
-          __dirname,
-          'app/assets/javascripts/controllers'
-        ),
+        '@Controllers': path.resolve(__dirname, 'app/assets/javascripts/controllers'),
         '@Views': path.resolve(__dirname, 'app/assets/javascripts/views'),
         '@Services': path.resolve(__dirname, 'app/assets/javascripts/services'),
         '@node_modules': path.resolve(__dirname, 'node_modules'),
@@ -72,11 +69,7 @@ module.exports = (env) => {
             'sass-loader',
           ],
         },
-        {
-          test: /\.svg$/i,
-          use: ['@svgr/webpack'],
-        },
       ],
     },
-  };
-};
+  }
+}
diff --git a/webpack.prod.js b/webpack.prod.js
index c98bffcee..ce1a62907 100644
--- a/webpack.prod.js
+++ b/webpack.prod.js
@@ -1,11 +1,11 @@
-const { merge } = require('webpack-merge');
-const mergeWithEnvDefaults = require('./webpack-defaults.js');
-const config = require('./webpack.config.js');
+const { merge } = require('webpack-merge')
+const mergeWithEnvDefaults = require('./webpack-defaults.js')
+const config = require('./webpack.config.js')
 
 module.exports = (env, argv) => {
-  mergeWithEnvDefaults(env);
+  mergeWithEnvDefaults(env)
   return merge(config(env, argv), {
     mode: 'production',
     devtool: 'source-map',
-  });
-};
+  })
+}
diff --git a/yarn.lock b/yarn.lock
index 038916711..fe03b3719 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2424,18 +2424,18 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@standardnotes/auth@^3.18.13":
-  version "3.18.13"
-  resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.18.13.tgz#16016ce68150dadae6239d3bc993115339456b50"
-  integrity sha512-V71y7vLJ8PiD7uuQDIN7CSPFcPGtgt8S7bGkhHIjxy2z3/Cu6W1j7wl8jq4foekTstGFKz+3yGiuhmPMiZUwpg==
+"@standardnotes/auth@^3.18.15":
+  version "3.18.15"
+  resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.18.15.tgz#2d8338a8ebdeffcf08668d57c3ae5399b4e51622"
+  integrity sha512-ep9mgAaXuPGme9JjLtLds9rPnt/yKGB1kdQBMfitGK8Ce6MeS3d0F0cOJJK51xw74cGzdpgzjf34yrBgFqNyNg==
   dependencies:
-    "@standardnotes/common" "^1.19.8"
+    "@standardnotes/common" "^1.20.1"
     jsonwebtoken "^8.5.1"
 
-"@standardnotes/common@^1.19.8":
-  version "1.19.8"
-  resolved "https://registry.yarnpkg.com/@standardnotes/common/-/common-1.19.8.tgz#ca44cab69cf5562e874d091e875c1773789a0416"
-  integrity sha512-Fv9o1nvvY3eIU1Yf0yXsPCGSHXWdGb6Uh9dttB67IjFWlHd5g7JuB4YWNsMZLyvtoeOOuA/6rt65cxZ8Fg/2Lw==
+"@standardnotes/common@^1.20.1":
+  version "1.20.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/common/-/common-1.20.1.tgz#e6eb0b53bd15973248fd2fd406a4f17c2c595b28"
+  integrity sha512-Oea30Q8BpWsoCP2U5iKZ06c5e2c0O7L/FYrYDIbzwILfNLRaEZvvMk++ylWnN3cm1E/98n8w7tJOtJoNJZIZfQ==
 
 "@standardnotes/components@1.8.0":
   version "1.8.0"
@@ -2453,79 +2453,84 @@
     eslint-plugin-prettier "^4.0.0"
     prettier "^2.6.2"
 
-"@standardnotes/domain-events@^2.28.3":
-  version "2.28.3"
-  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.28.3.tgz#96e56009faf6626bd0cf967c7db9969fd08e7dd7"
-  integrity sha512-ehWn+6Ii1R0BcNX+ro02eIUZ6j8kiu9hR4Rvd59NS7NNsnAJCTyUmuDxURchwLNZTT4OSeqDBuvp98PiWn5Adg==
+"@standardnotes/domain-events@^2.28.5":
+  version "2.28.5"
+  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.28.5.tgz#0e7d365ca95695e19547d1f277412034a88caa9d"
+  integrity sha512-H88TGAAH8nPFnSmyTRwi0GNcKbqvezDL2hNgU3ivDwcDtumi0BZA/dkwyY65h9yrI2F/rWamIklyQYKi6MFuVg==
   dependencies:
-    "@standardnotes/auth" "^3.18.13"
-    "@standardnotes/features" "^1.42.1"
+    "@standardnotes/auth" "^3.18.15"
+    "@standardnotes/features" "^1.43.1"
 
-"@standardnotes/encryption@^1.7.1":
-  version "1.7.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.7.1.tgz#7d84389e204a6ca2906617daa62423ce9ec38879"
-  integrity sha512-5SZy5MG0ike80y889SmBTJMGAG753PdvOtc23+tNwbleBoubZjzw8gTgZYY52kl74KLtXmAEKiw2Ym2Pq5FcOg==
+"@standardnotes/encryption@^1.7.5":
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.7.5.tgz#b73690e1607b3e348867ed958a3e8c4ad5b43fad"
+  integrity sha512-6FqMhR9Y5lhmCd+nySGf96bfCbMkZnz8zS9q8VnGG6AldRdCeXI0jE5KmxmWLC/GePC3kg2tuw49gbtFm0/xZw==
   dependencies:
-    "@standardnotes/models" "^1.8.0"
-    "@standardnotes/responses" "^1.6.19"
-    "@standardnotes/services" "^1.11.1"
+    "@standardnotes/models" "^1.8.4"
+    "@standardnotes/responses" "^1.6.21"
+    "@standardnotes/services" "^1.11.5"
 
-"@standardnotes/features@^1.42.1":
-  version "1.42.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.42.1.tgz#29d1f753f445328c485ccc0ea95d557b9299c131"
-  integrity sha512-wMm0N112HeIa+VskpmPMfL5eHh3U3s+aCpxiq0HvITD+3BOoQgbbAQ+O+FjpwwhvN8mfBAM+LvNjksXFHhqoJg==
+"@standardnotes/features@^1.43.1":
+  version "1.43.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.43.1.tgz#b7f6dfce064b6d7d8dc2e82e2eaac80394d11a19"
+  integrity sha512-HsvCmBuQYcWcL5zFSHmAdkMw1tLxQ2Ch6kdKcv/ZWwIRLJtSQ9NSHHuTfP099bISlDCRwMVUkOQp8XsmDNgZLQ==
   dependencies:
-    "@standardnotes/auth" "^3.18.13"
-    "@standardnotes/common" "^1.19.8"
+    "@standardnotes/auth" "^3.18.15"
+    "@standardnotes/common" "^1.20.1"
 
-"@standardnotes/filepicker@1.14.1", "@standardnotes/filepicker@^1.14.1":
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.14.1.tgz#81a3ba2be6e3615103875e528dc1720fa3698dea"
-  integrity sha512-AOR+iQqNqbfZU7ur/LKsF/M0x9EoBT0kXhewZBs7h3OwrtJES7nFRr/janJMrecvUL/ZdfXmazudadZdvcxPyg==
+"@standardnotes/filepicker@1.14.5", "@standardnotes/filepicker@^1.14.5":
+  version "1.14.5"
+  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.14.5.tgz#0c877fd77ad5cc8a2133ef798318d14762051a00"
+  integrity sha512-zMiv5ROiMGk5sgv3duKMCByJkc4ruoVwRMx2zoOdJMPm3DN7RD8zXSTl3HDnX7DeBI/mTFyM1SqNxph62aG1TA==
   dependencies:
-    "@standardnotes/common" "^1.19.8"
-    "@standardnotes/services" "^1.11.1"
-    "@standardnotes/utils" "^1.6.6"
+    "@standardnotes/common" "^1.20.1"
+    "@standardnotes/services" "^1.11.5"
+    "@standardnotes/utils" "^1.6.8"
 
-"@standardnotes/files@^1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.1.2.tgz#6e75d6233975f359173ddcb352647b21c587be89"
-  integrity sha512-Q3f+gYd/FkWb8nuNHgUqGSxkAKkAU3kwb+Ar89LhqSNkgq0e4MsUigy+lzOagdiavwT/C1SE8j5d7E4oIZWynw==
+"@standardnotes/files@^1.1.6":
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.1.6.tgz#0ad02a3a44a008ac2b01b3ba5d02abef4069c097"
+  integrity sha512-dckFtWeDZGMOYwHthizqrkJqcIdcjjkS9Wf0t7B8Z9srKomS+lc2MqIboY2AXkOZDytbsSHEA501BKX725cp2w==
   dependencies:
-    "@standardnotes/encryption" "^1.7.1"
-    "@standardnotes/models" "^1.8.0"
-    "@standardnotes/responses" "^1.6.19"
-    "@standardnotes/services" "^1.11.1"
-    "@standardnotes/utils" "^1.6.6"
+    "@standardnotes/encryption" "^1.7.5"
+    "@standardnotes/models" "^1.8.4"
+    "@standardnotes/responses" "^1.6.21"
+    "@standardnotes/services" "^1.11.5"
+    "@standardnotes/utils" "^1.6.8"
 
-"@standardnotes/models@^1.8.0":
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.8.0.tgz#b295ba16f0392549eb79cd02d67b7e2455f2d9be"
-  integrity sha512-Tl1EZNk/8axTSTb6p7kU9qfS6Fyqxyc+/MxRGj0th+Ry70/UHvRV7iDGT6FKBzBUQR8/5hDK0JG1pDzUSRAhhQ==
-  dependencies:
-    "@standardnotes/features" "^1.42.1"
-    "@standardnotes/responses" "^1.6.19"
-    "@standardnotes/utils" "^1.6.6"
+"@standardnotes/icons@^1.1.7":
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/@standardnotes/icons/-/icons-1.1.7.tgz#4523d8e2e3aa34d0e921df802d54c0babe054279"
+  integrity sha512-yHB/KInj7qSmtnUqtTo6CPttu+2+oAwdANfjE3a69sgS7nVBxUuwSHHxb9xUOKpJBmipFjJi5F0YVF9kLmHiwg==
 
-"@standardnotes/responses@^1.6.19":
-  version "1.6.19"
-  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.6.19.tgz#ac8bf70f35cd7a5649e52b280f53a2bd97f39b76"
-  integrity sha512-Oj9CS52UCJhAZCqCN6GReqQ9zosgCV2HZ1uaJLXEDxNeNTxDnPOU9C7CH7tXmA3zoQ44pFpQbeAuee8ZnlH3XQ==
+"@standardnotes/models@^1.8.4":
+  version "1.8.4"
+  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.8.4.tgz#90f1c76329a80c52d015fee1efefbc3b16b135ef"
+  integrity sha512-z+kntdmqLOG3YwwT9LjHdDGeYGG9uHnqU01EqgR47N04f3pZ69R2yS3YclYZ5QAuc1zt850Yxyw9B8arEFLP+Q==
   dependencies:
-    "@standardnotes/auth" "^3.18.13"
-    "@standardnotes/common" "^1.19.8"
-    "@standardnotes/features" "^1.42.1"
+    "@standardnotes/features" "^1.43.1"
+    "@standardnotes/responses" "^1.6.21"
+    "@standardnotes/utils" "^1.6.8"
 
-"@standardnotes/services@^1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.11.1.tgz#2fa3ce3c7025a048964204321a4c50591134d7ac"
-  integrity sha512-MvDAJM1Cn9586sMm+w4iCgznsqT6uli3bpf/xZKOHWITkrH6dik/FpgpbxmRfOz2VnbZ6lyLVjsnNDIWFZDqxw==
+"@standardnotes/responses@^1.6.21":
+  version "1.6.21"
+  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.6.21.tgz#5164eaa729fb3b6208c82a90bbfe9c43188c469f"
+  integrity sha512-iotivpdauTpzgc/mM/jZvB5SZdr2XnxJpO6lSJu8YeZzRwCRfZDn9WORT1D35P3ITpvB755F5auxYRqXSUW/5w==
   dependencies:
-    "@standardnotes/auth" "^3.18.13"
-    "@standardnotes/common" "^1.19.8"
-    "@standardnotes/models" "^1.8.0"
-    "@standardnotes/responses" "^1.6.19"
-    "@standardnotes/utils" "^1.6.6"
+    "@standardnotes/auth" "^3.18.15"
+    "@standardnotes/common" "^1.20.1"
+    "@standardnotes/features" "^1.43.1"
+
+"@standardnotes/services@^1.11.5":
+  version "1.11.5"
+  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.11.5.tgz#cf808363f136f168d66dff6d8a8268bba455bd9b"
+  integrity sha512-6oAPQmn99mLkt1z77yPl55XOoFkMeLYG7kjqX60WVgZkD7N35pqYOADwzYZtpXCSfqvj+A/UBOnT6WjMiQWUkQ==
+  dependencies:
+    "@standardnotes/auth" "^3.18.15"
+    "@standardnotes/common" "^1.20.1"
+    "@standardnotes/models" "^1.8.4"
+    "@standardnotes/responses" "^1.6.21"
+    "@standardnotes/utils" "^1.6.8"
 
 "@standardnotes/settings@^1.14.3":
   version "1.14.3"
@@ -2546,24 +2551,24 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.107.2":
-  version "2.107.2"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.107.2.tgz#b50be49a44a96eac0158e44df7d547e2b1ecfe5a"
-  integrity sha512-zTa1n+Bed6ElWOepA/5gJew1aI03XB4lKiysJmDduKS2QsYEdyeQ2p3SuJZSDFX57e/PVYnU9uI851CobrN/Fg==
+"@standardnotes/snjs@2.108.3":
+  version "2.108.3"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.108.3.tgz#e30dfb2bda088ec99e87802865b4a1b9e8a95a4a"
+  integrity sha512-J68VXZgxOYoLow8oGR2egldCQRD59Vb0NCZe96eY4IOZgltkQSw9eC7vq+sYkZhRshHhFYZ7n+GGH4pFPqIlzg==
   dependencies:
-    "@standardnotes/auth" "^3.18.13"
-    "@standardnotes/common" "^1.19.8"
-    "@standardnotes/domain-events" "^2.28.3"
-    "@standardnotes/encryption" "^1.7.1"
-    "@standardnotes/features" "^1.42.1"
-    "@standardnotes/filepicker" "^1.14.1"
-    "@standardnotes/files" "^1.1.2"
-    "@standardnotes/models" "^1.8.0"
-    "@standardnotes/responses" "^1.6.19"
-    "@standardnotes/services" "^1.11.1"
+    "@standardnotes/auth" "^3.18.15"
+    "@standardnotes/common" "^1.20.1"
+    "@standardnotes/domain-events" "^2.28.5"
+    "@standardnotes/encryption" "^1.7.5"
+    "@standardnotes/features" "^1.43.1"
+    "@standardnotes/filepicker" "^1.14.5"
+    "@standardnotes/files" "^1.1.6"
+    "@standardnotes/models" "^1.8.4"
+    "@standardnotes/responses" "^1.6.21"
+    "@standardnotes/services" "^1.11.5"
     "@standardnotes/settings" "^1.14.3"
     "@standardnotes/sncrypto-common" "^1.8.2"
-    "@standardnotes/utils" "^1.6.6"
+    "@standardnotes/utils" "^1.6.8"
 
 "@standardnotes/stylekit@5.26.0":
   version "5.26.0"
@@ -2578,12 +2583,12 @@
     nanostores "^0.5.10"
     prop-types "^15.8.1"
 
-"@standardnotes/utils@^1.6.6":
-  version "1.6.6"
-  resolved "https://registry.yarnpkg.com/@standardnotes/utils/-/utils-1.6.6.tgz#8a1e40c99d393d03c0890382772208bd8f9a290b"
-  integrity sha512-zKb9/JELti6FLDgUQGVC08i1m06D5LxE/ySViqyFroZ7gLLQnSOM5+bnHqGYXwChuCMyGYGIwCZuD6QqPoqB2A==
+"@standardnotes/utils@^1.6.8":
+  version "1.6.8"
+  resolved "https://registry.yarnpkg.com/@standardnotes/utils/-/utils-1.6.8.tgz#002e27ad97261d44d6b5026a20ddf0984dfe06a3"
+  integrity sha512-qyqcEqz8jFqXe2aEEaXvZspn56g6Y4aDQqdxC76LZMstTzkoUk7aSF6ktifYLWX/YyT8lenW5a6djEmf+U0dNw==
   dependencies:
-    "@standardnotes/common" "^1.19.8"
+    "@standardnotes/common" "^1.20.1"
     dompurify "^2.3.6"
     lodash "^4.17.21"
 

From ce9739da4af2775b2e61f54dbe8dcf53a045f8b4 Mon Sep 17 00:00:00 2001
From: Johnny A <5891646+johnny243@users.noreply.github.com>
Date: Tue, 17 May 2022 10:50:40 -0400
Subject: [PATCH 088/102] chore(deps): update components (#1028)

* chore(deps): update components

* chore(deps): snjs version

Co-authored-by: Johnny Almonte <johnny243@users.noreply.github.com>
---
 package.json                                  |   6 +-
 public/components/checksums.json              |   6 +-
 .../dist/dist.js                              |   2 +-
 .../package.json                              |  19 ++-
 yarn.lock                                     | 124 +++++++++---------
 5 files changed, 81 insertions(+), 76 deletions(-)

diff --git a/package.json b/package.json
index 4e5abbfe2..1a47bcc13 100644
--- a/package.json
+++ b/package.json
@@ -68,11 +68,11 @@
     "@reach/listbox": "^0.16.2",
     "@reach/tooltip": "^0.16.2",
     "@reach/visually-hidden": "^0.16.0",
-    "@standardnotes/components": "1.8.0",
-    "@standardnotes/filepicker": "1.14.5",
+    "@standardnotes/components": "1.8.1",
+    "@standardnotes/filepicker": "1.14.6",
     "@standardnotes/icons": "^1.1.7",
     "@standardnotes/sncrypto-web": "1.9.2",
-    "@standardnotes/snjs": "2.108.3",
+    "@standardnotes/snjs": "2.108.4",
     "@standardnotes/stylekit": "5.26.0",
     "@zip.js/zip.js": "^2.4.10",
     "mobx": "^6.5.0",
diff --git a/public/components/checksums.json b/public/components/checksums.json
index ccc1a18db..a37b23595 100644
--- a/public/components/checksums.json
+++ b/public/components/checksums.json
@@ -70,9 +70,9 @@
     "binary": "d8060e0eb8dc727339329be5e5150c077e2795ff2145521dc90a38717eea5d3c"
   },
   "org.standardnotes.simple-task-editor": {
-    "version": "1.3.9",
-    "base64": "98ecadbe8e4ce6f722980aa172ebe7290c2ddbad7f0da6708587096ce19d5d3c",
-    "binary": "3f553a232f3ec81ae95506d60eda2f30877974af213b144f02d0464517f74a97"
+    "version": "1.3.10",
+    "base64": "2da772eb55106dd5a79859e7866fcd36df83cd473435a2473fd81c2cdce3acb7",
+    "binary": "9c772c6eab7f5e694c11d72032f4fbf924eb3f152cc35453bcaac39850897f5d"
   },
   "org.standardnotes.token-vault": {
     "version": "2.0.10",
diff --git a/public/components/org.standardnotes.simple-task-editor/dist/dist.js b/public/components/org.standardnotes.simple-task-editor/dist/dist.js
index 81f3b87b7..49cb5f74e 100644
--- a/public/components/org.standardnotes.simple-task-editor/dist/dist.js
+++ b/public/components/org.standardnotes.simple-task-editor/dist/dist.js
@@ -1,2 +1,2 @@
 /*! For license information please see dist.js.LICENSE.txt */
-(()=>{var e={156:e=>{self,e.exports=(()=>{"use strict";var e={d:(t,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};let n,r,a,o;var i;e.d(t,{default:()=>T}),function(e){e.SetSize="set-size",e.StreamItems="stream-items",e.StreamContextItem="stream-context-item",e.SaveItems="save-items",e.SelectItem="select-item",e.AssociateItem="associate-item",e.DeassociateItem="deassociate-item",e.ClearSelection="clear-selection",e.CreateItem="create-item",e.CreateItems="create-items",e.DeleteItems="delete-items",e.SetComponentData="set-component-data",e.InstallLocalComponent="install-local-component",e.ToggleActivateComponent="toggle-activate-component",e.RequestPermissions="request-permissions",e.PresentConflictResolution="present-conflict-resolution",e.DuplicateItem="duplicate-item",e.ComponentRegistered="component-registered",e.ActivateThemes="themes",e.Reply="reply",e.SaveSuccess="save-success",e.SaveError="save-error",e.ThemesActivated="themes-activated",e.KeyDown="key-down",e.KeyUp="key-up",e.Click="click"}(n||(n={})),function(e){e[e.Web=1]="Web",e[e.Desktop=2]="Desktop",e[e.Mobile=3]="Mobile"}(r||(r={})),function(e){e.Any="*",e.Item="SF|Item",e.RootKey="SN|RootKey|NoSync",e.ItemsKey="SN|ItemsKey",e.EncryptedStorage="SN|EncryptedStorage",e.Note="Note",e.Tag="Tag",e.SmartTag="SN|SmartTag",e.Component="SN|Component",e.Editor="SN|Editor",e.ActionsExtension="Extension",e.UserPrefs="SN|UserPreferences",e.HistorySession="SN|HistorySession",e.Theme="SN|Theme",e.Mfa="SF|MFA",e.ServerExtension="SF|Extension",e.FilesafeCredentials="SN|FileSafe|Credentials",e.FilesafeFileMetadata="SN|FileSafe|FileMetadata",e.FilesafeIntegration="SN|FileSafe|Integration",e.ExtensionRepo="SN|ExtensionRepo"}(a||(a={})),function(e){e.Pinned="pinned",e.Archived="archived",e.Locked="locked",e.UserModifiedDate="client_updated_at",e.DefaultEditor="defaultEditor",e.MobileRules="mobileRules",e.NotAvailableOnMobile="notAvailableOnMobile",e.MobileActive="mobileActive",e.LastSize="lastSize",e.PrefersPlainEditor="prefersPlainEditor",e.ComponentInstallError="installError"}(o||(o={}));var l=new Uint8Array(16);function u(){if(!i&&!(i="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)||"undefined"!=typeof msCrypto&&"function"==typeof msCrypto.getRandomValues&&msCrypto.getRandomValues.bind(msCrypto)))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return i(l)}const s=/^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i,c=function(e){return"string"==typeof e&&s.test(e)};for(var f=[],d=0;d<256;++d)f.push((d+256).toString(16).substr(1));const p=function(e,t,n){var r=(e=e||{}).random||(e.rng||u)();if(r[6]=15&r[6]|64,r[8]=63&r[8]|128,t){n=n||0;for(var a=0;a<16;++a)t[n+a]=r[a];return t}return function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=(f[e[t+0]]+f[e[t+1]]+f[e[t+2]]+f[e[t+3]]+"-"+f[e[t+4]]+f[e[t+5]]+"-"+f[e[t+6]]+f[e[t+7]]+"-"+f[e[t+8]]+f[e[t+9]]+"-"+f[e[t+10]]+f[e[t+11]]+f[e[t+12]]+f[e[t+13]]+f[e[t+14]]+f[e[t+15]]).toLowerCase();if(!c(n))throw TypeError("Stringified UUID is invalid");return n}(r)},h=e=>{var t;const n={[r.Web]:"web",[r.Desktop]:"desktop",[r.Mobile]:"mobile"};return null!==(t=n[e])&&void 0!==t?t:n[r.Web]},m=e=>null!=e,v=()=>{};class g{static get isSupported(){return!(!window.console&&!console)}static get info(){return g.isSupported&&this.enabled?console.log.bind(console):v}static get error(){return g.isSupported?console.error.bind(console):v}}var y,b,k,w;function S(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function E(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?S(Object(n),!0).forEach((function(t){C(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):S(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function C(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}(b="enabled")in(y=g)?Object.defineProperty(y,b,{value:!1,enumerable:!0,configurable:!0,writable:!0}):y[b]=!1,function(e){e.Component="component"}(k||(k={})),function(e){e.Shift="Shift",e.Ctrl="Control",e.Meta="Meta"}(w||(w={}));class T{constructor(e){if(C(this,"contentWindow",void 0),C(this,"initialPermissions",void 0),C(this,"onReadyCallback",void 0),C(this,"component",{activeThemes:[],acceptsThemes:!0}),C(this,"sentMessages",[]),C(this,"messageQueue",[]),C(this,"lastStreamedItem",void 0),C(this,"pendingSaveItems",void 0),C(this,"pendingSaveTimeout",void 0),C(this,"pendingSaveParams",void 0),C(this,"coallesedSaving",!0),C(this,"coallesedSavingDelay",250),C(this,"messageHandler",void 0),C(this,"keyDownEventListener",void 0),C(this,"keyUpEventListener",void 0),C(this,"clickEventListener",void 0),C(this,"onThemesChangeCallback",void 0),C(this,"concernTimeouts",[]),!e||!e.targetWindow)throw new Error("contentWindow must be a valid Window object.");this.contentWindow=e.targetWindow,this.processParameters(e),this.registerMessageHandler(),this.registerKeyboardEventListeners(),this.registerMouseEventListeners()}processParameters(e){var t;const{initialPermissions:n,options:r,onReady:a,onThemesChange:o}=e;var i;n&&n.length>0&&(this.initialPermissions=n),m(null==r?void 0:r.coallesedSaving)&&(this.coallesedSaving=r.coallesedSaving),m(null==r?void 0:r.coallesedSavingDelay)&&(this.coallesedSavingDelay=r.coallesedSavingDelay),m(null==r?void 0:r.acceptsThemes)&&(this.component.acceptsThemes=null===(i=null==r?void 0:r.acceptsThemes)||void 0===i||i),m(a)&&(this.onReadyCallback=a),m(o)&&(this.onThemesChangeCallback=o),g.enabled=null!==(t=null==r?void 0:r.debug)&&void 0!==t&&t}deinit(){this.onReadyCallback=void 0,this.component={acceptsThemes:!0,activeThemes:[]},this.messageQueue=[],this.sentMessages=[],this.lastStreamedItem=void 0,this.pendingSaveItems=void 0,this.pendingSaveTimeout=void 0,this.pendingSaveParams=void 0,this.messageHandler&&(this.contentWindow.document.removeEventListener("message",this.messageHandler),this.contentWindow.removeEventListener("message",this.messageHandler)),this.keyDownEventListener&&this.contentWindow.removeEventListener("keydown",this.keyDownEventListener),this.keyUpEventListener&&this.contentWindow.removeEventListener("keyup",this.keyUpEventListener),this.clickEventListener&&this.contentWindow.removeEventListener("click",this.clickEventListener)}registerMessageHandler(){this.messageHandler=e=>{if(g.info("Components API Message received:",e.data),document.referrer&&new URL(document.referrer).origin!==new URL(e.origin).origin)return;const{data:t}=e,r=(e=>{if("string"!=typeof e)return!1;try{const t=JSON.parse(e),n=Object.prototype.toString.call(t);return"[object Object]"===n||"[object Array]"===n}catch(e){return!1}})(t)?JSON.parse(t):t;if(r){if(void 0===this.component.origin&&r.action===n.ComponentRegistered)this.component.origin=e.origin;else if(e.origin!==this.component.origin)return;this.handleMessage(r)}else g.error("Invalid data received. Skipping...")},this.contentWindow.document.addEventListener("message",this.messageHandler,!1),this.contentWindow.addEventListener("message",this.messageHandler,!1),g.info("Waiting for messages...")}registerKeyboardEventListeners(){this.keyDownEventListener=e=>{g.info("A key has been pressed: ".concat(e.key)),e.ctrlKey?this.keyDownEvent(w.Ctrl):e.shiftKey?this.keyDownEvent(w.Shift):(e.metaKey||"Meta"===e.key)&&this.keyDownEvent(w.Meta)},this.keyUpEventListener=e=>{g.info("A key has been released: ".concat(e.key)),"Control"===e.key?this.keyUpEvent(w.Ctrl):"Shift"===e.key?this.keyUpEvent(w.Shift):"Meta"===e.key&&this.keyUpEvent(w.Meta)},this.contentWindow.addEventListener("keydown",this.keyDownEventListener,!1),this.contentWindow.addEventListener("keyup",this.keyUpEventListener,!1)}registerMouseEventListeners(){this.clickEventListener=e=>{g.info("A click has been performed."),this.mouseClickEvent()},this.contentWindow.addEventListener("click",this.clickEventListener,!1)}handleMessage(e){switch(e.action){case n.ComponentRegistered:this.component.sessionKey=e.sessionKey,e.componentData&&(this.component.data=e.componentData),this.onReady(e.data),g.info("Component successfully registered with payload:",e);break;case n.ActivateThemes:this.activateThemes(e.data.themes);break;default:{var t,r;if(!e.original)return;const n=null===(t=this.sentMessages)||void 0===t?void 0:t.filter((t=>{var n;return t.messageId===(null===(n=e.original)||void 0===n?void 0:n.messageId)}))[0];if(!n){const e=this.contentWindow.document.title,t=("The extension '".concat(e,"' is attempting to communicate with Standard Notes, ")+"but an error is preventing it from doing so. Please restart this extension and try again.").replace("  "," ");return void g.info(t)}null==n||null===(r=n.callback)||void 0===r||r.call(n,e.data);break}}}onReady(e){this.component.environment=e.environment,this.component.platform=e.platform,this.component.uuid=e.uuid,this.initialPermissions&&this.initialPermissions.length>0&&this.requestPermissions(this.initialPermissions);for(const e of this.messageQueue)this.postMessage(e.action,e.data,e.callback);this.messageQueue=[],g.info("Data passed to onReady:",e),this.activateThemes(e.activeThemeUrls||[]),this.postMessage(n.ThemesActivated,{}),this.onReadyCallback&&this.onReadyCallback()}getSelfComponentUUID(){return this.component.uuid}isRunningInDesktopApplication(){return this.component.environment===h(r.Desktop)}isRunningInMobileApplication(){return this.component.environment===h(r.Mobile)}getComponentDataValueForKey(e){if(this.component.data)return this.component.data[e]}setComponentDataValueForKey(e,t){if(!this.component.data)throw new Error("The component has not been initialized.");if(!e||e&&0===e.length)throw new Error("The key for the data value should be a valid string.");this.component.data=E(E({},this.component.data),{},{[e]:t}),this.postMessage(n.SetComponentData,{componentData:this.component.data})}clearComponentData(){this.component.data={},this.postMessage(n.SetComponentData,{componentData:this.component.data})}postMessage(e,t,n){if(!this.component.sessionKey)return void this.messageQueue.push({action:e,data:t,api:k.Component,callback:n});const r={action:e,data:t,messageId:this.generateUUID(),sessionKey:this.component.sessionKey,api:k.Component},a=JSON.parse(JSON.stringify(r));let o;a.callback=n,this.sentMessages.push(a),o=this.isRunningInMobileApplication()?JSON.stringify(r):r,g.info("Posting message:",o),this.contentWindow.parent.postMessage(o,this.component.origin)}requestPermissions(e,t){this.postMessage(n.RequestPermissions,{permissions:e},(()=>{t&&t()}))}activateThemes(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];if(!this.component.acceptsThemes)return;g.info("Incoming themes:",e);const{activeThemes:t}=this.component;if(t&&t.sort().toString()==e.sort().toString())return;let n=e;const r=[];for(const a of t)e.includes(a)?n=n.filter((e=>e!==a)):r.push(a);g.info("Deactivating themes:",r),g.info("Activating themes:",n);for(const e of r)this.deactivateTheme(e);this.component.activeThemes=e;for(const e of n){if(!e)continue;const t=this.contentWindow.document.createElement("link");t.id=btoa(e),t.href=e,t.type="text/css",t.rel="stylesheet",t.media="screen,print",t.className="custom-theme",this.contentWindow.document.getElementsByTagName("head")[0].appendChild(t)}this.onThemesChangeCallback&&this.onThemesChangeCallback()}themeElementForUrl(e){return Array.from(this.contentWindow.document.getElementsByClassName("custom-theme")).slice().find((t=>t.id==btoa(e)))}deactivateTheme(e){const t=this.themeElementForUrl(e);t&&t.parentNode&&(t.setAttribute("disabled","true"),t.parentNode.removeChild(t))}generateUUID(){return p()}get platform(){return this.component.platform}get environment(){return this.component.environment}streamItems(e,t){this.postMessage(n.StreamItems,{content_types:e},(e=>{t(e.items)}))}streamContextItem(e){this.postMessage(n.StreamContextItem,{},(t=>{const{item:n}=t;(!this.lastStreamedItem||this.lastStreamedItem.uuid!==n.uuid)&&this.pendingSaveTimeout&&(clearTimeout(this.pendingSaveTimeout),this.performSavingOfItems(this.pendingSaveParams),this.pendingSaveTimeout=void 0,this.pendingSaveParams=void 0),this.lastStreamedItem=n,e(this.lastStreamedItem)}))}selectItem(e){this.postMessage(n.SelectItem,{item:this.jsonObjectForItem(e)})}clearSelection(){this.postMessage(n.ClearSelection,{content_type:a.Tag})}createItem(e,t){this.postMessage(n.CreateItem,{item:this.jsonObjectForItem(e)},(e=>{let{item:n}=e;!n&&e.items&&e.items.length>0&&(n=e.items[0]),this.associateItem(n),t&&t(n)}))}createItems(e,t){const r=e.map((e=>this.jsonObjectForItem(e)));this.postMessage(n.CreateItems,{items:r},(e=>{t&&t(e.items)}))}associateItem(e){this.postMessage(n.AssociateItem,{item:this.jsonObjectForItem(e)})}deassociateItem(e){this.postMessage(n.DeassociateItem,{item:this.jsonObjectForItem(e)})}deleteItem(e,t){this.deleteItems([e],t)}deleteItems(e,t){const r={items:e.map((e=>this.jsonObjectForItem(e)))};this.postMessage(n.DeleteItems,r,(e=>{t&&t(e)}))}sendCustomEvent(e,t,n){this.postMessage(e,t,(e=>{n&&n(e)}))}saveItem(e,t){let n=arguments.length>2&&void 0!==arguments[2]&&arguments[2];this.saveItems([e],t,n)}saveItemWithPresave(e,t,n){this.saveItemsWithPresave([e],t,n)}saveItemsWithPresave(e,t,n){this.saveItems(e,n,!1,t)}performSavingOfItems(e){let{items:t,presave:r,callback:a}=e;const o=setTimeout((()=>{this.concernTimeouts.forEach((e=>clearTimeout(e))),alert("This editor is unable to communicate with Standard Notes. Your changes may not be saved. Please backup your changes, then restart the application and try again.")}),5e3);this.concernTimeouts.push(o),r&&r();const i=[];for(const e of t)i.push(this.jsonObjectForItem(e));this.postMessage(n.SaveItems,{items:i},(()=>{this.concernTimeouts.forEach((e=>clearTimeout(e))),null==a||a()}))}saveItems(e,t){let n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],r=arguments.length>3?arguments[3]:void 0;if(this.pendingSaveItems||(this.pendingSaveItems=[]),this.coallesedSaving&&!n){this.pendingSaveTimeout&&clearTimeout(this.pendingSaveTimeout);const n=e.map((e=>e.uuid)),a=this.pendingSaveItems.filter((e=>!n.includes(e.uuid)));this.pendingSaveItems=a.concat(e),this.pendingSaveParams={items:this.pendingSaveItems,presave:r,callback:t},this.pendingSaveTimeout=setTimeout((()=>{this.performSavingOfItems(this.pendingSaveParams),this.pendingSaveItems=[],this.pendingSaveTimeout=void 0,this.pendingSaveParams=null}),this.coallesedSavingDelay)}else this.performSavingOfItems({items:e,presave:r,callback:t})}setSize(e,t){this.postMessage(n.SetSize,{type:"container",width:e,height:t})}keyDownEvent(e){this.postMessage(n.KeyDown,{keyboardModifier:e})}keyUpEvent(e){this.postMessage(n.KeyUp,{keyboardModifier:e})}mouseClickEvent(){this.postMessage(n.Click,{})}jsonObjectForItem(e){const t=Object.assign({},e);return t.children=null,t.parent=null,t}getItemAppDataValue(e,t){var n,r;return null==e||null===(n=e.content)||void 0===n||null===(r=n.appData)||void 0===r?void 0:r["org.standardnotes.sn"][t]}}return t.default})()},418:e=>{"use strict";var t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable;function a(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach((function(e){r[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,o){for(var i,l,u=a(e),s=1;s<arguments.length;s++){for(var c in i=Object(arguments[s]))n.call(i,c)&&(u[c]=i[c]);if(t){l=t(i);for(var f=0;f<l.length;f++)r.call(i,l[f])&&(u[l[f]]=i[l[f]])}}return u}},703:(e,t,n)=>{"use strict";var r=n(414);function a(){}function o(){}o.resetWarningCache=a,e.exports=function(){function e(e,t,n,a,o,i){if(i!==r){var l=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:o,resetWarningCache:a};return n.PropTypes=n,n}},697:(e,t,n)=>{e.exports=n(703)()},414:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},448:(e,t,n)=>{"use strict";var r=n(294),a=n(418),o=n(840);function i(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n<arguments.length;n++)t+="&args[]="+encodeURIComponent(arguments[n]);return"Minified React error #"+e+"; visit "+t+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}if(!r)throw Error(i(227));var l=new Set,u={};function s(e,t){c(e,t),c(e+"Capture",t)}function c(e,t){for(u[e]=t,e=0;e<t.length;e++)l.add(t[e])}var f=!("undefined"==typeof window||void 0===window.document||void 0===window.document.createElement),d=/^[:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD][:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD\-.0-9\u00B7\u0300-\u036F\u203F-\u2040]*$/,p=Object.prototype.hasOwnProperty,h={},m={};function v(e,t,n,r,a,o,i){this.acceptsBooleans=2===t||3===t||4===t,this.attributeName=r,this.attributeNamespace=a,this.mustUseProperty=n,this.propertyName=e,this.type=t,this.sanitizeURL=o,this.removeEmptyString=i}var g={};"children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style".split(" ").forEach((function(e){g[e]=new v(e,0,!1,e,null,!1,!1)})),[["acceptCharset","accept-charset"],["className","class"],["htmlFor","for"],["httpEquiv","http-equiv"]].forEach((function(e){var t=e[0];g[t]=new v(t,1,!1,e[1],null,!1,!1)})),["contentEditable","draggable","spellCheck","value"].forEach((function(e){g[e]=new v(e,2,!1,e.toLowerCase(),null,!1,!1)})),["autoReverse","externalResourcesRequired","focusable","preserveAlpha"].forEach((function(e){g[e]=new v(e,2,!1,e,null,!1,!1)})),"allowFullScreen async autoFocus autoPlay controls default defer disabled disablePictureInPicture disableRemotePlayback formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope".split(" ").forEach((function(e){g[e]=new v(e,3,!1,e.toLowerCase(),null,!1,!1)})),["checked","multiple","muted","selected"].forEach((function(e){g[e]=new v(e,3,!0,e,null,!1,!1)})),["capture","download"].forEach((function(e){g[e]=new v(e,4,!1,e,null,!1,!1)})),["cols","rows","size","span"].forEach((function(e){g[e]=new v(e,6,!1,e,null,!1,!1)})),["rowSpan","start"].forEach((function(e){g[e]=new v(e,5,!1,e.toLowerCase(),null,!1,!1)}));var y=/[\-:]([a-z])/g;function b(e){return e[1].toUpperCase()}function k(e,t,n,r){var a=g.hasOwnProperty(t)?g[t]:null;(null!==a?0===a.type:!r&&(2<t.length&&("o"===t[0]||"O"===t[0])&&("n"===t[1]||"N"===t[1])))||(function(e,t,n,r){if(null==t||function(e,t,n,r){if(null!==n&&0===n.type)return!1;switch(typeof t){case"function":case"symbol":return!0;case"boolean":return!r&&(null!==n?!n.acceptsBooleans:"data-"!==(e=e.toLowerCase().slice(0,5))&&"aria-"!==e);default:return!1}}(e,t,n,r))return!0;if(r)return!1;if(null!==n)switch(n.type){case 3:return!t;case 4:return!1===t;case 5:return isNaN(t);case 6:return isNaN(t)||1>t}return!1}(t,n,a,r)&&(n=null),r||null===a?function(e){return!!p.call(m,e)||!p.call(h,e)&&(d.test(e)?m[e]=!0:(h[e]=!0,!1))}(t)&&(null===n?e.removeAttribute(t):e.setAttribute(t,""+n)):a.mustUseProperty?e[a.propertyName]=null===n?3!==a.type&&"":n:(t=a.attributeName,r=a.attributeNamespace,null===n?e.removeAttribute(t):(n=3===(a=a.type)||4===a&&!0===n?"":""+n,r?e.setAttributeNS(r,t,n):e.setAttribute(t,n))))}"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height".split(" ").forEach((function(e){var t=e.replace(y,b);g[t]=new v(t,1,!1,e,null,!1,!1)})),"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type".split(" ").forEach((function(e){var t=e.replace(y,b);g[t]=new v(t,1,!1,e,"http://www.w3.org/1999/xlink",!1,!1)})),["xml:base","xml:lang","xml:space"].forEach((function(e){var t=e.replace(y,b);g[t]=new v(t,1,!1,e,"http://www.w3.org/XML/1998/namespace",!1,!1)})),["tabIndex","crossOrigin"].forEach((function(e){g[e]=new v(e,1,!1,e.toLowerCase(),null,!1,!1)})),g.xlinkHref=new v("xlinkHref",1,!1,"xlink:href","http://www.w3.org/1999/xlink",!0,!1),["src","href","action","formAction"].forEach((function(e){g[e]=new v(e,1,!1,e.toLowerCase(),null,!0,!0)}));var w=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,S=60103,E=60106,C=60107,T=60108,x=60114,_=60109,P=60110,N=60112,O=60113,D=60120,I=60115,M=60116,R=60121,L=60128,z=60129,A=60130,F=60131;if("function"==typeof Symbol&&Symbol.for){var U=Symbol.for;S=U("react.element"),E=U("react.portal"),C=U("react.fragment"),T=U("react.strict_mode"),x=U("react.profiler"),_=U("react.provider"),P=U("react.context"),N=U("react.forward_ref"),O=U("react.suspense"),D=U("react.suspense_list"),I=U("react.memo"),M=U("react.lazy"),R=U("react.block"),U("react.scope"),L=U("react.opaque.id"),z=U("react.debug_trace_mode"),A=U("react.offscreen"),F=U("react.legacy_hidden")}var j,W="function"==typeof Symbol&&Symbol.iterator;function B(e){return null===e||"object"!=typeof e?null:"function"==typeof(e=W&&e[W]||e["@@iterator"])?e:null}function H(e){if(void 0===j)try{throw Error()}catch(e){var t=e.stack.trim().match(/\n( *(at )?)/);j=t&&t[1]||""}return"\n"+j+e}var V=!1;function $(e,t){if(!e||V)return"";V=!0;var n=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{if(t)if(t=function(){throw Error()},Object.defineProperty(t.prototype,"props",{set:function(){throw Error()}}),"object"==typeof Reflect&&Reflect.construct){try{Reflect.construct(t,[])}catch(e){var r=e}Reflect.construct(e,[],t)}else{try{t.call()}catch(e){r=e}e.call(t.prototype)}else{try{throw Error()}catch(e){r=e}e()}}catch(e){if(e&&r&&"string"==typeof e.stack){for(var a=e.stack.split("\n"),o=r.stack.split("\n"),i=a.length-1,l=o.length-1;1<=i&&0<=l&&a[i]!==o[l];)l--;for(;1<=i&&0<=l;i--,l--)if(a[i]!==o[l]){if(1!==i||1!==l)do{if(i--,0>--l||a[i]!==o[l])return"\n"+a[i].replace(" at new "," at ")}while(1<=i&&0<=l);break}}}finally{V=!1,Error.prepareStackTrace=n}return(e=e?e.displayName||e.name:"")?H(e):""}function Q(e){switch(e.tag){case 5:return H(e.type);case 16:return H("Lazy");case 13:return H("Suspense");case 19:return H("SuspenseList");case 0:case 2:case 15:return e=$(e.type,!1);case 11:return e=$(e.type.render,!1);case 22:return e=$(e.type._render,!1);case 1:return e=$(e.type,!0);default:return""}}function K(e){if(null==e)return null;if("function"==typeof e)return e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case C:return"Fragment";case E:return"Portal";case x:return"Profiler";case T:return"StrictMode";case O:return"Suspense";case D:return"SuspenseList"}if("object"==typeof e)switch(e.$$typeof){case P:return(e.displayName||"Context")+".Consumer";case _:return(e._context.displayName||"Context")+".Provider";case N:var t=e.render;return t=t.displayName||t.name||"",e.displayName||(""!==t?"ForwardRef("+t+")":"ForwardRef");case I:return K(e.type);case R:return K(e._render);case M:t=e._payload,e=e._init;try{return K(e(t))}catch(e){}}return null}function Y(e){switch(typeof e){case"boolean":case"number":case"object":case"string":case"undefined":return e;default:return""}}function X(e){var t=e.type;return(e=e.nodeName)&&"input"===e.toLowerCase()&&("checkbox"===t||"radio"===t)}function q(e){e._valueTracker||(e._valueTracker=function(e){var t=X(e)?"checked":"value",n=Object.getOwnPropertyDescriptor(e.constructor.prototype,t),r=""+e[t];if(!e.hasOwnProperty(t)&&void 0!==n&&"function"==typeof n.get&&"function"==typeof n.set){var a=n.get,o=n.set;return Object.defineProperty(e,t,{configurable:!0,get:function(){return a.call(this)},set:function(e){r=""+e,o.call(this,e)}}),Object.defineProperty(e,t,{enumerable:n.enumerable}),{getValue:function(){return r},setValue:function(e){r=""+e},stopTracking:function(){e._valueTracker=null,delete e[t]}}}}(e))}function G(e){if(!e)return!1;var t=e._valueTracker;if(!t)return!0;var n=t.getValue(),r="";return e&&(r=X(e)?e.checked?"true":"false":e.value),(e=r)!==n&&(t.setValue(e),!0)}function J(e){if(void 0===(e=e||("undefined"!=typeof document?document:void 0)))return null;try{return e.activeElement||e.body}catch(t){return e.body}}function Z(e,t){var n=t.checked;return a({},t,{defaultChecked:void 0,defaultValue:void 0,value:void 0,checked:null!=n?n:e._wrapperState.initialChecked})}function ee(e,t){var n=null==t.defaultValue?"":t.defaultValue,r=null!=t.checked?t.checked:t.defaultChecked;n=Y(null!=t.value?t.value:n),e._wrapperState={initialChecked:r,initialValue:n,controlled:"checkbox"===t.type||"radio"===t.type?null!=t.checked:null!=t.value}}function te(e,t){null!=(t=t.checked)&&k(e,"checked",t,!1)}function ne(e,t){te(e,t);var n=Y(t.value),r=t.type;if(null!=n)"number"===r?(0===n&&""===e.value||e.value!=n)&&(e.value=""+n):e.value!==""+n&&(e.value=""+n);else if("submit"===r||"reset"===r)return void e.removeAttribute("value");t.hasOwnProperty("value")?ae(e,t.type,n):t.hasOwnProperty("defaultValue")&&ae(e,t.type,Y(t.defaultValue)),null==t.checked&&null!=t.defaultChecked&&(e.defaultChecked=!!t.defaultChecked)}function re(e,t,n){if(t.hasOwnProperty("value")||t.hasOwnProperty("defaultValue")){var r=t.type;if(!("submit"!==r&&"reset"!==r||void 0!==t.value&&null!==t.value))return;t=""+e._wrapperState.initialValue,n||t===e.value||(e.value=t),e.defaultValue=t}""!==(n=e.name)&&(e.name=""),e.defaultChecked=!!e._wrapperState.initialChecked,""!==n&&(e.name=n)}function ae(e,t,n){"number"===t&&J(e.ownerDocument)===e||(null==n?e.defaultValue=""+e._wrapperState.initialValue:e.defaultValue!==""+n&&(e.defaultValue=""+n))}function oe(e,t){return e=a({children:void 0},t),(t=function(e){var t="";return r.Children.forEach(e,(function(e){null!=e&&(t+=e)})),t}(t.children))&&(e.children=t),e}function ie(e,t,n,r){if(e=e.options,t){t={};for(var a=0;a<n.length;a++)t["$"+n[a]]=!0;for(n=0;n<e.length;n++)a=t.hasOwnProperty("$"+e[n].value),e[n].selected!==a&&(e[n].selected=a),a&&r&&(e[n].defaultSelected=!0)}else{for(n=""+Y(n),t=null,a=0;a<e.length;a++){if(e[a].value===n)return e[a].selected=!0,void(r&&(e[a].defaultSelected=!0));null!==t||e[a].disabled||(t=e[a])}null!==t&&(t.selected=!0)}}function le(e,t){if(null!=t.dangerouslySetInnerHTML)throw Error(i(91));return a({},t,{value:void 0,defaultValue:void 0,children:""+e._wrapperState.initialValue})}function ue(e,t){var n=t.value;if(null==n){if(n=t.children,t=t.defaultValue,null!=n){if(null!=t)throw Error(i(92));if(Array.isArray(n)){if(!(1>=n.length))throw Error(i(93));n=n[0]}t=n}null==t&&(t=""),n=t}e._wrapperState={initialValue:Y(n)}}function se(e,t){var n=Y(t.value),r=Y(t.defaultValue);null!=n&&((n=""+n)!==e.value&&(e.value=n),null==t.defaultValue&&e.defaultValue!==n&&(e.defaultValue=n)),null!=r&&(e.defaultValue=""+r)}function ce(e){var t=e.textContent;t===e._wrapperState.initialValue&&""!==t&&null!==t&&(e.value=t)}var fe="http://www.w3.org/1999/xhtml",de="http://www.w3.org/2000/svg";function pe(e){switch(e){case"svg":return"http://www.w3.org/2000/svg";case"math":return"http://www.w3.org/1998/Math/MathML";default:return"http://www.w3.org/1999/xhtml"}}function he(e,t){return null==e||"http://www.w3.org/1999/xhtml"===e?pe(t):"http://www.w3.org/2000/svg"===e&&"foreignObject"===t?"http://www.w3.org/1999/xhtml":e}var me,ve,ge=(ve=function(e,t){if(e.namespaceURI!==de||"innerHTML"in e)e.innerHTML=t;else{for((me=me||document.createElement("div")).innerHTML="<svg>"+t.valueOf().toString()+"</svg>",t=me.firstChild;e.firstChild;)e.removeChild(e.firstChild);for(;t.firstChild;)e.appendChild(t.firstChild)}},"undefined"!=typeof MSApp&&MSApp.execUnsafeLocalFunction?function(e,t,n,r){MSApp.execUnsafeLocalFunction((function(){return ve(e,t)}))}:ve);function ye(e,t){if(t){var n=e.firstChild;if(n&&n===e.lastChild&&3===n.nodeType)return void(n.nodeValue=t)}e.textContent=t}var be={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridArea:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},ke=["Webkit","ms","Moz","O"];function we(e,t,n){return null==t||"boolean"==typeof t||""===t?"":n||"number"!=typeof t||0===t||be.hasOwnProperty(e)&&be[e]?(""+t).trim():t+"px"}function Se(e,t){for(var n in e=e.style,t)if(t.hasOwnProperty(n)){var r=0===n.indexOf("--"),a=we(n,t[n],r);"float"===n&&(n="cssFloat"),r?e.setProperty(n,a):e[n]=a}}Object.keys(be).forEach((function(e){ke.forEach((function(t){t=t+e.charAt(0).toUpperCase()+e.substring(1),be[t]=be[e]}))}));var Ee=a({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0});function Ce(e,t){if(t){if(Ee[e]&&(null!=t.children||null!=t.dangerouslySetInnerHTML))throw Error(i(137,e));if(null!=t.dangerouslySetInnerHTML){if(null!=t.children)throw Error(i(60));if("object"!=typeof t.dangerouslySetInnerHTML||!("__html"in t.dangerouslySetInnerHTML))throw Error(i(61))}if(null!=t.style&&"object"!=typeof t.style)throw Error(i(62))}}function Te(e,t){if(-1===e.indexOf("-"))return"string"==typeof t.is;switch(e){case"annotation-xml":case"color-profile":case"font-face":case"font-face-src":case"font-face-uri":case"font-face-format":case"font-face-name":case"missing-glyph":return!1;default:return!0}}function xe(e){return(e=e.target||e.srcElement||window).correspondingUseElement&&(e=e.correspondingUseElement),3===e.nodeType?e.parentNode:e}var _e=null,Pe=null,Ne=null;function Oe(e){if(e=ea(e)){if("function"!=typeof _e)throw Error(i(280));var t=e.stateNode;t&&(t=na(t),_e(e.stateNode,e.type,t))}}function De(e){Pe?Ne?Ne.push(e):Ne=[e]:Pe=e}function Ie(){if(Pe){var e=Pe,t=Ne;if(Ne=Pe=null,Oe(e),t)for(e=0;e<t.length;e++)Oe(t[e])}}function Me(e,t){return e(t)}function Re(e,t,n,r,a){return e(t,n,r,a)}function Le(){}var ze=Me,Ae=!1,Fe=!1;function Ue(){null===Pe&&null===Ne||(Le(),Ie())}function je(e,t){var n=e.stateNode;if(null===n)return null;var r=na(n);if(null===r)return null;n=r[t];e:switch(t){case"onClick":case"onClickCapture":case"onDoubleClick":case"onDoubleClickCapture":case"onMouseDown":case"onMouseDownCapture":case"onMouseMove":case"onMouseMoveCapture":case"onMouseUp":case"onMouseUpCapture":case"onMouseEnter":(r=!r.disabled)||(r=!("button"===(e=e.type)||"input"===e||"select"===e||"textarea"===e)),e=!r;break e;default:e=!1}if(e)return null;if(n&&"function"!=typeof n)throw Error(i(231,t,typeof n));return n}var We=!1;if(f)try{var Be={};Object.defineProperty(Be,"passive",{get:function(){We=!0}}),window.addEventListener("test",Be,Be),window.removeEventListener("test",Be,Be)}catch(ve){We=!1}function He(e,t,n,r,a,o,i,l,u){var s=Array.prototype.slice.call(arguments,3);try{t.apply(n,s)}catch(e){this.onError(e)}}var Ve=!1,$e=null,Qe=!1,Ke=null,Ye={onError:function(e){Ve=!0,$e=e}};function Xe(e,t,n,r,a,o,i,l,u){Ve=!1,$e=null,He.apply(Ye,arguments)}function qe(e){var t=e,n=e;if(e.alternate)for(;t.return;)t=t.return;else{e=t;do{0!=(1026&(t=e).flags)&&(n=t.return),e=t.return}while(e)}return 3===t.tag?n:null}function Ge(e){if(13===e.tag){var t=e.memoizedState;if(null===t&&(null!==(e=e.alternate)&&(t=e.memoizedState)),null!==t)return t.dehydrated}return null}function Je(e){if(qe(e)!==e)throw Error(i(188))}function Ze(e){if(!(e=function(e){var t=e.alternate;if(!t){if(null===(t=qe(e)))throw Error(i(188));return t!==e?null:e}for(var n=e,r=t;;){var a=n.return;if(null===a)break;var o=a.alternate;if(null===o){if(null!==(r=a.return)){n=r;continue}break}if(a.child===o.child){for(o=a.child;o;){if(o===n)return Je(a),e;if(o===r)return Je(a),t;o=o.sibling}throw Error(i(188))}if(n.return!==r.return)n=a,r=o;else{for(var l=!1,u=a.child;u;){if(u===n){l=!0,n=a,r=o;break}if(u===r){l=!0,r=a,n=o;break}u=u.sibling}if(!l){for(u=o.child;u;){if(u===n){l=!0,n=o,r=a;break}if(u===r){l=!0,r=o,n=a;break}u=u.sibling}if(!l)throw Error(i(189))}}if(n.alternate!==r)throw Error(i(190))}if(3!==n.tag)throw Error(i(188));return n.stateNode.current===n?e:t}(e)))return null;for(var t=e;;){if(5===t.tag||6===t.tag)return t;if(t.child)t.child.return=t,t=t.child;else{if(t===e)break;for(;!t.sibling;){if(!t.return||t.return===e)return null;t=t.return}t.sibling.return=t.return,t=t.sibling}}return null}function et(e,t){for(var n=e.alternate;null!==t;){if(t===e||t===n)return!0;t=t.return}return!1}var tt,nt,rt,at,ot=!1,it=[],lt=null,ut=null,st=null,ct=new Map,ft=new Map,dt=[],pt="mousedown mouseup touchcancel touchend touchstart auxclick dblclick pointercancel pointerdown pointerup dragend dragstart drop compositionend compositionstart keydown keypress keyup input textInput copy cut paste click change contextmenu reset submit".split(" ");function ht(e,t,n,r,a){return{blockedOn:e,domEventName:t,eventSystemFlags:16|n,nativeEvent:a,targetContainers:[r]}}function mt(e,t){switch(e){case"focusin":case"focusout":lt=null;break;case"dragenter":case"dragleave":ut=null;break;case"mouseover":case"mouseout":st=null;break;case"pointerover":case"pointerout":ct.delete(t.pointerId);break;case"gotpointercapture":case"lostpointercapture":ft.delete(t.pointerId)}}function vt(e,t,n,r,a,o){return null===e||e.nativeEvent!==o?(e=ht(t,n,r,a,o),null!==t&&(null!==(t=ea(t))&&nt(t)),e):(e.eventSystemFlags|=r,t=e.targetContainers,null!==a&&-1===t.indexOf(a)&&t.push(a),e)}function gt(e){var t=Zr(e.target);if(null!==t){var n=qe(t);if(null!==n)if(13===(t=n.tag)){if(null!==(t=Ge(n)))return e.blockedOn=t,void at(e.lanePriority,(function(){o.unstable_runWithPriority(e.priority,(function(){rt(n)}))}))}else if(3===t&&n.stateNode.hydrate)return void(e.blockedOn=3===n.tag?n.stateNode.containerInfo:null)}e.blockedOn=null}function yt(e){if(null!==e.blockedOn)return!1;for(var t=e.targetContainers;0<t.length;){var n=Zt(e.domEventName,e.eventSystemFlags,t[0],e.nativeEvent);if(null!==n)return null!==(t=ea(n))&&nt(t),e.blockedOn=n,!1;t.shift()}return!0}function bt(e,t,n){yt(e)&&n.delete(t)}function kt(){for(ot=!1;0<it.length;){var e=it[0];if(null!==e.blockedOn){null!==(e=ea(e.blockedOn))&&tt(e);break}for(var t=e.targetContainers;0<t.length;){var n=Zt(e.domEventName,e.eventSystemFlags,t[0],e.nativeEvent);if(null!==n){e.blockedOn=n;break}t.shift()}null===e.blockedOn&&it.shift()}null!==lt&&yt(lt)&&(lt=null),null!==ut&&yt(ut)&&(ut=null),null!==st&&yt(st)&&(st=null),ct.forEach(bt),ft.forEach(bt)}function wt(e,t){e.blockedOn===t&&(e.blockedOn=null,ot||(ot=!0,o.unstable_scheduleCallback(o.unstable_NormalPriority,kt)))}function St(e){function t(t){return wt(t,e)}if(0<it.length){wt(it[0],e);for(var n=1;n<it.length;n++){var r=it[n];r.blockedOn===e&&(r.blockedOn=null)}}for(null!==lt&&wt(lt,e),null!==ut&&wt(ut,e),null!==st&&wt(st,e),ct.forEach(t),ft.forEach(t),n=0;n<dt.length;n++)(r=dt[n]).blockedOn===e&&(r.blockedOn=null);for(;0<dt.length&&null===(n=dt[0]).blockedOn;)gt(n),null===n.blockedOn&&dt.shift()}function Et(e,t){var n={};return n[e.toLowerCase()]=t.toLowerCase(),n["Webkit"+e]="webkit"+t,n["Moz"+e]="moz"+t,n}var Ct={animationend:Et("Animation","AnimationEnd"),animationiteration:Et("Animation","AnimationIteration"),animationstart:Et("Animation","AnimationStart"),transitionend:Et("Transition","TransitionEnd")},Tt={},xt={};function _t(e){if(Tt[e])return Tt[e];if(!Ct[e])return e;var t,n=Ct[e];for(t in n)if(n.hasOwnProperty(t)&&t in xt)return Tt[e]=n[t];return e}f&&(xt=document.createElement("div").style,"AnimationEvent"in window||(delete Ct.animationend.animation,delete Ct.animationiteration.animation,delete Ct.animationstart.animation),"TransitionEvent"in window||delete Ct.transitionend.transition);var Pt=_t("animationend"),Nt=_t("animationiteration"),Ot=_t("animationstart"),Dt=_t("transitionend"),It=new Map,Mt=new Map,Rt=["abort","abort",Pt,"animationEnd",Nt,"animationIteration",Ot,"animationStart","canplay","canPlay","canplaythrough","canPlayThrough","durationchange","durationChange","emptied","emptied","encrypted","encrypted","ended","ended","error","error","gotpointercapture","gotPointerCapture","load","load","loadeddata","loadedData","loadedmetadata","loadedMetadata","loadstart","loadStart","lostpointercapture","lostPointerCapture","playing","playing","progress","progress","seeking","seeking","stalled","stalled","suspend","suspend","timeupdate","timeUpdate",Dt,"transitionEnd","waiting","waiting"];function Lt(e,t){for(var n=0;n<e.length;n+=2){var r=e[n],a=e[n+1];a="on"+(a[0].toUpperCase()+a.slice(1)),Mt.set(r,t),It.set(r,a),s(a,[r])}}(0,o.unstable_now)();var zt=8;function At(e){if(0!=(1&e))return zt=15,1;if(0!=(2&e))return zt=14,2;if(0!=(4&e))return zt=13,4;var t=24&e;return 0!==t?(zt=12,t):0!=(32&e)?(zt=11,32):0!==(t=192&e)?(zt=10,t):0!=(256&e)?(zt=9,256):0!==(t=3584&e)?(zt=8,t):0!=(4096&e)?(zt=7,4096):0!==(t=4186112&e)?(zt=6,t):0!==(t=62914560&e)?(zt=5,t):67108864&e?(zt=4,67108864):0!=(134217728&e)?(zt=3,134217728):0!==(t=805306368&e)?(zt=2,t):0!=(1073741824&e)?(zt=1,1073741824):(zt=8,e)}function Ft(e,t){var n=e.pendingLanes;if(0===n)return zt=0;var r=0,a=0,o=e.expiredLanes,i=e.suspendedLanes,l=e.pingedLanes;if(0!==o)r=o,a=zt=15;else if(0!==(o=134217727&n)){var u=o&~i;0!==u?(r=At(u),a=zt):0!==(l&=o)&&(r=At(l),a=zt)}else 0!==(o=n&~i)?(r=At(o),a=zt):0!==l&&(r=At(l),a=zt);if(0===r)return 0;if(r=n&((0>(r=31-Vt(r))?0:1<<r)<<1)-1,0!==t&&t!==r&&0==(t&i)){if(At(t),a<=zt)return t;zt=a}if(0!==(t=e.entangledLanes))for(e=e.entanglements,t&=r;0<t;)a=1<<(n=31-Vt(t)),r|=e[n],t&=~a;return r}function Ut(e){return 0!==(e=-1073741825&e.pendingLanes)?e:1073741824&e?1073741824:0}function jt(e,t){switch(e){case 15:return 1;case 14:return 2;case 12:return 0===(e=Wt(24&~t))?jt(10,t):e;case 10:return 0===(e=Wt(192&~t))?jt(8,t):e;case 8:return 0===(e=Wt(3584&~t))&&(0===(e=Wt(4186112&~t))&&(e=512)),e;case 2:return 0===(t=Wt(805306368&~t))&&(t=268435456),t}throw Error(i(358,e))}function Wt(e){return e&-e}function Bt(e){for(var t=[],n=0;31>n;n++)t.push(e);return t}function Ht(e,t,n){e.pendingLanes|=t;var r=t-1;e.suspendedLanes&=r,e.pingedLanes&=r,(e=e.eventTimes)[t=31-Vt(t)]=n}var Vt=Math.clz32?Math.clz32:function(e){return 0===e?32:31-($t(e)/Qt|0)|0},$t=Math.log,Qt=Math.LN2;var Kt=o.unstable_UserBlockingPriority,Yt=o.unstable_runWithPriority,Xt=!0;function qt(e,t,n,r){Ae||Le();var a=Jt,o=Ae;Ae=!0;try{Re(a,e,t,n,r)}finally{(Ae=o)||Ue()}}function Gt(e,t,n,r){Yt(Kt,Jt.bind(null,e,t,n,r))}function Jt(e,t,n,r){var a;if(Xt)if((a=0==(4&t))&&0<it.length&&-1<pt.indexOf(e))e=ht(null,e,t,n,r),it.push(e);else{var o=Zt(e,t,n,r);if(null===o)a&&mt(e,r);else{if(a){if(-1<pt.indexOf(e))return e=ht(o,e,t,n,r),void it.push(e);if(function(e,t,n,r,a){switch(t){case"focusin":return lt=vt(lt,e,t,n,r,a),!0;case"dragenter":return ut=vt(ut,e,t,n,r,a),!0;case"mouseover":return st=vt(st,e,t,n,r,a),!0;case"pointerover":var o=a.pointerId;return ct.set(o,vt(ct.get(o)||null,e,t,n,r,a)),!0;case"gotpointercapture":return o=a.pointerId,ft.set(o,vt(ft.get(o)||null,e,t,n,r,a)),!0}return!1}(o,e,t,n,r))return;mt(e,r)}Ir(e,t,r,null,n)}}}function Zt(e,t,n,r){var a=xe(r);if(null!==(a=Zr(a))){var o=qe(a);if(null===o)a=null;else{var i=o.tag;if(13===i){if(null!==(a=Ge(o)))return a;a=null}else if(3===i){if(o.stateNode.hydrate)return 3===o.tag?o.stateNode.containerInfo:null;a=null}else o!==a&&(a=null)}}return Ir(e,t,r,a,n),null}var en=null,tn=null,nn=null;function rn(){if(nn)return nn;var e,t,n=tn,r=n.length,a="value"in en?en.value:en.textContent,o=a.length;for(e=0;e<r&&n[e]===a[e];e++);var i=r-e;for(t=1;t<=i&&n[r-t]===a[o-t];t++);return nn=a.slice(e,1<t?1-t:void 0)}function an(e){var t=e.keyCode;return"charCode"in e?0===(e=e.charCode)&&13===t&&(e=13):e=t,10===e&&(e=13),32<=e||13===e?e:0}function on(){return!0}function ln(){return!1}function un(e){function t(t,n,r,a,o){for(var i in this._reactName=t,this._targetInst=r,this.type=n,this.nativeEvent=a,this.target=o,this.currentTarget=null,e)e.hasOwnProperty(i)&&(t=e[i],this[i]=t?t(a):a[i]);return this.isDefaultPrevented=(null!=a.defaultPrevented?a.defaultPrevented:!1===a.returnValue)?on:ln,this.isPropagationStopped=ln,this}return a(t.prototype,{preventDefault:function(){this.defaultPrevented=!0;var e=this.nativeEvent;e&&(e.preventDefault?e.preventDefault():"unknown"!=typeof e.returnValue&&(e.returnValue=!1),this.isDefaultPrevented=on)},stopPropagation:function(){var e=this.nativeEvent;e&&(e.stopPropagation?e.stopPropagation():"unknown"!=typeof e.cancelBubble&&(e.cancelBubble=!0),this.isPropagationStopped=on)},persist:function(){},isPersistent:on}),t}var sn,cn,fn,dn={eventPhase:0,bubbles:0,cancelable:0,timeStamp:function(e){return e.timeStamp||Date.now()},defaultPrevented:0,isTrusted:0},pn=un(dn),hn=a({},dn,{view:0,detail:0}),mn=un(hn),vn=a({},hn,{screenX:0,screenY:0,clientX:0,clientY:0,pageX:0,pageY:0,ctrlKey:0,shiftKey:0,altKey:0,metaKey:0,getModifierState:_n,button:0,buttons:0,relatedTarget:function(e){return void 0===e.relatedTarget?e.fromElement===e.srcElement?e.toElement:e.fromElement:e.relatedTarget},movementX:function(e){return"movementX"in e?e.movementX:(e!==fn&&(fn&&"mousemove"===e.type?(sn=e.screenX-fn.screenX,cn=e.screenY-fn.screenY):cn=sn=0,fn=e),sn)},movementY:function(e){return"movementY"in e?e.movementY:cn}}),gn=un(vn),yn=un(a({},vn,{dataTransfer:0})),bn=un(a({},hn,{relatedTarget:0})),kn=un(a({},dn,{animationName:0,elapsedTime:0,pseudoElement:0})),wn=un(a({},dn,{clipboardData:function(e){return"clipboardData"in e?e.clipboardData:window.clipboardData}})),Sn=un(a({},dn,{data:0})),En={Esc:"Escape",Spacebar:" ",Left:"ArrowLeft",Up:"ArrowUp",Right:"ArrowRight",Down:"ArrowDown",Del:"Delete",Win:"OS",Menu:"ContextMenu",Apps:"ContextMenu",Scroll:"ScrollLock",MozPrintableKey:"Unidentified"},Cn={8:"Backspace",9:"Tab",12:"Clear",13:"Enter",16:"Shift",17:"Control",18:"Alt",19:"Pause",20:"CapsLock",27:"Escape",32:" ",33:"PageUp",34:"PageDown",35:"End",36:"Home",37:"ArrowLeft",38:"ArrowUp",39:"ArrowRight",40:"ArrowDown",45:"Insert",46:"Delete",112:"F1",113:"F2",114:"F3",115:"F4",116:"F5",117:"F6",118:"F7",119:"F8",120:"F9",121:"F10",122:"F11",123:"F12",144:"NumLock",145:"ScrollLock",224:"Meta"},Tn={Alt:"altKey",Control:"ctrlKey",Meta:"metaKey",Shift:"shiftKey"};function xn(e){var t=this.nativeEvent;return t.getModifierState?t.getModifierState(e):!!(e=Tn[e])&&!!t[e]}function _n(){return xn}var Pn=un(a({},hn,{key:function(e){if(e.key){var t=En[e.key]||e.key;if("Unidentified"!==t)return t}return"keypress"===e.type?13===(e=an(e))?"Enter":String.fromCharCode(e):"keydown"===e.type||"keyup"===e.type?Cn[e.keyCode]||"Unidentified":""},code:0,location:0,ctrlKey:0,shiftKey:0,altKey:0,metaKey:0,repeat:0,locale:0,getModifierState:_n,charCode:function(e){return"keypress"===e.type?an(e):0},keyCode:function(e){return"keydown"===e.type||"keyup"===e.type?e.keyCode:0},which:function(e){return"keypress"===e.type?an(e):"keydown"===e.type||"keyup"===e.type?e.keyCode:0}})),Nn=un(a({},vn,{pointerId:0,width:0,height:0,pressure:0,tangentialPressure:0,tiltX:0,tiltY:0,twist:0,pointerType:0,isPrimary:0})),On=un(a({},hn,{touches:0,targetTouches:0,changedTouches:0,altKey:0,metaKey:0,ctrlKey:0,shiftKey:0,getModifierState:_n})),Dn=un(a({},dn,{propertyName:0,elapsedTime:0,pseudoElement:0})),In=un(a({},vn,{deltaX:function(e){return"deltaX"in e?e.deltaX:"wheelDeltaX"in e?-e.wheelDeltaX:0},deltaY:function(e){return"deltaY"in e?e.deltaY:"wheelDeltaY"in e?-e.wheelDeltaY:"wheelDelta"in e?-e.wheelDelta:0},deltaZ:0,deltaMode:0})),Mn=[9,13,27,32],Rn=f&&"CompositionEvent"in window,Ln=null;f&&"documentMode"in document&&(Ln=document.documentMode);var zn=f&&"TextEvent"in window&&!Ln,An=f&&(!Rn||Ln&&8<Ln&&11>=Ln),Fn=String.fromCharCode(32),Un=!1;function jn(e,t){switch(e){case"keyup":return-1!==Mn.indexOf(t.keyCode);case"keydown":return 229!==t.keyCode;case"keypress":case"mousedown":case"focusout":return!0;default:return!1}}function Wn(e){return"object"==typeof(e=e.detail)&&"data"in e?e.data:null}var Bn=!1;var Hn={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};function Vn(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return"input"===t?!!Hn[e.type]:"textarea"===t}function $n(e,t,n,r){De(r),0<(t=Rr(t,"onChange")).length&&(n=new pn("onChange","change",null,n,r),e.push({event:n,listeners:t}))}var Qn=null,Kn=null;function Yn(e){xr(e,0)}function Xn(e){if(G(ta(e)))return e}function qn(e,t){if("change"===e)return t}var Gn=!1;if(f){var Jn;if(f){var Zn="oninput"in document;if(!Zn){var er=document.createElement("div");er.setAttribute("oninput","return;"),Zn="function"==typeof er.oninput}Jn=Zn}else Jn=!1;Gn=Jn&&(!document.documentMode||9<document.documentMode)}function tr(){Qn&&(Qn.detachEvent("onpropertychange",nr),Kn=Qn=null)}function nr(e){if("value"===e.propertyName&&Xn(Kn)){var t=[];if($n(t,Kn,e,xe(e)),e=Yn,Ae)e(t);else{Ae=!0;try{Me(e,t)}finally{Ae=!1,Ue()}}}}function rr(e,t,n){"focusin"===e?(tr(),Kn=n,(Qn=t).attachEvent("onpropertychange",nr)):"focusout"===e&&tr()}function ar(e){if("selectionchange"===e||"keyup"===e||"keydown"===e)return Xn(Kn)}function or(e,t){if("click"===e)return Xn(t)}function ir(e,t){if("input"===e||"change"===e)return Xn(t)}var lr="function"==typeof Object.is?Object.is:function(e,t){return e===t&&(0!==e||1/e==1/t)||e!=e&&t!=t},ur=Object.prototype.hasOwnProperty;function sr(e,t){if(lr(e,t))return!0;if("object"!=typeof e||null===e||"object"!=typeof t||null===t)return!1;var n=Object.keys(e),r=Object.keys(t);if(n.length!==r.length)return!1;for(r=0;r<n.length;r++)if(!ur.call(t,n[r])||!lr(e[n[r]],t[n[r]]))return!1;return!0}function cr(e){for(;e&&e.firstChild;)e=e.firstChild;return e}function fr(e,t){var n,r=cr(e);for(e=0;r;){if(3===r.nodeType){if(n=e+r.textContent.length,e<=t&&n>=t)return{node:r,offset:t-e};e=n}e:{for(;r;){if(r.nextSibling){r=r.nextSibling;break e}r=r.parentNode}r=void 0}r=cr(r)}}function dr(e,t){return!(!e||!t)&&(e===t||(!e||3!==e.nodeType)&&(t&&3===t.nodeType?dr(e,t.parentNode):"contains"in e?e.contains(t):!!e.compareDocumentPosition&&!!(16&e.compareDocumentPosition(t))))}function pr(){for(var e=window,t=J();t instanceof e.HTMLIFrameElement;){try{var n="string"==typeof t.contentWindow.location.href}catch(e){n=!1}if(!n)break;t=J((e=t.contentWindow).document)}return t}function hr(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&("input"===t&&("text"===e.type||"search"===e.type||"tel"===e.type||"url"===e.type||"password"===e.type)||"textarea"===t||"true"===e.contentEditable)}var mr=f&&"documentMode"in document&&11>=document.documentMode,vr=null,gr=null,yr=null,br=!1;function kr(e,t,n){var r=n.window===n?n.document:9===n.nodeType?n:n.ownerDocument;br||null==vr||vr!==J(r)||("selectionStart"in(r=vr)&&hr(r)?r={start:r.selectionStart,end:r.selectionEnd}:r={anchorNode:(r=(r.ownerDocument&&r.ownerDocument.defaultView||window).getSelection()).anchorNode,anchorOffset:r.anchorOffset,focusNode:r.focusNode,focusOffset:r.focusOffset},yr&&sr(yr,r)||(yr=r,0<(r=Rr(gr,"onSelect")).length&&(t=new pn("onSelect","select",null,t,n),e.push({event:t,listeners:r}),t.target=vr)))}Lt("cancel cancel click click close close contextmenu contextMenu copy copy cut cut auxclick auxClick dblclick doubleClick dragend dragEnd dragstart dragStart drop drop focusin focus focusout blur input input invalid invalid keydown keyDown keypress keyPress keyup keyUp mousedown mouseDown mouseup mouseUp paste paste pause pause play play pointercancel pointerCancel pointerdown pointerDown pointerup pointerUp ratechange rateChange reset reset seeked seeked submit submit touchcancel touchCancel touchend touchEnd touchstart touchStart volumechange volumeChange".split(" "),0),Lt("drag drag dragenter dragEnter dragexit dragExit dragleave dragLeave dragover dragOver mousemove mouseMove mouseout mouseOut mouseover mouseOver pointermove pointerMove pointerout pointerOut pointerover pointerOver scroll scroll toggle toggle touchmove touchMove wheel wheel".split(" "),1),Lt(Rt,2);for(var wr="change selectionchange textInput compositionstart compositionend compositionupdate".split(" "),Sr=0;Sr<wr.length;Sr++)Mt.set(wr[Sr],0);c("onMouseEnter",["mouseout","mouseover"]),c("onMouseLeave",["mouseout","mouseover"]),c("onPointerEnter",["pointerout","pointerover"]),c("onPointerLeave",["pointerout","pointerover"]),s("onChange","change click focusin focusout input keydown keyup selectionchange".split(" ")),s("onSelect","focusout contextmenu dragend focusin keydown keyup mousedown mouseup selectionchange".split(" ")),s("onBeforeInput",["compositionend","keypress","textInput","paste"]),s("onCompositionEnd","compositionend focusout keydown keypress keyup mousedown".split(" ")),s("onCompositionStart","compositionstart focusout keydown keypress keyup mousedown".split(" ")),s("onCompositionUpdate","compositionupdate focusout keydown keypress keyup mousedown".split(" "));var Er="abort canplay canplaythrough durationchange emptied encrypted ended error loadeddata loadedmetadata loadstart pause play playing progress ratechange seeked seeking stalled suspend timeupdate volumechange waiting".split(" "),Cr=new Set("cancel close invalid load scroll toggle".split(" ").concat(Er));function Tr(e,t,n){var r=e.type||"unknown-event";e.currentTarget=n,function(e,t,n,r,a,o,l,u,s){if(Xe.apply(this,arguments),Ve){if(!Ve)throw Error(i(198));var c=$e;Ve=!1,$e=null,Qe||(Qe=!0,Ke=c)}}(r,t,void 0,e),e.currentTarget=null}function xr(e,t){t=0!=(4&t);for(var n=0;n<e.length;n++){var r=e[n],a=r.event;r=r.listeners;e:{var o=void 0;if(t)for(var i=r.length-1;0<=i;i--){var l=r[i],u=l.instance,s=l.currentTarget;if(l=l.listener,u!==o&&a.isPropagationStopped())break e;Tr(a,l,s),o=u}else for(i=0;i<r.length;i++){if(u=(l=r[i]).instance,s=l.currentTarget,l=l.listener,u!==o&&a.isPropagationStopped())break e;Tr(a,l,s),o=u}}}if(Qe)throw e=Ke,Qe=!1,Ke=null,e}function _r(e,t){var n=ra(t),r=e+"__bubble";n.has(r)||(Dr(t,e,2,!1),n.add(r))}var Pr="_reactListening"+Math.random().toString(36).slice(2);function Nr(e){e[Pr]||(e[Pr]=!0,l.forEach((function(t){Cr.has(t)||Or(t,!1,e,null),Or(t,!0,e,null)})))}function Or(e,t,n,r){var a=4<arguments.length&&void 0!==arguments[4]?arguments[4]:0,o=n;if("selectionchange"===e&&9!==n.nodeType&&(o=n.ownerDocument),null!==r&&!t&&Cr.has(e)){if("scroll"!==e)return;a|=2,o=r}var i=ra(o),l=e+"__"+(t?"capture":"bubble");i.has(l)||(t&&(a|=4),Dr(o,e,a,t),i.add(l))}function Dr(e,t,n,r){var a=Mt.get(t);switch(void 0===a?2:a){case 0:a=qt;break;case 1:a=Gt;break;default:a=Jt}n=a.bind(null,t,n,e),a=void 0,!We||"touchstart"!==t&&"touchmove"!==t&&"wheel"!==t||(a=!0),r?void 0!==a?e.addEventListener(t,n,{capture:!0,passive:a}):e.addEventListener(t,n,!0):void 0!==a?e.addEventListener(t,n,{passive:a}):e.addEventListener(t,n,!1)}function Ir(e,t,n,r,a){var o=r;if(0==(1&t)&&0==(2&t)&&null!==r)e:for(;;){if(null===r)return;var i=r.tag;if(3===i||4===i){var l=r.stateNode.containerInfo;if(l===a||8===l.nodeType&&l.parentNode===a)break;if(4===i)for(i=r.return;null!==i;){var u=i.tag;if((3===u||4===u)&&((u=i.stateNode.containerInfo)===a||8===u.nodeType&&u.parentNode===a))return;i=i.return}for(;null!==l;){if(null===(i=Zr(l)))return;if(5===(u=i.tag)||6===u){r=o=i;continue e}l=l.parentNode}}r=r.return}!function(e,t,n){if(Fe)return e(t,n);Fe=!0;try{ze(e,t,n)}finally{Fe=!1,Ue()}}((function(){var r=o,a=xe(n),i=[];e:{var l=It.get(e);if(void 0!==l){var u=pn,s=e;switch(e){case"keypress":if(0===an(n))break e;case"keydown":case"keyup":u=Pn;break;case"focusin":s="focus",u=bn;break;case"focusout":s="blur",u=bn;break;case"beforeblur":case"afterblur":u=bn;break;case"click":if(2===n.button)break e;case"auxclick":case"dblclick":case"mousedown":case"mousemove":case"mouseup":case"mouseout":case"mouseover":case"contextmenu":u=gn;break;case"drag":case"dragend":case"dragenter":case"dragexit":case"dragleave":case"dragover":case"dragstart":case"drop":u=yn;break;case"touchcancel":case"touchend":case"touchmove":case"touchstart":u=On;break;case Pt:case Nt:case Ot:u=kn;break;case Dt:u=Dn;break;case"scroll":u=mn;break;case"wheel":u=In;break;case"copy":case"cut":case"paste":u=wn;break;case"gotpointercapture":case"lostpointercapture":case"pointercancel":case"pointerdown":case"pointermove":case"pointerout":case"pointerover":case"pointerup":u=Nn}var c=0!=(4&t),f=!c&&"scroll"===e,d=c?null!==l?l+"Capture":null:l;c=[];for(var p,h=r;null!==h;){var m=(p=h).stateNode;if(5===p.tag&&null!==m&&(p=m,null!==d&&(null!=(m=je(h,d))&&c.push(Mr(h,m,p)))),f)break;h=h.return}0<c.length&&(l=new u(l,s,null,n,a),i.push({event:l,listeners:c}))}}if(0==(7&t)){if(u="mouseout"===e||"pointerout"===e,(!(l="mouseover"===e||"pointerover"===e)||0!=(16&t)||!(s=n.relatedTarget||n.fromElement)||!Zr(s)&&!s[Gr])&&(u||l)&&(l=a.window===a?a:(l=a.ownerDocument)?l.defaultView||l.parentWindow:window,u?(u=r,null!==(s=(s=n.relatedTarget||n.toElement)?Zr(s):null)&&(s!==(f=qe(s))||5!==s.tag&&6!==s.tag)&&(s=null)):(u=null,s=r),u!==s)){if(c=gn,m="onMouseLeave",d="onMouseEnter",h="mouse","pointerout"!==e&&"pointerover"!==e||(c=Nn,m="onPointerLeave",d="onPointerEnter",h="pointer"),f=null==u?l:ta(u),p=null==s?l:ta(s),(l=new c(m,h+"leave",u,n,a)).target=f,l.relatedTarget=p,m=null,Zr(a)===r&&((c=new c(d,h+"enter",s,n,a)).target=p,c.relatedTarget=f,m=c),f=m,u&&s)e:{for(d=s,h=0,p=c=u;p;p=Lr(p))h++;for(p=0,m=d;m;m=Lr(m))p++;for(;0<h-p;)c=Lr(c),h--;for(;0<p-h;)d=Lr(d),p--;for(;h--;){if(c===d||null!==d&&c===d.alternate)break e;c=Lr(c),d=Lr(d)}c=null}else c=null;null!==u&&zr(i,l,u,c,!1),null!==s&&null!==f&&zr(i,f,s,c,!0)}if("select"===(u=(l=r?ta(r):window).nodeName&&l.nodeName.toLowerCase())||"input"===u&&"file"===l.type)var v=qn;else if(Vn(l))if(Gn)v=ir;else{v=ar;var g=rr}else(u=l.nodeName)&&"input"===u.toLowerCase()&&("checkbox"===l.type||"radio"===l.type)&&(v=or);switch(v&&(v=v(e,r))?$n(i,v,n,a):(g&&g(e,l,r),"focusout"===e&&(g=l._wrapperState)&&g.controlled&&"number"===l.type&&ae(l,"number",l.value)),g=r?ta(r):window,e){case"focusin":(Vn(g)||"true"===g.contentEditable)&&(vr=g,gr=r,yr=null);break;case"focusout":yr=gr=vr=null;break;case"mousedown":br=!0;break;case"contextmenu":case"mouseup":case"dragend":br=!1,kr(i,n,a);break;case"selectionchange":if(mr)break;case"keydown":case"keyup":kr(i,n,a)}var y;if(Rn)e:{switch(e){case"compositionstart":var b="onCompositionStart";break e;case"compositionend":b="onCompositionEnd";break e;case"compositionupdate":b="onCompositionUpdate";break e}b=void 0}else Bn?jn(e,n)&&(b="onCompositionEnd"):"keydown"===e&&229===n.keyCode&&(b="onCompositionStart");b&&(An&&"ko"!==n.locale&&(Bn||"onCompositionStart"!==b?"onCompositionEnd"===b&&Bn&&(y=rn()):(tn="value"in(en=a)?en.value:en.textContent,Bn=!0)),0<(g=Rr(r,b)).length&&(b=new Sn(b,e,null,n,a),i.push({event:b,listeners:g}),y?b.data=y:null!==(y=Wn(n))&&(b.data=y))),(y=zn?function(e,t){switch(e){case"compositionend":return Wn(t);case"keypress":return 32!==t.which?null:(Un=!0,Fn);case"textInput":return(e=t.data)===Fn&&Un?null:e;default:return null}}(e,n):function(e,t){if(Bn)return"compositionend"===e||!Rn&&jn(e,t)?(e=rn(),nn=tn=en=null,Bn=!1,e):null;switch(e){case"paste":return null;case"keypress":if(!(t.ctrlKey||t.altKey||t.metaKey)||t.ctrlKey&&t.altKey){if(t.char&&1<t.char.length)return t.char;if(t.which)return String.fromCharCode(t.which)}return null;case"compositionend":return An&&"ko"!==t.locale?null:t.data;default:return null}}(e,n))&&(0<(r=Rr(r,"onBeforeInput")).length&&(a=new Sn("onBeforeInput","beforeinput",null,n,a),i.push({event:a,listeners:r}),a.data=y))}xr(i,t)}))}function Mr(e,t,n){return{instance:e,listener:t,currentTarget:n}}function Rr(e,t){for(var n=t+"Capture",r=[];null!==e;){var a=e,o=a.stateNode;5===a.tag&&null!==o&&(a=o,null!=(o=je(e,n))&&r.unshift(Mr(e,o,a)),null!=(o=je(e,t))&&r.push(Mr(e,o,a))),e=e.return}return r}function Lr(e){if(null===e)return null;do{e=e.return}while(e&&5!==e.tag);return e||null}function zr(e,t,n,r,a){for(var o=t._reactName,i=[];null!==n&&n!==r;){var l=n,u=l.alternate,s=l.stateNode;if(null!==u&&u===r)break;5===l.tag&&null!==s&&(l=s,a?null!=(u=je(n,o))&&i.unshift(Mr(n,u,l)):a||null!=(u=je(n,o))&&i.push(Mr(n,u,l))),n=n.return}0!==i.length&&e.push({event:t,listeners:i})}function Ar(){}var Fr=null,Ur=null;function jr(e,t){switch(e){case"button":case"input":case"select":case"textarea":return!!t.autoFocus}return!1}function Wr(e,t){return"textarea"===e||"option"===e||"noscript"===e||"string"==typeof t.children||"number"==typeof t.children||"object"==typeof t.dangerouslySetInnerHTML&&null!==t.dangerouslySetInnerHTML&&null!=t.dangerouslySetInnerHTML.__html}var Br="function"==typeof setTimeout?setTimeout:void 0,Hr="function"==typeof clearTimeout?clearTimeout:void 0;function Vr(e){1===e.nodeType?e.textContent="":9===e.nodeType&&(null!=(e=e.body)&&(e.textContent=""))}function $r(e){for(;null!=e;e=e.nextSibling){var t=e.nodeType;if(1===t||3===t)break}return e}function Qr(e){e=e.previousSibling;for(var t=0;e;){if(8===e.nodeType){var n=e.data;if("$"===n||"$!"===n||"$?"===n){if(0===t)return e;t--}else"/$"===n&&t++}e=e.previousSibling}return null}var Kr=0;var Yr=Math.random().toString(36).slice(2),Xr="__reactFiber$"+Yr,qr="__reactProps$"+Yr,Gr="__reactContainer$"+Yr,Jr="__reactEvents$"+Yr;function Zr(e){var t=e[Xr];if(t)return t;for(var n=e.parentNode;n;){if(t=n[Gr]||n[Xr]){if(n=t.alternate,null!==t.child||null!==n&&null!==n.child)for(e=Qr(e);null!==e;){if(n=e[Xr])return n;e=Qr(e)}return t}n=(e=n).parentNode}return null}function ea(e){return!(e=e[Xr]||e[Gr])||5!==e.tag&&6!==e.tag&&13!==e.tag&&3!==e.tag?null:e}function ta(e){if(5===e.tag||6===e.tag)return e.stateNode;throw Error(i(33))}function na(e){return e[qr]||null}function ra(e){var t=e[Jr];return void 0===t&&(t=e[Jr]=new Set),t}var aa=[],oa=-1;function ia(e){return{current:e}}function la(e){0>oa||(e.current=aa[oa],aa[oa]=null,oa--)}function ua(e,t){oa++,aa[oa]=e.current,e.current=t}var sa={},ca=ia(sa),fa=ia(!1),da=sa;function pa(e,t){var n=e.type.contextTypes;if(!n)return sa;var r=e.stateNode;if(r&&r.__reactInternalMemoizedUnmaskedChildContext===t)return r.__reactInternalMemoizedMaskedChildContext;var a,o={};for(a in n)o[a]=t[a];return r&&((e=e.stateNode).__reactInternalMemoizedUnmaskedChildContext=t,e.__reactInternalMemoizedMaskedChildContext=o),o}function ha(e){return null!=(e=e.childContextTypes)}function ma(){la(fa),la(ca)}function va(e,t,n){if(ca.current!==sa)throw Error(i(168));ua(ca,t),ua(fa,n)}function ga(e,t,n){var r=e.stateNode;if(e=t.childContextTypes,"function"!=typeof r.getChildContext)return n;for(var o in r=r.getChildContext())if(!(o in e))throw Error(i(108,K(t)||"Unknown",o));return a({},n,r)}function ya(e){return e=(e=e.stateNode)&&e.__reactInternalMemoizedMergedChildContext||sa,da=ca.current,ua(ca,e),ua(fa,fa.current),!0}function ba(e,t,n){var r=e.stateNode;if(!r)throw Error(i(169));n?(e=ga(e,t,da),r.__reactInternalMemoizedMergedChildContext=e,la(fa),la(ca),ua(ca,e)):la(fa),ua(fa,n)}var ka=null,wa=null,Sa=o.unstable_runWithPriority,Ea=o.unstable_scheduleCallback,Ca=o.unstable_cancelCallback,Ta=o.unstable_shouldYield,xa=o.unstable_requestPaint,_a=o.unstable_now,Pa=o.unstable_getCurrentPriorityLevel,Na=o.unstable_ImmediatePriority,Oa=o.unstable_UserBlockingPriority,Da=o.unstable_NormalPriority,Ia=o.unstable_LowPriority,Ma=o.unstable_IdlePriority,Ra={},La=void 0!==xa?xa:function(){},za=null,Aa=null,Fa=!1,Ua=_a(),ja=1e4>Ua?_a:function(){return _a()-Ua};function Wa(){switch(Pa()){case Na:return 99;case Oa:return 98;case Da:return 97;case Ia:return 96;case Ma:return 95;default:throw Error(i(332))}}function Ba(e){switch(e){case 99:return Na;case 98:return Oa;case 97:return Da;case 96:return Ia;case 95:return Ma;default:throw Error(i(332))}}function Ha(e,t){return e=Ba(e),Sa(e,t)}function Va(e,t,n){return e=Ba(e),Ea(e,t,n)}function $a(){if(null!==Aa){var e=Aa;Aa=null,Ca(e)}Qa()}function Qa(){if(!Fa&&null!==za){Fa=!0;var e=0;try{var t=za;Ha(99,(function(){for(;e<t.length;e++){var n=t[e];do{n=n(!0)}while(null!==n)}})),za=null}catch(t){throw null!==za&&(za=za.slice(e+1)),Ea(Na,$a),t}finally{Fa=!1}}}var Ka=w.ReactCurrentBatchConfig;function Ya(e,t){if(e&&e.defaultProps){for(var n in t=a({},t),e=e.defaultProps)void 0===t[n]&&(t[n]=e[n]);return t}return t}var Xa=ia(null),qa=null,Ga=null,Ja=null;function Za(){Ja=Ga=qa=null}function eo(e){var t=Xa.current;la(Xa),e.type._context._currentValue=t}function to(e,t){for(;null!==e;){var n=e.alternate;if((e.childLanes&t)===t){if(null===n||(n.childLanes&t)===t)break;n.childLanes|=t}else e.childLanes|=t,null!==n&&(n.childLanes|=t);e=e.return}}function no(e,t){qa=e,Ja=Ga=null,null!==(e=e.dependencies)&&null!==e.firstContext&&(0!=(e.lanes&t)&&(Ri=!0),e.firstContext=null)}function ro(e,t){if(Ja!==e&&!1!==t&&0!==t)if("number"==typeof t&&1073741823!==t||(Ja=e,t=1073741823),t={context:e,observedBits:t,next:null},null===Ga){if(null===qa)throw Error(i(308));Ga=t,qa.dependencies={lanes:0,firstContext:t,responders:null}}else Ga=Ga.next=t;return e._currentValue}var ao=!1;function oo(e){e.updateQueue={baseState:e.memoizedState,firstBaseUpdate:null,lastBaseUpdate:null,shared:{pending:null},effects:null}}function io(e,t){e=e.updateQueue,t.updateQueue===e&&(t.updateQueue={baseState:e.baseState,firstBaseUpdate:e.firstBaseUpdate,lastBaseUpdate:e.lastBaseUpdate,shared:e.shared,effects:e.effects})}function lo(e,t){return{eventTime:e,lane:t,tag:0,payload:null,callback:null,next:null}}function uo(e,t){if(null!==(e=e.updateQueue)){var n=(e=e.shared).pending;null===n?t.next=t:(t.next=n.next,n.next=t),e.pending=t}}function so(e,t){var n=e.updateQueue,r=e.alternate;if(null!==r&&n===(r=r.updateQueue)){var a=null,o=null;if(null!==(n=n.firstBaseUpdate)){do{var i={eventTime:n.eventTime,lane:n.lane,tag:n.tag,payload:n.payload,callback:n.callback,next:null};null===o?a=o=i:o=o.next=i,n=n.next}while(null!==n);null===o?a=o=t:o=o.next=t}else a=o=t;return n={baseState:r.baseState,firstBaseUpdate:a,lastBaseUpdate:o,shared:r.shared,effects:r.effects},void(e.updateQueue=n)}null===(e=n.lastBaseUpdate)?n.firstBaseUpdate=t:e.next=t,n.lastBaseUpdate=t}function co(e,t,n,r){var o=e.updateQueue;ao=!1;var i=o.firstBaseUpdate,l=o.lastBaseUpdate,u=o.shared.pending;if(null!==u){o.shared.pending=null;var s=u,c=s.next;s.next=null,null===l?i=c:l.next=c,l=s;var f=e.alternate;if(null!==f){var d=(f=f.updateQueue).lastBaseUpdate;d!==l&&(null===d?f.firstBaseUpdate=c:d.next=c,f.lastBaseUpdate=s)}}if(null!==i){for(d=o.baseState,l=0,f=c=s=null;;){u=i.lane;var p=i.eventTime;if((r&u)===u){null!==f&&(f=f.next={eventTime:p,lane:0,tag:i.tag,payload:i.payload,callback:i.callback,next:null});e:{var h=e,m=i;switch(u=t,p=n,m.tag){case 1:if("function"==typeof(h=m.payload)){d=h.call(p,d,u);break e}d=h;break e;case 3:h.flags=-4097&h.flags|64;case 0:if(null==(u="function"==typeof(h=m.payload)?h.call(p,d,u):h))break e;d=a({},d,u);break e;case 2:ao=!0}}null!==i.callback&&(e.flags|=32,null===(u=o.effects)?o.effects=[i]:u.push(i))}else p={eventTime:p,lane:u,tag:i.tag,payload:i.payload,callback:i.callback,next:null},null===f?(c=f=p,s=d):f=f.next=p,l|=u;if(null===(i=i.next)){if(null===(u=o.shared.pending))break;i=u.next,u.next=null,o.lastBaseUpdate=u,o.shared.pending=null}}null===f&&(s=d),o.baseState=s,o.firstBaseUpdate=c,o.lastBaseUpdate=f,Fl|=l,e.lanes=l,e.memoizedState=d}}function fo(e,t,n){if(e=t.effects,t.effects=null,null!==e)for(t=0;t<e.length;t++){var r=e[t],a=r.callback;if(null!==a){if(r.callback=null,r=n,"function"!=typeof a)throw Error(i(191,a));a.call(r)}}}var po=(new r.Component).refs;function ho(e,t,n,r){n=null==(n=n(r,t=e.memoizedState))?t:a({},t,n),e.memoizedState=n,0===e.lanes&&(e.updateQueue.baseState=n)}var mo={isMounted:function(e){return!!(e=e._reactInternals)&&qe(e)===e},enqueueSetState:function(e,t,n){e=e._reactInternals;var r=su(),a=cu(e),o=lo(r,a);o.payload=t,null!=n&&(o.callback=n),uo(e,o),fu(e,a,r)},enqueueReplaceState:function(e,t,n){e=e._reactInternals;var r=su(),a=cu(e),o=lo(r,a);o.tag=1,o.payload=t,null!=n&&(o.callback=n),uo(e,o),fu(e,a,r)},enqueueForceUpdate:function(e,t){e=e._reactInternals;var n=su(),r=cu(e),a=lo(n,r);a.tag=2,null!=t&&(a.callback=t),uo(e,a),fu(e,r,n)}};function vo(e,t,n,r,a,o,i){return"function"==typeof(e=e.stateNode).shouldComponentUpdate?e.shouldComponentUpdate(r,o,i):!t.prototype||!t.prototype.isPureReactComponent||(!sr(n,r)||!sr(a,o))}function go(e,t,n){var r=!1,a=sa,o=t.contextType;return"object"==typeof o&&null!==o?o=ro(o):(a=ha(t)?da:ca.current,o=(r=null!=(r=t.contextTypes))?pa(e,a):sa),t=new t(n,o),e.memoizedState=null!==t.state&&void 0!==t.state?t.state:null,t.updater=mo,e.stateNode=t,t._reactInternals=e,r&&((e=e.stateNode).__reactInternalMemoizedUnmaskedChildContext=a,e.__reactInternalMemoizedMaskedChildContext=o),t}function yo(e,t,n,r){e=t.state,"function"==typeof t.componentWillReceiveProps&&t.componentWillReceiveProps(n,r),"function"==typeof t.UNSAFE_componentWillReceiveProps&&t.UNSAFE_componentWillReceiveProps(n,r),t.state!==e&&mo.enqueueReplaceState(t,t.state,null)}function bo(e,t,n,r){var a=e.stateNode;a.props=n,a.state=e.memoizedState,a.refs=po,oo(e);var o=t.contextType;"object"==typeof o&&null!==o?a.context=ro(o):(o=ha(t)?da:ca.current,a.context=pa(e,o)),co(e,n,a,r),a.state=e.memoizedState,"function"==typeof(o=t.getDerivedStateFromProps)&&(ho(e,t,o,n),a.state=e.memoizedState),"function"==typeof t.getDerivedStateFromProps||"function"==typeof a.getSnapshotBeforeUpdate||"function"!=typeof a.UNSAFE_componentWillMount&&"function"!=typeof a.componentWillMount||(t=a.state,"function"==typeof a.componentWillMount&&a.componentWillMount(),"function"==typeof a.UNSAFE_componentWillMount&&a.UNSAFE_componentWillMount(),t!==a.state&&mo.enqueueReplaceState(a,a.state,null),co(e,n,a,r),a.state=e.memoizedState),"function"==typeof a.componentDidMount&&(e.flags|=4)}var ko=Array.isArray;function wo(e,t,n){if(null!==(e=n.ref)&&"function"!=typeof e&&"object"!=typeof e){if(n._owner){if(n=n._owner){if(1!==n.tag)throw Error(i(309));var r=n.stateNode}if(!r)throw Error(i(147,e));var a=""+e;return null!==t&&null!==t.ref&&"function"==typeof t.ref&&t.ref._stringRef===a?t.ref:((t=function(e){var t=r.refs;t===po&&(t=r.refs={}),null===e?delete t[a]:t[a]=e})._stringRef=a,t)}if("string"!=typeof e)throw Error(i(284));if(!n._owner)throw Error(i(290,e))}return e}function So(e,t){if("textarea"!==e.type)throw Error(i(31,"[object Object]"===Object.prototype.toString.call(t)?"object with keys {"+Object.keys(t).join(", ")+"}":t))}function Eo(e){function t(t,n){if(e){var r=t.lastEffect;null!==r?(r.nextEffect=n,t.lastEffect=n):t.firstEffect=t.lastEffect=n,n.nextEffect=null,n.flags=8}}function n(n,r){if(!e)return null;for(;null!==r;)t(n,r),r=r.sibling;return null}function r(e,t){for(e=new Map;null!==t;)null!==t.key?e.set(t.key,t):e.set(t.index,t),t=t.sibling;return e}function a(e,t){return(e=Hu(e,t)).index=0,e.sibling=null,e}function o(t,n,r){return t.index=r,e?null!==(r=t.alternate)?(r=r.index)<n?(t.flags=2,n):r:(t.flags=2,n):n}function l(t){return e&&null===t.alternate&&(t.flags=2),t}function u(e,t,n,r){return null===t||6!==t.tag?((t=Ku(n,e.mode,r)).return=e,t):((t=a(t,n)).return=e,t)}function s(e,t,n,r){return null!==t&&t.elementType===n.type?((r=a(t,n.props)).ref=wo(e,t,n),r.return=e,r):((r=Vu(n.type,n.key,n.props,null,e.mode,r)).ref=wo(e,t,n),r.return=e,r)}function c(e,t,n,r){return null===t||4!==t.tag||t.stateNode.containerInfo!==n.containerInfo||t.stateNode.implementation!==n.implementation?((t=Yu(n,e.mode,r)).return=e,t):((t=a(t,n.children||[])).return=e,t)}function f(e,t,n,r,o){return null===t||7!==t.tag?((t=$u(n,e.mode,r,o)).return=e,t):((t=a(t,n)).return=e,t)}function d(e,t,n){if("string"==typeof t||"number"==typeof t)return(t=Ku(""+t,e.mode,n)).return=e,t;if("object"==typeof t&&null!==t){switch(t.$$typeof){case S:return(n=Vu(t.type,t.key,t.props,null,e.mode,n)).ref=wo(e,null,t),n.return=e,n;case E:return(t=Yu(t,e.mode,n)).return=e,t}if(ko(t)||B(t))return(t=$u(t,e.mode,n,null)).return=e,t;So(e,t)}return null}function p(e,t,n,r){var a=null!==t?t.key:null;if("string"==typeof n||"number"==typeof n)return null!==a?null:u(e,t,""+n,r);if("object"==typeof n&&null!==n){switch(n.$$typeof){case S:return n.key===a?n.type===C?f(e,t,n.props.children,r,a):s(e,t,n,r):null;case E:return n.key===a?c(e,t,n,r):null}if(ko(n)||B(n))return null!==a?null:f(e,t,n,r,null);So(e,n)}return null}function h(e,t,n,r,a){if("string"==typeof r||"number"==typeof r)return u(t,e=e.get(n)||null,""+r,a);if("object"==typeof r&&null!==r){switch(r.$$typeof){case S:return e=e.get(null===r.key?n:r.key)||null,r.type===C?f(t,e,r.props.children,a,r.key):s(t,e,r,a);case E:return c(t,e=e.get(null===r.key?n:r.key)||null,r,a)}if(ko(r)||B(r))return f(t,e=e.get(n)||null,r,a,null);So(t,r)}return null}function m(a,i,l,u){for(var s=null,c=null,f=i,m=i=0,v=null;null!==f&&m<l.length;m++){f.index>m?(v=f,f=null):v=f.sibling;var g=p(a,f,l[m],u);if(null===g){null===f&&(f=v);break}e&&f&&null===g.alternate&&t(a,f),i=o(g,i,m),null===c?s=g:c.sibling=g,c=g,f=v}if(m===l.length)return n(a,f),s;if(null===f){for(;m<l.length;m++)null!==(f=d(a,l[m],u))&&(i=o(f,i,m),null===c?s=f:c.sibling=f,c=f);return s}for(f=r(a,f);m<l.length;m++)null!==(v=h(f,a,m,l[m],u))&&(e&&null!==v.alternate&&f.delete(null===v.key?m:v.key),i=o(v,i,m),null===c?s=v:c.sibling=v,c=v);return e&&f.forEach((function(e){return t(a,e)})),s}function v(a,l,u,s){var c=B(u);if("function"!=typeof c)throw Error(i(150));if(null==(u=c.call(u)))throw Error(i(151));for(var f=c=null,m=l,v=l=0,g=null,y=u.next();null!==m&&!y.done;v++,y=u.next()){m.index>v?(g=m,m=null):g=m.sibling;var b=p(a,m,y.value,s);if(null===b){null===m&&(m=g);break}e&&m&&null===b.alternate&&t(a,m),l=o(b,l,v),null===f?c=b:f.sibling=b,f=b,m=g}if(y.done)return n(a,m),c;if(null===m){for(;!y.done;v++,y=u.next())null!==(y=d(a,y.value,s))&&(l=o(y,l,v),null===f?c=y:f.sibling=y,f=y);return c}for(m=r(a,m);!y.done;v++,y=u.next())null!==(y=h(m,a,v,y.value,s))&&(e&&null!==y.alternate&&m.delete(null===y.key?v:y.key),l=o(y,l,v),null===f?c=y:f.sibling=y,f=y);return e&&m.forEach((function(e){return t(a,e)})),c}return function(e,r,o,u){var s="object"==typeof o&&null!==o&&o.type===C&&null===o.key;s&&(o=o.props.children);var c="object"==typeof o&&null!==o;if(c)switch(o.$$typeof){case S:e:{for(c=o.key,s=r;null!==s;){if(s.key===c){switch(s.tag){case 7:if(o.type===C){n(e,s.sibling),(r=a(s,o.props.children)).return=e,e=r;break e}break;default:if(s.elementType===o.type){n(e,s.sibling),(r=a(s,o.props)).ref=wo(e,s,o),r.return=e,e=r;break e}}n(e,s);break}t(e,s),s=s.sibling}o.type===C?((r=$u(o.props.children,e.mode,u,o.key)).return=e,e=r):((u=Vu(o.type,o.key,o.props,null,e.mode,u)).ref=wo(e,r,o),u.return=e,e=u)}return l(e);case E:e:{for(s=o.key;null!==r;){if(r.key===s){if(4===r.tag&&r.stateNode.containerInfo===o.containerInfo&&r.stateNode.implementation===o.implementation){n(e,r.sibling),(r=a(r,o.children||[])).return=e,e=r;break e}n(e,r);break}t(e,r),r=r.sibling}(r=Yu(o,e.mode,u)).return=e,e=r}return l(e)}if("string"==typeof o||"number"==typeof o)return o=""+o,null!==r&&6===r.tag?(n(e,r.sibling),(r=a(r,o)).return=e,e=r):(n(e,r),(r=Ku(o,e.mode,u)).return=e,e=r),l(e);if(ko(o))return m(e,r,o,u);if(B(o))return v(e,r,o,u);if(c&&So(e,o),void 0===o&&!s)switch(e.tag){case 1:case 22:case 0:case 11:case 15:throw Error(i(152,K(e.type)||"Component"))}return n(e,r)}}var Co=Eo(!0),To=Eo(!1),xo={},_o=ia(xo),Po=ia(xo),No=ia(xo);function Oo(e){if(e===xo)throw Error(i(174));return e}function Do(e,t){switch(ua(No,t),ua(Po,e),ua(_o,xo),e=t.nodeType){case 9:case 11:t=(t=t.documentElement)?t.namespaceURI:he(null,"");break;default:t=he(t=(e=8===e?t.parentNode:t).namespaceURI||null,e=e.tagName)}la(_o),ua(_o,t)}function Io(){la(_o),la(Po),la(No)}function Mo(e){Oo(No.current);var t=Oo(_o.current),n=he(t,e.type);t!==n&&(ua(Po,e),ua(_o,n))}function Ro(e){Po.current===e&&(la(_o),la(Po))}var Lo=ia(0);function zo(e){for(var t=e;null!==t;){if(13===t.tag){var n=t.memoizedState;if(null!==n&&(null===(n=n.dehydrated)||"$?"===n.data||"$!"===n.data))return t}else if(19===t.tag&&void 0!==t.memoizedProps.revealOrder){if(0!=(64&t.flags))return t}else if(null!==t.child){t.child.return=t,t=t.child;continue}if(t===e)break;for(;null===t.sibling;){if(null===t.return||t.return===e)return null;t=t.return}t.sibling.return=t.return,t=t.sibling}return null}var Ao=null,Fo=null,Uo=!1;function jo(e,t){var n=Wu(5,null,null,0);n.elementType="DELETED",n.type="DELETED",n.stateNode=t,n.return=e,n.flags=8,null!==e.lastEffect?(e.lastEffect.nextEffect=n,e.lastEffect=n):e.firstEffect=e.lastEffect=n}function Wo(e,t){switch(e.tag){case 5:var n=e.type;return null!==(t=1!==t.nodeType||n.toLowerCase()!==t.nodeName.toLowerCase()?null:t)&&(e.stateNode=t,!0);case 6:return null!==(t=""===e.pendingProps||3!==t.nodeType?null:t)&&(e.stateNode=t,!0);case 13:default:return!1}}function Bo(e){if(Uo){var t=Fo;if(t){var n=t;if(!Wo(e,t)){if(!(t=$r(n.nextSibling))||!Wo(e,t))return e.flags=-1025&e.flags|2,Uo=!1,void(Ao=e);jo(Ao,n)}Ao=e,Fo=$r(t.firstChild)}else e.flags=-1025&e.flags|2,Uo=!1,Ao=e}}function Ho(e){for(e=e.return;null!==e&&5!==e.tag&&3!==e.tag&&13!==e.tag;)e=e.return;Ao=e}function Vo(e){if(e!==Ao)return!1;if(!Uo)return Ho(e),Uo=!0,!1;var t=e.type;if(5!==e.tag||"head"!==t&&"body"!==t&&!Wr(t,e.memoizedProps))for(t=Fo;t;)jo(e,t),t=$r(t.nextSibling);if(Ho(e),13===e.tag){if(!(e=null!==(e=e.memoizedState)?e.dehydrated:null))throw Error(i(317));e:{for(e=e.nextSibling,t=0;e;){if(8===e.nodeType){var n=e.data;if("/$"===n){if(0===t){Fo=$r(e.nextSibling);break e}t--}else"$"!==n&&"$!"!==n&&"$?"!==n||t++}e=e.nextSibling}Fo=null}}else Fo=Ao?$r(e.stateNode.nextSibling):null;return!0}function $o(){Fo=Ao=null,Uo=!1}var Qo=[];function Ko(){for(var e=0;e<Qo.length;e++)Qo[e]._workInProgressVersionPrimary=null;Qo.length=0}var Yo=w.ReactCurrentDispatcher,Xo=w.ReactCurrentBatchConfig,qo=0,Go=null,Jo=null,Zo=null,ei=!1,ti=!1;function ni(){throw Error(i(321))}function ri(e,t){if(null===t)return!1;for(var n=0;n<t.length&&n<e.length;n++)if(!lr(e[n],t[n]))return!1;return!0}function ai(e,t,n,r,a,o){if(qo=o,Go=t,t.memoizedState=null,t.updateQueue=null,t.lanes=0,Yo.current=null===e||null===e.memoizedState?Oi:Di,e=n(r,a),ti){o=0;do{if(ti=!1,!(25>o))throw Error(i(301));o+=1,Zo=Jo=null,t.updateQueue=null,Yo.current=Ii,e=n(r,a)}while(ti)}if(Yo.current=Ni,t=null!==Jo&&null!==Jo.next,qo=0,Zo=Jo=Go=null,ei=!1,t)throw Error(i(300));return e}function oi(){var e={memoizedState:null,baseState:null,baseQueue:null,queue:null,next:null};return null===Zo?Go.memoizedState=Zo=e:Zo=Zo.next=e,Zo}function ii(){if(null===Jo){var e=Go.alternate;e=null!==e?e.memoizedState:null}else e=Jo.next;var t=null===Zo?Go.memoizedState:Zo.next;if(null!==t)Zo=t,Jo=e;else{if(null===e)throw Error(i(310));e={memoizedState:(Jo=e).memoizedState,baseState:Jo.baseState,baseQueue:Jo.baseQueue,queue:Jo.queue,next:null},null===Zo?Go.memoizedState=Zo=e:Zo=Zo.next=e}return Zo}function li(e,t){return"function"==typeof t?t(e):t}function ui(e){var t=ii(),n=t.queue;if(null===n)throw Error(i(311));n.lastRenderedReducer=e;var r=Jo,a=r.baseQueue,o=n.pending;if(null!==o){if(null!==a){var l=a.next;a.next=o.next,o.next=l}r.baseQueue=a=o,n.pending=null}if(null!==a){a=a.next,r=r.baseState;var u=l=o=null,s=a;do{var c=s.lane;if((qo&c)===c)null!==u&&(u=u.next={lane:0,action:s.action,eagerReducer:s.eagerReducer,eagerState:s.eagerState,next:null}),r=s.eagerReducer===e?s.eagerState:e(r,s.action);else{var f={lane:c,action:s.action,eagerReducer:s.eagerReducer,eagerState:s.eagerState,next:null};null===u?(l=u=f,o=r):u=u.next=f,Go.lanes|=c,Fl|=c}s=s.next}while(null!==s&&s!==a);null===u?o=r:u.next=l,lr(r,t.memoizedState)||(Ri=!0),t.memoizedState=r,t.baseState=o,t.baseQueue=u,n.lastRenderedState=r}return[t.memoizedState,n.dispatch]}function si(e){var t=ii(),n=t.queue;if(null===n)throw Error(i(311));n.lastRenderedReducer=e;var r=n.dispatch,a=n.pending,o=t.memoizedState;if(null!==a){n.pending=null;var l=a=a.next;do{o=e(o,l.action),l=l.next}while(l!==a);lr(o,t.memoizedState)||(Ri=!0),t.memoizedState=o,null===t.baseQueue&&(t.baseState=o),n.lastRenderedState=o}return[o,r]}function ci(e,t,n){var r=t._getVersion;r=r(t._source);var a=t._workInProgressVersionPrimary;if(null!==a?e=a===r:(e=e.mutableReadLanes,(e=(qo&e)===e)&&(t._workInProgressVersionPrimary=r,Qo.push(t))),e)return n(t._source);throw Qo.push(t),Error(i(350))}function fi(e,t,n,r){var a=Ol;if(null===a)throw Error(i(349));var o=t._getVersion,l=o(t._source),u=Yo.current,s=u.useState((function(){return ci(a,t,n)})),c=s[1],f=s[0];s=Zo;var d=e.memoizedState,p=d.refs,h=p.getSnapshot,m=d.source;d=d.subscribe;var v=Go;return e.memoizedState={refs:p,source:t,subscribe:r},u.useEffect((function(){p.getSnapshot=n,p.setSnapshot=c;var e=o(t._source);if(!lr(l,e)){e=n(t._source),lr(f,e)||(c(e),e=cu(v),a.mutableReadLanes|=e&a.pendingLanes),e=a.mutableReadLanes,a.entangledLanes|=e;for(var r=a.entanglements,i=e;0<i;){var u=31-Vt(i),s=1<<u;r[u]|=e,i&=~s}}}),[n,t,r]),u.useEffect((function(){return r(t._source,(function(){var e=p.getSnapshot,n=p.setSnapshot;try{n(e(t._source));var r=cu(v);a.mutableReadLanes|=r&a.pendingLanes}catch(e){n((function(){throw e}))}}))}),[t,r]),lr(h,n)&&lr(m,t)&&lr(d,r)||((e={pending:null,dispatch:null,lastRenderedReducer:li,lastRenderedState:f}).dispatch=c=Pi.bind(null,Go,e),s.queue=e,s.baseQueue=null,f=ci(a,t,n),s.memoizedState=s.baseState=f),f}function di(e,t,n){return fi(ii(),e,t,n)}function pi(e){var t=oi();return"function"==typeof e&&(e=e()),t.memoizedState=t.baseState=e,e=(e=t.queue={pending:null,dispatch:null,lastRenderedReducer:li,lastRenderedState:e}).dispatch=Pi.bind(null,Go,e),[t.memoizedState,e]}function hi(e,t,n,r){return e={tag:e,create:t,destroy:n,deps:r,next:null},null===(t=Go.updateQueue)?(t={lastEffect:null},Go.updateQueue=t,t.lastEffect=e.next=e):null===(n=t.lastEffect)?t.lastEffect=e.next=e:(r=n.next,n.next=e,e.next=r,t.lastEffect=e),e}function mi(e){return e={current:e},oi().memoizedState=e}function vi(){return ii().memoizedState}function gi(e,t,n,r){var a=oi();Go.flags|=e,a.memoizedState=hi(1|t,n,void 0,void 0===r?null:r)}function yi(e,t,n,r){var a=ii();r=void 0===r?null:r;var o=void 0;if(null!==Jo){var i=Jo.memoizedState;if(o=i.destroy,null!==r&&ri(r,i.deps))return void hi(t,n,o,r)}Go.flags|=e,a.memoizedState=hi(1|t,n,o,r)}function bi(e,t){return gi(516,4,e,t)}function ki(e,t){return yi(516,4,e,t)}function wi(e,t){return yi(4,2,e,t)}function Si(e,t){return"function"==typeof t?(e=e(),t(e),function(){t(null)}):null!=t?(e=e(),t.current=e,function(){t.current=null}):void 0}function Ei(e,t,n){return n=null!=n?n.concat([e]):null,yi(4,2,Si.bind(null,t,e),n)}function Ci(){}function Ti(e,t){var n=ii();t=void 0===t?null:t;var r=n.memoizedState;return null!==r&&null!==t&&ri(t,r[1])?r[0]:(n.memoizedState=[e,t],e)}function xi(e,t){var n=ii();t=void 0===t?null:t;var r=n.memoizedState;return null!==r&&null!==t&&ri(t,r[1])?r[0]:(e=e(),n.memoizedState=[e,t],e)}function _i(e,t){var n=Wa();Ha(98>n?98:n,(function(){e(!0)})),Ha(97<n?97:n,(function(){var n=Xo.transition;Xo.transition=1;try{e(!1),t()}finally{Xo.transition=n}}))}function Pi(e,t,n){var r=su(),a=cu(e),o={lane:a,action:n,eagerReducer:null,eagerState:null,next:null},i=t.pending;if(null===i?o.next=o:(o.next=i.next,i.next=o),t.pending=o,i=e.alternate,e===Go||null!==i&&i===Go)ti=ei=!0;else{if(0===e.lanes&&(null===i||0===i.lanes)&&null!==(i=t.lastRenderedReducer))try{var l=t.lastRenderedState,u=i(l,n);if(o.eagerReducer=i,o.eagerState=u,lr(u,l))return}catch(e){}fu(e,a,r)}}var Ni={readContext:ro,useCallback:ni,useContext:ni,useEffect:ni,useImperativeHandle:ni,useLayoutEffect:ni,useMemo:ni,useReducer:ni,useRef:ni,useState:ni,useDebugValue:ni,useDeferredValue:ni,useTransition:ni,useMutableSource:ni,useOpaqueIdentifier:ni,unstable_isNewReconciler:!1},Oi={readContext:ro,useCallback:function(e,t){return oi().memoizedState=[e,void 0===t?null:t],e},useContext:ro,useEffect:bi,useImperativeHandle:function(e,t,n){return n=null!=n?n.concat([e]):null,gi(4,2,Si.bind(null,t,e),n)},useLayoutEffect:function(e,t){return gi(4,2,e,t)},useMemo:function(e,t){var n=oi();return t=void 0===t?null:t,e=e(),n.memoizedState=[e,t],e},useReducer:function(e,t,n){var r=oi();return t=void 0!==n?n(t):t,r.memoizedState=r.baseState=t,e=(e=r.queue={pending:null,dispatch:null,lastRenderedReducer:e,lastRenderedState:t}).dispatch=Pi.bind(null,Go,e),[r.memoizedState,e]},useRef:mi,useState:pi,useDebugValue:Ci,useDeferredValue:function(e){var t=pi(e),n=t[0],r=t[1];return bi((function(){var t=Xo.transition;Xo.transition=1;try{r(e)}finally{Xo.transition=t}}),[e]),n},useTransition:function(){var e=pi(!1),t=e[0];return mi(e=_i.bind(null,e[1])),[e,t]},useMutableSource:function(e,t,n){var r=oi();return r.memoizedState={refs:{getSnapshot:t,setSnapshot:null},source:e,subscribe:n},fi(r,e,t,n)},useOpaqueIdentifier:function(){if(Uo){var e=!1,t=function(e){return{$$typeof:L,toString:e,valueOf:e}}((function(){throw e||(e=!0,n("r:"+(Kr++).toString(36))),Error(i(355))})),n=pi(t)[1];return 0==(2&Go.mode)&&(Go.flags|=516,hi(5,(function(){n("r:"+(Kr++).toString(36))}),void 0,null)),t}return pi(t="r:"+(Kr++).toString(36)),t},unstable_isNewReconciler:!1},Di={readContext:ro,useCallback:Ti,useContext:ro,useEffect:ki,useImperativeHandle:Ei,useLayoutEffect:wi,useMemo:xi,useReducer:ui,useRef:vi,useState:function(){return ui(li)},useDebugValue:Ci,useDeferredValue:function(e){var t=ui(li),n=t[0],r=t[1];return ki((function(){var t=Xo.transition;Xo.transition=1;try{r(e)}finally{Xo.transition=t}}),[e]),n},useTransition:function(){var e=ui(li)[0];return[vi().current,e]},useMutableSource:di,useOpaqueIdentifier:function(){return ui(li)[0]},unstable_isNewReconciler:!1},Ii={readContext:ro,useCallback:Ti,useContext:ro,useEffect:ki,useImperativeHandle:Ei,useLayoutEffect:wi,useMemo:xi,useReducer:si,useRef:vi,useState:function(){return si(li)},useDebugValue:Ci,useDeferredValue:function(e){var t=si(li),n=t[0],r=t[1];return ki((function(){var t=Xo.transition;Xo.transition=1;try{r(e)}finally{Xo.transition=t}}),[e]),n},useTransition:function(){var e=si(li)[0];return[vi().current,e]},useMutableSource:di,useOpaqueIdentifier:function(){return si(li)[0]},unstable_isNewReconciler:!1},Mi=w.ReactCurrentOwner,Ri=!1;function Li(e,t,n,r){t.child=null===e?To(t,null,n,r):Co(t,e.child,n,r)}function zi(e,t,n,r,a){n=n.render;var o=t.ref;return no(t,a),r=ai(e,t,n,r,o,a),null===e||Ri?(t.flags|=1,Li(e,t,r,a),t.child):(t.updateQueue=e.updateQueue,t.flags&=-517,e.lanes&=~a,nl(e,t,a))}function Ai(e,t,n,r,a,o){if(null===e){var i=n.type;return"function"!=typeof i||Bu(i)||void 0!==i.defaultProps||null!==n.compare||void 0!==n.defaultProps?((e=Vu(n.type,null,r,t,t.mode,o)).ref=t.ref,e.return=t,t.child=e):(t.tag=15,t.type=i,Fi(e,t,i,r,a,o))}return i=e.child,0==(a&o)&&(a=i.memoizedProps,(n=null!==(n=n.compare)?n:sr)(a,r)&&e.ref===t.ref)?nl(e,t,o):(t.flags|=1,(e=Hu(i,r)).ref=t.ref,e.return=t,t.child=e)}function Fi(e,t,n,r,a,o){if(null!==e&&sr(e.memoizedProps,r)&&e.ref===t.ref){if(Ri=!1,0==(o&a))return t.lanes=e.lanes,nl(e,t,o);0!=(16384&e.flags)&&(Ri=!0)}return Wi(e,t,n,r,o)}function Ui(e,t,n){var r=t.pendingProps,a=r.children,o=null!==e?e.memoizedState:null;if("hidden"===r.mode||"unstable-defer-without-hiding"===r.mode)if(0==(4&t.mode))t.memoizedState={baseLanes:0},bu(t,n);else{if(0==(1073741824&n))return e=null!==o?o.baseLanes|n:n,t.lanes=t.childLanes=1073741824,t.memoizedState={baseLanes:e},bu(t,e),null;t.memoizedState={baseLanes:0},bu(t,null!==o?o.baseLanes:n)}else null!==o?(r=o.baseLanes|n,t.memoizedState=null):r=n,bu(t,r);return Li(e,t,a,n),t.child}function ji(e,t){var n=t.ref;(null===e&&null!==n||null!==e&&e.ref!==n)&&(t.flags|=128)}function Wi(e,t,n,r,a){var o=ha(n)?da:ca.current;return o=pa(t,o),no(t,a),n=ai(e,t,n,r,o,a),null===e||Ri?(t.flags|=1,Li(e,t,n,a),t.child):(t.updateQueue=e.updateQueue,t.flags&=-517,e.lanes&=~a,nl(e,t,a))}function Bi(e,t,n,r,a){if(ha(n)){var o=!0;ya(t)}else o=!1;if(no(t,a),null===t.stateNode)null!==e&&(e.alternate=null,t.alternate=null,t.flags|=2),go(t,n,r),bo(t,n,r,a),r=!0;else if(null===e){var i=t.stateNode,l=t.memoizedProps;i.props=l;var u=i.context,s=n.contextType;"object"==typeof s&&null!==s?s=ro(s):s=pa(t,s=ha(n)?da:ca.current);var c=n.getDerivedStateFromProps,f="function"==typeof c||"function"==typeof i.getSnapshotBeforeUpdate;f||"function"!=typeof i.UNSAFE_componentWillReceiveProps&&"function"!=typeof i.componentWillReceiveProps||(l!==r||u!==s)&&yo(t,i,r,s),ao=!1;var d=t.memoizedState;i.state=d,co(t,r,i,a),u=t.memoizedState,l!==r||d!==u||fa.current||ao?("function"==typeof c&&(ho(t,n,c,r),u=t.memoizedState),(l=ao||vo(t,n,l,r,d,u,s))?(f||"function"!=typeof i.UNSAFE_componentWillMount&&"function"!=typeof i.componentWillMount||("function"==typeof i.componentWillMount&&i.componentWillMount(),"function"==typeof i.UNSAFE_componentWillMount&&i.UNSAFE_componentWillMount()),"function"==typeof i.componentDidMount&&(t.flags|=4)):("function"==typeof i.componentDidMount&&(t.flags|=4),t.memoizedProps=r,t.memoizedState=u),i.props=r,i.state=u,i.context=s,r=l):("function"==typeof i.componentDidMount&&(t.flags|=4),r=!1)}else{i=t.stateNode,io(e,t),l=t.memoizedProps,s=t.type===t.elementType?l:Ya(t.type,l),i.props=s,f=t.pendingProps,d=i.context,"object"==typeof(u=n.contextType)&&null!==u?u=ro(u):u=pa(t,u=ha(n)?da:ca.current);var p=n.getDerivedStateFromProps;(c="function"==typeof p||"function"==typeof i.getSnapshotBeforeUpdate)||"function"!=typeof i.UNSAFE_componentWillReceiveProps&&"function"!=typeof i.componentWillReceiveProps||(l!==f||d!==u)&&yo(t,i,r,u),ao=!1,d=t.memoizedState,i.state=d,co(t,r,i,a);var h=t.memoizedState;l!==f||d!==h||fa.current||ao?("function"==typeof p&&(ho(t,n,p,r),h=t.memoizedState),(s=ao||vo(t,n,s,r,d,h,u))?(c||"function"!=typeof i.UNSAFE_componentWillUpdate&&"function"!=typeof i.componentWillUpdate||("function"==typeof i.componentWillUpdate&&i.componentWillUpdate(r,h,u),"function"==typeof i.UNSAFE_componentWillUpdate&&i.UNSAFE_componentWillUpdate(r,h,u)),"function"==typeof i.componentDidUpdate&&(t.flags|=4),"function"==typeof i.getSnapshotBeforeUpdate&&(t.flags|=256)):("function"!=typeof i.componentDidUpdate||l===e.memoizedProps&&d===e.memoizedState||(t.flags|=4),"function"!=typeof i.getSnapshotBeforeUpdate||l===e.memoizedProps&&d===e.memoizedState||(t.flags|=256),t.memoizedProps=r,t.memoizedState=h),i.props=r,i.state=h,i.context=u,r=s):("function"!=typeof i.componentDidUpdate||l===e.memoizedProps&&d===e.memoizedState||(t.flags|=4),"function"!=typeof i.getSnapshotBeforeUpdate||l===e.memoizedProps&&d===e.memoizedState||(t.flags|=256),r=!1)}return Hi(e,t,n,r,o,a)}function Hi(e,t,n,r,a,o){ji(e,t);var i=0!=(64&t.flags);if(!r&&!i)return a&&ba(t,n,!1),nl(e,t,o);r=t.stateNode,Mi.current=t;var l=i&&"function"!=typeof n.getDerivedStateFromError?null:r.render();return t.flags|=1,null!==e&&i?(t.child=Co(t,e.child,null,o),t.child=Co(t,null,l,o)):Li(e,t,l,o),t.memoizedState=r.state,a&&ba(t,n,!0),t.child}function Vi(e){var t=e.stateNode;t.pendingContext?va(0,t.pendingContext,t.pendingContext!==t.context):t.context&&va(0,t.context,!1),Do(e,t.containerInfo)}var $i,Qi,Ki,Yi={dehydrated:null,retryLane:0};function Xi(e,t,n){var r,a=t.pendingProps,o=Lo.current,i=!1;return(r=0!=(64&t.flags))||(r=(null===e||null!==e.memoizedState)&&0!=(2&o)),r?(i=!0,t.flags&=-65):null!==e&&null===e.memoizedState||void 0===a.fallback||!0===a.unstable_avoidThisFallback||(o|=1),ua(Lo,1&o),null===e?(void 0!==a.fallback&&Bo(t),e=a.children,o=a.fallback,i?(e=qi(t,e,o,n),t.child.memoizedState={baseLanes:n},t.memoizedState=Yi,e):"number"==typeof a.unstable_expectedLoadTime?(e=qi(t,e,o,n),t.child.memoizedState={baseLanes:n},t.memoizedState=Yi,t.lanes=33554432,e):((n=Qu({mode:"visible",children:e},t.mode,n,null)).return=t,t.child=n)):(e.memoizedState,i?(a=Ji(e,t,a.children,a.fallback,n),i=t.child,o=e.child.memoizedState,i.memoizedState=null===o?{baseLanes:n}:{baseLanes:o.baseLanes|n},i.childLanes=e.childLanes&~n,t.memoizedState=Yi,a):(n=Gi(e,t,a.children,n),t.memoizedState=null,n))}function qi(e,t,n,r){var a=e.mode,o=e.child;return t={mode:"hidden",children:t},0==(2&a)&&null!==o?(o.childLanes=0,o.pendingProps=t):o=Qu(t,a,0,null),n=$u(n,a,r,null),o.return=e,n.return=e,o.sibling=n,e.child=o,n}function Gi(e,t,n,r){var a=e.child;return e=a.sibling,n=Hu(a,{mode:"visible",children:n}),0==(2&t.mode)&&(n.lanes=r),n.return=t,n.sibling=null,null!==e&&(e.nextEffect=null,e.flags=8,t.firstEffect=t.lastEffect=e),t.child=n}function Ji(e,t,n,r,a){var o=t.mode,i=e.child;e=i.sibling;var l={mode:"hidden",children:n};return 0==(2&o)&&t.child!==i?((n=t.child).childLanes=0,n.pendingProps=l,null!==(i=n.lastEffect)?(t.firstEffect=n.firstEffect,t.lastEffect=i,i.nextEffect=null):t.firstEffect=t.lastEffect=null):n=Hu(i,l),null!==e?r=Hu(e,r):(r=$u(r,o,a,null)).flags|=2,r.return=t,n.return=t,n.sibling=r,t.child=n,r}function Zi(e,t){e.lanes|=t;var n=e.alternate;null!==n&&(n.lanes|=t),to(e.return,t)}function el(e,t,n,r,a,o){var i=e.memoizedState;null===i?e.memoizedState={isBackwards:t,rendering:null,renderingStartTime:0,last:r,tail:n,tailMode:a,lastEffect:o}:(i.isBackwards=t,i.rendering=null,i.renderingStartTime=0,i.last=r,i.tail=n,i.tailMode=a,i.lastEffect=o)}function tl(e,t,n){var r=t.pendingProps,a=r.revealOrder,o=r.tail;if(Li(e,t,r.children,n),0!=(2&(r=Lo.current)))r=1&r|2,t.flags|=64;else{if(null!==e&&0!=(64&e.flags))e:for(e=t.child;null!==e;){if(13===e.tag)null!==e.memoizedState&&Zi(e,n);else if(19===e.tag)Zi(e,n);else if(null!==e.child){e.child.return=e,e=e.child;continue}if(e===t)break e;for(;null===e.sibling;){if(null===e.return||e.return===t)break e;e=e.return}e.sibling.return=e.return,e=e.sibling}r&=1}if(ua(Lo,r),0==(2&t.mode))t.memoizedState=null;else switch(a){case"forwards":for(n=t.child,a=null;null!==n;)null!==(e=n.alternate)&&null===zo(e)&&(a=n),n=n.sibling;null===(n=a)?(a=t.child,t.child=null):(a=n.sibling,n.sibling=null),el(t,!1,a,n,o,t.lastEffect);break;case"backwards":for(n=null,a=t.child,t.child=null;null!==a;){if(null!==(e=a.alternate)&&null===zo(e)){t.child=a;break}e=a.sibling,a.sibling=n,n=a,a=e}el(t,!0,n,null,o,t.lastEffect);break;case"together":el(t,!1,null,null,void 0,t.lastEffect);break;default:t.memoizedState=null}return t.child}function nl(e,t,n){if(null!==e&&(t.dependencies=e.dependencies),Fl|=t.lanes,0!=(n&t.childLanes)){if(null!==e&&t.child!==e.child)throw Error(i(153));if(null!==t.child){for(n=Hu(e=t.child,e.pendingProps),t.child=n,n.return=t;null!==e.sibling;)e=e.sibling,(n=n.sibling=Hu(e,e.pendingProps)).return=t;n.sibling=null}return t.child}return null}function rl(e,t){if(!Uo)switch(e.tailMode){case"hidden":t=e.tail;for(var n=null;null!==t;)null!==t.alternate&&(n=t),t=t.sibling;null===n?e.tail=null:n.sibling=null;break;case"collapsed":n=e.tail;for(var r=null;null!==n;)null!==n.alternate&&(r=n),n=n.sibling;null===r?t||null===e.tail?e.tail=null:e.tail.sibling=null:r.sibling=null}}function al(e,t,n){var r=t.pendingProps;switch(t.tag){case 2:case 16:case 15:case 0:case 11:case 7:case 8:case 12:case 9:case 14:return null;case 1:return ha(t.type)&&ma(),null;case 3:return Io(),la(fa),la(ca),Ko(),(r=t.stateNode).pendingContext&&(r.context=r.pendingContext,r.pendingContext=null),null!==e&&null!==e.child||(Vo(t)?t.flags|=4:r.hydrate||(t.flags|=256)),null;case 5:Ro(t);var o=Oo(No.current);if(n=t.type,null!==e&&null!=t.stateNode)Qi(e,t,n,r),e.ref!==t.ref&&(t.flags|=128);else{if(!r){if(null===t.stateNode)throw Error(i(166));return null}if(e=Oo(_o.current),Vo(t)){r=t.stateNode,n=t.type;var l=t.memoizedProps;switch(r[Xr]=t,r[qr]=l,n){case"dialog":_r("cancel",r),_r("close",r);break;case"iframe":case"object":case"embed":_r("load",r);break;case"video":case"audio":for(e=0;e<Er.length;e++)_r(Er[e],r);break;case"source":_r("error",r);break;case"img":case"image":case"link":_r("error",r),_r("load",r);break;case"details":_r("toggle",r);break;case"input":ee(r,l),_r("invalid",r);break;case"select":r._wrapperState={wasMultiple:!!l.multiple},_r("invalid",r);break;case"textarea":ue(r,l),_r("invalid",r)}for(var s in Ce(n,l),e=null,l)l.hasOwnProperty(s)&&(o=l[s],"children"===s?"string"==typeof o?r.textContent!==o&&(e=["children",o]):"number"==typeof o&&r.textContent!==""+o&&(e=["children",""+o]):u.hasOwnProperty(s)&&null!=o&&"onScroll"===s&&_r("scroll",r));switch(n){case"input":q(r),re(r,l,!0);break;case"textarea":q(r),ce(r);break;case"select":case"option":break;default:"function"==typeof l.onClick&&(r.onclick=Ar)}r=e,t.updateQueue=r,null!==r&&(t.flags|=4)}else{switch(s=9===o.nodeType?o:o.ownerDocument,e===fe&&(e=pe(n)),e===fe?"script"===n?((e=s.createElement("div")).innerHTML="<script><\/script>",e=e.removeChild(e.firstChild)):"string"==typeof r.is?e=s.createElement(n,{is:r.is}):(e=s.createElement(n),"select"===n&&(s=e,r.multiple?s.multiple=!0:r.size&&(s.size=r.size))):e=s.createElementNS(e,n),e[Xr]=t,e[qr]=r,$i(e,t),t.stateNode=e,s=Te(n,r),n){case"dialog":_r("cancel",e),_r("close",e),o=r;break;case"iframe":case"object":case"embed":_r("load",e),o=r;break;case"video":case"audio":for(o=0;o<Er.length;o++)_r(Er[o],e);o=r;break;case"source":_r("error",e),o=r;break;case"img":case"image":case"link":_r("error",e),_r("load",e),o=r;break;case"details":_r("toggle",e),o=r;break;case"input":ee(e,r),o=Z(e,r),_r("invalid",e);break;case"option":o=oe(e,r);break;case"select":e._wrapperState={wasMultiple:!!r.multiple},o=a({},r,{value:void 0}),_r("invalid",e);break;case"textarea":ue(e,r),o=le(e,r),_r("invalid",e);break;default:o=r}Ce(n,o);var c=o;for(l in c)if(c.hasOwnProperty(l)){var f=c[l];"style"===l?Se(e,f):"dangerouslySetInnerHTML"===l?null!=(f=f?f.__html:void 0)&&ge(e,f):"children"===l?"string"==typeof f?("textarea"!==n||""!==f)&&ye(e,f):"number"==typeof f&&ye(e,""+f):"suppressContentEditableWarning"!==l&&"suppressHydrationWarning"!==l&&"autoFocus"!==l&&(u.hasOwnProperty(l)?null!=f&&"onScroll"===l&&_r("scroll",e):null!=f&&k(e,l,f,s))}switch(n){case"input":q(e),re(e,r,!1);break;case"textarea":q(e),ce(e);break;case"option":null!=r.value&&e.setAttribute("value",""+Y(r.value));break;case"select":e.multiple=!!r.multiple,null!=(l=r.value)?ie(e,!!r.multiple,l,!1):null!=r.defaultValue&&ie(e,!!r.multiple,r.defaultValue,!0);break;default:"function"==typeof o.onClick&&(e.onclick=Ar)}jr(n,r)&&(t.flags|=4)}null!==t.ref&&(t.flags|=128)}return null;case 6:if(e&&null!=t.stateNode)Ki(0,t,e.memoizedProps,r);else{if("string"!=typeof r&&null===t.stateNode)throw Error(i(166));n=Oo(No.current),Oo(_o.current),Vo(t)?(r=t.stateNode,n=t.memoizedProps,r[Xr]=t,r.nodeValue!==n&&(t.flags|=4)):((r=(9===n.nodeType?n:n.ownerDocument).createTextNode(r))[Xr]=t,t.stateNode=r)}return null;case 13:return la(Lo),r=t.memoizedState,0!=(64&t.flags)?(t.lanes=n,t):(r=null!==r,n=!1,null===e?void 0!==t.memoizedProps.fallback&&Vo(t):n=null!==e.memoizedState,r&&!n&&0!=(2&t.mode)&&(null===e&&!0!==t.memoizedProps.unstable_avoidThisFallback||0!=(1&Lo.current)?0===Ll&&(Ll=3):(0!==Ll&&3!==Ll||(Ll=4),null===Ol||0==(134217727&Fl)&&0==(134217727&Ul)||mu(Ol,Il))),(r||n)&&(t.flags|=4),null);case 4:return Io(),null===e&&Nr(t.stateNode.containerInfo),null;case 10:return eo(t),null;case 17:return ha(t.type)&&ma(),null;case 19:if(la(Lo),null===(r=t.memoizedState))return null;if(l=0!=(64&t.flags),null===(s=r.rendering))if(l)rl(r,!1);else{if(0!==Ll||null!==e&&0!=(64&e.flags))for(e=t.child;null!==e;){if(null!==(s=zo(e))){for(t.flags|=64,rl(r,!1),null!==(l=s.updateQueue)&&(t.updateQueue=l,t.flags|=4),null===r.lastEffect&&(t.firstEffect=null),t.lastEffect=r.lastEffect,r=n,n=t.child;null!==n;)e=r,(l=n).flags&=2,l.nextEffect=null,l.firstEffect=null,l.lastEffect=null,null===(s=l.alternate)?(l.childLanes=0,l.lanes=e,l.child=null,l.memoizedProps=null,l.memoizedState=null,l.updateQueue=null,l.dependencies=null,l.stateNode=null):(l.childLanes=s.childLanes,l.lanes=s.lanes,l.child=s.child,l.memoizedProps=s.memoizedProps,l.memoizedState=s.memoizedState,l.updateQueue=s.updateQueue,l.type=s.type,e=s.dependencies,l.dependencies=null===e?null:{lanes:e.lanes,firstContext:e.firstContext}),n=n.sibling;return ua(Lo,1&Lo.current|2),t.child}e=e.sibling}null!==r.tail&&ja()>Hl&&(t.flags|=64,l=!0,rl(r,!1),t.lanes=33554432)}else{if(!l)if(null!==(e=zo(s))){if(t.flags|=64,l=!0,null!==(n=e.updateQueue)&&(t.updateQueue=n,t.flags|=4),rl(r,!0),null===r.tail&&"hidden"===r.tailMode&&!s.alternate&&!Uo)return null!==(t=t.lastEffect=r.lastEffect)&&(t.nextEffect=null),null}else 2*ja()-r.renderingStartTime>Hl&&1073741824!==n&&(t.flags|=64,l=!0,rl(r,!1),t.lanes=33554432);r.isBackwards?(s.sibling=t.child,t.child=s):(null!==(n=r.last)?n.sibling=s:t.child=s,r.last=s)}return null!==r.tail?(n=r.tail,r.rendering=n,r.tail=n.sibling,r.lastEffect=t.lastEffect,r.renderingStartTime=ja(),n.sibling=null,t=Lo.current,ua(Lo,l?1&t|2:1&t),n):null;case 23:case 24:return ku(),null!==e&&null!==e.memoizedState!=(null!==t.memoizedState)&&"unstable-defer-without-hiding"!==r.mode&&(t.flags|=4),null}throw Error(i(156,t.tag))}function ol(e){switch(e.tag){case 1:ha(e.type)&&ma();var t=e.flags;return 4096&t?(e.flags=-4097&t|64,e):null;case 3:if(Io(),la(fa),la(ca),Ko(),0!=(64&(t=e.flags)))throw Error(i(285));return e.flags=-4097&t|64,e;case 5:return Ro(e),null;case 13:return la(Lo),4096&(t=e.flags)?(e.flags=-4097&t|64,e):null;case 19:return la(Lo),null;case 4:return Io(),null;case 10:return eo(e),null;case 23:case 24:return ku(),null;default:return null}}function il(e,t){try{var n="",r=t;do{n+=Q(r),r=r.return}while(r);var a=n}catch(e){a="\nError generating stack: "+e.message+"\n"+e.stack}return{value:e,source:t,stack:a}}function ll(e,t){try{console.error(t.value)}catch(e){setTimeout((function(){throw e}))}}$i=function(e,t){for(var n=t.child;null!==n;){if(5===n.tag||6===n.tag)e.appendChild(n.stateNode);else if(4!==n.tag&&null!==n.child){n.child.return=n,n=n.child;continue}if(n===t)break;for(;null===n.sibling;){if(null===n.return||n.return===t)return;n=n.return}n.sibling.return=n.return,n=n.sibling}},Qi=function(e,t,n,r){var o=e.memoizedProps;if(o!==r){e=t.stateNode,Oo(_o.current);var i,l=null;switch(n){case"input":o=Z(e,o),r=Z(e,r),l=[];break;case"option":o=oe(e,o),r=oe(e,r),l=[];break;case"select":o=a({},o,{value:void 0}),r=a({},r,{value:void 0}),l=[];break;case"textarea":o=le(e,o),r=le(e,r),l=[];break;default:"function"!=typeof o.onClick&&"function"==typeof r.onClick&&(e.onclick=Ar)}for(f in Ce(n,r),n=null,o)if(!r.hasOwnProperty(f)&&o.hasOwnProperty(f)&&null!=o[f])if("style"===f){var s=o[f];for(i in s)s.hasOwnProperty(i)&&(n||(n={}),n[i]="")}else"dangerouslySetInnerHTML"!==f&&"children"!==f&&"suppressContentEditableWarning"!==f&&"suppressHydrationWarning"!==f&&"autoFocus"!==f&&(u.hasOwnProperty(f)?l||(l=[]):(l=l||[]).push(f,null));for(f in r){var c=r[f];if(s=null!=o?o[f]:void 0,r.hasOwnProperty(f)&&c!==s&&(null!=c||null!=s))if("style"===f)if(s){for(i in s)!s.hasOwnProperty(i)||c&&c.hasOwnProperty(i)||(n||(n={}),n[i]="");for(i in c)c.hasOwnProperty(i)&&s[i]!==c[i]&&(n||(n={}),n[i]=c[i])}else n||(l||(l=[]),l.push(f,n)),n=c;else"dangerouslySetInnerHTML"===f?(c=c?c.__html:void 0,s=s?s.__html:void 0,null!=c&&s!==c&&(l=l||[]).push(f,c)):"children"===f?"string"!=typeof c&&"number"!=typeof c||(l=l||[]).push(f,""+c):"suppressContentEditableWarning"!==f&&"suppressHydrationWarning"!==f&&(u.hasOwnProperty(f)?(null!=c&&"onScroll"===f&&_r("scroll",e),l||s===c||(l=[])):"object"==typeof c&&null!==c&&c.$$typeof===L?c.toString():(l=l||[]).push(f,c))}n&&(l=l||[]).push("style",n);var f=l;(t.updateQueue=f)&&(t.flags|=4)}},Ki=function(e,t,n,r){n!==r&&(t.flags|=4)};var ul="function"==typeof WeakMap?WeakMap:Map;function sl(e,t,n){(n=lo(-1,n)).tag=3,n.payload={element:null};var r=t.value;return n.callback=function(){Kl||(Kl=!0,Yl=r),ll(0,t)},n}function cl(e,t,n){(n=lo(-1,n)).tag=3;var r=e.type.getDerivedStateFromError;if("function"==typeof r){var a=t.value;n.payload=function(){return ll(0,t),r(a)}}var o=e.stateNode;return null!==o&&"function"==typeof o.componentDidCatch&&(n.callback=function(){"function"!=typeof r&&(null===Xl?Xl=new Set([this]):Xl.add(this),ll(0,t));var e=t.stack;this.componentDidCatch(t.value,{componentStack:null!==e?e:""})}),n}var fl="function"==typeof WeakSet?WeakSet:Set;function dl(e){var t=e.ref;if(null!==t)if("function"==typeof t)try{t(null)}catch(t){Au(e,t)}else t.current=null}function pl(e,t){switch(t.tag){case 0:case 11:case 15:case 22:return;case 1:if(256&t.flags&&null!==e){var n=e.memoizedProps,r=e.memoizedState;t=(e=t.stateNode).getSnapshotBeforeUpdate(t.elementType===t.type?n:Ya(t.type,n),r),e.__reactInternalSnapshotBeforeUpdate=t}return;case 3:return void(256&t.flags&&Vr(t.stateNode.containerInfo));case 5:case 6:case 4:case 17:return}throw Error(i(163))}function hl(e,t,n){switch(n.tag){case 0:case 11:case 15:case 22:if(null!==(t=null!==(t=n.updateQueue)?t.lastEffect:null)){e=t=t.next;do{if(3==(3&e.tag)){var r=e.create;e.destroy=r()}e=e.next}while(e!==t)}if(null!==(t=null!==(t=n.updateQueue)?t.lastEffect:null)){e=t=t.next;do{var a=e;r=a.next,0!=(4&(a=a.tag))&&0!=(1&a)&&(Ru(n,e),Mu(n,e)),e=r}while(e!==t)}return;case 1:return e=n.stateNode,4&n.flags&&(null===t?e.componentDidMount():(r=n.elementType===n.type?t.memoizedProps:Ya(n.type,t.memoizedProps),e.componentDidUpdate(r,t.memoizedState,e.__reactInternalSnapshotBeforeUpdate))),void(null!==(t=n.updateQueue)&&fo(n,t,e));case 3:if(null!==(t=n.updateQueue)){if(e=null,null!==n.child)switch(n.child.tag){case 5:e=n.child.stateNode;break;case 1:e=n.child.stateNode}fo(n,t,e)}return;case 5:return e=n.stateNode,void(null===t&&4&n.flags&&jr(n.type,n.memoizedProps)&&e.focus());case 6:case 4:case 12:return;case 13:return void(null===n.memoizedState&&(n=n.alternate,null!==n&&(n=n.memoizedState,null!==n&&(n=n.dehydrated,null!==n&&St(n)))));case 19:case 17:case 20:case 21:case 23:case 24:return}throw Error(i(163))}function ml(e,t){for(var n=e;;){if(5===n.tag){var r=n.stateNode;if(t)"function"==typeof(r=r.style).setProperty?r.setProperty("display","none","important"):r.display="none";else{r=n.stateNode;var a=n.memoizedProps.style;a=null!=a&&a.hasOwnProperty("display")?a.display:null,r.style.display=we("display",a)}}else if(6===n.tag)n.stateNode.nodeValue=t?"":n.memoizedProps;else if((23!==n.tag&&24!==n.tag||null===n.memoizedState||n===e)&&null!==n.child){n.child.return=n,n=n.child;continue}if(n===e)break;for(;null===n.sibling;){if(null===n.return||n.return===e)return;n=n.return}n.sibling.return=n.return,n=n.sibling}}function vl(e,t){if(wa&&"function"==typeof wa.onCommitFiberUnmount)try{wa.onCommitFiberUnmount(ka,t)}catch(e){}switch(t.tag){case 0:case 11:case 14:case 15:case 22:if(null!==(e=t.updateQueue)&&null!==(e=e.lastEffect)){var n=e=e.next;do{var r=n,a=r.destroy;if(r=r.tag,void 0!==a)if(0!=(4&r))Ru(t,n);else{r=t;try{a()}catch(e){Au(r,e)}}n=n.next}while(n!==e)}break;case 1:if(dl(t),"function"==typeof(e=t.stateNode).componentWillUnmount)try{e.props=t.memoizedProps,e.state=t.memoizedState,e.componentWillUnmount()}catch(e){Au(t,e)}break;case 5:dl(t);break;case 4:Sl(e,t)}}function gl(e){e.alternate=null,e.child=null,e.dependencies=null,e.firstEffect=null,e.lastEffect=null,e.memoizedProps=null,e.memoizedState=null,e.pendingProps=null,e.return=null,e.updateQueue=null}function yl(e){return 5===e.tag||3===e.tag||4===e.tag}function bl(e){e:{for(var t=e.return;null!==t;){if(yl(t))break e;t=t.return}throw Error(i(160))}var n=t;switch(t=n.stateNode,n.tag){case 5:var r=!1;break;case 3:case 4:t=t.containerInfo,r=!0;break;default:throw Error(i(161))}16&n.flags&&(ye(t,""),n.flags&=-17);e:t:for(n=e;;){for(;null===n.sibling;){if(null===n.return||yl(n.return)){n=null;break e}n=n.return}for(n.sibling.return=n.return,n=n.sibling;5!==n.tag&&6!==n.tag&&18!==n.tag;){if(2&n.flags)continue t;if(null===n.child||4===n.tag)continue t;n.child.return=n,n=n.child}if(!(2&n.flags)){n=n.stateNode;break e}}r?kl(e,n,t):wl(e,n,t)}function kl(e,t,n){var r=e.tag,a=5===r||6===r;if(a)e=a?e.stateNode:e.stateNode.instance,t?8===n.nodeType?n.parentNode.insertBefore(e,t):n.insertBefore(e,t):(8===n.nodeType?(t=n.parentNode).insertBefore(e,n):(t=n).appendChild(e),null!=(n=n._reactRootContainer)||null!==t.onclick||(t.onclick=Ar));else if(4!==r&&null!==(e=e.child))for(kl(e,t,n),e=e.sibling;null!==e;)kl(e,t,n),e=e.sibling}function wl(e,t,n){var r=e.tag,a=5===r||6===r;if(a)e=a?e.stateNode:e.stateNode.instance,t?n.insertBefore(e,t):n.appendChild(e);else if(4!==r&&null!==(e=e.child))for(wl(e,t,n),e=e.sibling;null!==e;)wl(e,t,n),e=e.sibling}function Sl(e,t){for(var n,r,a=t,o=!1;;){if(!o){o=a.return;e:for(;;){if(null===o)throw Error(i(160));switch(n=o.stateNode,o.tag){case 5:r=!1;break e;case 3:case 4:n=n.containerInfo,r=!0;break e}o=o.return}o=!0}if(5===a.tag||6===a.tag){e:for(var l=e,u=a,s=u;;)if(vl(l,s),null!==s.child&&4!==s.tag)s.child.return=s,s=s.child;else{if(s===u)break e;for(;null===s.sibling;){if(null===s.return||s.return===u)break e;s=s.return}s.sibling.return=s.return,s=s.sibling}r?(l=n,u=a.stateNode,8===l.nodeType?l.parentNode.removeChild(u):l.removeChild(u)):n.removeChild(a.stateNode)}else if(4===a.tag){if(null!==a.child){n=a.stateNode.containerInfo,r=!0,a.child.return=a,a=a.child;continue}}else if(vl(e,a),null!==a.child){a.child.return=a,a=a.child;continue}if(a===t)break;for(;null===a.sibling;){if(null===a.return||a.return===t)return;4===(a=a.return).tag&&(o=!1)}a.sibling.return=a.return,a=a.sibling}}function El(e,t){switch(t.tag){case 0:case 11:case 14:case 15:case 22:var n=t.updateQueue;if(null!==(n=null!==n?n.lastEffect:null)){var r=n=n.next;do{3==(3&r.tag)&&(e=r.destroy,r.destroy=void 0,void 0!==e&&e()),r=r.next}while(r!==n)}return;case 1:return;case 5:if(null!=(n=t.stateNode)){r=t.memoizedProps;var a=null!==e?e.memoizedProps:r;e=t.type;var o=t.updateQueue;if(t.updateQueue=null,null!==o){for(n[qr]=r,"input"===e&&"radio"===r.type&&null!=r.name&&te(n,r),Te(e,a),t=Te(e,r),a=0;a<o.length;a+=2){var l=o[a],u=o[a+1];"style"===l?Se(n,u):"dangerouslySetInnerHTML"===l?ge(n,u):"children"===l?ye(n,u):k(n,l,u,t)}switch(e){case"input":ne(n,r);break;case"textarea":se(n,r);break;case"select":e=n._wrapperState.wasMultiple,n._wrapperState.wasMultiple=!!r.multiple,null!=(o=r.value)?ie(n,!!r.multiple,o,!1):e!==!!r.multiple&&(null!=r.defaultValue?ie(n,!!r.multiple,r.defaultValue,!0):ie(n,!!r.multiple,r.multiple?[]:"",!1))}}}return;case 6:if(null===t.stateNode)throw Error(i(162));return void(t.stateNode.nodeValue=t.memoizedProps);case 3:return void((n=t.stateNode).hydrate&&(n.hydrate=!1,St(n.containerInfo)));case 12:return;case 13:return null!==t.memoizedState&&(Bl=ja(),ml(t.child,!0)),void Cl(t);case 19:return void Cl(t);case 17:return;case 23:case 24:return void ml(t,null!==t.memoizedState)}throw Error(i(163))}function Cl(e){var t=e.updateQueue;if(null!==t){e.updateQueue=null;var n=e.stateNode;null===n&&(n=e.stateNode=new fl),t.forEach((function(t){var r=Uu.bind(null,e,t);n.has(t)||(n.add(t),t.then(r,r))}))}}function Tl(e,t){return null!==e&&(null===(e=e.memoizedState)||null!==e.dehydrated)&&(null!==(t=t.memoizedState)&&null===t.dehydrated)}var xl=Math.ceil,_l=w.ReactCurrentDispatcher,Pl=w.ReactCurrentOwner,Nl=0,Ol=null,Dl=null,Il=0,Ml=0,Rl=ia(0),Ll=0,zl=null,Al=0,Fl=0,Ul=0,jl=0,Wl=null,Bl=0,Hl=1/0;function Vl(){Hl=ja()+500}var $l,Ql=null,Kl=!1,Yl=null,Xl=null,ql=!1,Gl=null,Jl=90,Zl=[],eu=[],tu=null,nu=0,ru=null,au=-1,ou=0,iu=0,lu=null,uu=!1;function su(){return 0!=(48&Nl)?ja():-1!==au?au:au=ja()}function cu(e){if(0==(2&(e=e.mode)))return 1;if(0==(4&e))return 99===Wa()?1:2;if(0===ou&&(ou=Al),0!==Ka.transition){0!==iu&&(iu=null!==Wl?Wl.pendingLanes:0),e=ou;var t=4186112&~iu;return 0===(t&=-t)&&(0===(t=(e=4186112&~e)&-e)&&(t=8192)),t}return e=Wa(),0!=(4&Nl)&&98===e?e=jt(12,ou):e=jt(e=function(e){switch(e){case 99:return 15;case 98:return 10;case 97:case 96:return 8;case 95:return 2;default:return 0}}(e),ou),e}function fu(e,t,n){if(50<nu)throw nu=0,ru=null,Error(i(185));if(null===(e=du(e,t)))return null;Ht(e,t,n),e===Ol&&(Ul|=t,4===Ll&&mu(e,Il));var r=Wa();1===t?0!=(8&Nl)&&0==(48&Nl)?vu(e):(pu(e,n),0===Nl&&(Vl(),$a())):(0==(4&Nl)||98!==r&&99!==r||(null===tu?tu=new Set([e]):tu.add(e)),pu(e,n)),Wl=e}function du(e,t){e.lanes|=t;var n=e.alternate;for(null!==n&&(n.lanes|=t),n=e,e=e.return;null!==e;)e.childLanes|=t,null!==(n=e.alternate)&&(n.childLanes|=t),n=e,e=e.return;return 3===n.tag?n.stateNode:null}function pu(e,t){for(var n=e.callbackNode,r=e.suspendedLanes,a=e.pingedLanes,o=e.expirationTimes,l=e.pendingLanes;0<l;){var u=31-Vt(l),s=1<<u,c=o[u];if(-1===c){if(0==(s&r)||0!=(s&a)){c=t,At(s);var f=zt;o[u]=10<=f?c+250:6<=f?c+5e3:-1}}else c<=t&&(e.expiredLanes|=s);l&=~s}if(r=Ft(e,e===Ol?Il:0),t=zt,0===r)null!==n&&(n!==Ra&&Ca(n),e.callbackNode=null,e.callbackPriority=0);else{if(null!==n){if(e.callbackPriority===t)return;n!==Ra&&Ca(n)}15===t?(n=vu.bind(null,e),null===za?(za=[n],Aa=Ea(Na,Qa)):za.push(n),n=Ra):14===t?n=Va(99,vu.bind(null,e)):n=Va(n=function(e){switch(e){case 15:case 14:return 99;case 13:case 12:case 11:case 10:return 98;case 9:case 8:case 7:case 6:case 4:case 5:return 97;case 3:case 2:case 1:return 95;case 0:return 90;default:throw Error(i(358,e))}}(t),hu.bind(null,e)),e.callbackPriority=t,e.callbackNode=n}}function hu(e){if(au=-1,iu=ou=0,0!=(48&Nl))throw Error(i(327));var t=e.callbackNode;if(Iu()&&e.callbackNode!==t)return null;var n=Ft(e,e===Ol?Il:0);if(0===n)return null;var r=n,a=Nl;Nl|=16;var o=Eu();for(Ol===e&&Il===r||(Vl(),wu(e,r));;)try{xu();break}catch(t){Su(e,t)}if(Za(),_l.current=o,Nl=a,null!==Dl?r=0:(Ol=null,Il=0,r=Ll),0!=(Al&Ul))wu(e,0);else if(0!==r){if(2===r&&(Nl|=64,e.hydrate&&(e.hydrate=!1,Vr(e.containerInfo)),0!==(n=Ut(e))&&(r=Cu(e,n))),1===r)throw t=zl,wu(e,0),mu(e,n),pu(e,ja()),t;switch(e.finishedWork=e.current.alternate,e.finishedLanes=n,r){case 0:case 1:throw Error(i(345));case 2:Nu(e);break;case 3:if(mu(e,n),(62914560&n)===n&&10<(r=Bl+500-ja())){if(0!==Ft(e,0))break;if(((a=e.suspendedLanes)&n)!==n){su(),e.pingedLanes|=e.suspendedLanes&a;break}e.timeoutHandle=Br(Nu.bind(null,e),r);break}Nu(e);break;case 4:if(mu(e,n),(4186112&n)===n)break;for(r=e.eventTimes,a=-1;0<n;){var l=31-Vt(n);o=1<<l,(l=r[l])>a&&(a=l),n&=~o}if(n=a,10<(n=(120>(n=ja()-n)?120:480>n?480:1080>n?1080:1920>n?1920:3e3>n?3e3:4320>n?4320:1960*xl(n/1960))-n)){e.timeoutHandle=Br(Nu.bind(null,e),n);break}Nu(e);break;case 5:Nu(e);break;default:throw Error(i(329))}}return pu(e,ja()),e.callbackNode===t?hu.bind(null,e):null}function mu(e,t){for(t&=~jl,t&=~Ul,e.suspendedLanes|=t,e.pingedLanes&=~t,e=e.expirationTimes;0<t;){var n=31-Vt(t),r=1<<n;e[n]=-1,t&=~r}}function vu(e){if(0!=(48&Nl))throw Error(i(327));if(Iu(),e===Ol&&0!=(e.expiredLanes&Il)){var t=Il,n=Cu(e,t);0!=(Al&Ul)&&(n=Cu(e,t=Ft(e,t)))}else n=Cu(e,t=Ft(e,0));if(0!==e.tag&&2===n&&(Nl|=64,e.hydrate&&(e.hydrate=!1,Vr(e.containerInfo)),0!==(t=Ut(e))&&(n=Cu(e,t))),1===n)throw n=zl,wu(e,0),mu(e,t),pu(e,ja()),n;return e.finishedWork=e.current.alternate,e.finishedLanes=t,Nu(e),pu(e,ja()),null}function gu(e,t){var n=Nl;Nl|=1;try{return e(t)}finally{0===(Nl=n)&&(Vl(),$a())}}function yu(e,t){var n=Nl;Nl&=-2,Nl|=8;try{return e(t)}finally{0===(Nl=n)&&(Vl(),$a())}}function bu(e,t){ua(Rl,Ml),Ml|=t,Al|=t}function ku(){Ml=Rl.current,la(Rl)}function wu(e,t){e.finishedWork=null,e.finishedLanes=0;var n=e.timeoutHandle;if(-1!==n&&(e.timeoutHandle=-1,Hr(n)),null!==Dl)for(n=Dl.return;null!==n;){var r=n;switch(r.tag){case 1:null!=(r=r.type.childContextTypes)&&ma();break;case 3:Io(),la(fa),la(ca),Ko();break;case 5:Ro(r);break;case 4:Io();break;case 13:case 19:la(Lo);break;case 10:eo(r);break;case 23:case 24:ku()}n=n.return}Ol=e,Dl=Hu(e.current,null),Il=Ml=Al=t,Ll=0,zl=null,jl=Ul=Fl=0}function Su(e,t){for(;;){var n=Dl;try{if(Za(),Yo.current=Ni,ei){for(var r=Go.memoizedState;null!==r;){var a=r.queue;null!==a&&(a.pending=null),r=r.next}ei=!1}if(qo=0,Zo=Jo=Go=null,ti=!1,Pl.current=null,null===n||null===n.return){Ll=1,zl=t,Dl=null;break}e:{var o=e,i=n.return,l=n,u=t;if(t=Il,l.flags|=2048,l.firstEffect=l.lastEffect=null,null!==u&&"object"==typeof u&&"function"==typeof u.then){var s=u;if(0==(2&l.mode)){var c=l.alternate;c?(l.updateQueue=c.updateQueue,l.memoizedState=c.memoizedState,l.lanes=c.lanes):(l.updateQueue=null,l.memoizedState=null)}var f=0!=(1&Lo.current),d=i;do{var p;if(p=13===d.tag){var h=d.memoizedState;if(null!==h)p=null!==h.dehydrated;else{var m=d.memoizedProps;p=void 0!==m.fallback&&(!0!==m.unstable_avoidThisFallback||!f)}}if(p){var v=d.updateQueue;if(null===v){var g=new Set;g.add(s),d.updateQueue=g}else v.add(s);if(0==(2&d.mode)){if(d.flags|=64,l.flags|=16384,l.flags&=-2981,1===l.tag)if(null===l.alternate)l.tag=17;else{var y=lo(-1,1);y.tag=2,uo(l,y)}l.lanes|=1;break e}u=void 0,l=t;var b=o.pingCache;if(null===b?(b=o.pingCache=new ul,u=new Set,b.set(s,u)):void 0===(u=b.get(s))&&(u=new Set,b.set(s,u)),!u.has(l)){u.add(l);var k=Fu.bind(null,o,s,l);s.then(k,k)}d.flags|=4096,d.lanes=t;break e}d=d.return}while(null!==d);u=Error((K(l.type)||"A React component")+" suspended while rendering, but no fallback UI was specified.\n\nAdd a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.")}5!==Ll&&(Ll=2),u=il(u,l),d=i;do{switch(d.tag){case 3:o=u,d.flags|=4096,t&=-t,d.lanes|=t,so(d,sl(0,o,t));break e;case 1:o=u;var w=d.type,S=d.stateNode;if(0==(64&d.flags)&&("function"==typeof w.getDerivedStateFromError||null!==S&&"function"==typeof S.componentDidCatch&&(null===Xl||!Xl.has(S)))){d.flags|=4096,t&=-t,d.lanes|=t,so(d,cl(d,o,t));break e}}d=d.return}while(null!==d)}Pu(n)}catch(e){t=e,Dl===n&&null!==n&&(Dl=n=n.return);continue}break}}function Eu(){var e=_l.current;return _l.current=Ni,null===e?Ni:e}function Cu(e,t){var n=Nl;Nl|=16;var r=Eu();for(Ol===e&&Il===t||wu(e,t);;)try{Tu();break}catch(t){Su(e,t)}if(Za(),Nl=n,_l.current=r,null!==Dl)throw Error(i(261));return Ol=null,Il=0,Ll}function Tu(){for(;null!==Dl;)_u(Dl)}function xu(){for(;null!==Dl&&!Ta();)_u(Dl)}function _u(e){var t=$l(e.alternate,e,Ml);e.memoizedProps=e.pendingProps,null===t?Pu(e):Dl=t,Pl.current=null}function Pu(e){var t=e;do{var n=t.alternate;if(e=t.return,0==(2048&t.flags)){if(null!==(n=al(n,t,Ml)))return void(Dl=n);if(24!==(n=t).tag&&23!==n.tag||null===n.memoizedState||0!=(1073741824&Ml)||0==(4&n.mode)){for(var r=0,a=n.child;null!==a;)r|=a.lanes|a.childLanes,a=a.sibling;n.childLanes=r}null!==e&&0==(2048&e.flags)&&(null===e.firstEffect&&(e.firstEffect=t.firstEffect),null!==t.lastEffect&&(null!==e.lastEffect&&(e.lastEffect.nextEffect=t.firstEffect),e.lastEffect=t.lastEffect),1<t.flags&&(null!==e.lastEffect?e.lastEffect.nextEffect=t:e.firstEffect=t,e.lastEffect=t))}else{if(null!==(n=ol(t)))return n.flags&=2047,void(Dl=n);null!==e&&(e.firstEffect=e.lastEffect=null,e.flags|=2048)}if(null!==(t=t.sibling))return void(Dl=t);Dl=t=e}while(null!==t);0===Ll&&(Ll=5)}function Nu(e){var t=Wa();return Ha(99,Ou.bind(null,e,t)),null}function Ou(e,t){do{Iu()}while(null!==Gl);if(0!=(48&Nl))throw Error(i(327));var n=e.finishedWork;if(null===n)return null;if(e.finishedWork=null,e.finishedLanes=0,n===e.current)throw Error(i(177));e.callbackNode=null;var r=n.lanes|n.childLanes,a=r,o=e.pendingLanes&~a;e.pendingLanes=a,e.suspendedLanes=0,e.pingedLanes=0,e.expiredLanes&=a,e.mutableReadLanes&=a,e.entangledLanes&=a,a=e.entanglements;for(var l=e.eventTimes,u=e.expirationTimes;0<o;){var s=31-Vt(o),c=1<<s;a[s]=0,l[s]=-1,u[s]=-1,o&=~c}if(null!==tu&&0==(24&r)&&tu.has(e)&&tu.delete(e),e===Ol&&(Dl=Ol=null,Il=0),1<n.flags?null!==n.lastEffect?(n.lastEffect.nextEffect=n,r=n.firstEffect):r=n:r=n.firstEffect,null!==r){if(a=Nl,Nl|=32,Pl.current=null,Fr=Xt,hr(l=pr())){if("selectionStart"in l)u={start:l.selectionStart,end:l.selectionEnd};else e:if(u=(u=l.ownerDocument)&&u.defaultView||window,(c=u.getSelection&&u.getSelection())&&0!==c.rangeCount){u=c.anchorNode,o=c.anchorOffset,s=c.focusNode,c=c.focusOffset;try{u.nodeType,s.nodeType}catch(e){u=null;break e}var f=0,d=-1,p=-1,h=0,m=0,v=l,g=null;t:for(;;){for(var y;v!==u||0!==o&&3!==v.nodeType||(d=f+o),v!==s||0!==c&&3!==v.nodeType||(p=f+c),3===v.nodeType&&(f+=v.nodeValue.length),null!==(y=v.firstChild);)g=v,v=y;for(;;){if(v===l)break t;if(g===u&&++h===o&&(d=f),g===s&&++m===c&&(p=f),null!==(y=v.nextSibling))break;g=(v=g).parentNode}v=y}u=-1===d||-1===p?null:{start:d,end:p}}else u=null;u=u||{start:0,end:0}}else u=null;Ur={focusedElem:l,selectionRange:u},Xt=!1,lu=null,uu=!1,Ql=r;do{try{Du()}catch(e){if(null===Ql)throw Error(i(330));Au(Ql,e),Ql=Ql.nextEffect}}while(null!==Ql);lu=null,Ql=r;do{try{for(l=e;null!==Ql;){var b=Ql.flags;if(16&b&&ye(Ql.stateNode,""),128&b){var k=Ql.alternate;if(null!==k){var w=k.ref;null!==w&&("function"==typeof w?w(null):w.current=null)}}switch(1038&b){case 2:bl(Ql),Ql.flags&=-3;break;case 6:bl(Ql),Ql.flags&=-3,El(Ql.alternate,Ql);break;case 1024:Ql.flags&=-1025;break;case 1028:Ql.flags&=-1025,El(Ql.alternate,Ql);break;case 4:El(Ql.alternate,Ql);break;case 8:Sl(l,u=Ql);var S=u.alternate;gl(u),null!==S&&gl(S)}Ql=Ql.nextEffect}}catch(e){if(null===Ql)throw Error(i(330));Au(Ql,e),Ql=Ql.nextEffect}}while(null!==Ql);if(w=Ur,k=pr(),b=w.focusedElem,l=w.selectionRange,k!==b&&b&&b.ownerDocument&&dr(b.ownerDocument.documentElement,b)){null!==l&&hr(b)&&(k=l.start,void 0===(w=l.end)&&(w=k),"selectionStart"in b?(b.selectionStart=k,b.selectionEnd=Math.min(w,b.value.length)):(w=(k=b.ownerDocument||document)&&k.defaultView||window).getSelection&&(w=w.getSelection(),u=b.textContent.length,S=Math.min(l.start,u),l=void 0===l.end?S:Math.min(l.end,u),!w.extend&&S>l&&(u=l,l=S,S=u),u=fr(b,S),o=fr(b,l),u&&o&&(1!==w.rangeCount||w.anchorNode!==u.node||w.anchorOffset!==u.offset||w.focusNode!==o.node||w.focusOffset!==o.offset)&&((k=k.createRange()).setStart(u.node,u.offset),w.removeAllRanges(),S>l?(w.addRange(k),w.extend(o.node,o.offset)):(k.setEnd(o.node,o.offset),w.addRange(k))))),k=[];for(w=b;w=w.parentNode;)1===w.nodeType&&k.push({element:w,left:w.scrollLeft,top:w.scrollTop});for("function"==typeof b.focus&&b.focus(),b=0;b<k.length;b++)(w=k[b]).element.scrollLeft=w.left,w.element.scrollTop=w.top}Xt=!!Fr,Ur=Fr=null,e.current=n,Ql=r;do{try{for(b=e;null!==Ql;){var E=Ql.flags;if(36&E&&hl(b,Ql.alternate,Ql),128&E){k=void 0;var C=Ql.ref;if(null!==C){var T=Ql.stateNode;switch(Ql.tag){case 5:k=T;break;default:k=T}"function"==typeof C?C(k):C.current=k}}Ql=Ql.nextEffect}}catch(e){if(null===Ql)throw Error(i(330));Au(Ql,e),Ql=Ql.nextEffect}}while(null!==Ql);Ql=null,La(),Nl=a}else e.current=n;if(ql)ql=!1,Gl=e,Jl=t;else for(Ql=r;null!==Ql;)t=Ql.nextEffect,Ql.nextEffect=null,8&Ql.flags&&((E=Ql).sibling=null,E.stateNode=null),Ql=t;if(0===(r=e.pendingLanes)&&(Xl=null),1===r?e===ru?nu++:(nu=0,ru=e):nu=0,n=n.stateNode,wa&&"function"==typeof wa.onCommitFiberRoot)try{wa.onCommitFiberRoot(ka,n,void 0,64==(64&n.current.flags))}catch(e){}if(pu(e,ja()),Kl)throw Kl=!1,e=Yl,Yl=null,e;return 0!=(8&Nl)||$a(),null}function Du(){for(;null!==Ql;){var e=Ql.alternate;uu||null===lu||(0!=(8&Ql.flags)?et(Ql,lu)&&(uu=!0):13===Ql.tag&&Tl(e,Ql)&&et(Ql,lu)&&(uu=!0));var t=Ql.flags;0!=(256&t)&&pl(e,Ql),0==(512&t)||ql||(ql=!0,Va(97,(function(){return Iu(),null}))),Ql=Ql.nextEffect}}function Iu(){if(90!==Jl){var e=97<Jl?97:Jl;return Jl=90,Ha(e,Lu)}return!1}function Mu(e,t){Zl.push(t,e),ql||(ql=!0,Va(97,(function(){return Iu(),null})))}function Ru(e,t){eu.push(t,e),ql||(ql=!0,Va(97,(function(){return Iu(),null})))}function Lu(){if(null===Gl)return!1;var e=Gl;if(Gl=null,0!=(48&Nl))throw Error(i(331));var t=Nl;Nl|=32;var n=eu;eu=[];for(var r=0;r<n.length;r+=2){var a=n[r],o=n[r+1],l=a.destroy;if(a.destroy=void 0,"function"==typeof l)try{l()}catch(e){if(null===o)throw Error(i(330));Au(o,e)}}for(n=Zl,Zl=[],r=0;r<n.length;r+=2){a=n[r],o=n[r+1];try{var u=a.create;a.destroy=u()}catch(e){if(null===o)throw Error(i(330));Au(o,e)}}for(u=e.current.firstEffect;null!==u;)e=u.nextEffect,u.nextEffect=null,8&u.flags&&(u.sibling=null,u.stateNode=null),u=e;return Nl=t,$a(),!0}function zu(e,t,n){uo(e,t=sl(0,t=il(n,t),1)),t=su(),null!==(e=du(e,1))&&(Ht(e,1,t),pu(e,t))}function Au(e,t){if(3===e.tag)zu(e,e,t);else for(var n=e.return;null!==n;){if(3===n.tag){zu(n,e,t);break}if(1===n.tag){var r=n.stateNode;if("function"==typeof n.type.getDerivedStateFromError||"function"==typeof r.componentDidCatch&&(null===Xl||!Xl.has(r))){var a=cl(n,e=il(t,e),1);if(uo(n,a),a=su(),null!==(n=du(n,1)))Ht(n,1,a),pu(n,a);else if("function"==typeof r.componentDidCatch&&(null===Xl||!Xl.has(r)))try{r.componentDidCatch(t,e)}catch(e){}break}}n=n.return}}function Fu(e,t,n){var r=e.pingCache;null!==r&&r.delete(t),t=su(),e.pingedLanes|=e.suspendedLanes&n,Ol===e&&(Il&n)===n&&(4===Ll||3===Ll&&(62914560&Il)===Il&&500>ja()-Bl?wu(e,0):jl|=n),pu(e,t)}function Uu(e,t){var n=e.stateNode;null!==n&&n.delete(t),0===(t=0)&&(0==(2&(t=e.mode))?t=1:0==(4&t)?t=99===Wa()?1:2:(0===ou&&(ou=Al),0===(t=Wt(62914560&~ou))&&(t=4194304))),n=su(),null!==(e=du(e,t))&&(Ht(e,t,n),pu(e,n))}function ju(e,t,n,r){this.tag=e,this.key=n,this.sibling=this.child=this.return=this.stateNode=this.type=this.elementType=null,this.index=0,this.ref=null,this.pendingProps=t,this.dependencies=this.memoizedState=this.updateQueue=this.memoizedProps=null,this.mode=r,this.flags=0,this.lastEffect=this.firstEffect=this.nextEffect=null,this.childLanes=this.lanes=0,this.alternate=null}function Wu(e,t,n,r){return new ju(e,t,n,r)}function Bu(e){return!(!(e=e.prototype)||!e.isReactComponent)}function Hu(e,t){var n=e.alternate;return null===n?((n=Wu(e.tag,t,e.key,e.mode)).elementType=e.elementType,n.type=e.type,n.stateNode=e.stateNode,n.alternate=e,e.alternate=n):(n.pendingProps=t,n.type=e.type,n.flags=0,n.nextEffect=null,n.firstEffect=null,n.lastEffect=null),n.childLanes=e.childLanes,n.lanes=e.lanes,n.child=e.child,n.memoizedProps=e.memoizedProps,n.memoizedState=e.memoizedState,n.updateQueue=e.updateQueue,t=e.dependencies,n.dependencies=null===t?null:{lanes:t.lanes,firstContext:t.firstContext},n.sibling=e.sibling,n.index=e.index,n.ref=e.ref,n}function Vu(e,t,n,r,a,o){var l=2;if(r=e,"function"==typeof e)Bu(e)&&(l=1);else if("string"==typeof e)l=5;else e:switch(e){case C:return $u(n.children,a,o,t);case z:l=8,a|=16;break;case T:l=8,a|=1;break;case x:return(e=Wu(12,n,t,8|a)).elementType=x,e.type=x,e.lanes=o,e;case O:return(e=Wu(13,n,t,a)).type=O,e.elementType=O,e.lanes=o,e;case D:return(e=Wu(19,n,t,a)).elementType=D,e.lanes=o,e;case A:return Qu(n,a,o,t);case F:return(e=Wu(24,n,t,a)).elementType=F,e.lanes=o,e;default:if("object"==typeof e&&null!==e)switch(e.$$typeof){case _:l=10;break e;case P:l=9;break e;case N:l=11;break e;case I:l=14;break e;case M:l=16,r=null;break e;case R:l=22;break e}throw Error(i(130,null==e?e:typeof e,""))}return(t=Wu(l,n,t,a)).elementType=e,t.type=r,t.lanes=o,t}function $u(e,t,n,r){return(e=Wu(7,e,r,t)).lanes=n,e}function Qu(e,t,n,r){return(e=Wu(23,e,r,t)).elementType=A,e.lanes=n,e}function Ku(e,t,n){return(e=Wu(6,e,null,t)).lanes=n,e}function Yu(e,t,n){return(t=Wu(4,null!==e.children?e.children:[],e.key,t)).lanes=n,t.stateNode={containerInfo:e.containerInfo,pendingChildren:null,implementation:e.implementation},t}function Xu(e,t,n){this.tag=t,this.containerInfo=e,this.finishedWork=this.pingCache=this.current=this.pendingChildren=null,this.timeoutHandle=-1,this.pendingContext=this.context=null,this.hydrate=n,this.callbackNode=null,this.callbackPriority=0,this.eventTimes=Bt(0),this.expirationTimes=Bt(-1),this.entangledLanes=this.finishedLanes=this.mutableReadLanes=this.expiredLanes=this.pingedLanes=this.suspendedLanes=this.pendingLanes=0,this.entanglements=Bt(0),this.mutableSourceEagerHydrationData=null}function qu(e,t,n){var r=3<arguments.length&&void 0!==arguments[3]?arguments[3]:null;return{$$typeof:E,key:null==r?null:""+r,children:e,containerInfo:t,implementation:n}}function Gu(e,t,n,r){var a=t.current,o=su(),l=cu(a);e:if(n){t:{if(qe(n=n._reactInternals)!==n||1!==n.tag)throw Error(i(170));var u=n;do{switch(u.tag){case 3:u=u.stateNode.context;break t;case 1:if(ha(u.type)){u=u.stateNode.__reactInternalMemoizedMergedChildContext;break t}}u=u.return}while(null!==u);throw Error(i(171))}if(1===n.tag){var s=n.type;if(ha(s)){n=ga(n,s,u);break e}}n=u}else n=sa;return null===t.context?t.context=n:t.pendingContext=n,(t=lo(o,l)).payload={element:e},null!==(r=void 0===r?null:r)&&(t.callback=r),uo(a,t),fu(a,l,o),l}function Ju(e){if(!(e=e.current).child)return null;switch(e.child.tag){case 5:default:return e.child.stateNode}}function Zu(e,t){if(null!==(e=e.memoizedState)&&null!==e.dehydrated){var n=e.retryLane;e.retryLane=0!==n&&n<t?n:t}}function es(e,t){Zu(e,t),(e=e.alternate)&&Zu(e,t)}function ts(e,t,n){var r=null!=n&&null!=n.hydrationOptions&&n.hydrationOptions.mutableSources||null;if(n=new Xu(e,t,null!=n&&!0===n.hydrate),t=Wu(3,null,null,2===t?7:1===t?3:0),n.current=t,t.stateNode=n,oo(t),e[Gr]=n.current,Nr(8===e.nodeType?e.parentNode:e),r)for(e=0;e<r.length;e++){var a=(t=r[e])._getVersion;a=a(t._source),null==n.mutableSourceEagerHydrationData?n.mutableSourceEagerHydrationData=[t,a]:n.mutableSourceEagerHydrationData.push(t,a)}this._internalRoot=n}function ns(e){return!(!e||1!==e.nodeType&&9!==e.nodeType&&11!==e.nodeType&&(8!==e.nodeType||" react-mount-point-unstable "!==e.nodeValue))}function rs(e,t,n,r,a){var o=n._reactRootContainer;if(o){var i=o._internalRoot;if("function"==typeof a){var l=a;a=function(){var e=Ju(i);l.call(e)}}Gu(t,i,e,a)}else{if(o=n._reactRootContainer=function(e,t){if(t||(t=!(!(t=e?9===e.nodeType?e.documentElement:e.firstChild:null)||1!==t.nodeType||!t.hasAttribute("data-reactroot"))),!t)for(var n;n=e.lastChild;)e.removeChild(n);return new ts(e,0,t?{hydrate:!0}:void 0)}(n,r),i=o._internalRoot,"function"==typeof a){var u=a;a=function(){var e=Ju(i);u.call(e)}}yu((function(){Gu(t,i,e,a)}))}return Ju(i)}function as(e,t){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;if(!ns(t))throw Error(i(200));return qu(e,t,null,n)}$l=function(e,t,n){var r=t.lanes;if(null!==e)if(e.memoizedProps!==t.pendingProps||fa.current)Ri=!0;else{if(0==(n&r)){switch(Ri=!1,t.tag){case 3:Vi(t),$o();break;case 5:Mo(t);break;case 1:ha(t.type)&&ya(t);break;case 4:Do(t,t.stateNode.containerInfo);break;case 10:r=t.memoizedProps.value;var a=t.type._context;ua(Xa,a._currentValue),a._currentValue=r;break;case 13:if(null!==t.memoizedState)return 0!=(n&t.child.childLanes)?Xi(e,t,n):(ua(Lo,1&Lo.current),null!==(t=nl(e,t,n))?t.sibling:null);ua(Lo,1&Lo.current);break;case 19:if(r=0!=(n&t.childLanes),0!=(64&e.flags)){if(r)return tl(e,t,n);t.flags|=64}if(null!==(a=t.memoizedState)&&(a.rendering=null,a.tail=null,a.lastEffect=null),ua(Lo,Lo.current),r)break;return null;case 23:case 24:return t.lanes=0,Ui(e,t,n)}return nl(e,t,n)}Ri=0!=(16384&e.flags)}else Ri=!1;switch(t.lanes=0,t.tag){case 2:if(r=t.type,null!==e&&(e.alternate=null,t.alternate=null,t.flags|=2),e=t.pendingProps,a=pa(t,ca.current),no(t,n),a=ai(null,t,r,e,a,n),t.flags|=1,"object"==typeof a&&null!==a&&"function"==typeof a.render&&void 0===a.$$typeof){if(t.tag=1,t.memoizedState=null,t.updateQueue=null,ha(r)){var o=!0;ya(t)}else o=!1;t.memoizedState=null!==a.state&&void 0!==a.state?a.state:null,oo(t);var l=r.getDerivedStateFromProps;"function"==typeof l&&ho(t,r,l,e),a.updater=mo,t.stateNode=a,a._reactInternals=t,bo(t,r,e,n),t=Hi(null,t,r,!0,o,n)}else t.tag=0,Li(null,t,a,n),t=t.child;return t;case 16:a=t.elementType;e:{switch(null!==e&&(e.alternate=null,t.alternate=null,t.flags|=2),e=t.pendingProps,a=(o=a._init)(a._payload),t.type=a,o=t.tag=function(e){if("function"==typeof e)return Bu(e)?1:0;if(null!=e){if((e=e.$$typeof)===N)return 11;if(e===I)return 14}return 2}(a),e=Ya(a,e),o){case 0:t=Wi(null,t,a,e,n);break e;case 1:t=Bi(null,t,a,e,n);break e;case 11:t=zi(null,t,a,e,n);break e;case 14:t=Ai(null,t,a,Ya(a.type,e),r,n);break e}throw Error(i(306,a,""))}return t;case 0:return r=t.type,a=t.pendingProps,Wi(e,t,r,a=t.elementType===r?a:Ya(r,a),n);case 1:return r=t.type,a=t.pendingProps,Bi(e,t,r,a=t.elementType===r?a:Ya(r,a),n);case 3:if(Vi(t),r=t.updateQueue,null===e||null===r)throw Error(i(282));if(r=t.pendingProps,a=null!==(a=t.memoizedState)?a.element:null,io(e,t),co(t,r,null,n),(r=t.memoizedState.element)===a)$o(),t=nl(e,t,n);else{if((o=(a=t.stateNode).hydrate)&&(Fo=$r(t.stateNode.containerInfo.firstChild),Ao=t,o=Uo=!0),o){if(null!=(e=a.mutableSourceEagerHydrationData))for(a=0;a<e.length;a+=2)(o=e[a])._workInProgressVersionPrimary=e[a+1],Qo.push(o);for(n=To(t,null,r,n),t.child=n;n;)n.flags=-3&n.flags|1024,n=n.sibling}else Li(e,t,r,n),$o();t=t.child}return t;case 5:return Mo(t),null===e&&Bo(t),r=t.type,a=t.pendingProps,o=null!==e?e.memoizedProps:null,l=a.children,Wr(r,a)?l=null:null!==o&&Wr(r,o)&&(t.flags|=16),ji(e,t),Li(e,t,l,n),t.child;case 6:return null===e&&Bo(t),null;case 13:return Xi(e,t,n);case 4:return Do(t,t.stateNode.containerInfo),r=t.pendingProps,null===e?t.child=Co(t,null,r,n):Li(e,t,r,n),t.child;case 11:return r=t.type,a=t.pendingProps,zi(e,t,r,a=t.elementType===r?a:Ya(r,a),n);case 7:return Li(e,t,t.pendingProps,n),t.child;case 8:case 12:return Li(e,t,t.pendingProps.children,n),t.child;case 10:e:{r=t.type._context,a=t.pendingProps,l=t.memoizedProps,o=a.value;var u=t.type._context;if(ua(Xa,u._currentValue),u._currentValue=o,null!==l)if(u=l.value,0===(o=lr(u,o)?0:0|("function"==typeof r._calculateChangedBits?r._calculateChangedBits(u,o):1073741823))){if(l.children===a.children&&!fa.current){t=nl(e,t,n);break e}}else for(null!==(u=t.child)&&(u.return=t);null!==u;){var s=u.dependencies;if(null!==s){l=u.child;for(var c=s.firstContext;null!==c;){if(c.context===r&&0!=(c.observedBits&o)){1===u.tag&&((c=lo(-1,n&-n)).tag=2,uo(u,c)),u.lanes|=n,null!==(c=u.alternate)&&(c.lanes|=n),to(u.return,n),s.lanes|=n;break}c=c.next}}else l=10===u.tag&&u.type===t.type?null:u.child;if(null!==l)l.return=u;else for(l=u;null!==l;){if(l===t){l=null;break}if(null!==(u=l.sibling)){u.return=l.return,l=u;break}l=l.return}u=l}Li(e,t,a.children,n),t=t.child}return t;case 9:return a=t.type,r=(o=t.pendingProps).children,no(t,n),r=r(a=ro(a,o.unstable_observedBits)),t.flags|=1,Li(e,t,r,n),t.child;case 14:return o=Ya(a=t.type,t.pendingProps),Ai(e,t,a,o=Ya(a.type,o),r,n);case 15:return Fi(e,t,t.type,t.pendingProps,r,n);case 17:return r=t.type,a=t.pendingProps,a=t.elementType===r?a:Ya(r,a),null!==e&&(e.alternate=null,t.alternate=null,t.flags|=2),t.tag=1,ha(r)?(e=!0,ya(t)):e=!1,no(t,n),go(t,r,a),bo(t,r,a,n),Hi(null,t,r,!0,e,n);case 19:return tl(e,t,n);case 23:case 24:return Ui(e,t,n)}throw Error(i(156,t.tag))},ts.prototype.render=function(e){Gu(e,this._internalRoot,null,null)},ts.prototype.unmount=function(){var e=this._internalRoot,t=e.containerInfo;Gu(null,e,null,(function(){t[Gr]=null}))},tt=function(e){13===e.tag&&(fu(e,4,su()),es(e,4))},nt=function(e){13===e.tag&&(fu(e,67108864,su()),es(e,67108864))},rt=function(e){if(13===e.tag){var t=su(),n=cu(e);fu(e,n,t),es(e,n)}},at=function(e,t){return t()},_e=function(e,t,n){switch(t){case"input":if(ne(e,n),t=n.name,"radio"===n.type&&null!=t){for(n=e;n.parentNode;)n=n.parentNode;for(n=n.querySelectorAll("input[name="+JSON.stringify(""+t)+'][type="radio"]'),t=0;t<n.length;t++){var r=n[t];if(r!==e&&r.form===e.form){var a=na(r);if(!a)throw Error(i(90));G(r),ne(r,a)}}}break;case"textarea":se(e,n);break;case"select":null!=(t=n.value)&&ie(e,!!n.multiple,t,!1)}},Me=gu,Re=function(e,t,n,r,a){var o=Nl;Nl|=4;try{return Ha(98,e.bind(null,t,n,r,a))}finally{0===(Nl=o)&&(Vl(),$a())}},Le=function(){0==(49&Nl)&&(function(){if(null!==tu){var e=tu;tu=null,e.forEach((function(e){e.expiredLanes|=24&e.pendingLanes,pu(e,ja())}))}$a()}(),Iu())},ze=function(e,t){var n=Nl;Nl|=2;try{return e(t)}finally{0===(Nl=n)&&(Vl(),$a())}};var os={Events:[ea,ta,na,De,Ie,Iu,{current:!1}]},is={findFiberByHostInstance:Zr,bundleType:0,version:"17.0.2",rendererPackageName:"react-dom"},ls={bundleType:is.bundleType,version:is.version,rendererPackageName:is.rendererPackageName,rendererConfig:is.rendererConfig,overrideHookState:null,overrideHookStateDeletePath:null,overrideHookStateRenamePath:null,overrideProps:null,overridePropsDeletePath:null,overridePropsRenamePath:null,setSuspenseHandler:null,scheduleUpdate:null,currentDispatcherRef:w.ReactCurrentDispatcher,findHostInstanceByFiber:function(e){return null===(e=Ze(e))?null:e.stateNode},findFiberByHostInstance:is.findFiberByHostInstance||function(){return null},findHostInstancesForRefresh:null,scheduleRefresh:null,scheduleRoot:null,setRefreshHandler:null,getCurrentFiber:null};if("undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__){var us=__REACT_DEVTOOLS_GLOBAL_HOOK__;if(!us.isDisabled&&us.supportsFiber)try{ka=us.inject(ls),wa=us}catch(ve){}}t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=os,t.createPortal=as,t.findDOMNode=function(e){if(null==e)return null;if(1===e.nodeType)return e;var t=e._reactInternals;if(void 0===t){if("function"==typeof e.render)throw Error(i(188));throw Error(i(268,Object.keys(e)))}return e=null===(e=Ze(t))?null:e.stateNode},t.flushSync=function(e,t){var n=Nl;if(0!=(48&n))return e(t);Nl|=1;try{if(e)return Ha(99,e.bind(null,t))}finally{Nl=n,$a()}},t.hydrate=function(e,t,n){if(!ns(t))throw Error(i(200));return rs(null,e,t,!0,n)},t.render=function(e,t,n){if(!ns(t))throw Error(i(200));return rs(null,e,t,!1,n)},t.unmountComponentAtNode=function(e){if(!ns(e))throw Error(i(40));return!!e._reactRootContainer&&(yu((function(){rs(null,null,e,!1,(function(){e._reactRootContainer=null,e[Gr]=null}))})),!0)},t.unstable_batchedUpdates=gu,t.unstable_createPortal=function(e,t){return as(e,t,2<arguments.length&&void 0!==arguments[2]?arguments[2]:null)},t.unstable_renderSubtreeIntoContainer=function(e,t,n,r){if(!ns(n))throw Error(i(200));if(null==e||void 0===e._reactInternals)throw Error(i(38));return rs(e,t,n,!1,r)},t.version="17.0.2"},935:(e,t,n)=>{"use strict";!function e(){if("undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&"function"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE)try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(e)}catch(e){console.error(e)}}(),e.exports=n(448)},408:(e,t,n)=>{"use strict";var r=n(418),a=60103,o=60106;t.Fragment=60107,t.StrictMode=60108,t.Profiler=60114;var i=60109,l=60110,u=60112;t.Suspense=60113;var s=60115,c=60116;if("function"==typeof Symbol&&Symbol.for){var f=Symbol.for;a=f("react.element"),o=f("react.portal"),t.Fragment=f("react.fragment"),t.StrictMode=f("react.strict_mode"),t.Profiler=f("react.profiler"),i=f("react.provider"),l=f("react.context"),u=f("react.forward_ref"),t.Suspense=f("react.suspense"),s=f("react.memo"),c=f("react.lazy")}var d="function"==typeof Symbol&&Symbol.iterator;function p(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n<arguments.length;n++)t+="&args[]="+encodeURIComponent(arguments[n]);return"Minified React error #"+e+"; visit "+t+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}var h={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},m={};function v(e,t,n){this.props=e,this.context=t,this.refs=m,this.updater=n||h}function g(){}function y(e,t,n){this.props=e,this.context=t,this.refs=m,this.updater=n||h}v.prototype.isReactComponent={},v.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error(p(85));this.updater.enqueueSetState(this,e,t,"setState")},v.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},g.prototype=v.prototype;var b=y.prototype=new g;b.constructor=y,r(b,v.prototype),b.isPureReactComponent=!0;var k={current:null},w=Object.prototype.hasOwnProperty,S={key:!0,ref:!0,__self:!0,__source:!0};function E(e,t,n){var r,o={},i=null,l=null;if(null!=t)for(r in void 0!==t.ref&&(l=t.ref),void 0!==t.key&&(i=""+t.key),t)w.call(t,r)&&!S.hasOwnProperty(r)&&(o[r]=t[r]);var u=arguments.length-2;if(1===u)o.children=n;else if(1<u){for(var s=Array(u),c=0;c<u;c++)s[c]=arguments[c+2];o.children=s}if(e&&e.defaultProps)for(r in u=e.defaultProps)void 0===o[r]&&(o[r]=u[r]);return{$$typeof:a,type:e,key:i,ref:l,props:o,_owner:k.current}}function C(e){return"object"==typeof e&&null!==e&&e.$$typeof===a}var T=/\/+/g;function x(e,t){return"object"==typeof e&&null!==e&&null!=e.key?function(e){var t={"=":"=0",":":"=2"};return"$"+e.replace(/[=:]/g,(function(e){return t[e]}))}(""+e.key):t.toString(36)}function _(e,t,n,r,i){var l=typeof e;"undefined"!==l&&"boolean"!==l||(e=null);var u=!1;if(null===e)u=!0;else switch(l){case"string":case"number":u=!0;break;case"object":switch(e.$$typeof){case a:case o:u=!0}}if(u)return i=i(u=e),e=""===r?"."+x(u,0):r,Array.isArray(i)?(n="",null!=e&&(n=e.replace(T,"$&/")+"/"),_(i,t,n,"",(function(e){return e}))):null!=i&&(C(i)&&(i=function(e,t){return{$$typeof:a,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}(i,n+(!i.key||u&&u.key===i.key?"":(""+i.key).replace(T,"$&/")+"/")+e)),t.push(i)),1;if(u=0,r=""===r?".":r+":",Array.isArray(e))for(var s=0;s<e.length;s++){var c=r+x(l=e[s],s);u+=_(l,t,n,c,i)}else if("function"==typeof(c=function(e){return null===e||"object"!=typeof e?null:"function"==typeof(e=d&&e[d]||e["@@iterator"])?e:null}(e)))for(e=c.call(e),s=0;!(l=e.next()).done;)u+=_(l=l.value,t,n,c=r+x(l,s++),i);else if("object"===l)throw t=""+e,Error(p(31,"[object Object]"===t?"object with keys {"+Object.keys(e).join(", ")+"}":t));return u}function P(e,t,n){if(null==e)return e;var r=[],a=0;return _(e,r,"","",(function(e){return t.call(n,e,a++)})),r}function N(e){if(-1===e._status){var t=e._result;t=t(),e._status=0,e._result=t,t.then((function(t){0===e._status&&(t=t.default,e._status=1,e._result=t)}),(function(t){0===e._status&&(e._status=2,e._result=t)}))}if(1===e._status)return e._result;throw e._result}var O={current:null};function D(){var e=O.current;if(null===e)throw Error(p(321));return e}var I={ReactCurrentDispatcher:O,ReactCurrentBatchConfig:{transition:0},ReactCurrentOwner:k,IsSomeRendererActing:{current:!1},assign:r};t.Children={map:P,forEach:function(e,t,n){P(e,(function(){t.apply(this,arguments)}),n)},count:function(e){var t=0;return P(e,(function(){t++})),t},toArray:function(e){return P(e,(function(e){return e}))||[]},only:function(e){if(!C(e))throw Error(p(143));return e}},t.Component=v,t.PureComponent=y,t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=I,t.cloneElement=function(e,t,n){if(null==e)throw Error(p(267,e));var o=r({},e.props),i=e.key,l=e.ref,u=e._owner;if(null!=t){if(void 0!==t.ref&&(l=t.ref,u=k.current),void 0!==t.key&&(i=""+t.key),e.type&&e.type.defaultProps)var s=e.type.defaultProps;for(c in t)w.call(t,c)&&!S.hasOwnProperty(c)&&(o[c]=void 0===t[c]&&void 0!==s?s[c]:t[c])}var c=arguments.length-2;if(1===c)o.children=n;else if(1<c){s=Array(c);for(var f=0;f<c;f++)s[f]=arguments[f+2];o.children=s}return{$$typeof:a,type:e.type,key:i,ref:l,props:o,_owner:u}},t.createContext=function(e,t){return void 0===t&&(t=null),(e={$$typeof:l,_calculateChangedBits:t,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null}).Provider={$$typeof:i,_context:e},e.Consumer=e},t.createElement=E,t.createFactory=function(e){var t=E.bind(null,e);return t.type=e,t},t.createRef=function(){return{current:null}},t.forwardRef=function(e){return{$$typeof:u,render:e}},t.isValidElement=C,t.lazy=function(e){return{$$typeof:c,_payload:{_status:-1,_result:e},_init:N}},t.memo=function(e,t){return{$$typeof:s,type:e,compare:void 0===t?null:t}},t.useCallback=function(e,t){return D().useCallback(e,t)},t.useContext=function(e,t){return D().useContext(e,t)},t.useDebugValue=function(){},t.useEffect=function(e,t){return D().useEffect(e,t)},t.useImperativeHandle=function(e,t,n){return D().useImperativeHandle(e,t,n)},t.useLayoutEffect=function(e,t){return D().useLayoutEffect(e,t)},t.useMemo=function(e,t){return D().useMemo(e,t)},t.useReducer=function(e,t,n){return D().useReducer(e,t,n)},t.useRef=function(e){return D().useRef(e)},t.useState=function(e){return D().useState(e)},t.version="17.0.2"},294:(e,t,n)=>{"use strict";e.exports=n(408)},53:(e,t)=>{"use strict";var n,r,a,o;if("object"==typeof performance&&"function"==typeof performance.now){var i=performance;t.unstable_now=function(){return i.now()}}else{var l=Date,u=l.now();t.unstable_now=function(){return l.now()-u}}if("undefined"==typeof window||"function"!=typeof MessageChannel){var s=null,c=null,f=function(){if(null!==s)try{var e=t.unstable_now();s(!0,e),s=null}catch(e){throw setTimeout(f,0),e}};n=function(e){null!==s?setTimeout(n,0,e):(s=e,setTimeout(f,0))},r=function(e,t){c=setTimeout(e,t)},a=function(){clearTimeout(c)},t.unstable_shouldYield=function(){return!1},o=t.unstable_forceFrameRate=function(){}}else{var d=window.setTimeout,p=window.clearTimeout;if("undefined"!=typeof console){var h=window.cancelAnimationFrame;"function"!=typeof window.requestAnimationFrame&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills"),"function"!=typeof h&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills")}var m=!1,v=null,g=-1,y=5,b=0;t.unstable_shouldYield=function(){return t.unstable_now()>=b},o=function(){},t.unstable_forceFrameRate=function(e){0>e||125<e?console.error("forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported"):y=0<e?Math.floor(1e3/e):5};var k=new MessageChannel,w=k.port2;k.port1.onmessage=function(){if(null!==v){var e=t.unstable_now();b=e+y;try{v(!0,e)?w.postMessage(null):(m=!1,v=null)}catch(e){throw w.postMessage(null),e}}else m=!1},n=function(e){v=e,m||(m=!0,w.postMessage(null))},r=function(e,n){g=d((function(){e(t.unstable_now())}),n)},a=function(){p(g),g=-1}}function S(e,t){var n=e.length;e.push(t);e:for(;;){var r=n-1>>>1,a=e[r];if(!(void 0!==a&&0<T(a,t)))break e;e[r]=t,e[n]=a,n=r}}function E(e){return void 0===(e=e[0])?null:e}function C(e){var t=e[0];if(void 0!==t){var n=e.pop();if(n!==t){e[0]=n;e:for(var r=0,a=e.length;r<a;){var o=2*(r+1)-1,i=e[o],l=o+1,u=e[l];if(void 0!==i&&0>T(i,n))void 0!==u&&0>T(u,i)?(e[r]=u,e[l]=n,r=l):(e[r]=i,e[o]=n,r=o);else{if(!(void 0!==u&&0>T(u,n)))break e;e[r]=u,e[l]=n,r=l}}}return t}return null}function T(e,t){var n=e.sortIndex-t.sortIndex;return 0!==n?n:e.id-t.id}var x=[],_=[],P=1,N=null,O=3,D=!1,I=!1,M=!1;function R(e){for(var t=E(_);null!==t;){if(null===t.callback)C(_);else{if(!(t.startTime<=e))break;C(_),t.sortIndex=t.expirationTime,S(x,t)}t=E(_)}}function L(e){if(M=!1,R(e),!I)if(null!==E(x))I=!0,n(z);else{var t=E(_);null!==t&&r(L,t.startTime-e)}}function z(e,n){I=!1,M&&(M=!1,a()),D=!0;var o=O;try{for(R(n),N=E(x);null!==N&&(!(N.expirationTime>n)||e&&!t.unstable_shouldYield());){var i=N.callback;if("function"==typeof i){N.callback=null,O=N.priorityLevel;var l=i(N.expirationTime<=n);n=t.unstable_now(),"function"==typeof l?N.callback=l:N===E(x)&&C(x),R(n)}else C(x);N=E(x)}if(null!==N)var u=!0;else{var s=E(_);null!==s&&r(L,s.startTime-n),u=!1}return u}finally{N=null,O=o,D=!1}}var A=o;t.unstable_IdlePriority=5,t.unstable_ImmediatePriority=1,t.unstable_LowPriority=4,t.unstable_NormalPriority=3,t.unstable_Profiling=null,t.unstable_UserBlockingPriority=2,t.unstable_cancelCallback=function(e){e.callback=null},t.unstable_continueExecution=function(){I||D||(I=!0,n(z))},t.unstable_getCurrentPriorityLevel=function(){return O},t.unstable_getFirstCallbackNode=function(){return E(x)},t.unstable_next=function(e){switch(O){case 1:case 2:case 3:var t=3;break;default:t=O}var n=O;O=t;try{return e()}finally{O=n}},t.unstable_pauseExecution=function(){},t.unstable_requestPaint=A,t.unstable_runWithPriority=function(e,t){switch(e){case 1:case 2:case 3:case 4:case 5:break;default:e=3}var n=O;O=e;try{return t()}finally{O=n}},t.unstable_scheduleCallback=function(e,o,i){var l=t.unstable_now();switch("object"==typeof i&&null!==i?i="number"==typeof(i=i.delay)&&0<i?l+i:l:i=l,e){case 1:var u=-1;break;case 2:u=250;break;case 5:u=1073741823;break;case 4:u=1e4;break;default:u=5e3}return e={id:P++,callback:o,priorityLevel:e,startTime:i,expirationTime:u=i+u,sortIndex:-1},i>l?(e.sortIndex=i,S(_,e),null===E(x)&&e===E(_)&&(M?a():M=!0,r(L,i-l))):(e.sortIndex=u,S(x,e),I||D||(I=!0,n(z))),e},t.unstable_wrapCallback=function(e){var t=O;return function(){var n=O;O=t;try{return e.apply(this,arguments)}finally{O=n}}}},840:(e,t,n)=>{"use strict";e.exports=n(53)}},t={};function n(r){var a=t[r];if(void 0!==a)return a.exports;var o=t[r]={exports:{}};return e[r](o,o.exports,n),o.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{"use strict";function e(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function t(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function r(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}function a(e,t){return(a=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&a(e,t)}function i(e){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function l(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function u(e,t){return!t||"object"!==i(t)&&"function"!=typeof t?l(e):t}function s(e){return(s=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var c=n(294),f=n(935);function d(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var p=function(){function t(n){e(this,t),this.rawString=n,this.completed=t.AllowedPrefixes.test(n),this.completed||n.startsWith(t.OpenPrefix)||(this.rawString=t.OpenPrefix+this.rawString)}return r(t,[{key:"content",get:function(){return this.rawString.replace(t.OpenPrefix,"").replace(t.AllowedPrefixes,"")}},{key:"isEmpty",value:function(){return 0==this.content.replace(/ /g,"").length}},{key:"toggleStatus",value:function(){this.completed=!this.completed,this.updateRawString()}},{key:"markCompleted",value:function(){this.completed=!0,this.updateRawString()}},{key:"markOpen",value:function(){this.completed=!1,this.updateRawString()}},{key:"setContentString",value:function(e){this.rawString=e,this.completed?this.rawString=t.CompletedPrefix+this.rawString:this.rawString=t.OpenPrefix+this.rawString}},{key:"updateRawString",value:function(){this.completed?this.rawString=this.rawString.replace(t.OpenPrefix,t.CompletedPrefix):this.rawString=this.rawString.replace(t.AllowedPrefixes,t.OpenPrefix)}}]),t}();d(p,"OpenPrefix","- [ ] "),d(p,"AllowedPrefixes",/^- \[x\] /i),d(p,"CompletedPrefix","- [x] ");var h=n(156),m=n.n(h),v=function(){function t(){e(this,t),d(this,"spellcheckEnabled",!0)}return r(t,[{key:"initiateBridge",value:function(){var e=this;this.componentRelay=new(m())({targetWindow:window,permissions:[{name:"stream-context-item"}],onReady:function(){e.onReady&&e.onReady()}}),this.componentRelay.streamContextItem((function(t){e.note=t,t.isMetadataUpdate||(e.dataString=t.content.text,e.unsavedTask=t.content.unsavedTask,e.reloadData(),e.dataChangeHandler&&e.dataChangeHandler(e.tasks),e.spellcheckEnabled=JSON.stringify(t.content.spellcheck))}))}},{key:"getPlatform",value:function(){return this.componentRelay.platform}},{key:"isMobile",value:function(){return this.componentRelay&&this.componentRelay.isRunningInMobileApplication()}},{key:"showTutorial",get:function(){return void 0===this.componentRelay.getComponentDataValueForKey("showTutorial")}},{key:"setOnReady",value:function(e){this.onReady=e}},{key:"setDataChangeHandler",value:function(e){this.dataChangeHandler=e}},{key:"parseRawTasksString",value:function(e){var t=this;return e||(e=""),e.split("\n").filter((function(e){return e.replace(/ /g,"").length>0})).map((function(e){return t.createTask(e)}))}},{key:"keyForTask",value:function(e){return this.tasks.indexOf(e)+e.rawString}},{key:"reloadData",value:function(){this.tasks=this.parseRawTasksString(this.dataString)}},{key:"getTasks",value:function(){return this.tasks||this.reloadData(),this.tasks}},{key:"createTask",value:function(e){return new p(e)}},{key:"addTask",value:function(e){this.tasks.unshift(e),this.save(),this.reloadData()}},{key:"setUnsavedTask",value:function(e){this.unsavedTask=e}},{key:"completedTasks",value:function(){return this.tasks.filter((function(e){return 1==e.completed}))}},{key:"openTasks",value:function(e){e.forEach((function(e){e.markOpen()})),this.tasks=this.categorizedTasks.openTasks.concat(e)}},{key:"removeTasks",value:function(e){this.tasks=this.tasks.filter((function(t){return!e.includes(t)}))}},{key:"splitTasks",value:function(){var e=this.getTasks(),t=[],n=[];return e.forEach((function(e){e.completed?n.push(e):t.push(e)})),this.tasks=t.concat(n),this.categorizedTasks={unsavedTask:this.unsavedTask,openTasks:t,completedTasks:n},this.categorizedTasks}},{key:"moveTaskToTop",value:function(e){this.tasks.splice(this.tasks.indexOf(e),1),this.tasks.unshift(e)}},{key:"changeTaskPosition",value:function(e,t){var n=this.tasks.indexOf(e),r=this.tasks.indexOf(t);this.tasks=this.tasks.move(n,r)}},{key:"reopenCompleted",value:function(){this.openTasks(this.completedTasks()),this.save()}},{key:"deleteCompleted",value:function(){this.removeTasks(this.completedTasks()),this.save()}},{key:"deleteTask",value:function(e){this.removeTasks([e]),this.save()}},{key:"buildHtmlPreview",value:function(){var e=this.categorizedTasks,t=e.openTasks,n=e.completedTasks,r=t.length+n.length,a=Math.min(t.length,3),o="<div>";if(o+='<div style="margin-top: 8px;"><strong>'.concat(n.length,"/").concat(r," tasks completed</strong></div>"),o+='<progress max="100" style="margin-top: 10px; width: 100%;" value="'.concat(n.length/r*100,'"></progress>'),a>0){o+="<ul style='padding-left: 19px; margin-top: 10px;'>";for(var i=0;i<a;i++){var l=t[i];o+="<li style='margin-bottom: 6px;'>".concat(l.content,"</li>")}if(o+="</ul>",t.length>a){var u=t.length-a,s=1==u?"task":"tasks";o+="<div><strong>And ".concat(u," other open ").concat(s,".</strong></div>")}}return o+="</div>"}},{key:"buildPlainPreview",value:function(){var e=this.categorizedTasks,t=e.openTasks,n=e.completedTasks,r=t.length+n.length;return"".concat(n.length,"/").concat(r," tasks completed.")}},{key:"save",value:function(){var e=this;if(this.dataString=this.tasks.map((function(e){return e.rawString})).join("\n"),this.note){var t=this.note;this.componentRelay.saveItemWithPresave(t,(function(){e.splitTasks(),t.content.text=e.dataString,t.content.unsavedTask=e.unsavedTask,t.content.preview_html=e.buildHtmlPreview(),t.content.preview_plain=e.buildPlainPreview()})),this.showTutorial&&this.componentRelay.setComponentDataValueForKey("showTutorial",!1)}}}],[{key:"get",value:function(){return null===this.instance&&(this.instance=new t),this.instance}}]),t}();d(v,"instance",null),Array.prototype.move=function(e,t){for(;e<0;)e+=this.length;for(;t<0;)t+=this.length;if(t>=this.length)for(var n=t-this.length;1+n--;)this.push(void 0);return this.splice(t,0,this.splice(e,1)[0]),this};var g=n(697),y=n.n(g);function b(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=s(e);if(t){var a=s(this).constructor;n=Reflect.construct(r,arguments,a)}else n=r.apply(this,arguments);return u(this,n)}}var k=function(t){o(a,t);var n=b(a);function a(t){var r;return e(this,a),d(l(r=n.call(this,t)),"toggleCheckboxChange",(function(){var e=r.props.handleCheckboxChange;r.setState((function(e){return{isChecked:!e.isChecked}})),e(r.props.task)})),d(l(r),"onTextChange",(function(e){var t=e.target.value;r.props.task.setContentString(t),r.props.handleTextChange(r.props.task,t),r.forceUpdate()})),d(l(r),"onKeyUp",(function(e){13==e.keyCode&&r.props.task.isEmpty()&&(r.props.deleteTask(r.props.task),e.preventDefault());var t=e.target;r.resizeTextArea(t)})),d(l(r),"onKeyPress",(function(e){"Enter"==e.key&&e.preventDefault()})),r.state={isChecked:t.task.completed,task:t.task},r}return r(a,[{key:"componentDidMount",value:function(){this.resizeTextArea(this.textArea)}},{key:"UNSAFE_componentWillReceiveProps",value:function(e){var t=this;this.setState({task:e.task,isChecked:e.task.completed}),setTimeout((function(){t.resizeTextArea(t.textArea)}),1)}},{key:"resizeTextArea",value:function(e){e.style.height="1px",e.style.height=e.scrollHeight+"px"}},{key:"render",value:function(){var e=this,t=this.state.isChecked,n=this.props,r=n.task,a=n.spellcheckEnabled,o="task ".concat(r.completed?"completed":"");return c.createElement("div",{className:o},c.createElement("label",{className:"checkbox-container"},c.createElement("input",{type:"checkbox",value:r.content,checked:t,onChange:this.toggleCheckboxChange,className:"checkbox",spellCheck:a}),c.createElement("span",{className:"checkmark"})),c.createElement("textarea",{ref:function(t){e.textArea=t},value:r.content,onChange:this.onTextChange,onKeyUp:this.onKeyUp,onKeyPress:this.onKeyPress,type:"text",dir:"auto",className:"task-input-textarea",spellCheck:a}))}}]),a}(c.Component);k.propTypes={task:y().object.isRequired,handleCheckboxChange:y().func.isRequired,handleTextChange:y().func.isRequired,deleteTask:y().func.isRequired,spellcheckEnabled:y().bool.isRequired};const w=k;function S(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=s(e);if(t){var a=s(this).constructor;n=Reflect.construct(r,arguments,a)}else n=r.apply(this,arguments);return u(this,n)}}var E=function(t){o(a,t);var n=S(a);function a(t){var r;return e(this,a),d(l(r=n.call(this,t)),"onTextChange",(function(e){var t=e.target.value;r.props.onUpdate(t)})),d(l(r),"handleKeyPress",(function(e){if("Enter"===e.key){var t=e.target.value;r.submitTask(t)}})),r.state={rawString:r.props.unsavedTask||""},r}return r(a,[{key:"shouldComponentUpdate",value:function(e){return e.unsavedTask!==this.state.rawString}},{key:"componentDidUpdate",value:function(e){this.setState({rawString:e.unsavedTask})}},{key:"componentDidMount",value:function(){v.get().isMobile()||this.input.focus()}},{key:"submitTask",value:function(e){this.props.onSubmit(e)}},{key:"render",value:function(){var e=this,t="";v.get().showTutorial&&(t="Type in your task, then press Enter.");var n=v.get().spellcheckEnabled;return c.createElement("input",{className:"create-task-input",ref:function(t){e.input=t},placeholder:t,type:"text",dir:"auto",value:this.props.unsavedTask,onChange:this.onTextChange,onKeyPress:this.handleKeyPress,spellCheck:n})}}]),a}(c.Component);function C(e){return(C="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function T(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function x(){return(x=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function _(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){T(e,t,n[t])}))}return e}function P(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}E.propTypes={unsavedTask:y().string,onUpdate:y().func.isRequired,onSubmit:y().func.isRequired};function N(e){if("undefined"!=typeof window&&window.navigator)return!!navigator.userAgent.match(e)}var O=N(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),D=N(/Edge/i),I=N(/firefox/i),M=N(/safari/i)&&!N(/chrome/i)&&!N(/android/i),R=N(/iP(ad|od|hone)/i),L=N(/chrome/i)&&N(/android/i),z={capture:!1,passive:!1};function A(e,t,n){e.addEventListener(t,n,!O&&z)}function F(e,t,n){e.removeEventListener(t,n,!O&&z)}function U(e,t){if(t){if(">"===t[0]&&(t=t.substring(1)),e)try{if(e.matches)return e.matches(t);if(e.msMatchesSelector)return e.msMatchesSelector(t);if(e.webkitMatchesSelector)return e.webkitMatchesSelector(t)}catch(e){return!1}return!1}}function j(e){return e.host&&e!==document&&e.host.nodeType?e.host:e.parentNode}function W(e,t,n,r){if(e){n=n||document;do{if(null!=t&&(">"===t[0]?e.parentNode===n&&U(e,t):U(e,t))||r&&e===n)return e;if(e===n)break}while(e=j(e))}return null}var B,H=/\s+/g;function V(e,t,n){if(e&&t)if(e.classList)e.classList[n?"add":"remove"](t);else{var r=(" "+e.className+" ").replace(H," ").replace(" "+t+" "," ");e.className=(r+(n?" "+t:"")).replace(H," ")}}function $(e,t,n){var r=e&&e.style;if(r){if(void 0===n)return document.defaultView&&document.defaultView.getComputedStyle?n=document.defaultView.getComputedStyle(e,""):e.currentStyle&&(n=e.currentStyle),void 0===t?n:n[t];t in r||-1!==t.indexOf("webkit")||(t="-webkit-"+t),r[t]=n+("string"==typeof n?"":"px")}}function Q(e,t){var n="";if("string"==typeof e)n=e;else do{var r=$(e,"transform");r&&"none"!==r&&(n=r+" "+n)}while(!t&&(e=e.parentNode));var a=window.DOMMatrix||window.WebKitCSSMatrix||window.CSSMatrix||window.MSCSSMatrix;return a&&new a(n)}function K(e,t,n){if(e){var r=e.getElementsByTagName(t),a=0,o=r.length;if(n)for(;a<o;a++)n(r[a],a);return r}return[]}function Y(){var e=document.scrollingElement;return e||document.documentElement}function X(e,t,n,r,a){if(e.getBoundingClientRect||e===window){var o,i,l,u,s,c,f;if(e!==window&&e.parentNode&&e!==Y()?(i=(o=e.getBoundingClientRect()).top,l=o.left,u=o.bottom,s=o.right,c=o.height,f=o.width):(i=0,l=0,u=window.innerHeight,s=window.innerWidth,c=window.innerHeight,f=window.innerWidth),(t||n)&&e!==window&&(a=a||e.parentNode,!O))do{if(a&&a.getBoundingClientRect&&("none"!==$(a,"transform")||n&&"static"!==$(a,"position"))){var d=a.getBoundingClientRect();i-=d.top+parseInt($(a,"border-top-width")),l-=d.left+parseInt($(a,"border-left-width")),u=i+o.height,s=l+o.width;break}}while(a=a.parentNode);if(r&&e!==window){var p=Q(a||e),h=p&&p.a,m=p&&p.d;p&&(u=(i/=m)+(c/=m),s=(l/=h)+(f/=h))}return{top:i,left:l,bottom:u,right:s,width:f,height:c}}}function q(e,t,n){for(var r=te(e,!0),a=X(e)[t];r;){var o=X(r)[n];if(!("top"===n||"left"===n?a>=o:a<=o))return r;if(r===Y())break;r=te(r,!1)}return!1}function G(e,t,n){for(var r=0,a=0,o=e.children;a<o.length;){if("none"!==o[a].style.display&&o[a]!==at.ghost&&o[a]!==at.dragged&&W(o[a],n.draggable,e,!1)){if(r===t)return o[a];r++}a++}return null}function J(e,t){for(var n=e.lastElementChild;n&&(n===at.ghost||"none"===$(n,"display")||t&&!U(n,t));)n=n.previousElementSibling;return n||null}function Z(e,t){var n=0;if(!e||!e.parentNode)return-1;for(;e=e.previousElementSibling;)"TEMPLATE"===e.nodeName.toUpperCase()||e===at.clone||t&&!U(e,t)||n++;return n}function ee(e){var t=0,n=0,r=Y();if(e)do{var a=Q(e),o=a.a,i=a.d;t+=e.scrollLeft*o,n+=e.scrollTop*i}while(e!==r&&(e=e.parentNode));return[t,n]}function te(e,t){if(!e||!e.getBoundingClientRect)return Y();var n=e,r=!1;do{if(n.clientWidth<n.scrollWidth||n.clientHeight<n.scrollHeight){var a=$(n);if(n.clientWidth<n.scrollWidth&&("auto"==a.overflowX||"scroll"==a.overflowX)||n.clientHeight<n.scrollHeight&&("auto"==a.overflowY||"scroll"==a.overflowY)){if(!n.getBoundingClientRect||n===document.body)return Y();if(r||t)return n;r=!0}}}while(n=n.parentNode);return Y()}function ne(e,t){return Math.round(e.top)===Math.round(t.top)&&Math.round(e.left)===Math.round(t.left)&&Math.round(e.height)===Math.round(t.height)&&Math.round(e.width)===Math.round(t.width)}function re(e,t){return function(){if(!B){var n=arguments,r=this;1===n.length?e.call(r,n[0]):e.apply(r,n),B=setTimeout((function(){B=void 0}),t)}}}function ae(e,t,n){e.scrollLeft+=t,e.scrollTop+=n}function oe(e){var t=window.Polymer,n=window.jQuery||window.Zepto;return t&&t.dom?t.dom(e).cloneNode(!0):n?n(e).clone(!0)[0]:e.cloneNode(!0)}var ie="Sortable"+(new Date).getTime();function le(){var e,t=[];return{captureAnimationState:function(){(t=[],this.options.animation)&&[].slice.call(this.el.children).forEach((function(e){if("none"!==$(e,"display")&&e!==at.ghost){t.push({target:e,rect:X(e)});var n=_({},t[t.length-1].rect);if(e.thisAnimationDuration){var r=Q(e,!0);r&&(n.top-=r.f,n.left-=r.e)}e.fromRect=n}}))},addAnimationState:function(e){t.push(e)},removeAnimationState:function(e){t.splice(function(e,t){for(var n in e)if(e.hasOwnProperty(n))for(var r in t)if(t.hasOwnProperty(r)&&t[r]===e[n][r])return Number(n);return-1}(t,{target:e}),1)},animateAll:function(n){var r=this;if(!this.options.animation)return clearTimeout(e),void("function"==typeof n&&n());var a=!1,o=0;t.forEach((function(e){var t=0,n=e.target,i=n.fromRect,l=X(n),u=n.prevFromRect,s=n.prevToRect,c=e.rect,f=Q(n,!0);f&&(l.top-=f.f,l.left-=f.e),n.toRect=l,n.thisAnimationDuration&&ne(u,l)&&!ne(i,l)&&(c.top-l.top)/(c.left-l.left)==(i.top-l.top)/(i.left-l.left)&&(t=function(e,t,n,r){return Math.sqrt(Math.pow(t.top-e.top,2)+Math.pow(t.left-e.left,2))/Math.sqrt(Math.pow(t.top-n.top,2)+Math.pow(t.left-n.left,2))*r.animation}(c,u,s,r.options)),ne(l,i)||(n.prevFromRect=i,n.prevToRect=l,t||(t=r.options.animation),r.animate(n,c,l,t)),t&&(a=!0,o=Math.max(o,t),clearTimeout(n.animationResetTimer),n.animationResetTimer=setTimeout((function(){n.animationTime=0,n.prevFromRect=null,n.fromRect=null,n.prevToRect=null,n.thisAnimationDuration=null}),t),n.thisAnimationDuration=t)})),clearTimeout(e),a?e=setTimeout((function(){"function"==typeof n&&n()}),o):"function"==typeof n&&n(),t=[]},animate:function(e,t,n,r){if(r){$(e,"transition",""),$(e,"transform","");var a=Q(this.el),o=a&&a.a,i=a&&a.d,l=(t.left-n.left)/(o||1),u=(t.top-n.top)/(i||1);e.animatingX=!!l,e.animatingY=!!u,$(e,"transform","translate3d("+l+"px,"+u+"px,0)"),this.forRepaintDummy=function(e){return e.offsetWidth}(e),$(e,"transition","transform "+r+"ms"+(this.options.easing?" "+this.options.easing:"")),$(e,"transform","translate3d(0,0,0)"),"number"==typeof e.animated&&clearTimeout(e.animated),e.animated=setTimeout((function(){$(e,"transition",""),$(e,"transform",""),e.animated=!1,e.animatingX=!1,e.animatingY=!1}),r)}}}}var ue=[],se={initializeByDefault:!0},ce={mount:function(e){for(var t in se)se.hasOwnProperty(t)&&!(t in e)&&(e[t]=se[t]);ue.forEach((function(t){if(t.pluginName===e.pluginName)throw"Sortable: Cannot mount plugin ".concat(e.pluginName," more than once")})),ue.push(e)},pluginEvent:function(e,t,n){var r=this;this.eventCanceled=!1,n.cancel=function(){r.eventCanceled=!0};var a=e+"Global";ue.forEach((function(r){t[r.pluginName]&&(t[r.pluginName][a]&&t[r.pluginName][a](_({sortable:t},n)),t.options[r.pluginName]&&t[r.pluginName][e]&&t[r.pluginName][e](_({sortable:t},n)))}))},initializePlugins:function(e,t,n,r){for(var a in ue.forEach((function(r){var a=r.pluginName;if(e.options[a]||r.initializeByDefault){var o=new r(e,t,e.options);o.sortable=e,o.options=e.options,e[a]=o,x(n,o.defaults)}})),e.options)if(e.options.hasOwnProperty(a)){var o=this.modifyOption(e,a,e.options[a]);void 0!==o&&(e.options[a]=o)}},getEventProperties:function(e,t){var n={};return ue.forEach((function(r){"function"==typeof r.eventProperties&&x(n,r.eventProperties.call(t[r.pluginName],e))})),n},modifyOption:function(e,t,n){var r;return ue.forEach((function(a){e[a.pluginName]&&a.optionListeners&&"function"==typeof a.optionListeners[t]&&(r=a.optionListeners[t].call(e[a.pluginName],n))})),r}};function fe(e){var t=e.sortable,n=e.rootEl,r=e.name,a=e.targetEl,o=e.cloneEl,i=e.toEl,l=e.fromEl,u=e.oldIndex,s=e.newIndex,c=e.oldDraggableIndex,f=e.newDraggableIndex,d=e.originalEvent,p=e.putSortable,h=e.extraEventProperties;if(t=t||n&&n[ie]){var m,v=t.options,g="on"+r.charAt(0).toUpperCase()+r.substr(1);!window.CustomEvent||O||D?(m=document.createEvent("Event")).initEvent(r,!0,!0):m=new CustomEvent(r,{bubbles:!0,cancelable:!0}),m.to=i||n,m.from=l||n,m.item=a||n,m.clone=o,m.oldIndex=u,m.newIndex=s,m.oldDraggableIndex=c,m.newDraggableIndex=f,m.originalEvent=d,m.pullMode=p?p.lastPutMode:void 0;var y=_({},h,ce.getEventProperties(r,t));for(var b in y)m[b]=y[b];n&&n.dispatchEvent(m),v[g]&&v[g].call(t,m)}}var de=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.evt,a=P(n,["evt"]);ce.pluginEvent.bind(at)(e,t,_({dragEl:he,parentEl:me,ghostEl:ve,rootEl:ge,nextEl:ye,lastDownEl:be,cloneEl:ke,cloneHidden:we,dragStarted:Re,putSortable:_e,activeSortable:at.active,originalEvent:r,oldIndex:Se,oldDraggableIndex:Ce,newIndex:Ee,newDraggableIndex:Te,hideGhostForTarget:et,unhideGhostForTarget:tt,cloneNowHidden:function(){we=!0},cloneNowShown:function(){we=!1},dispatchSortableEvent:function(e){pe({sortable:t,name:e,originalEvent:r})}},a))};function pe(e){fe(_({putSortable:_e,cloneEl:ke,targetEl:he,rootEl:ge,oldIndex:Se,oldDraggableIndex:Ce,newIndex:Ee,newDraggableIndex:Te},e))}var he,me,ve,ge,ye,be,ke,we,Se,Ee,Ce,Te,xe,_e,Pe,Ne,Oe,De,Ie,Me,Re,Le,ze,Ae,Fe,Ue=!1,je=!1,We=[],Be=!1,He=!1,Ve=[],$e=!1,Qe=[],Ke="undefined"!=typeof document,Ye=R,Xe=D||O?"cssFloat":"float",qe=Ke&&!L&&!R&&"draggable"in document.createElement("div"),Ge=function(){if(Ke){if(O)return!1;var e=document.createElement("x");return e.style.cssText="pointer-events:auto","auto"===e.style.pointerEvents}}(),Je=function(e,t){var n=$(e),r=parseInt(n.width)-parseInt(n.paddingLeft)-parseInt(n.paddingRight)-parseInt(n.borderLeftWidth)-parseInt(n.borderRightWidth),a=G(e,0,t),o=G(e,1,t),i=a&&$(a),l=o&&$(o),u=i&&parseInt(i.marginLeft)+parseInt(i.marginRight)+X(a).width,s=l&&parseInt(l.marginLeft)+parseInt(l.marginRight)+X(o).width;if("flex"===n.display)return"column"===n.flexDirection||"column-reverse"===n.flexDirection?"vertical":"horizontal";if("grid"===n.display)return n.gridTemplateColumns.split(" ").length<=1?"vertical":"horizontal";if(a&&i.float&&"none"!==i.float){var c="left"===i.float?"left":"right";return!o||"both"!==l.clear&&l.clear!==c?"horizontal":"vertical"}return a&&("block"===i.display||"flex"===i.display||"table"===i.display||"grid"===i.display||u>=r&&"none"===n[Xe]||o&&"none"===n[Xe]&&u+s>r)?"vertical":"horizontal"},Ze=function(e){function t(e,n){return function(r,a,o,i){var l=r.options.group.name&&a.options.group.name&&r.options.group.name===a.options.group.name;if(null==e&&(n||l))return!0;if(null==e||!1===e)return!1;if(n&&"clone"===e)return e;if("function"==typeof e)return t(e(r,a,o,i),n)(r,a,o,i);var u=(n?r:a).options.group.name;return!0===e||"string"==typeof e&&e===u||e.join&&e.indexOf(u)>-1}}var n={},r=e.group;r&&"object"==C(r)||(r={name:r}),n.name=r.name,n.checkPull=t(r.pull,!0),n.checkPut=t(r.put),n.revertClone=r.revertClone,e.group=n},et=function(){!Ge&&ve&&$(ve,"display","none")},tt=function(){!Ge&&ve&&$(ve,"display","")};Ke&&document.addEventListener("click",(function(e){if(je)return e.preventDefault(),e.stopPropagation&&e.stopPropagation(),e.stopImmediatePropagation&&e.stopImmediatePropagation(),je=!1,!1}),!0);var nt=function(e){if(he){e=e.touches?e.touches[0]:e;var t=(a=e.clientX,o=e.clientY,We.some((function(e){if(!J(e)){var t=X(e),n=e[ie].options.emptyInsertThreshold,r=a>=t.left-n&&a<=t.right+n,l=o>=t.top-n&&o<=t.bottom+n;return n&&r&&l?i=e:void 0}})),i);if(t){var n={};for(var r in e)e.hasOwnProperty(r)&&(n[r]=e[r]);n.target=n.rootEl=t,n.preventDefault=void 0,n.stopPropagation=void 0,t[ie]._onDragOver(n)}}var a,o,i},rt=function(e){he&&he.parentNode[ie]._isOutsideThisEl(e.target)};function at(e,t){if(!e||!e.nodeType||1!==e.nodeType)throw"Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(e));this.el=e,this.options=t=x({},t),e[ie]=this;var n={group:null,sort:!0,disabled:!1,store:null,handle:null,draggable:/^[uo]l$/i.test(e.nodeName)?">li":">*",swapThreshold:1,invertSwap:!1,invertedSwapThreshold:null,removeCloneOnHide:!0,direction:function(){return Je(e,this.options)},ghostClass:"sortable-ghost",chosenClass:"sortable-chosen",dragClass:"sortable-drag",ignore:"a, img",filter:null,preventOnFilter:!0,animation:0,easing:null,setData:function(e,t){e.setData("Text",t.textContent)},dropBubble:!1,dragoverBubble:!1,dataIdAttr:"data-id",delay:0,delayOnTouchOnly:!1,touchStartThreshold:(Number.parseInt?Number:window).parseInt(window.devicePixelRatio,10)||1,forceFallback:!1,fallbackClass:"sortable-fallback",fallbackOnBody:!1,fallbackTolerance:0,fallbackOffset:{x:0,y:0},supportPointer:!1!==at.supportPointer&&"PointerEvent"in window&&!M,emptyInsertThreshold:5};for(var r in ce.initializePlugins(this,e,n),n)!(r in t)&&(t[r]=n[r]);for(var a in Ze(t),this)"_"===a.charAt(0)&&"function"==typeof this[a]&&(this[a]=this[a].bind(this));this.nativeDraggable=!t.forceFallback&&qe,this.nativeDraggable&&(this.options.touchStartThreshold=1),t.supportPointer?A(e,"pointerdown",this._onTapStart):(A(e,"mousedown",this._onTapStart),A(e,"touchstart",this._onTapStart)),this.nativeDraggable&&(A(e,"dragover",this),A(e,"dragenter",this)),We.push(this.el),t.store&&t.store.get&&this.sort(t.store.get(this)||[]),x(this,le())}function ot(e,t,n,r,a,o,i,l){var u,s,c=e[ie],f=c.options.onMove;return!window.CustomEvent||O||D?(u=document.createEvent("Event")).initEvent("move",!0,!0):u=new CustomEvent("move",{bubbles:!0,cancelable:!0}),u.to=t,u.from=e,u.dragged=n,u.draggedRect=r,u.related=a||t,u.relatedRect=o||X(t),u.willInsertAfter=l,u.originalEvent=i,e.dispatchEvent(u),f&&(s=f.call(c,u,i)),s}function it(e){e.draggable=!1}function lt(){$e=!1}function ut(e){for(var t=e.tagName+e.className+e.src+e.href+e.textContent,n=t.length,r=0;n--;)r+=t.charCodeAt(n);return r.toString(36)}function st(e){return setTimeout(e,0)}function ct(e){return clearTimeout(e)}at.prototype={constructor:at,_isOutsideThisEl:function(e){this.el.contains(e)||e===this.el||(Le=null)},_getDirection:function(e,t){return"function"==typeof this.options.direction?this.options.direction.call(this,e,t,he):this.options.direction},_onTapStart:function(e){if(e.cancelable){var t=this,n=this.el,r=this.options,a=r.preventOnFilter,o=e.type,i=e.touches&&e.touches[0]||e.pointerType&&"touch"===e.pointerType&&e,l=(i||e).target,u=e.target.shadowRoot&&(e.path&&e.path[0]||e.composedPath&&e.composedPath()[0])||l,s=r.filter;if(function(e){Qe.length=0;var t=e.getElementsByTagName("input"),n=t.length;for(;n--;){var r=t[n];r.checked&&Qe.push(r)}}(n),!he&&!(/mousedown|pointerdown/.test(o)&&0!==e.button||r.disabled)&&!u.isContentEditable&&(this.nativeDraggable||!M||!l||"SELECT"!==l.tagName.toUpperCase())&&!((l=W(l,r.draggable,n,!1))&&l.animated||be===l)){if(Se=Z(l),Ce=Z(l,r.draggable),"function"==typeof s){if(s.call(this,e,l,this))return pe({sortable:t,rootEl:u,name:"filter",targetEl:l,toEl:n,fromEl:n}),de("filter",t,{evt:e}),void(a&&e.cancelable&&e.preventDefault())}else if(s&&(s=s.split(",").some((function(r){if(r=W(u,r.trim(),n,!1))return pe({sortable:t,rootEl:r,name:"filter",targetEl:l,fromEl:n,toEl:n}),de("filter",t,{evt:e}),!0}))))return void(a&&e.cancelable&&e.preventDefault());r.handle&&!W(u,r.handle,n,!1)||this._prepareDragStart(e,i,l)}}},_prepareDragStart:function(e,t,n){var r,a=this,o=a.el,i=a.options,l=o.ownerDocument;if(n&&!he&&n.parentNode===o){var u=X(n);if(ge=o,me=(he=n).parentNode,ye=he.nextSibling,be=n,xe=i.group,at.dragged=he,Pe={target:he,clientX:(t||e).clientX,clientY:(t||e).clientY},Ie=Pe.clientX-u.left,Me=Pe.clientY-u.top,this._lastX=(t||e).clientX,this._lastY=(t||e).clientY,he.style["will-change"]="all",r=function(){de("delayEnded",a,{evt:e}),at.eventCanceled?a._onDrop():(a._disableDelayedDragEvents(),!I&&a.nativeDraggable&&(he.draggable=!0),a._triggerDragStart(e,t),pe({sortable:a,name:"choose",originalEvent:e}),V(he,i.chosenClass,!0))},i.ignore.split(",").forEach((function(e){K(he,e.trim(),it)})),A(l,"dragover",nt),A(l,"mousemove",nt),A(l,"touchmove",nt),A(l,"mouseup",a._onDrop),A(l,"touchend",a._onDrop),A(l,"touchcancel",a._onDrop),I&&this.nativeDraggable&&(this.options.touchStartThreshold=4,he.draggable=!0),de("delayStart",this,{evt:e}),!i.delay||i.delayOnTouchOnly&&!t||this.nativeDraggable&&(D||O))r();else{if(at.eventCanceled)return void this._onDrop();A(l,"mouseup",a._disableDelayedDrag),A(l,"touchend",a._disableDelayedDrag),A(l,"touchcancel",a._disableDelayedDrag),A(l,"mousemove",a._delayedDragTouchMoveHandler),A(l,"touchmove",a._delayedDragTouchMoveHandler),i.supportPointer&&A(l,"pointermove",a._delayedDragTouchMoveHandler),a._dragStartTimer=setTimeout(r,i.delay)}}},_delayedDragTouchMoveHandler:function(e){var t=e.touches?e.touches[0]:e;Math.max(Math.abs(t.clientX-this._lastX),Math.abs(t.clientY-this._lastY))>=Math.floor(this.options.touchStartThreshold/(this.nativeDraggable&&window.devicePixelRatio||1))&&this._disableDelayedDrag()},_disableDelayedDrag:function(){he&&it(he),clearTimeout(this._dragStartTimer),this._disableDelayedDragEvents()},_disableDelayedDragEvents:function(){var e=this.el.ownerDocument;F(e,"mouseup",this._disableDelayedDrag),F(e,"touchend",this._disableDelayedDrag),F(e,"touchcancel",this._disableDelayedDrag),F(e,"mousemove",this._delayedDragTouchMoveHandler),F(e,"touchmove",this._delayedDragTouchMoveHandler),F(e,"pointermove",this._delayedDragTouchMoveHandler)},_triggerDragStart:function(e,t){t=t||"touch"==e.pointerType&&e,!this.nativeDraggable||t?this.options.supportPointer?A(document,"pointermove",this._onTouchMove):A(document,t?"touchmove":"mousemove",this._onTouchMove):(A(he,"dragend",this),A(ge,"dragstart",this._onDragStart));try{document.selection?st((function(){document.selection.empty()})):window.getSelection().removeAllRanges()}catch(e){}},_dragStarted:function(e,t){if(Ue=!1,ge&&he){de("dragStarted",this,{evt:t}),this.nativeDraggable&&A(document,"dragover",rt);var n=this.options;!e&&V(he,n.dragClass,!1),V(he,n.ghostClass,!0),at.active=this,e&&this._appendGhost(),pe({sortable:this,name:"start",originalEvent:t})}else this._nulling()},_emulateDragOver:function(){if(Ne){this._lastX=Ne.clientX,this._lastY=Ne.clientY,et();for(var e=document.elementFromPoint(Ne.clientX,Ne.clientY),t=e;e&&e.shadowRoot&&(e=e.shadowRoot.elementFromPoint(Ne.clientX,Ne.clientY))!==t;)t=e;if(he.parentNode[ie]._isOutsideThisEl(e),t)do{if(t[ie]){if(t[ie]._onDragOver({clientX:Ne.clientX,clientY:Ne.clientY,target:e,rootEl:t})&&!this.options.dragoverBubble)break}e=t}while(t=t.parentNode);tt()}},_onTouchMove:function(e){if(Pe){var t=this.options,n=t.fallbackTolerance,r=t.fallbackOffset,a=e.touches?e.touches[0]:e,o=ve&&Q(ve,!0),i=ve&&o&&o.a,l=ve&&o&&o.d,u=Ye&&Fe&&ee(Fe),s=(a.clientX-Pe.clientX+r.x)/(i||1)+(u?u[0]-Ve[0]:0)/(i||1),c=(a.clientY-Pe.clientY+r.y)/(l||1)+(u?u[1]-Ve[1]:0)/(l||1);if(!at.active&&!Ue){if(n&&Math.max(Math.abs(a.clientX-this._lastX),Math.abs(a.clientY-this._lastY))<n)return;this._onDragStart(e,!0)}if(ve){o?(o.e+=s-(Oe||0),o.f+=c-(De||0)):o={a:1,b:0,c:0,d:1,e:s,f:c};var f="matrix(".concat(o.a,",").concat(o.b,",").concat(o.c,",").concat(o.d,",").concat(o.e,",").concat(o.f,")");$(ve,"webkitTransform",f),$(ve,"mozTransform",f),$(ve,"msTransform",f),$(ve,"transform",f),Oe=s,De=c,Ne=a}e.cancelable&&e.preventDefault()}},_appendGhost:function(){if(!ve){var e=this.options.fallbackOnBody?document.body:ge,t=X(he,!0,Ye,!0,e),n=this.options;if(Ye){for(Fe=e;"static"===$(Fe,"position")&&"none"===$(Fe,"transform")&&Fe!==document;)Fe=Fe.parentNode;Fe!==document.body&&Fe!==document.documentElement?(Fe===document&&(Fe=Y()),t.top+=Fe.scrollTop,t.left+=Fe.scrollLeft):Fe=Y(),Ve=ee(Fe)}V(ve=he.cloneNode(!0),n.ghostClass,!1),V(ve,n.fallbackClass,!0),V(ve,n.dragClass,!0),$(ve,"transition",""),$(ve,"transform",""),$(ve,"box-sizing","border-box"),$(ve,"margin",0),$(ve,"top",t.top),$(ve,"left",t.left),$(ve,"width",t.width),$(ve,"height",t.height),$(ve,"opacity","0.8"),$(ve,"position",Ye?"absolute":"fixed"),$(ve,"zIndex","100000"),$(ve,"pointerEvents","none"),at.ghost=ve,e.appendChild(ve),$(ve,"transform-origin",Ie/parseInt(ve.style.width)*100+"% "+Me/parseInt(ve.style.height)*100+"%")}},_onDragStart:function(e,t){var n=this,r=e.dataTransfer,a=n.options;de("dragStart",this,{evt:e}),at.eventCanceled?this._onDrop():(de("setupClone",this),at.eventCanceled||((ke=oe(he)).draggable=!1,ke.style["will-change"]="",this._hideClone(),V(ke,this.options.chosenClass,!1),at.clone=ke),n.cloneId=st((function(){de("clone",n),at.eventCanceled||(n.options.removeCloneOnHide||ge.insertBefore(ke,he),n._hideClone(),pe({sortable:n,name:"clone"}))})),!t&&V(he,a.dragClass,!0),t?(je=!0,n._loopId=setInterval(n._emulateDragOver,50)):(F(document,"mouseup",n._onDrop),F(document,"touchend",n._onDrop),F(document,"touchcancel",n._onDrop),r&&(r.effectAllowed="move",a.setData&&a.setData.call(n,r,he)),A(document,"drop",n),$(he,"transform","translateZ(0)")),Ue=!0,n._dragStartId=st(n._dragStarted.bind(n,t,e)),A(document,"selectstart",n),Re=!0,M&&$(document.body,"user-select","none"))},_onDragOver:function(e){var t,n,r,a,o=this.el,i=e.target,l=this.options,u=l.group,s=at.active,c=xe===u,f=l.sort,d=_e||s,p=this,h=!1;if(!$e){if(void 0!==e.preventDefault&&e.cancelable&&e.preventDefault(),i=W(i,l.draggable,o,!0),N("dragOver"),at.eventCanceled)return h;if(he.contains(e.target)||i.animated&&i.animatingX&&i.animatingY||p._ignoreWhileAnimating===i)return D(!1);if(je=!1,s&&!l.disabled&&(c?f||(r=!ge.contains(he)):_e===this||(this.lastPutMode=xe.checkPull(this,s,he,e))&&u.checkPut(this,s,he,e))){if(a="vertical"===this._getDirection(e,i),t=X(he),N("dragOverValid"),at.eventCanceled)return h;if(r)return me=ge,O(),this._hideClone(),N("revert"),at.eventCanceled||(ye?ge.insertBefore(he,ye):ge.appendChild(he)),D(!0);var m=J(o,l.draggable);if(!m||function(e,t,n){var r=X(J(n.el,n.options.draggable)),a=10;return t?e.clientX>r.right+a||e.clientX<=r.right&&e.clientY>r.bottom&&e.clientX>=r.left:e.clientX>r.right&&e.clientY>r.top||e.clientX<=r.right&&e.clientY>r.bottom+a}(e,a,this)&&!m.animated){if(m===he)return D(!1);if(m&&o===e.target&&(i=m),i&&(n=X(i)),!1!==ot(ge,o,he,t,i,n,e,!!i))return O(),o.appendChild(he),me=o,I(),D(!0)}else if(i.parentNode===o){n=X(i);var v,g,y,b=he.parentNode!==o,k=!function(e,t,n){var r=n?e.left:e.top,a=n?e.right:e.bottom,o=n?e.width:e.height,i=n?t.left:t.top,l=n?t.right:t.bottom,u=n?t.width:t.height;return r===i||a===l||r+o/2===i+u/2}(he.animated&&he.toRect||t,i.animated&&i.toRect||n,a),w=a?"top":"left",S=q(i,"top","top")||q(he,"top","top"),E=S?S.scrollTop:void 0;if(Le!==i&&(g=n[w],Be=!1,He=!k&&l.invertSwap||b),0!==(v=function(e,t,n,r,a,o,i,l){var u=r?e.clientY:e.clientX,s=r?n.height:n.width,c=r?n.top:n.left,f=r?n.bottom:n.right,d=!1;if(!i)if(l&&Ae<s*a){if(!Be&&(1===ze?u>c+s*o/2:u<f-s*o/2)&&(Be=!0),Be)d=!0;else if(1===ze?u<c+Ae:u>f-Ae)return-ze}else if(u>c+s*(1-a)/2&&u<f-s*(1-a)/2)return function(e){return Z(he)<Z(e)?1:-1}(t);if((d=d||i)&&(u<c+s*o/2||u>f-s*o/2))return u>c+s/2?1:-1;return 0}(e,i,n,a,k?1:l.swapThreshold,null==l.invertedSwapThreshold?l.swapThreshold:l.invertedSwapThreshold,He,Le===i))){var C=Z(he);do{C-=v,y=me.children[C]}while(y&&("none"===$(y,"display")||y===ve))}if(0===v||y===i)return D(!1);Le=i,ze=v;var T=i.nextElementSibling,x=!1,P=ot(ge,o,he,t,i,n,e,x=1===v);if(!1!==P)return 1!==P&&-1!==P||(x=1===P),$e=!0,setTimeout(lt,30),O(),x&&!T?o.appendChild(he):i.parentNode.insertBefore(he,x?T:i),S&&ae(S,0,E-S.scrollTop),me=he.parentNode,void 0===g||He||(Ae=Math.abs(g-X(i)[w])),I(),D(!0)}if(o.contains(he))return D(!1)}return!1}function N(l,u){de(l,p,_({evt:e,isOwner:c,axis:a?"vertical":"horizontal",revert:r,dragRect:t,targetRect:n,canSort:f,fromSortable:d,target:i,completed:D,onMove:function(n,r){return ot(ge,o,he,t,n,X(n),e,r)},changed:I},u))}function O(){N("dragOverAnimationCapture"),p.captureAnimationState(),p!==d&&d.captureAnimationState()}function D(t){return N("dragOverCompleted",{insertion:t}),t&&(c?s._hideClone():s._showClone(p),p!==d&&(V(he,_e?_e.options.ghostClass:s.options.ghostClass,!1),V(he,l.ghostClass,!0)),_e!==p&&p!==at.active?_e=p:p===at.active&&_e&&(_e=null),d===p&&(p._ignoreWhileAnimating=i),p.animateAll((function(){N("dragOverAnimationComplete"),p._ignoreWhileAnimating=null})),p!==d&&(d.animateAll(),d._ignoreWhileAnimating=null)),(i===he&&!he.animated||i===o&&!i.animated)&&(Le=null),l.dragoverBubble||e.rootEl||i===document||(he.parentNode[ie]._isOutsideThisEl(e.target),!t&&nt(e)),!l.dragoverBubble&&e.stopPropagation&&e.stopPropagation(),h=!0}function I(){Ee=Z(he),Te=Z(he,l.draggable),pe({sortable:p,name:"change",toEl:o,newIndex:Ee,newDraggableIndex:Te,originalEvent:e})}},_ignoreWhileAnimating:null,_offMoveEvents:function(){F(document,"mousemove",this._onTouchMove),F(document,"touchmove",this._onTouchMove),F(document,"pointermove",this._onTouchMove),F(document,"dragover",nt),F(document,"mousemove",nt),F(document,"touchmove",nt)},_offUpEvents:function(){var e=this.el.ownerDocument;F(e,"mouseup",this._onDrop),F(e,"touchend",this._onDrop),F(e,"pointerup",this._onDrop),F(e,"touchcancel",this._onDrop),F(document,"selectstart",this)},_onDrop:function(e){var t=this.el,n=this.options;Ee=Z(he),Te=Z(he,n.draggable),de("drop",this,{evt:e}),me=he&&he.parentNode,Ee=Z(he),Te=Z(he,n.draggable),at.eventCanceled||(Ue=!1,He=!1,Be=!1,clearInterval(this._loopId),clearTimeout(this._dragStartTimer),ct(this.cloneId),ct(this._dragStartId),this.nativeDraggable&&(F(document,"drop",this),F(t,"dragstart",this._onDragStart)),this._offMoveEvents(),this._offUpEvents(),M&&$(document.body,"user-select",""),$(he,"transform",""),e&&(Re&&(e.cancelable&&e.preventDefault(),!n.dropBubble&&e.stopPropagation()),ve&&ve.parentNode&&ve.parentNode.removeChild(ve),(ge===me||_e&&"clone"!==_e.lastPutMode)&&ke&&ke.parentNode&&ke.parentNode.removeChild(ke),he&&(this.nativeDraggable&&F(he,"dragend",this),it(he),he.style["will-change"]="",Re&&!Ue&&V(he,_e?_e.options.ghostClass:this.options.ghostClass,!1),V(he,this.options.chosenClass,!1),pe({sortable:this,name:"unchoose",toEl:me,newIndex:null,newDraggableIndex:null,originalEvent:e}),ge!==me?(Ee>=0&&(pe({rootEl:me,name:"add",toEl:me,fromEl:ge,originalEvent:e}),pe({sortable:this,name:"remove",toEl:me,originalEvent:e}),pe({rootEl:me,name:"sort",toEl:me,fromEl:ge,originalEvent:e}),pe({sortable:this,name:"sort",toEl:me,originalEvent:e})),_e&&_e.save()):Ee!==Se&&Ee>=0&&(pe({sortable:this,name:"update",toEl:me,originalEvent:e}),pe({sortable:this,name:"sort",toEl:me,originalEvent:e})),at.active&&(null!=Ee&&-1!==Ee||(Ee=Se,Te=Ce),pe({sortable:this,name:"end",toEl:me,originalEvent:e}),this.save())))),this._nulling()},_nulling:function(){de("nulling",this),ge=he=me=ve=ye=ke=be=we=Pe=Ne=Re=Ee=Te=Se=Ce=Le=ze=_e=xe=at.dragged=at.ghost=at.clone=at.active=null,Qe.forEach((function(e){e.checked=!0})),Qe.length=Oe=De=0},handleEvent:function(e){switch(e.type){case"drop":case"dragend":this._onDrop(e);break;case"dragenter":case"dragover":he&&(this._onDragOver(e),function(e){e.dataTransfer&&(e.dataTransfer.dropEffect="move");e.cancelable&&e.preventDefault()}(e));break;case"selectstart":e.preventDefault()}},toArray:function(){for(var e,t=[],n=this.el.children,r=0,a=n.length,o=this.options;r<a;r++)W(e=n[r],o.draggable,this.el,!1)&&t.push(e.getAttribute(o.dataIdAttr)||ut(e));return t},sort:function(e,t){var n={},r=this.el;this.toArray().forEach((function(e,t){var a=r.children[t];W(a,this.options.draggable,r,!1)&&(n[e]=a)}),this),t&&this.captureAnimationState(),e.forEach((function(e){n[e]&&(r.removeChild(n[e]),r.appendChild(n[e]))})),t&&this.animateAll()},save:function(){var e=this.options.store;e&&e.set&&e.set(this)},closest:function(e,t){return W(e,t||this.options.draggable,this.el,!1)},option:function(e,t){var n=this.options;if(void 0===t)return n[e];var r=ce.modifyOption(this,e,t);n[e]=void 0!==r?r:t,"group"===e&&Ze(n)},destroy:function(){de("destroy",this);var e=this.el;e[ie]=null,F(e,"mousedown",this._onTapStart),F(e,"touchstart",this._onTapStart),F(e,"pointerdown",this._onTapStart),this.nativeDraggable&&(F(e,"dragover",this),F(e,"dragenter",this)),Array.prototype.forEach.call(e.querySelectorAll("[draggable]"),(function(e){e.removeAttribute("draggable")})),this._onDrop(),this._disableDelayedDragEvents(),We.splice(We.indexOf(this.el),1),this.el=e=null},_hideClone:function(){if(!we){if(de("hideClone",this),at.eventCanceled)return;$(ke,"display","none"),this.options.removeCloneOnHide&&ke.parentNode&&ke.parentNode.removeChild(ke),we=!0}},_showClone:function(e){if("clone"===e.lastPutMode){if(we){if(de("showClone",this),at.eventCanceled)return;he.parentNode!=ge||this.options.group.revertClone?ye?ge.insertBefore(ke,ye):ge.appendChild(ke):ge.insertBefore(ke,he),this.options.group.revertClone&&this.animate(he,ke),$(ke,"display",""),we=!1}}else this._hideClone()}},Ke&&A(document,"touchmove",(function(e){(at.active||Ue)&&e.cancelable&&e.preventDefault()})),at.utils={on:A,off:F,css:$,find:K,is:function(e,t){return!!W(e,t,e,!1)},extend:function(e,t){if(e&&t)for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n]);return e},throttle:re,closest:W,toggleClass:V,clone:oe,index:Z,nextTick:st,cancelNextTick:ct,detectDirection:Je,getChild:G},at.get=function(e){return e[ie]},at.mount=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];t[0].constructor===Array&&(t=t[0]),t.forEach((function(e){if(!e.prototype||!e.prototype.constructor)throw"Sortable: Mounted plugin must be a constructor function, not ".concat({}.toString.call(e));e.utils&&(at.utils=_({},at.utils,e.utils)),ce.mount(e)}))},at.create=function(e,t){return new at(e,t)},at.version="1.13.0";var ft,dt,pt,ht,mt,vt,gt=[],yt=!1;function bt(){gt.forEach((function(e){clearInterval(e.pid)})),gt=[]}function kt(){clearInterval(vt)}var wt=re((function(e,t,n,r){if(t.scroll){var a,o=(e.touches?e.touches[0]:e).clientX,i=(e.touches?e.touches[0]:e).clientY,l=t.scrollSensitivity,u=t.scrollSpeed,s=Y(),c=!1;dt!==n&&(dt=n,bt(),ft=t.scroll,a=t.scrollFn,!0===ft&&(ft=te(n,!0)));var f=0,d=ft;do{var p=d,h=X(p),m=h.top,v=h.bottom,g=h.left,y=h.right,b=h.width,k=h.height,w=void 0,S=void 0,E=p.scrollWidth,C=p.scrollHeight,T=$(p),x=p.scrollLeft,_=p.scrollTop;p===s?(w=b<E&&("auto"===T.overflowX||"scroll"===T.overflowX||"visible"===T.overflowX),S=k<C&&("auto"===T.overflowY||"scroll"===T.overflowY||"visible"===T.overflowY)):(w=b<E&&("auto"===T.overflowX||"scroll"===T.overflowX),S=k<C&&("auto"===T.overflowY||"scroll"===T.overflowY));var P=w&&(Math.abs(y-o)<=l&&x+b<E)-(Math.abs(g-o)<=l&&!!x),N=S&&(Math.abs(v-i)<=l&&_+k<C)-(Math.abs(m-i)<=l&&!!_);if(!gt[f])for(var O=0;O<=f;O++)gt[O]||(gt[O]={});gt[f].vx==P&&gt[f].vy==N&&gt[f].el===p||(gt[f].el=p,gt[f].vx=P,gt[f].vy=N,clearInterval(gt[f].pid),0==P&&0==N||(c=!0,gt[f].pid=setInterval(function(){r&&0===this.layer&&at.active._onTouchMove(mt);var t=gt[this.layer].vy?gt[this.layer].vy*u:0,n=gt[this.layer].vx?gt[this.layer].vx*u:0;"function"==typeof a&&"continue"!==a.call(at.dragged.parentNode[ie],n,t,e,mt,gt[this.layer].el)||ae(gt[this.layer].el,n,t)}.bind({layer:f}),24))),f++}while(t.bubbleScroll&&d!==s&&(d=te(d,!1)));yt=c}}),30),St=function(e){var t=e.originalEvent,n=e.putSortable,r=e.dragEl,a=e.activeSortable,o=e.dispatchSortableEvent,i=e.hideGhostForTarget,l=e.unhideGhostForTarget;if(t){var u=n||a;i();var s=t.changedTouches&&t.changedTouches.length?t.changedTouches[0]:t,c=document.elementFromPoint(s.clientX,s.clientY);l(),u&&!u.el.contains(c)&&(o("spill"),this.onSpill({dragEl:r,putSortable:n}))}};function Et(){}function Ct(){}Et.prototype={startIndex:null,dragStart:function(e){var t=e.oldDraggableIndex;this.startIndex=t},onSpill:function(e){var t=e.dragEl,n=e.putSortable;this.sortable.captureAnimationState(),n&&n.captureAnimationState();var r=G(this.sortable.el,this.startIndex,this.options);r?this.sortable.el.insertBefore(t,r):this.sortable.el.appendChild(t),this.sortable.animateAll(),n&&n.animateAll()},drop:St},x(Et,{pluginName:"revertOnSpill"}),Ct.prototype={onSpill:function(e){var t=e.dragEl,n=e.putSortable||this.sortable;n.captureAnimationState(),t.parentNode&&t.parentNode.removeChild(t),n.animateAll()},drop:St},x(Ct,{pluginName:"removeOnSpill"});at.mount(new function(){function e(){for(var e in this.defaults={scroll:!0,scrollSensitivity:30,scrollSpeed:10,bubbleScroll:!0},this)"_"===e.charAt(0)&&"function"==typeof this[e]&&(this[e]=this[e].bind(this))}return e.prototype={dragStarted:function(e){var t=e.originalEvent;this.sortable.nativeDraggable?A(document,"dragover",this._handleAutoScroll):this.options.supportPointer?A(document,"pointermove",this._handleFallbackAutoScroll):t.touches?A(document,"touchmove",this._handleFallbackAutoScroll):A(document,"mousemove",this._handleFallbackAutoScroll)},dragOverCompleted:function(e){var t=e.originalEvent;this.options.dragOverBubble||t.rootEl||this._handleAutoScroll(t)},drop:function(){this.sortable.nativeDraggable?F(document,"dragover",this._handleAutoScroll):(F(document,"pointermove",this._handleFallbackAutoScroll),F(document,"touchmove",this._handleFallbackAutoScroll),F(document,"mousemove",this._handleFallbackAutoScroll)),kt(),bt(),clearTimeout(B),B=void 0},nulling:function(){mt=dt=ft=yt=vt=pt=ht=null,gt.length=0},_handleFallbackAutoScroll:function(e){this._handleAutoScroll(e,!0)},_handleAutoScroll:function(e,t){var n=this,r=(e.touches?e.touches[0]:e).clientX,a=(e.touches?e.touches[0]:e).clientY,o=document.elementFromPoint(r,a);if(mt=e,t||D||O||M){wt(e,this.options,o,t);var i=te(o,!0);!yt||vt&&r===pt&&a===ht||(vt&&kt(),vt=setInterval((function(){var o=te(document.elementFromPoint(r,a),!0);o!==i&&(i=o,bt()),wt(e,n.options,o,t)}),10),pt=r,ht=a)}else{if(!this.options.bubbleScroll||te(o,!0)===Y())return void bt();wt(e,this.options,te(o,!1),!1)}}},x(e,{pluginName:"scroll",initializeByDefault:!0})}),at.mount(Ct,Et);const Tt=at;function xt(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=s(e);if(t){var a=s(this).constructor;n=Reflect.construct(r,arguments,a)}else n=r.apply(this,arguments);return u(this,n)}}var _t=function(t){o(a,t);var n=xt(a);function a(t){var r;return e(this,a),d(l(r=n.call(this,t)),"deleteTask",(function(e){v.get().deleteTask(e),r.updateTasks()})),d(l(r),"toggleTaskStatus",(function(e){e.toggleStatus(),e.completed||v.get().moveTaskToTop(e),setTimeout((function(){r.taskStatusUpdated()}),300)})),d(l(r),"handleTaskTextChange",(function(){v.get().save()})),d(l(r),"taskCompletedDragging",(function(e){var t="open-tasks"==e.from.id,n="completed-tasks"==e.to.id,a=!n,o=e.oldIndex,i=e.newIndex,l=r.taskAtIndex(t?0:1,o),u=r.taskAtIndex(a?0:1,i);v.get().changeTaskPosition(l,u),n?l.markCompleted():l.markOpen(),r.taskStatusUpdated()})),d(l(r),"createTask",(function(e){v.get().setUnsavedTask("");var t=v.get().createTask(e);v.get().addTask(t),r.updateTasks()})),d(l(r),"saveUnsavedTask",(function(e){v.get().setUnsavedTask(e),v.get().save(),r.updateTasks()})),d(l(r),"onReopenCompleted",(function(){confirm("Are you sure you want to reopen completed tasks?")&&(v.get().reopenCompleted(),r.updateTasks())})),d(l(r),"onDeleteCompleted",(function(){confirm("Are you sure you want to delete completed tasks?")&&(v.get().deleteCompleted(),r.updateTasks())})),r.state={unsavedTask:"",openTasks:[],completedTasks:[]},v.get().setDataChangeHandler((function(){r.initiateSorting(),r.updateTasks()})),v.get().setOnReady((function(){var e=v.get().getPlatform();document.documentElement.className+=e,r.setState({ready:!0})})),r}return r(a,[{key:"componentDidMount",value:function(){v.get().initiateBridge(),this.updateTasks()}},{key:"initiateSorting",value:function(){if(!this.didInitiateSorting){this.didInitiateSorting=!0;var e={delay:100,delayOnTouchOnly:!0,draggable:".task",dragClass:"task-dragging",handle:".checkbox-container",onEnd:this.taskCompletedDragging,name:"open-tasks"};Tt.create(document.getElementById("open-tasks"),e),e.name="completed-tasks",Tt.create(document.getElementById("completed-tasks"),e)}}},{key:"updateTasks",value:function(){this.setState(v.get().splitTasks())}},{key:"taskStatusUpdated",value:function(){this.updateTasks(),v.get().save()}},{key:"taskAtIndex",value:function(e,t){return 0==e?this.state.openTasks[t]:this.state.completedTasks[t]}},{key:"taskRowForTask",value:function(e){return c.createElement(w,{task:e,handleCheckboxChange:this.toggleTaskStatus,handleTextChange:this.handleTaskTextChange,deleteTask:this.deleteTask,key:v.get().keyForTask(e),spellcheckEnabled:v.get().spellcheckEnabled})}},{key:"render",value:function(){var e=this,t=this.state,n=t.unsavedTask,r=t.openTasks,a=t.completedTasks;return c.createElement(c.Fragment,null,this.state.ready&&c.createElement("div",{className:"task-input"},c.createElement(E,{onSubmit:this.createTask,onUpdate:this.saveUnsavedTask,unsavedTask:n})),c.createElement("div",{className:"task-section"},c.createElement("h3",null,"Open Tasks"),c.createElement("div",{id:"open-tasks"},r.map((function(t,n){return e.taskRowForTask(t,n)})))),c.createElement("div",{className:"task-section"},c.createElement("h3",null,"Completed Tasks"),c.createElement("div",{id:"completed-tasks"},a.map((function(t,n){return e.taskRowForTask(t,n)}))),a.length>0&&c.createElement("div",null,c.createElement("a",{className:"clear-button",onClick:this.onReopenCompleted},"Reopen Completed"),c.createElement("a",{className:"clear-button",onClick:this.onDeleteCompleted},"Delete Completed"))))}}]),a}(c.Component);function Pt(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=s(e);if(t){var a=s(this).constructor;n=Reflect.construct(r,arguments,a)}else n=r.apply(this,arguments);return u(this,n)}}var Nt=function(t){o(a,t);var n=Pt(a);function a(t){return e(this,a),n.call(this,t)}return r(a,[{key:"render",value:function(){return c.createElement("div",{className:"sn-component"},c.createElement(_t,null))}}]),a}(c.Component);f.render(c.createElement(Nt,null),document.body.appendChild(document.createElement("div")))})()})();
\ No newline at end of file
+(()=>{var e={156:e=>{self,e.exports=(()=>{"use strict";var e={d:(t,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};let n,r,a,o;var i;e.d(t,{default:()=>T}),function(e){e.SetSize="set-size",e.StreamItems="stream-items",e.StreamContextItem="stream-context-item",e.SaveItems="save-items",e.SelectItem="select-item",e.AssociateItem="associate-item",e.DeassociateItem="deassociate-item",e.ClearSelection="clear-selection",e.CreateItem="create-item",e.CreateItems="create-items",e.DeleteItems="delete-items",e.SetComponentData="set-component-data",e.InstallLocalComponent="install-local-component",e.ToggleActivateComponent="toggle-activate-component",e.RequestPermissions="request-permissions",e.PresentConflictResolution="present-conflict-resolution",e.DuplicateItem="duplicate-item",e.ComponentRegistered="component-registered",e.ActivateThemes="themes",e.Reply="reply",e.SaveSuccess="save-success",e.SaveError="save-error",e.ThemesActivated="themes-activated",e.KeyDown="key-down",e.KeyUp="key-up",e.Click="click"}(n||(n={})),function(e){e[e.Web=1]="Web",e[e.Desktop=2]="Desktop",e[e.Mobile=3]="Mobile"}(r||(r={})),function(e){e.Any="*",e.Item="SF|Item",e.RootKey="SN|RootKey|NoSync",e.ItemsKey="SN|ItemsKey",e.EncryptedStorage="SN|EncryptedStorage",e.Note="Note",e.Tag="Tag",e.SmartTag="SN|SmartTag",e.Component="SN|Component",e.Editor="SN|Editor",e.ActionsExtension="Extension",e.UserPrefs="SN|UserPreferences",e.HistorySession="SN|HistorySession",e.Theme="SN|Theme",e.Mfa="SF|MFA",e.ServerExtension="SF|Extension",e.FilesafeCredentials="SN|FileSafe|Credentials",e.FilesafeFileMetadata="SN|FileSafe|FileMetadata",e.FilesafeIntegration="SN|FileSafe|Integration",e.ExtensionRepo="SN|ExtensionRepo"}(a||(a={})),function(e){e.Pinned="pinned",e.Archived="archived",e.Locked="locked",e.UserModifiedDate="client_updated_at",e.DefaultEditor="defaultEditor",e.MobileRules="mobileRules",e.NotAvailableOnMobile="notAvailableOnMobile",e.MobileActive="mobileActive",e.LastSize="lastSize",e.PrefersPlainEditor="prefersPlainEditor",e.ComponentInstallError="installError"}(o||(o={}));var l=new Uint8Array(16);function u(){if(!i&&!(i="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)||"undefined"!=typeof msCrypto&&"function"==typeof msCrypto.getRandomValues&&msCrypto.getRandomValues.bind(msCrypto)))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return i(l)}const s=/^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i,c=function(e){return"string"==typeof e&&s.test(e)};for(var f=[],d=0;d<256;++d)f.push((d+256).toString(16).substr(1));const p=function(e,t,n){var r=(e=e||{}).random||(e.rng||u)();if(r[6]=15&r[6]|64,r[8]=63&r[8]|128,t){n=n||0;for(var a=0;a<16;++a)t[n+a]=r[a];return t}return function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=(f[e[t+0]]+f[e[t+1]]+f[e[t+2]]+f[e[t+3]]+"-"+f[e[t+4]]+f[e[t+5]]+"-"+f[e[t+6]]+f[e[t+7]]+"-"+f[e[t+8]]+f[e[t+9]]+"-"+f[e[t+10]]+f[e[t+11]]+f[e[t+12]]+f[e[t+13]]+f[e[t+14]]+f[e[t+15]]).toLowerCase();if(!c(n))throw TypeError("Stringified UUID is invalid");return n}(r)},h=e=>{var t;const n={[r.Web]:"web",[r.Desktop]:"desktop",[r.Mobile]:"mobile"};return null!==(t=n[e])&&void 0!==t?t:n[r.Web]},m=e=>null!=e,v=()=>{};class g{static get isSupported(){return!(!window.console&&!console)}static get info(){return g.isSupported&&this.enabled?console.log.bind(console):v}static get error(){return g.isSupported?console.error.bind(console):v}}var y,b,k,w;function S(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function E(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?S(Object(n),!0).forEach((function(t){C(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):S(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function C(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}(b="enabled")in(y=g)?Object.defineProperty(y,b,{value:!1,enumerable:!0,configurable:!0,writable:!0}):y[b]=!1,function(e){e.Component="component"}(k||(k={})),function(e){e.Shift="Shift",e.Ctrl="Control",e.Meta="Meta"}(w||(w={}));class T{constructor(e){if(C(this,"contentWindow",void 0),C(this,"initialPermissions",void 0),C(this,"onReadyCallback",void 0),C(this,"component",{activeThemes:[],acceptsThemes:!0}),C(this,"sentMessages",[]),C(this,"messageQueue",[]),C(this,"lastStreamedItem",void 0),C(this,"pendingSaveItems",void 0),C(this,"pendingSaveTimeout",void 0),C(this,"pendingSaveParams",void 0),C(this,"coallesedSaving",!0),C(this,"coallesedSavingDelay",250),C(this,"messageHandler",void 0),C(this,"keyDownEventListener",void 0),C(this,"keyUpEventListener",void 0),C(this,"clickEventListener",void 0),C(this,"onThemesChangeCallback",void 0),C(this,"concernTimeouts",[]),!e||!e.targetWindow)throw new Error("contentWindow must be a valid Window object.");this.contentWindow=e.targetWindow,this.processParameters(e),this.registerMessageHandler(),this.registerKeyboardEventListeners(),this.registerMouseEventListeners()}processParameters(e){var t;const{initialPermissions:n,options:r,onReady:a,onThemesChange:o}=e;var i;n&&n.length>0&&(this.initialPermissions=n),m(null==r?void 0:r.coallesedSaving)&&(this.coallesedSaving=r.coallesedSaving),m(null==r?void 0:r.coallesedSavingDelay)&&(this.coallesedSavingDelay=r.coallesedSavingDelay),m(null==r?void 0:r.acceptsThemes)&&(this.component.acceptsThemes=null===(i=null==r?void 0:r.acceptsThemes)||void 0===i||i),m(a)&&(this.onReadyCallback=a),m(o)&&(this.onThemesChangeCallback=o),g.enabled=null!==(t=null==r?void 0:r.debug)&&void 0!==t&&t}deinit(){this.onReadyCallback=void 0,this.component={acceptsThemes:!0,activeThemes:[]},this.messageQueue=[],this.sentMessages=[],this.lastStreamedItem=void 0,this.pendingSaveItems=void 0,this.pendingSaveTimeout=void 0,this.pendingSaveParams=void 0,this.messageHandler&&(this.contentWindow.document.removeEventListener("message",this.messageHandler),this.contentWindow.removeEventListener("message",this.messageHandler)),this.keyDownEventListener&&this.contentWindow.removeEventListener("keydown",this.keyDownEventListener),this.keyUpEventListener&&this.contentWindow.removeEventListener("keyup",this.keyUpEventListener),this.clickEventListener&&this.contentWindow.removeEventListener("click",this.clickEventListener)}registerMessageHandler(){this.messageHandler=e=>{if(g.info("Components API Message received:",e.data),document.referrer&&new URL(document.referrer).origin!==new URL(e.origin).origin)return;const{data:t}=e,r=(e=>{if("string"!=typeof e)return!1;try{const t=JSON.parse(e),n=Object.prototype.toString.call(t);return"[object Object]"===n||"[object Array]"===n}catch(e){return!1}})(t)?JSON.parse(t):t;if(r){if(void 0===this.component.origin&&r.action===n.ComponentRegistered)this.component.origin=e.origin;else if(e.origin!==this.component.origin)return;this.handleMessage(r)}else g.error("Invalid data received. Skipping...")},this.contentWindow.document.addEventListener("message",this.messageHandler,!1),this.contentWindow.addEventListener("message",this.messageHandler,!1),g.info("Waiting for messages...")}registerKeyboardEventListeners(){this.keyDownEventListener=e=>{g.info("A key has been pressed: ".concat(e.key)),e.ctrlKey?this.keyDownEvent(w.Ctrl):e.shiftKey?this.keyDownEvent(w.Shift):(e.metaKey||"Meta"===e.key)&&this.keyDownEvent(w.Meta)},this.keyUpEventListener=e=>{g.info("A key has been released: ".concat(e.key)),"Control"===e.key?this.keyUpEvent(w.Ctrl):"Shift"===e.key?this.keyUpEvent(w.Shift):"Meta"===e.key&&this.keyUpEvent(w.Meta)},this.contentWindow.addEventListener("keydown",this.keyDownEventListener,!1),this.contentWindow.addEventListener("keyup",this.keyUpEventListener,!1)}registerMouseEventListeners(){this.clickEventListener=e=>{g.info("A click has been performed."),this.mouseClickEvent()},this.contentWindow.addEventListener("click",this.clickEventListener,!1)}handleMessage(e){switch(e.action){case n.ComponentRegistered:this.component.sessionKey=e.sessionKey,e.componentData&&(this.component.data=e.componentData),this.onReady(e.data),g.info("Component successfully registered with payload:",e);break;case n.ActivateThemes:this.activateThemes(e.data.themes);break;default:{var t,r;if(!e.original)return;const n=null===(t=this.sentMessages)||void 0===t?void 0:t.filter((t=>{var n;return t.messageId===(null===(n=e.original)||void 0===n?void 0:n.messageId)}))[0];if(!n){const e=this.contentWindow.document.title,t=("The extension '".concat(e,"' is attempting to communicate with Standard Notes, ")+"but an error is preventing it from doing so. Please restart this extension and try again.").replace("  "," ");return void g.info(t)}null==n||null===(r=n.callback)||void 0===r||r.call(n,e.data);break}}}onReady(e){this.component.environment=e.environment,this.component.platform=e.platform,this.component.uuid=e.uuid,this.initialPermissions&&this.initialPermissions.length>0&&this.requestPermissions(this.initialPermissions);for(const e of this.messageQueue)this.postMessage(e.action,e.data,e.callback);this.messageQueue=[],g.info("Data passed to onReady:",e),this.activateThemes(e.activeThemeUrls||[]),this.postMessage(n.ThemesActivated,{}),this.onReadyCallback&&this.onReadyCallback()}getSelfComponentUUID(){return this.component.uuid}isRunningInDesktopApplication(){return this.component.environment===h(r.Desktop)}isRunningInMobileApplication(){return this.component.environment===h(r.Mobile)}getComponentDataValueForKey(e){if(this.component.data)return this.component.data[e]}setComponentDataValueForKey(e,t){if(!this.component.data)throw new Error("The component has not been initialized.");if(!e||e&&0===e.length)throw new Error("The key for the data value should be a valid string.");this.component.data=E(E({},this.component.data),{},{[e]:t}),this.postMessage(n.SetComponentData,{componentData:this.component.data})}clearComponentData(){this.component.data={},this.postMessage(n.SetComponentData,{componentData:this.component.data})}postMessage(e,t,n){if(!this.component.sessionKey)return void this.messageQueue.push({action:e,data:t,api:k.Component,callback:n});const r={action:e,data:t,messageId:this.generateUUID(),sessionKey:this.component.sessionKey,api:k.Component},a=JSON.parse(JSON.stringify(r));let o;a.callback=n,this.sentMessages.push(a),o=this.isRunningInMobileApplication()?JSON.stringify(r):r,g.info("Posting message:",o),this.contentWindow.parent.postMessage(o,this.component.origin)}requestPermissions(e,t){this.postMessage(n.RequestPermissions,{permissions:e},(()=>{t&&t()}))}activateThemes(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];if(!this.component.acceptsThemes)return;g.info("Incoming themes:",e);const{activeThemes:t}=this.component;if(t&&t.sort().toString()==e.sort().toString())return;let n=e;const r=[];for(const a of t)e.includes(a)?n=n.filter((e=>e!==a)):r.push(a);g.info("Deactivating themes:",r),g.info("Activating themes:",n);for(const e of r)this.deactivateTheme(e);this.component.activeThemes=e;for(const e of n){if(!e)continue;const t=this.contentWindow.document.createElement("link");t.id=btoa(e),t.href=e,t.type="text/css",t.rel="stylesheet",t.media="screen,print",t.className="custom-theme",this.contentWindow.document.getElementsByTagName("head")[0].appendChild(t)}this.onThemesChangeCallback&&this.onThemesChangeCallback()}themeElementForUrl(e){return Array.from(this.contentWindow.document.getElementsByClassName("custom-theme")).slice().find((t=>t.id==btoa(e)))}deactivateTheme(e){const t=this.themeElementForUrl(e);t&&t.parentNode&&(t.setAttribute("disabled","true"),t.parentNode.removeChild(t))}generateUUID(){return p()}get platform(){return this.component.platform}get environment(){return this.component.environment}streamItems(e,t){this.postMessage(n.StreamItems,{content_types:e},(e=>{t(e.items)}))}streamContextItem(e){this.postMessage(n.StreamContextItem,{},(t=>{const{item:n}=t;(!this.lastStreamedItem||this.lastStreamedItem.uuid!==n.uuid)&&this.pendingSaveTimeout&&(clearTimeout(this.pendingSaveTimeout),this.performSavingOfItems(this.pendingSaveParams),this.pendingSaveTimeout=void 0,this.pendingSaveParams=void 0),this.lastStreamedItem=n,e(this.lastStreamedItem)}))}selectItem(e){this.postMessage(n.SelectItem,{item:this.jsonObjectForItem(e)})}clearSelection(){this.postMessage(n.ClearSelection,{content_type:a.Tag})}createItem(e,t){this.postMessage(n.CreateItem,{item:this.jsonObjectForItem(e)},(e=>{let{item:n}=e;!n&&e.items&&e.items.length>0&&(n=e.items[0]),this.associateItem(n),t&&t(n)}))}createItems(e,t){const r=e.map((e=>this.jsonObjectForItem(e)));this.postMessage(n.CreateItems,{items:r},(e=>{t&&t(e.items)}))}associateItem(e){this.postMessage(n.AssociateItem,{item:this.jsonObjectForItem(e)})}deassociateItem(e){this.postMessage(n.DeassociateItem,{item:this.jsonObjectForItem(e)})}deleteItem(e,t){this.deleteItems([e],t)}deleteItems(e,t){const r={items:e.map((e=>this.jsonObjectForItem(e)))};this.postMessage(n.DeleteItems,r,(e=>{t&&t(e)}))}sendCustomEvent(e,t,n){this.postMessage(e,t,(e=>{n&&n(e)}))}saveItem(e,t){let n=arguments.length>2&&void 0!==arguments[2]&&arguments[2];this.saveItems([e],t,n)}saveItemWithPresave(e,t,n){this.saveItemsWithPresave([e],t,n)}saveItemsWithPresave(e,t,n){this.saveItems(e,n,!1,t)}performSavingOfItems(e){let{items:t,presave:r,callback:a}=e;const o=setTimeout((()=>{this.concernTimeouts.forEach((e=>clearTimeout(e))),alert("This editor is unable to communicate with Standard Notes. Your changes may not be saved. Please backup your changes, then restart the application and try again.")}),5e3);this.concernTimeouts.push(o),r&&r();const i=[];for(const e of t)i.push(this.jsonObjectForItem(e));this.postMessage(n.SaveItems,{items:i},(()=>{this.concernTimeouts.forEach((e=>clearTimeout(e))),null==a||a()}))}saveItems(e,t){let n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],r=arguments.length>3?arguments[3]:void 0;if(this.pendingSaveItems||(this.pendingSaveItems=[]),this.coallesedSaving&&!n){this.pendingSaveTimeout&&clearTimeout(this.pendingSaveTimeout);const n=e.map((e=>e.uuid)),a=this.pendingSaveItems.filter((e=>!n.includes(e.uuid)));this.pendingSaveItems=a.concat(e),this.pendingSaveParams={items:this.pendingSaveItems,presave:r,callback:t},this.pendingSaveTimeout=setTimeout((()=>{this.performSavingOfItems(this.pendingSaveParams),this.pendingSaveItems=[],this.pendingSaveTimeout=void 0,this.pendingSaveParams=null}),this.coallesedSavingDelay)}else this.performSavingOfItems({items:e,presave:r,callback:t})}setSize(e,t){this.postMessage(n.SetSize,{type:"container",width:e,height:t})}keyDownEvent(e){this.postMessage(n.KeyDown,{keyboardModifier:e})}keyUpEvent(e){this.postMessage(n.KeyUp,{keyboardModifier:e})}mouseClickEvent(){this.postMessage(n.Click,{})}jsonObjectForItem(e){const t=Object.assign({},e);return t.children=null,t.parent=null,t}getItemAppDataValue(e,t){var n,r;return null==e||null===(n=e.content)||void 0===n||null===(r=n.appData)||void 0===r?void 0:r["org.standardnotes.sn"][t]}}return t.default})()},418:e=>{"use strict";var t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable;function a(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach((function(e){r[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,o){for(var i,l,u=a(e),s=1;s<arguments.length;s++){for(var c in i=Object(arguments[s]))n.call(i,c)&&(u[c]=i[c]);if(t){l=t(i);for(var f=0;f<l.length;f++)r.call(i,l[f])&&(u[l[f]]=i[l[f]])}}return u}},703:(e,t,n)=>{"use strict";var r=n(414);function a(){}function o(){}o.resetWarningCache=a,e.exports=function(){function e(e,t,n,a,o,i){if(i!==r){var l=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:o,resetWarningCache:a};return n.PropTypes=n,n}},697:(e,t,n)=>{e.exports=n(703)()},414:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},448:(e,t,n)=>{"use strict";var r=n(294),a=n(418),o=n(840);function i(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n<arguments.length;n++)t+="&args[]="+encodeURIComponent(arguments[n]);return"Minified React error #"+e+"; visit "+t+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}if(!r)throw Error(i(227));var l=new Set,u={};function s(e,t){c(e,t),c(e+"Capture",t)}function c(e,t){for(u[e]=t,e=0;e<t.length;e++)l.add(t[e])}var f=!("undefined"==typeof window||void 0===window.document||void 0===window.document.createElement),d=/^[:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD][:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD\-.0-9\u00B7\u0300-\u036F\u203F-\u2040]*$/,p=Object.prototype.hasOwnProperty,h={},m={};function v(e,t,n,r,a,o,i){this.acceptsBooleans=2===t||3===t||4===t,this.attributeName=r,this.attributeNamespace=a,this.mustUseProperty=n,this.propertyName=e,this.type=t,this.sanitizeURL=o,this.removeEmptyString=i}var g={};"children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style".split(" ").forEach((function(e){g[e]=new v(e,0,!1,e,null,!1,!1)})),[["acceptCharset","accept-charset"],["className","class"],["htmlFor","for"],["httpEquiv","http-equiv"]].forEach((function(e){var t=e[0];g[t]=new v(t,1,!1,e[1],null,!1,!1)})),["contentEditable","draggable","spellCheck","value"].forEach((function(e){g[e]=new v(e,2,!1,e.toLowerCase(),null,!1,!1)})),["autoReverse","externalResourcesRequired","focusable","preserveAlpha"].forEach((function(e){g[e]=new v(e,2,!1,e,null,!1,!1)})),"allowFullScreen async autoFocus autoPlay controls default defer disabled disablePictureInPicture disableRemotePlayback formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope".split(" ").forEach((function(e){g[e]=new v(e,3,!1,e.toLowerCase(),null,!1,!1)})),["checked","multiple","muted","selected"].forEach((function(e){g[e]=new v(e,3,!0,e,null,!1,!1)})),["capture","download"].forEach((function(e){g[e]=new v(e,4,!1,e,null,!1,!1)})),["cols","rows","size","span"].forEach((function(e){g[e]=new v(e,6,!1,e,null,!1,!1)})),["rowSpan","start"].forEach((function(e){g[e]=new v(e,5,!1,e.toLowerCase(),null,!1,!1)}));var y=/[\-:]([a-z])/g;function b(e){return e[1].toUpperCase()}function k(e,t,n,r){var a=g.hasOwnProperty(t)?g[t]:null;(null!==a?0===a.type:!r&&(2<t.length&&("o"===t[0]||"O"===t[0])&&("n"===t[1]||"N"===t[1])))||(function(e,t,n,r){if(null==t||function(e,t,n,r){if(null!==n&&0===n.type)return!1;switch(typeof t){case"function":case"symbol":return!0;case"boolean":return!r&&(null!==n?!n.acceptsBooleans:"data-"!==(e=e.toLowerCase().slice(0,5))&&"aria-"!==e);default:return!1}}(e,t,n,r))return!0;if(r)return!1;if(null!==n)switch(n.type){case 3:return!t;case 4:return!1===t;case 5:return isNaN(t);case 6:return isNaN(t)||1>t}return!1}(t,n,a,r)&&(n=null),r||null===a?function(e){return!!p.call(m,e)||!p.call(h,e)&&(d.test(e)?m[e]=!0:(h[e]=!0,!1))}(t)&&(null===n?e.removeAttribute(t):e.setAttribute(t,""+n)):a.mustUseProperty?e[a.propertyName]=null===n?3!==a.type&&"":n:(t=a.attributeName,r=a.attributeNamespace,null===n?e.removeAttribute(t):(n=3===(a=a.type)||4===a&&!0===n?"":""+n,r?e.setAttributeNS(r,t,n):e.setAttribute(t,n))))}"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height".split(" ").forEach((function(e){var t=e.replace(y,b);g[t]=new v(t,1,!1,e,null,!1,!1)})),"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type".split(" ").forEach((function(e){var t=e.replace(y,b);g[t]=new v(t,1,!1,e,"http://www.w3.org/1999/xlink",!1,!1)})),["xml:base","xml:lang","xml:space"].forEach((function(e){var t=e.replace(y,b);g[t]=new v(t,1,!1,e,"http://www.w3.org/XML/1998/namespace",!1,!1)})),["tabIndex","crossOrigin"].forEach((function(e){g[e]=new v(e,1,!1,e.toLowerCase(),null,!1,!1)})),g.xlinkHref=new v("xlinkHref",1,!1,"xlink:href","http://www.w3.org/1999/xlink",!0,!1),["src","href","action","formAction"].forEach((function(e){g[e]=new v(e,1,!1,e.toLowerCase(),null,!0,!0)}));var w=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,S=60103,E=60106,C=60107,T=60108,x=60114,_=60109,P=60110,N=60112,O=60113,D=60120,I=60115,M=60116,R=60121,L=60128,z=60129,A=60130,F=60131;if("function"==typeof Symbol&&Symbol.for){var U=Symbol.for;S=U("react.element"),E=U("react.portal"),C=U("react.fragment"),T=U("react.strict_mode"),x=U("react.profiler"),_=U("react.provider"),P=U("react.context"),N=U("react.forward_ref"),O=U("react.suspense"),D=U("react.suspense_list"),I=U("react.memo"),M=U("react.lazy"),R=U("react.block"),U("react.scope"),L=U("react.opaque.id"),z=U("react.debug_trace_mode"),A=U("react.offscreen"),F=U("react.legacy_hidden")}var j,W="function"==typeof Symbol&&Symbol.iterator;function B(e){return null===e||"object"!=typeof e?null:"function"==typeof(e=W&&e[W]||e["@@iterator"])?e:null}function H(e){if(void 0===j)try{throw Error()}catch(e){var t=e.stack.trim().match(/\n( *(at )?)/);j=t&&t[1]||""}return"\n"+j+e}var V=!1;function $(e,t){if(!e||V)return"";V=!0;var n=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{if(t)if(t=function(){throw Error()},Object.defineProperty(t.prototype,"props",{set:function(){throw Error()}}),"object"==typeof Reflect&&Reflect.construct){try{Reflect.construct(t,[])}catch(e){var r=e}Reflect.construct(e,[],t)}else{try{t.call()}catch(e){r=e}e.call(t.prototype)}else{try{throw Error()}catch(e){r=e}e()}}catch(e){if(e&&r&&"string"==typeof e.stack){for(var a=e.stack.split("\n"),o=r.stack.split("\n"),i=a.length-1,l=o.length-1;1<=i&&0<=l&&a[i]!==o[l];)l--;for(;1<=i&&0<=l;i--,l--)if(a[i]!==o[l]){if(1!==i||1!==l)do{if(i--,0>--l||a[i]!==o[l])return"\n"+a[i].replace(" at new "," at ")}while(1<=i&&0<=l);break}}}finally{V=!1,Error.prepareStackTrace=n}return(e=e?e.displayName||e.name:"")?H(e):""}function Q(e){switch(e.tag){case 5:return H(e.type);case 16:return H("Lazy");case 13:return H("Suspense");case 19:return H("SuspenseList");case 0:case 2:case 15:return e=$(e.type,!1);case 11:return e=$(e.type.render,!1);case 22:return e=$(e.type._render,!1);case 1:return e=$(e.type,!0);default:return""}}function K(e){if(null==e)return null;if("function"==typeof e)return e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case C:return"Fragment";case E:return"Portal";case x:return"Profiler";case T:return"StrictMode";case O:return"Suspense";case D:return"SuspenseList"}if("object"==typeof e)switch(e.$$typeof){case P:return(e.displayName||"Context")+".Consumer";case _:return(e._context.displayName||"Context")+".Provider";case N:var t=e.render;return t=t.displayName||t.name||"",e.displayName||(""!==t?"ForwardRef("+t+")":"ForwardRef");case I:return K(e.type);case R:return K(e._render);case M:t=e._payload,e=e._init;try{return K(e(t))}catch(e){}}return null}function Y(e){switch(typeof e){case"boolean":case"number":case"object":case"string":case"undefined":return e;default:return""}}function X(e){var t=e.type;return(e=e.nodeName)&&"input"===e.toLowerCase()&&("checkbox"===t||"radio"===t)}function q(e){e._valueTracker||(e._valueTracker=function(e){var t=X(e)?"checked":"value",n=Object.getOwnPropertyDescriptor(e.constructor.prototype,t),r=""+e[t];if(!e.hasOwnProperty(t)&&void 0!==n&&"function"==typeof n.get&&"function"==typeof n.set){var a=n.get,o=n.set;return Object.defineProperty(e,t,{configurable:!0,get:function(){return a.call(this)},set:function(e){r=""+e,o.call(this,e)}}),Object.defineProperty(e,t,{enumerable:n.enumerable}),{getValue:function(){return r},setValue:function(e){r=""+e},stopTracking:function(){e._valueTracker=null,delete e[t]}}}}(e))}function G(e){if(!e)return!1;var t=e._valueTracker;if(!t)return!0;var n=t.getValue(),r="";return e&&(r=X(e)?e.checked?"true":"false":e.value),(e=r)!==n&&(t.setValue(e),!0)}function J(e){if(void 0===(e=e||("undefined"!=typeof document?document:void 0)))return null;try{return e.activeElement||e.body}catch(t){return e.body}}function Z(e,t){var n=t.checked;return a({},t,{defaultChecked:void 0,defaultValue:void 0,value:void 0,checked:null!=n?n:e._wrapperState.initialChecked})}function ee(e,t){var n=null==t.defaultValue?"":t.defaultValue,r=null!=t.checked?t.checked:t.defaultChecked;n=Y(null!=t.value?t.value:n),e._wrapperState={initialChecked:r,initialValue:n,controlled:"checkbox"===t.type||"radio"===t.type?null!=t.checked:null!=t.value}}function te(e,t){null!=(t=t.checked)&&k(e,"checked",t,!1)}function ne(e,t){te(e,t);var n=Y(t.value),r=t.type;if(null!=n)"number"===r?(0===n&&""===e.value||e.value!=n)&&(e.value=""+n):e.value!==""+n&&(e.value=""+n);else if("submit"===r||"reset"===r)return void e.removeAttribute("value");t.hasOwnProperty("value")?ae(e,t.type,n):t.hasOwnProperty("defaultValue")&&ae(e,t.type,Y(t.defaultValue)),null==t.checked&&null!=t.defaultChecked&&(e.defaultChecked=!!t.defaultChecked)}function re(e,t,n){if(t.hasOwnProperty("value")||t.hasOwnProperty("defaultValue")){var r=t.type;if(!("submit"!==r&&"reset"!==r||void 0!==t.value&&null!==t.value))return;t=""+e._wrapperState.initialValue,n||t===e.value||(e.value=t),e.defaultValue=t}""!==(n=e.name)&&(e.name=""),e.defaultChecked=!!e._wrapperState.initialChecked,""!==n&&(e.name=n)}function ae(e,t,n){"number"===t&&J(e.ownerDocument)===e||(null==n?e.defaultValue=""+e._wrapperState.initialValue:e.defaultValue!==""+n&&(e.defaultValue=""+n))}function oe(e,t){return e=a({children:void 0},t),(t=function(e){var t="";return r.Children.forEach(e,(function(e){null!=e&&(t+=e)})),t}(t.children))&&(e.children=t),e}function ie(e,t,n,r){if(e=e.options,t){t={};for(var a=0;a<n.length;a++)t["$"+n[a]]=!0;for(n=0;n<e.length;n++)a=t.hasOwnProperty("$"+e[n].value),e[n].selected!==a&&(e[n].selected=a),a&&r&&(e[n].defaultSelected=!0)}else{for(n=""+Y(n),t=null,a=0;a<e.length;a++){if(e[a].value===n)return e[a].selected=!0,void(r&&(e[a].defaultSelected=!0));null!==t||e[a].disabled||(t=e[a])}null!==t&&(t.selected=!0)}}function le(e,t){if(null!=t.dangerouslySetInnerHTML)throw Error(i(91));return a({},t,{value:void 0,defaultValue:void 0,children:""+e._wrapperState.initialValue})}function ue(e,t){var n=t.value;if(null==n){if(n=t.children,t=t.defaultValue,null!=n){if(null!=t)throw Error(i(92));if(Array.isArray(n)){if(!(1>=n.length))throw Error(i(93));n=n[0]}t=n}null==t&&(t=""),n=t}e._wrapperState={initialValue:Y(n)}}function se(e,t){var n=Y(t.value),r=Y(t.defaultValue);null!=n&&((n=""+n)!==e.value&&(e.value=n),null==t.defaultValue&&e.defaultValue!==n&&(e.defaultValue=n)),null!=r&&(e.defaultValue=""+r)}function ce(e){var t=e.textContent;t===e._wrapperState.initialValue&&""!==t&&null!==t&&(e.value=t)}var fe="http://www.w3.org/1999/xhtml",de="http://www.w3.org/2000/svg";function pe(e){switch(e){case"svg":return"http://www.w3.org/2000/svg";case"math":return"http://www.w3.org/1998/Math/MathML";default:return"http://www.w3.org/1999/xhtml"}}function he(e,t){return null==e||"http://www.w3.org/1999/xhtml"===e?pe(t):"http://www.w3.org/2000/svg"===e&&"foreignObject"===t?"http://www.w3.org/1999/xhtml":e}var me,ve,ge=(ve=function(e,t){if(e.namespaceURI!==de||"innerHTML"in e)e.innerHTML=t;else{for((me=me||document.createElement("div")).innerHTML="<svg>"+t.valueOf().toString()+"</svg>",t=me.firstChild;e.firstChild;)e.removeChild(e.firstChild);for(;t.firstChild;)e.appendChild(t.firstChild)}},"undefined"!=typeof MSApp&&MSApp.execUnsafeLocalFunction?function(e,t,n,r){MSApp.execUnsafeLocalFunction((function(){return ve(e,t)}))}:ve);function ye(e,t){if(t){var n=e.firstChild;if(n&&n===e.lastChild&&3===n.nodeType)return void(n.nodeValue=t)}e.textContent=t}var be={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridArea:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},ke=["Webkit","ms","Moz","O"];function we(e,t,n){return null==t||"boolean"==typeof t||""===t?"":n||"number"!=typeof t||0===t||be.hasOwnProperty(e)&&be[e]?(""+t).trim():t+"px"}function Se(e,t){for(var n in e=e.style,t)if(t.hasOwnProperty(n)){var r=0===n.indexOf("--"),a=we(n,t[n],r);"float"===n&&(n="cssFloat"),r?e.setProperty(n,a):e[n]=a}}Object.keys(be).forEach((function(e){ke.forEach((function(t){t=t+e.charAt(0).toUpperCase()+e.substring(1),be[t]=be[e]}))}));var Ee=a({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0});function Ce(e,t){if(t){if(Ee[e]&&(null!=t.children||null!=t.dangerouslySetInnerHTML))throw Error(i(137,e));if(null!=t.dangerouslySetInnerHTML){if(null!=t.children)throw Error(i(60));if("object"!=typeof t.dangerouslySetInnerHTML||!("__html"in t.dangerouslySetInnerHTML))throw Error(i(61))}if(null!=t.style&&"object"!=typeof t.style)throw Error(i(62))}}function Te(e,t){if(-1===e.indexOf("-"))return"string"==typeof t.is;switch(e){case"annotation-xml":case"color-profile":case"font-face":case"font-face-src":case"font-face-uri":case"font-face-format":case"font-face-name":case"missing-glyph":return!1;default:return!0}}function xe(e){return(e=e.target||e.srcElement||window).correspondingUseElement&&(e=e.correspondingUseElement),3===e.nodeType?e.parentNode:e}var _e=null,Pe=null,Ne=null;function Oe(e){if(e=ea(e)){if("function"!=typeof _e)throw Error(i(280));var t=e.stateNode;t&&(t=na(t),_e(e.stateNode,e.type,t))}}function De(e){Pe?Ne?Ne.push(e):Ne=[e]:Pe=e}function Ie(){if(Pe){var e=Pe,t=Ne;if(Ne=Pe=null,Oe(e),t)for(e=0;e<t.length;e++)Oe(t[e])}}function Me(e,t){return e(t)}function Re(e,t,n,r,a){return e(t,n,r,a)}function Le(){}var ze=Me,Ae=!1,Fe=!1;function Ue(){null===Pe&&null===Ne||(Le(),Ie())}function je(e,t){var n=e.stateNode;if(null===n)return null;var r=na(n);if(null===r)return null;n=r[t];e:switch(t){case"onClick":case"onClickCapture":case"onDoubleClick":case"onDoubleClickCapture":case"onMouseDown":case"onMouseDownCapture":case"onMouseMove":case"onMouseMoveCapture":case"onMouseUp":case"onMouseUpCapture":case"onMouseEnter":(r=!r.disabled)||(r=!("button"===(e=e.type)||"input"===e||"select"===e||"textarea"===e)),e=!r;break e;default:e=!1}if(e)return null;if(n&&"function"!=typeof n)throw Error(i(231,t,typeof n));return n}var We=!1;if(f)try{var Be={};Object.defineProperty(Be,"passive",{get:function(){We=!0}}),window.addEventListener("test",Be,Be),window.removeEventListener("test",Be,Be)}catch(ve){We=!1}function He(e,t,n,r,a,o,i,l,u){var s=Array.prototype.slice.call(arguments,3);try{t.apply(n,s)}catch(e){this.onError(e)}}var Ve=!1,$e=null,Qe=!1,Ke=null,Ye={onError:function(e){Ve=!0,$e=e}};function Xe(e,t,n,r,a,o,i,l,u){Ve=!1,$e=null,He.apply(Ye,arguments)}function qe(e){var t=e,n=e;if(e.alternate)for(;t.return;)t=t.return;else{e=t;do{0!=(1026&(t=e).flags)&&(n=t.return),e=t.return}while(e)}return 3===t.tag?n:null}function Ge(e){if(13===e.tag){var t=e.memoizedState;if(null===t&&(null!==(e=e.alternate)&&(t=e.memoizedState)),null!==t)return t.dehydrated}return null}function Je(e){if(qe(e)!==e)throw Error(i(188))}function Ze(e){if(!(e=function(e){var t=e.alternate;if(!t){if(null===(t=qe(e)))throw Error(i(188));return t!==e?null:e}for(var n=e,r=t;;){var a=n.return;if(null===a)break;var o=a.alternate;if(null===o){if(null!==(r=a.return)){n=r;continue}break}if(a.child===o.child){for(o=a.child;o;){if(o===n)return Je(a),e;if(o===r)return Je(a),t;o=o.sibling}throw Error(i(188))}if(n.return!==r.return)n=a,r=o;else{for(var l=!1,u=a.child;u;){if(u===n){l=!0,n=a,r=o;break}if(u===r){l=!0,r=a,n=o;break}u=u.sibling}if(!l){for(u=o.child;u;){if(u===n){l=!0,n=o,r=a;break}if(u===r){l=!0,r=o,n=a;break}u=u.sibling}if(!l)throw Error(i(189))}}if(n.alternate!==r)throw Error(i(190))}if(3!==n.tag)throw Error(i(188));return n.stateNode.current===n?e:t}(e)))return null;for(var t=e;;){if(5===t.tag||6===t.tag)return t;if(t.child)t.child.return=t,t=t.child;else{if(t===e)break;for(;!t.sibling;){if(!t.return||t.return===e)return null;t=t.return}t.sibling.return=t.return,t=t.sibling}}return null}function et(e,t){for(var n=e.alternate;null!==t;){if(t===e||t===n)return!0;t=t.return}return!1}var tt,nt,rt,at,ot=!1,it=[],lt=null,ut=null,st=null,ct=new Map,ft=new Map,dt=[],pt="mousedown mouseup touchcancel touchend touchstart auxclick dblclick pointercancel pointerdown pointerup dragend dragstart drop compositionend compositionstart keydown keypress keyup input textInput copy cut paste click change contextmenu reset submit".split(" ");function ht(e,t,n,r,a){return{blockedOn:e,domEventName:t,eventSystemFlags:16|n,nativeEvent:a,targetContainers:[r]}}function mt(e,t){switch(e){case"focusin":case"focusout":lt=null;break;case"dragenter":case"dragleave":ut=null;break;case"mouseover":case"mouseout":st=null;break;case"pointerover":case"pointerout":ct.delete(t.pointerId);break;case"gotpointercapture":case"lostpointercapture":ft.delete(t.pointerId)}}function vt(e,t,n,r,a,o){return null===e||e.nativeEvent!==o?(e=ht(t,n,r,a,o),null!==t&&(null!==(t=ea(t))&&nt(t)),e):(e.eventSystemFlags|=r,t=e.targetContainers,null!==a&&-1===t.indexOf(a)&&t.push(a),e)}function gt(e){var t=Zr(e.target);if(null!==t){var n=qe(t);if(null!==n)if(13===(t=n.tag)){if(null!==(t=Ge(n)))return e.blockedOn=t,void at(e.lanePriority,(function(){o.unstable_runWithPriority(e.priority,(function(){rt(n)}))}))}else if(3===t&&n.stateNode.hydrate)return void(e.blockedOn=3===n.tag?n.stateNode.containerInfo:null)}e.blockedOn=null}function yt(e){if(null!==e.blockedOn)return!1;for(var t=e.targetContainers;0<t.length;){var n=Zt(e.domEventName,e.eventSystemFlags,t[0],e.nativeEvent);if(null!==n)return null!==(t=ea(n))&&nt(t),e.blockedOn=n,!1;t.shift()}return!0}function bt(e,t,n){yt(e)&&n.delete(t)}function kt(){for(ot=!1;0<it.length;){var e=it[0];if(null!==e.blockedOn){null!==(e=ea(e.blockedOn))&&tt(e);break}for(var t=e.targetContainers;0<t.length;){var n=Zt(e.domEventName,e.eventSystemFlags,t[0],e.nativeEvent);if(null!==n){e.blockedOn=n;break}t.shift()}null===e.blockedOn&&it.shift()}null!==lt&&yt(lt)&&(lt=null),null!==ut&&yt(ut)&&(ut=null),null!==st&&yt(st)&&(st=null),ct.forEach(bt),ft.forEach(bt)}function wt(e,t){e.blockedOn===t&&(e.blockedOn=null,ot||(ot=!0,o.unstable_scheduleCallback(o.unstable_NormalPriority,kt)))}function St(e){function t(t){return wt(t,e)}if(0<it.length){wt(it[0],e);for(var n=1;n<it.length;n++){var r=it[n];r.blockedOn===e&&(r.blockedOn=null)}}for(null!==lt&&wt(lt,e),null!==ut&&wt(ut,e),null!==st&&wt(st,e),ct.forEach(t),ft.forEach(t),n=0;n<dt.length;n++)(r=dt[n]).blockedOn===e&&(r.blockedOn=null);for(;0<dt.length&&null===(n=dt[0]).blockedOn;)gt(n),null===n.blockedOn&&dt.shift()}function Et(e,t){var n={};return n[e.toLowerCase()]=t.toLowerCase(),n["Webkit"+e]="webkit"+t,n["Moz"+e]="moz"+t,n}var Ct={animationend:Et("Animation","AnimationEnd"),animationiteration:Et("Animation","AnimationIteration"),animationstart:Et("Animation","AnimationStart"),transitionend:Et("Transition","TransitionEnd")},Tt={},xt={};function _t(e){if(Tt[e])return Tt[e];if(!Ct[e])return e;var t,n=Ct[e];for(t in n)if(n.hasOwnProperty(t)&&t in xt)return Tt[e]=n[t];return e}f&&(xt=document.createElement("div").style,"AnimationEvent"in window||(delete Ct.animationend.animation,delete Ct.animationiteration.animation,delete Ct.animationstart.animation),"TransitionEvent"in window||delete Ct.transitionend.transition);var Pt=_t("animationend"),Nt=_t("animationiteration"),Ot=_t("animationstart"),Dt=_t("transitionend"),It=new Map,Mt=new Map,Rt=["abort","abort",Pt,"animationEnd",Nt,"animationIteration",Ot,"animationStart","canplay","canPlay","canplaythrough","canPlayThrough","durationchange","durationChange","emptied","emptied","encrypted","encrypted","ended","ended","error","error","gotpointercapture","gotPointerCapture","load","load","loadeddata","loadedData","loadedmetadata","loadedMetadata","loadstart","loadStart","lostpointercapture","lostPointerCapture","playing","playing","progress","progress","seeking","seeking","stalled","stalled","suspend","suspend","timeupdate","timeUpdate",Dt,"transitionEnd","waiting","waiting"];function Lt(e,t){for(var n=0;n<e.length;n+=2){var r=e[n],a=e[n+1];a="on"+(a[0].toUpperCase()+a.slice(1)),Mt.set(r,t),It.set(r,a),s(a,[r])}}(0,o.unstable_now)();var zt=8;function At(e){if(0!=(1&e))return zt=15,1;if(0!=(2&e))return zt=14,2;if(0!=(4&e))return zt=13,4;var t=24&e;return 0!==t?(zt=12,t):0!=(32&e)?(zt=11,32):0!==(t=192&e)?(zt=10,t):0!=(256&e)?(zt=9,256):0!==(t=3584&e)?(zt=8,t):0!=(4096&e)?(zt=7,4096):0!==(t=4186112&e)?(zt=6,t):0!==(t=62914560&e)?(zt=5,t):67108864&e?(zt=4,67108864):0!=(134217728&e)?(zt=3,134217728):0!==(t=805306368&e)?(zt=2,t):0!=(1073741824&e)?(zt=1,1073741824):(zt=8,e)}function Ft(e,t){var n=e.pendingLanes;if(0===n)return zt=0;var r=0,a=0,o=e.expiredLanes,i=e.suspendedLanes,l=e.pingedLanes;if(0!==o)r=o,a=zt=15;else if(0!==(o=134217727&n)){var u=o&~i;0!==u?(r=At(u),a=zt):0!==(l&=o)&&(r=At(l),a=zt)}else 0!==(o=n&~i)?(r=At(o),a=zt):0!==l&&(r=At(l),a=zt);if(0===r)return 0;if(r=n&((0>(r=31-Vt(r))?0:1<<r)<<1)-1,0!==t&&t!==r&&0==(t&i)){if(At(t),a<=zt)return t;zt=a}if(0!==(t=e.entangledLanes))for(e=e.entanglements,t&=r;0<t;)a=1<<(n=31-Vt(t)),r|=e[n],t&=~a;return r}function Ut(e){return 0!==(e=-1073741825&e.pendingLanes)?e:1073741824&e?1073741824:0}function jt(e,t){switch(e){case 15:return 1;case 14:return 2;case 12:return 0===(e=Wt(24&~t))?jt(10,t):e;case 10:return 0===(e=Wt(192&~t))?jt(8,t):e;case 8:return 0===(e=Wt(3584&~t))&&(0===(e=Wt(4186112&~t))&&(e=512)),e;case 2:return 0===(t=Wt(805306368&~t))&&(t=268435456),t}throw Error(i(358,e))}function Wt(e){return e&-e}function Bt(e){for(var t=[],n=0;31>n;n++)t.push(e);return t}function Ht(e,t,n){e.pendingLanes|=t;var r=t-1;e.suspendedLanes&=r,e.pingedLanes&=r,(e=e.eventTimes)[t=31-Vt(t)]=n}var Vt=Math.clz32?Math.clz32:function(e){return 0===e?32:31-($t(e)/Qt|0)|0},$t=Math.log,Qt=Math.LN2;var Kt=o.unstable_UserBlockingPriority,Yt=o.unstable_runWithPriority,Xt=!0;function qt(e,t,n,r){Ae||Le();var a=Jt,o=Ae;Ae=!0;try{Re(a,e,t,n,r)}finally{(Ae=o)||Ue()}}function Gt(e,t,n,r){Yt(Kt,Jt.bind(null,e,t,n,r))}function Jt(e,t,n,r){var a;if(Xt)if((a=0==(4&t))&&0<it.length&&-1<pt.indexOf(e))e=ht(null,e,t,n,r),it.push(e);else{var o=Zt(e,t,n,r);if(null===o)a&&mt(e,r);else{if(a){if(-1<pt.indexOf(e))return e=ht(o,e,t,n,r),void it.push(e);if(function(e,t,n,r,a){switch(t){case"focusin":return lt=vt(lt,e,t,n,r,a),!0;case"dragenter":return ut=vt(ut,e,t,n,r,a),!0;case"mouseover":return st=vt(st,e,t,n,r,a),!0;case"pointerover":var o=a.pointerId;return ct.set(o,vt(ct.get(o)||null,e,t,n,r,a)),!0;case"gotpointercapture":return o=a.pointerId,ft.set(o,vt(ft.get(o)||null,e,t,n,r,a)),!0}return!1}(o,e,t,n,r))return;mt(e,r)}Ir(e,t,r,null,n)}}}function Zt(e,t,n,r){var a=xe(r);if(null!==(a=Zr(a))){var o=qe(a);if(null===o)a=null;else{var i=o.tag;if(13===i){if(null!==(a=Ge(o)))return a;a=null}else if(3===i){if(o.stateNode.hydrate)return 3===o.tag?o.stateNode.containerInfo:null;a=null}else o!==a&&(a=null)}}return Ir(e,t,r,a,n),null}var en=null,tn=null,nn=null;function rn(){if(nn)return nn;var e,t,n=tn,r=n.length,a="value"in en?en.value:en.textContent,o=a.length;for(e=0;e<r&&n[e]===a[e];e++);var i=r-e;for(t=1;t<=i&&n[r-t]===a[o-t];t++);return nn=a.slice(e,1<t?1-t:void 0)}function an(e){var t=e.keyCode;return"charCode"in e?0===(e=e.charCode)&&13===t&&(e=13):e=t,10===e&&(e=13),32<=e||13===e?e:0}function on(){return!0}function ln(){return!1}function un(e){function t(t,n,r,a,o){for(var i in this._reactName=t,this._targetInst=r,this.type=n,this.nativeEvent=a,this.target=o,this.currentTarget=null,e)e.hasOwnProperty(i)&&(t=e[i],this[i]=t?t(a):a[i]);return this.isDefaultPrevented=(null!=a.defaultPrevented?a.defaultPrevented:!1===a.returnValue)?on:ln,this.isPropagationStopped=ln,this}return a(t.prototype,{preventDefault:function(){this.defaultPrevented=!0;var e=this.nativeEvent;e&&(e.preventDefault?e.preventDefault():"unknown"!=typeof e.returnValue&&(e.returnValue=!1),this.isDefaultPrevented=on)},stopPropagation:function(){var e=this.nativeEvent;e&&(e.stopPropagation?e.stopPropagation():"unknown"!=typeof e.cancelBubble&&(e.cancelBubble=!0),this.isPropagationStopped=on)},persist:function(){},isPersistent:on}),t}var sn,cn,fn,dn={eventPhase:0,bubbles:0,cancelable:0,timeStamp:function(e){return e.timeStamp||Date.now()},defaultPrevented:0,isTrusted:0},pn=un(dn),hn=a({},dn,{view:0,detail:0}),mn=un(hn),vn=a({},hn,{screenX:0,screenY:0,clientX:0,clientY:0,pageX:0,pageY:0,ctrlKey:0,shiftKey:0,altKey:0,metaKey:0,getModifierState:_n,button:0,buttons:0,relatedTarget:function(e){return void 0===e.relatedTarget?e.fromElement===e.srcElement?e.toElement:e.fromElement:e.relatedTarget},movementX:function(e){return"movementX"in e?e.movementX:(e!==fn&&(fn&&"mousemove"===e.type?(sn=e.screenX-fn.screenX,cn=e.screenY-fn.screenY):cn=sn=0,fn=e),sn)},movementY:function(e){return"movementY"in e?e.movementY:cn}}),gn=un(vn),yn=un(a({},vn,{dataTransfer:0})),bn=un(a({},hn,{relatedTarget:0})),kn=un(a({},dn,{animationName:0,elapsedTime:0,pseudoElement:0})),wn=un(a({},dn,{clipboardData:function(e){return"clipboardData"in e?e.clipboardData:window.clipboardData}})),Sn=un(a({},dn,{data:0})),En={Esc:"Escape",Spacebar:" ",Left:"ArrowLeft",Up:"ArrowUp",Right:"ArrowRight",Down:"ArrowDown",Del:"Delete",Win:"OS",Menu:"ContextMenu",Apps:"ContextMenu",Scroll:"ScrollLock",MozPrintableKey:"Unidentified"},Cn={8:"Backspace",9:"Tab",12:"Clear",13:"Enter",16:"Shift",17:"Control",18:"Alt",19:"Pause",20:"CapsLock",27:"Escape",32:" ",33:"PageUp",34:"PageDown",35:"End",36:"Home",37:"ArrowLeft",38:"ArrowUp",39:"ArrowRight",40:"ArrowDown",45:"Insert",46:"Delete",112:"F1",113:"F2",114:"F3",115:"F4",116:"F5",117:"F6",118:"F7",119:"F8",120:"F9",121:"F10",122:"F11",123:"F12",144:"NumLock",145:"ScrollLock",224:"Meta"},Tn={Alt:"altKey",Control:"ctrlKey",Meta:"metaKey",Shift:"shiftKey"};function xn(e){var t=this.nativeEvent;return t.getModifierState?t.getModifierState(e):!!(e=Tn[e])&&!!t[e]}function _n(){return xn}var Pn=un(a({},hn,{key:function(e){if(e.key){var t=En[e.key]||e.key;if("Unidentified"!==t)return t}return"keypress"===e.type?13===(e=an(e))?"Enter":String.fromCharCode(e):"keydown"===e.type||"keyup"===e.type?Cn[e.keyCode]||"Unidentified":""},code:0,location:0,ctrlKey:0,shiftKey:0,altKey:0,metaKey:0,repeat:0,locale:0,getModifierState:_n,charCode:function(e){return"keypress"===e.type?an(e):0},keyCode:function(e){return"keydown"===e.type||"keyup"===e.type?e.keyCode:0},which:function(e){return"keypress"===e.type?an(e):"keydown"===e.type||"keyup"===e.type?e.keyCode:0}})),Nn=un(a({},vn,{pointerId:0,width:0,height:0,pressure:0,tangentialPressure:0,tiltX:0,tiltY:0,twist:0,pointerType:0,isPrimary:0})),On=un(a({},hn,{touches:0,targetTouches:0,changedTouches:0,altKey:0,metaKey:0,ctrlKey:0,shiftKey:0,getModifierState:_n})),Dn=un(a({},dn,{propertyName:0,elapsedTime:0,pseudoElement:0})),In=un(a({},vn,{deltaX:function(e){return"deltaX"in e?e.deltaX:"wheelDeltaX"in e?-e.wheelDeltaX:0},deltaY:function(e){return"deltaY"in e?e.deltaY:"wheelDeltaY"in e?-e.wheelDeltaY:"wheelDelta"in e?-e.wheelDelta:0},deltaZ:0,deltaMode:0})),Mn=[9,13,27,32],Rn=f&&"CompositionEvent"in window,Ln=null;f&&"documentMode"in document&&(Ln=document.documentMode);var zn=f&&"TextEvent"in window&&!Ln,An=f&&(!Rn||Ln&&8<Ln&&11>=Ln),Fn=String.fromCharCode(32),Un=!1;function jn(e,t){switch(e){case"keyup":return-1!==Mn.indexOf(t.keyCode);case"keydown":return 229!==t.keyCode;case"keypress":case"mousedown":case"focusout":return!0;default:return!1}}function Wn(e){return"object"==typeof(e=e.detail)&&"data"in e?e.data:null}var Bn=!1;var Hn={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};function Vn(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return"input"===t?!!Hn[e.type]:"textarea"===t}function $n(e,t,n,r){De(r),0<(t=Rr(t,"onChange")).length&&(n=new pn("onChange","change",null,n,r),e.push({event:n,listeners:t}))}var Qn=null,Kn=null;function Yn(e){xr(e,0)}function Xn(e){if(G(ta(e)))return e}function qn(e,t){if("change"===e)return t}var Gn=!1;if(f){var Jn;if(f){var Zn="oninput"in document;if(!Zn){var er=document.createElement("div");er.setAttribute("oninput","return;"),Zn="function"==typeof er.oninput}Jn=Zn}else Jn=!1;Gn=Jn&&(!document.documentMode||9<document.documentMode)}function tr(){Qn&&(Qn.detachEvent("onpropertychange",nr),Kn=Qn=null)}function nr(e){if("value"===e.propertyName&&Xn(Kn)){var t=[];if($n(t,Kn,e,xe(e)),e=Yn,Ae)e(t);else{Ae=!0;try{Me(e,t)}finally{Ae=!1,Ue()}}}}function rr(e,t,n){"focusin"===e?(tr(),Kn=n,(Qn=t).attachEvent("onpropertychange",nr)):"focusout"===e&&tr()}function ar(e){if("selectionchange"===e||"keyup"===e||"keydown"===e)return Xn(Kn)}function or(e,t){if("click"===e)return Xn(t)}function ir(e,t){if("input"===e||"change"===e)return Xn(t)}var lr="function"==typeof Object.is?Object.is:function(e,t){return e===t&&(0!==e||1/e==1/t)||e!=e&&t!=t},ur=Object.prototype.hasOwnProperty;function sr(e,t){if(lr(e,t))return!0;if("object"!=typeof e||null===e||"object"!=typeof t||null===t)return!1;var n=Object.keys(e),r=Object.keys(t);if(n.length!==r.length)return!1;for(r=0;r<n.length;r++)if(!ur.call(t,n[r])||!lr(e[n[r]],t[n[r]]))return!1;return!0}function cr(e){for(;e&&e.firstChild;)e=e.firstChild;return e}function fr(e,t){var n,r=cr(e);for(e=0;r;){if(3===r.nodeType){if(n=e+r.textContent.length,e<=t&&n>=t)return{node:r,offset:t-e};e=n}e:{for(;r;){if(r.nextSibling){r=r.nextSibling;break e}r=r.parentNode}r=void 0}r=cr(r)}}function dr(e,t){return!(!e||!t)&&(e===t||(!e||3!==e.nodeType)&&(t&&3===t.nodeType?dr(e,t.parentNode):"contains"in e?e.contains(t):!!e.compareDocumentPosition&&!!(16&e.compareDocumentPosition(t))))}function pr(){for(var e=window,t=J();t instanceof e.HTMLIFrameElement;){try{var n="string"==typeof t.contentWindow.location.href}catch(e){n=!1}if(!n)break;t=J((e=t.contentWindow).document)}return t}function hr(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&("input"===t&&("text"===e.type||"search"===e.type||"tel"===e.type||"url"===e.type||"password"===e.type)||"textarea"===t||"true"===e.contentEditable)}var mr=f&&"documentMode"in document&&11>=document.documentMode,vr=null,gr=null,yr=null,br=!1;function kr(e,t,n){var r=n.window===n?n.document:9===n.nodeType?n:n.ownerDocument;br||null==vr||vr!==J(r)||("selectionStart"in(r=vr)&&hr(r)?r={start:r.selectionStart,end:r.selectionEnd}:r={anchorNode:(r=(r.ownerDocument&&r.ownerDocument.defaultView||window).getSelection()).anchorNode,anchorOffset:r.anchorOffset,focusNode:r.focusNode,focusOffset:r.focusOffset},yr&&sr(yr,r)||(yr=r,0<(r=Rr(gr,"onSelect")).length&&(t=new pn("onSelect","select",null,t,n),e.push({event:t,listeners:r}),t.target=vr)))}Lt("cancel cancel click click close close contextmenu contextMenu copy copy cut cut auxclick auxClick dblclick doubleClick dragend dragEnd dragstart dragStart drop drop focusin focus focusout blur input input invalid invalid keydown keyDown keypress keyPress keyup keyUp mousedown mouseDown mouseup mouseUp paste paste pause pause play play pointercancel pointerCancel pointerdown pointerDown pointerup pointerUp ratechange rateChange reset reset seeked seeked submit submit touchcancel touchCancel touchend touchEnd touchstart touchStart volumechange volumeChange".split(" "),0),Lt("drag drag dragenter dragEnter dragexit dragExit dragleave dragLeave dragover dragOver mousemove mouseMove mouseout mouseOut mouseover mouseOver pointermove pointerMove pointerout pointerOut pointerover pointerOver scroll scroll toggle toggle touchmove touchMove wheel wheel".split(" "),1),Lt(Rt,2);for(var wr="change selectionchange textInput compositionstart compositionend compositionupdate".split(" "),Sr=0;Sr<wr.length;Sr++)Mt.set(wr[Sr],0);c("onMouseEnter",["mouseout","mouseover"]),c("onMouseLeave",["mouseout","mouseover"]),c("onPointerEnter",["pointerout","pointerover"]),c("onPointerLeave",["pointerout","pointerover"]),s("onChange","change click focusin focusout input keydown keyup selectionchange".split(" ")),s("onSelect","focusout contextmenu dragend focusin keydown keyup mousedown mouseup selectionchange".split(" ")),s("onBeforeInput",["compositionend","keypress","textInput","paste"]),s("onCompositionEnd","compositionend focusout keydown keypress keyup mousedown".split(" ")),s("onCompositionStart","compositionstart focusout keydown keypress keyup mousedown".split(" ")),s("onCompositionUpdate","compositionupdate focusout keydown keypress keyup mousedown".split(" "));var Er="abort canplay canplaythrough durationchange emptied encrypted ended error loadeddata loadedmetadata loadstart pause play playing progress ratechange seeked seeking stalled suspend timeupdate volumechange waiting".split(" "),Cr=new Set("cancel close invalid load scroll toggle".split(" ").concat(Er));function Tr(e,t,n){var r=e.type||"unknown-event";e.currentTarget=n,function(e,t,n,r,a,o,l,u,s){if(Xe.apply(this,arguments),Ve){if(!Ve)throw Error(i(198));var c=$e;Ve=!1,$e=null,Qe||(Qe=!0,Ke=c)}}(r,t,void 0,e),e.currentTarget=null}function xr(e,t){t=0!=(4&t);for(var n=0;n<e.length;n++){var r=e[n],a=r.event;r=r.listeners;e:{var o=void 0;if(t)for(var i=r.length-1;0<=i;i--){var l=r[i],u=l.instance,s=l.currentTarget;if(l=l.listener,u!==o&&a.isPropagationStopped())break e;Tr(a,l,s),o=u}else for(i=0;i<r.length;i++){if(u=(l=r[i]).instance,s=l.currentTarget,l=l.listener,u!==o&&a.isPropagationStopped())break e;Tr(a,l,s),o=u}}}if(Qe)throw e=Ke,Qe=!1,Ke=null,e}function _r(e,t){var n=ra(t),r=e+"__bubble";n.has(r)||(Dr(t,e,2,!1),n.add(r))}var Pr="_reactListening"+Math.random().toString(36).slice(2);function Nr(e){e[Pr]||(e[Pr]=!0,l.forEach((function(t){Cr.has(t)||Or(t,!1,e,null),Or(t,!0,e,null)})))}function Or(e,t,n,r){var a=4<arguments.length&&void 0!==arguments[4]?arguments[4]:0,o=n;if("selectionchange"===e&&9!==n.nodeType&&(o=n.ownerDocument),null!==r&&!t&&Cr.has(e)){if("scroll"!==e)return;a|=2,o=r}var i=ra(o),l=e+"__"+(t?"capture":"bubble");i.has(l)||(t&&(a|=4),Dr(o,e,a,t),i.add(l))}function Dr(e,t,n,r){var a=Mt.get(t);switch(void 0===a?2:a){case 0:a=qt;break;case 1:a=Gt;break;default:a=Jt}n=a.bind(null,t,n,e),a=void 0,!We||"touchstart"!==t&&"touchmove"!==t&&"wheel"!==t||(a=!0),r?void 0!==a?e.addEventListener(t,n,{capture:!0,passive:a}):e.addEventListener(t,n,!0):void 0!==a?e.addEventListener(t,n,{passive:a}):e.addEventListener(t,n,!1)}function Ir(e,t,n,r,a){var o=r;if(0==(1&t)&&0==(2&t)&&null!==r)e:for(;;){if(null===r)return;var i=r.tag;if(3===i||4===i){var l=r.stateNode.containerInfo;if(l===a||8===l.nodeType&&l.parentNode===a)break;if(4===i)for(i=r.return;null!==i;){var u=i.tag;if((3===u||4===u)&&((u=i.stateNode.containerInfo)===a||8===u.nodeType&&u.parentNode===a))return;i=i.return}for(;null!==l;){if(null===(i=Zr(l)))return;if(5===(u=i.tag)||6===u){r=o=i;continue e}l=l.parentNode}}r=r.return}!function(e,t,n){if(Fe)return e(t,n);Fe=!0;try{ze(e,t,n)}finally{Fe=!1,Ue()}}((function(){var r=o,a=xe(n),i=[];e:{var l=It.get(e);if(void 0!==l){var u=pn,s=e;switch(e){case"keypress":if(0===an(n))break e;case"keydown":case"keyup":u=Pn;break;case"focusin":s="focus",u=bn;break;case"focusout":s="blur",u=bn;break;case"beforeblur":case"afterblur":u=bn;break;case"click":if(2===n.button)break e;case"auxclick":case"dblclick":case"mousedown":case"mousemove":case"mouseup":case"mouseout":case"mouseover":case"contextmenu":u=gn;break;case"drag":case"dragend":case"dragenter":case"dragexit":case"dragleave":case"dragover":case"dragstart":case"drop":u=yn;break;case"touchcancel":case"touchend":case"touchmove":case"touchstart":u=On;break;case Pt:case Nt:case Ot:u=kn;break;case Dt:u=Dn;break;case"scroll":u=mn;break;case"wheel":u=In;break;case"copy":case"cut":case"paste":u=wn;break;case"gotpointercapture":case"lostpointercapture":case"pointercancel":case"pointerdown":case"pointermove":case"pointerout":case"pointerover":case"pointerup":u=Nn}var c=0!=(4&t),f=!c&&"scroll"===e,d=c?null!==l?l+"Capture":null:l;c=[];for(var p,h=r;null!==h;){var m=(p=h).stateNode;if(5===p.tag&&null!==m&&(p=m,null!==d&&(null!=(m=je(h,d))&&c.push(Mr(h,m,p)))),f)break;h=h.return}0<c.length&&(l=new u(l,s,null,n,a),i.push({event:l,listeners:c}))}}if(0==(7&t)){if(u="mouseout"===e||"pointerout"===e,(!(l="mouseover"===e||"pointerover"===e)||0!=(16&t)||!(s=n.relatedTarget||n.fromElement)||!Zr(s)&&!s[Gr])&&(u||l)&&(l=a.window===a?a:(l=a.ownerDocument)?l.defaultView||l.parentWindow:window,u?(u=r,null!==(s=(s=n.relatedTarget||n.toElement)?Zr(s):null)&&(s!==(f=qe(s))||5!==s.tag&&6!==s.tag)&&(s=null)):(u=null,s=r),u!==s)){if(c=gn,m="onMouseLeave",d="onMouseEnter",h="mouse","pointerout"!==e&&"pointerover"!==e||(c=Nn,m="onPointerLeave",d="onPointerEnter",h="pointer"),f=null==u?l:ta(u),p=null==s?l:ta(s),(l=new c(m,h+"leave",u,n,a)).target=f,l.relatedTarget=p,m=null,Zr(a)===r&&((c=new c(d,h+"enter",s,n,a)).target=p,c.relatedTarget=f,m=c),f=m,u&&s)e:{for(d=s,h=0,p=c=u;p;p=Lr(p))h++;for(p=0,m=d;m;m=Lr(m))p++;for(;0<h-p;)c=Lr(c),h--;for(;0<p-h;)d=Lr(d),p--;for(;h--;){if(c===d||null!==d&&c===d.alternate)break e;c=Lr(c),d=Lr(d)}c=null}else c=null;null!==u&&zr(i,l,u,c,!1),null!==s&&null!==f&&zr(i,f,s,c,!0)}if("select"===(u=(l=r?ta(r):window).nodeName&&l.nodeName.toLowerCase())||"input"===u&&"file"===l.type)var v=qn;else if(Vn(l))if(Gn)v=ir;else{v=ar;var g=rr}else(u=l.nodeName)&&"input"===u.toLowerCase()&&("checkbox"===l.type||"radio"===l.type)&&(v=or);switch(v&&(v=v(e,r))?$n(i,v,n,a):(g&&g(e,l,r),"focusout"===e&&(g=l._wrapperState)&&g.controlled&&"number"===l.type&&ae(l,"number",l.value)),g=r?ta(r):window,e){case"focusin":(Vn(g)||"true"===g.contentEditable)&&(vr=g,gr=r,yr=null);break;case"focusout":yr=gr=vr=null;break;case"mousedown":br=!0;break;case"contextmenu":case"mouseup":case"dragend":br=!1,kr(i,n,a);break;case"selectionchange":if(mr)break;case"keydown":case"keyup":kr(i,n,a)}var y;if(Rn)e:{switch(e){case"compositionstart":var b="onCompositionStart";break e;case"compositionend":b="onCompositionEnd";break e;case"compositionupdate":b="onCompositionUpdate";break e}b=void 0}else Bn?jn(e,n)&&(b="onCompositionEnd"):"keydown"===e&&229===n.keyCode&&(b="onCompositionStart");b&&(An&&"ko"!==n.locale&&(Bn||"onCompositionStart"!==b?"onCompositionEnd"===b&&Bn&&(y=rn()):(tn="value"in(en=a)?en.value:en.textContent,Bn=!0)),0<(g=Rr(r,b)).length&&(b=new Sn(b,e,null,n,a),i.push({event:b,listeners:g}),y?b.data=y:null!==(y=Wn(n))&&(b.data=y))),(y=zn?function(e,t){switch(e){case"compositionend":return Wn(t);case"keypress":return 32!==t.which?null:(Un=!0,Fn);case"textInput":return(e=t.data)===Fn&&Un?null:e;default:return null}}(e,n):function(e,t){if(Bn)return"compositionend"===e||!Rn&&jn(e,t)?(e=rn(),nn=tn=en=null,Bn=!1,e):null;switch(e){case"paste":return null;case"keypress":if(!(t.ctrlKey||t.altKey||t.metaKey)||t.ctrlKey&&t.altKey){if(t.char&&1<t.char.length)return t.char;if(t.which)return String.fromCharCode(t.which)}return null;case"compositionend":return An&&"ko"!==t.locale?null:t.data;default:return null}}(e,n))&&(0<(r=Rr(r,"onBeforeInput")).length&&(a=new Sn("onBeforeInput","beforeinput",null,n,a),i.push({event:a,listeners:r}),a.data=y))}xr(i,t)}))}function Mr(e,t,n){return{instance:e,listener:t,currentTarget:n}}function Rr(e,t){for(var n=t+"Capture",r=[];null!==e;){var a=e,o=a.stateNode;5===a.tag&&null!==o&&(a=o,null!=(o=je(e,n))&&r.unshift(Mr(e,o,a)),null!=(o=je(e,t))&&r.push(Mr(e,o,a))),e=e.return}return r}function Lr(e){if(null===e)return null;do{e=e.return}while(e&&5!==e.tag);return e||null}function zr(e,t,n,r,a){for(var o=t._reactName,i=[];null!==n&&n!==r;){var l=n,u=l.alternate,s=l.stateNode;if(null!==u&&u===r)break;5===l.tag&&null!==s&&(l=s,a?null!=(u=je(n,o))&&i.unshift(Mr(n,u,l)):a||null!=(u=je(n,o))&&i.push(Mr(n,u,l))),n=n.return}0!==i.length&&e.push({event:t,listeners:i})}function Ar(){}var Fr=null,Ur=null;function jr(e,t){switch(e){case"button":case"input":case"select":case"textarea":return!!t.autoFocus}return!1}function Wr(e,t){return"textarea"===e||"option"===e||"noscript"===e||"string"==typeof t.children||"number"==typeof t.children||"object"==typeof t.dangerouslySetInnerHTML&&null!==t.dangerouslySetInnerHTML&&null!=t.dangerouslySetInnerHTML.__html}var Br="function"==typeof setTimeout?setTimeout:void 0,Hr="function"==typeof clearTimeout?clearTimeout:void 0;function Vr(e){1===e.nodeType?e.textContent="":9===e.nodeType&&(null!=(e=e.body)&&(e.textContent=""))}function $r(e){for(;null!=e;e=e.nextSibling){var t=e.nodeType;if(1===t||3===t)break}return e}function Qr(e){e=e.previousSibling;for(var t=0;e;){if(8===e.nodeType){var n=e.data;if("$"===n||"$!"===n||"$?"===n){if(0===t)return e;t--}else"/$"===n&&t++}e=e.previousSibling}return null}var Kr=0;var Yr=Math.random().toString(36).slice(2),Xr="__reactFiber$"+Yr,qr="__reactProps$"+Yr,Gr="__reactContainer$"+Yr,Jr="__reactEvents$"+Yr;function Zr(e){var t=e[Xr];if(t)return t;for(var n=e.parentNode;n;){if(t=n[Gr]||n[Xr]){if(n=t.alternate,null!==t.child||null!==n&&null!==n.child)for(e=Qr(e);null!==e;){if(n=e[Xr])return n;e=Qr(e)}return t}n=(e=n).parentNode}return null}function ea(e){return!(e=e[Xr]||e[Gr])||5!==e.tag&&6!==e.tag&&13!==e.tag&&3!==e.tag?null:e}function ta(e){if(5===e.tag||6===e.tag)return e.stateNode;throw Error(i(33))}function na(e){return e[qr]||null}function ra(e){var t=e[Jr];return void 0===t&&(t=e[Jr]=new Set),t}var aa=[],oa=-1;function ia(e){return{current:e}}function la(e){0>oa||(e.current=aa[oa],aa[oa]=null,oa--)}function ua(e,t){oa++,aa[oa]=e.current,e.current=t}var sa={},ca=ia(sa),fa=ia(!1),da=sa;function pa(e,t){var n=e.type.contextTypes;if(!n)return sa;var r=e.stateNode;if(r&&r.__reactInternalMemoizedUnmaskedChildContext===t)return r.__reactInternalMemoizedMaskedChildContext;var a,o={};for(a in n)o[a]=t[a];return r&&((e=e.stateNode).__reactInternalMemoizedUnmaskedChildContext=t,e.__reactInternalMemoizedMaskedChildContext=o),o}function ha(e){return null!=(e=e.childContextTypes)}function ma(){la(fa),la(ca)}function va(e,t,n){if(ca.current!==sa)throw Error(i(168));ua(ca,t),ua(fa,n)}function ga(e,t,n){var r=e.stateNode;if(e=t.childContextTypes,"function"!=typeof r.getChildContext)return n;for(var o in r=r.getChildContext())if(!(o in e))throw Error(i(108,K(t)||"Unknown",o));return a({},n,r)}function ya(e){return e=(e=e.stateNode)&&e.__reactInternalMemoizedMergedChildContext||sa,da=ca.current,ua(ca,e),ua(fa,fa.current),!0}function ba(e,t,n){var r=e.stateNode;if(!r)throw Error(i(169));n?(e=ga(e,t,da),r.__reactInternalMemoizedMergedChildContext=e,la(fa),la(ca),ua(ca,e)):la(fa),ua(fa,n)}var ka=null,wa=null,Sa=o.unstable_runWithPriority,Ea=o.unstable_scheduleCallback,Ca=o.unstable_cancelCallback,Ta=o.unstable_shouldYield,xa=o.unstable_requestPaint,_a=o.unstable_now,Pa=o.unstable_getCurrentPriorityLevel,Na=o.unstable_ImmediatePriority,Oa=o.unstable_UserBlockingPriority,Da=o.unstable_NormalPriority,Ia=o.unstable_LowPriority,Ma=o.unstable_IdlePriority,Ra={},La=void 0!==xa?xa:function(){},za=null,Aa=null,Fa=!1,Ua=_a(),ja=1e4>Ua?_a:function(){return _a()-Ua};function Wa(){switch(Pa()){case Na:return 99;case Oa:return 98;case Da:return 97;case Ia:return 96;case Ma:return 95;default:throw Error(i(332))}}function Ba(e){switch(e){case 99:return Na;case 98:return Oa;case 97:return Da;case 96:return Ia;case 95:return Ma;default:throw Error(i(332))}}function Ha(e,t){return e=Ba(e),Sa(e,t)}function Va(e,t,n){return e=Ba(e),Ea(e,t,n)}function $a(){if(null!==Aa){var e=Aa;Aa=null,Ca(e)}Qa()}function Qa(){if(!Fa&&null!==za){Fa=!0;var e=0;try{var t=za;Ha(99,(function(){for(;e<t.length;e++){var n=t[e];do{n=n(!0)}while(null!==n)}})),za=null}catch(t){throw null!==za&&(za=za.slice(e+1)),Ea(Na,$a),t}finally{Fa=!1}}}var Ka=w.ReactCurrentBatchConfig;function Ya(e,t){if(e&&e.defaultProps){for(var n in t=a({},t),e=e.defaultProps)void 0===t[n]&&(t[n]=e[n]);return t}return t}var Xa=ia(null),qa=null,Ga=null,Ja=null;function Za(){Ja=Ga=qa=null}function eo(e){var t=Xa.current;la(Xa),e.type._context._currentValue=t}function to(e,t){for(;null!==e;){var n=e.alternate;if((e.childLanes&t)===t){if(null===n||(n.childLanes&t)===t)break;n.childLanes|=t}else e.childLanes|=t,null!==n&&(n.childLanes|=t);e=e.return}}function no(e,t){qa=e,Ja=Ga=null,null!==(e=e.dependencies)&&null!==e.firstContext&&(0!=(e.lanes&t)&&(Ri=!0),e.firstContext=null)}function ro(e,t){if(Ja!==e&&!1!==t&&0!==t)if("number"==typeof t&&1073741823!==t||(Ja=e,t=1073741823),t={context:e,observedBits:t,next:null},null===Ga){if(null===qa)throw Error(i(308));Ga=t,qa.dependencies={lanes:0,firstContext:t,responders:null}}else Ga=Ga.next=t;return e._currentValue}var ao=!1;function oo(e){e.updateQueue={baseState:e.memoizedState,firstBaseUpdate:null,lastBaseUpdate:null,shared:{pending:null},effects:null}}function io(e,t){e=e.updateQueue,t.updateQueue===e&&(t.updateQueue={baseState:e.baseState,firstBaseUpdate:e.firstBaseUpdate,lastBaseUpdate:e.lastBaseUpdate,shared:e.shared,effects:e.effects})}function lo(e,t){return{eventTime:e,lane:t,tag:0,payload:null,callback:null,next:null}}function uo(e,t){if(null!==(e=e.updateQueue)){var n=(e=e.shared).pending;null===n?t.next=t:(t.next=n.next,n.next=t),e.pending=t}}function so(e,t){var n=e.updateQueue,r=e.alternate;if(null!==r&&n===(r=r.updateQueue)){var a=null,o=null;if(null!==(n=n.firstBaseUpdate)){do{var i={eventTime:n.eventTime,lane:n.lane,tag:n.tag,payload:n.payload,callback:n.callback,next:null};null===o?a=o=i:o=o.next=i,n=n.next}while(null!==n);null===o?a=o=t:o=o.next=t}else a=o=t;return n={baseState:r.baseState,firstBaseUpdate:a,lastBaseUpdate:o,shared:r.shared,effects:r.effects},void(e.updateQueue=n)}null===(e=n.lastBaseUpdate)?n.firstBaseUpdate=t:e.next=t,n.lastBaseUpdate=t}function co(e,t,n,r){var o=e.updateQueue;ao=!1;var i=o.firstBaseUpdate,l=o.lastBaseUpdate,u=o.shared.pending;if(null!==u){o.shared.pending=null;var s=u,c=s.next;s.next=null,null===l?i=c:l.next=c,l=s;var f=e.alternate;if(null!==f){var d=(f=f.updateQueue).lastBaseUpdate;d!==l&&(null===d?f.firstBaseUpdate=c:d.next=c,f.lastBaseUpdate=s)}}if(null!==i){for(d=o.baseState,l=0,f=c=s=null;;){u=i.lane;var p=i.eventTime;if((r&u)===u){null!==f&&(f=f.next={eventTime:p,lane:0,tag:i.tag,payload:i.payload,callback:i.callback,next:null});e:{var h=e,m=i;switch(u=t,p=n,m.tag){case 1:if("function"==typeof(h=m.payload)){d=h.call(p,d,u);break e}d=h;break e;case 3:h.flags=-4097&h.flags|64;case 0:if(null==(u="function"==typeof(h=m.payload)?h.call(p,d,u):h))break e;d=a({},d,u);break e;case 2:ao=!0}}null!==i.callback&&(e.flags|=32,null===(u=o.effects)?o.effects=[i]:u.push(i))}else p={eventTime:p,lane:u,tag:i.tag,payload:i.payload,callback:i.callback,next:null},null===f?(c=f=p,s=d):f=f.next=p,l|=u;if(null===(i=i.next)){if(null===(u=o.shared.pending))break;i=u.next,u.next=null,o.lastBaseUpdate=u,o.shared.pending=null}}null===f&&(s=d),o.baseState=s,o.firstBaseUpdate=c,o.lastBaseUpdate=f,Fl|=l,e.lanes=l,e.memoizedState=d}}function fo(e,t,n){if(e=t.effects,t.effects=null,null!==e)for(t=0;t<e.length;t++){var r=e[t],a=r.callback;if(null!==a){if(r.callback=null,r=n,"function"!=typeof a)throw Error(i(191,a));a.call(r)}}}var po=(new r.Component).refs;function ho(e,t,n,r){n=null==(n=n(r,t=e.memoizedState))?t:a({},t,n),e.memoizedState=n,0===e.lanes&&(e.updateQueue.baseState=n)}var mo={isMounted:function(e){return!!(e=e._reactInternals)&&qe(e)===e},enqueueSetState:function(e,t,n){e=e._reactInternals;var r=su(),a=cu(e),o=lo(r,a);o.payload=t,null!=n&&(o.callback=n),uo(e,o),fu(e,a,r)},enqueueReplaceState:function(e,t,n){e=e._reactInternals;var r=su(),a=cu(e),o=lo(r,a);o.tag=1,o.payload=t,null!=n&&(o.callback=n),uo(e,o),fu(e,a,r)},enqueueForceUpdate:function(e,t){e=e._reactInternals;var n=su(),r=cu(e),a=lo(n,r);a.tag=2,null!=t&&(a.callback=t),uo(e,a),fu(e,r,n)}};function vo(e,t,n,r,a,o,i){return"function"==typeof(e=e.stateNode).shouldComponentUpdate?e.shouldComponentUpdate(r,o,i):!t.prototype||!t.prototype.isPureReactComponent||(!sr(n,r)||!sr(a,o))}function go(e,t,n){var r=!1,a=sa,o=t.contextType;return"object"==typeof o&&null!==o?o=ro(o):(a=ha(t)?da:ca.current,o=(r=null!=(r=t.contextTypes))?pa(e,a):sa),t=new t(n,o),e.memoizedState=null!==t.state&&void 0!==t.state?t.state:null,t.updater=mo,e.stateNode=t,t._reactInternals=e,r&&((e=e.stateNode).__reactInternalMemoizedUnmaskedChildContext=a,e.__reactInternalMemoizedMaskedChildContext=o),t}function yo(e,t,n,r){e=t.state,"function"==typeof t.componentWillReceiveProps&&t.componentWillReceiveProps(n,r),"function"==typeof t.UNSAFE_componentWillReceiveProps&&t.UNSAFE_componentWillReceiveProps(n,r),t.state!==e&&mo.enqueueReplaceState(t,t.state,null)}function bo(e,t,n,r){var a=e.stateNode;a.props=n,a.state=e.memoizedState,a.refs=po,oo(e);var o=t.contextType;"object"==typeof o&&null!==o?a.context=ro(o):(o=ha(t)?da:ca.current,a.context=pa(e,o)),co(e,n,a,r),a.state=e.memoizedState,"function"==typeof(o=t.getDerivedStateFromProps)&&(ho(e,t,o,n),a.state=e.memoizedState),"function"==typeof t.getDerivedStateFromProps||"function"==typeof a.getSnapshotBeforeUpdate||"function"!=typeof a.UNSAFE_componentWillMount&&"function"!=typeof a.componentWillMount||(t=a.state,"function"==typeof a.componentWillMount&&a.componentWillMount(),"function"==typeof a.UNSAFE_componentWillMount&&a.UNSAFE_componentWillMount(),t!==a.state&&mo.enqueueReplaceState(a,a.state,null),co(e,n,a,r),a.state=e.memoizedState),"function"==typeof a.componentDidMount&&(e.flags|=4)}var ko=Array.isArray;function wo(e,t,n){if(null!==(e=n.ref)&&"function"!=typeof e&&"object"!=typeof e){if(n._owner){if(n=n._owner){if(1!==n.tag)throw Error(i(309));var r=n.stateNode}if(!r)throw Error(i(147,e));var a=""+e;return null!==t&&null!==t.ref&&"function"==typeof t.ref&&t.ref._stringRef===a?t.ref:((t=function(e){var t=r.refs;t===po&&(t=r.refs={}),null===e?delete t[a]:t[a]=e})._stringRef=a,t)}if("string"!=typeof e)throw Error(i(284));if(!n._owner)throw Error(i(290,e))}return e}function So(e,t){if("textarea"!==e.type)throw Error(i(31,"[object Object]"===Object.prototype.toString.call(t)?"object with keys {"+Object.keys(t).join(", ")+"}":t))}function Eo(e){function t(t,n){if(e){var r=t.lastEffect;null!==r?(r.nextEffect=n,t.lastEffect=n):t.firstEffect=t.lastEffect=n,n.nextEffect=null,n.flags=8}}function n(n,r){if(!e)return null;for(;null!==r;)t(n,r),r=r.sibling;return null}function r(e,t){for(e=new Map;null!==t;)null!==t.key?e.set(t.key,t):e.set(t.index,t),t=t.sibling;return e}function a(e,t){return(e=Hu(e,t)).index=0,e.sibling=null,e}function o(t,n,r){return t.index=r,e?null!==(r=t.alternate)?(r=r.index)<n?(t.flags=2,n):r:(t.flags=2,n):n}function l(t){return e&&null===t.alternate&&(t.flags=2),t}function u(e,t,n,r){return null===t||6!==t.tag?((t=Ku(n,e.mode,r)).return=e,t):((t=a(t,n)).return=e,t)}function s(e,t,n,r){return null!==t&&t.elementType===n.type?((r=a(t,n.props)).ref=wo(e,t,n),r.return=e,r):((r=Vu(n.type,n.key,n.props,null,e.mode,r)).ref=wo(e,t,n),r.return=e,r)}function c(e,t,n,r){return null===t||4!==t.tag||t.stateNode.containerInfo!==n.containerInfo||t.stateNode.implementation!==n.implementation?((t=Yu(n,e.mode,r)).return=e,t):((t=a(t,n.children||[])).return=e,t)}function f(e,t,n,r,o){return null===t||7!==t.tag?((t=$u(n,e.mode,r,o)).return=e,t):((t=a(t,n)).return=e,t)}function d(e,t,n){if("string"==typeof t||"number"==typeof t)return(t=Ku(""+t,e.mode,n)).return=e,t;if("object"==typeof t&&null!==t){switch(t.$$typeof){case S:return(n=Vu(t.type,t.key,t.props,null,e.mode,n)).ref=wo(e,null,t),n.return=e,n;case E:return(t=Yu(t,e.mode,n)).return=e,t}if(ko(t)||B(t))return(t=$u(t,e.mode,n,null)).return=e,t;So(e,t)}return null}function p(e,t,n,r){var a=null!==t?t.key:null;if("string"==typeof n||"number"==typeof n)return null!==a?null:u(e,t,""+n,r);if("object"==typeof n&&null!==n){switch(n.$$typeof){case S:return n.key===a?n.type===C?f(e,t,n.props.children,r,a):s(e,t,n,r):null;case E:return n.key===a?c(e,t,n,r):null}if(ko(n)||B(n))return null!==a?null:f(e,t,n,r,null);So(e,n)}return null}function h(e,t,n,r,a){if("string"==typeof r||"number"==typeof r)return u(t,e=e.get(n)||null,""+r,a);if("object"==typeof r&&null!==r){switch(r.$$typeof){case S:return e=e.get(null===r.key?n:r.key)||null,r.type===C?f(t,e,r.props.children,a,r.key):s(t,e,r,a);case E:return c(t,e=e.get(null===r.key?n:r.key)||null,r,a)}if(ko(r)||B(r))return f(t,e=e.get(n)||null,r,a,null);So(t,r)}return null}function m(a,i,l,u){for(var s=null,c=null,f=i,m=i=0,v=null;null!==f&&m<l.length;m++){f.index>m?(v=f,f=null):v=f.sibling;var g=p(a,f,l[m],u);if(null===g){null===f&&(f=v);break}e&&f&&null===g.alternate&&t(a,f),i=o(g,i,m),null===c?s=g:c.sibling=g,c=g,f=v}if(m===l.length)return n(a,f),s;if(null===f){for(;m<l.length;m++)null!==(f=d(a,l[m],u))&&(i=o(f,i,m),null===c?s=f:c.sibling=f,c=f);return s}for(f=r(a,f);m<l.length;m++)null!==(v=h(f,a,m,l[m],u))&&(e&&null!==v.alternate&&f.delete(null===v.key?m:v.key),i=o(v,i,m),null===c?s=v:c.sibling=v,c=v);return e&&f.forEach((function(e){return t(a,e)})),s}function v(a,l,u,s){var c=B(u);if("function"!=typeof c)throw Error(i(150));if(null==(u=c.call(u)))throw Error(i(151));for(var f=c=null,m=l,v=l=0,g=null,y=u.next();null!==m&&!y.done;v++,y=u.next()){m.index>v?(g=m,m=null):g=m.sibling;var b=p(a,m,y.value,s);if(null===b){null===m&&(m=g);break}e&&m&&null===b.alternate&&t(a,m),l=o(b,l,v),null===f?c=b:f.sibling=b,f=b,m=g}if(y.done)return n(a,m),c;if(null===m){for(;!y.done;v++,y=u.next())null!==(y=d(a,y.value,s))&&(l=o(y,l,v),null===f?c=y:f.sibling=y,f=y);return c}for(m=r(a,m);!y.done;v++,y=u.next())null!==(y=h(m,a,v,y.value,s))&&(e&&null!==y.alternate&&m.delete(null===y.key?v:y.key),l=o(y,l,v),null===f?c=y:f.sibling=y,f=y);return e&&m.forEach((function(e){return t(a,e)})),c}return function(e,r,o,u){var s="object"==typeof o&&null!==o&&o.type===C&&null===o.key;s&&(o=o.props.children);var c="object"==typeof o&&null!==o;if(c)switch(o.$$typeof){case S:e:{for(c=o.key,s=r;null!==s;){if(s.key===c){switch(s.tag){case 7:if(o.type===C){n(e,s.sibling),(r=a(s,o.props.children)).return=e,e=r;break e}break;default:if(s.elementType===o.type){n(e,s.sibling),(r=a(s,o.props)).ref=wo(e,s,o),r.return=e,e=r;break e}}n(e,s);break}t(e,s),s=s.sibling}o.type===C?((r=$u(o.props.children,e.mode,u,o.key)).return=e,e=r):((u=Vu(o.type,o.key,o.props,null,e.mode,u)).ref=wo(e,r,o),u.return=e,e=u)}return l(e);case E:e:{for(s=o.key;null!==r;){if(r.key===s){if(4===r.tag&&r.stateNode.containerInfo===o.containerInfo&&r.stateNode.implementation===o.implementation){n(e,r.sibling),(r=a(r,o.children||[])).return=e,e=r;break e}n(e,r);break}t(e,r),r=r.sibling}(r=Yu(o,e.mode,u)).return=e,e=r}return l(e)}if("string"==typeof o||"number"==typeof o)return o=""+o,null!==r&&6===r.tag?(n(e,r.sibling),(r=a(r,o)).return=e,e=r):(n(e,r),(r=Ku(o,e.mode,u)).return=e,e=r),l(e);if(ko(o))return m(e,r,o,u);if(B(o))return v(e,r,o,u);if(c&&So(e,o),void 0===o&&!s)switch(e.tag){case 1:case 22:case 0:case 11:case 15:throw Error(i(152,K(e.type)||"Component"))}return n(e,r)}}var Co=Eo(!0),To=Eo(!1),xo={},_o=ia(xo),Po=ia(xo),No=ia(xo);function Oo(e){if(e===xo)throw Error(i(174));return e}function Do(e,t){switch(ua(No,t),ua(Po,e),ua(_o,xo),e=t.nodeType){case 9:case 11:t=(t=t.documentElement)?t.namespaceURI:he(null,"");break;default:t=he(t=(e=8===e?t.parentNode:t).namespaceURI||null,e=e.tagName)}la(_o),ua(_o,t)}function Io(){la(_o),la(Po),la(No)}function Mo(e){Oo(No.current);var t=Oo(_o.current),n=he(t,e.type);t!==n&&(ua(Po,e),ua(_o,n))}function Ro(e){Po.current===e&&(la(_o),la(Po))}var Lo=ia(0);function zo(e){for(var t=e;null!==t;){if(13===t.tag){var n=t.memoizedState;if(null!==n&&(null===(n=n.dehydrated)||"$?"===n.data||"$!"===n.data))return t}else if(19===t.tag&&void 0!==t.memoizedProps.revealOrder){if(0!=(64&t.flags))return t}else if(null!==t.child){t.child.return=t,t=t.child;continue}if(t===e)break;for(;null===t.sibling;){if(null===t.return||t.return===e)return null;t=t.return}t.sibling.return=t.return,t=t.sibling}return null}var Ao=null,Fo=null,Uo=!1;function jo(e,t){var n=Wu(5,null,null,0);n.elementType="DELETED",n.type="DELETED",n.stateNode=t,n.return=e,n.flags=8,null!==e.lastEffect?(e.lastEffect.nextEffect=n,e.lastEffect=n):e.firstEffect=e.lastEffect=n}function Wo(e,t){switch(e.tag){case 5:var n=e.type;return null!==(t=1!==t.nodeType||n.toLowerCase()!==t.nodeName.toLowerCase()?null:t)&&(e.stateNode=t,!0);case 6:return null!==(t=""===e.pendingProps||3!==t.nodeType?null:t)&&(e.stateNode=t,!0);case 13:default:return!1}}function Bo(e){if(Uo){var t=Fo;if(t){var n=t;if(!Wo(e,t)){if(!(t=$r(n.nextSibling))||!Wo(e,t))return e.flags=-1025&e.flags|2,Uo=!1,void(Ao=e);jo(Ao,n)}Ao=e,Fo=$r(t.firstChild)}else e.flags=-1025&e.flags|2,Uo=!1,Ao=e}}function Ho(e){for(e=e.return;null!==e&&5!==e.tag&&3!==e.tag&&13!==e.tag;)e=e.return;Ao=e}function Vo(e){if(e!==Ao)return!1;if(!Uo)return Ho(e),Uo=!0,!1;var t=e.type;if(5!==e.tag||"head"!==t&&"body"!==t&&!Wr(t,e.memoizedProps))for(t=Fo;t;)jo(e,t),t=$r(t.nextSibling);if(Ho(e),13===e.tag){if(!(e=null!==(e=e.memoizedState)?e.dehydrated:null))throw Error(i(317));e:{for(e=e.nextSibling,t=0;e;){if(8===e.nodeType){var n=e.data;if("/$"===n){if(0===t){Fo=$r(e.nextSibling);break e}t--}else"$"!==n&&"$!"!==n&&"$?"!==n||t++}e=e.nextSibling}Fo=null}}else Fo=Ao?$r(e.stateNode.nextSibling):null;return!0}function $o(){Fo=Ao=null,Uo=!1}var Qo=[];function Ko(){for(var e=0;e<Qo.length;e++)Qo[e]._workInProgressVersionPrimary=null;Qo.length=0}var Yo=w.ReactCurrentDispatcher,Xo=w.ReactCurrentBatchConfig,qo=0,Go=null,Jo=null,Zo=null,ei=!1,ti=!1;function ni(){throw Error(i(321))}function ri(e,t){if(null===t)return!1;for(var n=0;n<t.length&&n<e.length;n++)if(!lr(e[n],t[n]))return!1;return!0}function ai(e,t,n,r,a,o){if(qo=o,Go=t,t.memoizedState=null,t.updateQueue=null,t.lanes=0,Yo.current=null===e||null===e.memoizedState?Oi:Di,e=n(r,a),ti){o=0;do{if(ti=!1,!(25>o))throw Error(i(301));o+=1,Zo=Jo=null,t.updateQueue=null,Yo.current=Ii,e=n(r,a)}while(ti)}if(Yo.current=Ni,t=null!==Jo&&null!==Jo.next,qo=0,Zo=Jo=Go=null,ei=!1,t)throw Error(i(300));return e}function oi(){var e={memoizedState:null,baseState:null,baseQueue:null,queue:null,next:null};return null===Zo?Go.memoizedState=Zo=e:Zo=Zo.next=e,Zo}function ii(){if(null===Jo){var e=Go.alternate;e=null!==e?e.memoizedState:null}else e=Jo.next;var t=null===Zo?Go.memoizedState:Zo.next;if(null!==t)Zo=t,Jo=e;else{if(null===e)throw Error(i(310));e={memoizedState:(Jo=e).memoizedState,baseState:Jo.baseState,baseQueue:Jo.baseQueue,queue:Jo.queue,next:null},null===Zo?Go.memoizedState=Zo=e:Zo=Zo.next=e}return Zo}function li(e,t){return"function"==typeof t?t(e):t}function ui(e){var t=ii(),n=t.queue;if(null===n)throw Error(i(311));n.lastRenderedReducer=e;var r=Jo,a=r.baseQueue,o=n.pending;if(null!==o){if(null!==a){var l=a.next;a.next=o.next,o.next=l}r.baseQueue=a=o,n.pending=null}if(null!==a){a=a.next,r=r.baseState;var u=l=o=null,s=a;do{var c=s.lane;if((qo&c)===c)null!==u&&(u=u.next={lane:0,action:s.action,eagerReducer:s.eagerReducer,eagerState:s.eagerState,next:null}),r=s.eagerReducer===e?s.eagerState:e(r,s.action);else{var f={lane:c,action:s.action,eagerReducer:s.eagerReducer,eagerState:s.eagerState,next:null};null===u?(l=u=f,o=r):u=u.next=f,Go.lanes|=c,Fl|=c}s=s.next}while(null!==s&&s!==a);null===u?o=r:u.next=l,lr(r,t.memoizedState)||(Ri=!0),t.memoizedState=r,t.baseState=o,t.baseQueue=u,n.lastRenderedState=r}return[t.memoizedState,n.dispatch]}function si(e){var t=ii(),n=t.queue;if(null===n)throw Error(i(311));n.lastRenderedReducer=e;var r=n.dispatch,a=n.pending,o=t.memoizedState;if(null!==a){n.pending=null;var l=a=a.next;do{o=e(o,l.action),l=l.next}while(l!==a);lr(o,t.memoizedState)||(Ri=!0),t.memoizedState=o,null===t.baseQueue&&(t.baseState=o),n.lastRenderedState=o}return[o,r]}function ci(e,t,n){var r=t._getVersion;r=r(t._source);var a=t._workInProgressVersionPrimary;if(null!==a?e=a===r:(e=e.mutableReadLanes,(e=(qo&e)===e)&&(t._workInProgressVersionPrimary=r,Qo.push(t))),e)return n(t._source);throw Qo.push(t),Error(i(350))}function fi(e,t,n,r){var a=Ol;if(null===a)throw Error(i(349));var o=t._getVersion,l=o(t._source),u=Yo.current,s=u.useState((function(){return ci(a,t,n)})),c=s[1],f=s[0];s=Zo;var d=e.memoizedState,p=d.refs,h=p.getSnapshot,m=d.source;d=d.subscribe;var v=Go;return e.memoizedState={refs:p,source:t,subscribe:r},u.useEffect((function(){p.getSnapshot=n,p.setSnapshot=c;var e=o(t._source);if(!lr(l,e)){e=n(t._source),lr(f,e)||(c(e),e=cu(v),a.mutableReadLanes|=e&a.pendingLanes),e=a.mutableReadLanes,a.entangledLanes|=e;for(var r=a.entanglements,i=e;0<i;){var u=31-Vt(i),s=1<<u;r[u]|=e,i&=~s}}}),[n,t,r]),u.useEffect((function(){return r(t._source,(function(){var e=p.getSnapshot,n=p.setSnapshot;try{n(e(t._source));var r=cu(v);a.mutableReadLanes|=r&a.pendingLanes}catch(e){n((function(){throw e}))}}))}),[t,r]),lr(h,n)&&lr(m,t)&&lr(d,r)||((e={pending:null,dispatch:null,lastRenderedReducer:li,lastRenderedState:f}).dispatch=c=Pi.bind(null,Go,e),s.queue=e,s.baseQueue=null,f=ci(a,t,n),s.memoizedState=s.baseState=f),f}function di(e,t,n){return fi(ii(),e,t,n)}function pi(e){var t=oi();return"function"==typeof e&&(e=e()),t.memoizedState=t.baseState=e,e=(e=t.queue={pending:null,dispatch:null,lastRenderedReducer:li,lastRenderedState:e}).dispatch=Pi.bind(null,Go,e),[t.memoizedState,e]}function hi(e,t,n,r){return e={tag:e,create:t,destroy:n,deps:r,next:null},null===(t=Go.updateQueue)?(t={lastEffect:null},Go.updateQueue=t,t.lastEffect=e.next=e):null===(n=t.lastEffect)?t.lastEffect=e.next=e:(r=n.next,n.next=e,e.next=r,t.lastEffect=e),e}function mi(e){return e={current:e},oi().memoizedState=e}function vi(){return ii().memoizedState}function gi(e,t,n,r){var a=oi();Go.flags|=e,a.memoizedState=hi(1|t,n,void 0,void 0===r?null:r)}function yi(e,t,n,r){var a=ii();r=void 0===r?null:r;var o=void 0;if(null!==Jo){var i=Jo.memoizedState;if(o=i.destroy,null!==r&&ri(r,i.deps))return void hi(t,n,o,r)}Go.flags|=e,a.memoizedState=hi(1|t,n,o,r)}function bi(e,t){return gi(516,4,e,t)}function ki(e,t){return yi(516,4,e,t)}function wi(e,t){return yi(4,2,e,t)}function Si(e,t){return"function"==typeof t?(e=e(),t(e),function(){t(null)}):null!=t?(e=e(),t.current=e,function(){t.current=null}):void 0}function Ei(e,t,n){return n=null!=n?n.concat([e]):null,yi(4,2,Si.bind(null,t,e),n)}function Ci(){}function Ti(e,t){var n=ii();t=void 0===t?null:t;var r=n.memoizedState;return null!==r&&null!==t&&ri(t,r[1])?r[0]:(n.memoizedState=[e,t],e)}function xi(e,t){var n=ii();t=void 0===t?null:t;var r=n.memoizedState;return null!==r&&null!==t&&ri(t,r[1])?r[0]:(e=e(),n.memoizedState=[e,t],e)}function _i(e,t){var n=Wa();Ha(98>n?98:n,(function(){e(!0)})),Ha(97<n?97:n,(function(){var n=Xo.transition;Xo.transition=1;try{e(!1),t()}finally{Xo.transition=n}}))}function Pi(e,t,n){var r=su(),a=cu(e),o={lane:a,action:n,eagerReducer:null,eagerState:null,next:null},i=t.pending;if(null===i?o.next=o:(o.next=i.next,i.next=o),t.pending=o,i=e.alternate,e===Go||null!==i&&i===Go)ti=ei=!0;else{if(0===e.lanes&&(null===i||0===i.lanes)&&null!==(i=t.lastRenderedReducer))try{var l=t.lastRenderedState,u=i(l,n);if(o.eagerReducer=i,o.eagerState=u,lr(u,l))return}catch(e){}fu(e,a,r)}}var Ni={readContext:ro,useCallback:ni,useContext:ni,useEffect:ni,useImperativeHandle:ni,useLayoutEffect:ni,useMemo:ni,useReducer:ni,useRef:ni,useState:ni,useDebugValue:ni,useDeferredValue:ni,useTransition:ni,useMutableSource:ni,useOpaqueIdentifier:ni,unstable_isNewReconciler:!1},Oi={readContext:ro,useCallback:function(e,t){return oi().memoizedState=[e,void 0===t?null:t],e},useContext:ro,useEffect:bi,useImperativeHandle:function(e,t,n){return n=null!=n?n.concat([e]):null,gi(4,2,Si.bind(null,t,e),n)},useLayoutEffect:function(e,t){return gi(4,2,e,t)},useMemo:function(e,t){var n=oi();return t=void 0===t?null:t,e=e(),n.memoizedState=[e,t],e},useReducer:function(e,t,n){var r=oi();return t=void 0!==n?n(t):t,r.memoizedState=r.baseState=t,e=(e=r.queue={pending:null,dispatch:null,lastRenderedReducer:e,lastRenderedState:t}).dispatch=Pi.bind(null,Go,e),[r.memoizedState,e]},useRef:mi,useState:pi,useDebugValue:Ci,useDeferredValue:function(e){var t=pi(e),n=t[0],r=t[1];return bi((function(){var t=Xo.transition;Xo.transition=1;try{r(e)}finally{Xo.transition=t}}),[e]),n},useTransition:function(){var e=pi(!1),t=e[0];return mi(e=_i.bind(null,e[1])),[e,t]},useMutableSource:function(e,t,n){var r=oi();return r.memoizedState={refs:{getSnapshot:t,setSnapshot:null},source:e,subscribe:n},fi(r,e,t,n)},useOpaqueIdentifier:function(){if(Uo){var e=!1,t=function(e){return{$$typeof:L,toString:e,valueOf:e}}((function(){throw e||(e=!0,n("r:"+(Kr++).toString(36))),Error(i(355))})),n=pi(t)[1];return 0==(2&Go.mode)&&(Go.flags|=516,hi(5,(function(){n("r:"+(Kr++).toString(36))}),void 0,null)),t}return pi(t="r:"+(Kr++).toString(36)),t},unstable_isNewReconciler:!1},Di={readContext:ro,useCallback:Ti,useContext:ro,useEffect:ki,useImperativeHandle:Ei,useLayoutEffect:wi,useMemo:xi,useReducer:ui,useRef:vi,useState:function(){return ui(li)},useDebugValue:Ci,useDeferredValue:function(e){var t=ui(li),n=t[0],r=t[1];return ki((function(){var t=Xo.transition;Xo.transition=1;try{r(e)}finally{Xo.transition=t}}),[e]),n},useTransition:function(){var e=ui(li)[0];return[vi().current,e]},useMutableSource:di,useOpaqueIdentifier:function(){return ui(li)[0]},unstable_isNewReconciler:!1},Ii={readContext:ro,useCallback:Ti,useContext:ro,useEffect:ki,useImperativeHandle:Ei,useLayoutEffect:wi,useMemo:xi,useReducer:si,useRef:vi,useState:function(){return si(li)},useDebugValue:Ci,useDeferredValue:function(e){var t=si(li),n=t[0],r=t[1];return ki((function(){var t=Xo.transition;Xo.transition=1;try{r(e)}finally{Xo.transition=t}}),[e]),n},useTransition:function(){var e=si(li)[0];return[vi().current,e]},useMutableSource:di,useOpaqueIdentifier:function(){return si(li)[0]},unstable_isNewReconciler:!1},Mi=w.ReactCurrentOwner,Ri=!1;function Li(e,t,n,r){t.child=null===e?To(t,null,n,r):Co(t,e.child,n,r)}function zi(e,t,n,r,a){n=n.render;var o=t.ref;return no(t,a),r=ai(e,t,n,r,o,a),null===e||Ri?(t.flags|=1,Li(e,t,r,a),t.child):(t.updateQueue=e.updateQueue,t.flags&=-517,e.lanes&=~a,nl(e,t,a))}function Ai(e,t,n,r,a,o){if(null===e){var i=n.type;return"function"!=typeof i||Bu(i)||void 0!==i.defaultProps||null!==n.compare||void 0!==n.defaultProps?((e=Vu(n.type,null,r,t,t.mode,o)).ref=t.ref,e.return=t,t.child=e):(t.tag=15,t.type=i,Fi(e,t,i,r,a,o))}return i=e.child,0==(a&o)&&(a=i.memoizedProps,(n=null!==(n=n.compare)?n:sr)(a,r)&&e.ref===t.ref)?nl(e,t,o):(t.flags|=1,(e=Hu(i,r)).ref=t.ref,e.return=t,t.child=e)}function Fi(e,t,n,r,a,o){if(null!==e&&sr(e.memoizedProps,r)&&e.ref===t.ref){if(Ri=!1,0==(o&a))return t.lanes=e.lanes,nl(e,t,o);0!=(16384&e.flags)&&(Ri=!0)}return Wi(e,t,n,r,o)}function Ui(e,t,n){var r=t.pendingProps,a=r.children,o=null!==e?e.memoizedState:null;if("hidden"===r.mode||"unstable-defer-without-hiding"===r.mode)if(0==(4&t.mode))t.memoizedState={baseLanes:0},bu(t,n);else{if(0==(1073741824&n))return e=null!==o?o.baseLanes|n:n,t.lanes=t.childLanes=1073741824,t.memoizedState={baseLanes:e},bu(t,e),null;t.memoizedState={baseLanes:0},bu(t,null!==o?o.baseLanes:n)}else null!==o?(r=o.baseLanes|n,t.memoizedState=null):r=n,bu(t,r);return Li(e,t,a,n),t.child}function ji(e,t){var n=t.ref;(null===e&&null!==n||null!==e&&e.ref!==n)&&(t.flags|=128)}function Wi(e,t,n,r,a){var o=ha(n)?da:ca.current;return o=pa(t,o),no(t,a),n=ai(e,t,n,r,o,a),null===e||Ri?(t.flags|=1,Li(e,t,n,a),t.child):(t.updateQueue=e.updateQueue,t.flags&=-517,e.lanes&=~a,nl(e,t,a))}function Bi(e,t,n,r,a){if(ha(n)){var o=!0;ya(t)}else o=!1;if(no(t,a),null===t.stateNode)null!==e&&(e.alternate=null,t.alternate=null,t.flags|=2),go(t,n,r),bo(t,n,r,a),r=!0;else if(null===e){var i=t.stateNode,l=t.memoizedProps;i.props=l;var u=i.context,s=n.contextType;"object"==typeof s&&null!==s?s=ro(s):s=pa(t,s=ha(n)?da:ca.current);var c=n.getDerivedStateFromProps,f="function"==typeof c||"function"==typeof i.getSnapshotBeforeUpdate;f||"function"!=typeof i.UNSAFE_componentWillReceiveProps&&"function"!=typeof i.componentWillReceiveProps||(l!==r||u!==s)&&yo(t,i,r,s),ao=!1;var d=t.memoizedState;i.state=d,co(t,r,i,a),u=t.memoizedState,l!==r||d!==u||fa.current||ao?("function"==typeof c&&(ho(t,n,c,r),u=t.memoizedState),(l=ao||vo(t,n,l,r,d,u,s))?(f||"function"!=typeof i.UNSAFE_componentWillMount&&"function"!=typeof i.componentWillMount||("function"==typeof i.componentWillMount&&i.componentWillMount(),"function"==typeof i.UNSAFE_componentWillMount&&i.UNSAFE_componentWillMount()),"function"==typeof i.componentDidMount&&(t.flags|=4)):("function"==typeof i.componentDidMount&&(t.flags|=4),t.memoizedProps=r,t.memoizedState=u),i.props=r,i.state=u,i.context=s,r=l):("function"==typeof i.componentDidMount&&(t.flags|=4),r=!1)}else{i=t.stateNode,io(e,t),l=t.memoizedProps,s=t.type===t.elementType?l:Ya(t.type,l),i.props=s,f=t.pendingProps,d=i.context,"object"==typeof(u=n.contextType)&&null!==u?u=ro(u):u=pa(t,u=ha(n)?da:ca.current);var p=n.getDerivedStateFromProps;(c="function"==typeof p||"function"==typeof i.getSnapshotBeforeUpdate)||"function"!=typeof i.UNSAFE_componentWillReceiveProps&&"function"!=typeof i.componentWillReceiveProps||(l!==f||d!==u)&&yo(t,i,r,u),ao=!1,d=t.memoizedState,i.state=d,co(t,r,i,a);var h=t.memoizedState;l!==f||d!==h||fa.current||ao?("function"==typeof p&&(ho(t,n,p,r),h=t.memoizedState),(s=ao||vo(t,n,s,r,d,h,u))?(c||"function"!=typeof i.UNSAFE_componentWillUpdate&&"function"!=typeof i.componentWillUpdate||("function"==typeof i.componentWillUpdate&&i.componentWillUpdate(r,h,u),"function"==typeof i.UNSAFE_componentWillUpdate&&i.UNSAFE_componentWillUpdate(r,h,u)),"function"==typeof i.componentDidUpdate&&(t.flags|=4),"function"==typeof i.getSnapshotBeforeUpdate&&(t.flags|=256)):("function"!=typeof i.componentDidUpdate||l===e.memoizedProps&&d===e.memoizedState||(t.flags|=4),"function"!=typeof i.getSnapshotBeforeUpdate||l===e.memoizedProps&&d===e.memoizedState||(t.flags|=256),t.memoizedProps=r,t.memoizedState=h),i.props=r,i.state=h,i.context=u,r=s):("function"!=typeof i.componentDidUpdate||l===e.memoizedProps&&d===e.memoizedState||(t.flags|=4),"function"!=typeof i.getSnapshotBeforeUpdate||l===e.memoizedProps&&d===e.memoizedState||(t.flags|=256),r=!1)}return Hi(e,t,n,r,o,a)}function Hi(e,t,n,r,a,o){ji(e,t);var i=0!=(64&t.flags);if(!r&&!i)return a&&ba(t,n,!1),nl(e,t,o);r=t.stateNode,Mi.current=t;var l=i&&"function"!=typeof n.getDerivedStateFromError?null:r.render();return t.flags|=1,null!==e&&i?(t.child=Co(t,e.child,null,o),t.child=Co(t,null,l,o)):Li(e,t,l,o),t.memoizedState=r.state,a&&ba(t,n,!0),t.child}function Vi(e){var t=e.stateNode;t.pendingContext?va(0,t.pendingContext,t.pendingContext!==t.context):t.context&&va(0,t.context,!1),Do(e,t.containerInfo)}var $i,Qi,Ki,Yi={dehydrated:null,retryLane:0};function Xi(e,t,n){var r,a=t.pendingProps,o=Lo.current,i=!1;return(r=0!=(64&t.flags))||(r=(null===e||null!==e.memoizedState)&&0!=(2&o)),r?(i=!0,t.flags&=-65):null!==e&&null===e.memoizedState||void 0===a.fallback||!0===a.unstable_avoidThisFallback||(o|=1),ua(Lo,1&o),null===e?(void 0!==a.fallback&&Bo(t),e=a.children,o=a.fallback,i?(e=qi(t,e,o,n),t.child.memoizedState={baseLanes:n},t.memoizedState=Yi,e):"number"==typeof a.unstable_expectedLoadTime?(e=qi(t,e,o,n),t.child.memoizedState={baseLanes:n},t.memoizedState=Yi,t.lanes=33554432,e):((n=Qu({mode:"visible",children:e},t.mode,n,null)).return=t,t.child=n)):(e.memoizedState,i?(a=Ji(e,t,a.children,a.fallback,n),i=t.child,o=e.child.memoizedState,i.memoizedState=null===o?{baseLanes:n}:{baseLanes:o.baseLanes|n},i.childLanes=e.childLanes&~n,t.memoizedState=Yi,a):(n=Gi(e,t,a.children,n),t.memoizedState=null,n))}function qi(e,t,n,r){var a=e.mode,o=e.child;return t={mode:"hidden",children:t},0==(2&a)&&null!==o?(o.childLanes=0,o.pendingProps=t):o=Qu(t,a,0,null),n=$u(n,a,r,null),o.return=e,n.return=e,o.sibling=n,e.child=o,n}function Gi(e,t,n,r){var a=e.child;return e=a.sibling,n=Hu(a,{mode:"visible",children:n}),0==(2&t.mode)&&(n.lanes=r),n.return=t,n.sibling=null,null!==e&&(e.nextEffect=null,e.flags=8,t.firstEffect=t.lastEffect=e),t.child=n}function Ji(e,t,n,r,a){var o=t.mode,i=e.child;e=i.sibling;var l={mode:"hidden",children:n};return 0==(2&o)&&t.child!==i?((n=t.child).childLanes=0,n.pendingProps=l,null!==(i=n.lastEffect)?(t.firstEffect=n.firstEffect,t.lastEffect=i,i.nextEffect=null):t.firstEffect=t.lastEffect=null):n=Hu(i,l),null!==e?r=Hu(e,r):(r=$u(r,o,a,null)).flags|=2,r.return=t,n.return=t,n.sibling=r,t.child=n,r}function Zi(e,t){e.lanes|=t;var n=e.alternate;null!==n&&(n.lanes|=t),to(e.return,t)}function el(e,t,n,r,a,o){var i=e.memoizedState;null===i?e.memoizedState={isBackwards:t,rendering:null,renderingStartTime:0,last:r,tail:n,tailMode:a,lastEffect:o}:(i.isBackwards=t,i.rendering=null,i.renderingStartTime=0,i.last=r,i.tail=n,i.tailMode=a,i.lastEffect=o)}function tl(e,t,n){var r=t.pendingProps,a=r.revealOrder,o=r.tail;if(Li(e,t,r.children,n),0!=(2&(r=Lo.current)))r=1&r|2,t.flags|=64;else{if(null!==e&&0!=(64&e.flags))e:for(e=t.child;null!==e;){if(13===e.tag)null!==e.memoizedState&&Zi(e,n);else if(19===e.tag)Zi(e,n);else if(null!==e.child){e.child.return=e,e=e.child;continue}if(e===t)break e;for(;null===e.sibling;){if(null===e.return||e.return===t)break e;e=e.return}e.sibling.return=e.return,e=e.sibling}r&=1}if(ua(Lo,r),0==(2&t.mode))t.memoizedState=null;else switch(a){case"forwards":for(n=t.child,a=null;null!==n;)null!==(e=n.alternate)&&null===zo(e)&&(a=n),n=n.sibling;null===(n=a)?(a=t.child,t.child=null):(a=n.sibling,n.sibling=null),el(t,!1,a,n,o,t.lastEffect);break;case"backwards":for(n=null,a=t.child,t.child=null;null!==a;){if(null!==(e=a.alternate)&&null===zo(e)){t.child=a;break}e=a.sibling,a.sibling=n,n=a,a=e}el(t,!0,n,null,o,t.lastEffect);break;case"together":el(t,!1,null,null,void 0,t.lastEffect);break;default:t.memoizedState=null}return t.child}function nl(e,t,n){if(null!==e&&(t.dependencies=e.dependencies),Fl|=t.lanes,0!=(n&t.childLanes)){if(null!==e&&t.child!==e.child)throw Error(i(153));if(null!==t.child){for(n=Hu(e=t.child,e.pendingProps),t.child=n,n.return=t;null!==e.sibling;)e=e.sibling,(n=n.sibling=Hu(e,e.pendingProps)).return=t;n.sibling=null}return t.child}return null}function rl(e,t){if(!Uo)switch(e.tailMode){case"hidden":t=e.tail;for(var n=null;null!==t;)null!==t.alternate&&(n=t),t=t.sibling;null===n?e.tail=null:n.sibling=null;break;case"collapsed":n=e.tail;for(var r=null;null!==n;)null!==n.alternate&&(r=n),n=n.sibling;null===r?t||null===e.tail?e.tail=null:e.tail.sibling=null:r.sibling=null}}function al(e,t,n){var r=t.pendingProps;switch(t.tag){case 2:case 16:case 15:case 0:case 11:case 7:case 8:case 12:case 9:case 14:return null;case 1:return ha(t.type)&&ma(),null;case 3:return Io(),la(fa),la(ca),Ko(),(r=t.stateNode).pendingContext&&(r.context=r.pendingContext,r.pendingContext=null),null!==e&&null!==e.child||(Vo(t)?t.flags|=4:r.hydrate||(t.flags|=256)),null;case 5:Ro(t);var o=Oo(No.current);if(n=t.type,null!==e&&null!=t.stateNode)Qi(e,t,n,r),e.ref!==t.ref&&(t.flags|=128);else{if(!r){if(null===t.stateNode)throw Error(i(166));return null}if(e=Oo(_o.current),Vo(t)){r=t.stateNode,n=t.type;var l=t.memoizedProps;switch(r[Xr]=t,r[qr]=l,n){case"dialog":_r("cancel",r),_r("close",r);break;case"iframe":case"object":case"embed":_r("load",r);break;case"video":case"audio":for(e=0;e<Er.length;e++)_r(Er[e],r);break;case"source":_r("error",r);break;case"img":case"image":case"link":_r("error",r),_r("load",r);break;case"details":_r("toggle",r);break;case"input":ee(r,l),_r("invalid",r);break;case"select":r._wrapperState={wasMultiple:!!l.multiple},_r("invalid",r);break;case"textarea":ue(r,l),_r("invalid",r)}for(var s in Ce(n,l),e=null,l)l.hasOwnProperty(s)&&(o=l[s],"children"===s?"string"==typeof o?r.textContent!==o&&(e=["children",o]):"number"==typeof o&&r.textContent!==""+o&&(e=["children",""+o]):u.hasOwnProperty(s)&&null!=o&&"onScroll"===s&&_r("scroll",r));switch(n){case"input":q(r),re(r,l,!0);break;case"textarea":q(r),ce(r);break;case"select":case"option":break;default:"function"==typeof l.onClick&&(r.onclick=Ar)}r=e,t.updateQueue=r,null!==r&&(t.flags|=4)}else{switch(s=9===o.nodeType?o:o.ownerDocument,e===fe&&(e=pe(n)),e===fe?"script"===n?((e=s.createElement("div")).innerHTML="<script><\/script>",e=e.removeChild(e.firstChild)):"string"==typeof r.is?e=s.createElement(n,{is:r.is}):(e=s.createElement(n),"select"===n&&(s=e,r.multiple?s.multiple=!0:r.size&&(s.size=r.size))):e=s.createElementNS(e,n),e[Xr]=t,e[qr]=r,$i(e,t),t.stateNode=e,s=Te(n,r),n){case"dialog":_r("cancel",e),_r("close",e),o=r;break;case"iframe":case"object":case"embed":_r("load",e),o=r;break;case"video":case"audio":for(o=0;o<Er.length;o++)_r(Er[o],e);o=r;break;case"source":_r("error",e),o=r;break;case"img":case"image":case"link":_r("error",e),_r("load",e),o=r;break;case"details":_r("toggle",e),o=r;break;case"input":ee(e,r),o=Z(e,r),_r("invalid",e);break;case"option":o=oe(e,r);break;case"select":e._wrapperState={wasMultiple:!!r.multiple},o=a({},r,{value:void 0}),_r("invalid",e);break;case"textarea":ue(e,r),o=le(e,r),_r("invalid",e);break;default:o=r}Ce(n,o);var c=o;for(l in c)if(c.hasOwnProperty(l)){var f=c[l];"style"===l?Se(e,f):"dangerouslySetInnerHTML"===l?null!=(f=f?f.__html:void 0)&&ge(e,f):"children"===l?"string"==typeof f?("textarea"!==n||""!==f)&&ye(e,f):"number"==typeof f&&ye(e,""+f):"suppressContentEditableWarning"!==l&&"suppressHydrationWarning"!==l&&"autoFocus"!==l&&(u.hasOwnProperty(l)?null!=f&&"onScroll"===l&&_r("scroll",e):null!=f&&k(e,l,f,s))}switch(n){case"input":q(e),re(e,r,!1);break;case"textarea":q(e),ce(e);break;case"option":null!=r.value&&e.setAttribute("value",""+Y(r.value));break;case"select":e.multiple=!!r.multiple,null!=(l=r.value)?ie(e,!!r.multiple,l,!1):null!=r.defaultValue&&ie(e,!!r.multiple,r.defaultValue,!0);break;default:"function"==typeof o.onClick&&(e.onclick=Ar)}jr(n,r)&&(t.flags|=4)}null!==t.ref&&(t.flags|=128)}return null;case 6:if(e&&null!=t.stateNode)Ki(0,t,e.memoizedProps,r);else{if("string"!=typeof r&&null===t.stateNode)throw Error(i(166));n=Oo(No.current),Oo(_o.current),Vo(t)?(r=t.stateNode,n=t.memoizedProps,r[Xr]=t,r.nodeValue!==n&&(t.flags|=4)):((r=(9===n.nodeType?n:n.ownerDocument).createTextNode(r))[Xr]=t,t.stateNode=r)}return null;case 13:return la(Lo),r=t.memoizedState,0!=(64&t.flags)?(t.lanes=n,t):(r=null!==r,n=!1,null===e?void 0!==t.memoizedProps.fallback&&Vo(t):n=null!==e.memoizedState,r&&!n&&0!=(2&t.mode)&&(null===e&&!0!==t.memoizedProps.unstable_avoidThisFallback||0!=(1&Lo.current)?0===Ll&&(Ll=3):(0!==Ll&&3!==Ll||(Ll=4),null===Ol||0==(134217727&Fl)&&0==(134217727&Ul)||mu(Ol,Il))),(r||n)&&(t.flags|=4),null);case 4:return Io(),null===e&&Nr(t.stateNode.containerInfo),null;case 10:return eo(t),null;case 17:return ha(t.type)&&ma(),null;case 19:if(la(Lo),null===(r=t.memoizedState))return null;if(l=0!=(64&t.flags),null===(s=r.rendering))if(l)rl(r,!1);else{if(0!==Ll||null!==e&&0!=(64&e.flags))for(e=t.child;null!==e;){if(null!==(s=zo(e))){for(t.flags|=64,rl(r,!1),null!==(l=s.updateQueue)&&(t.updateQueue=l,t.flags|=4),null===r.lastEffect&&(t.firstEffect=null),t.lastEffect=r.lastEffect,r=n,n=t.child;null!==n;)e=r,(l=n).flags&=2,l.nextEffect=null,l.firstEffect=null,l.lastEffect=null,null===(s=l.alternate)?(l.childLanes=0,l.lanes=e,l.child=null,l.memoizedProps=null,l.memoizedState=null,l.updateQueue=null,l.dependencies=null,l.stateNode=null):(l.childLanes=s.childLanes,l.lanes=s.lanes,l.child=s.child,l.memoizedProps=s.memoizedProps,l.memoizedState=s.memoizedState,l.updateQueue=s.updateQueue,l.type=s.type,e=s.dependencies,l.dependencies=null===e?null:{lanes:e.lanes,firstContext:e.firstContext}),n=n.sibling;return ua(Lo,1&Lo.current|2),t.child}e=e.sibling}null!==r.tail&&ja()>Hl&&(t.flags|=64,l=!0,rl(r,!1),t.lanes=33554432)}else{if(!l)if(null!==(e=zo(s))){if(t.flags|=64,l=!0,null!==(n=e.updateQueue)&&(t.updateQueue=n,t.flags|=4),rl(r,!0),null===r.tail&&"hidden"===r.tailMode&&!s.alternate&&!Uo)return null!==(t=t.lastEffect=r.lastEffect)&&(t.nextEffect=null),null}else 2*ja()-r.renderingStartTime>Hl&&1073741824!==n&&(t.flags|=64,l=!0,rl(r,!1),t.lanes=33554432);r.isBackwards?(s.sibling=t.child,t.child=s):(null!==(n=r.last)?n.sibling=s:t.child=s,r.last=s)}return null!==r.tail?(n=r.tail,r.rendering=n,r.tail=n.sibling,r.lastEffect=t.lastEffect,r.renderingStartTime=ja(),n.sibling=null,t=Lo.current,ua(Lo,l?1&t|2:1&t),n):null;case 23:case 24:return ku(),null!==e&&null!==e.memoizedState!=(null!==t.memoizedState)&&"unstable-defer-without-hiding"!==r.mode&&(t.flags|=4),null}throw Error(i(156,t.tag))}function ol(e){switch(e.tag){case 1:ha(e.type)&&ma();var t=e.flags;return 4096&t?(e.flags=-4097&t|64,e):null;case 3:if(Io(),la(fa),la(ca),Ko(),0!=(64&(t=e.flags)))throw Error(i(285));return e.flags=-4097&t|64,e;case 5:return Ro(e),null;case 13:return la(Lo),4096&(t=e.flags)?(e.flags=-4097&t|64,e):null;case 19:return la(Lo),null;case 4:return Io(),null;case 10:return eo(e),null;case 23:case 24:return ku(),null;default:return null}}function il(e,t){try{var n="",r=t;do{n+=Q(r),r=r.return}while(r);var a=n}catch(e){a="\nError generating stack: "+e.message+"\n"+e.stack}return{value:e,source:t,stack:a}}function ll(e,t){try{console.error(t.value)}catch(e){setTimeout((function(){throw e}))}}$i=function(e,t){for(var n=t.child;null!==n;){if(5===n.tag||6===n.tag)e.appendChild(n.stateNode);else if(4!==n.tag&&null!==n.child){n.child.return=n,n=n.child;continue}if(n===t)break;for(;null===n.sibling;){if(null===n.return||n.return===t)return;n=n.return}n.sibling.return=n.return,n=n.sibling}},Qi=function(e,t,n,r){var o=e.memoizedProps;if(o!==r){e=t.stateNode,Oo(_o.current);var i,l=null;switch(n){case"input":o=Z(e,o),r=Z(e,r),l=[];break;case"option":o=oe(e,o),r=oe(e,r),l=[];break;case"select":o=a({},o,{value:void 0}),r=a({},r,{value:void 0}),l=[];break;case"textarea":o=le(e,o),r=le(e,r),l=[];break;default:"function"!=typeof o.onClick&&"function"==typeof r.onClick&&(e.onclick=Ar)}for(f in Ce(n,r),n=null,o)if(!r.hasOwnProperty(f)&&o.hasOwnProperty(f)&&null!=o[f])if("style"===f){var s=o[f];for(i in s)s.hasOwnProperty(i)&&(n||(n={}),n[i]="")}else"dangerouslySetInnerHTML"!==f&&"children"!==f&&"suppressContentEditableWarning"!==f&&"suppressHydrationWarning"!==f&&"autoFocus"!==f&&(u.hasOwnProperty(f)?l||(l=[]):(l=l||[]).push(f,null));for(f in r){var c=r[f];if(s=null!=o?o[f]:void 0,r.hasOwnProperty(f)&&c!==s&&(null!=c||null!=s))if("style"===f)if(s){for(i in s)!s.hasOwnProperty(i)||c&&c.hasOwnProperty(i)||(n||(n={}),n[i]="");for(i in c)c.hasOwnProperty(i)&&s[i]!==c[i]&&(n||(n={}),n[i]=c[i])}else n||(l||(l=[]),l.push(f,n)),n=c;else"dangerouslySetInnerHTML"===f?(c=c?c.__html:void 0,s=s?s.__html:void 0,null!=c&&s!==c&&(l=l||[]).push(f,c)):"children"===f?"string"!=typeof c&&"number"!=typeof c||(l=l||[]).push(f,""+c):"suppressContentEditableWarning"!==f&&"suppressHydrationWarning"!==f&&(u.hasOwnProperty(f)?(null!=c&&"onScroll"===f&&_r("scroll",e),l||s===c||(l=[])):"object"==typeof c&&null!==c&&c.$$typeof===L?c.toString():(l=l||[]).push(f,c))}n&&(l=l||[]).push("style",n);var f=l;(t.updateQueue=f)&&(t.flags|=4)}},Ki=function(e,t,n,r){n!==r&&(t.flags|=4)};var ul="function"==typeof WeakMap?WeakMap:Map;function sl(e,t,n){(n=lo(-1,n)).tag=3,n.payload={element:null};var r=t.value;return n.callback=function(){Kl||(Kl=!0,Yl=r),ll(0,t)},n}function cl(e,t,n){(n=lo(-1,n)).tag=3;var r=e.type.getDerivedStateFromError;if("function"==typeof r){var a=t.value;n.payload=function(){return ll(0,t),r(a)}}var o=e.stateNode;return null!==o&&"function"==typeof o.componentDidCatch&&(n.callback=function(){"function"!=typeof r&&(null===Xl?Xl=new Set([this]):Xl.add(this),ll(0,t));var e=t.stack;this.componentDidCatch(t.value,{componentStack:null!==e?e:""})}),n}var fl="function"==typeof WeakSet?WeakSet:Set;function dl(e){var t=e.ref;if(null!==t)if("function"==typeof t)try{t(null)}catch(t){Au(e,t)}else t.current=null}function pl(e,t){switch(t.tag){case 0:case 11:case 15:case 22:return;case 1:if(256&t.flags&&null!==e){var n=e.memoizedProps,r=e.memoizedState;t=(e=t.stateNode).getSnapshotBeforeUpdate(t.elementType===t.type?n:Ya(t.type,n),r),e.__reactInternalSnapshotBeforeUpdate=t}return;case 3:return void(256&t.flags&&Vr(t.stateNode.containerInfo));case 5:case 6:case 4:case 17:return}throw Error(i(163))}function hl(e,t,n){switch(n.tag){case 0:case 11:case 15:case 22:if(null!==(t=null!==(t=n.updateQueue)?t.lastEffect:null)){e=t=t.next;do{if(3==(3&e.tag)){var r=e.create;e.destroy=r()}e=e.next}while(e!==t)}if(null!==(t=null!==(t=n.updateQueue)?t.lastEffect:null)){e=t=t.next;do{var a=e;r=a.next,0!=(4&(a=a.tag))&&0!=(1&a)&&(Ru(n,e),Mu(n,e)),e=r}while(e!==t)}return;case 1:return e=n.stateNode,4&n.flags&&(null===t?e.componentDidMount():(r=n.elementType===n.type?t.memoizedProps:Ya(n.type,t.memoizedProps),e.componentDidUpdate(r,t.memoizedState,e.__reactInternalSnapshotBeforeUpdate))),void(null!==(t=n.updateQueue)&&fo(n,t,e));case 3:if(null!==(t=n.updateQueue)){if(e=null,null!==n.child)switch(n.child.tag){case 5:e=n.child.stateNode;break;case 1:e=n.child.stateNode}fo(n,t,e)}return;case 5:return e=n.stateNode,void(null===t&&4&n.flags&&jr(n.type,n.memoizedProps)&&e.focus());case 6:case 4:case 12:return;case 13:return void(null===n.memoizedState&&(n=n.alternate,null!==n&&(n=n.memoizedState,null!==n&&(n=n.dehydrated,null!==n&&St(n)))));case 19:case 17:case 20:case 21:case 23:case 24:return}throw Error(i(163))}function ml(e,t){for(var n=e;;){if(5===n.tag){var r=n.stateNode;if(t)"function"==typeof(r=r.style).setProperty?r.setProperty("display","none","important"):r.display="none";else{r=n.stateNode;var a=n.memoizedProps.style;a=null!=a&&a.hasOwnProperty("display")?a.display:null,r.style.display=we("display",a)}}else if(6===n.tag)n.stateNode.nodeValue=t?"":n.memoizedProps;else if((23!==n.tag&&24!==n.tag||null===n.memoizedState||n===e)&&null!==n.child){n.child.return=n,n=n.child;continue}if(n===e)break;for(;null===n.sibling;){if(null===n.return||n.return===e)return;n=n.return}n.sibling.return=n.return,n=n.sibling}}function vl(e,t){if(wa&&"function"==typeof wa.onCommitFiberUnmount)try{wa.onCommitFiberUnmount(ka,t)}catch(e){}switch(t.tag){case 0:case 11:case 14:case 15:case 22:if(null!==(e=t.updateQueue)&&null!==(e=e.lastEffect)){var n=e=e.next;do{var r=n,a=r.destroy;if(r=r.tag,void 0!==a)if(0!=(4&r))Ru(t,n);else{r=t;try{a()}catch(e){Au(r,e)}}n=n.next}while(n!==e)}break;case 1:if(dl(t),"function"==typeof(e=t.stateNode).componentWillUnmount)try{e.props=t.memoizedProps,e.state=t.memoizedState,e.componentWillUnmount()}catch(e){Au(t,e)}break;case 5:dl(t);break;case 4:Sl(e,t)}}function gl(e){e.alternate=null,e.child=null,e.dependencies=null,e.firstEffect=null,e.lastEffect=null,e.memoizedProps=null,e.memoizedState=null,e.pendingProps=null,e.return=null,e.updateQueue=null}function yl(e){return 5===e.tag||3===e.tag||4===e.tag}function bl(e){e:{for(var t=e.return;null!==t;){if(yl(t))break e;t=t.return}throw Error(i(160))}var n=t;switch(t=n.stateNode,n.tag){case 5:var r=!1;break;case 3:case 4:t=t.containerInfo,r=!0;break;default:throw Error(i(161))}16&n.flags&&(ye(t,""),n.flags&=-17);e:t:for(n=e;;){for(;null===n.sibling;){if(null===n.return||yl(n.return)){n=null;break e}n=n.return}for(n.sibling.return=n.return,n=n.sibling;5!==n.tag&&6!==n.tag&&18!==n.tag;){if(2&n.flags)continue t;if(null===n.child||4===n.tag)continue t;n.child.return=n,n=n.child}if(!(2&n.flags)){n=n.stateNode;break e}}r?kl(e,n,t):wl(e,n,t)}function kl(e,t,n){var r=e.tag,a=5===r||6===r;if(a)e=a?e.stateNode:e.stateNode.instance,t?8===n.nodeType?n.parentNode.insertBefore(e,t):n.insertBefore(e,t):(8===n.nodeType?(t=n.parentNode).insertBefore(e,n):(t=n).appendChild(e),null!=(n=n._reactRootContainer)||null!==t.onclick||(t.onclick=Ar));else if(4!==r&&null!==(e=e.child))for(kl(e,t,n),e=e.sibling;null!==e;)kl(e,t,n),e=e.sibling}function wl(e,t,n){var r=e.tag,a=5===r||6===r;if(a)e=a?e.stateNode:e.stateNode.instance,t?n.insertBefore(e,t):n.appendChild(e);else if(4!==r&&null!==(e=e.child))for(wl(e,t,n),e=e.sibling;null!==e;)wl(e,t,n),e=e.sibling}function Sl(e,t){for(var n,r,a=t,o=!1;;){if(!o){o=a.return;e:for(;;){if(null===o)throw Error(i(160));switch(n=o.stateNode,o.tag){case 5:r=!1;break e;case 3:case 4:n=n.containerInfo,r=!0;break e}o=o.return}o=!0}if(5===a.tag||6===a.tag){e:for(var l=e,u=a,s=u;;)if(vl(l,s),null!==s.child&&4!==s.tag)s.child.return=s,s=s.child;else{if(s===u)break e;for(;null===s.sibling;){if(null===s.return||s.return===u)break e;s=s.return}s.sibling.return=s.return,s=s.sibling}r?(l=n,u=a.stateNode,8===l.nodeType?l.parentNode.removeChild(u):l.removeChild(u)):n.removeChild(a.stateNode)}else if(4===a.tag){if(null!==a.child){n=a.stateNode.containerInfo,r=!0,a.child.return=a,a=a.child;continue}}else if(vl(e,a),null!==a.child){a.child.return=a,a=a.child;continue}if(a===t)break;for(;null===a.sibling;){if(null===a.return||a.return===t)return;4===(a=a.return).tag&&(o=!1)}a.sibling.return=a.return,a=a.sibling}}function El(e,t){switch(t.tag){case 0:case 11:case 14:case 15:case 22:var n=t.updateQueue;if(null!==(n=null!==n?n.lastEffect:null)){var r=n=n.next;do{3==(3&r.tag)&&(e=r.destroy,r.destroy=void 0,void 0!==e&&e()),r=r.next}while(r!==n)}return;case 1:return;case 5:if(null!=(n=t.stateNode)){r=t.memoizedProps;var a=null!==e?e.memoizedProps:r;e=t.type;var o=t.updateQueue;if(t.updateQueue=null,null!==o){for(n[qr]=r,"input"===e&&"radio"===r.type&&null!=r.name&&te(n,r),Te(e,a),t=Te(e,r),a=0;a<o.length;a+=2){var l=o[a],u=o[a+1];"style"===l?Se(n,u):"dangerouslySetInnerHTML"===l?ge(n,u):"children"===l?ye(n,u):k(n,l,u,t)}switch(e){case"input":ne(n,r);break;case"textarea":se(n,r);break;case"select":e=n._wrapperState.wasMultiple,n._wrapperState.wasMultiple=!!r.multiple,null!=(o=r.value)?ie(n,!!r.multiple,o,!1):e!==!!r.multiple&&(null!=r.defaultValue?ie(n,!!r.multiple,r.defaultValue,!0):ie(n,!!r.multiple,r.multiple?[]:"",!1))}}}return;case 6:if(null===t.stateNode)throw Error(i(162));return void(t.stateNode.nodeValue=t.memoizedProps);case 3:return void((n=t.stateNode).hydrate&&(n.hydrate=!1,St(n.containerInfo)));case 12:return;case 13:return null!==t.memoizedState&&(Bl=ja(),ml(t.child,!0)),void Cl(t);case 19:return void Cl(t);case 17:return;case 23:case 24:return void ml(t,null!==t.memoizedState)}throw Error(i(163))}function Cl(e){var t=e.updateQueue;if(null!==t){e.updateQueue=null;var n=e.stateNode;null===n&&(n=e.stateNode=new fl),t.forEach((function(t){var r=Uu.bind(null,e,t);n.has(t)||(n.add(t),t.then(r,r))}))}}function Tl(e,t){return null!==e&&(null===(e=e.memoizedState)||null!==e.dehydrated)&&(null!==(t=t.memoizedState)&&null===t.dehydrated)}var xl=Math.ceil,_l=w.ReactCurrentDispatcher,Pl=w.ReactCurrentOwner,Nl=0,Ol=null,Dl=null,Il=0,Ml=0,Rl=ia(0),Ll=0,zl=null,Al=0,Fl=0,Ul=0,jl=0,Wl=null,Bl=0,Hl=1/0;function Vl(){Hl=ja()+500}var $l,Ql=null,Kl=!1,Yl=null,Xl=null,ql=!1,Gl=null,Jl=90,Zl=[],eu=[],tu=null,nu=0,ru=null,au=-1,ou=0,iu=0,lu=null,uu=!1;function su(){return 0!=(48&Nl)?ja():-1!==au?au:au=ja()}function cu(e){if(0==(2&(e=e.mode)))return 1;if(0==(4&e))return 99===Wa()?1:2;if(0===ou&&(ou=Al),0!==Ka.transition){0!==iu&&(iu=null!==Wl?Wl.pendingLanes:0),e=ou;var t=4186112&~iu;return 0===(t&=-t)&&(0===(t=(e=4186112&~e)&-e)&&(t=8192)),t}return e=Wa(),0!=(4&Nl)&&98===e?e=jt(12,ou):e=jt(e=function(e){switch(e){case 99:return 15;case 98:return 10;case 97:case 96:return 8;case 95:return 2;default:return 0}}(e),ou),e}function fu(e,t,n){if(50<nu)throw nu=0,ru=null,Error(i(185));if(null===(e=du(e,t)))return null;Ht(e,t,n),e===Ol&&(Ul|=t,4===Ll&&mu(e,Il));var r=Wa();1===t?0!=(8&Nl)&&0==(48&Nl)?vu(e):(pu(e,n),0===Nl&&(Vl(),$a())):(0==(4&Nl)||98!==r&&99!==r||(null===tu?tu=new Set([e]):tu.add(e)),pu(e,n)),Wl=e}function du(e,t){e.lanes|=t;var n=e.alternate;for(null!==n&&(n.lanes|=t),n=e,e=e.return;null!==e;)e.childLanes|=t,null!==(n=e.alternate)&&(n.childLanes|=t),n=e,e=e.return;return 3===n.tag?n.stateNode:null}function pu(e,t){for(var n=e.callbackNode,r=e.suspendedLanes,a=e.pingedLanes,o=e.expirationTimes,l=e.pendingLanes;0<l;){var u=31-Vt(l),s=1<<u,c=o[u];if(-1===c){if(0==(s&r)||0!=(s&a)){c=t,At(s);var f=zt;o[u]=10<=f?c+250:6<=f?c+5e3:-1}}else c<=t&&(e.expiredLanes|=s);l&=~s}if(r=Ft(e,e===Ol?Il:0),t=zt,0===r)null!==n&&(n!==Ra&&Ca(n),e.callbackNode=null,e.callbackPriority=0);else{if(null!==n){if(e.callbackPriority===t)return;n!==Ra&&Ca(n)}15===t?(n=vu.bind(null,e),null===za?(za=[n],Aa=Ea(Na,Qa)):za.push(n),n=Ra):14===t?n=Va(99,vu.bind(null,e)):n=Va(n=function(e){switch(e){case 15:case 14:return 99;case 13:case 12:case 11:case 10:return 98;case 9:case 8:case 7:case 6:case 4:case 5:return 97;case 3:case 2:case 1:return 95;case 0:return 90;default:throw Error(i(358,e))}}(t),hu.bind(null,e)),e.callbackPriority=t,e.callbackNode=n}}function hu(e){if(au=-1,iu=ou=0,0!=(48&Nl))throw Error(i(327));var t=e.callbackNode;if(Iu()&&e.callbackNode!==t)return null;var n=Ft(e,e===Ol?Il:0);if(0===n)return null;var r=n,a=Nl;Nl|=16;var o=Eu();for(Ol===e&&Il===r||(Vl(),wu(e,r));;)try{xu();break}catch(t){Su(e,t)}if(Za(),_l.current=o,Nl=a,null!==Dl?r=0:(Ol=null,Il=0,r=Ll),0!=(Al&Ul))wu(e,0);else if(0!==r){if(2===r&&(Nl|=64,e.hydrate&&(e.hydrate=!1,Vr(e.containerInfo)),0!==(n=Ut(e))&&(r=Cu(e,n))),1===r)throw t=zl,wu(e,0),mu(e,n),pu(e,ja()),t;switch(e.finishedWork=e.current.alternate,e.finishedLanes=n,r){case 0:case 1:throw Error(i(345));case 2:Nu(e);break;case 3:if(mu(e,n),(62914560&n)===n&&10<(r=Bl+500-ja())){if(0!==Ft(e,0))break;if(((a=e.suspendedLanes)&n)!==n){su(),e.pingedLanes|=e.suspendedLanes&a;break}e.timeoutHandle=Br(Nu.bind(null,e),r);break}Nu(e);break;case 4:if(mu(e,n),(4186112&n)===n)break;for(r=e.eventTimes,a=-1;0<n;){var l=31-Vt(n);o=1<<l,(l=r[l])>a&&(a=l),n&=~o}if(n=a,10<(n=(120>(n=ja()-n)?120:480>n?480:1080>n?1080:1920>n?1920:3e3>n?3e3:4320>n?4320:1960*xl(n/1960))-n)){e.timeoutHandle=Br(Nu.bind(null,e),n);break}Nu(e);break;case 5:Nu(e);break;default:throw Error(i(329))}}return pu(e,ja()),e.callbackNode===t?hu.bind(null,e):null}function mu(e,t){for(t&=~jl,t&=~Ul,e.suspendedLanes|=t,e.pingedLanes&=~t,e=e.expirationTimes;0<t;){var n=31-Vt(t),r=1<<n;e[n]=-1,t&=~r}}function vu(e){if(0!=(48&Nl))throw Error(i(327));if(Iu(),e===Ol&&0!=(e.expiredLanes&Il)){var t=Il,n=Cu(e,t);0!=(Al&Ul)&&(n=Cu(e,t=Ft(e,t)))}else n=Cu(e,t=Ft(e,0));if(0!==e.tag&&2===n&&(Nl|=64,e.hydrate&&(e.hydrate=!1,Vr(e.containerInfo)),0!==(t=Ut(e))&&(n=Cu(e,t))),1===n)throw n=zl,wu(e,0),mu(e,t),pu(e,ja()),n;return e.finishedWork=e.current.alternate,e.finishedLanes=t,Nu(e),pu(e,ja()),null}function gu(e,t){var n=Nl;Nl|=1;try{return e(t)}finally{0===(Nl=n)&&(Vl(),$a())}}function yu(e,t){var n=Nl;Nl&=-2,Nl|=8;try{return e(t)}finally{0===(Nl=n)&&(Vl(),$a())}}function bu(e,t){ua(Rl,Ml),Ml|=t,Al|=t}function ku(){Ml=Rl.current,la(Rl)}function wu(e,t){e.finishedWork=null,e.finishedLanes=0;var n=e.timeoutHandle;if(-1!==n&&(e.timeoutHandle=-1,Hr(n)),null!==Dl)for(n=Dl.return;null!==n;){var r=n;switch(r.tag){case 1:null!=(r=r.type.childContextTypes)&&ma();break;case 3:Io(),la(fa),la(ca),Ko();break;case 5:Ro(r);break;case 4:Io();break;case 13:case 19:la(Lo);break;case 10:eo(r);break;case 23:case 24:ku()}n=n.return}Ol=e,Dl=Hu(e.current,null),Il=Ml=Al=t,Ll=0,zl=null,jl=Ul=Fl=0}function Su(e,t){for(;;){var n=Dl;try{if(Za(),Yo.current=Ni,ei){for(var r=Go.memoizedState;null!==r;){var a=r.queue;null!==a&&(a.pending=null),r=r.next}ei=!1}if(qo=0,Zo=Jo=Go=null,ti=!1,Pl.current=null,null===n||null===n.return){Ll=1,zl=t,Dl=null;break}e:{var o=e,i=n.return,l=n,u=t;if(t=Il,l.flags|=2048,l.firstEffect=l.lastEffect=null,null!==u&&"object"==typeof u&&"function"==typeof u.then){var s=u;if(0==(2&l.mode)){var c=l.alternate;c?(l.updateQueue=c.updateQueue,l.memoizedState=c.memoizedState,l.lanes=c.lanes):(l.updateQueue=null,l.memoizedState=null)}var f=0!=(1&Lo.current),d=i;do{var p;if(p=13===d.tag){var h=d.memoizedState;if(null!==h)p=null!==h.dehydrated;else{var m=d.memoizedProps;p=void 0!==m.fallback&&(!0!==m.unstable_avoidThisFallback||!f)}}if(p){var v=d.updateQueue;if(null===v){var g=new Set;g.add(s),d.updateQueue=g}else v.add(s);if(0==(2&d.mode)){if(d.flags|=64,l.flags|=16384,l.flags&=-2981,1===l.tag)if(null===l.alternate)l.tag=17;else{var y=lo(-1,1);y.tag=2,uo(l,y)}l.lanes|=1;break e}u=void 0,l=t;var b=o.pingCache;if(null===b?(b=o.pingCache=new ul,u=new Set,b.set(s,u)):void 0===(u=b.get(s))&&(u=new Set,b.set(s,u)),!u.has(l)){u.add(l);var k=Fu.bind(null,o,s,l);s.then(k,k)}d.flags|=4096,d.lanes=t;break e}d=d.return}while(null!==d);u=Error((K(l.type)||"A React component")+" suspended while rendering, but no fallback UI was specified.\n\nAdd a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.")}5!==Ll&&(Ll=2),u=il(u,l),d=i;do{switch(d.tag){case 3:o=u,d.flags|=4096,t&=-t,d.lanes|=t,so(d,sl(0,o,t));break e;case 1:o=u;var w=d.type,S=d.stateNode;if(0==(64&d.flags)&&("function"==typeof w.getDerivedStateFromError||null!==S&&"function"==typeof S.componentDidCatch&&(null===Xl||!Xl.has(S)))){d.flags|=4096,t&=-t,d.lanes|=t,so(d,cl(d,o,t));break e}}d=d.return}while(null!==d)}Pu(n)}catch(e){t=e,Dl===n&&null!==n&&(Dl=n=n.return);continue}break}}function Eu(){var e=_l.current;return _l.current=Ni,null===e?Ni:e}function Cu(e,t){var n=Nl;Nl|=16;var r=Eu();for(Ol===e&&Il===t||wu(e,t);;)try{Tu();break}catch(t){Su(e,t)}if(Za(),Nl=n,_l.current=r,null!==Dl)throw Error(i(261));return Ol=null,Il=0,Ll}function Tu(){for(;null!==Dl;)_u(Dl)}function xu(){for(;null!==Dl&&!Ta();)_u(Dl)}function _u(e){var t=$l(e.alternate,e,Ml);e.memoizedProps=e.pendingProps,null===t?Pu(e):Dl=t,Pl.current=null}function Pu(e){var t=e;do{var n=t.alternate;if(e=t.return,0==(2048&t.flags)){if(null!==(n=al(n,t,Ml)))return void(Dl=n);if(24!==(n=t).tag&&23!==n.tag||null===n.memoizedState||0!=(1073741824&Ml)||0==(4&n.mode)){for(var r=0,a=n.child;null!==a;)r|=a.lanes|a.childLanes,a=a.sibling;n.childLanes=r}null!==e&&0==(2048&e.flags)&&(null===e.firstEffect&&(e.firstEffect=t.firstEffect),null!==t.lastEffect&&(null!==e.lastEffect&&(e.lastEffect.nextEffect=t.firstEffect),e.lastEffect=t.lastEffect),1<t.flags&&(null!==e.lastEffect?e.lastEffect.nextEffect=t:e.firstEffect=t,e.lastEffect=t))}else{if(null!==(n=ol(t)))return n.flags&=2047,void(Dl=n);null!==e&&(e.firstEffect=e.lastEffect=null,e.flags|=2048)}if(null!==(t=t.sibling))return void(Dl=t);Dl=t=e}while(null!==t);0===Ll&&(Ll=5)}function Nu(e){var t=Wa();return Ha(99,Ou.bind(null,e,t)),null}function Ou(e,t){do{Iu()}while(null!==Gl);if(0!=(48&Nl))throw Error(i(327));var n=e.finishedWork;if(null===n)return null;if(e.finishedWork=null,e.finishedLanes=0,n===e.current)throw Error(i(177));e.callbackNode=null;var r=n.lanes|n.childLanes,a=r,o=e.pendingLanes&~a;e.pendingLanes=a,e.suspendedLanes=0,e.pingedLanes=0,e.expiredLanes&=a,e.mutableReadLanes&=a,e.entangledLanes&=a,a=e.entanglements;for(var l=e.eventTimes,u=e.expirationTimes;0<o;){var s=31-Vt(o),c=1<<s;a[s]=0,l[s]=-1,u[s]=-1,o&=~c}if(null!==tu&&0==(24&r)&&tu.has(e)&&tu.delete(e),e===Ol&&(Dl=Ol=null,Il=0),1<n.flags?null!==n.lastEffect?(n.lastEffect.nextEffect=n,r=n.firstEffect):r=n:r=n.firstEffect,null!==r){if(a=Nl,Nl|=32,Pl.current=null,Fr=Xt,hr(l=pr())){if("selectionStart"in l)u={start:l.selectionStart,end:l.selectionEnd};else e:if(u=(u=l.ownerDocument)&&u.defaultView||window,(c=u.getSelection&&u.getSelection())&&0!==c.rangeCount){u=c.anchorNode,o=c.anchorOffset,s=c.focusNode,c=c.focusOffset;try{u.nodeType,s.nodeType}catch(e){u=null;break e}var f=0,d=-1,p=-1,h=0,m=0,v=l,g=null;t:for(;;){for(var y;v!==u||0!==o&&3!==v.nodeType||(d=f+o),v!==s||0!==c&&3!==v.nodeType||(p=f+c),3===v.nodeType&&(f+=v.nodeValue.length),null!==(y=v.firstChild);)g=v,v=y;for(;;){if(v===l)break t;if(g===u&&++h===o&&(d=f),g===s&&++m===c&&(p=f),null!==(y=v.nextSibling))break;g=(v=g).parentNode}v=y}u=-1===d||-1===p?null:{start:d,end:p}}else u=null;u=u||{start:0,end:0}}else u=null;Ur={focusedElem:l,selectionRange:u},Xt=!1,lu=null,uu=!1,Ql=r;do{try{Du()}catch(e){if(null===Ql)throw Error(i(330));Au(Ql,e),Ql=Ql.nextEffect}}while(null!==Ql);lu=null,Ql=r;do{try{for(l=e;null!==Ql;){var b=Ql.flags;if(16&b&&ye(Ql.stateNode,""),128&b){var k=Ql.alternate;if(null!==k){var w=k.ref;null!==w&&("function"==typeof w?w(null):w.current=null)}}switch(1038&b){case 2:bl(Ql),Ql.flags&=-3;break;case 6:bl(Ql),Ql.flags&=-3,El(Ql.alternate,Ql);break;case 1024:Ql.flags&=-1025;break;case 1028:Ql.flags&=-1025,El(Ql.alternate,Ql);break;case 4:El(Ql.alternate,Ql);break;case 8:Sl(l,u=Ql);var S=u.alternate;gl(u),null!==S&&gl(S)}Ql=Ql.nextEffect}}catch(e){if(null===Ql)throw Error(i(330));Au(Ql,e),Ql=Ql.nextEffect}}while(null!==Ql);if(w=Ur,k=pr(),b=w.focusedElem,l=w.selectionRange,k!==b&&b&&b.ownerDocument&&dr(b.ownerDocument.documentElement,b)){null!==l&&hr(b)&&(k=l.start,void 0===(w=l.end)&&(w=k),"selectionStart"in b?(b.selectionStart=k,b.selectionEnd=Math.min(w,b.value.length)):(w=(k=b.ownerDocument||document)&&k.defaultView||window).getSelection&&(w=w.getSelection(),u=b.textContent.length,S=Math.min(l.start,u),l=void 0===l.end?S:Math.min(l.end,u),!w.extend&&S>l&&(u=l,l=S,S=u),u=fr(b,S),o=fr(b,l),u&&o&&(1!==w.rangeCount||w.anchorNode!==u.node||w.anchorOffset!==u.offset||w.focusNode!==o.node||w.focusOffset!==o.offset)&&((k=k.createRange()).setStart(u.node,u.offset),w.removeAllRanges(),S>l?(w.addRange(k),w.extend(o.node,o.offset)):(k.setEnd(o.node,o.offset),w.addRange(k))))),k=[];for(w=b;w=w.parentNode;)1===w.nodeType&&k.push({element:w,left:w.scrollLeft,top:w.scrollTop});for("function"==typeof b.focus&&b.focus(),b=0;b<k.length;b++)(w=k[b]).element.scrollLeft=w.left,w.element.scrollTop=w.top}Xt=!!Fr,Ur=Fr=null,e.current=n,Ql=r;do{try{for(b=e;null!==Ql;){var E=Ql.flags;if(36&E&&hl(b,Ql.alternate,Ql),128&E){k=void 0;var C=Ql.ref;if(null!==C){var T=Ql.stateNode;switch(Ql.tag){case 5:k=T;break;default:k=T}"function"==typeof C?C(k):C.current=k}}Ql=Ql.nextEffect}}catch(e){if(null===Ql)throw Error(i(330));Au(Ql,e),Ql=Ql.nextEffect}}while(null!==Ql);Ql=null,La(),Nl=a}else e.current=n;if(ql)ql=!1,Gl=e,Jl=t;else for(Ql=r;null!==Ql;)t=Ql.nextEffect,Ql.nextEffect=null,8&Ql.flags&&((E=Ql).sibling=null,E.stateNode=null),Ql=t;if(0===(r=e.pendingLanes)&&(Xl=null),1===r?e===ru?nu++:(nu=0,ru=e):nu=0,n=n.stateNode,wa&&"function"==typeof wa.onCommitFiberRoot)try{wa.onCommitFiberRoot(ka,n,void 0,64==(64&n.current.flags))}catch(e){}if(pu(e,ja()),Kl)throw Kl=!1,e=Yl,Yl=null,e;return 0!=(8&Nl)||$a(),null}function Du(){for(;null!==Ql;){var e=Ql.alternate;uu||null===lu||(0!=(8&Ql.flags)?et(Ql,lu)&&(uu=!0):13===Ql.tag&&Tl(e,Ql)&&et(Ql,lu)&&(uu=!0));var t=Ql.flags;0!=(256&t)&&pl(e,Ql),0==(512&t)||ql||(ql=!0,Va(97,(function(){return Iu(),null}))),Ql=Ql.nextEffect}}function Iu(){if(90!==Jl){var e=97<Jl?97:Jl;return Jl=90,Ha(e,Lu)}return!1}function Mu(e,t){Zl.push(t,e),ql||(ql=!0,Va(97,(function(){return Iu(),null})))}function Ru(e,t){eu.push(t,e),ql||(ql=!0,Va(97,(function(){return Iu(),null})))}function Lu(){if(null===Gl)return!1;var e=Gl;if(Gl=null,0!=(48&Nl))throw Error(i(331));var t=Nl;Nl|=32;var n=eu;eu=[];for(var r=0;r<n.length;r+=2){var a=n[r],o=n[r+1],l=a.destroy;if(a.destroy=void 0,"function"==typeof l)try{l()}catch(e){if(null===o)throw Error(i(330));Au(o,e)}}for(n=Zl,Zl=[],r=0;r<n.length;r+=2){a=n[r],o=n[r+1];try{var u=a.create;a.destroy=u()}catch(e){if(null===o)throw Error(i(330));Au(o,e)}}for(u=e.current.firstEffect;null!==u;)e=u.nextEffect,u.nextEffect=null,8&u.flags&&(u.sibling=null,u.stateNode=null),u=e;return Nl=t,$a(),!0}function zu(e,t,n){uo(e,t=sl(0,t=il(n,t),1)),t=su(),null!==(e=du(e,1))&&(Ht(e,1,t),pu(e,t))}function Au(e,t){if(3===e.tag)zu(e,e,t);else for(var n=e.return;null!==n;){if(3===n.tag){zu(n,e,t);break}if(1===n.tag){var r=n.stateNode;if("function"==typeof n.type.getDerivedStateFromError||"function"==typeof r.componentDidCatch&&(null===Xl||!Xl.has(r))){var a=cl(n,e=il(t,e),1);if(uo(n,a),a=su(),null!==(n=du(n,1)))Ht(n,1,a),pu(n,a);else if("function"==typeof r.componentDidCatch&&(null===Xl||!Xl.has(r)))try{r.componentDidCatch(t,e)}catch(e){}break}}n=n.return}}function Fu(e,t,n){var r=e.pingCache;null!==r&&r.delete(t),t=su(),e.pingedLanes|=e.suspendedLanes&n,Ol===e&&(Il&n)===n&&(4===Ll||3===Ll&&(62914560&Il)===Il&&500>ja()-Bl?wu(e,0):jl|=n),pu(e,t)}function Uu(e,t){var n=e.stateNode;null!==n&&n.delete(t),0===(t=0)&&(0==(2&(t=e.mode))?t=1:0==(4&t)?t=99===Wa()?1:2:(0===ou&&(ou=Al),0===(t=Wt(62914560&~ou))&&(t=4194304))),n=su(),null!==(e=du(e,t))&&(Ht(e,t,n),pu(e,n))}function ju(e,t,n,r){this.tag=e,this.key=n,this.sibling=this.child=this.return=this.stateNode=this.type=this.elementType=null,this.index=0,this.ref=null,this.pendingProps=t,this.dependencies=this.memoizedState=this.updateQueue=this.memoizedProps=null,this.mode=r,this.flags=0,this.lastEffect=this.firstEffect=this.nextEffect=null,this.childLanes=this.lanes=0,this.alternate=null}function Wu(e,t,n,r){return new ju(e,t,n,r)}function Bu(e){return!(!(e=e.prototype)||!e.isReactComponent)}function Hu(e,t){var n=e.alternate;return null===n?((n=Wu(e.tag,t,e.key,e.mode)).elementType=e.elementType,n.type=e.type,n.stateNode=e.stateNode,n.alternate=e,e.alternate=n):(n.pendingProps=t,n.type=e.type,n.flags=0,n.nextEffect=null,n.firstEffect=null,n.lastEffect=null),n.childLanes=e.childLanes,n.lanes=e.lanes,n.child=e.child,n.memoizedProps=e.memoizedProps,n.memoizedState=e.memoizedState,n.updateQueue=e.updateQueue,t=e.dependencies,n.dependencies=null===t?null:{lanes:t.lanes,firstContext:t.firstContext},n.sibling=e.sibling,n.index=e.index,n.ref=e.ref,n}function Vu(e,t,n,r,a,o){var l=2;if(r=e,"function"==typeof e)Bu(e)&&(l=1);else if("string"==typeof e)l=5;else e:switch(e){case C:return $u(n.children,a,o,t);case z:l=8,a|=16;break;case T:l=8,a|=1;break;case x:return(e=Wu(12,n,t,8|a)).elementType=x,e.type=x,e.lanes=o,e;case O:return(e=Wu(13,n,t,a)).type=O,e.elementType=O,e.lanes=o,e;case D:return(e=Wu(19,n,t,a)).elementType=D,e.lanes=o,e;case A:return Qu(n,a,o,t);case F:return(e=Wu(24,n,t,a)).elementType=F,e.lanes=o,e;default:if("object"==typeof e&&null!==e)switch(e.$$typeof){case _:l=10;break e;case P:l=9;break e;case N:l=11;break e;case I:l=14;break e;case M:l=16,r=null;break e;case R:l=22;break e}throw Error(i(130,null==e?e:typeof e,""))}return(t=Wu(l,n,t,a)).elementType=e,t.type=r,t.lanes=o,t}function $u(e,t,n,r){return(e=Wu(7,e,r,t)).lanes=n,e}function Qu(e,t,n,r){return(e=Wu(23,e,r,t)).elementType=A,e.lanes=n,e}function Ku(e,t,n){return(e=Wu(6,e,null,t)).lanes=n,e}function Yu(e,t,n){return(t=Wu(4,null!==e.children?e.children:[],e.key,t)).lanes=n,t.stateNode={containerInfo:e.containerInfo,pendingChildren:null,implementation:e.implementation},t}function Xu(e,t,n){this.tag=t,this.containerInfo=e,this.finishedWork=this.pingCache=this.current=this.pendingChildren=null,this.timeoutHandle=-1,this.pendingContext=this.context=null,this.hydrate=n,this.callbackNode=null,this.callbackPriority=0,this.eventTimes=Bt(0),this.expirationTimes=Bt(-1),this.entangledLanes=this.finishedLanes=this.mutableReadLanes=this.expiredLanes=this.pingedLanes=this.suspendedLanes=this.pendingLanes=0,this.entanglements=Bt(0),this.mutableSourceEagerHydrationData=null}function qu(e,t,n){var r=3<arguments.length&&void 0!==arguments[3]?arguments[3]:null;return{$$typeof:E,key:null==r?null:""+r,children:e,containerInfo:t,implementation:n}}function Gu(e,t,n,r){var a=t.current,o=su(),l=cu(a);e:if(n){t:{if(qe(n=n._reactInternals)!==n||1!==n.tag)throw Error(i(170));var u=n;do{switch(u.tag){case 3:u=u.stateNode.context;break t;case 1:if(ha(u.type)){u=u.stateNode.__reactInternalMemoizedMergedChildContext;break t}}u=u.return}while(null!==u);throw Error(i(171))}if(1===n.tag){var s=n.type;if(ha(s)){n=ga(n,s,u);break e}}n=u}else n=sa;return null===t.context?t.context=n:t.pendingContext=n,(t=lo(o,l)).payload={element:e},null!==(r=void 0===r?null:r)&&(t.callback=r),uo(a,t),fu(a,l,o),l}function Ju(e){if(!(e=e.current).child)return null;switch(e.child.tag){case 5:default:return e.child.stateNode}}function Zu(e,t){if(null!==(e=e.memoizedState)&&null!==e.dehydrated){var n=e.retryLane;e.retryLane=0!==n&&n<t?n:t}}function es(e,t){Zu(e,t),(e=e.alternate)&&Zu(e,t)}function ts(e,t,n){var r=null!=n&&null!=n.hydrationOptions&&n.hydrationOptions.mutableSources||null;if(n=new Xu(e,t,null!=n&&!0===n.hydrate),t=Wu(3,null,null,2===t?7:1===t?3:0),n.current=t,t.stateNode=n,oo(t),e[Gr]=n.current,Nr(8===e.nodeType?e.parentNode:e),r)for(e=0;e<r.length;e++){var a=(t=r[e])._getVersion;a=a(t._source),null==n.mutableSourceEagerHydrationData?n.mutableSourceEagerHydrationData=[t,a]:n.mutableSourceEagerHydrationData.push(t,a)}this._internalRoot=n}function ns(e){return!(!e||1!==e.nodeType&&9!==e.nodeType&&11!==e.nodeType&&(8!==e.nodeType||" react-mount-point-unstable "!==e.nodeValue))}function rs(e,t,n,r,a){var o=n._reactRootContainer;if(o){var i=o._internalRoot;if("function"==typeof a){var l=a;a=function(){var e=Ju(i);l.call(e)}}Gu(t,i,e,a)}else{if(o=n._reactRootContainer=function(e,t){if(t||(t=!(!(t=e?9===e.nodeType?e.documentElement:e.firstChild:null)||1!==t.nodeType||!t.hasAttribute("data-reactroot"))),!t)for(var n;n=e.lastChild;)e.removeChild(n);return new ts(e,0,t?{hydrate:!0}:void 0)}(n,r),i=o._internalRoot,"function"==typeof a){var u=a;a=function(){var e=Ju(i);u.call(e)}}yu((function(){Gu(t,i,e,a)}))}return Ju(i)}function as(e,t){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;if(!ns(t))throw Error(i(200));return qu(e,t,null,n)}$l=function(e,t,n){var r=t.lanes;if(null!==e)if(e.memoizedProps!==t.pendingProps||fa.current)Ri=!0;else{if(0==(n&r)){switch(Ri=!1,t.tag){case 3:Vi(t),$o();break;case 5:Mo(t);break;case 1:ha(t.type)&&ya(t);break;case 4:Do(t,t.stateNode.containerInfo);break;case 10:r=t.memoizedProps.value;var a=t.type._context;ua(Xa,a._currentValue),a._currentValue=r;break;case 13:if(null!==t.memoizedState)return 0!=(n&t.child.childLanes)?Xi(e,t,n):(ua(Lo,1&Lo.current),null!==(t=nl(e,t,n))?t.sibling:null);ua(Lo,1&Lo.current);break;case 19:if(r=0!=(n&t.childLanes),0!=(64&e.flags)){if(r)return tl(e,t,n);t.flags|=64}if(null!==(a=t.memoizedState)&&(a.rendering=null,a.tail=null,a.lastEffect=null),ua(Lo,Lo.current),r)break;return null;case 23:case 24:return t.lanes=0,Ui(e,t,n)}return nl(e,t,n)}Ri=0!=(16384&e.flags)}else Ri=!1;switch(t.lanes=0,t.tag){case 2:if(r=t.type,null!==e&&(e.alternate=null,t.alternate=null,t.flags|=2),e=t.pendingProps,a=pa(t,ca.current),no(t,n),a=ai(null,t,r,e,a,n),t.flags|=1,"object"==typeof a&&null!==a&&"function"==typeof a.render&&void 0===a.$$typeof){if(t.tag=1,t.memoizedState=null,t.updateQueue=null,ha(r)){var o=!0;ya(t)}else o=!1;t.memoizedState=null!==a.state&&void 0!==a.state?a.state:null,oo(t);var l=r.getDerivedStateFromProps;"function"==typeof l&&ho(t,r,l,e),a.updater=mo,t.stateNode=a,a._reactInternals=t,bo(t,r,e,n),t=Hi(null,t,r,!0,o,n)}else t.tag=0,Li(null,t,a,n),t=t.child;return t;case 16:a=t.elementType;e:{switch(null!==e&&(e.alternate=null,t.alternate=null,t.flags|=2),e=t.pendingProps,a=(o=a._init)(a._payload),t.type=a,o=t.tag=function(e){if("function"==typeof e)return Bu(e)?1:0;if(null!=e){if((e=e.$$typeof)===N)return 11;if(e===I)return 14}return 2}(a),e=Ya(a,e),o){case 0:t=Wi(null,t,a,e,n);break e;case 1:t=Bi(null,t,a,e,n);break e;case 11:t=zi(null,t,a,e,n);break e;case 14:t=Ai(null,t,a,Ya(a.type,e),r,n);break e}throw Error(i(306,a,""))}return t;case 0:return r=t.type,a=t.pendingProps,Wi(e,t,r,a=t.elementType===r?a:Ya(r,a),n);case 1:return r=t.type,a=t.pendingProps,Bi(e,t,r,a=t.elementType===r?a:Ya(r,a),n);case 3:if(Vi(t),r=t.updateQueue,null===e||null===r)throw Error(i(282));if(r=t.pendingProps,a=null!==(a=t.memoizedState)?a.element:null,io(e,t),co(t,r,null,n),(r=t.memoizedState.element)===a)$o(),t=nl(e,t,n);else{if((o=(a=t.stateNode).hydrate)&&(Fo=$r(t.stateNode.containerInfo.firstChild),Ao=t,o=Uo=!0),o){if(null!=(e=a.mutableSourceEagerHydrationData))for(a=0;a<e.length;a+=2)(o=e[a])._workInProgressVersionPrimary=e[a+1],Qo.push(o);for(n=To(t,null,r,n),t.child=n;n;)n.flags=-3&n.flags|1024,n=n.sibling}else Li(e,t,r,n),$o();t=t.child}return t;case 5:return Mo(t),null===e&&Bo(t),r=t.type,a=t.pendingProps,o=null!==e?e.memoizedProps:null,l=a.children,Wr(r,a)?l=null:null!==o&&Wr(r,o)&&(t.flags|=16),ji(e,t),Li(e,t,l,n),t.child;case 6:return null===e&&Bo(t),null;case 13:return Xi(e,t,n);case 4:return Do(t,t.stateNode.containerInfo),r=t.pendingProps,null===e?t.child=Co(t,null,r,n):Li(e,t,r,n),t.child;case 11:return r=t.type,a=t.pendingProps,zi(e,t,r,a=t.elementType===r?a:Ya(r,a),n);case 7:return Li(e,t,t.pendingProps,n),t.child;case 8:case 12:return Li(e,t,t.pendingProps.children,n),t.child;case 10:e:{r=t.type._context,a=t.pendingProps,l=t.memoizedProps,o=a.value;var u=t.type._context;if(ua(Xa,u._currentValue),u._currentValue=o,null!==l)if(u=l.value,0===(o=lr(u,o)?0:0|("function"==typeof r._calculateChangedBits?r._calculateChangedBits(u,o):1073741823))){if(l.children===a.children&&!fa.current){t=nl(e,t,n);break e}}else for(null!==(u=t.child)&&(u.return=t);null!==u;){var s=u.dependencies;if(null!==s){l=u.child;for(var c=s.firstContext;null!==c;){if(c.context===r&&0!=(c.observedBits&o)){1===u.tag&&((c=lo(-1,n&-n)).tag=2,uo(u,c)),u.lanes|=n,null!==(c=u.alternate)&&(c.lanes|=n),to(u.return,n),s.lanes|=n;break}c=c.next}}else l=10===u.tag&&u.type===t.type?null:u.child;if(null!==l)l.return=u;else for(l=u;null!==l;){if(l===t){l=null;break}if(null!==(u=l.sibling)){u.return=l.return,l=u;break}l=l.return}u=l}Li(e,t,a.children,n),t=t.child}return t;case 9:return a=t.type,r=(o=t.pendingProps).children,no(t,n),r=r(a=ro(a,o.unstable_observedBits)),t.flags|=1,Li(e,t,r,n),t.child;case 14:return o=Ya(a=t.type,t.pendingProps),Ai(e,t,a,o=Ya(a.type,o),r,n);case 15:return Fi(e,t,t.type,t.pendingProps,r,n);case 17:return r=t.type,a=t.pendingProps,a=t.elementType===r?a:Ya(r,a),null!==e&&(e.alternate=null,t.alternate=null,t.flags|=2),t.tag=1,ha(r)?(e=!0,ya(t)):e=!1,no(t,n),go(t,r,a),bo(t,r,a,n),Hi(null,t,r,!0,e,n);case 19:return tl(e,t,n);case 23:case 24:return Ui(e,t,n)}throw Error(i(156,t.tag))},ts.prototype.render=function(e){Gu(e,this._internalRoot,null,null)},ts.prototype.unmount=function(){var e=this._internalRoot,t=e.containerInfo;Gu(null,e,null,(function(){t[Gr]=null}))},tt=function(e){13===e.tag&&(fu(e,4,su()),es(e,4))},nt=function(e){13===e.tag&&(fu(e,67108864,su()),es(e,67108864))},rt=function(e){if(13===e.tag){var t=su(),n=cu(e);fu(e,n,t),es(e,n)}},at=function(e,t){return t()},_e=function(e,t,n){switch(t){case"input":if(ne(e,n),t=n.name,"radio"===n.type&&null!=t){for(n=e;n.parentNode;)n=n.parentNode;for(n=n.querySelectorAll("input[name="+JSON.stringify(""+t)+'][type="radio"]'),t=0;t<n.length;t++){var r=n[t];if(r!==e&&r.form===e.form){var a=na(r);if(!a)throw Error(i(90));G(r),ne(r,a)}}}break;case"textarea":se(e,n);break;case"select":null!=(t=n.value)&&ie(e,!!n.multiple,t,!1)}},Me=gu,Re=function(e,t,n,r,a){var o=Nl;Nl|=4;try{return Ha(98,e.bind(null,t,n,r,a))}finally{0===(Nl=o)&&(Vl(),$a())}},Le=function(){0==(49&Nl)&&(function(){if(null!==tu){var e=tu;tu=null,e.forEach((function(e){e.expiredLanes|=24&e.pendingLanes,pu(e,ja())}))}$a()}(),Iu())},ze=function(e,t){var n=Nl;Nl|=2;try{return e(t)}finally{0===(Nl=n)&&(Vl(),$a())}};var os={Events:[ea,ta,na,De,Ie,Iu,{current:!1}]},is={findFiberByHostInstance:Zr,bundleType:0,version:"17.0.2",rendererPackageName:"react-dom"},ls={bundleType:is.bundleType,version:is.version,rendererPackageName:is.rendererPackageName,rendererConfig:is.rendererConfig,overrideHookState:null,overrideHookStateDeletePath:null,overrideHookStateRenamePath:null,overrideProps:null,overridePropsDeletePath:null,overridePropsRenamePath:null,setSuspenseHandler:null,scheduleUpdate:null,currentDispatcherRef:w.ReactCurrentDispatcher,findHostInstanceByFiber:function(e){return null===(e=Ze(e))?null:e.stateNode},findFiberByHostInstance:is.findFiberByHostInstance||function(){return null},findHostInstancesForRefresh:null,scheduleRefresh:null,scheduleRoot:null,setRefreshHandler:null,getCurrentFiber:null};if("undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__){var us=__REACT_DEVTOOLS_GLOBAL_HOOK__;if(!us.isDisabled&&us.supportsFiber)try{ka=us.inject(ls),wa=us}catch(ve){}}t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=os,t.createPortal=as,t.findDOMNode=function(e){if(null==e)return null;if(1===e.nodeType)return e;var t=e._reactInternals;if(void 0===t){if("function"==typeof e.render)throw Error(i(188));throw Error(i(268,Object.keys(e)))}return e=null===(e=Ze(t))?null:e.stateNode},t.flushSync=function(e,t){var n=Nl;if(0!=(48&n))return e(t);Nl|=1;try{if(e)return Ha(99,e.bind(null,t))}finally{Nl=n,$a()}},t.hydrate=function(e,t,n){if(!ns(t))throw Error(i(200));return rs(null,e,t,!0,n)},t.render=function(e,t,n){if(!ns(t))throw Error(i(200));return rs(null,e,t,!1,n)},t.unmountComponentAtNode=function(e){if(!ns(e))throw Error(i(40));return!!e._reactRootContainer&&(yu((function(){rs(null,null,e,!1,(function(){e._reactRootContainer=null,e[Gr]=null}))})),!0)},t.unstable_batchedUpdates=gu,t.unstable_createPortal=function(e,t){return as(e,t,2<arguments.length&&void 0!==arguments[2]?arguments[2]:null)},t.unstable_renderSubtreeIntoContainer=function(e,t,n,r){if(!ns(n))throw Error(i(200));if(null==e||void 0===e._reactInternals)throw Error(i(38));return rs(e,t,n,!1,r)},t.version="17.0.2"},935:(e,t,n)=>{"use strict";!function e(){if("undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&"function"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE)try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(e)}catch(e){console.error(e)}}(),e.exports=n(448)},408:(e,t,n)=>{"use strict";var r=n(418),a=60103,o=60106;t.Fragment=60107,t.StrictMode=60108,t.Profiler=60114;var i=60109,l=60110,u=60112;t.Suspense=60113;var s=60115,c=60116;if("function"==typeof Symbol&&Symbol.for){var f=Symbol.for;a=f("react.element"),o=f("react.portal"),t.Fragment=f("react.fragment"),t.StrictMode=f("react.strict_mode"),t.Profiler=f("react.profiler"),i=f("react.provider"),l=f("react.context"),u=f("react.forward_ref"),t.Suspense=f("react.suspense"),s=f("react.memo"),c=f("react.lazy")}var d="function"==typeof Symbol&&Symbol.iterator;function p(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n<arguments.length;n++)t+="&args[]="+encodeURIComponent(arguments[n]);return"Minified React error #"+e+"; visit "+t+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}var h={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},m={};function v(e,t,n){this.props=e,this.context=t,this.refs=m,this.updater=n||h}function g(){}function y(e,t,n){this.props=e,this.context=t,this.refs=m,this.updater=n||h}v.prototype.isReactComponent={},v.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error(p(85));this.updater.enqueueSetState(this,e,t,"setState")},v.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},g.prototype=v.prototype;var b=y.prototype=new g;b.constructor=y,r(b,v.prototype),b.isPureReactComponent=!0;var k={current:null},w=Object.prototype.hasOwnProperty,S={key:!0,ref:!0,__self:!0,__source:!0};function E(e,t,n){var r,o={},i=null,l=null;if(null!=t)for(r in void 0!==t.ref&&(l=t.ref),void 0!==t.key&&(i=""+t.key),t)w.call(t,r)&&!S.hasOwnProperty(r)&&(o[r]=t[r]);var u=arguments.length-2;if(1===u)o.children=n;else if(1<u){for(var s=Array(u),c=0;c<u;c++)s[c]=arguments[c+2];o.children=s}if(e&&e.defaultProps)for(r in u=e.defaultProps)void 0===o[r]&&(o[r]=u[r]);return{$$typeof:a,type:e,key:i,ref:l,props:o,_owner:k.current}}function C(e){return"object"==typeof e&&null!==e&&e.$$typeof===a}var T=/\/+/g;function x(e,t){return"object"==typeof e&&null!==e&&null!=e.key?function(e){var t={"=":"=0",":":"=2"};return"$"+e.replace(/[=:]/g,(function(e){return t[e]}))}(""+e.key):t.toString(36)}function _(e,t,n,r,i){var l=typeof e;"undefined"!==l&&"boolean"!==l||(e=null);var u=!1;if(null===e)u=!0;else switch(l){case"string":case"number":u=!0;break;case"object":switch(e.$$typeof){case a:case o:u=!0}}if(u)return i=i(u=e),e=""===r?"."+x(u,0):r,Array.isArray(i)?(n="",null!=e&&(n=e.replace(T,"$&/")+"/"),_(i,t,n,"",(function(e){return e}))):null!=i&&(C(i)&&(i=function(e,t){return{$$typeof:a,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}(i,n+(!i.key||u&&u.key===i.key?"":(""+i.key).replace(T,"$&/")+"/")+e)),t.push(i)),1;if(u=0,r=""===r?".":r+":",Array.isArray(e))for(var s=0;s<e.length;s++){var c=r+x(l=e[s],s);u+=_(l,t,n,c,i)}else if("function"==typeof(c=function(e){return null===e||"object"!=typeof e?null:"function"==typeof(e=d&&e[d]||e["@@iterator"])?e:null}(e)))for(e=c.call(e),s=0;!(l=e.next()).done;)u+=_(l=l.value,t,n,c=r+x(l,s++),i);else if("object"===l)throw t=""+e,Error(p(31,"[object Object]"===t?"object with keys {"+Object.keys(e).join(", ")+"}":t));return u}function P(e,t,n){if(null==e)return e;var r=[],a=0;return _(e,r,"","",(function(e){return t.call(n,e,a++)})),r}function N(e){if(-1===e._status){var t=e._result;t=t(),e._status=0,e._result=t,t.then((function(t){0===e._status&&(t=t.default,e._status=1,e._result=t)}),(function(t){0===e._status&&(e._status=2,e._result=t)}))}if(1===e._status)return e._result;throw e._result}var O={current:null};function D(){var e=O.current;if(null===e)throw Error(p(321));return e}var I={ReactCurrentDispatcher:O,ReactCurrentBatchConfig:{transition:0},ReactCurrentOwner:k,IsSomeRendererActing:{current:!1},assign:r};t.Children={map:P,forEach:function(e,t,n){P(e,(function(){t.apply(this,arguments)}),n)},count:function(e){var t=0;return P(e,(function(){t++})),t},toArray:function(e){return P(e,(function(e){return e}))||[]},only:function(e){if(!C(e))throw Error(p(143));return e}},t.Component=v,t.PureComponent=y,t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=I,t.cloneElement=function(e,t,n){if(null==e)throw Error(p(267,e));var o=r({},e.props),i=e.key,l=e.ref,u=e._owner;if(null!=t){if(void 0!==t.ref&&(l=t.ref,u=k.current),void 0!==t.key&&(i=""+t.key),e.type&&e.type.defaultProps)var s=e.type.defaultProps;for(c in t)w.call(t,c)&&!S.hasOwnProperty(c)&&(o[c]=void 0===t[c]&&void 0!==s?s[c]:t[c])}var c=arguments.length-2;if(1===c)o.children=n;else if(1<c){s=Array(c);for(var f=0;f<c;f++)s[f]=arguments[f+2];o.children=s}return{$$typeof:a,type:e.type,key:i,ref:l,props:o,_owner:u}},t.createContext=function(e,t){return void 0===t&&(t=null),(e={$$typeof:l,_calculateChangedBits:t,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null}).Provider={$$typeof:i,_context:e},e.Consumer=e},t.createElement=E,t.createFactory=function(e){var t=E.bind(null,e);return t.type=e,t},t.createRef=function(){return{current:null}},t.forwardRef=function(e){return{$$typeof:u,render:e}},t.isValidElement=C,t.lazy=function(e){return{$$typeof:c,_payload:{_status:-1,_result:e},_init:N}},t.memo=function(e,t){return{$$typeof:s,type:e,compare:void 0===t?null:t}},t.useCallback=function(e,t){return D().useCallback(e,t)},t.useContext=function(e,t){return D().useContext(e,t)},t.useDebugValue=function(){},t.useEffect=function(e,t){return D().useEffect(e,t)},t.useImperativeHandle=function(e,t,n){return D().useImperativeHandle(e,t,n)},t.useLayoutEffect=function(e,t){return D().useLayoutEffect(e,t)},t.useMemo=function(e,t){return D().useMemo(e,t)},t.useReducer=function(e,t,n){return D().useReducer(e,t,n)},t.useRef=function(e){return D().useRef(e)},t.useState=function(e){return D().useState(e)},t.version="17.0.2"},294:(e,t,n)=>{"use strict";e.exports=n(408)},53:(e,t)=>{"use strict";var n,r,a,o;if("object"==typeof performance&&"function"==typeof performance.now){var i=performance;t.unstable_now=function(){return i.now()}}else{var l=Date,u=l.now();t.unstable_now=function(){return l.now()-u}}if("undefined"==typeof window||"function"!=typeof MessageChannel){var s=null,c=null,f=function(){if(null!==s)try{var e=t.unstable_now();s(!0,e),s=null}catch(e){throw setTimeout(f,0),e}};n=function(e){null!==s?setTimeout(n,0,e):(s=e,setTimeout(f,0))},r=function(e,t){c=setTimeout(e,t)},a=function(){clearTimeout(c)},t.unstable_shouldYield=function(){return!1},o=t.unstable_forceFrameRate=function(){}}else{var d=window.setTimeout,p=window.clearTimeout;if("undefined"!=typeof console){var h=window.cancelAnimationFrame;"function"!=typeof window.requestAnimationFrame&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills"),"function"!=typeof h&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills")}var m=!1,v=null,g=-1,y=5,b=0;t.unstable_shouldYield=function(){return t.unstable_now()>=b},o=function(){},t.unstable_forceFrameRate=function(e){0>e||125<e?console.error("forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported"):y=0<e?Math.floor(1e3/e):5};var k=new MessageChannel,w=k.port2;k.port1.onmessage=function(){if(null!==v){var e=t.unstable_now();b=e+y;try{v(!0,e)?w.postMessage(null):(m=!1,v=null)}catch(e){throw w.postMessage(null),e}}else m=!1},n=function(e){v=e,m||(m=!0,w.postMessage(null))},r=function(e,n){g=d((function(){e(t.unstable_now())}),n)},a=function(){p(g),g=-1}}function S(e,t){var n=e.length;e.push(t);e:for(;;){var r=n-1>>>1,a=e[r];if(!(void 0!==a&&0<T(a,t)))break e;e[r]=t,e[n]=a,n=r}}function E(e){return void 0===(e=e[0])?null:e}function C(e){var t=e[0];if(void 0!==t){var n=e.pop();if(n!==t){e[0]=n;e:for(var r=0,a=e.length;r<a;){var o=2*(r+1)-1,i=e[o],l=o+1,u=e[l];if(void 0!==i&&0>T(i,n))void 0!==u&&0>T(u,i)?(e[r]=u,e[l]=n,r=l):(e[r]=i,e[o]=n,r=o);else{if(!(void 0!==u&&0>T(u,n)))break e;e[r]=u,e[l]=n,r=l}}}return t}return null}function T(e,t){var n=e.sortIndex-t.sortIndex;return 0!==n?n:e.id-t.id}var x=[],_=[],P=1,N=null,O=3,D=!1,I=!1,M=!1;function R(e){for(var t=E(_);null!==t;){if(null===t.callback)C(_);else{if(!(t.startTime<=e))break;C(_),t.sortIndex=t.expirationTime,S(x,t)}t=E(_)}}function L(e){if(M=!1,R(e),!I)if(null!==E(x))I=!0,n(z);else{var t=E(_);null!==t&&r(L,t.startTime-e)}}function z(e,n){I=!1,M&&(M=!1,a()),D=!0;var o=O;try{for(R(n),N=E(x);null!==N&&(!(N.expirationTime>n)||e&&!t.unstable_shouldYield());){var i=N.callback;if("function"==typeof i){N.callback=null,O=N.priorityLevel;var l=i(N.expirationTime<=n);n=t.unstable_now(),"function"==typeof l?N.callback=l:N===E(x)&&C(x),R(n)}else C(x);N=E(x)}if(null!==N)var u=!0;else{var s=E(_);null!==s&&r(L,s.startTime-n),u=!1}return u}finally{N=null,O=o,D=!1}}var A=o;t.unstable_IdlePriority=5,t.unstable_ImmediatePriority=1,t.unstable_LowPriority=4,t.unstable_NormalPriority=3,t.unstable_Profiling=null,t.unstable_UserBlockingPriority=2,t.unstable_cancelCallback=function(e){e.callback=null},t.unstable_continueExecution=function(){I||D||(I=!0,n(z))},t.unstable_getCurrentPriorityLevel=function(){return O},t.unstable_getFirstCallbackNode=function(){return E(x)},t.unstable_next=function(e){switch(O){case 1:case 2:case 3:var t=3;break;default:t=O}var n=O;O=t;try{return e()}finally{O=n}},t.unstable_pauseExecution=function(){},t.unstable_requestPaint=A,t.unstable_runWithPriority=function(e,t){switch(e){case 1:case 2:case 3:case 4:case 5:break;default:e=3}var n=O;O=e;try{return t()}finally{O=n}},t.unstable_scheduleCallback=function(e,o,i){var l=t.unstable_now();switch("object"==typeof i&&null!==i?i="number"==typeof(i=i.delay)&&0<i?l+i:l:i=l,e){case 1:var u=-1;break;case 2:u=250;break;case 5:u=1073741823;break;case 4:u=1e4;break;default:u=5e3}return e={id:P++,callback:o,priorityLevel:e,startTime:i,expirationTime:u=i+u,sortIndex:-1},i>l?(e.sortIndex=i,S(_,e),null===E(x)&&e===E(_)&&(M?a():M=!0,r(L,i-l))):(e.sortIndex=u,S(x,e),I||D||(I=!0,n(z))),e},t.unstable_wrapCallback=function(e){var t=O;return function(){var n=O;O=t;try{return e.apply(this,arguments)}finally{O=n}}}},840:(e,t,n)=>{"use strict";e.exports=n(53)}},t={};function n(r){if(t[r])return t[r].exports;var a=t[r]={exports:{}};return e[r](a,a.exports,n),a.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{"use strict";function e(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function t(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function r(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}function a(e,t){return(a=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&a(e,t)}function i(e){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function l(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function u(e,t){return!t||"object"!==i(t)&&"function"!=typeof t?l(e):t}function s(e){return(s=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var c=n(294),f=n(935);function d(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var p=function(){function t(n){e(this,t),this.rawString=n,this.completed=t.AllowedPrefixes.test(n),this.completed||n.startsWith(t.OpenPrefix)||(this.rawString=t.OpenPrefix+this.rawString)}return r(t,[{key:"content",get:function(){return this.rawString.replace(t.OpenPrefix,"").replace(t.AllowedPrefixes,"")}},{key:"isEmpty",value:function(){return 0==this.content.replace(/ /g,"").length}},{key:"toggleStatus",value:function(){this.completed=!this.completed,this.updateRawString()}},{key:"markCompleted",value:function(){this.completed=!0,this.updateRawString()}},{key:"markOpen",value:function(){this.completed=!1,this.updateRawString()}},{key:"setContentString",value:function(e){this.rawString=e,this.completed?this.rawString=t.CompletedPrefix+this.rawString:this.rawString=t.OpenPrefix+this.rawString}},{key:"updateRawString",value:function(){this.completed?this.rawString=this.rawString.replace(t.OpenPrefix,t.CompletedPrefix):this.rawString=this.rawString.replace(t.AllowedPrefixes,t.OpenPrefix)}}]),t}();d(p,"OpenPrefix","- [ ] "),d(p,"AllowedPrefixes",/^- \[x\] /i),d(p,"CompletedPrefix","- [x] ");var h=n(156),m=n.n(h),v=function(){function t(){e(this,t),d(this,"spellcheckEnabled",!0)}return r(t,[{key:"initiateBridge",value:function(){var e=this;this.componentRelay=new(m())({targetWindow:window,permissions:[{name:"stream-context-item"}],onReady:function(){e.onReady&&e.onReady()}}),this.componentRelay.streamContextItem((function(t){e.note=t,t.isMetadataUpdate||(e.dataString=t.content.text,e.unsavedTask=t.content.unsavedTask,e.reloadData(),e.dataChangeHandler&&e.dataChangeHandler(e.tasks),e.spellcheckEnabled=JSON.stringify(t.content.spellcheck))}))}},{key:"getPlatform",value:function(){return this.componentRelay.platform}},{key:"isMobile",value:function(){return this.componentRelay&&this.componentRelay.isRunningInMobileApplication()}},{key:"showTutorial",get:function(){return void 0===this.componentRelay.getComponentDataValueForKey("showTutorial")}},{key:"setOnReady",value:function(e){this.onReady=e}},{key:"setDataChangeHandler",value:function(e){this.dataChangeHandler=e}},{key:"parseRawTasksString",value:function(e){var t=this;return e||(e=""),e.split("\n").filter((function(e){return e.replace(/ /g,"").length>0})).map((function(e){return t.createTask(e)}))}},{key:"keyForTask",value:function(e){return this.tasks.indexOf(e)+e.rawString}},{key:"reloadData",value:function(){this.tasks=this.parseRawTasksString(this.dataString)}},{key:"getTasks",value:function(){return this.tasks||this.reloadData(),this.tasks}},{key:"createTask",value:function(e){return new p(e)}},{key:"addTask",value:function(e){this.tasks.unshift(e),this.save(),this.reloadData()}},{key:"setUnsavedTask",value:function(e){this.unsavedTask=e}},{key:"completedTasks",value:function(){return this.tasks.filter((function(e){return 1==e.completed}))}},{key:"openTasks",value:function(e){e.forEach((function(e){e.markOpen()})),this.tasks=this.categorizedTasks.openTasks.concat(e)}},{key:"removeTasks",value:function(e){this.tasks=this.tasks.filter((function(t){return!e.includes(t)}))}},{key:"splitTasks",value:function(){var e=this.getTasks(),t=[],n=[];return e.forEach((function(e){e.completed?n.push(e):t.push(e)})),this.tasks=t.concat(n),this.categorizedTasks={unsavedTask:this.unsavedTask,openTasks:t,completedTasks:n},this.categorizedTasks}},{key:"moveTaskToTop",value:function(e){this.tasks.splice(this.tasks.indexOf(e),1),this.tasks.unshift(e)}},{key:"changeTaskPosition",value:function(e,t){var n=this.tasks.indexOf(e),r=this.tasks.indexOf(t);this.tasks=this.tasks.move(n,r)}},{key:"reopenCompleted",value:function(){this.openTasks(this.completedTasks()),this.save()}},{key:"deleteCompleted",value:function(){this.removeTasks(this.completedTasks()),this.save()}},{key:"deleteTask",value:function(e){this.removeTasks([e]),this.save()}},{key:"buildHtmlPreview",value:function(){var e=this.categorizedTasks,t=e.openTasks,n=e.completedTasks,r=t.length+n.length,a=Math.min(t.length,3),o="<div>";if(o+='<div style="margin-top: 8px;"><strong>'.concat(n.length,"/").concat(r," tasks completed</strong></div>"),o+='<progress max="100" style="margin-top: 10px; width: 100%;" value="'.concat(n.length/r*100,'"></progress>'),a>0){o+="<ul style='padding-left: 19px; margin-top: 10px;'>";for(var i=0;i<a;i++){var l=t[i];o+="<li style='margin-bottom: 6px;'>".concat(l.content,"</li>")}if(o+="</ul>",t.length>a){var u=t.length-a,s=1==u?"task":"tasks";o+="<div><strong>And ".concat(u," other open ").concat(s,".</strong></div>")}}return o+="</div>"}},{key:"buildPlainPreview",value:function(){var e=this.categorizedTasks,t=e.openTasks,n=e.completedTasks,r=t.length+n.length;return"".concat(n.length,"/").concat(r," tasks completed.")}},{key:"save",value:function(){var e=this;if(this.dataString=this.tasks.map((function(e){return e.rawString})).join("\n"),this.note){var t=this.note;this.componentRelay.saveItemWithPresave(t,(function(){e.splitTasks(),t.content.text=e.dataString,t.content.unsavedTask=e.unsavedTask,t.content.preview_html=e.buildHtmlPreview(),t.content.preview_plain=e.buildPlainPreview()})),this.showTutorial&&this.componentRelay.setComponentDataValueForKey("showTutorial",!1)}}}],[{key:"get",value:function(){return null===this.instance&&(this.instance=new t),this.instance}}]),t}();d(v,"instance",null),Array.prototype.move=function(e,t){for(;e<0;)e+=this.length;for(;t<0;)t+=this.length;if(t>=this.length)for(var n=t-this.length;1+n--;)this.push(void 0);return this.splice(t,0,this.splice(e,1)[0]),this};var g=n(697),y=n.n(g);function b(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=s(e);if(t){var a=s(this).constructor;n=Reflect.construct(r,arguments,a)}else n=r.apply(this,arguments);return u(this,n)}}var k=function(t){o(a,t);var n=b(a);function a(t){var r;return e(this,a),d(l(r=n.call(this,t)),"toggleCheckboxChange",(function(){var e=r.props.handleCheckboxChange;r.setState((function(e){return{isChecked:!e.isChecked}})),e(r.props.task)})),d(l(r),"onTextChange",(function(e){var t=e.target.value;r.props.task.setContentString(t),r.props.handleTextChange(r.props.task,t),r.forceUpdate()})),d(l(r),"onKeyUp",(function(e){13==e.keyCode&&r.props.task.isEmpty()&&(r.props.deleteTask(r.props.task),e.preventDefault());var t=e.target;r.resizeTextArea(t)})),d(l(r),"onKeyPress",(function(e){"Enter"==e.key&&e.preventDefault()})),r.state={isChecked:t.task.completed,task:t.task},r}return r(a,[{key:"componentDidMount",value:function(){this.resizeTextArea(this.textArea)}},{key:"UNSAFE_componentWillReceiveProps",value:function(e){var t=this;this.setState({task:e.task,isChecked:e.task.completed}),setTimeout((function(){t.resizeTextArea(t.textArea)}),1)}},{key:"resizeTextArea",value:function(e){e.style.height="1px",e.style.height=e.scrollHeight+"px"}},{key:"render",value:function(){var e=this,t=this.state.isChecked,n=this.props,r=n.task,a=n.spellcheckEnabled,o="task ".concat(r.completed?"completed":"");return c.createElement("div",{className:o},c.createElement("label",{className:"checkbox-container"},c.createElement("input",{type:"checkbox",value:r.content,checked:t,onChange:this.toggleCheckboxChange,className:"checkbox",spellCheck:a}),c.createElement("span",{className:"checkmark"})),c.createElement("textarea",{ref:function(t){e.textArea=t},value:r.content,onChange:this.onTextChange,onKeyUp:this.onKeyUp,onKeyPress:this.onKeyPress,type:"text",dir:"auto",className:"task-input-textarea",spellCheck:a}))}}]),a}(c.Component);k.propTypes={task:y().object.isRequired,handleCheckboxChange:y().func.isRequired,handleTextChange:y().func.isRequired,deleteTask:y().func.isRequired,spellcheckEnabled:y().bool.isRequired};const w=k;function S(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=s(e);if(t){var a=s(this).constructor;n=Reflect.construct(r,arguments,a)}else n=r.apply(this,arguments);return u(this,n)}}var E=function(t){o(a,t);var n=S(a);function a(t){var r;return e(this,a),d(l(r=n.call(this,t)),"onTextChange",(function(e){var t=e.target.value;r.props.onUpdate(t)})),d(l(r),"handleKeyPress",(function(e){if("Enter"===e.key){var t=e.target.value;r.submitTask(t)}})),r.state={rawString:r.props.unsavedTask||""},r}return r(a,[{key:"shouldComponentUpdate",value:function(e){return e.unsavedTask!==this.state.rawString}},{key:"componentDidUpdate",value:function(e){this.setState({rawString:e.unsavedTask})}},{key:"componentDidMount",value:function(){v.get().isMobile()||this.input.focus()}},{key:"submitTask",value:function(e){this.props.onSubmit(e)}},{key:"render",value:function(){var e=this,t="";v.get().showTutorial&&(t="Type in your task, then press Enter.");var n=v.get().spellcheckEnabled;return c.createElement("input",{className:"create-task-input",ref:function(t){e.input=t},placeholder:t,type:"text",dir:"auto",value:this.props.unsavedTask,onChange:this.onTextChange,onKeyPress:this.handleKeyPress,spellCheck:n,enterKeyHint:"go"})}}]),a}(c.Component);function C(e){return(C="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function T(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function x(){return(x=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function _(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){T(e,t,n[t])}))}return e}function P(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}E.propTypes={unsavedTask:y().string,onUpdate:y().func.isRequired,onSubmit:y().func.isRequired};function N(e){if("undefined"!=typeof window&&window.navigator)return!!navigator.userAgent.match(e)}var O=N(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),D=N(/Edge/i),I=N(/firefox/i),M=N(/safari/i)&&!N(/chrome/i)&&!N(/android/i),R=N(/iP(ad|od|hone)/i),L=N(/chrome/i)&&N(/android/i),z={capture:!1,passive:!1};function A(e,t,n){e.addEventListener(t,n,!O&&z)}function F(e,t,n){e.removeEventListener(t,n,!O&&z)}function U(e,t){if(t){if(">"===t[0]&&(t=t.substring(1)),e)try{if(e.matches)return e.matches(t);if(e.msMatchesSelector)return e.msMatchesSelector(t);if(e.webkitMatchesSelector)return e.webkitMatchesSelector(t)}catch(e){return!1}return!1}}function j(e){return e.host&&e!==document&&e.host.nodeType?e.host:e.parentNode}function W(e,t,n,r){if(e){n=n||document;do{if(null!=t&&(">"===t[0]?e.parentNode===n&&U(e,t):U(e,t))||r&&e===n)return e;if(e===n)break}while(e=j(e))}return null}var B,H=/\s+/g;function V(e,t,n){if(e&&t)if(e.classList)e.classList[n?"add":"remove"](t);else{var r=(" "+e.className+" ").replace(H," ").replace(" "+t+" "," ");e.className=(r+(n?" "+t:"")).replace(H," ")}}function $(e,t,n){var r=e&&e.style;if(r){if(void 0===n)return document.defaultView&&document.defaultView.getComputedStyle?n=document.defaultView.getComputedStyle(e,""):e.currentStyle&&(n=e.currentStyle),void 0===t?n:n[t];t in r||-1!==t.indexOf("webkit")||(t="-webkit-"+t),r[t]=n+("string"==typeof n?"":"px")}}function Q(e,t){var n="";if("string"==typeof e)n=e;else do{var r=$(e,"transform");r&&"none"!==r&&(n=r+" "+n)}while(!t&&(e=e.parentNode));var a=window.DOMMatrix||window.WebKitCSSMatrix||window.CSSMatrix||window.MSCSSMatrix;return a&&new a(n)}function K(e,t,n){if(e){var r=e.getElementsByTagName(t),a=0,o=r.length;if(n)for(;a<o;a++)n(r[a],a);return r}return[]}function Y(){var e=document.scrollingElement;return e||document.documentElement}function X(e,t,n,r,a){if(e.getBoundingClientRect||e===window){var o,i,l,u,s,c,f;if(e!==window&&e.parentNode&&e!==Y()?(i=(o=e.getBoundingClientRect()).top,l=o.left,u=o.bottom,s=o.right,c=o.height,f=o.width):(i=0,l=0,u=window.innerHeight,s=window.innerWidth,c=window.innerHeight,f=window.innerWidth),(t||n)&&e!==window&&(a=a||e.parentNode,!O))do{if(a&&a.getBoundingClientRect&&("none"!==$(a,"transform")||n&&"static"!==$(a,"position"))){var d=a.getBoundingClientRect();i-=d.top+parseInt($(a,"border-top-width")),l-=d.left+parseInt($(a,"border-left-width")),u=i+o.height,s=l+o.width;break}}while(a=a.parentNode);if(r&&e!==window){var p=Q(a||e),h=p&&p.a,m=p&&p.d;p&&(u=(i/=m)+(c/=m),s=(l/=h)+(f/=h))}return{top:i,left:l,bottom:u,right:s,width:f,height:c}}}function q(e,t,n){for(var r=te(e,!0),a=X(e)[t];r;){var o=X(r)[n];if(!("top"===n||"left"===n?a>=o:a<=o))return r;if(r===Y())break;r=te(r,!1)}return!1}function G(e,t,n){for(var r=0,a=0,o=e.children;a<o.length;){if("none"!==o[a].style.display&&o[a]!==at.ghost&&o[a]!==at.dragged&&W(o[a],n.draggable,e,!1)){if(r===t)return o[a];r++}a++}return null}function J(e,t){for(var n=e.lastElementChild;n&&(n===at.ghost||"none"===$(n,"display")||t&&!U(n,t));)n=n.previousElementSibling;return n||null}function Z(e,t){var n=0;if(!e||!e.parentNode)return-1;for(;e=e.previousElementSibling;)"TEMPLATE"===e.nodeName.toUpperCase()||e===at.clone||t&&!U(e,t)||n++;return n}function ee(e){var t=0,n=0,r=Y();if(e)do{var a=Q(e),o=a.a,i=a.d;t+=e.scrollLeft*o,n+=e.scrollTop*i}while(e!==r&&(e=e.parentNode));return[t,n]}function te(e,t){if(!e||!e.getBoundingClientRect)return Y();var n=e,r=!1;do{if(n.clientWidth<n.scrollWidth||n.clientHeight<n.scrollHeight){var a=$(n);if(n.clientWidth<n.scrollWidth&&("auto"==a.overflowX||"scroll"==a.overflowX)||n.clientHeight<n.scrollHeight&&("auto"==a.overflowY||"scroll"==a.overflowY)){if(!n.getBoundingClientRect||n===document.body)return Y();if(r||t)return n;r=!0}}}while(n=n.parentNode);return Y()}function ne(e,t){return Math.round(e.top)===Math.round(t.top)&&Math.round(e.left)===Math.round(t.left)&&Math.round(e.height)===Math.round(t.height)&&Math.round(e.width)===Math.round(t.width)}function re(e,t){return function(){if(!B){var n=arguments,r=this;1===n.length?e.call(r,n[0]):e.apply(r,n),B=setTimeout((function(){B=void 0}),t)}}}function ae(e,t,n){e.scrollLeft+=t,e.scrollTop+=n}function oe(e){var t=window.Polymer,n=window.jQuery||window.Zepto;return t&&t.dom?t.dom(e).cloneNode(!0):n?n(e).clone(!0)[0]:e.cloneNode(!0)}var ie="Sortable"+(new Date).getTime();function le(){var e,t=[];return{captureAnimationState:function(){(t=[],this.options.animation)&&[].slice.call(this.el.children).forEach((function(e){if("none"!==$(e,"display")&&e!==at.ghost){t.push({target:e,rect:X(e)});var n=_({},t[t.length-1].rect);if(e.thisAnimationDuration){var r=Q(e,!0);r&&(n.top-=r.f,n.left-=r.e)}e.fromRect=n}}))},addAnimationState:function(e){t.push(e)},removeAnimationState:function(e){t.splice(function(e,t){for(var n in e)if(e.hasOwnProperty(n))for(var r in t)if(t.hasOwnProperty(r)&&t[r]===e[n][r])return Number(n);return-1}(t,{target:e}),1)},animateAll:function(n){var r=this;if(!this.options.animation)return clearTimeout(e),void("function"==typeof n&&n());var a=!1,o=0;t.forEach((function(e){var t=0,n=e.target,i=n.fromRect,l=X(n),u=n.prevFromRect,s=n.prevToRect,c=e.rect,f=Q(n,!0);f&&(l.top-=f.f,l.left-=f.e),n.toRect=l,n.thisAnimationDuration&&ne(u,l)&&!ne(i,l)&&(c.top-l.top)/(c.left-l.left)==(i.top-l.top)/(i.left-l.left)&&(t=function(e,t,n,r){return Math.sqrt(Math.pow(t.top-e.top,2)+Math.pow(t.left-e.left,2))/Math.sqrt(Math.pow(t.top-n.top,2)+Math.pow(t.left-n.left,2))*r.animation}(c,u,s,r.options)),ne(l,i)||(n.prevFromRect=i,n.prevToRect=l,t||(t=r.options.animation),r.animate(n,c,l,t)),t&&(a=!0,o=Math.max(o,t),clearTimeout(n.animationResetTimer),n.animationResetTimer=setTimeout((function(){n.animationTime=0,n.prevFromRect=null,n.fromRect=null,n.prevToRect=null,n.thisAnimationDuration=null}),t),n.thisAnimationDuration=t)})),clearTimeout(e),a?e=setTimeout((function(){"function"==typeof n&&n()}),o):"function"==typeof n&&n(),t=[]},animate:function(e,t,n,r){if(r){$(e,"transition",""),$(e,"transform","");var a=Q(this.el),o=a&&a.a,i=a&&a.d,l=(t.left-n.left)/(o||1),u=(t.top-n.top)/(i||1);e.animatingX=!!l,e.animatingY=!!u,$(e,"transform","translate3d("+l+"px,"+u+"px,0)"),this.forRepaintDummy=function(e){return e.offsetWidth}(e),$(e,"transition","transform "+r+"ms"+(this.options.easing?" "+this.options.easing:"")),$(e,"transform","translate3d(0,0,0)"),"number"==typeof e.animated&&clearTimeout(e.animated),e.animated=setTimeout((function(){$(e,"transition",""),$(e,"transform",""),e.animated=!1,e.animatingX=!1,e.animatingY=!1}),r)}}}}var ue=[],se={initializeByDefault:!0},ce={mount:function(e){for(var t in se)se.hasOwnProperty(t)&&!(t in e)&&(e[t]=se[t]);ue.forEach((function(t){if(t.pluginName===e.pluginName)throw"Sortable: Cannot mount plugin ".concat(e.pluginName," more than once")})),ue.push(e)},pluginEvent:function(e,t,n){var r=this;this.eventCanceled=!1,n.cancel=function(){r.eventCanceled=!0};var a=e+"Global";ue.forEach((function(r){t[r.pluginName]&&(t[r.pluginName][a]&&t[r.pluginName][a](_({sortable:t},n)),t.options[r.pluginName]&&t[r.pluginName][e]&&t[r.pluginName][e](_({sortable:t},n)))}))},initializePlugins:function(e,t,n,r){for(var a in ue.forEach((function(r){var a=r.pluginName;if(e.options[a]||r.initializeByDefault){var o=new r(e,t,e.options);o.sortable=e,o.options=e.options,e[a]=o,x(n,o.defaults)}})),e.options)if(e.options.hasOwnProperty(a)){var o=this.modifyOption(e,a,e.options[a]);void 0!==o&&(e.options[a]=o)}},getEventProperties:function(e,t){var n={};return ue.forEach((function(r){"function"==typeof r.eventProperties&&x(n,r.eventProperties.call(t[r.pluginName],e))})),n},modifyOption:function(e,t,n){var r;return ue.forEach((function(a){e[a.pluginName]&&a.optionListeners&&"function"==typeof a.optionListeners[t]&&(r=a.optionListeners[t].call(e[a.pluginName],n))})),r}};function fe(e){var t=e.sortable,n=e.rootEl,r=e.name,a=e.targetEl,o=e.cloneEl,i=e.toEl,l=e.fromEl,u=e.oldIndex,s=e.newIndex,c=e.oldDraggableIndex,f=e.newDraggableIndex,d=e.originalEvent,p=e.putSortable,h=e.extraEventProperties;if(t=t||n&&n[ie]){var m,v=t.options,g="on"+r.charAt(0).toUpperCase()+r.substr(1);!window.CustomEvent||O||D?(m=document.createEvent("Event")).initEvent(r,!0,!0):m=new CustomEvent(r,{bubbles:!0,cancelable:!0}),m.to=i||n,m.from=l||n,m.item=a||n,m.clone=o,m.oldIndex=u,m.newIndex=s,m.oldDraggableIndex=c,m.newDraggableIndex=f,m.originalEvent=d,m.pullMode=p?p.lastPutMode:void 0;var y=_({},h,ce.getEventProperties(r,t));for(var b in y)m[b]=y[b];n&&n.dispatchEvent(m),v[g]&&v[g].call(t,m)}}var de=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.evt,a=P(n,["evt"]);ce.pluginEvent.bind(at)(e,t,_({dragEl:he,parentEl:me,ghostEl:ve,rootEl:ge,nextEl:ye,lastDownEl:be,cloneEl:ke,cloneHidden:we,dragStarted:Re,putSortable:_e,activeSortable:at.active,originalEvent:r,oldIndex:Se,oldDraggableIndex:Ce,newIndex:Ee,newDraggableIndex:Te,hideGhostForTarget:et,unhideGhostForTarget:tt,cloneNowHidden:function(){we=!0},cloneNowShown:function(){we=!1},dispatchSortableEvent:function(e){pe({sortable:t,name:e,originalEvent:r})}},a))};function pe(e){fe(_({putSortable:_e,cloneEl:ke,targetEl:he,rootEl:ge,oldIndex:Se,oldDraggableIndex:Ce,newIndex:Ee,newDraggableIndex:Te},e))}var he,me,ve,ge,ye,be,ke,we,Se,Ee,Ce,Te,xe,_e,Pe,Ne,Oe,De,Ie,Me,Re,Le,ze,Ae,Fe,Ue=!1,je=!1,We=[],Be=!1,He=!1,Ve=[],$e=!1,Qe=[],Ke="undefined"!=typeof document,Ye=R,Xe=D||O?"cssFloat":"float",qe=Ke&&!L&&!R&&"draggable"in document.createElement("div"),Ge=function(){if(Ke){if(O)return!1;var e=document.createElement("x");return e.style.cssText="pointer-events:auto","auto"===e.style.pointerEvents}}(),Je=function(e,t){var n=$(e),r=parseInt(n.width)-parseInt(n.paddingLeft)-parseInt(n.paddingRight)-parseInt(n.borderLeftWidth)-parseInt(n.borderRightWidth),a=G(e,0,t),o=G(e,1,t),i=a&&$(a),l=o&&$(o),u=i&&parseInt(i.marginLeft)+parseInt(i.marginRight)+X(a).width,s=l&&parseInt(l.marginLeft)+parseInt(l.marginRight)+X(o).width;if("flex"===n.display)return"column"===n.flexDirection||"column-reverse"===n.flexDirection?"vertical":"horizontal";if("grid"===n.display)return n.gridTemplateColumns.split(" ").length<=1?"vertical":"horizontal";if(a&&i.float&&"none"!==i.float){var c="left"===i.float?"left":"right";return!o||"both"!==l.clear&&l.clear!==c?"horizontal":"vertical"}return a&&("block"===i.display||"flex"===i.display||"table"===i.display||"grid"===i.display||u>=r&&"none"===n[Xe]||o&&"none"===n[Xe]&&u+s>r)?"vertical":"horizontal"},Ze=function(e){function t(e,n){return function(r,a,o,i){var l=r.options.group.name&&a.options.group.name&&r.options.group.name===a.options.group.name;if(null==e&&(n||l))return!0;if(null==e||!1===e)return!1;if(n&&"clone"===e)return e;if("function"==typeof e)return t(e(r,a,o,i),n)(r,a,o,i);var u=(n?r:a).options.group.name;return!0===e||"string"==typeof e&&e===u||e.join&&e.indexOf(u)>-1}}var n={},r=e.group;r&&"object"==C(r)||(r={name:r}),n.name=r.name,n.checkPull=t(r.pull,!0),n.checkPut=t(r.put),n.revertClone=r.revertClone,e.group=n},et=function(){!Ge&&ve&&$(ve,"display","none")},tt=function(){!Ge&&ve&&$(ve,"display","")};Ke&&document.addEventListener("click",(function(e){if(je)return e.preventDefault(),e.stopPropagation&&e.stopPropagation(),e.stopImmediatePropagation&&e.stopImmediatePropagation(),je=!1,!1}),!0);var nt=function(e){if(he){e=e.touches?e.touches[0]:e;var t=(a=e.clientX,o=e.clientY,We.some((function(e){if(!J(e)){var t=X(e),n=e[ie].options.emptyInsertThreshold,r=a>=t.left-n&&a<=t.right+n,l=o>=t.top-n&&o<=t.bottom+n;return n&&r&&l?i=e:void 0}})),i);if(t){var n={};for(var r in e)e.hasOwnProperty(r)&&(n[r]=e[r]);n.target=n.rootEl=t,n.preventDefault=void 0,n.stopPropagation=void 0,t[ie]._onDragOver(n)}}var a,o,i},rt=function(e){he&&he.parentNode[ie]._isOutsideThisEl(e.target)};function at(e,t){if(!e||!e.nodeType||1!==e.nodeType)throw"Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(e));this.el=e,this.options=t=x({},t),e[ie]=this;var n={group:null,sort:!0,disabled:!1,store:null,handle:null,draggable:/^[uo]l$/i.test(e.nodeName)?">li":">*",swapThreshold:1,invertSwap:!1,invertedSwapThreshold:null,removeCloneOnHide:!0,direction:function(){return Je(e,this.options)},ghostClass:"sortable-ghost",chosenClass:"sortable-chosen",dragClass:"sortable-drag",ignore:"a, img",filter:null,preventOnFilter:!0,animation:0,easing:null,setData:function(e,t){e.setData("Text",t.textContent)},dropBubble:!1,dragoverBubble:!1,dataIdAttr:"data-id",delay:0,delayOnTouchOnly:!1,touchStartThreshold:(Number.parseInt?Number:window).parseInt(window.devicePixelRatio,10)||1,forceFallback:!1,fallbackClass:"sortable-fallback",fallbackOnBody:!1,fallbackTolerance:0,fallbackOffset:{x:0,y:0},supportPointer:!1!==at.supportPointer&&"PointerEvent"in window&&!M,emptyInsertThreshold:5};for(var r in ce.initializePlugins(this,e,n),n)!(r in t)&&(t[r]=n[r]);for(var a in Ze(t),this)"_"===a.charAt(0)&&"function"==typeof this[a]&&(this[a]=this[a].bind(this));this.nativeDraggable=!t.forceFallback&&qe,this.nativeDraggable&&(this.options.touchStartThreshold=1),t.supportPointer?A(e,"pointerdown",this._onTapStart):(A(e,"mousedown",this._onTapStart),A(e,"touchstart",this._onTapStart)),this.nativeDraggable&&(A(e,"dragover",this),A(e,"dragenter",this)),We.push(this.el),t.store&&t.store.get&&this.sort(t.store.get(this)||[]),x(this,le())}function ot(e,t,n,r,a,o,i,l){var u,s,c=e[ie],f=c.options.onMove;return!window.CustomEvent||O||D?(u=document.createEvent("Event")).initEvent("move",!0,!0):u=new CustomEvent("move",{bubbles:!0,cancelable:!0}),u.to=t,u.from=e,u.dragged=n,u.draggedRect=r,u.related=a||t,u.relatedRect=o||X(t),u.willInsertAfter=l,u.originalEvent=i,e.dispatchEvent(u),f&&(s=f.call(c,u,i)),s}function it(e){e.draggable=!1}function lt(){$e=!1}function ut(e){for(var t=e.tagName+e.className+e.src+e.href+e.textContent,n=t.length,r=0;n--;)r+=t.charCodeAt(n);return r.toString(36)}function st(e){return setTimeout(e,0)}function ct(e){return clearTimeout(e)}at.prototype={constructor:at,_isOutsideThisEl:function(e){this.el.contains(e)||e===this.el||(Le=null)},_getDirection:function(e,t){return"function"==typeof this.options.direction?this.options.direction.call(this,e,t,he):this.options.direction},_onTapStart:function(e){if(e.cancelable){var t=this,n=this.el,r=this.options,a=r.preventOnFilter,o=e.type,i=e.touches&&e.touches[0]||e.pointerType&&"touch"===e.pointerType&&e,l=(i||e).target,u=e.target.shadowRoot&&(e.path&&e.path[0]||e.composedPath&&e.composedPath()[0])||l,s=r.filter;if(function(e){Qe.length=0;var t=e.getElementsByTagName("input"),n=t.length;for(;n--;){var r=t[n];r.checked&&Qe.push(r)}}(n),!he&&!(/mousedown|pointerdown/.test(o)&&0!==e.button||r.disabled)&&!u.isContentEditable&&(this.nativeDraggable||!M||!l||"SELECT"!==l.tagName.toUpperCase())&&!((l=W(l,r.draggable,n,!1))&&l.animated||be===l)){if(Se=Z(l),Ce=Z(l,r.draggable),"function"==typeof s){if(s.call(this,e,l,this))return pe({sortable:t,rootEl:u,name:"filter",targetEl:l,toEl:n,fromEl:n}),de("filter",t,{evt:e}),void(a&&e.cancelable&&e.preventDefault())}else if(s&&(s=s.split(",").some((function(r){if(r=W(u,r.trim(),n,!1))return pe({sortable:t,rootEl:r,name:"filter",targetEl:l,fromEl:n,toEl:n}),de("filter",t,{evt:e}),!0}))))return void(a&&e.cancelable&&e.preventDefault());r.handle&&!W(u,r.handle,n,!1)||this._prepareDragStart(e,i,l)}}},_prepareDragStart:function(e,t,n){var r,a=this,o=a.el,i=a.options,l=o.ownerDocument;if(n&&!he&&n.parentNode===o){var u=X(n);if(ge=o,me=(he=n).parentNode,ye=he.nextSibling,be=n,xe=i.group,at.dragged=he,Pe={target:he,clientX:(t||e).clientX,clientY:(t||e).clientY},Ie=Pe.clientX-u.left,Me=Pe.clientY-u.top,this._lastX=(t||e).clientX,this._lastY=(t||e).clientY,he.style["will-change"]="all",r=function(){de("delayEnded",a,{evt:e}),at.eventCanceled?a._onDrop():(a._disableDelayedDragEvents(),!I&&a.nativeDraggable&&(he.draggable=!0),a._triggerDragStart(e,t),pe({sortable:a,name:"choose",originalEvent:e}),V(he,i.chosenClass,!0))},i.ignore.split(",").forEach((function(e){K(he,e.trim(),it)})),A(l,"dragover",nt),A(l,"mousemove",nt),A(l,"touchmove",nt),A(l,"mouseup",a._onDrop),A(l,"touchend",a._onDrop),A(l,"touchcancel",a._onDrop),I&&this.nativeDraggable&&(this.options.touchStartThreshold=4,he.draggable=!0),de("delayStart",this,{evt:e}),!i.delay||i.delayOnTouchOnly&&!t||this.nativeDraggable&&(D||O))r();else{if(at.eventCanceled)return void this._onDrop();A(l,"mouseup",a._disableDelayedDrag),A(l,"touchend",a._disableDelayedDrag),A(l,"touchcancel",a._disableDelayedDrag),A(l,"mousemove",a._delayedDragTouchMoveHandler),A(l,"touchmove",a._delayedDragTouchMoveHandler),i.supportPointer&&A(l,"pointermove",a._delayedDragTouchMoveHandler),a._dragStartTimer=setTimeout(r,i.delay)}}},_delayedDragTouchMoveHandler:function(e){var t=e.touches?e.touches[0]:e;Math.max(Math.abs(t.clientX-this._lastX),Math.abs(t.clientY-this._lastY))>=Math.floor(this.options.touchStartThreshold/(this.nativeDraggable&&window.devicePixelRatio||1))&&this._disableDelayedDrag()},_disableDelayedDrag:function(){he&&it(he),clearTimeout(this._dragStartTimer),this._disableDelayedDragEvents()},_disableDelayedDragEvents:function(){var e=this.el.ownerDocument;F(e,"mouseup",this._disableDelayedDrag),F(e,"touchend",this._disableDelayedDrag),F(e,"touchcancel",this._disableDelayedDrag),F(e,"mousemove",this._delayedDragTouchMoveHandler),F(e,"touchmove",this._delayedDragTouchMoveHandler),F(e,"pointermove",this._delayedDragTouchMoveHandler)},_triggerDragStart:function(e,t){t=t||"touch"==e.pointerType&&e,!this.nativeDraggable||t?this.options.supportPointer?A(document,"pointermove",this._onTouchMove):A(document,t?"touchmove":"mousemove",this._onTouchMove):(A(he,"dragend",this),A(ge,"dragstart",this._onDragStart));try{document.selection?st((function(){document.selection.empty()})):window.getSelection().removeAllRanges()}catch(e){}},_dragStarted:function(e,t){if(Ue=!1,ge&&he){de("dragStarted",this,{evt:t}),this.nativeDraggable&&A(document,"dragover",rt);var n=this.options;!e&&V(he,n.dragClass,!1),V(he,n.ghostClass,!0),at.active=this,e&&this._appendGhost(),pe({sortable:this,name:"start",originalEvent:t})}else this._nulling()},_emulateDragOver:function(){if(Ne){this._lastX=Ne.clientX,this._lastY=Ne.clientY,et();for(var e=document.elementFromPoint(Ne.clientX,Ne.clientY),t=e;e&&e.shadowRoot&&(e=e.shadowRoot.elementFromPoint(Ne.clientX,Ne.clientY))!==t;)t=e;if(he.parentNode[ie]._isOutsideThisEl(e),t)do{if(t[ie]){if(t[ie]._onDragOver({clientX:Ne.clientX,clientY:Ne.clientY,target:e,rootEl:t})&&!this.options.dragoverBubble)break}e=t}while(t=t.parentNode);tt()}},_onTouchMove:function(e){if(Pe){var t=this.options,n=t.fallbackTolerance,r=t.fallbackOffset,a=e.touches?e.touches[0]:e,o=ve&&Q(ve,!0),i=ve&&o&&o.a,l=ve&&o&&o.d,u=Ye&&Fe&&ee(Fe),s=(a.clientX-Pe.clientX+r.x)/(i||1)+(u?u[0]-Ve[0]:0)/(i||1),c=(a.clientY-Pe.clientY+r.y)/(l||1)+(u?u[1]-Ve[1]:0)/(l||1);if(!at.active&&!Ue){if(n&&Math.max(Math.abs(a.clientX-this._lastX),Math.abs(a.clientY-this._lastY))<n)return;this._onDragStart(e,!0)}if(ve){o?(o.e+=s-(Oe||0),o.f+=c-(De||0)):o={a:1,b:0,c:0,d:1,e:s,f:c};var f="matrix(".concat(o.a,",").concat(o.b,",").concat(o.c,",").concat(o.d,",").concat(o.e,",").concat(o.f,")");$(ve,"webkitTransform",f),$(ve,"mozTransform",f),$(ve,"msTransform",f),$(ve,"transform",f),Oe=s,De=c,Ne=a}e.cancelable&&e.preventDefault()}},_appendGhost:function(){if(!ve){var e=this.options.fallbackOnBody?document.body:ge,t=X(he,!0,Ye,!0,e),n=this.options;if(Ye){for(Fe=e;"static"===$(Fe,"position")&&"none"===$(Fe,"transform")&&Fe!==document;)Fe=Fe.parentNode;Fe!==document.body&&Fe!==document.documentElement?(Fe===document&&(Fe=Y()),t.top+=Fe.scrollTop,t.left+=Fe.scrollLeft):Fe=Y(),Ve=ee(Fe)}V(ve=he.cloneNode(!0),n.ghostClass,!1),V(ve,n.fallbackClass,!0),V(ve,n.dragClass,!0),$(ve,"transition",""),$(ve,"transform",""),$(ve,"box-sizing","border-box"),$(ve,"margin",0),$(ve,"top",t.top),$(ve,"left",t.left),$(ve,"width",t.width),$(ve,"height",t.height),$(ve,"opacity","0.8"),$(ve,"position",Ye?"absolute":"fixed"),$(ve,"zIndex","100000"),$(ve,"pointerEvents","none"),at.ghost=ve,e.appendChild(ve),$(ve,"transform-origin",Ie/parseInt(ve.style.width)*100+"% "+Me/parseInt(ve.style.height)*100+"%")}},_onDragStart:function(e,t){var n=this,r=e.dataTransfer,a=n.options;de("dragStart",this,{evt:e}),at.eventCanceled?this._onDrop():(de("setupClone",this),at.eventCanceled||((ke=oe(he)).draggable=!1,ke.style["will-change"]="",this._hideClone(),V(ke,this.options.chosenClass,!1),at.clone=ke),n.cloneId=st((function(){de("clone",n),at.eventCanceled||(n.options.removeCloneOnHide||ge.insertBefore(ke,he),n._hideClone(),pe({sortable:n,name:"clone"}))})),!t&&V(he,a.dragClass,!0),t?(je=!0,n._loopId=setInterval(n._emulateDragOver,50)):(F(document,"mouseup",n._onDrop),F(document,"touchend",n._onDrop),F(document,"touchcancel",n._onDrop),r&&(r.effectAllowed="move",a.setData&&a.setData.call(n,r,he)),A(document,"drop",n),$(he,"transform","translateZ(0)")),Ue=!0,n._dragStartId=st(n._dragStarted.bind(n,t,e)),A(document,"selectstart",n),Re=!0,M&&$(document.body,"user-select","none"))},_onDragOver:function(e){var t,n,r,a,o=this.el,i=e.target,l=this.options,u=l.group,s=at.active,c=xe===u,f=l.sort,d=_e||s,p=this,h=!1;if(!$e){if(void 0!==e.preventDefault&&e.cancelable&&e.preventDefault(),i=W(i,l.draggable,o,!0),N("dragOver"),at.eventCanceled)return h;if(he.contains(e.target)||i.animated&&i.animatingX&&i.animatingY||p._ignoreWhileAnimating===i)return D(!1);if(je=!1,s&&!l.disabled&&(c?f||(r=!ge.contains(he)):_e===this||(this.lastPutMode=xe.checkPull(this,s,he,e))&&u.checkPut(this,s,he,e))){if(a="vertical"===this._getDirection(e,i),t=X(he),N("dragOverValid"),at.eventCanceled)return h;if(r)return me=ge,O(),this._hideClone(),N("revert"),at.eventCanceled||(ye?ge.insertBefore(he,ye):ge.appendChild(he)),D(!0);var m=J(o,l.draggable);if(!m||function(e,t,n){var r=X(J(n.el,n.options.draggable)),a=10;return t?e.clientX>r.right+a||e.clientX<=r.right&&e.clientY>r.bottom&&e.clientX>=r.left:e.clientX>r.right&&e.clientY>r.top||e.clientX<=r.right&&e.clientY>r.bottom+a}(e,a,this)&&!m.animated){if(m===he)return D(!1);if(m&&o===e.target&&(i=m),i&&(n=X(i)),!1!==ot(ge,o,he,t,i,n,e,!!i))return O(),o.appendChild(he),me=o,I(),D(!0)}else if(i.parentNode===o){n=X(i);var v,g,y,b=he.parentNode!==o,k=!function(e,t,n){var r=n?e.left:e.top,a=n?e.right:e.bottom,o=n?e.width:e.height,i=n?t.left:t.top,l=n?t.right:t.bottom,u=n?t.width:t.height;return r===i||a===l||r+o/2===i+u/2}(he.animated&&he.toRect||t,i.animated&&i.toRect||n,a),w=a?"top":"left",S=q(i,"top","top")||q(he,"top","top"),E=S?S.scrollTop:void 0;if(Le!==i&&(g=n[w],Be=!1,He=!k&&l.invertSwap||b),0!==(v=function(e,t,n,r,a,o,i,l){var u=r?e.clientY:e.clientX,s=r?n.height:n.width,c=r?n.top:n.left,f=r?n.bottom:n.right,d=!1;if(!i)if(l&&Ae<s*a){if(!Be&&(1===ze?u>c+s*o/2:u<f-s*o/2)&&(Be=!0),Be)d=!0;else if(1===ze?u<c+Ae:u>f-Ae)return-ze}else if(u>c+s*(1-a)/2&&u<f-s*(1-a)/2)return function(e){return Z(he)<Z(e)?1:-1}(t);if((d=d||i)&&(u<c+s*o/2||u>f-s*o/2))return u>c+s/2?1:-1;return 0}(e,i,n,a,k?1:l.swapThreshold,null==l.invertedSwapThreshold?l.swapThreshold:l.invertedSwapThreshold,He,Le===i))){var C=Z(he);do{C-=v,y=me.children[C]}while(y&&("none"===$(y,"display")||y===ve))}if(0===v||y===i)return D(!1);Le=i,ze=v;var T=i.nextElementSibling,x=!1,P=ot(ge,o,he,t,i,n,e,x=1===v);if(!1!==P)return 1!==P&&-1!==P||(x=1===P),$e=!0,setTimeout(lt,30),O(),x&&!T?o.appendChild(he):i.parentNode.insertBefore(he,x?T:i),S&&ae(S,0,E-S.scrollTop),me=he.parentNode,void 0===g||He||(Ae=Math.abs(g-X(i)[w])),I(),D(!0)}if(o.contains(he))return D(!1)}return!1}function N(l,u){de(l,p,_({evt:e,isOwner:c,axis:a?"vertical":"horizontal",revert:r,dragRect:t,targetRect:n,canSort:f,fromSortable:d,target:i,completed:D,onMove:function(n,r){return ot(ge,o,he,t,n,X(n),e,r)},changed:I},u))}function O(){N("dragOverAnimationCapture"),p.captureAnimationState(),p!==d&&d.captureAnimationState()}function D(t){return N("dragOverCompleted",{insertion:t}),t&&(c?s._hideClone():s._showClone(p),p!==d&&(V(he,_e?_e.options.ghostClass:s.options.ghostClass,!1),V(he,l.ghostClass,!0)),_e!==p&&p!==at.active?_e=p:p===at.active&&_e&&(_e=null),d===p&&(p._ignoreWhileAnimating=i),p.animateAll((function(){N("dragOverAnimationComplete"),p._ignoreWhileAnimating=null})),p!==d&&(d.animateAll(),d._ignoreWhileAnimating=null)),(i===he&&!he.animated||i===o&&!i.animated)&&(Le=null),l.dragoverBubble||e.rootEl||i===document||(he.parentNode[ie]._isOutsideThisEl(e.target),!t&&nt(e)),!l.dragoverBubble&&e.stopPropagation&&e.stopPropagation(),h=!0}function I(){Ee=Z(he),Te=Z(he,l.draggable),pe({sortable:p,name:"change",toEl:o,newIndex:Ee,newDraggableIndex:Te,originalEvent:e})}},_ignoreWhileAnimating:null,_offMoveEvents:function(){F(document,"mousemove",this._onTouchMove),F(document,"touchmove",this._onTouchMove),F(document,"pointermove",this._onTouchMove),F(document,"dragover",nt),F(document,"mousemove",nt),F(document,"touchmove",nt)},_offUpEvents:function(){var e=this.el.ownerDocument;F(e,"mouseup",this._onDrop),F(e,"touchend",this._onDrop),F(e,"pointerup",this._onDrop),F(e,"touchcancel",this._onDrop),F(document,"selectstart",this)},_onDrop:function(e){var t=this.el,n=this.options;Ee=Z(he),Te=Z(he,n.draggable),de("drop",this,{evt:e}),me=he&&he.parentNode,Ee=Z(he),Te=Z(he,n.draggable),at.eventCanceled||(Ue=!1,He=!1,Be=!1,clearInterval(this._loopId),clearTimeout(this._dragStartTimer),ct(this.cloneId),ct(this._dragStartId),this.nativeDraggable&&(F(document,"drop",this),F(t,"dragstart",this._onDragStart)),this._offMoveEvents(),this._offUpEvents(),M&&$(document.body,"user-select",""),$(he,"transform",""),e&&(Re&&(e.cancelable&&e.preventDefault(),!n.dropBubble&&e.stopPropagation()),ve&&ve.parentNode&&ve.parentNode.removeChild(ve),(ge===me||_e&&"clone"!==_e.lastPutMode)&&ke&&ke.parentNode&&ke.parentNode.removeChild(ke),he&&(this.nativeDraggable&&F(he,"dragend",this),it(he),he.style["will-change"]="",Re&&!Ue&&V(he,_e?_e.options.ghostClass:this.options.ghostClass,!1),V(he,this.options.chosenClass,!1),pe({sortable:this,name:"unchoose",toEl:me,newIndex:null,newDraggableIndex:null,originalEvent:e}),ge!==me?(Ee>=0&&(pe({rootEl:me,name:"add",toEl:me,fromEl:ge,originalEvent:e}),pe({sortable:this,name:"remove",toEl:me,originalEvent:e}),pe({rootEl:me,name:"sort",toEl:me,fromEl:ge,originalEvent:e}),pe({sortable:this,name:"sort",toEl:me,originalEvent:e})),_e&&_e.save()):Ee!==Se&&Ee>=0&&(pe({sortable:this,name:"update",toEl:me,originalEvent:e}),pe({sortable:this,name:"sort",toEl:me,originalEvent:e})),at.active&&(null!=Ee&&-1!==Ee||(Ee=Se,Te=Ce),pe({sortable:this,name:"end",toEl:me,originalEvent:e}),this.save())))),this._nulling()},_nulling:function(){de("nulling",this),ge=he=me=ve=ye=ke=be=we=Pe=Ne=Re=Ee=Te=Se=Ce=Le=ze=_e=xe=at.dragged=at.ghost=at.clone=at.active=null,Qe.forEach((function(e){e.checked=!0})),Qe.length=Oe=De=0},handleEvent:function(e){switch(e.type){case"drop":case"dragend":this._onDrop(e);break;case"dragenter":case"dragover":he&&(this._onDragOver(e),function(e){e.dataTransfer&&(e.dataTransfer.dropEffect="move");e.cancelable&&e.preventDefault()}(e));break;case"selectstart":e.preventDefault()}},toArray:function(){for(var e,t=[],n=this.el.children,r=0,a=n.length,o=this.options;r<a;r++)W(e=n[r],o.draggable,this.el,!1)&&t.push(e.getAttribute(o.dataIdAttr)||ut(e));return t},sort:function(e,t){var n={},r=this.el;this.toArray().forEach((function(e,t){var a=r.children[t];W(a,this.options.draggable,r,!1)&&(n[e]=a)}),this),t&&this.captureAnimationState(),e.forEach((function(e){n[e]&&(r.removeChild(n[e]),r.appendChild(n[e]))})),t&&this.animateAll()},save:function(){var e=this.options.store;e&&e.set&&e.set(this)},closest:function(e,t){return W(e,t||this.options.draggable,this.el,!1)},option:function(e,t){var n=this.options;if(void 0===t)return n[e];var r=ce.modifyOption(this,e,t);n[e]=void 0!==r?r:t,"group"===e&&Ze(n)},destroy:function(){de("destroy",this);var e=this.el;e[ie]=null,F(e,"mousedown",this._onTapStart),F(e,"touchstart",this._onTapStart),F(e,"pointerdown",this._onTapStart),this.nativeDraggable&&(F(e,"dragover",this),F(e,"dragenter",this)),Array.prototype.forEach.call(e.querySelectorAll("[draggable]"),(function(e){e.removeAttribute("draggable")})),this._onDrop(),this._disableDelayedDragEvents(),We.splice(We.indexOf(this.el),1),this.el=e=null},_hideClone:function(){if(!we){if(de("hideClone",this),at.eventCanceled)return;$(ke,"display","none"),this.options.removeCloneOnHide&&ke.parentNode&&ke.parentNode.removeChild(ke),we=!0}},_showClone:function(e){if("clone"===e.lastPutMode){if(we){if(de("showClone",this),at.eventCanceled)return;he.parentNode!=ge||this.options.group.revertClone?ye?ge.insertBefore(ke,ye):ge.appendChild(ke):ge.insertBefore(ke,he),this.options.group.revertClone&&this.animate(he,ke),$(ke,"display",""),we=!1}}else this._hideClone()}},Ke&&A(document,"touchmove",(function(e){(at.active||Ue)&&e.cancelable&&e.preventDefault()})),at.utils={on:A,off:F,css:$,find:K,is:function(e,t){return!!W(e,t,e,!1)},extend:function(e,t){if(e&&t)for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n]);return e},throttle:re,closest:W,toggleClass:V,clone:oe,index:Z,nextTick:st,cancelNextTick:ct,detectDirection:Je,getChild:G},at.get=function(e){return e[ie]},at.mount=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];t[0].constructor===Array&&(t=t[0]),t.forEach((function(e){if(!e.prototype||!e.prototype.constructor)throw"Sortable: Mounted plugin must be a constructor function, not ".concat({}.toString.call(e));e.utils&&(at.utils=_({},at.utils,e.utils)),ce.mount(e)}))},at.create=function(e,t){return new at(e,t)},at.version="1.13.0";var ft,dt,pt,ht,mt,vt,gt=[],yt=!1;function bt(){gt.forEach((function(e){clearInterval(e.pid)})),gt=[]}function kt(){clearInterval(vt)}var wt=re((function(e,t,n,r){if(t.scroll){var a,o=(e.touches?e.touches[0]:e).clientX,i=(e.touches?e.touches[0]:e).clientY,l=t.scrollSensitivity,u=t.scrollSpeed,s=Y(),c=!1;dt!==n&&(dt=n,bt(),ft=t.scroll,a=t.scrollFn,!0===ft&&(ft=te(n,!0)));var f=0,d=ft;do{var p=d,h=X(p),m=h.top,v=h.bottom,g=h.left,y=h.right,b=h.width,k=h.height,w=void 0,S=void 0,E=p.scrollWidth,C=p.scrollHeight,T=$(p),x=p.scrollLeft,_=p.scrollTop;p===s?(w=b<E&&("auto"===T.overflowX||"scroll"===T.overflowX||"visible"===T.overflowX),S=k<C&&("auto"===T.overflowY||"scroll"===T.overflowY||"visible"===T.overflowY)):(w=b<E&&("auto"===T.overflowX||"scroll"===T.overflowX),S=k<C&&("auto"===T.overflowY||"scroll"===T.overflowY));var P=w&&(Math.abs(y-o)<=l&&x+b<E)-(Math.abs(g-o)<=l&&!!x),N=S&&(Math.abs(v-i)<=l&&_+k<C)-(Math.abs(m-i)<=l&&!!_);if(!gt[f])for(var O=0;O<=f;O++)gt[O]||(gt[O]={});gt[f].vx==P&&gt[f].vy==N&&gt[f].el===p||(gt[f].el=p,gt[f].vx=P,gt[f].vy=N,clearInterval(gt[f].pid),0==P&&0==N||(c=!0,gt[f].pid=setInterval(function(){r&&0===this.layer&&at.active._onTouchMove(mt);var t=gt[this.layer].vy?gt[this.layer].vy*u:0,n=gt[this.layer].vx?gt[this.layer].vx*u:0;"function"==typeof a&&"continue"!==a.call(at.dragged.parentNode[ie],n,t,e,mt,gt[this.layer].el)||ae(gt[this.layer].el,n,t)}.bind({layer:f}),24))),f++}while(t.bubbleScroll&&d!==s&&(d=te(d,!1)));yt=c}}),30),St=function(e){var t=e.originalEvent,n=e.putSortable,r=e.dragEl,a=e.activeSortable,o=e.dispatchSortableEvent,i=e.hideGhostForTarget,l=e.unhideGhostForTarget;if(t){var u=n||a;i();var s=t.changedTouches&&t.changedTouches.length?t.changedTouches[0]:t,c=document.elementFromPoint(s.clientX,s.clientY);l(),u&&!u.el.contains(c)&&(o("spill"),this.onSpill({dragEl:r,putSortable:n}))}};function Et(){}function Ct(){}Et.prototype={startIndex:null,dragStart:function(e){var t=e.oldDraggableIndex;this.startIndex=t},onSpill:function(e){var t=e.dragEl,n=e.putSortable;this.sortable.captureAnimationState(),n&&n.captureAnimationState();var r=G(this.sortable.el,this.startIndex,this.options);r?this.sortable.el.insertBefore(t,r):this.sortable.el.appendChild(t),this.sortable.animateAll(),n&&n.animateAll()},drop:St},x(Et,{pluginName:"revertOnSpill"}),Ct.prototype={onSpill:function(e){var t=e.dragEl,n=e.putSortable||this.sortable;n.captureAnimationState(),t.parentNode&&t.parentNode.removeChild(t),n.animateAll()},drop:St},x(Ct,{pluginName:"removeOnSpill"});at.mount(new function(){function e(){for(var e in this.defaults={scroll:!0,scrollSensitivity:30,scrollSpeed:10,bubbleScroll:!0},this)"_"===e.charAt(0)&&"function"==typeof this[e]&&(this[e]=this[e].bind(this))}return e.prototype={dragStarted:function(e){var t=e.originalEvent;this.sortable.nativeDraggable?A(document,"dragover",this._handleAutoScroll):this.options.supportPointer?A(document,"pointermove",this._handleFallbackAutoScroll):t.touches?A(document,"touchmove",this._handleFallbackAutoScroll):A(document,"mousemove",this._handleFallbackAutoScroll)},dragOverCompleted:function(e){var t=e.originalEvent;this.options.dragOverBubble||t.rootEl||this._handleAutoScroll(t)},drop:function(){this.sortable.nativeDraggable?F(document,"dragover",this._handleAutoScroll):(F(document,"pointermove",this._handleFallbackAutoScroll),F(document,"touchmove",this._handleFallbackAutoScroll),F(document,"mousemove",this._handleFallbackAutoScroll)),kt(),bt(),clearTimeout(B),B=void 0},nulling:function(){mt=dt=ft=yt=vt=pt=ht=null,gt.length=0},_handleFallbackAutoScroll:function(e){this._handleAutoScroll(e,!0)},_handleAutoScroll:function(e,t){var n=this,r=(e.touches?e.touches[0]:e).clientX,a=(e.touches?e.touches[0]:e).clientY,o=document.elementFromPoint(r,a);if(mt=e,t||D||O||M){wt(e,this.options,o,t);var i=te(o,!0);!yt||vt&&r===pt&&a===ht||(vt&&kt(),vt=setInterval((function(){var o=te(document.elementFromPoint(r,a),!0);o!==i&&(i=o,bt()),wt(e,n.options,o,t)}),10),pt=r,ht=a)}else{if(!this.options.bubbleScroll||te(o,!0)===Y())return void bt();wt(e,this.options,te(o,!1),!1)}}},x(e,{pluginName:"scroll",initializeByDefault:!0})}),at.mount(Ct,Et);const Tt=at;function xt(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=s(e);if(t){var a=s(this).constructor;n=Reflect.construct(r,arguments,a)}else n=r.apply(this,arguments);return u(this,n)}}var _t=function(t){o(a,t);var n=xt(a);function a(t){var r;return e(this,a),d(l(r=n.call(this,t)),"deleteTask",(function(e){v.get().deleteTask(e),r.updateTasks()})),d(l(r),"toggleTaskStatus",(function(e){e.toggleStatus(),e.completed||v.get().moveTaskToTop(e),setTimeout((function(){r.taskStatusUpdated()}),300)})),d(l(r),"handleTaskTextChange",(function(){v.get().save()})),d(l(r),"taskCompletedDragging",(function(e){var t="open-tasks"==e.from.id,n="completed-tasks"==e.to.id,a=!n,o=e.oldIndex,i=e.newIndex,l=r.taskAtIndex(t?0:1,o),u=r.taskAtIndex(a?0:1,i);v.get().changeTaskPosition(l,u),n?l.markCompleted():l.markOpen(),r.taskStatusUpdated()})),d(l(r),"createTask",(function(e){v.get().setUnsavedTask("");var t=v.get().createTask(e);v.get().addTask(t),r.updateTasks()})),d(l(r),"saveUnsavedTask",(function(e){v.get().setUnsavedTask(e),v.get().save(),r.updateTasks()})),d(l(r),"onReopenCompleted",(function(){confirm("Are you sure you want to reopen completed tasks?")&&(v.get().reopenCompleted(),r.updateTasks())})),d(l(r),"onDeleteCompleted",(function(){confirm("Are you sure you want to delete completed tasks?")&&(v.get().deleteCompleted(),r.updateTasks())})),r.state={unsavedTask:"",openTasks:[],completedTasks:[]},v.get().setDataChangeHandler((function(){r.initiateSorting(),r.updateTasks()})),v.get().setOnReady((function(){var e=v.get().getPlatform();document.documentElement.className+=e,r.setState({ready:!0})})),r}return r(a,[{key:"componentDidMount",value:function(){v.get().initiateBridge(),this.updateTasks()}},{key:"initiateSorting",value:function(){if(!this.didInitiateSorting){this.didInitiateSorting=!0;var e={delay:100,delayOnTouchOnly:!0,draggable:".task",dragClass:"task-dragging",handle:".checkbox-container",onEnd:this.taskCompletedDragging,name:"open-tasks"};Tt.create(document.getElementById("open-tasks"),e),e.name="completed-tasks",Tt.create(document.getElementById("completed-tasks"),e)}}},{key:"updateTasks",value:function(){this.setState(v.get().splitTasks())}},{key:"taskStatusUpdated",value:function(){this.updateTasks(),v.get().save()}},{key:"taskAtIndex",value:function(e,t){return 0==e?this.state.openTasks[t]:this.state.completedTasks[t]}},{key:"taskRowForTask",value:function(e){return c.createElement(w,{task:e,handleCheckboxChange:this.toggleTaskStatus,handleTextChange:this.handleTaskTextChange,deleteTask:this.deleteTask,key:v.get().keyForTask(e),spellcheckEnabled:v.get().spellcheckEnabled})}},{key:"render",value:function(){var e=this,t=this.state,n=t.unsavedTask,r=t.openTasks,a=t.completedTasks;return c.createElement(c.Fragment,null,this.state.ready&&c.createElement("div",{className:"task-input"},c.createElement(E,{onSubmit:this.createTask,onUpdate:this.saveUnsavedTask,unsavedTask:n})),c.createElement("div",{className:"task-section"},c.createElement("h3",null,"Open Tasks"),c.createElement("div",{id:"open-tasks"},r.map((function(t,n){return e.taskRowForTask(t,n)})))),c.createElement("div",{className:"task-section"},c.createElement("h3",null,"Completed Tasks"),c.createElement("div",{id:"completed-tasks"},a.map((function(t,n){return e.taskRowForTask(t,n)}))),a.length>0&&c.createElement("div",null,c.createElement("a",{className:"clear-button",onClick:this.onReopenCompleted},"Reopen Completed"),c.createElement("a",{className:"clear-button",onClick:this.onDeleteCompleted},"Delete Completed"))))}}]),a}(c.Component);function Pt(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=s(e);if(t){var a=s(this).constructor;n=Reflect.construct(r,arguments,a)}else n=r.apply(this,arguments);return u(this,n)}}var Nt=function(t){o(a,t);var n=Pt(a);function a(t){return e(this,a),n.call(this,t)}return r(a,[{key:"render",value:function(){return c.createElement("div",{className:"sn-component"},c.createElement(_t,null))}}]),a}(c.Component);f.render(c.createElement(Nt,null),document.body.appendChild(document.createElement("div")))})()})();
\ No newline at end of file
diff --git a/public/components/org.standardnotes.simple-task-editor/package.json b/public/components/org.standardnotes.simple-task-editor/package.json
index c19a77e49..d64c6d877 100644
--- a/public/components/org.standardnotes.simple-task-editor/package.json
+++ b/public/components/org.standardnotes.simple-task-editor/package.json
@@ -1,13 +1,14 @@
 {
-  "name": "sn-simple-task-editor",
-  "version": "1.3.9",
+  "name": "@standardnotes/simple-task-editor",
+  "version": "1.3.10",
   "main": "dist/dist.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "webpack --config webpack.prod.js",
     "start": "webpack serve --config webpack.dev.js --progress --hot",
     "lint": "eslint app/ --ext .js",
-    "lint:fix": "yarn lint --fix"
+    "lint:fix": "yarn lint --fix",
+    "prepublishOnly": "npm run build"
   },
   "sn": {
     "main": "dist/index.html"
@@ -39,9 +40,13 @@
     "style-loader": "^1.0.1",
     "terser-webpack-plugin": "^5.1.1",
     "validate-commit-msg": "2.x",
-    "webpack": "^5.24.4",
-    "webpack-cli": "^4.5.0",
-    "webpack-dev-server": "^3.11.2",
-    "webpack-merge": "^5.7.3"
+    "webpack": "5.24.4",
+    "webpack-cli": "4.5.0",
+    "webpack-dev-server": "3.11.2",
+    "webpack-merge": "5.7.3"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index fe03b3719..339736956 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2437,10 +2437,10 @@
   resolved "https://registry.yarnpkg.com/@standardnotes/common/-/common-1.20.1.tgz#e6eb0b53bd15973248fd2fd406a4f17c2c595b28"
   integrity sha512-Oea30Q8BpWsoCP2U5iKZ06c5e2c0O7L/FYrYDIbzwILfNLRaEZvvMk++ylWnN3cm1E/98n8w7tJOtJoNJZIZfQ==
 
-"@standardnotes/components@1.8.0":
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/components/-/components-1.8.0.tgz#eaeadd6c0eb36c034cd2c9d6b625f463a0188482"
-  integrity sha512-mgbekII0aMVkVuNZNXspLUoTP/fTf74Mz6ic91/8ca7S/e/4TcFg9OgTBV5Fqy/ShA42fhHEfJUG4QgRR+KdOw==
+"@standardnotes/components@1.8.1":
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/components/-/components-1.8.1.tgz#8bb3b9ed54fcf5c9c0668e170f4117c3c97070d8"
+  integrity sha512-aUrbtB9NNQEmFds+CEVEYSP9gcWfkRCi26soRhQKTpXNpS9dUgiF1uUdzyVcuL14xrRMV1ZcOyQXi00m44QxLQ==
 
 "@standardnotes/config@^2.4.3":
   version "2.4.3"
@@ -2453,49 +2453,49 @@
     eslint-plugin-prettier "^4.0.0"
     prettier "^2.6.2"
 
-"@standardnotes/domain-events@^2.28.5":
-  version "2.28.5"
-  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.28.5.tgz#0e7d365ca95695e19547d1f277412034a88caa9d"
-  integrity sha512-H88TGAAH8nPFnSmyTRwi0GNcKbqvezDL2hNgU3ivDwcDtumi0BZA/dkwyY65h9yrI2F/rWamIklyQYKi6MFuVg==
+"@standardnotes/domain-events@^2.28.6":
+  version "2.28.6"
+  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.28.6.tgz#3760a0dfd0275cb950bb070d6f5a7f4808145cb8"
+  integrity sha512-/31tRJxcK8jLO9pjlvbgVfXiCma+BnGt2OdCzXetary/0ee/9unrJzQZhhH+LTtgba7eUjIX/9jTTMR/wuKl/g==
   dependencies:
     "@standardnotes/auth" "^3.18.15"
-    "@standardnotes/features" "^1.43.1"
+    "@standardnotes/features" "^1.43.2"
 
-"@standardnotes/encryption@^1.7.5":
-  version "1.7.5"
-  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.7.5.tgz#b73690e1607b3e348867ed958a3e8c4ad5b43fad"
-  integrity sha512-6FqMhR9Y5lhmCd+nySGf96bfCbMkZnz8zS9q8VnGG6AldRdCeXI0jE5KmxmWLC/GePC3kg2tuw49gbtFm0/xZw==
+"@standardnotes/encryption@^1.7.6":
+  version "1.7.6"
+  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.7.6.tgz#26b8fc6e3ddc3c62bf634befc605619c6e1d37cf"
+  integrity sha512-f7HewUW2cvEYJ3ZgFnA6a1LlYxG+CuZlVNtuTBrieDOPrrQZksYsVwhK0Yhdn6qMbR2ce4Me7KgC9eWpUwo+Bg==
   dependencies:
-    "@standardnotes/models" "^1.8.4"
-    "@standardnotes/responses" "^1.6.21"
-    "@standardnotes/services" "^1.11.5"
+    "@standardnotes/models" "^1.8.5"
+    "@standardnotes/responses" "^1.6.22"
+    "@standardnotes/services" "^1.11.6"
 
-"@standardnotes/features@^1.43.1":
-  version "1.43.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.43.1.tgz#b7f6dfce064b6d7d8dc2e82e2eaac80394d11a19"
-  integrity sha512-HsvCmBuQYcWcL5zFSHmAdkMw1tLxQ2Ch6kdKcv/ZWwIRLJtSQ9NSHHuTfP099bISlDCRwMVUkOQp8XsmDNgZLQ==
+"@standardnotes/features@^1.43.2":
+  version "1.43.2"
+  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.43.2.tgz#91a9e2f77c88b1d9edeca93991e5e059c59fcd8f"
+  integrity sha512-hyqxhchV8UHc35lbssPLBWpP4zmVW3GtrVV5at90JU15Kmx6BNut8c4GahvR9Z/PW+TLo+0NufSeHRQjRl3pBg==
   dependencies:
     "@standardnotes/auth" "^3.18.15"
     "@standardnotes/common" "^1.20.1"
 
-"@standardnotes/filepicker@1.14.5", "@standardnotes/filepicker@^1.14.5":
-  version "1.14.5"
-  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.14.5.tgz#0c877fd77ad5cc8a2133ef798318d14762051a00"
-  integrity sha512-zMiv5ROiMGk5sgv3duKMCByJkc4ruoVwRMx2zoOdJMPm3DN7RD8zXSTl3HDnX7DeBI/mTFyM1SqNxph62aG1TA==
+"@standardnotes/filepicker@1.14.6", "@standardnotes/filepicker@^1.14.6":
+  version "1.14.6"
+  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.14.6.tgz#5b24f288ccc73c3dd3dd150dfaba71de3349708c"
+  integrity sha512-IzKpyRcecPk7XjjVDjRBlSN4ZCe/ELckQR7Wc0aesF3gz6CELvNB4m/fee0A3D6sDbUcXC6qL3HC/fXlV4lqmw==
   dependencies:
     "@standardnotes/common" "^1.20.1"
-    "@standardnotes/services" "^1.11.5"
+    "@standardnotes/services" "^1.11.6"
     "@standardnotes/utils" "^1.6.8"
 
-"@standardnotes/files@^1.1.6":
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.1.6.tgz#0ad02a3a44a008ac2b01b3ba5d02abef4069c097"
-  integrity sha512-dckFtWeDZGMOYwHthizqrkJqcIdcjjkS9Wf0t7B8Z9srKomS+lc2MqIboY2AXkOZDytbsSHEA501BKX725cp2w==
+"@standardnotes/files@^1.1.7":
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.1.7.tgz#8ddca6056df384e844436641ec3171451ca36e1b"
+  integrity sha512-XJIaqa3wwnH/by6n5fBpp0uQDW4HSbw8qXPitBjedF8ERG/7vzKjWAPyLqzioFSUuLctxsXdZmU1xaYzjNVVeg==
   dependencies:
-    "@standardnotes/encryption" "^1.7.5"
-    "@standardnotes/models" "^1.8.4"
-    "@standardnotes/responses" "^1.6.21"
-    "@standardnotes/services" "^1.11.5"
+    "@standardnotes/encryption" "^1.7.6"
+    "@standardnotes/models" "^1.8.5"
+    "@standardnotes/responses" "^1.6.22"
+    "@standardnotes/services" "^1.11.6"
     "@standardnotes/utils" "^1.6.8"
 
 "@standardnotes/icons@^1.1.7":
@@ -2503,33 +2503,33 @@
   resolved "https://registry.yarnpkg.com/@standardnotes/icons/-/icons-1.1.7.tgz#4523d8e2e3aa34d0e921df802d54c0babe054279"
   integrity sha512-yHB/KInj7qSmtnUqtTo6CPttu+2+oAwdANfjE3a69sgS7nVBxUuwSHHxb9xUOKpJBmipFjJi5F0YVF9kLmHiwg==
 
-"@standardnotes/models@^1.8.4":
-  version "1.8.4"
-  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.8.4.tgz#90f1c76329a80c52d015fee1efefbc3b16b135ef"
-  integrity sha512-z+kntdmqLOG3YwwT9LjHdDGeYGG9uHnqU01EqgR47N04f3pZ69R2yS3YclYZ5QAuc1zt850Yxyw9B8arEFLP+Q==
+"@standardnotes/models@^1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.8.5.tgz#e758725cc9996af6c374adb0c89148c27d4008f5"
+  integrity sha512-s4nVGLohjiEnALgRYR0oaZaAzacY8OeABE7uVR6l0N4n9zxMhVfWi6J0/jwXgGXQMJA3DB4ZoyVAr9XdjGEyhw==
   dependencies:
-    "@standardnotes/features" "^1.43.1"
-    "@standardnotes/responses" "^1.6.21"
+    "@standardnotes/features" "^1.43.2"
+    "@standardnotes/responses" "^1.6.22"
     "@standardnotes/utils" "^1.6.8"
 
-"@standardnotes/responses@^1.6.21":
-  version "1.6.21"
-  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.6.21.tgz#5164eaa729fb3b6208c82a90bbfe9c43188c469f"
-  integrity sha512-iotivpdauTpzgc/mM/jZvB5SZdr2XnxJpO6lSJu8YeZzRwCRfZDn9WORT1D35P3ITpvB755F5auxYRqXSUW/5w==
+"@standardnotes/responses@^1.6.22":
+  version "1.6.22"
+  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.6.22.tgz#eeb020ed9ee2326152ab5259ccc1f2af68277872"
+  integrity sha512-DavG6zZyXtBKL3kvauRGA4y24laEpU9kGTLWFj16zXj1O2FfX3fnNMPgF84mWjlZ/GwiQ8rqXLCPD77Z3OiXhA==
   dependencies:
     "@standardnotes/auth" "^3.18.15"
     "@standardnotes/common" "^1.20.1"
-    "@standardnotes/features" "^1.43.1"
+    "@standardnotes/features" "^1.43.2"
 
-"@standardnotes/services@^1.11.5":
-  version "1.11.5"
-  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.11.5.tgz#cf808363f136f168d66dff6d8a8268bba455bd9b"
-  integrity sha512-6oAPQmn99mLkt1z77yPl55XOoFkMeLYG7kjqX60WVgZkD7N35pqYOADwzYZtpXCSfqvj+A/UBOnT6WjMiQWUkQ==
+"@standardnotes/services@^1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.11.6.tgz#a8a465ec9141c1e61371b059d13688a3553d44f5"
+  integrity sha512-L/prG4H9uAyFiFBeFqexbzVxjSjmxYMzbDlKWSjRxvtqPgBwm2KA7Aebfd/mlfYPaQ2BLrfVS5rkkE4ho4+EZA==
   dependencies:
     "@standardnotes/auth" "^3.18.15"
     "@standardnotes/common" "^1.20.1"
-    "@standardnotes/models" "^1.8.4"
-    "@standardnotes/responses" "^1.6.21"
+    "@standardnotes/models" "^1.8.5"
+    "@standardnotes/responses" "^1.6.22"
     "@standardnotes/utils" "^1.6.8"
 
 "@standardnotes/settings@^1.14.3":
@@ -2551,21 +2551,21 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.108.3":
-  version "2.108.3"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.108.3.tgz#e30dfb2bda088ec99e87802865b4a1b9e8a95a4a"
-  integrity sha512-J68VXZgxOYoLow8oGR2egldCQRD59Vb0NCZe96eY4IOZgltkQSw9eC7vq+sYkZhRshHhFYZ7n+GGH4pFPqIlzg==
+"@standardnotes/snjs@2.108.4":
+  version "2.108.4"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.108.4.tgz#8a0d8c6d4a812c9a98a759fcd70e02e61ccd9f6b"
+  integrity sha512-Yd72tygPx1H+tMtvlm/ghigxSo+2REpNpYfKVEXrJgVd7VvttkCc+8vvhelu8E2SVWv7EPbACVpBvWOCzr6Vqw==
   dependencies:
     "@standardnotes/auth" "^3.18.15"
     "@standardnotes/common" "^1.20.1"
-    "@standardnotes/domain-events" "^2.28.5"
-    "@standardnotes/encryption" "^1.7.5"
-    "@standardnotes/features" "^1.43.1"
-    "@standardnotes/filepicker" "^1.14.5"
-    "@standardnotes/files" "^1.1.6"
-    "@standardnotes/models" "^1.8.4"
-    "@standardnotes/responses" "^1.6.21"
-    "@standardnotes/services" "^1.11.5"
+    "@standardnotes/domain-events" "^2.28.6"
+    "@standardnotes/encryption" "^1.7.6"
+    "@standardnotes/features" "^1.43.2"
+    "@standardnotes/filepicker" "^1.14.6"
+    "@standardnotes/files" "^1.1.7"
+    "@standardnotes/models" "^1.8.5"
+    "@standardnotes/responses" "^1.6.22"
+    "@standardnotes/services" "^1.11.6"
     "@standardnotes/settings" "^1.14.3"
     "@standardnotes/sncrypto-common" "^1.8.2"
     "@standardnotes/utils" "^1.6.8"

From 27f864aa1d2877e4a4d5f8974085a8277a880d3b Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Tue, 17 May 2022 11:14:30 -0500
Subject: [PATCH 089/102] fix: locking message (#1029)

---
 .../Components/ApplicationGroupView/index.tsx |  13 +-
 .../Extensions/ExtensionsLatestVersions.ts    |   1 -
 package.json                                  |   9 +-
 yarn.lock                                     | 532 ++++--------------
 4 files changed, 112 insertions(+), 443 deletions(-)

diff --git a/app/assets/javascripts/Components/ApplicationGroupView/index.tsx b/app/assets/javascripts/Components/ApplicationGroupView/index.tsx
index 102d2a953..f486a924c 100644
--- a/app/assets/javascripts/Components/ApplicationGroupView/index.tsx
+++ b/app/assets/javascripts/Components/ApplicationGroupView/index.tsx
@@ -3,7 +3,7 @@ import { WebApplication } from '@/UIModels/Application'
 import { Component } from 'preact'
 import { ApplicationView } from '@/Components/ApplicationView'
 import { WebOrDesktopDevice } from '@/Device/WebOrDesktopDevice'
-import { ApplicationGroupEvent, Runtime } from '@standardnotes/snjs'
+import { ApplicationGroupEvent, Runtime, ApplicationGroupEventData, DeinitSource } from '@standardnotes/snjs'
 import { unmountComponentAtNode, findDOMNode } from 'preact/compat'
 import { DialogContent, DialogOverlay } from '@reach/dialog'
 import { isDesktopApplication } from '@/Utils'
@@ -19,6 +19,7 @@ type Props = {
 type State = {
   activeApplication?: WebApplication
   dealloced?: boolean
+  deallocSource?: DeinitSource
   deviceDestroyed?: boolean
 }
 
@@ -49,11 +50,14 @@ export class ApplicationGroupView extends Component<Props, State> {
 
     this.applicationObserverRemover = this.group.addEventObserver((event, data) => {
       if (event === ApplicationGroupEvent.PrimaryApplicationSet) {
-        this.application = data?.primaryApplication as WebApplication
+        const castData = data as ApplicationGroupEventData[ApplicationGroupEvent.PrimaryApplicationSet]
 
+        this.application = castData.application as WebApplication
         this.setState({ activeApplication: this.application })
       } else if (event === ApplicationGroupEvent.DeviceWillRestart) {
-        this.setState({ dealloced: true })
+        const castData = data as ApplicationGroupEventData[ApplicationGroupEvent.DeviceWillRestart]
+
+        this.setState({ dealloced: true, deallocSource: castData.source })
       }
     })
 
@@ -107,7 +111,8 @@ export class ApplicationGroupView extends Component<Props, State> {
     }
 
     if (this.state.dealloced) {
-      return renderDialog('Switching workspace...')
+      const message = this.state.deallocSource === DeinitSource.Lock ? 'Locking workspace...' : 'Switching workspace...'
+      return renderDialog(message)
     }
 
     if (!this.group || !this.state.activeApplication || this.state.activeApplication.dealloced) {
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionsLatestVersions.ts b/app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionsLatestVersions.ts
index 4c998faac..26170078b 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionsLatestVersions.ts
+++ b/app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionsLatestVersions.ts
@@ -11,7 +11,6 @@ export class ExtensionsLatestVersions {
     }
 
     const versionMap: Map<string, string> = new Map()
-    collectFeatures(response.CORE_PLAN?.features as FeatureDescription[], versionMap)
     collectFeatures(response.PLUS_PLAN?.features as FeatureDescription[], versionMap)
     collectFeatures(response.PRO_PLAN?.features as FeatureDescription[], versionMap)
 
diff --git a/package.json b/package.json
index 1a47bcc13..ccdfe4916 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,8 @@
     "test": "jest --config app/assets/javascripts/jest.config.js",
     "test:coverage": "yarn test --coverage",
     "prepare": "husky install",
-    "postinstall": "yarn run ncu -loglevel verbose --packageFile package.json"
+    "postinstall": "yarn run ncu -loglevel verbose --packageFile package.json",
+    "upgrade:snjs": "ncu -u '@standardnotes/*' && yarn"
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",
@@ -69,11 +70,11 @@
     "@reach/tooltip": "^0.16.2",
     "@reach/visually-hidden": "^0.16.0",
     "@standardnotes/components": "1.8.1",
-    "@standardnotes/filepicker": "1.14.6",
+    "@standardnotes/filepicker": "1.14.7",
     "@standardnotes/icons": "^1.1.7",
     "@standardnotes/sncrypto-web": "1.9.2",
-    "@standardnotes/snjs": "2.108.4",
-    "@standardnotes/stylekit": "5.26.0",
+    "@standardnotes/snjs": "2.109.1",
+    "@standardnotes/stylekit": "5.27.0",
     "@zip.js/zip.js": "^2.4.10",
     "mobx": "^6.5.0",
     "mobx-react-lite": "^3.3.0",
diff --git a/yarn.lock b/yarn.lock
index 339736956..5d7d8b8d2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -99,27 +99,6 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/core@^7.15.5":
-  version "7.16.12"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.16.12.tgz#5edc53c1b71e54881315923ae2aedea2522bb784"
-  integrity sha512-dK5PtG1uiN2ikk++5OzSYsitZKny4wOCD0nrO4TqnW4BVBTQ2NGS3NgilvT/TEyxTST7LNyWV/T4tXDoD3fOgg==
-  dependencies:
-    "@babel/code-frame" "^7.16.7"
-    "@babel/generator" "^7.16.8"
-    "@babel/helper-compilation-targets" "^7.16.7"
-    "@babel/helper-module-transforms" "^7.16.7"
-    "@babel/helpers" "^7.16.7"
-    "@babel/parser" "^7.16.12"
-    "@babel/template" "^7.16.7"
-    "@babel/traverse" "^7.16.10"
-    "@babel/types" "^7.16.8"
-    convert-source-map "^1.7.0"
-    debug "^4.1.0"
-    gensync "^1.0.0-beta.2"
-    json5 "^2.1.2"
-    semver "^6.3.0"
-    source-map "^0.5.0"
-
 "@babel/core@^7.17.9":
   version "7.17.9"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.17.9.tgz#6bae81a06d95f4d0dec5bb9d74bbc1f58babdcfe"
@@ -232,13 +211,6 @@
   dependencies:
     "@babel/types" "^7.10.4"
 
-"@babel/helper-annotate-as-pure@^7.15.4":
-  version "7.15.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.15.4.tgz#3d0e43b00c5e49fdb6c57e421601a7a658d5f835"
-  integrity sha512-QwrtdNvUNsPCj2lfNQacsGSQvGX8ee1ttrBrcozUP2Sv/jylewBP/8QFe6ZkBsC8T/GYWonNAWJV4aRR9AL2DA==
-  dependencies:
-    "@babel/types" "^7.15.4"
-
 "@babel/helper-annotate-as-pure@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz#bb2339a7534a9c128e3102024c60760a3a7f3862"
@@ -294,18 +266,6 @@
     browserslist "^4.17.5"
     semver "^6.3.0"
 
-"@babel/helper-create-class-features-plugin@^7.15.4":
-  version "7.15.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.15.4.tgz#7f977c17bd12a5fba363cb19bea090394bf37d2e"
-  integrity sha512-7ZmzFi+DwJx6A7mHRwbuucEYpyBwmh2Ca0RvI6z2+WLZYCqV0JOaLb+u0zbtmDicebgKBZgqbYfLaKNqSgv5Pw==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.15.4"
-    "@babel/helper-function-name" "^7.15.4"
-    "@babel/helper-member-expression-to-functions" "^7.15.4"
-    "@babel/helper-optimise-call-expression" "^7.15.4"
-    "@babel/helper-replace-supers" "^7.15.4"
-    "@babel/helper-split-export-declaration" "^7.15.4"
-
 "@babel/helper-create-class-features-plugin@^7.16.10", "@babel/helper-create-class-features-plugin@^7.16.7":
   version "7.16.10"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.16.10.tgz#8a6959b9cc818a88815ba3c5474619e9c0f2c21c"
@@ -463,13 +423,6 @@
   dependencies:
     "@babel/types" "^7.12.7"
 
-"@babel/helper-member-expression-to-functions@^7.15.4":
-  version "7.15.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.15.4.tgz#bfd34dc9bba9824a4658b0317ec2fd571a51e6ef"
-  integrity sha512-cokOMkxC/BTyNP1AlY25HuBWM32iCEsLPI4BHDpJCHHm1FU2E7dKWWIXJgQgSFiu4lp8q3bL1BIKwqkSUviqtA==
-  dependencies:
-    "@babel/types" "^7.15.4"
-
 "@babel/helper-member-expression-to-functions@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.16.0.tgz#29287040efd197c77636ef75188e81da8bccd5a4"
@@ -576,13 +529,6 @@
   dependencies:
     "@babel/types" "^7.12.7"
 
-"@babel/helper-optimise-call-expression@^7.15.4":
-  version "7.15.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.15.4.tgz#f310a5121a3b9cc52d9ab19122bd729822dee171"
-  integrity sha512-E/z9rfbAOt1vDW1DR7k4SzhzotVV5+qMciWV6LaG1g4jeFrkDlJedjtV4h0i4Q/ITnUu+Pk08M7fczsB9GXBDw==
-  dependencies:
-    "@babel/types" "^7.15.4"
-
 "@babel/helper-optimise-call-expression@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.0.tgz#cecdb145d70c54096b1564f8e9f10cd7d193b338"
@@ -636,16 +582,6 @@
     "@babel/traverse" "^7.12.5"
     "@babel/types" "^7.12.5"
 
-"@babel/helper-replace-supers@^7.15.4":
-  version "7.15.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.15.4.tgz#52a8ab26ba918c7f6dee28628b07071ac7b7347a"
-  integrity sha512-/ztT6khaXF37MS47fufrKvIsiQkx1LBRvSJNzRqmbyeZnTwU9qBxXYLaaT/6KaxfKhjs2Wy8kG8ZdsFUuWBjzw==
-  dependencies:
-    "@babel/helper-member-expression-to-functions" "^7.15.4"
-    "@babel/helper-optimise-call-expression" "^7.15.4"
-    "@babel/traverse" "^7.15.4"
-    "@babel/types" "^7.15.4"
-
 "@babel/helper-replace-supers@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.16.0.tgz#73055e8d3cf9bcba8ddb55cad93fedc860f68f17"
@@ -788,15 +724,6 @@
     "@babel/traverse" "^7.16.3"
     "@babel/types" "^7.16.0"
 
-"@babel/helpers@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.16.7.tgz#7e3504d708d50344112767c3542fc5e357fffefc"
-  integrity sha512-9ZDoqtfY7AuEOt3cxchfii6C7GDyyMBffktR5B2jvWv8u2+efwvpnVKXMWzNehqy68tKgAfSwfdw/lWpthS2bw==
-  dependencies:
-    "@babel/template" "^7.16.7"
-    "@babel/traverse" "^7.16.7"
-    "@babel/types" "^7.16.7"
-
 "@babel/helpers@^7.17.2":
   version "7.17.2"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.17.2.tgz#23f0a0746c8e287773ccd27c14be428891f63417"
@@ -871,7 +798,7 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.8.tgz#7bacdcbe71bdc3ff936d510c15dcea7cf0b99016"
   integrity sha512-BRYa3wcQnjS/nqI8Ac94pYYpJfojHVvVXJ97+IDCImX4Jc8W8Xv1+47enbruk+q1etOpsQNwnfFcNGw+gtPGxA==
 
-"@babel/parser@^7.16.10", "@babel/parser@^7.16.12", "@babel/parser@^7.16.7":
+"@babel/parser@^7.16.10", "@babel/parser@^7.16.7":
   version "7.16.12"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.12.tgz#9474794f9a650cf5e2f892444227f98e28cdf8b6"
   integrity sha512-VfaV15po8RiZssrkPweyvbGVSe4x2y+aciFCgn0n0/SJMR22cwofRV1mtnJQYcSB1wUTaA/X1LnA3es66MCO5A==
@@ -1157,13 +1084,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-syntax-typescript@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.14.5.tgz#b82c6ce471b165b5ce420cf92914d6fb46225716"
-  integrity sha512-u6OXzDaIXjEstBRRoBCQ/uKQKlbuaeE5in0RvWdA4pN6AhqxTIwUsnHPU1CFZA/amYObMsuWhYfRl3Ch90HD0Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.14.5"
-
 "@babel/plugin-syntax-typescript@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.16.7.tgz#39c9b55ee153151990fb038651d58d3fd03f98f8"
@@ -1371,38 +1291,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-react-constant-elements@^7.14.5":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.16.7.tgz#19e9e4c2df2f6c3e6b3aea11778297d81db8df62"
-  integrity sha512-lF+cfsyTgwWkcw715J88JhMYJ5GpysYNLhLP1PkvkhTRN7B3e74R/1KsDxFxhRpSn0UUD3IWM4GvdBR2PEbbQQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
-
-"@babel/plugin-transform-react-display-name@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.16.7.tgz#7b6d40d232f4c0f550ea348593db3b21e2404340"
-  integrity sha512-qgIg8BcZgd0G/Cz916D5+9kqX0c7nPZyXaP8R2tLNN5tkyIZdG5fEwBrxwplzSnjC1jvQmyMNVwUCZPcbGY7Pg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
-
-"@babel/plugin-transform-react-jsx-development@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.16.7.tgz#43a00724a3ed2557ed3f276a01a929e6686ac7b8"
-  integrity sha512-RMvQWvpla+xy6MlBpPlrKZCMRs2AGiHOGHY3xRwl0pEeim348dDyxeH4xBsMPbIMhujeq7ihE702eM2Ew0Wo+A==
-  dependencies:
-    "@babel/plugin-transform-react-jsx" "^7.16.7"
-
-"@babel/plugin-transform-react-jsx@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.16.7.tgz#86a6a220552afd0e4e1f0388a68a372be7add0d4"
-  integrity sha512-8D16ye66fxiE8m890w0BpPpngG9o9OVBBy0gH2E+2AR7qMR2ZpTYJEqLxAsoroenMId0p/wMW+Blc0meDgu0Ag==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.16.7"
-    "@babel/helper-module-imports" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
-    "@babel/plugin-syntax-jsx" "^7.16.7"
-    "@babel/types" "^7.16.7"
-
 "@babel/plugin-transform-react-jsx@^7.17.3":
   version "7.17.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.17.3.tgz#eac1565da176ccb1a715dae0b4609858808008c1"
@@ -1414,14 +1302,6 @@
     "@babel/plugin-syntax-jsx" "^7.16.7"
     "@babel/types" "^7.17.0"
 
-"@babel/plugin-transform-react-pure-annotations@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.16.7.tgz#232bfd2f12eb551d6d7d01d13fe3f86b45eb9c67"
-  integrity sha512-hs71ToC97k3QWxswh2ElzMFABXHvGiJ01IB1TbYQDGeWRKWz/MPUTh5jGExdHvosYKpnJW5Pm3S4+TA3FyX+GA==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
-
 "@babel/plugin-transform-regenerator@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.16.7.tgz#9e7576dc476cb89ccc5096fff7af659243b4adeb"
@@ -1472,15 +1352,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-typescript@^7.15.0":
-  version "7.15.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.15.8.tgz#ff0e6a47de9b2d58652123ab5a879b2ff20665d8"
-  integrity sha512-ZXIkJpbaf6/EsmjeTbiJN/yMxWPFWvlr7sEG1P95Xb4S4IBcrf2n7s/fItIhsAmOf8oSh3VJPDppO6ExfAfKRQ==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.15.4"
-    "@babel/helper-plugin-utils" "^7.14.5"
-    "@babel/plugin-syntax-typescript" "^7.14.5"
-
 "@babel/plugin-transform-typescript@^7.16.7":
   version "7.16.8"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.16.8.tgz#591ce9b6b83504903fa9dd3652c357c2ba7a1ee0"
@@ -1505,7 +1376,7 @@
     "@babel/helper-create-regexp-features-plugin" "^7.16.7"
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/preset-env@^7.15.6", "@babel/preset-env@^7.16.11":
+"@babel/preset-env@^7.16.11":
   version "7.16.11"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.16.11.tgz#5dd88fd885fae36f88fd7c8342475c9f0abe2982"
   integrity sha512-qcmWG8R7ZW6WBRPZK//y+E3Cli151B20W1Rv7ln27vuPaXU/8TKms6jFdiJtF7UDTxcrb7mZd88tAeK9LjdT8g==
@@ -1596,27 +1467,6 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/preset-react@^7.14.5":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.16.7.tgz#4c18150491edc69c183ff818f9f2aecbe5d93852"
-  integrity sha512-fWpyI8UM/HE6DfPBzD8LnhQ/OcH8AgTaqcqP2nGOXEUV+VKBR5JRN9hCk9ai+zQQ57vtm9oWeXguBCPNUjytgA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
-    "@babel/helper-validator-option" "^7.16.7"
-    "@babel/plugin-transform-react-display-name" "^7.16.7"
-    "@babel/plugin-transform-react-jsx" "^7.16.7"
-    "@babel/plugin-transform-react-jsx-development" "^7.16.7"
-    "@babel/plugin-transform-react-pure-annotations" "^7.16.7"
-
-"@babel/preset-typescript@^7.15.0":
-  version "7.15.0"
-  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.15.0.tgz#e8fca638a1a0f64f14e1119f7fe4500277840945"
-  integrity sha512-lt0Y/8V3y06Wq/8H/u0WakrqciZ7Fz7mwPDHWUJAXlABL5hiUG42BNlRXiELNjeWjO5rWmnNKlx+yzJvxezHow==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.14.5"
-    "@babel/helper-validator-option" "^7.14.5"
-    "@babel/plugin-transform-typescript" "^7.15.0"
-
 "@babel/preset-typescript@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.16.7.tgz#ab114d68bb2020afc069cd51b37ff98a046a70b9"
@@ -1713,7 +1563,7 @@
     globals "^11.1.0"
     lodash "^4.17.19"
 
-"@babel/traverse@^7.13.0", "@babel/traverse@^7.15.4":
+"@babel/traverse@^7.13.0":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.15.4.tgz#ff8510367a144bfbff552d9e18e28f3e2889c22d"
   integrity sha512-W6lQD8l4rUbQR/vYgSuCAE75ADyyQvOpFVsvPPdkhf6lATXAsQIG9YdtOcu8BB1dZ0LKu+Zo3c1wEcbKeuhdlA==
@@ -1743,7 +1593,7 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/traverse@^7.16.10", "@babel/traverse@^7.16.7", "@babel/traverse@^7.16.8":
+"@babel/traverse@^7.16.7", "@babel/traverse@^7.16.8":
   version "7.16.10"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.16.10.tgz#448f940defbe95b5a8029975b051f75993e8239f"
   integrity sha512-yzuaYXoRJBGMlBhsMJoUW7G1UmSb/eXr/JHYM/MsOJgavJibLwASijW7oXBdw3NQ6T0bW7Ty5P/VarOs9cHmqw==
@@ -2424,18 +2274,18 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@standardnotes/auth@^3.18.15":
-  version "3.18.15"
-  resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.18.15.tgz#2d8338a8ebdeffcf08668d57c3ae5399b4e51622"
-  integrity sha512-ep9mgAaXuPGme9JjLtLds9rPnt/yKGB1kdQBMfitGK8Ce6MeS3d0F0cOJJK51xw74cGzdpgzjf34yrBgFqNyNg==
+"@standardnotes/auth@^3.18.16":
+  version "3.18.16"
+  resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.18.16.tgz#56af6d347f7d66a9c07bfee31396d3e3486f2aa0"
+  integrity sha512-wrkBRrHs4oMMyZ1yB1fFCiulVPf+vrB/x5+fZnlhOFxFS6oRaq2xop0sa+XIDZD6qat54JxT2ati5LyJglZ1nw==
   dependencies:
-    "@standardnotes/common" "^1.20.1"
+    "@standardnotes/common" "^1.21.0"
     jsonwebtoken "^8.5.1"
 
-"@standardnotes/common@^1.20.1":
-  version "1.20.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/common/-/common-1.20.1.tgz#e6eb0b53bd15973248fd2fd406a4f17c2c595b28"
-  integrity sha512-Oea30Q8BpWsoCP2U5iKZ06c5e2c0O7L/FYrYDIbzwILfNLRaEZvvMk++ylWnN3cm1E/98n8w7tJOtJoNJZIZfQ==
+"@standardnotes/common@^1.21.0":
+  version "1.21.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/common/-/common-1.21.0.tgz#57cd8ddd65ca827966d65801c5270f17aa16189d"
+  integrity sha512-TZKH/l2colOc68mn8FRTCoILpRHw5ZaJjpt/LPtPoRDy0ZPYbyKzRRzYVdoqZeEvJwDmGG24o3QB4xQpf3K0dA==
 
 "@standardnotes/components@1.8.1":
   version "1.8.1"
@@ -2453,84 +2303,84 @@
     eslint-plugin-prettier "^4.0.0"
     prettier "^2.6.2"
 
-"@standardnotes/domain-events@^2.28.6":
-  version "2.28.6"
-  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.28.6.tgz#3760a0dfd0275cb950bb070d6f5a7f4808145cb8"
-  integrity sha512-/31tRJxcK8jLO9pjlvbgVfXiCma+BnGt2OdCzXetary/0ee/9unrJzQZhhH+LTtgba7eUjIX/9jTTMR/wuKl/g==
+"@standardnotes/domain-events@^2.28.7":
+  version "2.28.7"
+  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.28.7.tgz#e24298d1f986e895e9f294dbe61d072bc7750c44"
+  integrity sha512-nDoqrxQm16X6hLF/v0wzt5z9PYwPgK+9erYekI38XhvW3ZcuWmG3W20rQD4qwg5wf8ojqDJelrdp//lH78/nTg==
   dependencies:
-    "@standardnotes/auth" "^3.18.15"
-    "@standardnotes/features" "^1.43.2"
+    "@standardnotes/auth" "^3.18.16"
+    "@standardnotes/features" "^1.44.0"
 
-"@standardnotes/encryption@^1.7.6":
-  version "1.7.6"
-  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.7.6.tgz#26b8fc6e3ddc3c62bf634befc605619c6e1d37cf"
-  integrity sha512-f7HewUW2cvEYJ3ZgFnA6a1LlYxG+CuZlVNtuTBrieDOPrrQZksYsVwhK0Yhdn6qMbR2ce4Me7KgC9eWpUwo+Bg==
+"@standardnotes/encryption@^1.7.7":
+  version "1.7.7"
+  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.7.7.tgz#c78bc2c7a33f9fb784e9631e055a35a300da2ced"
+  integrity sha512-U3yVYugjY70zJM8o0xflaJxKdjQ8zMDZHEN9SCPrBpFkabZsRPmfVO33vr9bvC3snj5i8sQPgbfPfFi3Pxqe7w==
   dependencies:
-    "@standardnotes/models" "^1.8.5"
-    "@standardnotes/responses" "^1.6.22"
-    "@standardnotes/services" "^1.11.6"
+    "@standardnotes/models" "^1.8.6"
+    "@standardnotes/responses" "^1.6.23"
+    "@standardnotes/services" "^1.11.7"
 
-"@standardnotes/features@^1.43.2":
-  version "1.43.2"
-  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.43.2.tgz#91a9e2f77c88b1d9edeca93991e5e059c59fcd8f"
-  integrity sha512-hyqxhchV8UHc35lbssPLBWpP4zmVW3GtrVV5at90JU15Kmx6BNut8c4GahvR9Z/PW+TLo+0NufSeHRQjRl3pBg==
+"@standardnotes/features@^1.44.0":
+  version "1.44.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.44.0.tgz#9063683d707e6506afe9c5af4f2e6a4a3edfeeeb"
+  integrity sha512-abrojnSxTVQWwM9LLe0I/3ty3nI5eUYwXz2OELTu+ZVAT0/GojMZ6xQTv8ThthiRvUhiuz12nauNDuWzlY7Cnw==
   dependencies:
-    "@standardnotes/auth" "^3.18.15"
-    "@standardnotes/common" "^1.20.1"
+    "@standardnotes/auth" "^3.18.16"
+    "@standardnotes/common" "^1.21.0"
 
-"@standardnotes/filepicker@1.14.6", "@standardnotes/filepicker@^1.14.6":
-  version "1.14.6"
-  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.14.6.tgz#5b24f288ccc73c3dd3dd150dfaba71de3349708c"
-  integrity sha512-IzKpyRcecPk7XjjVDjRBlSN4ZCe/ELckQR7Wc0aesF3gz6CELvNB4m/fee0A3D6sDbUcXC6qL3HC/fXlV4lqmw==
+"@standardnotes/filepicker@1.14.7", "@standardnotes/filepicker@^1.14.7":
+  version "1.14.7"
+  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.14.7.tgz#9f0ff2e88844a18234c6bc93449ef6c13a2cf08e"
+  integrity sha512-Oe41oNoayjQ4avmwV59vBqg9CfACECHTc0iGicJhQH2E++ErynXFr+ZmIDJEEj2ufIXbM+xiWDa5fWvzMbIcBw==
   dependencies:
-    "@standardnotes/common" "^1.20.1"
-    "@standardnotes/services" "^1.11.6"
-    "@standardnotes/utils" "^1.6.8"
+    "@standardnotes/common" "^1.21.0"
+    "@standardnotes/services" "^1.11.7"
+    "@standardnotes/utils" "^1.6.9"
 
-"@standardnotes/files@^1.1.7":
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.1.7.tgz#8ddca6056df384e844436641ec3171451ca36e1b"
-  integrity sha512-XJIaqa3wwnH/by6n5fBpp0uQDW4HSbw8qXPitBjedF8ERG/7vzKjWAPyLqzioFSUuLctxsXdZmU1xaYzjNVVeg==
+"@standardnotes/files@^1.1.8":
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.1.8.tgz#8d2978c5ce35353928c76051cd2906399b605117"
+  integrity sha512-+JFZ9koLJJd9Q+x4JX1WhmPDrGEjTQLOiUeTszcoeQd9qrV6K7nILhchQKgL0t924VhjpONA75w28tu96nI6vw==
   dependencies:
-    "@standardnotes/encryption" "^1.7.6"
-    "@standardnotes/models" "^1.8.5"
-    "@standardnotes/responses" "^1.6.22"
-    "@standardnotes/services" "^1.11.6"
-    "@standardnotes/utils" "^1.6.8"
+    "@standardnotes/encryption" "^1.7.7"
+    "@standardnotes/models" "^1.8.6"
+    "@standardnotes/responses" "^1.6.23"
+    "@standardnotes/services" "^1.11.7"
+    "@standardnotes/utils" "^1.6.9"
 
-"@standardnotes/icons@^1.1.7":
+"@standardnotes/icons@^1.1.6", "@standardnotes/icons@^1.1.7":
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/@standardnotes/icons/-/icons-1.1.7.tgz#4523d8e2e3aa34d0e921df802d54c0babe054279"
   integrity sha512-yHB/KInj7qSmtnUqtTo6CPttu+2+oAwdANfjE3a69sgS7nVBxUuwSHHxb9xUOKpJBmipFjJi5F0YVF9kLmHiwg==
 
-"@standardnotes/models@^1.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.8.5.tgz#e758725cc9996af6c374adb0c89148c27d4008f5"
-  integrity sha512-s4nVGLohjiEnALgRYR0oaZaAzacY8OeABE7uVR6l0N4n9zxMhVfWi6J0/jwXgGXQMJA3DB4ZoyVAr9XdjGEyhw==
+"@standardnotes/models@^1.8.6":
+  version "1.8.6"
+  resolved "https://registry.yarnpkg.com/@standardnotes/models/-/models-1.8.6.tgz#8200590020a6be5055866764b35c76f541c709ef"
+  integrity sha512-PndE968Rf6QAm0ATZ5zo7jQIlIjDJ2ydTS+B5tXxfFH75GkMrwqI4JAL2/do3hA55B7+wwVvqFewqx3u1uZV4Q==
   dependencies:
-    "@standardnotes/features" "^1.43.2"
-    "@standardnotes/responses" "^1.6.22"
-    "@standardnotes/utils" "^1.6.8"
+    "@standardnotes/features" "^1.44.0"
+    "@standardnotes/responses" "^1.6.23"
+    "@standardnotes/utils" "^1.6.9"
 
-"@standardnotes/responses@^1.6.22":
-  version "1.6.22"
-  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.6.22.tgz#eeb020ed9ee2326152ab5259ccc1f2af68277872"
-  integrity sha512-DavG6zZyXtBKL3kvauRGA4y24laEpU9kGTLWFj16zXj1O2FfX3fnNMPgF84mWjlZ/GwiQ8rqXLCPD77Z3OiXhA==
+"@standardnotes/responses@^1.6.23":
+  version "1.6.23"
+  resolved "https://registry.yarnpkg.com/@standardnotes/responses/-/responses-1.6.23.tgz#d2ab20e906f4dcc0bebe1d028bbf3dfe665dd817"
+  integrity sha512-npjf3xRVkaxk3Q8WrQhbEMlI8i2h2asSptw8DCtSIULAXaTgrLwJ8YY38pMyfa3O/laDX23l/hLoSKeF4p/lzw==
   dependencies:
-    "@standardnotes/auth" "^3.18.15"
-    "@standardnotes/common" "^1.20.1"
-    "@standardnotes/features" "^1.43.2"
+    "@standardnotes/auth" "^3.18.16"
+    "@standardnotes/common" "^1.21.0"
+    "@standardnotes/features" "^1.44.0"
 
-"@standardnotes/services@^1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.11.6.tgz#a8a465ec9141c1e61371b059d13688a3553d44f5"
-  integrity sha512-L/prG4H9uAyFiFBeFqexbzVxjSjmxYMzbDlKWSjRxvtqPgBwm2KA7Aebfd/mlfYPaQ2BLrfVS5rkkE4ho4+EZA==
+"@standardnotes/services@^1.11.7":
+  version "1.11.7"
+  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.11.7.tgz#c57f2443dfdb59008a95260ad6d631302a838226"
+  integrity sha512-pGj32mLCzFBPZdvaE4WmgBnV+Tjif6ueHjEIZKuMEFqOPpete6/eu7nXGWQOkwDoi1yKyEmR4a8n0f3sQN+IQQ==
   dependencies:
-    "@standardnotes/auth" "^3.18.15"
-    "@standardnotes/common" "^1.20.1"
-    "@standardnotes/models" "^1.8.5"
-    "@standardnotes/responses" "^1.6.22"
-    "@standardnotes/utils" "^1.6.8"
+    "@standardnotes/auth" "^3.18.16"
+    "@standardnotes/common" "^1.21.0"
+    "@standardnotes/models" "^1.8.6"
+    "@standardnotes/responses" "^1.6.23"
+    "@standardnotes/utils" "^1.6.9"
 
 "@standardnotes/settings@^1.14.3":
   version "1.14.3"
@@ -2551,151 +2401,47 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.108.4":
-  version "2.108.4"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.108.4.tgz#8a0d8c6d4a812c9a98a759fcd70e02e61ccd9f6b"
-  integrity sha512-Yd72tygPx1H+tMtvlm/ghigxSo+2REpNpYfKVEXrJgVd7VvttkCc+8vvhelu8E2SVWv7EPbACVpBvWOCzr6Vqw==
+"@standardnotes/snjs@2.109.1":
+  version "2.109.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.109.1.tgz#afda401370e4faf42e15c6275e727cf67d10e708"
+  integrity sha512-3ptkJOFVK8T/bp7k9YYw4W+6dUbllFuqd+IR6b2QJd9iCe3NMgy+5M6gcgvApe0NWFlJL5Wv69/sba6Y3DiY5A==
   dependencies:
-    "@standardnotes/auth" "^3.18.15"
-    "@standardnotes/common" "^1.20.1"
-    "@standardnotes/domain-events" "^2.28.6"
-    "@standardnotes/encryption" "^1.7.6"
-    "@standardnotes/features" "^1.43.2"
-    "@standardnotes/filepicker" "^1.14.6"
-    "@standardnotes/files" "^1.1.7"
-    "@standardnotes/models" "^1.8.5"
-    "@standardnotes/responses" "^1.6.22"
-    "@standardnotes/services" "^1.11.6"
+    "@standardnotes/auth" "^3.18.16"
+    "@standardnotes/common" "^1.21.0"
+    "@standardnotes/domain-events" "^2.28.7"
+    "@standardnotes/encryption" "^1.7.7"
+    "@standardnotes/features" "^1.44.0"
+    "@standardnotes/filepicker" "^1.14.7"
+    "@standardnotes/files" "^1.1.8"
+    "@standardnotes/models" "^1.8.6"
+    "@standardnotes/responses" "^1.6.23"
+    "@standardnotes/services" "^1.11.7"
     "@standardnotes/settings" "^1.14.3"
     "@standardnotes/sncrypto-common" "^1.8.2"
-    "@standardnotes/utils" "^1.6.8"
+    "@standardnotes/utils" "^1.6.9"
 
-"@standardnotes/stylekit@5.26.0":
-  version "5.26.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.26.0.tgz#76c1fd2d9db872fe67cef147a9956c38d49a7078"
-  integrity sha512-CLR3sXp3NARkuJOw/zYwYBrDjxYQvS/M+4B76Fn3vNncHCvu1nRFos78yrvvIjYf/Ck4IqChxJC57HBP2Fojpw==
+"@standardnotes/stylekit@5.27.0":
+  version "5.27.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.27.0.tgz#113fcf8c67f2ad6a3a37c62edf0c26427d012b25"
+  integrity sha512-NdwrAQDqosfOMtPpsG7YSxGwJH6HPBJxA/WnLRCBZzsNM7TikHTxPIaAR+sfDV+ABTDair/Ld/oyMOEu1ZIiwA==
   dependencies:
     "@nanostores/preact" "^0.1.3"
     "@reach/listbox" "^0.16.2"
     "@reach/menu-button" "^0.16.2"
-    "@svgr/webpack" "^6.2.1"
+    "@standardnotes/icons" "^1.1.6"
     nanoid "^3.3.1"
     nanostores "^0.5.10"
     prop-types "^15.8.1"
 
-"@standardnotes/utils@^1.6.8":
-  version "1.6.8"
-  resolved "https://registry.yarnpkg.com/@standardnotes/utils/-/utils-1.6.8.tgz#002e27ad97261d44d6b5026a20ddf0984dfe06a3"
-  integrity sha512-qyqcEqz8jFqXe2aEEaXvZspn56g6Y4aDQqdxC76LZMstTzkoUk7aSF6ktifYLWX/YyT8lenW5a6djEmf+U0dNw==
+"@standardnotes/utils@^1.6.9":
+  version "1.6.9"
+  resolved "https://registry.yarnpkg.com/@standardnotes/utils/-/utils-1.6.9.tgz#dcfbcd1a16455b327dd714fa299f4092542ce061"
+  integrity sha512-Umog99gJgvVx/EDDsaF63+KXg7jkWL8qAgLT/oxLI8/kRGQfe+16nwlIPR/QkaTHJa415mvChz2aIhf4now0/w==
   dependencies:
-    "@standardnotes/common" "^1.20.1"
+    "@standardnotes/common" "^1.21.0"
     dompurify "^2.3.6"
     lodash "^4.17.21"
 
-"@svgr/babel-plugin-add-jsx-attribute@^6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.0.0.tgz#bd6d1ff32a31b82b601e73672a789cc41e84fe18"
-  integrity sha512-MdPdhdWLtQsjd29Wa4pABdhWbaRMACdM1h31BY+c6FghTZqNGT7pEYdBoaGeKtdTOBC/XNFQaKVj+r/Ei2ryWA==
-
-"@svgr/babel-plugin-remove-jsx-attribute@^6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-6.0.0.tgz#58654908beebfa069681a83332544b17e5237e89"
-  integrity sha512-aVdtfx9jlaaxc3unA6l+M9YRnKIZjOhQPthLKqmTXC8UVkBLDRGwPKo+r8n3VZN8B34+yVajzPTZ+ptTSuZZCw==
-
-"@svgr/babel-plugin-remove-jsx-empty-expression@^6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-6.0.0.tgz#d06dd6e8a8f603f92f9979bb9990a1f85a4f57ba"
-  integrity sha512-Ccj42ApsePD451AZJJf1QzTD1B/BOU392URJTeXFxSK709i0KUsGtbwyiqsKu7vsYxpTM0IA5clAKDyf9RCZyA==
-
-"@svgr/babel-plugin-replace-jsx-attribute-value@^6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-6.0.0.tgz#0b85837577b02c31c09c758a12932820f5245cee"
-  integrity sha512-88V26WGyt1Sfd1emBYmBJRWMmgarrExpKNVmI9vVozha4kqs6FzQJ/Kp5+EYli1apgX44518/0+t9+NU36lThQ==
-
-"@svgr/babel-plugin-svg-dynamic-title@^6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-6.0.0.tgz#28236ec26f7ab9d486a487d36ae52d58ba15676f"
-  integrity sha512-F7YXNLfGze+xv0KMQxrl2vkNbI9kzT9oDK55/kUuymh1ACyXkMV+VZWX1zEhSTfEKh7VkHVZGmVtHg8eTZ6PRg==
-
-"@svgr/babel-plugin-svg-em-dimensions@^6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-6.0.0.tgz#40267c5dea1b43c4f83a0eb6169e08b43d8bafce"
-  integrity sha512-+rghFXxdIqJNLQK08kwPBD3Z22/0b2tEZ9lKiL/yTfuyj1wW8HUXu4bo/XkogATIYuXSghVQOOCwURXzHGKyZA==
-
-"@svgr/babel-plugin-transform-react-native-svg@^6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-6.0.0.tgz#eb688d0a5f539e34d268d8a516e81f5d7fede7c9"
-  integrity sha512-VaphyHZ+xIKv5v0K0HCzyfAaLhPGJXSk2HkpYfXIOKb7DjLBv0soHDxNv6X0vr2titsxE7klb++u7iOf7TSrFQ==
-
-"@svgr/babel-plugin-transform-svg-component@^6.2.0":
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-6.2.0.tgz#7ba61d9fc1fb42b0ba1a04e4630019fa7e993c4f"
-  integrity sha512-bhYIpsORb++wpsp91fymbFkf09Z/YEKR0DnFjxvN+8JHeCUD2unnh18jIMKnDJTWtvpTaGYPXELVe4OOzFI0xg==
-
-"@svgr/babel-preset@^6.2.0":
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-6.2.0.tgz#1d3ad8c7664253a4be8e4a0f0e6872f30d8af627"
-  integrity sha512-4WQNY0J71JIaL03DRn0vLiz87JXx0b9dYm2aA8XHlQJQoixMl4r/soYHm8dsaJZ3jWtkCiOYy48dp9izvXhDkQ==
-  dependencies:
-    "@svgr/babel-plugin-add-jsx-attribute" "^6.0.0"
-    "@svgr/babel-plugin-remove-jsx-attribute" "^6.0.0"
-    "@svgr/babel-plugin-remove-jsx-empty-expression" "^6.0.0"
-    "@svgr/babel-plugin-replace-jsx-attribute-value" "^6.0.0"
-    "@svgr/babel-plugin-svg-dynamic-title" "^6.0.0"
-    "@svgr/babel-plugin-svg-em-dimensions" "^6.0.0"
-    "@svgr/babel-plugin-transform-react-native-svg" "^6.0.0"
-    "@svgr/babel-plugin-transform-svg-component" "^6.2.0"
-
-"@svgr/core@^6.2.1":
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/@svgr/core/-/core-6.2.1.tgz#195de807a9f27f9e0e0d678e01084b05c54fdf61"
-  integrity sha512-NWufjGI2WUyrg46mKuySfviEJ6IxHUOm/8a3Ph38VCWSp+83HBraCQrpEM3F3dB6LBs5x8OElS8h3C0oOJaJAA==
-  dependencies:
-    "@svgr/plugin-jsx" "^6.2.1"
-    camelcase "^6.2.0"
-    cosmiconfig "^7.0.1"
-
-"@svgr/hast-util-to-babel-ast@^6.2.1":
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-6.2.1.tgz#ae065567b74cbe745afae617053adf9a764bea25"
-  integrity sha512-pt7MMkQFDlWJVy9ULJ1h+hZBDGFfSCwlBNW1HkLnVi7jUhyEXUaGYWi1x6bM2IXuAR9l265khBT4Av4lPmaNLQ==
-  dependencies:
-    "@babel/types" "^7.15.6"
-    entities "^3.0.1"
-
-"@svgr/plugin-jsx@^6.2.1":
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-6.2.1.tgz#5668f1d2aa18c2f1bb7a1fc9f682d3f9aed263bd"
-  integrity sha512-u+MpjTsLaKo6r3pHeeSVsh9hmGRag2L7VzApWIaS8imNguqoUwDq/u6U/NDmYs/KAsrmtBjOEaAAPbwNGXXp1g==
-  dependencies:
-    "@babel/core" "^7.15.5"
-    "@svgr/babel-preset" "^6.2.0"
-    "@svgr/hast-util-to-babel-ast" "^6.2.1"
-    svg-parser "^2.0.2"
-
-"@svgr/plugin-svgo@^6.2.0":
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-6.2.0.tgz#4cbe6a33ccccdcae4e3b63ded64cc1cbe1faf48c"
-  integrity sha512-oDdMQONKOJEbuKwuy4Np6VdV6qoaLLvoY86hjvQEgU82Vx1MSWRyYms6Sl0f+NtqxLI/rDVufATbP/ev996k3Q==
-  dependencies:
-    cosmiconfig "^7.0.1"
-    deepmerge "^4.2.2"
-    svgo "^2.5.0"
-
-"@svgr/webpack@^6.2.1":
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-6.2.1.tgz#ef5d51c1b6be4e7537fb9f76b3f2b2e22b63c58d"
-  integrity sha512-h09ngMNd13hnePwgXa+Y5CgOjzlCvfWLHg+MBnydEedAnuLRzUHUJmGS3o2OsrhxTOOqEsPOFt5v/f6C5Qulcw==
-  dependencies:
-    "@babel/core" "^7.15.5"
-    "@babel/plugin-transform-react-constant-elements" "^7.14.5"
-    "@babel/preset-env" "^7.15.6"
-    "@babel/preset-react" "^7.14.5"
-    "@babel/preset-typescript" "^7.15.0"
-    "@svgr/core" "^6.2.1"
-    "@svgr/plugin-jsx" "^6.2.1"
-    "@svgr/plugin-svgo" "^6.2.0"
-
 "@szmarczak/http-timer@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-1.1.2.tgz#b1665e2c461a2cd92f4c1bbf50d5454de0d4b421"
@@ -2713,11 +2459,6 @@
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
   integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==
 
-"@trysound/sax@0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
-  integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
-
 "@types/babel__core@^7.0.0", "@types/babel__core@^7.1.14":
   version "7.1.16"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.16.tgz#bc12c74b7d65e82d29876b5d0baf5c625ac58702"
@@ -2902,11 +2643,6 @@
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
   integrity sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==
 
-"@types/parse-json@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
-  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
-
 "@types/prettier@^2.1.5":
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.4.2.tgz#4c62fae93eb479660c3bd93f9d24d561597a8281"
@@ -4291,7 +4027,7 @@ commander@^2.20.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
-commander@^7.0.0, commander@^7.2.0:
+commander@^7.0.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
   integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
@@ -4407,17 +4143,6 @@ core-util-is@1.0.2, core-util-is@~1.0.0:
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
   integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
 
-cosmiconfig@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.1.tgz#714d756522cace867867ccb4474c5d01bbae5d6d"
-  integrity sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==
-  dependencies:
-    "@types/parse-json" "^4.0.0"
-    import-fresh "^3.2.1"
-    parse-json "^5.0.0"
-    path-type "^4.0.0"
-    yaml "^1.10.0"
-
 cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@@ -4457,22 +4182,6 @@ css-select@^4.1.3:
     domutils "^2.6.0"
     nth-check "^2.0.0"
 
-css-tree@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.2.tgz#9ae393b5dafd7dae8a622475caec78d3d8fbd7b5"
-  integrity sha512-wCoWush5Aeo48GLhfHPbmvZs59Z+M7k5+B1xDnXbdWNcEF423DoFdqSWE0PM5aNk5nI5cp1q7ms36zGApY/sKQ==
-  dependencies:
-    mdn-data "2.0.14"
-    source-map "^0.6.1"
-
-css-tree@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
-  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
-  dependencies:
-    mdn-data "2.0.14"
-    source-map "^0.6.1"
-
 css-what@^5.0.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.1.0.tgz#3f7b707aadf633baf62c2ceb8579b545bb40f7fe"
@@ -4483,13 +4192,6 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
-csso@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
-  integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==
-  dependencies:
-    css-tree "^1.1.2"
-
 cssom@^0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10"
@@ -4903,11 +4605,6 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
   integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
 
-entities@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4"
-  integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==
-
 env-paths@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2"
@@ -7485,11 +7182,6 @@ map-obj@^4.0.0:
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.3.0.tgz#9304f906e93faae70880da102a9f1df0ea8bb05a"
   integrity sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==
 
-mdn-data@2.0.14:
-  version "2.0.14"
-  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
-  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
-
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -9555,11 +9247,6 @@ ssri@^9.0.0:
   dependencies:
     minipass "^3.1.1"
 
-stable@^0.1.8:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
-  integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
-
 stack-utils@^2.0.3:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.5.tgz#d25265fca995154659dbbfba3b49254778d2fdd5"
@@ -9757,24 +9444,6 @@ svg-jest@^1.0.1:
   resolved "https://registry.yarnpkg.com/svg-jest/-/svg-jest-1.0.1.tgz#3a820280bfd4c1e0637d68c8d477d37d0ae46abb"
   integrity sha512-uVbY14nW3IGXkRueduWpQNOVOvC0XE9uu3Y1MIWX6zgweOqPT+hmP/J92yCNBv5kAQzNU7DW2nCO+enZpv+Hsw==
 
-svg-parser@^2.0.2:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
-  integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
-
-svgo@^2.5.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.8.0.tgz#4ff80cce6710dc2795f0c7c74101e6764cfccd24"
-  integrity sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==
-  dependencies:
-    "@trysound/sax" "0.2.0"
-    commander "^7.2.0"
-    css-select "^4.1.3"
-    css-tree "^1.1.3"
-    csso "^4.2.0"
-    picocolors "^1.0.0"
-    stable "^0.1.8"
-
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@@ -10558,11 +10227,6 @@ yallist@^4.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
-yaml@^1.10.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.0.tgz#3b593add944876077d4d683fee01081bd9fff31e"
-  integrity sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==
-
 yaml@^1.10.2:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"

From 18e68adbb00e02afcd5e2013dff7dc15bf5f8d69 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Tue, 17 May 2022 12:10:21 -0500
Subject: [PATCH 090/102] fix: callback methods

---
 .../javascripts/Components/NotesList/index.tsx       |  4 ++--
 .../javascripts/Components/NotesView/index.tsx       | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/Components/NotesList/index.tsx b/app/assets/javascripts/Components/NotesList/index.tsx
index e2bd10784..b22f4d51d 100644
--- a/app/assets/javascripts/Components/NotesList/index.tsx
+++ b/app/assets/javascripts/Components/NotesList/index.tsx
@@ -20,8 +20,8 @@ type Props = {
 
 export const NotesList: FunctionComponent<Props> = observer(
   ({ application, appState, notes, selectedNotes, displayOptions, paginate }) => {
-    const selectNextNote = useCallback(() => appState.notesView.selectNextNote, [appState])
-    const selectPreviousNote = useCallback(() => appState.notesView.selectPreviousNote, [appState])
+    const selectNextNote = useCallback(() => appState.notesView.selectNextNote(), [appState])
+    const selectPreviousNote = useCallback(() => appState.notesView.selectPreviousNote(), [appState])
 
     const { hideTags, hideDate, hideNotePreview, hideEditorIcon, sortBy } = displayOptions
 
diff --git a/app/assets/javascripts/Components/NotesView/index.tsx b/app/assets/javascripts/Components/NotesView/index.tsx
index df464e44f..bc19061cf 100644
--- a/app/assets/javascripts/Components/NotesView/index.tsx
+++ b/app/assets/javascripts/Components/NotesView/index.tsx
@@ -41,12 +41,12 @@ export const NotesView: FunctionComponent<Props> = observer(({ application, appS
     panelWidth,
   } = appState.notesView
 
-  const createNewNote = useCallback(() => appState.notesView.createNewNote, [appState])
-  const onFilterEnter = useCallback(() => appState.notesView.onFilterEnter, [appState])
-  const clearFilterText = useCallback(() => appState.notesView.clearFilterText, [appState])
+  const createNewNote = useCallback(() => appState.notesView.createNewNote(), [appState])
+  const onFilterEnter = useCallback(() => appState.notesView.onFilterEnter(), [appState])
+  const clearFilterText = useCallback(() => appState.notesView.clearFilterText(), [appState])
   const setNoteFilterText = useCallback((text: string) => appState.notesView.setNoteFilterText(text), [appState])
-  const selectNextNote = useCallback(() => appState.notesView.selectNextNote, [appState])
-  const selectPreviousNote = useCallback(() => appState.notesView.selectPreviousNote, [appState])
+  const selectNextNote = useCallback(() => appState.notesView.selectNextNote(), [appState])
+  const selectPreviousNote = useCallback(() => appState.notesView.selectPreviousNote(), [appState])
 
   const [showDisplayOptionsMenu, setShowDisplayOptionsMenu] = useState(false)
   const [focusedSearch, setFocusedSearch] = useState(false)
@@ -64,7 +64,7 @@ export const NotesView: FunctionComponent<Props> = observer(({ application, appS
       modifiers: [KeyboardModifier.Meta, KeyboardModifier.Ctrl],
       onKeyDown: (event) => {
         event.preventDefault()
-        createNewNote()
+        void createNewNote()
       },
     })
 

From 7f12f9349a3cedbf7702875112179c2ad64d4deb Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Tue, 17 May 2022 12:31:08 -0500
Subject: [PATCH 091/102] fix: window property

---
 app/assets/javascripts/UIModels/ApplicationGroup.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/app/assets/javascripts/UIModels/ApplicationGroup.ts b/app/assets/javascripts/UIModels/ApplicationGroup.ts
index 0ac07bca8..c1162ed2b 100644
--- a/app/assets/javascripts/UIModels/ApplicationGroup.ts
+++ b/app/assets/javascripts/UIModels/ApplicationGroup.ts
@@ -75,9 +75,7 @@ export class ApplicationGroup extends SNApplicationGroup<WebOrDesktopDevice> {
     })
 
     if (isDesktopApplication()) {
-      Object.defineProperty(window, 'webClient', {
-        get: () => (this.primaryApplication as WebApplication).getDesktopService(),
-      })
+      window.webClient = (this.primaryApplication as WebApplication).getDesktopService()
     }
   }
 

From b3f6888683f3d52d652a15857545545f10ae897e Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 17 May 2022 23:36:05 +0530
Subject: [PATCH 092/102] revert: "fix: popover closing on delete dialog"
 (#1030)

---
 .../AttachedFilesPopover/AttachedFilesButton.tsx     |  2 +-
 app/assets/javascripts/Hooks/useCloseOnBlur.ts       | 12 ++++--------
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
index 164fdf0a1..988dd2b6a 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
@@ -43,7 +43,7 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
     const buttonRef = useRef<HTMLButtonElement>(null)
     const panelRef = useRef<HTMLDivElement>(null)
     const containerRef = useRef<HTMLDivElement>(null)
-    const [closeOnBlur, keepMenuOpen] = useCloseOnBlur(containerRef, setOpen, true)
+    const [closeOnBlur, keepMenuOpen] = useCloseOnBlur(containerRef, setOpen)
 
     useEffect(() => {
       if (appState.filePreviewModal.isOpen) {
diff --git a/app/assets/javascripts/Hooks/useCloseOnBlur.ts b/app/assets/javascripts/Hooks/useCloseOnBlur.ts
index 9655a930c..0396859c5 100644
--- a/app/assets/javascripts/Hooks/useCloseOnBlur.ts
+++ b/app/assets/javascripts/Hooks/useCloseOnBlur.ts
@@ -8,20 +8,16 @@ import { StateUpdater, useCallback, useState } from 'preact/hooks'
 export function useCloseOnBlur(
   container: { current?: HTMLDivElement | null },
   setOpen: (open: boolean) => void,
-  keepOpenOnDialogs = false,
 ): [(event: { relatedTarget: EventTarget | null }) => void, StateUpdater<boolean>] {
   const [locked, setLocked] = useState(false)
   return [
     useCallback(
       function onBlur(event: { relatedTarget: EventTarget | null }) {
-        setTimeout(() => {
-          const keepOpen = keepOpenOnDialogs && document.activeElement?.closest('[role="dialog"], .sk-modal')
-          if (!keepOpen && !locked && !container.current?.contains(event.relatedTarget as Node)) {
-            setOpen(false)
-          }
-        })
+        if (!locked && !container.current?.contains(event.relatedTarget as Node)) {
+          setOpen(false)
+        }
       },
-      [keepOpenOnDialogs, locked, container, setOpen],
+      [container, setOpen, locked],
     ),
     setLocked,
   ]

From abe9b70525825b9fc5df22ed2522b118c7e54b08 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Tue, 17 May 2022 13:47:23 -0500
Subject: [PATCH 093/102] fix: workspace signout all

---
 .../Components/ConfirmSignoutModal/index.tsx  |  2 +-
 app/assets/javascripts/Database.ts            | 27 +++++++--
 .../javascripts/Device/WebOrDesktopDevice.ts  |  6 ++
 .../javascripts/UIModels/ApplicationGroup.ts  |  4 --
 package.json                                  |  4 +-
 yarn.lock                                     | 56 +++++++++----------
 6 files changed, 60 insertions(+), 39 deletions(-)

diff --git a/app/assets/javascripts/Components/ConfirmSignoutModal/index.tsx b/app/assets/javascripts/Components/ConfirmSignoutModal/index.tsx
index 6a5630ebe..ed8679b15 100644
--- a/app/assets/javascripts/Components/ConfirmSignoutModal/index.tsx
+++ b/app/assets/javascripts/Components/ConfirmSignoutModal/index.tsx
@@ -104,7 +104,7 @@ export const ConfirmSignoutModal = observer(({ application, appState, applicatio
                       closeDialog()
                     }}
                   >
-                    {application.hasAccount() ? 'Sign Out' : 'Clear Session Data'}
+                    {application.hasAccount() ? 'Sign Out' : 'Delete Workspace'}
                   </button>
                 </div>
               </div>
diff --git a/app/assets/javascripts/Database.ts b/app/assets/javascripts/Database.ts
index 9de3e9dbf..8ebd8ea95 100644
--- a/app/assets/javascripts/Database.ts
+++ b/app/assets/javascripts/Database.ts
@@ -19,10 +19,10 @@ export class Database {
   private locked = true
   private db?: IDBDatabase
 
-  constructor(public databaseName: string, private alertService: AlertService) {}
+  constructor(public databaseName: string, private alertService?: AlertService) {}
 
   public deinit(): void {
-    ;(this.alertService as any) = undefined
+    ;(this.alertService as unknown) = undefined
     this.db = undefined
   }
 
@@ -33,6 +33,19 @@ export class Database {
     this.locked = false
   }
 
+  static async deleteAll(): Promise<void> {
+    const rawDatabases = await window.indexedDB.databases()
+
+    for (const rawDb of rawDatabases) {
+      if (!rawDb.name) {
+        continue
+      }
+      const db = new Database(rawDb.name)
+      await db.clearAllPayloads()
+      db.deinit()
+    }
+  }
+
   /**
    * Opens the database natively, or returns the existing database object if already opened.
    * @param onNewDatabase - Callback to invoke when a database has been created
@@ -208,13 +221,18 @@ export class Database {
   }
 
   private showAlert(message: string) {
-    this.alertService.alert(message).catch(console.error)
+    if (this.alertService) {
+      this.alertService.alert(message).catch(console.error)
+    } else {
+      window.alert(message)
+    }
   }
 
   private showGenericError(error: { code: number; name: string }) {
     const message =
       'Unable to save changes locally due to an unknown system issue. ' +
       `Issue Code: ${error.code} Issue Name: ${error.name}.`
+
     this.showAlert(message)
   }
 
@@ -225,6 +243,7 @@ export class Database {
       'access to the local database. Please use a non-private window.' +
       '\n\n2. You have two windows of the app open at the same time. ' +
       'Please close any other app instances and reload the page.'
-    this.alertService.alert(message).catch(console.error)
+
+    this.showAlert(message)
   }
 }
diff --git a/app/assets/javascripts/Device/WebOrDesktopDevice.ts b/app/assets/javascripts/Device/WebOrDesktopDevice.ts
index ea8758752..11c7be59b 100644
--- a/app/assets/javascripts/Device/WebOrDesktopDevice.ts
+++ b/app/assets/javascripts/Device/WebOrDesktopDevice.ts
@@ -41,6 +41,12 @@ export abstract class WebOrDesktopDevice implements WebOrDesktopDeviceInterface
     return this.databases.find((database) => database.databaseName === identifier) as Database
   }
 
+  async clearAllDataFromDevice(): Promise<void> {
+    await this.clearRawKeychainValue()
+    await this.removeAllRawStorageValues()
+    await Database.deleteAll()
+  }
+
   deinit() {
     for (const database of this.databases) {
       database.deinit()
diff --git a/app/assets/javascripts/UIModels/ApplicationGroup.ts b/app/assets/javascripts/UIModels/ApplicationGroup.ts
index c1162ed2b..88f7a6737 100644
--- a/app/assets/javascripts/UIModels/ApplicationGroup.ts
+++ b/app/assets/javascripts/UIModels/ApplicationGroup.ts
@@ -86,8 +86,4 @@ export class ApplicationGroup extends SNApplicationGroup<WebOrDesktopDevice> {
       delete window.webClient
     }
   }
-
-  override handleAllWorkspacesSignedOut(): void {
-    isDesktopDevice(this.device) && this.device.destroyAllData()
-  }
 }
diff --git a/package.json b/package.json
index ccdfe4916..245f6174b 100644
--- a/package.json
+++ b/package.json
@@ -70,10 +70,10 @@
     "@reach/tooltip": "^0.16.2",
     "@reach/visually-hidden": "^0.16.0",
     "@standardnotes/components": "1.8.1",
-    "@standardnotes/filepicker": "1.14.7",
+    "@standardnotes/filepicker": "1.14.8",
     "@standardnotes/icons": "^1.1.7",
     "@standardnotes/sncrypto-web": "1.9.2",
-    "@standardnotes/snjs": "2.109.1",
+    "@standardnotes/snjs": "2.109.2",
     "@standardnotes/stylekit": "5.27.0",
     "@zip.js/zip.js": "^2.4.10",
     "mobx": "^6.5.0",
diff --git a/yarn.lock b/yarn.lock
index 5d7d8b8d2..bdc88c91d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2311,14 +2311,14 @@
     "@standardnotes/auth" "^3.18.16"
     "@standardnotes/features" "^1.44.0"
 
-"@standardnotes/encryption@^1.7.7":
-  version "1.7.7"
-  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.7.7.tgz#c78bc2c7a33f9fb784e9631e055a35a300da2ced"
-  integrity sha512-U3yVYugjY70zJM8o0xflaJxKdjQ8zMDZHEN9SCPrBpFkabZsRPmfVO33vr9bvC3snj5i8sQPgbfPfFi3Pxqe7w==
+"@standardnotes/encryption@^1.7.8":
+  version "1.7.8"
+  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.7.8.tgz#ab59f9c37c3e577f89df1891b6ac2683e2d1dec9"
+  integrity sha512-RMyFC3OgTDDFgDq0VMU9sBdC1GKvFthW2D0belSojaxtu/3J1SZ6BUiZ5TYMar+jrVKIMs2X976ukmZ0C8KPPA==
   dependencies:
     "@standardnotes/models" "^1.8.6"
     "@standardnotes/responses" "^1.6.23"
-    "@standardnotes/services" "^1.11.7"
+    "@standardnotes/services" "^1.11.8"
 
 "@standardnotes/features@^1.44.0":
   version "1.44.0"
@@ -2328,24 +2328,24 @@
     "@standardnotes/auth" "^3.18.16"
     "@standardnotes/common" "^1.21.0"
 
-"@standardnotes/filepicker@1.14.7", "@standardnotes/filepicker@^1.14.7":
-  version "1.14.7"
-  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.14.7.tgz#9f0ff2e88844a18234c6bc93449ef6c13a2cf08e"
-  integrity sha512-Oe41oNoayjQ4avmwV59vBqg9CfACECHTc0iGicJhQH2E++ErynXFr+ZmIDJEEj2ufIXbM+xiWDa5fWvzMbIcBw==
+"@standardnotes/filepicker@1.14.8", "@standardnotes/filepicker@^1.14.8":
+  version "1.14.8"
+  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.14.8.tgz#aa915399df9d7da3b30b0ea901bcf7d97aca3a42"
+  integrity sha512-52ABvJ79wuINIe6cGKgqV4qulnQbJrw1OwazWVvUWtX3rghWqiFgDT84gH4kma2kZxi0v03VLdbpvd2+i0yIBA==
   dependencies:
     "@standardnotes/common" "^1.21.0"
-    "@standardnotes/services" "^1.11.7"
+    "@standardnotes/services" "^1.11.8"
     "@standardnotes/utils" "^1.6.9"
 
-"@standardnotes/files@^1.1.8":
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.1.8.tgz#8d2978c5ce35353928c76051cd2906399b605117"
-  integrity sha512-+JFZ9koLJJd9Q+x4JX1WhmPDrGEjTQLOiUeTszcoeQd9qrV6K7nILhchQKgL0t924VhjpONA75w28tu96nI6vw==
+"@standardnotes/files@^1.1.9":
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.1.9.tgz#9a4bfd60ee26ba6b9f5281853626e87155d11cc5"
+  integrity sha512-yE4zB5QrP4o+sU2EfaK5oidhF4LpSC6slA82787dxKQ9ILDexnH8nyI/YH6sw82OiLHe+CeRR5mW01Pv8A7aYA==
   dependencies:
-    "@standardnotes/encryption" "^1.7.7"
+    "@standardnotes/encryption" "^1.7.8"
     "@standardnotes/models" "^1.8.6"
     "@standardnotes/responses" "^1.6.23"
-    "@standardnotes/services" "^1.11.7"
+    "@standardnotes/services" "^1.11.8"
     "@standardnotes/utils" "^1.6.9"
 
 "@standardnotes/icons@^1.1.6", "@standardnotes/icons@^1.1.7":
@@ -2371,10 +2371,10 @@
     "@standardnotes/common" "^1.21.0"
     "@standardnotes/features" "^1.44.0"
 
-"@standardnotes/services@^1.11.7":
-  version "1.11.7"
-  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.11.7.tgz#c57f2443dfdb59008a95260ad6d631302a838226"
-  integrity sha512-pGj32mLCzFBPZdvaE4WmgBnV+Tjif6ueHjEIZKuMEFqOPpete6/eu7nXGWQOkwDoi1yKyEmR4a8n0f3sQN+IQQ==
+"@standardnotes/services@^1.11.8":
+  version "1.11.8"
+  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.11.8.tgz#8a9ef3212ef0693f611661cff552f22add00a236"
+  integrity sha512-E+hougOnKobH5nKPzpTxaGvYUSw3BWS0rKRMY2Jh5ZhD+y4GqCCA7VoR/7lbxR2GjP5xGpKHYgZR5QIyW+wFJQ==
   dependencies:
     "@standardnotes/auth" "^3.18.16"
     "@standardnotes/common" "^1.21.0"
@@ -2401,21 +2401,21 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.109.1":
-  version "2.109.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.109.1.tgz#afda401370e4faf42e15c6275e727cf67d10e708"
-  integrity sha512-3ptkJOFVK8T/bp7k9YYw4W+6dUbllFuqd+IR6b2QJd9iCe3NMgy+5M6gcgvApe0NWFlJL5Wv69/sba6Y3DiY5A==
+"@standardnotes/snjs@2.109.2":
+  version "2.109.2"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.109.2.tgz#c7ee667cd7a3a9db5ccf7132a41d680a33888e2c"
+  integrity sha512-+4G8LQjzLrZe7Unzjqyr5Y2q4dtxu816MSMqWTmoAWQ3LFE0BEOm+1ltEfLC0cgic8ieH4tY14RUaTvNyznrFA==
   dependencies:
     "@standardnotes/auth" "^3.18.16"
     "@standardnotes/common" "^1.21.0"
     "@standardnotes/domain-events" "^2.28.7"
-    "@standardnotes/encryption" "^1.7.7"
+    "@standardnotes/encryption" "^1.7.8"
     "@standardnotes/features" "^1.44.0"
-    "@standardnotes/filepicker" "^1.14.7"
-    "@standardnotes/files" "^1.1.8"
+    "@standardnotes/filepicker" "^1.14.8"
+    "@standardnotes/files" "^1.1.9"
     "@standardnotes/models" "^1.8.6"
     "@standardnotes/responses" "^1.6.23"
-    "@standardnotes/services" "^1.11.7"
+    "@standardnotes/services" "^1.11.8"
     "@standardnotes/settings" "^1.14.3"
     "@standardnotes/sncrypto-common" "^1.8.2"
     "@standardnotes/utils" "^1.6.9"

From 2f89f5dbb2cb28620f7baa7f22e87e5a7bb13072 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Tue, 17 May 2022 16:04:57 -0500
Subject: [PATCH 094/102] chore: upgrade snjs

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 245f6174b..d0e9d6f42 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,7 @@
     "@standardnotes/filepicker": "1.14.8",
     "@standardnotes/icons": "^1.1.7",
     "@standardnotes/sncrypto-web": "1.9.2",
-    "@standardnotes/snjs": "2.109.2",
+    "@standardnotes/snjs": "2.109.3",
     "@standardnotes/stylekit": "5.27.0",
     "@zip.js/zip.js": "^2.4.10",
     "mobx": "^6.5.0",
diff --git a/yarn.lock b/yarn.lock
index bdc88c91d..4223cd025 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2401,10 +2401,10 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.109.2":
-  version "2.109.2"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.109.2.tgz#c7ee667cd7a3a9db5ccf7132a41d680a33888e2c"
-  integrity sha512-+4G8LQjzLrZe7Unzjqyr5Y2q4dtxu816MSMqWTmoAWQ3LFE0BEOm+1ltEfLC0cgic8ieH4tY14RUaTvNyznrFA==
+"@standardnotes/snjs@2.109.3":
+  version "2.109.3"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.109.3.tgz#a6fcd8af317caf340c6099b5e7cfb36f1ec7a1ba"
+  integrity sha512-RIV22G99ZuolxrHTrh12i9IicxsXYZ9kK0mzfG1uO3E7BtFyvKgaoX5Yugi305Q0WsLzf4bWaeAuWl7i3nTJ0Q==
   dependencies:
     "@standardnotes/auth" "^3.18.16"
     "@standardnotes/common" "^1.21.0"

From aeae2b644f7390fa1708221737decd03a5193cb9 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Tue, 17 May 2022 20:02:34 -0500
Subject: [PATCH 095/102] refactor: notes state management (#1031)

---
 .../ChangeEditor/ChangeEditorMenu.tsx         |   4 +-
 .../Components/NoteGroupView/index.tsx        |   3 +-
 .../Components/NoteTags/NoteTag.tsx           |   2 +-
 .../Components/NotesList/index.tsx            |   2 +-
 .../Components/NotesOptions/NotesOptions.tsx  |   5 +-
 .../Components/NotesView/index.tsx            |   3 +-
 .../javascripts/UIModels/AppState/AppState.ts | 113 +-------
 .../UIModels/AppState/NoteTagsState.ts        |  17 +-
 .../UIModels/AppState/NotesState.ts           |  79 +++---
 .../UIModels/AppState/NotesViewState.ts       | 252 +++++++++++-------
 .../UIModels/AppState/TagsState.ts            |  31 ++-
 package.json                                  |   2 +-
 yarn.lock                                     |   8 +-
 13 files changed, 255 insertions(+), 266 deletions(-)

diff --git a/app/assets/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx b/app/assets/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
index ad0345d6b..889a920cc 100644
--- a/app/assets/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
+++ b/app/assets/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
@@ -88,9 +88,7 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
 
     const transactions: TransactionalMutation[] = []
 
-    if (application.getAppState().getActiveNoteController()?.isTemplateNote) {
-      await application.getAppState().getActiveNoteController().insertTemplatedNote()
-    }
+    await application.getAppState().notesView.insertCurrentIfTemplate()
 
     if (note.locked) {
       application.alertService.alert(STRING_EDIT_LOCKED_ATTEMPT).catch(console.error)
diff --git a/app/assets/javascripts/Components/NoteGroupView/index.tsx b/app/assets/javascripts/Components/NoteGroupView/index.tsx
index a5da0cd2d..5824aba6e 100644
--- a/app/assets/javascripts/Components/NoteGroupView/index.tsx
+++ b/app/assets/javascripts/Components/NoteGroupView/index.tsx
@@ -31,7 +31,6 @@ export class NoteGroupView extends PureComponent<Props, State> {
     const controllerGroup = this.application.noteControllerGroup
     this.removeChangeObserver = this.application.noteControllerGroup.addActiveControllerChangeObserver(() => {
       const controllers = controllerGroup.noteControllers
-
       this.setState({
         controllers: controllers,
       })
@@ -63,7 +62,7 @@ export class NoteGroupView extends PureComponent<Props, State> {
         {!this.state.showMultipleSelectedNotes && (
           <>
             {this.state.controllers.map((controller) => {
-              return <NoteView application={this.application} controller={controller} />
+              return <NoteView key={controller.note.uuid} application={this.application} controller={controller} />
             })}
           </>
         )}
diff --git a/app/assets/javascripts/Components/NoteTags/NoteTag.tsx b/app/assets/javascripts/Components/NoteTags/NoteTag.tsx
index 489c15290..fd61345b2 100644
--- a/app/assets/javascripts/Components/NoteTags/NoteTag.tsx
+++ b/app/assets/javascripts/Components/NoteTags/NoteTag.tsx
@@ -42,7 +42,7 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
     (event: MouseEvent) => {
       if (tagClicked && event.target !== deleteTagRef.current) {
         setTagClicked(false)
-        appState.selectedTag = tag
+        appState.tags.selected = tag
       } else {
         setTagClicked(true)
       }
diff --git a/app/assets/javascripts/Components/NotesList/index.tsx b/app/assets/javascripts/Components/NotesList/index.tsx
index b22f4d51d..690cc911a 100644
--- a/app/assets/javascripts/Components/NotesList/index.tsx
+++ b/app/assets/javascripts/Components/NotesList/index.tsx
@@ -30,7 +30,7 @@ export const NotesList: FunctionComponent<Props> = observer(
         if (hideTags) {
           return []
         }
-        const selectedTag = appState.selectedTag
+        const selectedTag = appState.tags.selected
         if (!selectedTag) {
           return []
         }
diff --git a/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx b/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx
index c92da9c76..5b1dfcbe7 100644
--- a/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx
+++ b/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx
@@ -34,6 +34,7 @@ const DeletePermanentlyButton = ({ closeOnBlur, onClick }: DeletePermanentlyButt
 const iconClass = 'color-neutral mr-2'
 const iconClassDanger = 'color-danger mr-2'
 const iconClassWarning = 'color-warning mr-2'
+const iconClassSuccess = 'color-success mr-2'
 
 const getWordCount = (text: string) => {
   if (text.trim().length === 0) {
@@ -400,8 +401,8 @@ export const NotesOptions = observer(({ application, appState, closeOnBlur }: No
               await appState.notes.setTrashSelectedNotes(false)
             }}
           >
-            <Icon type="restore" className={iconClass} />
-            Restore
+            <Icon type="restore" className={iconClassSuccess} />
+            <span className="color-success">Restore</span>
           </button>
           <DeletePermanentlyButton
             closeOnBlur={closeOnBlur}
diff --git a/app/assets/javascripts/Components/NotesView/index.tsx b/app/assets/javascripts/Components/NotesView/index.tsx
index bc19061cf..ada7d5408 100644
--- a/app/assets/javascripts/Components/NotesView/index.tsx
+++ b/app/assets/javascripts/Components/NotesView/index.tsx
@@ -35,12 +35,13 @@ export const NotesView: FunctionComponent<Props> = observer(({ application, appS
     optionsSubtitle,
     panelTitle,
     renderedNotes,
-    selectedNotes,
     searchBarElement,
     paginate,
     panelWidth,
   } = appState.notesView
 
+  const { selectedNotes } = appState.notes
+
   const createNewNote = useCallback(() => appState.notesView.createNewNote(), [appState])
   const onFilterEnter = useCallback(() => appState.notesView.onFilterEnter(), [appState])
   const clearFilterText = useCallback(() => appState.notesView.clearFilterText(), [appState])
diff --git a/app/assets/javascripts/UIModels/AppState/AppState.ts b/app/assets/javascripts/UIModels/AppState/AppState.ts
index 3fde70684..4e85b1656 100644
--- a/app/assets/javascripts/UIModels/AppState/AppState.ts
+++ b/app/assets/javascripts/UIModels/AppState/AppState.ts
@@ -6,18 +6,13 @@ import {
   ApplicationEvent,
   ContentType,
   DeinitSource,
-  NoteViewController,
   PrefKey,
   SNNote,
-  SmartView,
   SNTag,
-  SystemViewId,
   removeFromArray,
-  Uuid,
-  PayloadEmitSource,
   WebOrDesktopDeviceInterface,
 } from '@standardnotes/snjs'
-import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'
+import { action, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'
 import { ActionsMenuState } from './ActionsMenuState'
 import { FeaturesState } from './FeaturesState'
 import { FilesState } from './FilesState'
@@ -56,7 +51,7 @@ export enum EventSource {
   Script,
 }
 
-type ObserverCallback = (event: AppStateEvent, data?: any) => Promise<void>
+type ObserverCallback = (event: AppStateEvent, data?: unknown) => Promise<void>
 
 export class AppState extends AbstractState {
   readonly enableUnfinishedFeatures: boolean = window?.enabledUnfinishedFeatures
@@ -68,8 +63,6 @@ export class AppState extends AbstractState {
   onVisibilityChange: () => void
   showBetaWarning: boolean
 
-  private multiEditorSupport = false
-
   readonly accountMenu: AccountMenuState
   readonly actionsMenu = new ActionsMenuState()
   readonly features: FeaturesState
@@ -116,7 +109,6 @@ export class AppState extends AbstractState {
     this.notesView = new NotesViewState(application, this, this.appEventObserverRemovers)
     this.files = new FilesState(application)
     this.addAppEventObserver()
-    this.streamNotesAndTags()
     this.onVisibilityChange = () => {
       const visible = document.visibilityState === 'visible'
       const event = visible ? AppStateEvent.WindowDidFocus : AppStateEvent.WindowDidBlur
@@ -131,8 +123,6 @@ export class AppState extends AbstractState {
     }
 
     makeObservable(this, {
-      selectedTag: computed,
-
       showBetaWarning: observable,
       isSessionsModalVisible: observable,
       preferences: observable,
@@ -236,47 +226,6 @@ export class AppState extends AbstractState {
     return this.device.appVersion
   }
 
-  async openNewNote(title?: string) {
-    if (!this.multiEditorSupport) {
-      this.closeActiveNoteController()
-    }
-
-    const selectedTag = this.selectedTag
-
-    const activeRegularTagUuid = selectedTag && selectedTag instanceof SNTag ? selectedTag.uuid : undefined
-
-    await this.application.noteControllerGroup.createNoteView(undefined, title, activeRegularTagUuid)
-  }
-
-  getActiveNoteController() {
-    return this.application.noteControllerGroup.noteControllers[0]
-  }
-
-  getNoteControllers() {
-    return this.application.noteControllerGroup.noteControllers
-  }
-
-  closeNoteController(controller: NoteViewController) {
-    this.application.noteControllerGroup.closeNoteView(controller)
-  }
-
-  closeActiveNoteController() {
-    this.application.noteControllerGroup.closeActiveNoteView()
-  }
-
-  closeAllNoteControllers() {
-    this.application.noteControllerGroup.closeAllNoteViews()
-  }
-
-  noteControllerForNote(uuid: Uuid) {
-    for (const controller of this.getNoteControllers()) {
-      if (controller.note.uuid === uuid) {
-        return controller
-      }
-    }
-    return undefined
-  }
-
   isGlobalSpellcheckEnabled(): boolean {
     return this.application.getPreference(PrefKey.EditorSpellcheck, true)
   }
@@ -309,62 +258,6 @@ export class AppState extends AbstractState {
     )
   }
 
-  public get selectedTag(): SNTag | SmartView | undefined {
-    return this.tags.selected
-  }
-
-  public set selectedTag(tag: SNTag | SmartView | undefined) {
-    this.tags.selected = tag
-  }
-
-  streamNotesAndTags() {
-    this.application.streamItems<SNNote | SNTag>(
-      [ContentType.Note, ContentType.Tag],
-      async ({ changed, inserted, removed, source }) => {
-        if (![PayloadEmitSource.PreSyncSave, PayloadEmitSource.RemoteRetrieved].includes(source)) {
-          return
-        }
-
-        const removedNotes = removed.filter((i) => i.content_type === ContentType.Note)
-
-        for (const removedNote of removedNotes) {
-          const noteController = this.noteControllerForNote(removedNote.uuid)
-          if (noteController) {
-            this.closeNoteController(noteController)
-          }
-        }
-
-        const changedOrInserted = [...changed, ...inserted].filter((i) => i.content_type === ContentType.Note)
-
-        const selectedTag = this.tags.selected
-
-        const isBrowswingTrashedNotes =
-          selectedTag instanceof SmartView && selectedTag.uuid === SystemViewId.TrashedNotes
-
-        const isBrowsingArchivedNotes =
-          selectedTag instanceof SmartView && selectedTag.uuid === SystemViewId.ArchivedNotes
-
-        for (const note of changedOrInserted) {
-          const noteController = this.noteControllerForNote(note.uuid)
-          if (!noteController) {
-            continue
-          }
-
-          if (note.trashed && !isBrowswingTrashedNotes && !this.searchOptions.includeTrashed) {
-            this.closeNoteController(noteController)
-          } else if (
-            note.archived &&
-            !isBrowsingArchivedNotes &&
-            !this.searchOptions.includeArchived &&
-            !this.application.getPreference(PrefKey.NotesShowArchived, false)
-          ) {
-            this.closeNoteController(noteController)
-          }
-        }
-      },
-    )
-  }
-
   addAppEventObserver() {
     this.unsubAppEventObserver = this.application.addEventObserver(async (eventName) => {
       switch (eventName) {
@@ -412,7 +305,7 @@ export class AppState extends AbstractState {
     }
   }
 
-  async notifyEvent(eventName: AppStateEvent, data?: any) {
+  async notifyEvent(eventName: AppStateEvent, data?: unknown) {
     /**
      * Timeout is particularly important so we can give all initial
      * controllers a chance to construct before propogting any events *
diff --git a/app/assets/javascripts/UIModels/AppState/NoteTagsState.ts b/app/assets/javascripts/UIModels/AppState/NoteTagsState.ts
index fb0393687..671622d8a 100644
--- a/app/assets/javascripts/UIModels/AppState/NoteTagsState.ts
+++ b/app/assets/javascripts/UIModels/AppState/NoteTagsState.ts
@@ -62,10 +62,6 @@ export class NoteTagsState extends AbstractState {
     )
   }
 
-  get activeNote(): SNNote | undefined {
-    return this.appState.notes.activeNoteController?.note
-  }
-
   get autocompleteTagHintVisible(): boolean {
     return (
       this.autocompleteSearchQuery !== '' &&
@@ -149,7 +145,10 @@ export class NoteTagsState extends AbstractState {
   }
 
   searchActiveNoteAutocompleteTags(): void {
-    const newResults = this.application.items.searchTags(this.autocompleteSearchQuery, this.activeNote)
+    const newResults = this.application.items.searchTags(
+      this.autocompleteSearchQuery,
+      this.appState.notesView.activeControllerNote,
+    )
     this.setAutocompleteTagResults(newResults)
   }
 
@@ -158,7 +157,8 @@ export class NoteTagsState extends AbstractState {
   }
 
   reloadTags(): void {
-    const { activeNote } = this
+    const activeNote = this.appState.notesView.activeControllerNote
+
     if (activeNote) {
       const tags = this.application.items.getSortedTagsForNote(activeNote)
       this.setTags(tags)
@@ -173,7 +173,7 @@ export class NoteTagsState extends AbstractState {
   }
 
   async addTagToActiveNote(tag: SNTag): Promise<void> {
-    const { activeNote } = this
+    const activeNote = this.appState.notesView.activeControllerNote
 
     if (activeNote) {
       await this.application.items.addTagToNote(activeNote, tag, this.addNoteToParentFolders)
@@ -183,7 +183,8 @@ export class NoteTagsState extends AbstractState {
   }
 
   async removeTagFromActiveNote(tag: SNTag): Promise<void> {
-    const { activeNote } = this
+    const activeNote = this.appState.notesView.activeControllerNote
+
     if (activeNote) {
       await this.application.mutator.changeItem(tag, (mutator) => {
         mutator.removeItemAsRelationship(activeNote)
diff --git a/app/assets/javascripts/UIModels/AppState/NotesState.ts b/app/assets/javascripts/UIModels/AppState/NotesState.ts
index 13988a892..a8c638c19 100644
--- a/app/assets/javascripts/UIModels/AppState/NotesState.ts
+++ b/app/assets/javascripts/UIModels/AppState/NotesState.ts
@@ -3,16 +3,7 @@ import { confirmDialog } from '@/Services/AlertService'
 import { KeyboardModifier } from '@/Services/IOService'
 import { StringEmptyTrash, Strings, StringUtils } from '@/Strings'
 import { MENU_MARGIN_FROM_APP_BORDER } from '@/Constants'
-import {
-  UuidString,
-  SNNote,
-  NoteMutator,
-  ContentType,
-  SNTag,
-  ChallengeReason,
-  NoteViewController,
-  DeinitSource,
-} from '@standardnotes/snjs'
+import { UuidString, SNNote, NoteMutator, ContentType, SNTag, ChallengeReason, DeinitSource } from '@standardnotes/snjs'
 import { makeObservable, observable, action, computed, runInAction } from 'mobx'
 import { WebApplication } from '../Application'
 import { AppState } from './AppState'
@@ -81,11 +72,21 @@ export class NotesState extends AbstractState {
           }
         })
       }),
-    )
-  }
 
-  get activeNoteController(): NoteViewController | undefined {
-    return this.application.noteControllerGroup.noteControllers[0]
+      this.application.noteControllerGroup.addActiveControllerChangeObserver(() => {
+        const controllers = this.application.noteControllerGroup.noteControllers
+
+        const activeNoteUuids = controllers.map((c) => c.note.uuid)
+
+        const selectedUuids = this.getSelectedNotesList().map((n) => n.uuid)
+
+        for (const selectedId of selectedUuids) {
+          if (!activeNoteUuids.includes(selectedId)) {
+            delete this.selectedNotes[selectedId]
+          }
+        }
+      }),
+    )
   }
 
   get selectedNotesCount(): number {
@@ -132,11 +133,18 @@ export class NotesState extends AbstractState {
       return
     }
 
+    if (this.selectedNotes[uuid]) {
+      return
+    }
+
     const hasMeta = this.io.activeModifiers.has(KeyboardModifier.Meta)
     const hasCtrl = this.io.activeModifiers.has(KeyboardModifier.Ctrl)
     const hasShift = this.io.activeModifiers.has(KeyboardModifier.Shift)
 
-    if (userTriggered && (hasMeta || hasCtrl)) {
+    const isMultipleSelectSingle = userTriggered && (hasMeta || hasCtrl)
+    const isMultipleSelectRange = userTriggered && hasShift
+
+    if (isMultipleSelectSingle) {
       if (this.selectedNotes[uuid]) {
         delete this.selectedNotes[uuid]
       } else if (await this.application.authorizeNoteAccess(note)) {
@@ -145,7 +153,7 @@ export class NotesState extends AbstractState {
           this.lastSelectedNote = note
         })
       }
-    } else if (userTriggered && hasShift) {
+    } else if (isMultipleSelectRange) {
       await this.selectNotesRange(note)
     } else {
       const shouldSelectNote = this.selectedNotesCount > 1 || !this.selectedNotes[uuid]
@@ -165,7 +173,7 @@ export class NotesState extends AbstractState {
   }
 
   private async openNote(noteUuid: string): Promise<void> {
-    if (this.activeNoteController?.note?.uuid === noteUuid) {
+    if (this.appState.notesView.activeControllerNote?.uuid === noteUuid) {
       return
     }
 
@@ -175,16 +183,21 @@ export class NotesState extends AbstractState {
       return
     }
 
-    if (this.activeNoteController) {
-      this.application.noteControllerGroup.closeActiveNoteView()
-    }
-
-    await this.application.noteControllerGroup.createNoteView(noteUuid)
+    await this.application.noteControllerGroup.createNoteController(noteUuid)
 
     this.appState.noteTags.reloadTags()
+
     await this.onActiveEditorChanged()
   }
 
+  async createNewNoteController(title?: string) {
+    const selectedTag = this.appState.tags.selected
+
+    const activeRegularTagUuid = selectedTag && selectedTag instanceof SNTag ? selectedTag.uuid : undefined
+
+    await this.application.noteControllerGroup.createNoteController(undefined, title, activeRegularTagUuid)
+  }
+
   setContextMenuOpen(open: boolean): void {
     this.contextMenuOpen = open
   }
@@ -249,7 +262,7 @@ export class NotesState extends AbstractState {
   }
 
   async changeSelectedNotes(mutate: (mutator: NoteMutator) => void): Promise<void> {
-    await this.application.mutator.changeItems(Object.values(this.selectedNotes), mutate, false)
+    await this.application.mutator.changeItems(this.getSelectedNotesList(), mutate, false)
     this.application.sync.sync().catch(console.error)
   }
 
@@ -290,7 +303,7 @@ export class NotesState extends AbstractState {
   }
 
   async deleteNotes(permanently: boolean): Promise<boolean> {
-    if (Object.values(this.selectedNotes).some((note) => note.locked)) {
+    if (this.getSelectedNotesList().some((note) => note.locked)) {
       const text = StringUtils.deleteLockedNotesAttempt(this.selectedNotesCount)
       this.application.alertService.alert(text).catch(console.error)
       return false
@@ -299,7 +312,7 @@ export class NotesState extends AbstractState {
     const title = Strings.trashNotesTitle
     let noteTitle = undefined
     if (this.selectedNotesCount === 1) {
-      const selectedNote = Object.values(this.selectedNotes)[0]
+      const selectedNote = this.getSelectedNotesList()[0]
       noteTitle = selectedNote.title.length ? `'${selectedNote.title}'` : 'this note'
     }
     const text = StringUtils.deleteNotes(permanently, this.selectedNotesCount, noteTitle)
@@ -312,7 +325,7 @@ export class NotesState extends AbstractState {
       })
     ) {
       if (permanently) {
-        for (const note of Object.values(this.selectedNotes)) {
+        for (const note of this.getSelectedNotesList()) {
           await this.application.mutator.deleteItem(note)
           delete this.selectedNotes[note.uuid]
         }
@@ -334,7 +347,7 @@ export class NotesState extends AbstractState {
   }
 
   async setArchiveSelectedNotes(archived: boolean): Promise<void> {
-    if (Object.values(this.selectedNotes).some((note) => note.locked)) {
+    if (this.getSelectedNotesList().some((note) => note.locked)) {
       this.application.alertService
         .alert(StringUtils.archiveLockedNotesAttempt(archived, this.selectedNotesCount))
         .catch(console.error)
@@ -352,7 +365,7 @@ export class NotesState extends AbstractState {
   }
 
   async setProtectSelectedNotes(protect: boolean): Promise<void> {
-    const selectedNotes = Object.values(this.selectedNotes)
+    const selectedNotes = this.getSelectedNotesList()
     if (protect) {
       await this.application.mutator.protectNotes(selectedNotes)
       this.setShowProtectedWarning(true)
@@ -382,7 +395,7 @@ export class NotesState extends AbstractState {
   }
 
   async addTagToSelectedNotes(tag: SNTag): Promise<void> {
-    const selectedNotes = Object.values(this.selectedNotes)
+    const selectedNotes = this.getSelectedNotesList()
     const parentChainTags = this.application.items.getTagParentChain(tag)
     const tagsToAdd = [...parentChainTags, tag]
     await Promise.all(
@@ -398,7 +411,7 @@ export class NotesState extends AbstractState {
   }
 
   async removeTagFromSelectedNotes(tag: SNTag): Promise<void> {
-    const selectedNotes = Object.values(this.selectedNotes)
+    const selectedNotes = this.getSelectedNotesList()
     await this.application.mutator.changeItem(tag, (mutator) => {
       for (const note of selectedNotes) {
         mutator.removeItemAsRelationship(note)
@@ -408,7 +421,7 @@ export class NotesState extends AbstractState {
   }
 
   isTagInSelectedNotes(tag: SNTag): boolean {
-    const selectedNotes = Object.values(this.selectedNotes)
+    const selectedNotes = this.getSelectedNotesList()
     return selectedNotes.every((note) => this.appState.getNoteTags(note).find((noteTag) => noteTag.uuid === tag.uuid))
   }
 
@@ -428,6 +441,10 @@ export class NotesState extends AbstractState {
     }
   }
 
+  private getSelectedNotesList(): SNNote[] {
+    return Object.values(this.selectedNotes)
+  }
+
   private get io() {
     return this.application.io
   }
diff --git a/app/assets/javascripts/UIModels/AppState/NotesViewState.ts b/app/assets/javascripts/UIModels/AppState/NotesViewState.ts
index d71e4e9ef..028293104 100644
--- a/app/assets/javascripts/UIModels/AppState/NotesViewState.ts
+++ b/app/assets/javascripts/UIModels/AppState/NotesViewState.ts
@@ -7,14 +7,14 @@ import {
   DeinitSource,
   findInArray,
   NotesDisplayCriteria,
+  NoteViewController,
   PrefKey,
   SmartView,
   SNNote,
   SNTag,
   SystemViewId,
-  UuidString,
 } from '@standardnotes/snjs'
-import { action, autorun, computed, makeObservable, observable, reaction } from 'mobx'
+import { action, computed, makeObservable, observable, reaction } from 'mobx'
 import { AppState, AppStateEvent } from '.'
 import { WebApplication } from '../Application'
 import { AbstractState } from './AbstractState'
@@ -47,7 +47,6 @@ export class NotesViewState extends AbstractState {
   panelWidth = 0
   renderedNotes: SNNote[] = []
   searchSubmitted = false
-  selectedNotes: Record<UuidString, SNNote> = {}
   showDisplayOptionsMenu = false
   displayOptions = {
     sortBy: CollectionSort.CreatedAt,
@@ -61,13 +60,13 @@ export class NotesViewState extends AbstractState {
     hideNotePreview: false,
     hideEditorIcon: false,
   }
+  private reloadNotesPromise?: Promise<unknown>
 
   override deinit(source: DeinitSource) {
     super.deinit(source)
     ;(this.noteFilterText as unknown) = undefined
     ;(this.notes as unknown) = undefined
     ;(this.renderedNotes as unknown) = undefined
-    ;(this.selectedNotes as unknown) = undefined
     ;(window.onresize as unknown) = undefined
 
     destroyAllObjectProperties(this)
@@ -80,65 +79,45 @@ export class NotesViewState extends AbstractState {
 
     appObservers.push(
       application.streamItems<SNNote>(ContentType.Note, () => {
-        this.reloadNotes()
-
-        const activeNote = appState.notes.activeNoteController?.note
-
-        if (appState.notes.selectedNotesCount < 2) {
-          if (activeNote) {
-            const browsingTrashedNotes =
-              appState.selectedTag instanceof SmartView && appState.selectedTag?.uuid === SystemViewId.TrashedNotes
-
-            if (activeNote.trashed && !browsingTrashedNotes && !appState?.searchOptions.includeTrashed) {
-              this.selectNextOrCreateNew()
-            } else if (!this.selectedNotes[activeNote.uuid]) {
-              this.selectNote(activeNote).catch(console.error)
-            }
-          } else {
-            this.selectFirstNote()
-          }
-        }
+        void this.reloadNotes()
       }),
 
       application.streamItems<SNTag>([ContentType.Tag], async ({ changed, inserted }) => {
         const tags = [...changed, ...inserted]
+
         /** A tag could have changed its relationships, so we need to reload the filter */
         this.reloadNotesDisplayOptions()
-        this.reloadNotes()
 
-        if (appState.selectedTag && findInArray(tags, 'uuid', appState.selectedTag.uuid)) {
+        void this.reloadNotes()
+
+        if (appState.tags.selected && findInArray(tags, 'uuid', appState.tags.selected.uuid)) {
           /** Tag title could have changed */
           this.reloadPanelTitle()
         }
       }),
       application.addEventObserver(async () => {
-        this.reloadPreferences()
+        void this.reloadPreferences()
       }, ApplicationEvent.PreferencesChanged),
       application.addEventObserver(async () => {
-        appState.closeAllNoteControllers()
-        this.selectFirstNote()
+        this.application.noteControllerGroup.closeAllNoteControllers()
+        void this.selectFirstNote()
         this.setCompletedFullSync(false)
       }, ApplicationEvent.SignedIn),
       application.addEventObserver(async () => {
-        this.reloadNotes()
-        if (
-          this.notes.length === 0 &&
-          appState.selectedTag instanceof SmartView &&
-          appState.selectedTag.uuid === SystemViewId.AllNotes &&
-          this.noteFilterText === '' &&
-          !appState.notes.activeNoteController
-        ) {
-          this.createPlaceholderNote()?.catch(console.error)
-        }
+        void this.reloadNotes().then(() => {
+          if (
+            this.notes.length === 0 &&
+            appState.tags.selected instanceof SmartView &&
+            appState.tags.selected.uuid === SystemViewId.AllNotes &&
+            this.noteFilterText === '' &&
+            !this.getActiveNoteController()
+          ) {
+            this.createPlaceholderNote()?.catch(console.error)
+          }
+        })
         this.setCompletedFullSync(true)
       }, ApplicationEvent.CompletedFullSync),
 
-      autorun(() => {
-        if (appState.notes.selectedNotes) {
-          this.syncSelectedNotes()
-        }
-      }),
-
       reaction(
         () => [
           appState.searchOptions.includeProtectedContents,
@@ -147,7 +126,7 @@ export class NotesViewState extends AbstractState {
         ],
         () => {
           this.reloadNotesDisplayOptions()
-          this.reloadNotes()
+          void this.reloadNotes()
         },
       ),
 
@@ -170,7 +149,6 @@ export class NotesViewState extends AbstractState {
       notesToDisplay: observable,
       panelTitle: observable,
       renderedNotes: observable,
-      selectedNotes: observable,
       showDisplayOptionsMenu: observable,
 
       reloadNotes: action,
@@ -179,7 +157,6 @@ export class NotesViewState extends AbstractState {
       resetPagination: action,
       setCompletedFullSync: action,
       setNoteFilterText: action,
-      syncSelectedNotes: action,
       setShowDisplayOptionsMenu: action,
       onFilterEnter: action,
       handleFilterTextChanged: action,
@@ -192,6 +169,14 @@ export class NotesViewState extends AbstractState {
     }
   }
 
+  public getActiveNoteController(): NoteViewController | undefined {
+    return this.application.noteControllerGroup.activeNoteViewController
+  }
+
+  public get activeControllerNote(): SNNote | undefined {
+    return this.getActiveNoteController()?.note
+  }
+
   setCompletedFullSync = (completed: boolean) => {
     this.completedFullSync = completed
   }
@@ -208,36 +193,96 @@ export class NotesViewState extends AbstractState {
     return !!this.noteFilterText && this.noteFilterText.length > 0
   }
 
-  get activeEditorNote() {
-    return this.appState.notes.activeNoteController?.note
-  }
-
   reloadPanelTitle = () => {
     let title = this.panelTitle
+
     if (this.isFiltering) {
       const resultCount = this.notes.length
       title = `${resultCount} search results`
-    } else if (this.appState.selectedTag) {
-      title = `${this.appState.selectedTag.title}`
+    } else if (this.appState.tags.selected) {
+      title = `${this.appState.tags.selected.title}`
     }
+
     this.panelTitle = title
   }
 
-  reloadNotes = () => {
-    const tag = this.appState.selectedTag
+  reloadNotes = async (): Promise<void> => {
+    if (this.reloadNotesPromise) {
+      await this.reloadNotesPromise
+    }
+
+    this.reloadNotesPromise = this.performReloadNotes()
+
+    await this.reloadNotesPromise
+  }
+
+  private async performReloadNotes() {
+    const tag = this.appState.tags.selected
     if (!tag) {
       return
     }
+
     const notes = this.application.items.getDisplayableNotes()
+
     const renderedNotes = notes.slice(0, this.notesToDisplay)
 
     this.notes = notes
+
     this.renderedNotes = renderedNotes
+
+    await this.recomputeSelectionAfterNotesReload()
+
     this.reloadPanelTitle()
   }
 
+  private async recomputeSelectionAfterNotesReload() {
+    const appState = this.appState
+    const activeController = this.getActiveNoteController()
+    const activeNote = activeController?.note
+    const isSearching = this.noteFilterText.length > 0
+    const hasMultipleNotesSelected = appState.notes.selectedNotesCount >= 2
+
+    if (hasMultipleNotesSelected) {
+      return
+    }
+
+    if (!activeNote) {
+      await this.selectFirstNote()
+
+      return
+    }
+
+    if (activeController.isTemplateNote) {
+      return
+    }
+
+    const noteExistsInUpdatedResults = this.notes.find((note) => note.uuid === activeNote.uuid)
+    if (!noteExistsInUpdatedResults && !isSearching) {
+      this.application.noteControllerGroup.closeNoteController(activeController)
+
+      this.selectNextNote()
+
+      return
+    }
+
+    const showTrashedNotes =
+      (appState.tags.selected instanceof SmartView && appState.tags.selected?.uuid === SystemViewId.TrashedNotes) ||
+      appState?.searchOptions.includeTrashed
+
+    const showArchivedNotes =
+      (appState.tags.selected instanceof SmartView && appState.tags.selected.uuid === SystemViewId.ArchivedNotes) ||
+      appState.searchOptions.includeArchived ||
+      this.application.getPreference(PrefKey.NotesShowArchived, false)
+
+    if ((activeNote.trashed && !showTrashedNotes) || (activeNote.archived && !showArchivedNotes)) {
+      await this.selectNextOrCreateNew()
+    } else if (!this.appState.notes.selectedNotes[activeNote.uuid]) {
+      await this.selectNoteWithScrollHandling(activeNote).catch(console.error)
+    }
+  }
+
   reloadNotesDisplayOptions = () => {
-    const tag = this.appState.selectedTag
+    const tag = this.appState.tags.selected
 
     const searchText = this.noteFilterText.toLowerCase()
     const isSearching = searchText.length
@@ -266,10 +311,11 @@ export class NotesViewState extends AbstractState {
         includeProtectedNoteText: this.appState.searchOptions.includeProtectedContents,
       },
     })
+
     this.application.items.setNotesDisplayCriteria(criteria)
   }
 
-  reloadPreferences = () => {
+  reloadPreferences = async () => {
     const freshDisplayOptions = {} as DisplayOptions
     const currentSortBy = this.displayOptions.sortBy
     let sortBy = this.application.getPreference(PrefKey.SortNotesBy, CollectionSort.CreatedAt)
@@ -287,6 +333,7 @@ export class NotesViewState extends AbstractState {
     freshDisplayOptions.hideDate = this.application.getPreference(PrefKey.NotesHideDate, false)
     freshDisplayOptions.hideTags = this.application.getPreference(PrefKey.NotesHideTags, true)
     freshDisplayOptions.hideEditorIcon = this.application.getPreference(PrefKey.NotesHideEditorIcon, false)
+
     const displayOptionsChanged =
       freshDisplayOptions.sortBy !== this.displayOptions.sortBy ||
       freshDisplayOptions.sortReverse !== this.displayOptions.sortReverse ||
@@ -296,12 +343,14 @@ export class NotesViewState extends AbstractState {
       freshDisplayOptions.hideProtected !== this.displayOptions.hideProtected ||
       freshDisplayOptions.hideEditorIcon !== this.displayOptions.hideEditorIcon ||
       freshDisplayOptions.hideTags !== this.displayOptions.hideTags
+
     this.displayOptions = freshDisplayOptions
+
     if (displayOptionsChanged) {
       this.reloadNotesDisplayOptions()
     }
 
-    this.reloadNotes()
+    await this.reloadNotes()
 
     const width = this.application.getPreference(PrefKey.NotesPanelWidth)
     if (width) {
@@ -309,28 +358,29 @@ export class NotesViewState extends AbstractState {
     }
 
     if (freshDisplayOptions.sortBy !== currentSortBy) {
-      this.selectFirstNote()
+      await this.selectFirstNote()
     }
   }
 
   createNewNote = async () => {
     this.appState.notes.unselectNotes()
+
     let title = `Note ${this.notes.length + 1}`
     if (this.isFiltering) {
       title = this.noteFilterText
     }
 
-    await this.appState.openNewNote(title)
+    await this.appState.notes.createNewNoteController(title)
 
-    this.reloadNotes()
     this.appState.noteTags.reloadTags()
   }
 
   createPlaceholderNote = () => {
-    const selectedTag = this.appState.selectedTag
+    const selectedTag = this.appState.tags.selected
     if (selectedTag && selectedTag instanceof SmartView && selectedTag.uuid !== SystemViewId.AllNotes) {
       return
     }
+
     return this.createNewNote()
   }
 
@@ -363,7 +413,8 @@ export class NotesViewState extends AbstractState {
 
   paginate = () => {
     this.notesToDisplay += this.pageSize
-    this.reloadNotes()
+
+    void this.reloadNotes()
 
     if (this.searchSubmitted) {
       this.application.getDesktopService()?.searchText(this.noteFilterText)
@@ -390,8 +441,13 @@ export class NotesViewState extends AbstractState {
     return document.getElementById(ELEMENT_ID_SCROLL_CONTAINER)
   }
 
-  selectNote = async (note: SNNote, userTriggered?: boolean, scrollIntoView = true): Promise<void> => {
+  selectNoteWithScrollHandling = async (
+    note: SNNote,
+    userTriggered?: boolean,
+    scrollIntoView = true,
+  ): Promise<void> => {
     await this.appState.notes.selectNote(note.uuid, userTriggered)
+
     if (scrollIntoView) {
       const noteElement = document.getElementById(`note-${note.uuid}`)
       noteElement?.scrollIntoView({
@@ -400,10 +456,12 @@ export class NotesViewState extends AbstractState {
     }
   }
 
-  selectFirstNote = () => {
+  selectFirstNote = async () => {
     const note = this.getFirstNonProtectedNote()
+
     if (note) {
-      this.selectNote(note, false, false).catch(console.error)
+      await this.selectNoteWithScrollHandling(note, false, false)
+
       this.resetScrollPosition()
     }
   }
@@ -411,33 +469,37 @@ export class NotesViewState extends AbstractState {
   selectNextNote = () => {
     const displayableNotes = this.notes
     const currentIndex = displayableNotes.findIndex((candidate) => {
-      return candidate.uuid === this.activeEditorNote?.uuid
+      return candidate.uuid === this.activeControllerNote?.uuid
     })
+
     if (currentIndex + 1 < displayableNotes.length) {
       const nextNote = displayableNotes[currentIndex + 1]
-      this.selectNote(nextNote).catch(console.error)
+
+      this.selectNoteWithScrollHandling(nextNote).catch(console.error)
+
       const nextNoteElement = document.getElementById(`note-${nextNote.uuid}`)
       nextNoteElement?.focus()
     }
   }
 
-  selectNextOrCreateNew = () => {
+  selectNextOrCreateNew = async () => {
     const note = this.getFirstNonProtectedNote()
+
     if (note) {
-      this.selectNote(note, false, false).catch(console.error)
+      await this.selectNoteWithScrollHandling(note, false, false).catch(console.error)
     } else {
-      this.appState.closeActiveNoteController()
+      await this.createNewNote()
     }
   }
 
   selectPreviousNote = () => {
     const displayableNotes = this.notes
 
-    if (this.activeEditorNote) {
-      const currentIndex = displayableNotes.indexOf(this.activeEditorNote)
+    if (this.activeControllerNote) {
+      const currentIndex = displayableNotes.indexOf(this.activeControllerNote)
       if (currentIndex - 1 >= 0) {
         const previousNote = displayableNotes[currentIndex - 1]
-        this.selectNote(previousNote).catch(console.error)
+        this.selectNoteWithScrollHandling(previousNote).catch(console.error)
         const previousNoteElement = document.getElementById(`note-${previousNote.uuid}`)
         previousNoteElement?.focus()
         return true
@@ -450,16 +512,17 @@ export class NotesViewState extends AbstractState {
   }
 
   setNoteFilterText = (text: string) => {
+    if (text === this.noteFilterText) {
+      return
+    }
+
     this.noteFilterText = text
     this.handleFilterTextChanged()
   }
 
-  syncSelectedNotes = () => {
-    this.selectedNotes = this.appState.notes.selectedNotes
-  }
-
   handleEditorChange = async () => {
-    const activeNote = this.appState.getActiveNoteController()?.note
+    const activeNote = this.application.noteControllerGroup.activeNoteViewController?.note
+
     if (activeNote && activeNote.conflictOf) {
       this.application.mutator
         .changeAndSaveItem(activeNote, (mutator) => {
@@ -481,6 +544,11 @@ export class NotesViewState extends AbstractState {
   }
 
   handleTagChange = () => {
+    const activeNoteController = this.getActiveNoteController()
+    if (activeNoteController?.isTemplateNote) {
+      this.application.noteControllerGroup.closeNoteController(activeNoteController)
+    }
+
     this.resetScrollPosition()
 
     this.setShowDisplayOptionsMenu(false)
@@ -491,21 +559,9 @@ export class NotesViewState extends AbstractState {
 
     this.resetPagination()
 
-    /* Capture db load state before beginning reloadNotes,
-      since this status may change during reload */
-    const dbLoaded = this.application.isDatabaseLoaded()
     this.reloadNotesDisplayOptions()
-    this.reloadNotes()
 
-    const hasSomeNotes = this.notes.length > 0
-
-    if (hasSomeNotes) {
-      this.selectFirstNote()
-    } else if (dbLoaded) {
-      if (this.activeEditorNote && !this.notes.includes(this.activeEditorNote)) {
-        this.appState.closeActiveNoteController()
-      }
-    }
+    void this.reloadNotes()
   }
 
   onFilterEnter = () => {
@@ -519,12 +575,24 @@ export class NotesViewState extends AbstractState {
     this.application.getDesktopService()?.searchText(this.noteFilterText)
   }
 
+  public async insertCurrentIfTemplate(): Promise<void> {
+    const controller = this.getActiveNoteController()
+
+    if (!controller) {
+      return
+    }
+
+    if (controller.isTemplateNote) {
+      await controller.insertTemplatedNote()
+    }
+  }
+
   handleFilterTextChanged = () => {
     if (this.searchSubmitted) {
       this.searchSubmitted = false
     }
     this.reloadNotesDisplayOptions()
-    this.reloadNotes()
+    void this.reloadNotes()
   }
 
   clearFilterText = () => {
diff --git a/app/assets/javascripts/UIModels/AppState/TagsState.ts b/app/assets/javascripts/UIModels/AppState/TagsState.ts
index fff5bf2a9..565d5a3d5 100644
--- a/app/assets/javascripts/UIModels/AppState/TagsState.ts
+++ b/app/assets/javascripts/UIModels/AppState/TagsState.ts
@@ -137,19 +137,25 @@ export class TagsState extends AbstractState {
 
           this.smartViews = this.application.items.getSmartViews()
 
-          const selectedTag = this.selected_
+          const currrentSelectedTag = this.selected_
 
-          if (selectedTag && !isSystemView(selectedTag as SmartView)) {
-            if (FindItem(removed, selectedTag.uuid)) {
-              this.selected_ = this.smartViews[0]
-            }
+          if (!currrentSelectedTag) {
+            this.setSelectedTagInstance(this.smartViews[0])
 
-            const updated = FindItem(changed, selectedTag.uuid)
-            if (updated) {
-              this.selected_ = updated as AnyTag
-            }
+            return
+          }
+
+          if (isSystemView(currrentSelectedTag as SmartView)) {
+            return
+          }
+
+          if (FindItem(removed, currrentSelectedTag.uuid)) {
+            this.setSelectedTagInstance(this.smartViews[0])
           } else {
-            this.selected_ = this.smartViews[0]
+            const updated = FindItem(changed, currrentSelectedTag.uuid)
+            if (updated) {
+              this.setSelectedTagInstance(updated as AnyTag)
+            }
           }
         })
       }),
@@ -379,6 +385,11 @@ export class TagsState extends AbstractState {
     }
 
     this.previouslySelected_ = this.selected_
+
+    this.setSelectedTagInstance(tag)
+  }
+
+  private setSelectedTagInstance(tag: AnyTag | undefined): void {
     this.selected_ = tag
   }
 
diff --git a/package.json b/package.json
index d0e9d6f42..4dd55acec 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,7 @@
     "@standardnotes/filepicker": "1.14.8",
     "@standardnotes/icons": "^1.1.7",
     "@standardnotes/sncrypto-web": "1.9.2",
-    "@standardnotes/snjs": "2.109.3",
+    "@standardnotes/snjs": "2.109.4",
     "@standardnotes/stylekit": "5.27.0",
     "@zip.js/zip.js": "^2.4.10",
     "mobx": "^6.5.0",
diff --git a/yarn.lock b/yarn.lock
index 4223cd025..44c6955ea 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2401,10 +2401,10 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.109.3":
-  version "2.109.3"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.109.3.tgz#a6fcd8af317caf340c6099b5e7cfb36f1ec7a1ba"
-  integrity sha512-RIV22G99ZuolxrHTrh12i9IicxsXYZ9kK0mzfG1uO3E7BtFyvKgaoX5Yugi305Q0WsLzf4bWaeAuWl7i3nTJ0Q==
+"@standardnotes/snjs@2.109.4":
+  version "2.109.4"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.109.4.tgz#46c1915b2c8d43e0806fd9ad8bb9868f2ae3a3e8"
+  integrity sha512-DLoLR9RI517zz0N+sA6iHYY8bJ1rGVgOFyKWQVHjJajPwnCllEvETLGKz4IodfAao4lxU9Q3xPQ31q6VyCvWxQ==
   dependencies:
     "@standardnotes/auth" "^3.18.16"
     "@standardnotes/common" "^1.21.0"

From a77bf5b525ad52e8f4cae7171a442ad972d976c1 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Tue, 17 May 2022 22:58:55 -0500
Subject: [PATCH 096/102] refactor: component viewer use state for timeout so
 timeout isnt set if no render eventually occurs

---
 .../Components/Abstract/PureComponent.tsx     |  4 --
 .../Components/ComponentView/index.tsx        | 45 ++++++------
 .../Components/NoteView/NoteView.tsx          | 11 ++-
 .../UIModels/AppState/NotesViewState.ts       | 70 ++++++++++++++-----
 4 files changed, 84 insertions(+), 46 deletions(-)

diff --git a/app/assets/javascripts/Components/Abstract/PureComponent.tsx b/app/assets/javascripts/Components/Abstract/PureComponent.tsx
index 1d562d7ec..341b3737b 100644
--- a/app/assets/javascripts/Components/Abstract/PureComponent.tsx
+++ b/app/assets/javascripts/Components/Abstract/PureComponent.tsx
@@ -54,10 +54,6 @@ export abstract class PureComponent<P = PureComponentProps, S = PureComponentSta
     this.deinit()
   }
 
-  render() {
-    return <div>Must override</div>
-  }
-
   public get appState(): AppState {
     return this.application.getAppState()
   }
diff --git a/app/assets/javascripts/Components/ComponentView/index.tsx b/app/assets/javascripts/Components/ComponentView/index.tsx
index c1ae26b32..65851f376 100644
--- a/app/assets/javascripts/Components/ComponentView/index.tsx
+++ b/app/assets/javascripts/Components/ComponentView/index.tsx
@@ -9,7 +9,7 @@ import {
 } from '@standardnotes/snjs'
 import { WebApplication } from '@/UIModels/Application'
 import { FunctionalComponent } from 'preact'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks'
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { observer } from 'mobx-react-lite'
 import { OfflineRestricted } from '@/Components/ComponentView/OfflineRestricted'
 import { UrlMissing } from '@/Components/ComponentView/UrlMissing'
@@ -25,7 +25,6 @@ interface IProps {
   componentViewer: ComponentViewer
   requestReload?: (viewer: ComponentViewer, force?: boolean) => void
   onLoad?: (component: SNComponent) => void
-  manualDealloc?: boolean
 }
 
 /**
@@ -39,7 +38,7 @@ const MSToWaitAfterIframeLoadToAvoidFlicker = 35
 export const ComponentView: FunctionalComponent<IProps> = observer(
   ({ application, onLoad, componentViewer, requestReload }) => {
     const iframeRef = useRef<HTMLIFrameElement>(null)
-    const excessiveLoadingTimeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+    const [loadTimeout, setLoadTimeout] = useState<ReturnType<typeof setTimeout> | undefined>(undefined)
 
     const [hasIssueLoading, setHasIssueLoading] = useState(false)
     const [isLoading, setIsLoading] = useState(true)
@@ -88,34 +87,36 @@ export const ComponentView: FunctionalComponent<IProps> = observer(
       }
     }, [hasIssueLoading, componentViewer, requestReload])
 
-    const handleIframeTakingTooLongToLoad = useCallback(async () => {
-      setIsLoading(false)
-      setHasIssueLoading(true)
-
-      if (!didAttemptReload) {
-        setDidAttemptReload(true)
-        requestReload?.(componentViewer)
-      } else {
-        document.addEventListener(VisibilityChangeKey, onVisibilityChange)
-      }
-    }, [didAttemptReload, onVisibilityChange, componentViewer, requestReload])
-
-    useMemo(() => {
+    useEffect(() => {
       const loadTimeout = setTimeout(() => {
-        handleIframeTakingTooLongToLoad().catch(console.error)
+        setIsLoading(false)
+        setHasIssueLoading(true)
+
+        if (!didAttemptReload) {
+          setDidAttemptReload(true)
+          requestReload?.(componentViewer)
+        } else {
+          document.addEventListener(VisibilityChangeKey, onVisibilityChange)
+        }
       }, MaxLoadThreshold)
 
-      excessiveLoadingTimeout.current = loadTimeout
+      setLoadTimeout(loadTimeout)
 
       return () => {
-        excessiveLoadingTimeout.current && clearTimeout(excessiveLoadingTimeout.current)
+        if (loadTimeout) {
+          clearTimeout(loadTimeout)
+        }
       }
-    }, [handleIframeTakingTooLongToLoad])
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [componentViewer])
 
     const onIframeLoad = useCallback(() => {
       const iframe = iframeRef.current as HTMLIFrameElement
       const contentWindow = iframe.contentWindow as Window
-      excessiveLoadingTimeout.current && clearTimeout(excessiveLoadingTimeout.current)
+
+      if (loadTimeout) {
+        clearTimeout(loadTimeout)
+      }
 
       try {
         componentViewer.setWindow(contentWindow)
@@ -128,7 +129,7 @@ export const ComponentView: FunctionalComponent<IProps> = observer(
         setHasIssueLoading(false)
         onLoad?.(component)
       }, MSToWaitAfterIframeLoadToAvoidFlicker)
-    }, [componentViewer, onLoad, component, excessiveLoadingTimeout])
+    }, [componentViewer, onLoad, component, loadTimeout])
 
     useEffect(() => {
       const removeFeaturesChangedObserver = componentViewer.addEventObserver((event) => {
diff --git a/app/assets/javascripts/Components/NoteView/NoteView.tsx b/app/assets/javascripts/Components/NoteView/NoteView.tsx
index 41de3de7e..1086e78b0 100644
--- a/app/assets/javascripts/Components/NoteView/NoteView.tsx
+++ b/app/assets/javascripts/Components/NoteView/NoteView.tsx
@@ -264,21 +264,26 @@ export class NoteView extends PureComponent<Props, State> {
 
     let title = this.state.editorTitle,
       text = this.state.editorText
+
     if (isPayloadSourceRetrieved(source)) {
       title = note.title
       text = note.text
     }
+
     if (!this.state.editorTitle) {
       title = note.title
     }
+
     if (!this.state.editorText) {
       text = note.text
     }
+
     if (title !== this.state.editorTitle) {
       this.setState({
         editorTitle: title,
       })
     }
+
     if (text !== this.state.editorText) {
       this.setState({
         editorText: text,
@@ -317,6 +322,7 @@ export class NoteView extends PureComponent<Props, State> {
     if (this.state.editorComponentViewer) {
       this.application.componentManager?.destroyComponentViewer(this.state.editorComponentViewer)
     }
+
     super.componentWillUnmount()
   }
 
@@ -401,12 +407,15 @@ export class NoteView extends PureComponent<Props, State> {
 
   dismissProtectedWarning = async () => {
     let showNoteContents = true
+
     if (this.application.hasProtectionSources()) {
       showNoteContents = await this.application.authorizeNoteAccess(this.note)
     }
+
     if (!showNoteContents) {
       return
     }
+
     this.setShowProtectedOverlay(false)
     this.focusTitle()
   }
@@ -1021,6 +1030,7 @@ export class NoteView extends PureComponent<Props, State> {
             {this.state.editorComponentViewer && (
               <div className="component-view">
                 <ComponentView
+                  key={this.state.editorComponentViewer.identifier}
                   componentViewer={this.state.editorComponentViewer}
                   onLoad={this.onEditorComponentLoad}
                   requestReload={this.editorComponentViewerRequestsReload}
@@ -1099,7 +1109,6 @@ export class NoteView extends PureComponent<Props, State> {
                     <ComponentView
                       key={viewer.identifier}
                       componentViewer={viewer}
-                      manualDealloc={true}
                       application={this.application}
                       appState={this.appState}
                     />
diff --git a/app/assets/javascripts/UIModels/AppState/NotesViewState.ts b/app/assets/javascripts/UIModels/AppState/NotesViewState.ts
index 028293104..df6bcb876 100644
--- a/app/assets/javascripts/UIModels/AppState/NotesViewState.ts
+++ b/app/assets/javascripts/UIModels/AppState/NotesViewState.ts
@@ -14,7 +14,7 @@ import {
   SNTag,
   SystemViewId,
 } from '@standardnotes/snjs'
-import { action, computed, makeObservable, observable, reaction } from 'mobx'
+import { action, computed, makeObservable, observable, reaction, runInAction } from 'mobx'
 import { AppState, AppStateEvent } from '.'
 import { WebApplication } from '../Application'
 import { AbstractState } from './AbstractState'
@@ -228,7 +228,9 @@ export class NotesViewState extends AbstractState {
 
     this.notes = notes
 
-    this.renderedNotes = renderedNotes
+    runInAction(() => {
+      this.renderedNotes = renderedNotes
+    })
 
     await this.recomputeSelectionAfterNotesReload()
 
@@ -258,7 +260,7 @@ export class NotesViewState extends AbstractState {
 
     const noteExistsInUpdatedResults = this.notes.find((note) => note.uuid === activeNote.uuid)
     if (!noteExistsInUpdatedResults && !isSearching) {
-      this.application.noteControllerGroup.closeNoteController(activeController)
+      this.closeNoteController(activeController)
 
       this.selectNextNote()
 
@@ -318,11 +320,12 @@ export class NotesViewState extends AbstractState {
   reloadPreferences = async () => {
     const freshDisplayOptions = {} as DisplayOptions
     const currentSortBy = this.displayOptions.sortBy
+
     let sortBy = this.application.getPreference(PrefKey.SortNotesBy, CollectionSort.CreatedAt)
     if (sortBy === CollectionSort.UpdatedAt || (sortBy as string) === 'client_updated_at') {
-      /** Use UserUpdatedAt instead */
       sortBy = CollectionSort.UpdatedAt
     }
+
     freshDisplayOptions.sortBy = sortBy
     freshDisplayOptions.sortReverse = this.application.getPreference(PrefKey.SortNotesReverse, false)
     freshDisplayOptions.showArchived = this.application.getPreference(PrefKey.NotesShowArchived, false)
@@ -468,17 +471,29 @@ export class NotesViewState extends AbstractState {
 
   selectNextNote = () => {
     const displayableNotes = this.notes
+
     const currentIndex = displayableNotes.findIndex((candidate) => {
       return candidate.uuid === this.activeControllerNote?.uuid
     })
 
-    if (currentIndex + 1 < displayableNotes.length) {
-      const nextNote = displayableNotes[currentIndex + 1]
+    let nextIndex = currentIndex + 1
+
+    while (nextIndex < displayableNotes.length) {
+      const nextNote = displayableNotes[nextIndex]
+
+      nextIndex++
+
+      if (nextNote.protected) {
+        continue
+      }
 
       this.selectNoteWithScrollHandling(nextNote).catch(console.error)
 
       const nextNoteElement = document.getElementById(`note-${nextNote.uuid}`)
+
       nextNoteElement?.focus()
+
+      return
     }
   }
 
@@ -495,20 +510,31 @@ export class NotesViewState extends AbstractState {
   selectPreviousNote = () => {
     const displayableNotes = this.notes
 
-    if (this.activeControllerNote) {
-      const currentIndex = displayableNotes.indexOf(this.activeControllerNote)
-      if (currentIndex - 1 >= 0) {
-        const previousNote = displayableNotes[currentIndex - 1]
-        this.selectNoteWithScrollHandling(previousNote).catch(console.error)
-        const previousNoteElement = document.getElementById(`note-${previousNote.uuid}`)
-        previousNoteElement?.focus()
-        return true
-      } else {
-        return false
-      }
+    if (!this.activeControllerNote) {
+      return
     }
 
-    return undefined
+    const currentIndex = displayableNotes.indexOf(this.activeControllerNote)
+
+    let previousIndex = currentIndex - 1
+
+    while (previousIndex >= 0) {
+      const previousNote = displayableNotes[previousIndex]
+
+      previousIndex--
+
+      if (previousNote.protected) {
+        continue
+      }
+
+      this.selectNoteWithScrollHandling(previousNote).catch(console.error)
+
+      const previousNoteElement = document.getElementById(`note-${previousNote.uuid}`)
+
+      previousNoteElement?.focus()
+
+      return
+    }
   }
 
   setNoteFilterText = (text: string) => {
@@ -543,10 +569,14 @@ export class NotesViewState extends AbstractState {
     }
   }
 
+  private closeNoteController(controller: NoteViewController): void {
+    this.application.noteControllerGroup.closeNoteController(controller)
+  }
+
   handleTagChange = () => {
     const activeNoteController = this.getActiveNoteController()
     if (activeNoteController?.isTemplateNote) {
-      this.application.noteControllerGroup.closeNoteController(activeNoteController)
+      this.closeNoteController(activeNoteController)
     }
 
     this.resetScrollPosition()
@@ -591,7 +621,9 @@ export class NotesViewState extends AbstractState {
     if (this.searchSubmitted) {
       this.searchSubmitted = false
     }
+
     this.reloadNotesDisplayOptions()
+
     void this.reloadNotes()
   }
 

From a97ca854a652b64e211cec7a3e85ca1b0019a35a Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Wed, 18 May 2022 08:26:29 -0500
Subject: [PATCH 097/102] chore: bump stylekit

---
 package.json |  2 +-
 yarn.lock    | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 4dd55acec..60f34b3fc 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
     "@standardnotes/icons": "^1.1.7",
     "@standardnotes/sncrypto-web": "1.9.2",
     "@standardnotes/snjs": "2.109.4",
-    "@standardnotes/stylekit": "5.27.0",
+    "@standardnotes/stylekit": "5.27.1",
     "@zip.js/zip.js": "^2.4.10",
     "mobx": "^6.5.0",
     "mobx-react-lite": "^3.3.0",
diff --git a/yarn.lock b/yarn.lock
index 44c6955ea..888fe3df8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2348,7 +2348,7 @@
     "@standardnotes/services" "^1.11.8"
     "@standardnotes/utils" "^1.6.9"
 
-"@standardnotes/icons@^1.1.6", "@standardnotes/icons@^1.1.7":
+"@standardnotes/icons@^1.1.7":
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/@standardnotes/icons/-/icons-1.1.7.tgz#4523d8e2e3aa34d0e921df802d54c0babe054279"
   integrity sha512-yHB/KInj7qSmtnUqtTo6CPttu+2+oAwdANfjE3a69sgS7nVBxUuwSHHxb9xUOKpJBmipFjJi5F0YVF9kLmHiwg==
@@ -2420,15 +2420,15 @@
     "@standardnotes/sncrypto-common" "^1.8.2"
     "@standardnotes/utils" "^1.6.9"
 
-"@standardnotes/stylekit@5.27.0":
-  version "5.27.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.27.0.tgz#113fcf8c67f2ad6a3a37c62edf0c26427d012b25"
-  integrity sha512-NdwrAQDqosfOMtPpsG7YSxGwJH6HPBJxA/WnLRCBZzsNM7TikHTxPIaAR+sfDV+ABTDair/Ld/oyMOEu1ZIiwA==
+"@standardnotes/stylekit@5.27.1":
+  version "5.27.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.27.1.tgz#49a49d72865759647c64e01841f2a55ba464be9a"
+  integrity sha512-Sto/SCxtPPXZmRKJtvTZGck0Pl4pOIhR36CKT24R6it1P/9eabeqWL0E83Gutj5ME2mqa/hl8Cg/ipMheDz2uQ==
   dependencies:
     "@nanostores/preact" "^0.1.3"
     "@reach/listbox" "^0.16.2"
     "@reach/menu-button" "^0.16.2"
-    "@standardnotes/icons" "^1.1.6"
+    "@standardnotes/icons" "^1.1.7"
     nanoid "^3.3.1"
     nanostores "^0.5.10"
     prop-types "^15.8.1"

From c5ded6da3c0c72383ce17c9b5f3c1402b452501d Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Wed, 18 May 2022 10:38:02 -0500
Subject: [PATCH 098/102] refactor: receive workspace names to handle missing
 idb function in firefox

---
 app/assets/javascripts/Database.ts            | 28 +++++++---
 .../javascripts/Device/WebOrDesktopDevice.ts  |  9 ++-
 package.json                                  |  4 +-
 yarn.lock                                     | 56 +++++++++----------
 4 files changed, 58 insertions(+), 39 deletions(-)

diff --git a/app/assets/javascripts/Database.ts b/app/assets/javascripts/Database.ts
index 8ebd8ea95..a5ed63d40 100644
--- a/app/assets/javascripts/Database.ts
+++ b/app/assets/javascripts/Database.ts
@@ -1,4 +1,4 @@
-import { isString, AlertService } from '@standardnotes/snjs'
+import { isString, AlertService, uniqueArray } from '@standardnotes/snjs'
 
 const STORE_NAME = 'items'
 const READ_WRITE = 'readwrite'
@@ -33,15 +33,29 @@ export class Database {
     this.locked = false
   }
 
-  static async deleteAll(): Promise<void> {
-    const rawDatabases = await window.indexedDB.databases()
+  static async getAllDatabaseNames(): Promise<string[] | undefined> {
+    if (!window.indexedDB.databases) {
+      return undefined
+    }
 
-    for (const rawDb of rawDatabases) {
-      if (!rawDb.name) {
-        continue
+    const rawDatabases = await window.indexedDB.databases()
+    return rawDatabases.map((db) => db.name).filter((name) => name && name.length > 0) as string[]
+  }
+
+  static async deleteAll(databaseNames: string[]): Promise<void> {
+    if (window.indexedDB.databases != undefined) {
+      const idbNames = await this.getAllDatabaseNames()
+
+      if (idbNames) {
+        databaseNames = uniqueArray([...idbNames, ...databaseNames])
       }
-      const db = new Database(rawDb.name)
+    }
+
+    for (const name of databaseNames) {
+      const db = new Database(name)
+
       await db.clearAllPayloads()
+
       db.deinit()
     }
   }
diff --git a/app/assets/javascripts/Device/WebOrDesktopDevice.ts b/app/assets/javascripts/Device/WebOrDesktopDevice.ts
index 11c7be59b..c608f1a62 100644
--- a/app/assets/javascripts/Device/WebOrDesktopDevice.ts
+++ b/app/assets/javascripts/Device/WebOrDesktopDevice.ts
@@ -41,16 +41,21 @@ export abstract class WebOrDesktopDevice implements WebOrDesktopDeviceInterface
     return this.databases.find((database) => database.databaseName === identifier) as Database
   }
 
-  async clearAllDataFromDevice(): Promise<void> {
+  async clearAllDataFromDevice(workspaceIdentifiers: ApplicationIdentifier[]): Promise<{ killsApplication: boolean }> {
     await this.clearRawKeychainValue()
+
     await this.removeAllRawStorageValues()
-    await Database.deleteAll()
+
+    await Database.deleteAll(workspaceIdentifiers)
+
+    return { killsApplication: false }
   }
 
   deinit() {
     for (const database of this.databases) {
       database.deinit()
     }
+
     this.databases = []
   }
 
diff --git a/package.json b/package.json
index 60f34b3fc..63b398632 100644
--- a/package.json
+++ b/package.json
@@ -70,10 +70,10 @@
     "@reach/tooltip": "^0.16.2",
     "@reach/visually-hidden": "^0.16.0",
     "@standardnotes/components": "1.8.1",
-    "@standardnotes/filepicker": "1.14.8",
+    "@standardnotes/filepicker": "1.14.9",
     "@standardnotes/icons": "^1.1.7",
     "@standardnotes/sncrypto-web": "1.9.2",
-    "@standardnotes/snjs": "2.109.4",
+    "@standardnotes/snjs": "2.109.5",
     "@standardnotes/stylekit": "5.27.1",
     "@zip.js/zip.js": "^2.4.10",
     "mobx": "^6.5.0",
diff --git a/yarn.lock b/yarn.lock
index 888fe3df8..2d6cd3d93 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2311,14 +2311,14 @@
     "@standardnotes/auth" "^3.18.16"
     "@standardnotes/features" "^1.44.0"
 
-"@standardnotes/encryption@^1.7.8":
-  version "1.7.8"
-  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.7.8.tgz#ab59f9c37c3e577f89df1891b6ac2683e2d1dec9"
-  integrity sha512-RMyFC3OgTDDFgDq0VMU9sBdC1GKvFthW2D0belSojaxtu/3J1SZ6BUiZ5TYMar+jrVKIMs2X976ukmZ0C8KPPA==
+"@standardnotes/encryption@^1.7.9":
+  version "1.7.9"
+  resolved "https://registry.yarnpkg.com/@standardnotes/encryption/-/encryption-1.7.9.tgz#4a66fcdeca8957f4a29ed327cdc677174cf904f7"
+  integrity sha512-Mqt8XPOXdbn4jbHnORqLsqeqKXAc5PILo1sO51J/lCODxjHAbvnCo+ZQ5mbGzalAp6sZTQ5J+RkwKDnINlzhNA==
   dependencies:
     "@standardnotes/models" "^1.8.6"
     "@standardnotes/responses" "^1.6.23"
-    "@standardnotes/services" "^1.11.8"
+    "@standardnotes/services" "^1.11.9"
 
 "@standardnotes/features@^1.44.0":
   version "1.44.0"
@@ -2328,24 +2328,24 @@
     "@standardnotes/auth" "^3.18.16"
     "@standardnotes/common" "^1.21.0"
 
-"@standardnotes/filepicker@1.14.8", "@standardnotes/filepicker@^1.14.8":
-  version "1.14.8"
-  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.14.8.tgz#aa915399df9d7da3b30b0ea901bcf7d97aca3a42"
-  integrity sha512-52ABvJ79wuINIe6cGKgqV4qulnQbJrw1OwazWVvUWtX3rghWqiFgDT84gH4kma2kZxi0v03VLdbpvd2+i0yIBA==
+"@standardnotes/filepicker@1.14.9", "@standardnotes/filepicker@^1.14.9":
+  version "1.14.9"
+  resolved "https://registry.yarnpkg.com/@standardnotes/filepicker/-/filepicker-1.14.9.tgz#daf1586a7147166dba259a04a17248c69e5b12ca"
+  integrity sha512-Iv0H3NeTmO88k8oesPJY3LRuhfOyyvh4pYp+eD19he91JHNK87K97fdmIc2fa2JkFccW1TthX+1VP/nbUt3YyQ==
   dependencies:
     "@standardnotes/common" "^1.21.0"
-    "@standardnotes/services" "^1.11.8"
+    "@standardnotes/services" "^1.11.9"
     "@standardnotes/utils" "^1.6.9"
 
-"@standardnotes/files@^1.1.9":
-  version "1.1.9"
-  resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.1.9.tgz#9a4bfd60ee26ba6b9f5281853626e87155d11cc5"
-  integrity sha512-yE4zB5QrP4o+sU2EfaK5oidhF4LpSC6slA82787dxKQ9ILDexnH8nyI/YH6sw82OiLHe+CeRR5mW01Pv8A7aYA==
+"@standardnotes/files@^1.1.10":
+  version "1.1.10"
+  resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.1.10.tgz#caa98571cd93588949cd13b8264f5a99f70f372b"
+  integrity sha512-xdq/aC6x8vh8c97L2eNpBSJwmZwuXKdEveHl+KAOxPvRWMyLm8RLtTBME0QtdmfI2ZwkdJiiR4VK+8ZYNMYUsA==
   dependencies:
-    "@standardnotes/encryption" "^1.7.8"
+    "@standardnotes/encryption" "^1.7.9"
     "@standardnotes/models" "^1.8.6"
     "@standardnotes/responses" "^1.6.23"
-    "@standardnotes/services" "^1.11.8"
+    "@standardnotes/services" "^1.11.9"
     "@standardnotes/utils" "^1.6.9"
 
 "@standardnotes/icons@^1.1.7":
@@ -2371,10 +2371,10 @@
     "@standardnotes/common" "^1.21.0"
     "@standardnotes/features" "^1.44.0"
 
-"@standardnotes/services@^1.11.8":
-  version "1.11.8"
-  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.11.8.tgz#8a9ef3212ef0693f611661cff552f22add00a236"
-  integrity sha512-E+hougOnKobH5nKPzpTxaGvYUSw3BWS0rKRMY2Jh5ZhD+y4GqCCA7VoR/7lbxR2GjP5xGpKHYgZR5QIyW+wFJQ==
+"@standardnotes/services@^1.11.9":
+  version "1.11.9"
+  resolved "https://registry.yarnpkg.com/@standardnotes/services/-/services-1.11.9.tgz#9f25eeaf12df66eab1fb4eada9be9143424f7f13"
+  integrity sha512-N1Ij0c4JKnWXemCRa4qKiiuVmJJPqa1hkbxqXn6Zmstbfnl0DxAxE73Lx9qG/EEzE0yGw0uu51/U7pNQ613OLg==
   dependencies:
     "@standardnotes/auth" "^3.18.16"
     "@standardnotes/common" "^1.21.0"
@@ -2401,21 +2401,21 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.109.4":
-  version "2.109.4"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.109.4.tgz#46c1915b2c8d43e0806fd9ad8bb9868f2ae3a3e8"
-  integrity sha512-DLoLR9RI517zz0N+sA6iHYY8bJ1rGVgOFyKWQVHjJajPwnCllEvETLGKz4IodfAao4lxU9Q3xPQ31q6VyCvWxQ==
+"@standardnotes/snjs@2.109.5":
+  version "2.109.5"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.109.5.tgz#e11c8a1d86b25957dcb09664fa37344321c1f0bd"
+  integrity sha512-BfGvsE7sthKlJ+RSBqPxDH3+chyYHkzcReQWoXOKPNbimQlG3AWk/aFvf+ypRYPB6CkmlKD32s0cSFhQIl3dMQ==
   dependencies:
     "@standardnotes/auth" "^3.18.16"
     "@standardnotes/common" "^1.21.0"
     "@standardnotes/domain-events" "^2.28.7"
-    "@standardnotes/encryption" "^1.7.8"
+    "@standardnotes/encryption" "^1.7.9"
     "@standardnotes/features" "^1.44.0"
-    "@standardnotes/filepicker" "^1.14.8"
-    "@standardnotes/files" "^1.1.9"
+    "@standardnotes/filepicker" "^1.14.9"
+    "@standardnotes/files" "^1.1.10"
     "@standardnotes/models" "^1.8.6"
     "@standardnotes/responses" "^1.6.23"
-    "@standardnotes/services" "^1.11.8"
+    "@standardnotes/services" "^1.11.9"
     "@standardnotes/settings" "^1.14.3"
     "@standardnotes/sncrypto-common" "^1.8.2"
     "@standardnotes/utils" "^1.6.9"

From 9524a83ec32bc630b03034d9b88ffa8b6513a478 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Thu, 19 May 2022 17:29:48 +0530
Subject: [PATCH 099/102] feat: update note type menu design (#1032)

---
 .../WorkspaceSwitcher/WorkspaceMenuItem.tsx   |  2 +-
 .../ChangeEditor/ChangeEditorMenu.tsx         | 52 +++++++++----------
 .../javascripts/Components/Menu/MenuItem.tsx  |  2 +-
 .../NotesList/NotesListOptionsMenu.tsx        |  6 +--
 app/assets/stylesheets/_sn.scss               | 15 ++++--
 5 files changed, 41 insertions(+), 36 deletions(-)

diff --git a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
index 663dd919a..065785670 100644
--- a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
@@ -51,7 +51,7 @@ export const WorkspaceMenuItem: FunctionComponent<Props> = ({
       onClick={onClick}
       checked={descriptor.primary}
     >
-      <div className="flex items-center justify-between w-full">
+      <div className="flex items-center justify-between w-full ml-2">
         {isRenaming ? (
           <input
             ref={inputRef}
diff --git a/app/assets/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx b/app/assets/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
index 889a920cc..32c8d9afc 100644
--- a/app/assets/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
+++ b/app/assets/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
@@ -176,34 +176,32 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
 
           return (
             <Fragment key={groupId}>
-              <div
-                className={`flex items-center px-2.5 py-2 text-xs font-semibold color-text border-0 border-y-1px border-solid border-main ${
-                  index === 0 ? 'border-t-0 mb-2' : 'my-2'
-                }`}
-              >
-                {group.icon && <Icon type={group.icon} className={`mr-2 ${group.iconClassName}`} />}
-                <div className="font-semibold text-input">{group.title}</div>
+              <div className={`py-1 border-0 border-t-1px border-solid border-main ${index === 0 ? 'border-t-0' : ''}`}>
+                {group.items.map((item) => {
+                  const onClickEditorItem = () => {
+                    selectEditor(item).catch(console.error)
+                  }
+                  return (
+                    <MenuItem
+                      type={MenuItemType.RadioButton}
+                      onClick={onClickEditorItem}
+                      className={
+                        'sn-dropdown-item py-2 text-input focus:bg-info-backdrop focus:shadow-none flex-row-reverse'
+                      }
+                      onBlur={closeOnBlur}
+                      checked={isSelectedEditor(item)}
+                    >
+                      <div className="flex flex-grow items-center justify-between">
+                        <div className="flex items-center">
+                          {group.icon && <Icon type={group.icon} className={`mr-2 ${group.iconClassName}`} />}
+                          {item.name}
+                        </div>
+                        {!item.isEntitled && <Icon type="premium-feature" />}
+                      </div>
+                    </MenuItem>
+                  )
+                })}
               </div>
-              {group.items.map((item) => {
-                const onClickEditorItem = () => {
-                  selectEditor(item).catch(console.error)
-                }
-
-                return (
-                  <MenuItem
-                    type={MenuItemType.RadioButton}
-                    onClick={onClickEditorItem}
-                    className={'sn-dropdown-item py-2 text-input focus:bg-info-backdrop focus:shadow-none'}
-                    onBlur={closeOnBlur}
-                    checked={isSelectedEditor(item)}
-                  >
-                    <div className="flex flex-grow items-center justify-between">
-                      {item.name}
-                      {!item.isEntitled && <Icon type="premium-feature" />}
-                    </div>
-                  </MenuItem>
-                )
-              })}
             </Fragment>
           )
         })}
diff --git a/app/assets/javascripts/Components/Menu/MenuItem.tsx b/app/assets/javascripts/Components/Menu/MenuItem.tsx
index 10f74ed8b..ad2a9b072 100644
--- a/app/assets/javascripts/Components/Menu/MenuItem.tsx
+++ b/app/assets/javascripts/Components/Menu/MenuItem.tsx
@@ -67,7 +67,7 @@ export const MenuItem: FunctionComponent<MenuItemProps> = forwardRef(
       >
         {type === MenuItemType.IconButton && icon ? <Icon type={icon} className={iconClassName} /> : null}
         {type === MenuItemType.RadioButton && typeof checked === 'boolean' ? (
-          <div className={`pseudo-radio-btn ${checked ? 'pseudo-radio-btn--checked' : ''} mr-2 flex-shrink-0`}></div>
+          <div className={`pseudo-radio-btn ${checked ? 'pseudo-radio-btn--checked' : ''} flex-shrink-0`}></div>
         ) : null}
         {children}
       </button>
diff --git a/app/assets/javascripts/Components/NotesList/NotesListOptionsMenu.tsx b/app/assets/javascripts/Components/NotesList/NotesListOptionsMenu.tsx
index bc1439a7e..367eddecd 100644
--- a/app/assets/javascripts/Components/NotesList/NotesListOptionsMenu.tsx
+++ b/app/assets/javascripts/Components/NotesList/NotesListOptionsMenu.tsx
@@ -119,7 +119,7 @@ export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
           checked={sortBy === CollectionSort.UpdatedAt}
           onBlur={closeOnBlur}
         >
-          <div className="flex flex-grow items-center justify-between">
+          <div className="flex flex-grow items-center justify-between ml-2">
             <span>Date modified</span>
             {sortBy === CollectionSort.UpdatedAt ? (
               sortReverse ? (
@@ -137,7 +137,7 @@ export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
           checked={sortBy === CollectionSort.CreatedAt}
           onBlur={closeOnBlur}
         >
-          <div className="flex flex-grow items-center justify-between">
+          <div className="flex flex-grow items-center justify-between ml-2">
             <span>Creation date</span>
             {sortBy === CollectionSort.CreatedAt ? (
               sortReverse ? (
@@ -155,7 +155,7 @@ export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
           checked={sortBy === CollectionSort.Title}
           onBlur={closeOnBlur}
         >
-          <div className="flex flex-grow items-center justify-between">
+          <div className="flex flex-grow items-center justify-between ml-2">
             <span>Title</span>
             {sortBy === CollectionSort.Title ? (
               sortReverse ? (
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index bfa58afa4..bc3018db1 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -514,6 +514,10 @@
   border-top-width: 1px;
 }
 
+.sn-component .border-b-0 {
+  border-bottom-width: 0;
+}
+
 .border-2 {
   border-width: 0.5rem;
 }
@@ -1006,8 +1010,7 @@
 }
 
 .focus\:shadow-inner:focus {
-  box-shadow: var(--sn-stylekit-info-color) 1px 1px 0px 0px inset,
-    var(--sn-stylekit-info-color) -1px -1px 0px 0px inset;
+  box-shadow: var(--sn-stylekit-info-color) 1px 1px 0px 0px inset, var(--sn-stylekit-info-color) -1px -1px 0px 0px inset;
 }
 
 .focus\:shadow-bottom:focus {
@@ -1076,8 +1079,8 @@
 }
 
 .transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
-    opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow,
+    transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 100ms;
 }
@@ -1152,3 +1155,7 @@
     border-radius: 0.5rem;
   }
 }
+
+.sn-component .flex-row-reverse {
+  flex-flow: row-reverse;
+}

From cb6a81afd670e4f9d44e7f8727ea0eea602f7243 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Thu, 19 May 2022 17:49:13 +0530
Subject: [PATCH 100/102] feat: updated "note editing disabled" design (#1033)

---
 .../Components/NoteView/NoteView.tsx           | 18 ++++++++----------
 .../Components/NotesOptions/NotesOptions.tsx   |  2 +-
 app/assets/stylesheets/_sn.scss                |  2 +-
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/Components/NoteView/NoteView.tsx b/app/assets/javascripts/Components/NoteView/NoteView.tsx
index 1086e78b0..b77f5fe3f 100644
--- a/app/assets/javascripts/Components/NoteView/NoteView.tsx
+++ b/app/assets/javascripts/Components/NoteView/NoteView.tsx
@@ -919,7 +919,7 @@ export class NoteView extends PureComponent<Props, State> {
           <div className="sn-component">
             {this.state.noteLocked && (
               <div
-                className="sk-app-bar no-edges"
+                className="flex items-center px-3.5 py-2 bg-warning cursor-pointer"
                 onMouseLeave={() => {
                   this.setState({
                     lockText: 'Note Editing Disabled',
@@ -932,16 +932,14 @@ export class NoteView extends PureComponent<Props, State> {
                     showLockedIcon: false,
                   })
                 }}
+                onClick={() => this.appState.notes.setLockSelectedNotes(!this.state.noteLocked)}
               >
-                <div
-                  onClick={() => this.appState.notes.setLockSelectedNotes(!this.state.noteLocked)}
-                  className="sk-app-bar-item"
-                >
-                  <div className="sk-label warning flex items-center">
-                    {this.state.showLockedIcon && <Icon type="pencil-off" className="flex fill-current mr-2" />}
-                    {this.state.lockText}
-                  </div>
-                </div>
+                {this.state.showLockedIcon ? (
+                  <Icon type="pencil-off" className="color-accessory-tint-3 flex fill-current mr-3" />
+                ) : (
+                  <Icon type="pencil" className="color-accessory-tint-3 flex fill-current mr-3" />
+                )}
+                <span className="color-grey-0">{this.state.lockText}</span>
               </div>
             )}
           </div>
diff --git a/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx b/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx
index 5b1dfcbe7..8cd1af663 100644
--- a/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx
+++ b/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx
@@ -167,7 +167,7 @@ const NoteSizeWarning: FunctionComponent<{
   note: SNNote
 }> = ({ note }) => {
   return new Blob([note.text]).size > NOTE_SIZE_WARNING_THRESHOLD ? (
-    <div className="flex items-center px-3 py-3.5 relative bg-note-size-warning">
+    <div className="flex items-center px-3 py-3.5 relative bg-warning">
       <Icon type="warning" className="color-accessory-tint-3 flex-shrink-0 mr-3" />
       <div className="color-grey-0 select-none leading-140% max-w-80%">
         This note may have trouble syncing to the mobile application due to its size.
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index bc3018db1..286a75b4d 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -1017,7 +1017,7 @@
   box-shadow: currentcolor 0px -1px 0px 0px inset, currentcolor 0px 1px 0px 0px;
 }
 
-.bg-note-size-warning {
+.bg-warning {
   background-color: rgba(235, 173, 0, 0.08);
 }
 

From 15f6b1ce13fe61994746ed028343c9debbe14a00 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Thu, 19 May 2022 07:21:01 -0500
Subject: [PATCH 101/102] Revert "feat: updated "note editing disabled" design
 (#1033)"

This reverts commit cb6a81afd670e4f9d44e7f8727ea0eea602f7243.
---
 .../Components/NoteView/NoteView.tsx           | 18 ++++++++++--------
 .../Components/NotesOptions/NotesOptions.tsx   |  2 +-
 app/assets/stylesheets/_sn.scss                |  2 +-
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/Components/NoteView/NoteView.tsx b/app/assets/javascripts/Components/NoteView/NoteView.tsx
index b77f5fe3f..1086e78b0 100644
--- a/app/assets/javascripts/Components/NoteView/NoteView.tsx
+++ b/app/assets/javascripts/Components/NoteView/NoteView.tsx
@@ -919,7 +919,7 @@ export class NoteView extends PureComponent<Props, State> {
           <div className="sn-component">
             {this.state.noteLocked && (
               <div
-                className="flex items-center px-3.5 py-2 bg-warning cursor-pointer"
+                className="sk-app-bar no-edges"
                 onMouseLeave={() => {
                   this.setState({
                     lockText: 'Note Editing Disabled',
@@ -932,14 +932,16 @@ export class NoteView extends PureComponent<Props, State> {
                     showLockedIcon: false,
                   })
                 }}
-                onClick={() => this.appState.notes.setLockSelectedNotes(!this.state.noteLocked)}
               >
-                {this.state.showLockedIcon ? (
-                  <Icon type="pencil-off" className="color-accessory-tint-3 flex fill-current mr-3" />
-                ) : (
-                  <Icon type="pencil" className="color-accessory-tint-3 flex fill-current mr-3" />
-                )}
-                <span className="color-grey-0">{this.state.lockText}</span>
+                <div
+                  onClick={() => this.appState.notes.setLockSelectedNotes(!this.state.noteLocked)}
+                  className="sk-app-bar-item"
+                >
+                  <div className="sk-label warning flex items-center">
+                    {this.state.showLockedIcon && <Icon type="pencil-off" className="flex fill-current mr-2" />}
+                    {this.state.lockText}
+                  </div>
+                </div>
               </div>
             )}
           </div>
diff --git a/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx b/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx
index 8cd1af663..5b1dfcbe7 100644
--- a/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx
+++ b/app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx
@@ -167,7 +167,7 @@ const NoteSizeWarning: FunctionComponent<{
   note: SNNote
 }> = ({ note }) => {
   return new Blob([note.text]).size > NOTE_SIZE_WARNING_THRESHOLD ? (
-    <div className="flex items-center px-3 py-3.5 relative bg-warning">
+    <div className="flex items-center px-3 py-3.5 relative bg-note-size-warning">
       <Icon type="warning" className="color-accessory-tint-3 flex-shrink-0 mr-3" />
       <div className="color-grey-0 select-none leading-140% max-w-80%">
         This note may have trouble syncing to the mobile application due to its size.
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 286a75b4d..bc3018db1 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -1017,7 +1017,7 @@
   box-shadow: currentcolor 0px -1px 0px 0px inset, currentcolor 0px 1px 0px 0px;
 }
 
-.bg-warning {
+.bg-note-size-warning {
   background-color: rgba(235, 173, 0, 0.08);
 }
 

From b36c9d09bc00566168d2e21a42d1556d2324821b Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Thu, 19 May 2022 07:21:08 -0500
Subject: [PATCH 102/102] Revert "feat: update note type menu design (#1032)"

This reverts commit 9524a83ec32bc630b03034d9b88ffa8b6513a478.
---
 .../WorkspaceSwitcher/WorkspaceMenuItem.tsx   |  2 +-
 .../ChangeEditor/ChangeEditorMenu.tsx         | 52 ++++++++++---------
 .../javascripts/Components/Menu/MenuItem.tsx  |  2 +-
 .../NotesList/NotesListOptionsMenu.tsx        |  6 +--
 app/assets/stylesheets/_sn.scss               | 15 ++----
 5 files changed, 36 insertions(+), 41 deletions(-)

diff --git a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
index 065785670..663dd919a 100644
--- a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
@@ -51,7 +51,7 @@ export const WorkspaceMenuItem: FunctionComponent<Props> = ({
       onClick={onClick}
       checked={descriptor.primary}
     >
-      <div className="flex items-center justify-between w-full ml-2">
+      <div className="flex items-center justify-between w-full">
         {isRenaming ? (
           <input
             ref={inputRef}
diff --git a/app/assets/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx b/app/assets/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
index 32c8d9afc..889a920cc 100644
--- a/app/assets/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
+++ b/app/assets/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
@@ -176,32 +176,34 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
 
           return (
             <Fragment key={groupId}>
-              <div className={`py-1 border-0 border-t-1px border-solid border-main ${index === 0 ? 'border-t-0' : ''}`}>
-                {group.items.map((item) => {
-                  const onClickEditorItem = () => {
-                    selectEditor(item).catch(console.error)
-                  }
-                  return (
-                    <MenuItem
-                      type={MenuItemType.RadioButton}
-                      onClick={onClickEditorItem}
-                      className={
-                        'sn-dropdown-item py-2 text-input focus:bg-info-backdrop focus:shadow-none flex-row-reverse'
-                      }
-                      onBlur={closeOnBlur}
-                      checked={isSelectedEditor(item)}
-                    >
-                      <div className="flex flex-grow items-center justify-between">
-                        <div className="flex items-center">
-                          {group.icon && <Icon type={group.icon} className={`mr-2 ${group.iconClassName}`} />}
-                          {item.name}
-                        </div>
-                        {!item.isEntitled && <Icon type="premium-feature" />}
-                      </div>
-                    </MenuItem>
-                  )
-                })}
+              <div
+                className={`flex items-center px-2.5 py-2 text-xs font-semibold color-text border-0 border-y-1px border-solid border-main ${
+                  index === 0 ? 'border-t-0 mb-2' : 'my-2'
+                }`}
+              >
+                {group.icon && <Icon type={group.icon} className={`mr-2 ${group.iconClassName}`} />}
+                <div className="font-semibold text-input">{group.title}</div>
               </div>
+              {group.items.map((item) => {
+                const onClickEditorItem = () => {
+                  selectEditor(item).catch(console.error)
+                }
+
+                return (
+                  <MenuItem
+                    type={MenuItemType.RadioButton}
+                    onClick={onClickEditorItem}
+                    className={'sn-dropdown-item py-2 text-input focus:bg-info-backdrop focus:shadow-none'}
+                    onBlur={closeOnBlur}
+                    checked={isSelectedEditor(item)}
+                  >
+                    <div className="flex flex-grow items-center justify-between">
+                      {item.name}
+                      {!item.isEntitled && <Icon type="premium-feature" />}
+                    </div>
+                  </MenuItem>
+                )
+              })}
             </Fragment>
           )
         })}
diff --git a/app/assets/javascripts/Components/Menu/MenuItem.tsx b/app/assets/javascripts/Components/Menu/MenuItem.tsx
index ad2a9b072..10f74ed8b 100644
--- a/app/assets/javascripts/Components/Menu/MenuItem.tsx
+++ b/app/assets/javascripts/Components/Menu/MenuItem.tsx
@@ -67,7 +67,7 @@ export const MenuItem: FunctionComponent<MenuItemProps> = forwardRef(
       >
         {type === MenuItemType.IconButton && icon ? <Icon type={icon} className={iconClassName} /> : null}
         {type === MenuItemType.RadioButton && typeof checked === 'boolean' ? (
-          <div className={`pseudo-radio-btn ${checked ? 'pseudo-radio-btn--checked' : ''} flex-shrink-0`}></div>
+          <div className={`pseudo-radio-btn ${checked ? 'pseudo-radio-btn--checked' : ''} mr-2 flex-shrink-0`}></div>
         ) : null}
         {children}
       </button>
diff --git a/app/assets/javascripts/Components/NotesList/NotesListOptionsMenu.tsx b/app/assets/javascripts/Components/NotesList/NotesListOptionsMenu.tsx
index 367eddecd..bc1439a7e 100644
--- a/app/assets/javascripts/Components/NotesList/NotesListOptionsMenu.tsx
+++ b/app/assets/javascripts/Components/NotesList/NotesListOptionsMenu.tsx
@@ -119,7 +119,7 @@ export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
           checked={sortBy === CollectionSort.UpdatedAt}
           onBlur={closeOnBlur}
         >
-          <div className="flex flex-grow items-center justify-between ml-2">
+          <div className="flex flex-grow items-center justify-between">
             <span>Date modified</span>
             {sortBy === CollectionSort.UpdatedAt ? (
               sortReverse ? (
@@ -137,7 +137,7 @@ export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
           checked={sortBy === CollectionSort.CreatedAt}
           onBlur={closeOnBlur}
         >
-          <div className="flex flex-grow items-center justify-between ml-2">
+          <div className="flex flex-grow items-center justify-between">
             <span>Creation date</span>
             {sortBy === CollectionSort.CreatedAt ? (
               sortReverse ? (
@@ -155,7 +155,7 @@ export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
           checked={sortBy === CollectionSort.Title}
           onBlur={closeOnBlur}
         >
-          <div className="flex flex-grow items-center justify-between ml-2">
+          <div className="flex flex-grow items-center justify-between">
             <span>Title</span>
             {sortBy === CollectionSort.Title ? (
               sortReverse ? (
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index bc3018db1..bfa58afa4 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -514,10 +514,6 @@
   border-top-width: 1px;
 }
 
-.sn-component .border-b-0 {
-  border-bottom-width: 0;
-}
-
 .border-2 {
   border-width: 0.5rem;
 }
@@ -1010,7 +1006,8 @@
 }
 
 .focus\:shadow-inner:focus {
-  box-shadow: var(--sn-stylekit-info-color) 1px 1px 0px 0px inset, var(--sn-stylekit-info-color) -1px -1px 0px 0px inset;
+  box-shadow: var(--sn-stylekit-info-color) 1px 1px 0px 0px inset,
+    var(--sn-stylekit-info-color) -1px -1px 0px 0px inset;
 }
 
 .focus\:shadow-bottom:focus {
@@ -1079,8 +1076,8 @@
 }
 
 .transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow,
-    transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
+    opacity, box-shadow, transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 100ms;
 }
@@ -1155,7 +1152,3 @@
     border-radius: 0.5rem;
   }
 }
-
-.sn-component .flex-row-reverse {
-  flex-flow: row-reverse;
-}