feat: Add quick settings menu with theme switcher and other changes (#673)

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

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

@@ -52,6 +52,7 @@ export class AccountMenuState {
       shouldAnimateCloseMenu: observable,
 
       setShow: action,
+      setShouldAnimateClose: action,
       toggleShow: action,
       setSigningOut: action,
       setIsEncryptionEnabled: action,
@@ -95,11 +96,15 @@ export class AccountMenuState {
     this.show = show;
   };
 
+  setShouldAnimateClose = (shouldAnimateCloseMenu: boolean): void => {
+    this.shouldAnimateCloseMenu = shouldAnimateCloseMenu;
+  };
+
   closeAccountMenu = (): void => {
-    this.shouldAnimateCloseMenu = true;
+    this.setShouldAnimateClose(true);
     setTimeout(() => {
       this.setShow(false);
-      this.shouldAnimateCloseMenu = false;
+      this.setShouldAnimateClose(false);
       this.setCurrentPane(AccountMenuPane.GeneralMenu);
     }, 150);
   };
@@ -137,7 +142,11 @@ export class AccountMenuState {
   };
 
   toggleShow = (): void => {
-    this.show = !this.show;
+    if (this.show) {
+      this.closeAccountMenu();
+    } else {
+      this.setShow(true);
+    }
   };
 
   setOtherSessionsSignOut = (otherSessionsSignOut: boolean): void => {

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

@@ -23,6 +23,7 @@ import { NotesState } from './notes_state';
 import { TagsState } from './tags_state';
 import { AccountMenuState } from '@/ui_models/app_state/account_menu_state';
 import { PreferencesState } from './preferences_state';
+import { QuickSettingsState } from './quick_settings_state';
 
 export enum AppStateEvent {
   TagChanged,
@@ -62,6 +63,7 @@ export class AppState {
   onVisibilityChange: any;
   selectedTag?: SNTag;
   showBetaWarning: boolean;
+  readonly quickSettingsMenu = new QuickSettingsState();
   readonly accountMenu: AccountMenuState;
   readonly actionsMenu = new ActionsMenuState();
   readonly preferences = new PreferencesState();
@@ -105,7 +107,7 @@ export class AppState {
     );
     this.accountMenu = new AccountMenuState(
       application,
-      this.appEventObserverRemovers,
+      this.appEventObserverRemovers
     );
     this.searchOptions = new SearchOptionsState(
       application,

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

@@ -0,0 +1,42 @@
+import { action, makeObservable, observable } from 'mobx';
+
+export class QuickSettingsState {
+  open = false;
+  shouldAnimateCloseMenu = false;
+
+  constructor() {
+    makeObservable(this, {
+      open: observable,
+      shouldAnimateCloseMenu: observable,
+
+      setOpen: action,
+      setShouldAnimateCloseMenu: action,
+      toggle: action,
+      closeQuickSettingsMenu: action,
+    });
+  }
+
+  setOpen = (open: boolean): void => {
+    this.open = open;
+  };
+
+  setShouldAnimateCloseMenu = (shouldAnimate: boolean): void => {
+    this.shouldAnimateCloseMenu = shouldAnimate;
+  };
+
+  toggle = (): void => {
+    if (this.open) {
+      this.closeQuickSettingsMenu();
+    } else {
+      this.setOpen(true);
+    }
+  };
+
+  closeQuickSettingsMenu = (): void => {
+    this.setShouldAnimateCloseMenu(true);
+    setTimeout(() => {
+      this.setOpen(false);
+      this.setShouldAnimateCloseMenu(false);
+    }, 150);
+  };
+}