chore: prettier files

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

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

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

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

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

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, () => {