Component stack fixes

app/assets/javascripts/ui_models/component_group.ts

@@ -14,7 +14,6 @@ export class ComponentGroup {
   private application: WebApplication
   changeObservers: any[] = []
   activeComponents: UuidString[] = []
-  
 
   constructor(application: WebApplication) {
     this.application = application;
@@ -86,6 +85,7 @@ export class ComponentGroup {
    */
   public addChangeObserver(callback: () => void) {
     this.changeObservers.push(callback);
+    callback();
     return () => {
       removeFromArray(this.changeObservers, callback);
     }

app/assets/javascripts/ui_models/editor.ts

@@ -38,7 +38,7 @@ export class Editor {
     if (matchingNote) {
       this.isTemplateNote = false;
       this.note = matchingNote;
-      this._onNoteValueChange!(matchingNote, source);
+      this._onNoteValueChange && this._onNoteValueChange!(matchingNote, source);
     }
   }
 

app/assets/javascripts/views/editor/editor-view.pug

@@ -242,15 +242,15 @@
           )
           .sk-app-bar-item-column
             .sk-circle.small(
-              ng-class="{'info' : !component.hidden && component.active, 'neutral' : component.hidden  || !component.active}"
+              ng-class="{'info' : !self.stackComponentHidden(component) && component.active, 'neutral' : self.stackComponentHidden(component)  || !component.active}"
               )
           .sk-app-bar-item-column
             .sk-label {{component.name}}
     .sn-component
       component-view.component-view.component-stack-item(
-        ng-repeat='component in self.activeStackComponents track by component.uuid', 
+        ng-repeat='component in self.state.activeStackComponents track by component.uuid', 
         component-uuid='component.uuid', 
         manual-dealloc='true', 
-        ng-show='!component.hidden',
+        ng-show='!self.stackComponentHidden(component)',
         application='self.application'
         )

app/assets/javascripts/views/editor/editor_view.ts

@@ -263,10 +263,6 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope {
     return this.getState().activeTagsComponent;
   }
 
-  get activeStackComponents() {
-    return this.getState().activeStackComponents;
-  }
-
   get componentGroup() {
     return this.application.componentGroup;
   }
@@ -367,7 +363,7 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope {
           return;
         }
         /** Reload componentStack in case new ones were added or removed */
-        this.reloadComponentStackArray();
+        this.reloadComponentStack();
         /** Observe editor changes to see if the current note should update its editor */
         const editors = components.filter((component) => {
           return component.isEditor();
@@ -1008,17 +1004,12 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope {
         ComponentArea.EditorStack,
         ComponentArea.Editor
       ],
-      activationHandler: (component) => {
-        if (component.area === ComponentArea.EditorStack) {
-          this.reloadComponentContext();
-        }
-      },
       contextRequestHandler: (component) => {
         const currentEditor = this.activeEditorComponent;
         if (
-          component === currentEditor ||
-          component === this.activeTagsComponent ||
-          this.activeStackComponents.includes(component)
+          component.uuid === currentEditor?.uuid ||
+          component.uuid === this.activeTagsComponent?.uuid ||
+          Uuids(this.getState().activeStackComponents).includes(component.uuid)
         ) {
           return this.note;
         }
@@ -1076,19 +1067,27 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope {
     });
   }
 
-  reloadComponentStackArray() {
+  async reloadComponentStack() {
     const components = this.application.componentManager!
       .componentsForArea(ComponentArea.EditorStack)
       .sort((a, b) => {
         return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
       });
-    this.setEditorState({
+    await this.setEditorState({
       allStackComponents: components
     });
+    this.reloadComponentContext();
+    /** component.active is a persisted state. So if we download a stack component
+     * whose .active is true, it doesn't mean it was explicitely activated by us. So 
+     * we need to do that here. */
+    for(const component of components) {
+      if(component.active) {
+        this.componentGroup.activateComponent(component);
+      }
+    }
   }
 
   reloadComponentContext() {
-    this.reloadComponentStackArray();
     if (this.note) {
       for (const component of this.getState().allStackComponents!) {
         if (component.active) {
@@ -1099,19 +1098,23 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope {
         }
       }
     }
-
     this.application.componentManager!.contextItemDidChangeInArea(ComponentArea.NoteTags);
     this.application.componentManager!.contextItemDidChangeInArea(ComponentArea.EditorStack);
     this.application.componentManager!.contextItemDidChangeInArea(ComponentArea.Editor);
   }
 
+
+  stackComponentHidden(component: SNComponent) {
+    return this.application.componentManager?.isComponentHidden(component);
+  }
+
   async toggleStackComponentForCurrentItem(component: SNComponent) {
     const hidden = this.application.componentManager!.isComponentHidden(component);
     if (hidden || !component.active) {
       this.application.componentManager!.setComponentHidden(component, false);
       await this.associateComponentWithCurrentNote(component);
       if (!component.active) {
-        this.application.componentManager!.activateComponent(component.uuid);
+        this.componentGroup!.activateComponent(component);
       }
       this.application.componentManager!.contextItemDidChangeInArea(ComponentArea.EditorStack);
     } else {

app/assets/javascripts/views/footer/footer_view.ts

@@ -165,7 +165,6 @@ class FooterViewCtrl extends PureViewCtrl {
     this.reloadPasscodeStatus();
   }
 
-
   /** @override */
   onAppEvent(eventName: ApplicationEvent) {
     if (eventName === ApplicationEvent.KeyStatusChanged) {
@@ -219,11 +218,8 @@ class FooterViewCtrl extends PureViewCtrl {
         }).sort((a, b) => {
           return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
         });
-        const differ = filteredThemes.length !== this.themesWithIcons.length;
         this.themesWithIcons = filteredThemes;
-        if (differ) {
-          this.reloadDockShortcuts();
-        }
+        this.reloadDockShortcuts();
       }
     );
   }
@@ -354,7 +350,6 @@ class FooterViewCtrl extends PureViewCtrl {
         icon: icon
       } as DockShortcut);
     }
-
     this.dockShortcuts = shortcuts.sort((a, b) => {
       /** Circles first, then images */
       const aType = a.icon.type;