feat: New account menu and text input with icon & toggle (#665)

* feat: Add new icons

* Revert "feat: Add new icons"

This reverts commit 0acb403fe846dbb2e48fd22de35c3568c3cb4453.

* feat: Add new icons for account menu

* feat: Add new Icons

* feat: Add "currentPane" state to prefs view

* feat: Update account menu to new design

* feat: Add input component with icon & toggle

* fix: sync icon & function

* fix: Fix eye icon

* feat: Create re-usable checkbox

feat: Add "merge local" option

* feat: Allow using className on IconButton

* feat: Add disabled state on input

feat: Make toggle circle

* refactor: Move checkbox to components

* feat: Handle invalid email/password error

* feat: Implement new design for Create Account

* feat: Implement new account menu design

* feat: Add disabled option to IconButton

* feat: Set account menu pane from other component

* feat: Add 2fa account menu pane

feat: Add lock icon

* feat: Remove unnecessary 2FA menu pane

feat: Reset current menu pane on clickOutside

* feat: Change "Log in" to "Sign in"

* feat: Remove sync from footer

* feat: Change "Login" to "Sign in"

feat: Add spinner to "Syncing..."

refactor: Use then-catch-finally for sync

* feat: Use common enableCustomServer state

* feat: Animate account menu closing

* fix: Reset menu pane only after it's closed

* feat: Add keyDown handler to InputWithIcon

* feat: Handle Enter press in inputs

* Update app/assets/javascripts/components/InputWithIcon.tsx

Co-authored-by: Antonella Sgarlatta <antsgar@gmail.com>

* Update app/assets/javascripts/components/InputWithIcon.tsx

Co-authored-by: Antonella Sgarlatta <antsgar@gmail.com>

* refactor: Use server state from AccountMenuState

* Update app/assets/javascripts/components/AccountMenu/CreateAccount.tsx

Co-authored-by: Antonella Sgarlatta <antsgar@gmail.com>

* Update app/assets/javascripts/components/AccountMenu/ConfirmPassword.tsx

Co-authored-by: Antonella Sgarlatta <antsgar@gmail.com>

* feat: Use common AdvancedOptions

* feat: Add "eye-off" icon and toggle state

* feat: Allow undefined values

* refactor: Remove enableCustomServer state

* feat: Persist server option state

* feat: Add bottom-100 and cursor-auto util classes

refactor: Use bottom-100 and cursor-auto classes

* refactor: Invert ternary operator

* refactor: Remove unused imports

* refactor: Use toggled as prop instead of state

* refactor: Change "Log in/out" to "Sign in/out"

* refactor: Change "Login" to "Sign in"

* refactor: Remove hardcoded width/height

* refactor: Use success class

* feat: Remove hardcoded width & height from svg

* fix: Fix chevron-down icon

Co-authored-by: Antonella Sgarlatta <antsgar@gmail.com>
Co-authored-by: Antonella Sgarlatta <antonella@standardnotes.org>

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

@@ -1,22 +1,36 @@
-import { action, computed, makeObservable, observable, runInAction } from 'mobx';
+import {
+  action,
+  computed,
+  makeObservable,
+  observable,
+  runInAction,
+} from 'mobx';
 import { ApplicationEvent, ContentType } from '@standardnotes/snjs';
 import { WebApplication } from '@/ui_models/application';
 import { SNItem } from '@standardnotes/snjs/dist/@types/models/core/item';
+import { AccountMenuPane } from '@/components/AccountMenu';
 
-type StructuredItemsCount =
-  { notes: number, tags: number, deleted: number, archived: number };
+type StructuredItemsCount = {
+  notes: number;
+  tags: number;
+  deleted: number;
+  archived: number;
+};
 
 export class AccountMenuState {
   show = false;
   signingOut = false;
-  otherSessionsLogOut = false;
+  otherSessionsSignOut = false;
   server: string | undefined = undefined;
+  enableServerOption = false;
   notesAndTags: SNItem[] = [];
   isEncryptionEnabled = false;
   encryptionStatusString = '';
   isBackupEncrypted = false;
-  showLogin = false;
+  showSignIn = false;
   showRegister = false;
+  shouldAnimateCloseMenu = false;
+  currentPane = AccountMenuPane.GeneralMenu;
 
   constructor(
     private application: WebApplication,
@@ -25,14 +39,17 @@ export class AccountMenuState {
     makeObservable(this, {
       show: observable,
       signingOut: observable,
-      otherSessionsLogOut: observable,
+      otherSessionsSignOut: observable,
       server: observable,
+      enableServerOption: observable,
       notesAndTags: observable,
       isEncryptionEnabled: observable,
       encryptionStatusString: observable,
       isBackupEncrypted: observable,
-      showLogin: observable,
+      showSignIn: observable,
       showRegister: observable,
+      currentPane: observable,
+      shouldAnimateCloseMenu: observable,
 
       setShow: action,
       toggleShow: action,
@@ -40,9 +57,11 @@ export class AccountMenuState {
       setIsEncryptionEnabled: action,
       setEncryptionStatusString: action,
       setIsBackupEncrypted: action,
-      setOtherSessionsLogout: action,
+      setOtherSessionsSignOut: action,
+      setCurrentPane: action,
+      setEnableServerOption: action,
 
-      notesAndTagsCount: computed
+      notesAndTagsCount: computed,
     });
 
     this.addAppLaunchedEventObserver();
@@ -61,14 +80,14 @@ export class AccountMenuState {
 
   streamNotesAndTags = (): void => {
     this.appEventListeners.push(
-      this.application.streamItems(
-        [ContentType.Note, ContentType.Tag],
-        () => {
-          runInAction(() => {
-            this.notesAndTags = this.application.getItems([ContentType.Note, ContentType.Tag]);
-          });
-        }
-      )
+      this.application.streamItems([ContentType.Note, ContentType.Tag], () => {
+        runInAction(() => {
+          this.notesAndTags = this.application.getItems([
+            ContentType.Note,
+            ContentType.Tag,
+          ]);
+        });
+      })
     );
   };
 
@@ -77,7 +96,12 @@ export class AccountMenuState {
   };
 
   closeAccountMenu = (): void => {
-    this.setShow(false);
+    this.shouldAnimateCloseMenu = true;
+    setTimeout(() => {
+      this.setShow(false);
+      this.shouldAnimateCloseMenu = false;
+      this.setCurrentPane(AccountMenuPane.GeneralMenu);
+    }, 150);
   };
 
   setSigningOut = (signingOut: boolean): void => {
@@ -88,6 +112,10 @@ export class AccountMenuState {
     this.server = server;
   };
 
+  setEnableServerOption = (enableServerOption: boolean): void => {
+    this.enableServerOption = enableServerOption;
+  };
+
   setIsEncryptionEnabled = (isEncryptionEnabled: boolean): void => {
     this.isEncryptionEnabled = isEncryptionEnabled;
   };
@@ -100,8 +128,8 @@ export class AccountMenuState {
     this.isBackupEncrypted = isBackupEncrypted;
   };
 
-  setShowLogin = (showLogin: boolean): void => {
-    this.showLogin = showLogin;
+  setShowSignIn = (showSignIn: boolean): void => {
+    this.showSignIn = showSignIn;
   };
 
   setShowRegister = (showRegister: boolean): void => {
@@ -112,16 +140,25 @@ export class AccountMenuState {
     this.show = !this.show;
   };
 
-  setOtherSessionsLogout = (otherSessionsLogOut: boolean): void => {
-    this.otherSessionsLogOut = otherSessionsLogOut;
-  }
+  setOtherSessionsSignOut = (otherSessionsSignOut: boolean): void => {
+    this.otherSessionsSignOut = otherSessionsSignOut;
+  };
+
+  setCurrentPane = (pane: AccountMenuPane): void => {
+    this.currentPane = pane;
+  };
 
   get notesAndTagsCount(): number {
     return this.notesAndTags.length;
   }
 
   get structuredNotesAndTagsCount(): StructuredItemsCount {
-    const count: StructuredItemsCount = { notes: 0, archived: 0, deleted: 0, tags: 0 };
+    const count: StructuredItemsCount = {
+      notes: 0,
+      archived: 0,
+      deleted: 0,
+      tags: 0,
+    };
     for (const item of this.notesAndTags) {
       if (item.archived) {
         count.archived++;
@@ -138,7 +175,6 @@ export class AccountMenuState {
       if (item.content_type === ContentType.Tag) {
         count.tags++;
       }
-
     }
     return count;
   }

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

@@ -1,23 +1,32 @@
+import { PreferenceId } from '@/preferences/PreferencesMenu';
 import { action, computed, makeObservable, observable } from 'mobx';
 
 export class PreferencesState {
   private _open = false;
+  currentPane: PreferenceId = 'general';
 
   constructor() {
     makeObservable<PreferencesState, '_open'>(this, {
       _open: observable,
+      currentPane: observable,
       openPreferences: action,
       closePreferences: action,
+      setCurrentPane: action,
       isOpen: computed,
     });
   }
 
+  setCurrentPane = (prefId: PreferenceId): void => {
+    this.currentPane = prefId;
+  };
+
   openPreferences = (): void => {
     this._open = true;
   };
 
   closePreferences = (): void => {
     this._open = false;
+    this.currentPane = 'general';
   };
 
   get isOpen() {