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)
   }
 }