refactor: reviewer's comment

- use Preact's `FunctionalComponent` instead of React's `FC` to keep the app more lightweight
- remove `@node_modules/` from imports

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

@@ -5,14 +5,14 @@ import {
   STRING_GENERATING_REGISTER_KEYS,
   STRING_NON_MATCHING_PASSWORDS
 } from '@/strings';
-import { JSXInternal } from '@node_modules/preact/src/jsx';
+import { JSXInternal } from 'preact/src/jsx';
 import TargetedEvent = JSXInternal.TargetedEvent;
 import TargetedKeyboardEvent = JSXInternal.TargetedKeyboardEvent;
 import { WebApplication } from '@/ui_models/application';
 import { StateUpdater, useEffect, useRef, useState } from 'preact/hooks';
 import TargetedMouseEvent = JSXInternal.TargetedMouseEvent;
-import { User } from '@node_modules/@standardnotes/snjs/dist/@types/services/api/responses';
+import { FunctionalComponent } from 'preact';
-import { FC } from 'react';
+import { User } from '@standardnotes/snjs/dist/@types/services/api/responses';
 
 type Props = {
   application: WebApplication;
@@ -27,7 +27,7 @@ type Props = {
   user: User | undefined;
 }
 
-const Authentication: FC<Props> = ({
+const Authentication: FunctionalComponent<Props> = ({
                                                       application,
                                                       server,
                                                       setServer,
@@ -69,7 +69,6 @@ const Authentication: FC<Props> = ({
 
   const handleHostInputChange = (event: TargetedEvent<HTMLInputElement>) => {
     const { value } = event.target as HTMLInputElement;
-    // setUrl(value);
     setServer(value);
     application.setHost(value);
   };
@@ -243,7 +242,8 @@ const Authentication: FC<Props> = ({
           </div>
           <form className="sk-panel-form" onSubmit={handleAuthFormSubmit} noValidate>
             <div className="sk-panel-section">
-              <input className="sk-input contrast"
+              <input
+                className="sk-input contrast"
                 name="email"
                 type="email"
                 value={email}
@@ -253,7 +253,8 @@ const Authentication: FC<Props> = ({
                 spellcheck={false}
                 ref={emailInputRef}
               />
-              <input className="sk-input contrast"
+              <input
+                className="sk-input contrast"
                 name="password"
                 type="password"
                 value={password}
@@ -265,10 +266,12 @@ const Authentication: FC<Props> = ({
                 ref={passwordInputRef}
               />
               {showRegister &&
-              <input className="sk-input contrast"
+              <input
+                className="sk-input contrast"
                 name="password_conf"
                 type="password"
-                     placeholder="Confirm Password" required
+                placeholder="Confirm Password"
+                required
                 onKeyPress={handleKeyPressKeyDown}
                 onKeyDown={handleKeyPressKeyDown}
                 value={passwordConfirmation}
@@ -276,7 +279,9 @@ const Authentication: FC<Props> = ({
                 ref={passwordConfirmationInputRef}
               />}
               <div className="sk-panel-row" />
-              <button className="sn-button small info" onClick={() => {
+              <button
+                className="sn-button small info"
+                onClick={() => {
                   setShowAdvanced(!showAdvanced);
                 }}>
                 Advanced Options
@@ -290,7 +295,8 @@ const Authentication: FC<Props> = ({
                   </div>
                   <div className="bordered-row padded-row">
                     <label className="sk-label">Sync Server Domain</label>
-                    <input className="sk-input sk-base"
+                    <input
+                      className="sk-input sk-base"
                       name="server"
                       placeholder="Server URL"
                       onChange={handleHostInputChange}

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

@@ -6,13 +6,13 @@ import {
   STRING_UNSUPPORTED_BACKUP_FILE_VERSION,
   StringImportError
 } from '@/strings';
-import { BackupFile } from '@node_modules/@standardnotes/snjs';
+import { BackupFile } from '@standardnotes/snjs';
-import { useState } from '@node_modules/preact/hooks';
+import { useState } from 'preact/hooks';
 import { WebApplication } from '@/ui_models/application';
-import { JSXInternal } from '@node_modules/preact/src/jsx';
+import { JSXInternal } from 'preact/src/jsx';
 import TargetedEvent = JSXInternal.TargetedEvent;
 import { StateUpdater } from 'preact/hooks';
-import { FC } from 'react';
+import { FunctionalComponent } from 'preact';
 
 type Props = {
   application: WebApplication;
@@ -21,7 +21,7 @@ type Props = {
   setIsBackupEncrypted: StateUpdater<boolean>;
 }
 
-const DataBackup: FC<Props> = ({
+const DataBackup: FunctionalComponent<Props> = ({
                                                   application,
                                                   isBackupEncrypted,
                                                   isEncryptionEnabled,

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

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FunctionalComponent } from 'preact';
 
 type Props = {
   isEncryptionEnabled: boolean;
@@ -6,10 +6,10 @@ type Props = {
   encryptionStatusString: string | undefined;
 }
 
-const Encryption: FC<Props> = ({
+const Encryption: FunctionalComponent<Props> = ({
                                                   isEncryptionEnabled,
                                                   notesAndTagsCount,
-                      encryptionStatusString,
+                                                  encryptionStatusString
                                                 }) => {
   const getEncryptionStatusForNotes = () => {
     const length = notesAndTagsCount;
@@ -31,6 +31,6 @@ const Encryption: FC<Props> = ({
       </p>
     </div>
   );
-}
+};
 
 export default Encryption;

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

@@ -1,4 +1,4 @@
-import { useState } from '@node_modules/preact/hooks';
+import { useState } from 'preact/hooks';
 import { storage, StorageKey } from '@Services/localStorage';
 import { disableErrorReporting, enableErrorReporting, errorReportingId } from '@Services/errorReporting';
 import { alertDialog } from '@Services/alertService';

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

@@ -1,9 +1,8 @@
-import { FunctionalComponent } from 'preact';
 import { AppState } from '@/ui_models/app_state';
-import { StateUpdater, useState } from '@node_modules/preact/hooks';
+import { StateUpdater, useState } from 'preact/hooks';
 import { WebApplication } from '@/ui_models/application';
-import { User } from '@node_modules/@standardnotes/snjs/dist/@types/services/api/responses';
+import { User } from '@standardnotes/snjs/dist/@types/services/api/responses';
-import { observer } from '@node_modules/mobx-react-lite';
+import { observer } from 'mobx-react-lite';
 
 type Props = {
   appState: AppState;

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

@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import {
   STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_CHANGE,
   STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_REMOVAL, STRING_E2E_ENABLED, STRING_ENC_NOT_ENABLED, STRING_LOCAL_ENC_ENABLED,
@@ -7,13 +6,14 @@ import {
 } from '@/strings';
 import { WebApplication } from '@/ui_models/application';
 import { preventRefreshing } from '@/utils';
-import { JSXInternal } from '@node_modules/preact/src/jsx';
+import { JSXInternal } from 'preact/src/jsx';
 import TargetedEvent = JSXInternal.TargetedEvent;
 import { alertDialog } from '@Services/alertService';
-import { useCallback, useEffect, useRef, useState } from '@node_modules/preact/hooks';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
-import { ApplicationEvent } from '@node_modules/@standardnotes/snjs';
+import { ApplicationEvent } from '@standardnotes/snjs';
 import TargetedMouseEvent = JSXInternal.TargetedMouseEvent;
 import { StateUpdater } from 'preact/hooks';
+import { FunctionalComponent } from 'preact';
 
 type Props = {
   application: WebApplication;
@@ -22,7 +22,7 @@ type Props = {
   setIsBackupEncrypted: StateUpdater<boolean>;
 };
 
-const PasscodeLock: FC<Props> = ({
+const PasscodeLock: FunctionalComponent<Props> = ({
                                    application,
                                    setEncryptionStatusString,
                                    setIsEncryptionEnabled,

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

@@ -1,12 +1,12 @@
 import { WebApplication } from '@/ui_models/application';
-import { FC } from 'react';
+import { FunctionalComponent } from 'preact';
 
 type Props = {
   application: WebApplication;
   protectionsDisabledUntil: string | null;
 };
 
-const Protections: FC<Props> = ({
+const Protections: FunctionalComponent<Props> = ({
                                                    application,
                                                    protectionsDisabledUntil
                                                  }) => {
@@ -41,6 +41,6 @@ const Protections: FC<Props> = ({
       )}
     </div>
   );
-}
+};
 
 export default Protections;

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

@@ -4,7 +4,7 @@ import { AppState } from '@/ui_models/app_state';
 import { WebApplication } from '@/ui_models/application';
 import { useEffect, useState } from 'preact/hooks';
 import { isSameDay } from '@/utils';
-import { ApplicationEvent } from '@node_modules/@standardnotes/snjs';
+import { ApplicationEvent } from '@standardnotes/snjs';
 import { ConfirmSignoutContainer } from '@/components/ConfirmSignoutModal';
 import Authentication from '@/components/AccountMenu/Authentication';
 import Footer from '@/components/AccountMenu/Footer';
@@ -14,7 +14,7 @@ import Protections from '@/components/AccountMenu/Protections';
 import PasscodeLock from '@/components/AccountMenu/PasscodeLock';
 import DataBackup from '@/components/AccountMenu/DataBackup';
 import ErrorReporting from '@/components/AccountMenu/ErrorReporting';
-import { useCallback } from '@node_modules/preact/hooks';
+import { useCallback } from 'preact/hooks';
 
 type Props = {
   appState: AppState;

app/assets/javascripts/components/Icon.tsx

@@ -14,6 +14,7 @@ import TrashSweepIcon from '../../icons/ic-trash-sweep.svg';
 import MoreIcon from '../../icons/ic-more.svg';
 import TuneIcon from '../../icons/ic-tune.svg';
 import { toDirective } from './utils';
+import { FunctionalComponent } from 'preact';
 
 const ICONS = {
   'pencil-off': PencilOffIcon,
@@ -38,7 +39,7 @@ type Props = {
   className: string;
 }
 
-export const Icon: React.FC<Props> = ({ type, className }) => {
+export const Icon: FunctionalComponent<Props> = ({ type, className }) => {
   const IconComponent = ICONS[type];
   return <IconComponent className={`sn-icon ${className}`} />;
 };

app/assets/javascripts/ui_models/app_state/account_menu_state.ts

@@ -1,7 +1,7 @@
 import { action, computed, makeObservable, observable, runInAction } from 'mobx';
-import { ContentType } from '@node_modules/@standardnotes/snjs';
+import { ContentType } from '@standardnotes/snjs';
 import { WebApplication } from '@/ui_models/application';
-import { SNItem } from '@node_modules/@standardnotes/snjs/dist/@types/models/core/item';
+import { SNItem } from '@standardnotes/snjs/dist/@types/models/core/item';
 
 export class AccountMenuState {
   show = false;