feat: display warning banner when using the app with no account

app/assets/javascripts/ui_models/app_state.ts

@@ -15,6 +15,7 @@ import { WebApplication } from '@/ui_models/application';
 import { Editor } from '@/ui_models/editor';
 import { action, makeObservable, observable } from 'mobx';
 import { Bridge } from '@/services/bridge';
+import { storage, StorageKey } from '@/services/localStorage';
 
 export enum AppStateEvent {
   TagChanged,
@@ -30,7 +31,7 @@ export enum AppStateEvent {
 export type PanelResizedData = {
   panel: string;
   collapsed: boolean;
-}
+};
 
 export enum EventSource {
   UserInteraction,
@@ -39,8 +40,6 @@ export enum EventSource {
 
 type ObserverCallback = (event: AppStateEvent, data?: any) => Promise<void>;
 
-const SHOW_BETA_WARNING_KEY = 'show_beta_warning';
-
 class ActionsMenuState {
   hiddenExtensions: Record<UuidString, boolean> = {};
 
@@ -75,7 +74,7 @@ export class SyncState {
     });
   }
 
-  update(status: SyncOpStatus) {
+  update(status: SyncOpStatus): void {
     this.errorMessage = status.error?.message;
     this.inProgress = status.syncInProgress;
     const stats = status.getStats();
@@ -95,6 +94,41 @@ export class SyncState {
   }
 }
 
+class AccountMenuState {
+  show = false;
+  constructor() {
+    makeObservable(this, {
+      show: observable,
+      setShow: action,
+      toggleShow: action,
+    });
+  }
+  setShow(show: boolean) {
+    this.show = show;
+  }
+  toggleShow() {
+    this.show = !this.show;
+  }
+}
+
+class NoAccountWarningState {
+  show: boolean;
+  constructor() {
+    this.show = storage.get(StorageKey.ShowNoAccountWarning) ?? true;
+    makeObservable(this, {
+      show: observable,
+      hide: action,
+    });
+  }
+  hide() {
+    this.show = false;
+    storage.set(StorageKey.ShowNoAccountWarning, false);
+  }
+  reset() {
+    storage.remove(StorageKey.ShowNoAccountWarning);
+  }
+}
+
 export class AppState {
   readonly enableUnfinishedFeatures =
     isDev || location.host.includes('app-dev.standardnotes.org');
@@ -109,8 +143,10 @@ export class AppState {
   rootScopeCleanup2: any;
   onVisibilityChange: any;
   selectedTag?: SNTag;
-  showBetaWarning = false;
+  showBetaWarning: boolean;
+  readonly accountMenu = new AccountMenuState();
   readonly actionsMenu = new ActionsMenuState();
+  readonly noAccountWarning = new NoAccountWarningState();
   readonly sync = new SyncState();
   isSessionsModalVisible = false;
 
@@ -124,15 +160,6 @@ export class AppState {
     this.$timeout = $timeout;
     this.$rootScope = $rootScope;
     this.application = application;
-    makeObservable(this, {
-      showBetaWarning: observable,
-      isSessionsModalVisible: observable,
-
-      enableBetaWarning: action,
-      disableBetaWarning: action,
-      openSessionsModal: action,
-      closeSessionsModal: action,
-    });
     this.addAppEventObserver();
     this.streamNotesAndTags();
     this.onVisibilityChange = () => {
@@ -143,12 +170,28 @@ export class AppState {
       this.notifyEvent(event);
     };
     this.registerVisibilityObservers();
-    this.determineBetaWarningValue();
+
+    if (this.bridge.appVersion.includes('-beta')) {
+      this.showBetaWarning = storage.get(StorageKey.ShowBetaWarning) ?? true;
+    } else {
+      this.showBetaWarning = false;
+    }
+
+    makeObservable(this, {
+      showBetaWarning: observable,
+      isSessionsModalVisible: observable,
+
+      enableBetaWarning: action,
+      disableBetaWarning: action,
+      openSessionsModal: action,
+      closeSessionsModal: action,
+    });
   }
 
-  deinit(source: DeinitSource) {
+  deinit(source: DeinitSource): void {
     if (source === DeinitSource.SignOut) {
-      localStorage.removeItem(SHOW_BETA_WARNING_KEY);
+      storage.remove(StorageKey.ShowBetaWarning);
+      this.noAccountWarning.reset();
     }
     this.actionsMenu.deinit();
     this.unsubApp();
@@ -174,30 +217,12 @@ export class AppState {
 
   disableBetaWarning() {
     this.showBetaWarning = false;
-    localStorage.setItem(SHOW_BETA_WARNING_KEY, 'false');
+    storage.set(StorageKey.ShowBetaWarning, false);
   }
 
   enableBetaWarning() {
     this.showBetaWarning = true;
-    localStorage.setItem(SHOW_BETA_WARNING_KEY, 'true');
-  }
-
-  clearBetaWarning() {
-    localStorage.setItem(SHOW_BETA_WARNING_KEY, 'true');
-  }
-
-  private determineBetaWarningValue() {
-    if (this.bridge.appVersion.includes('-beta')) {
-      switch (localStorage.getItem(SHOW_BETA_WARNING_KEY)) {
-        case 'true':
-        default:
-          this.enableBetaWarning();
-          break;
-        case 'false':
-          this.disableBetaWarning();
-          break;
-      }
-    }
+    storage.set(StorageKey.ShowBetaWarning, true);
   }
 
   /**