fix: promote actions visibility to global state

app/assets/javascripts/directives/views/actionsMenu.ts

@@ -5,6 +5,7 @@ import { PureViewCtrl } from '@Views/abstract/pure_view_ctrl';
 import { SNItem, Action, SNActionsExtension, UuidString } from 'snjs/dist/@types';
 import { ActionResponse } from 'snjs';
 import { ActionsExtensionMutator } from 'snjs/dist/@types/models/app/extension';
+import { autorun, IReactionDisposer } from 'mobx';
 
 type ActionsMenuScope = {
   application: WebApplication
@@ -19,7 +20,6 @@ type ActionSubRow = {
 }
 
 type ExtensionState = {
-  hidden: boolean
   loading: boolean
   error: boolean
 }
@@ -43,6 +43,7 @@ type ActionsMenuState = {
 class ActionsMenuCtrl extends PureViewCtrl<{}, ActionsMenuState> implements ActionsMenuScope {
   application!: WebApplication
   item!: SNItem
+  private removeHiddenExtensionsListener?: IReactionDisposer;
 
   /* @ngInject */
   constructor(
@@ -57,9 +58,17 @@ class ActionsMenuCtrl extends PureViewCtrl<{}, ActionsMenuState> implements Acti
       item: this.item
     });
     this.loadExtensions();
-    this.rebuildMenu();
+    this.removeHiddenExtensionsListener = autorun(() => {
+      this.rebuildMenu({
+        hiddenExtensions: this.appState.actionsMenu.hiddenExtensions
+      });
+    });
   };
 
+  deinit() {
+    this.removeHiddenExtensionsListener?.();
+  }
+
   /** @override */
   getInitialState() {
     const extensions = this.application.actionsManager!.getExtensions().sort((a, b) => {
@@ -70,12 +79,12 @@ class ActionsMenuCtrl extends PureViewCtrl<{}, ActionsMenuState> implements Acti
       extensionsState[extension.uuid] = {
         loading: false,
         error: false,
-        hidden: false
       };
     });
     return {
       extensions,
       extensionsState,
+      hiddenExtensions: {},
       menu: [],
     };
   }
@@ -84,6 +93,7 @@ class ActionsMenuCtrl extends PureViewCtrl<{}, ActionsMenuState> implements Acti
     extensions = this.state.extensions,
     extensionsState = this.state.extensionsState,
     selectedActionId = this.state.selectedActionId,
+    hiddenExtensions = this.appState.actionsMenu.hiddenExtensions,
   } = {}) {
     return this.setState({
       extensions,
@@ -91,12 +101,13 @@ class ActionsMenuCtrl extends PureViewCtrl<{}, ActionsMenuState> implements Acti
       selectedActionId,
       menu: extensions.map(extension => {
         const state = extensionsState[extension.uuid];
+        const hidden = hiddenExtensions[extension.uuid];
         return {
           uuid: extension.uuid,
           name: extension.name,
           loading: state?.loading ?? false,
           error: state?.error ?? false,
-          hidden: state?.hidden ?? false,
+          hidden: hidden ?? false,
           deprecation: extension.deprecation!,
           actions: extension.actionsWithContextForItem(this.item).map(action => {
             if (action.id === selectedActionId) {
@@ -237,11 +248,7 @@ class ActionsMenuCtrl extends PureViewCtrl<{}, ActionsMenuState> implements Acti
   }
 
   public toggleExtensionVisibility(extensionUuid: UuidString) {
-    const { extensionsState } = this.state;
+    this.appState.actionsMenu.toggleExtensionVisibility(extensionUuid);
-    extensionsState[extensionUuid].hidden = !extensionsState[extensionUuid].hidden;
-    this.rebuildMenu({
-      extensionsState
-    });
   }
 
   private setLoadingExtension(extensionUuid: UuidString, value = false) {

app/assets/javascripts/ui_models/app_state.ts

@@ -9,7 +9,8 @@ import {
   ContentType,
   SNSmartTag,
   PayloadSource,
-  DeinitSource
+  DeinitSource,
+  UuidString
 } from 'snjs';
 import { WebApplication } from '@/ui_models/application';
 import { Editor } from '@/ui_models/editor';
@@ -36,6 +37,26 @@ type ObserverCallback = (event: AppStateEvent, data?: any) => Promise<void>
 
 const SHOW_BETA_WARNING_KEY = 'show_beta_warning';
 
+class ActionsMenuState {
+  hiddenExtensions: Record<UuidString, boolean> = {};
+
+  constructor() {
+    makeObservable(this, {
+      hiddenExtensions: observable,
+      toggleExtensionVisibility: action,
+      deinit: action,
+    });
+  }
+
+  toggleExtensionVisibility(uuid: UuidString) {
+    this.hiddenExtensions[uuid] = !this.hiddenExtensions[uuid];
+  }
+
+  deinit() {
+    this.hiddenExtensions = {};
+  }
+}
+
 export class AppState {
   $rootScope: ng.IRootScopeService;
   $timeout: ng.ITimeoutService;
@@ -50,6 +71,7 @@ export class AppState {
   userPreferences?: SNUserPrefs;
   multiEditorEnabled = false;
   showBetaWarning = false;
+  actionsMenu = new ActionsMenuState();
 
   /* @ngInject */
   constructor(
@@ -82,6 +104,7 @@ export class AppState {
     if (source === DeinitSource.SignOut) {
       localStorage.removeItem(SHOW_BETA_WARNING_KEY);
     }
+    this.actionsMenu.deinit();
     this.unsubApp();
     this.unsubApp = undefined;
     this.observers.length = 0;