fix: issue with deactivate all themes on signout (#804)

* fix: issue with deactivate all themes on signout

* fix: remove redundant caching

app/assets/javascripts/services/themeManager.ts

@@ -9,6 +9,7 @@ import {
   ContentType,
   UuidString,
   FeatureStatus,
+  PayloadSource,
 } from '@standardnotes/snjs';
 
 const CACHED_THEMES_KEY = 'cachedThemes';
@@ -22,6 +23,11 @@ export class ThemeManager extends ApplicationService {
     super.onAppEvent(event);
     if (event === ApplicationEvent.SignedOut) {
       this.deactivateAllThemes();
+      this.activeThemes = [];
+      this.application?.removeValue(
+        CACHED_THEMES_KEY,
+        StorageValueModes.Nonwrapped
+      );
     } else if (event === ApplicationEvent.StorageReady) {
       await this.activateCachedThemes();
     } else if (event === ApplicationEvent.FeaturesUpdated) {
@@ -34,7 +40,7 @@ export class ThemeManager extends ApplicationService {
   }
 
   deinit() {
-    this.clearAppThemeState();
+    this.deactivateAllThemes();
     this.activeThemes.length = 0;
     this.unregisterDesktop();
     this.unregisterStream();
@@ -43,7 +49,8 @@ export class ThemeManager extends ApplicationService {
     super.deinit();
   }
 
-  reloadThemeStatus(): void {
+  private reloadThemeStatus(): void {
+    let hasChange = false;
     for (const themeUuid of this.activeThemes) {
       const theme = this.application.findItem(themeUuid) as SNTheme;
       if (
@@ -52,8 +59,13 @@ export class ThemeManager extends ApplicationService {
           FeatureStatus.Entitled
       ) {
         this.deactivateTheme(themeUuid);
+        hasChange = true;
       }
     }
+
+    if (hasChange) {
+      this.cacheThemeState();
+    }
   }
 
   /** @override */
@@ -64,9 +76,8 @@ export class ThemeManager extends ApplicationService {
 
   private async activateCachedThemes() {
     const cachedThemes = await this.getCachedThemes();
-    const writeToCache = false;
     for (const theme of cachedThemes) {
-      this.activateTheme(theme, writeToCache);
+      this.activateTheme(theme);
     }
   }
 
@@ -78,16 +89,15 @@ export class ThemeManager extends ApplicationService {
           this.deactivateTheme(component.uuid);
           setTimeout(() => {
             this.activateTheme(component as SNTheme);
+            this.cacheThemeState();
           }, 10);
         }
       });
 
     this.unregisterStream = this.application.streamItems(
       ContentType.Theme,
-      () => {
-        const themes = this.application.getDisplayableItems(
-          ContentType.Theme
-        ) as SNTheme[];
+      (items, source) => {
+        const themes = items as SNTheme[];
         for (const theme of themes) {
           if (theme.active) {
             this.activateTheme(theme);
@@ -95,23 +105,21 @@ export class ThemeManager extends ApplicationService {
             this.deactivateTheme(theme.uuid);
           }
         }
+        if (source !== PayloadSource.LocalRetrieved) {
+          this.cacheThemeState();
+        }
       }
     );
   }
 
-  private clearAppThemeState() {
-    for (const uuid of this.activeThemes) {
-      this.deactivateTheme(uuid, false);
+  private deactivateAllThemes() {
+    const activeThemes = this.activeThemes.slice();
+    for (const uuid of activeThemes) {
+      this.deactivateTheme(uuid);
     }
   }
 
-  private deactivateAllThemes() {
-    this.clearAppThemeState();
-    this.activeThemes = [];
-    this.decacheThemes();
-  }
-
-  private activateTheme(theme: SNTheme, writeToCache = true) {
+  private activateTheme(theme: SNTheme) {
     if (this.activeThemes.find((uuid) => uuid === theme.uuid)) {
       return;
     }
@@ -128,24 +136,19 @@ export class ThemeManager extends ApplicationService {
     link.media = 'screen,print';
     link.id = theme.uuid;
     document.getElementsByTagName('head')[0].appendChild(link);
-    if (writeToCache) {
-      this.cacheThemes();
-    }
   }
 
-  private deactivateTheme(uuid: string, recache = true) {
+  private deactivateTheme(uuid: string) {
     const element = document.getElementById(uuid) as HTMLLinkElement;
     if (element) {
       element.disabled = true;
-      element.parentNode!.removeChild(element);
+      element.parentNode?.removeChild(element);
     }
+
     removeFromArray(this.activeThemes, uuid);
-    if (recache) {
-      this.cacheThemes();
-    }
   }
 
-  private async cacheThemes() {
+  private async cacheThemeState() {
     const themes = this.application.getAll(this.activeThemes) as SNTheme[];
     const mapped = await Promise.all(
       themes.map(async (theme) => {
@@ -165,15 +168,6 @@ export class ThemeManager extends ApplicationService {
     );
   }
 
-  private async decacheThemes() {
-    if (this.application) {
-      return this.application.removeValue(
-        CACHED_THEMES_KEY,
-        StorageValueModes.Nonwrapped
-      );
-    }
-  }
-
   private async getCachedThemes() {
     const cachedThemes = (await this.application.getValue(
       CACHED_THEMES_KEY,