feat: implement preferences pane

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

@@ -22,6 +22,7 @@ import { SyncState } from './sync_state';
 import { SearchOptionsState } from './search_options_state';
 import { NotesState } from './notes_state';
 import { TagsState } from './tags_state';
+import { PreferencesState } from './preferences_state';
 
 export enum AppStateEvent {
   TagChanged,
@@ -63,6 +64,7 @@ export class AppState {
   showBetaWarning: boolean;
   readonly accountMenu = new AccountMenuState();
   readonly actionsMenu = new ActionsMenuState();
+  readonly preferences = new PreferencesState();
   readonly noAccountWarning: NoAccountWarningState;
   readonly noteTags: NoteTagsState;
   readonly sync = new SyncState();
@@ -89,21 +91,18 @@ export class AppState {
       async () => {
         await this.notifyEvent(AppStateEvent.ActiveEditorChanged);
       },
-      this.appEventObserverRemovers,
+      this.appEventObserverRemovers
     );
     this.noteTags = new NoteTagsState(
       application,
       this,
       this.appEventObserverRemovers
     );
-    this.tags = new TagsState(
-      application,
-      this.appEventObserverRemovers,
-    ),
-    this.noAccountWarning = new NoAccountWarningState(
-      application,
-      this.appEventObserverRemovers
-    );
+    (this.tags = new TagsState(application, this.appEventObserverRemovers)),
+      (this.noAccountWarning = new NoAccountWarningState(
+        application,
+        this.appEventObserverRemovers
+      ));
     this.searchOptions = new SearchOptionsState(
       application,
       this.appEventObserverRemovers
@@ -128,6 +127,7 @@ export class AppState {
     makeObservable(this, {
       showBetaWarning: observable,
       isSessionsModalVisible: observable,
+      preferences: observable,
 
       enableBetaWarning: action,
       disableBetaWarning: action,

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

@@ -0,0 +1,26 @@
+import { action, computed, makeObservable, observable } from 'mobx';
+
+export class PreferencesState {
+  private _open = false;
+
+  constructor() {
+    makeObservable<PreferencesState, '_open'>(this, {
+      _open: observable,
+      openPreferences: action,
+      closePreferences: action,
+      isOpen: computed,
+    });
+  }
+
+  openPreferences = (): void => {
+    this._open = true;
+  };
+
+  closePreferences = (): void => {
+    this._open = false;
+  };
+
+  get isOpen() {
+    return this._open;
+  }
+}