feat: Themes and appeareance settings are now local to your device and not synced (#2847)

packages/snjs/lib/Services/ComponentManager/ComponentManager.ts

@@ -48,6 +48,7 @@ import {
   ItemManagerInterface,
   SyncServiceInterface,
   FeatureStatus,
+  LocalPrefKey,
 } from '@standardnotes/services'
 import { GetFeatureUrl } from './UseCase/GetFeatureUrl'
 import { ComponentManagerEventData } from './ComponentManagerEventData'
@@ -393,7 +394,7 @@ export class ComponentManager
     this.logger.info('Toggling theme', uiFeature.uniqueIdentifier)
 
     if (this.isThemeActive(uiFeature)) {
-      await this.removeActiveTheme(uiFeature)
+      this.removeActiveTheme(uiFeature)
       return
     }
 
@@ -403,7 +404,7 @@ export class ComponentManager
     }
 
     /* Activate current before deactivating others, so as not to flicker */
-    await this.addActiveTheme(uiFeature)
+    this.addActiveTheme(uiFeature)
 
     /* Deactive currently active theme(s) if new theme is not layerable */
     if (!uiFeature.layerable) {
@@ -416,7 +417,7 @@ export class ComponentManager
         }
 
         if (!candidate.layerable) {
-          await this.removeActiveTheme(candidate)
+          this.removeActiveTheme(candidate)
         }
       }
     }
@@ -453,7 +454,7 @@ export class ComponentManager
     const features: NativeFeatureIdentifier[] = []
     const uuids: Uuid[] = []
 
-    const strings = this.preferences.getValue(PrefKey.ActiveThemes, undefined) ?? []
+    const strings = this.preferences.getLocalValue(LocalPrefKey.ActiveThemes, [])
     for (const string of strings) {
       const nativeIdentifier = NativeFeatureIdentifier.create(string)
       if (!nativeIdentifier.isFailed()) {
@@ -534,24 +535,24 @@ export class ComponentManager
     return preferences[preferencesLookupKey]
   }
 
-  async addActiveTheme(theme: UIFeature<ThemeFeatureDescription>): Promise<void> {
-    const activeThemes = (this.preferences.getValue(PrefKey.ActiveThemes, undefined) ?? []).slice()
+  addActiveTheme(theme: UIFeature<ThemeFeatureDescription>) {
+    const activeThemes = this.preferences.getLocalValue(LocalPrefKey.ActiveThemes, []).slice()
 
     activeThemes.push(theme.uniqueIdentifier.value)
 
-    await this.preferences.setValue(PrefKey.ActiveThemes, activeThemes)
+    this.preferences.setLocalValue(LocalPrefKey.ActiveThemes, activeThemes)
   }
 
-  async replaceActiveTheme(theme: UIFeature<ThemeFeatureDescription>): Promise<void> {
-    await this.preferences.setValue(PrefKey.ActiveThemes, [theme.uniqueIdentifier.value])
+  replaceActiveTheme(theme: UIFeature<ThemeFeatureDescription>) {
+    this.preferences.setLocalValue(LocalPrefKey.ActiveThemes, [theme.uniqueIdentifier.value])
   }
 
-  async removeActiveTheme(theme: UIFeature<ThemeFeatureDescription>): Promise<void> {
-    const activeThemes = this.preferences.getValue(PrefKey.ActiveThemes, undefined) ?? []
+  removeActiveTheme(theme: UIFeature<ThemeFeatureDescription>) {
+    const activeThemes = this.preferences.getLocalValue(LocalPrefKey.ActiveThemes, [])
 
     const filteredThemes = activeThemes.filter((activeTheme) => activeTheme !== theme.uniqueIdentifier.value)
 
-    await this.preferences.setValue(PrefKey.ActiveThemes, filteredThemes)
+    this.preferences.setLocalValue(LocalPrefKey.ActiveThemes, filteredThemes)
   }
 
   isThemeActive(theme: UIFeature<ThemeFeatureDescription>): boolean {
@@ -559,13 +560,13 @@ export class ComponentManager
       return false
     }
 
-    const activeThemes = this.preferences.getValue(PrefKey.ActiveThemes, undefined) ?? []
+    const activeThemes = this.preferences.getLocalValue(LocalPrefKey.ActiveThemes, [])
 
     return activeThemes.includes(theme.uniqueIdentifier.value)
   }
 
   async addActiveComponent(component: ComponentInterface): Promise<void> {
-    const activeComponents = (this.preferences.getValue(PrefKey.ActiveComponents, undefined) ?? []).slice()
+    const activeComponents = this.preferences.getValue(PrefKey.ActiveComponents, []).slice()
 
     activeComponents.push(component.uuid)
 

packages/snjs/lib/Services/Preferences/PreferencesService.ts

@@ -14,6 +14,10 @@ import {
   InternalEventInterface,
   ApplicationEvent,
   ApplicationStageChangedEventPayload,
+  StorageServiceInterface,
+  StorageKey,
+  LocalPrefKey,
+  LocalPrefValue,
 } from '@standardnotes/services'
 import { ContentType } from '@standardnotes/domain-core'
 
@@ -24,6 +28,7 @@ export class PreferencesService
   private shouldReload = true
   private reloading = false
   private preferences?: SNUserPrefs
+  private localPreferences: { [key in LocalPrefKey]?: LocalPrefValue[key] } = {}
   private removeItemObserver?: () => void
   private removeSyncObserver?: () => void
 
@@ -32,6 +37,7 @@ export class PreferencesService
     items: ItemManager,
     private mutator: MutatorClientInterface,
     private sync: SyncService,
+    private storage: StorageServiceInterface,
     protected override internalEventBus: InternalEventBusInterface,
   ) {
     super(internalEventBus)
@@ -69,16 +75,36 @@ export class PreferencesService
         if (this.preferences) {
           void this.notifyEvent(PreferencesServiceEvent.PreferencesChanged)
         }
+      } else if (stage === ApplicationStage.StorageDecrypted_09) {
+        this.localPreferences = this.storage.getValue(StorageKey.LocalPreferences) ?? {}
+        void this.notifyEvent(PreferencesServiceEvent.LocalPreferencesChanged)
       }
     }
   }
 
+  getLocalValue<K extends LocalPrefKey>(
+    key: K,
+    defaultValue: LocalPrefValue[K] | undefined,
+  ): LocalPrefValue[K] | undefined
+  getLocalValue<K extends LocalPrefKey>(key: K, defaultValue: LocalPrefValue[K]): LocalPrefValue[K]
+  getLocalValue<K extends LocalPrefKey>(key: K, defaultValue?: LocalPrefValue[K]): LocalPrefValue[K] | undefined {
+    return this.localPreferences[key] ?? defaultValue
+  }
+
   getValue<K extends PrefKey>(key: K, defaultValue: PrefValue[K] | undefined): PrefValue[K] | undefined
   getValue<K extends PrefKey>(key: K, defaultValue: PrefValue[K]): PrefValue[K]
   getValue<K extends PrefKey>(key: K, defaultValue?: PrefValue[K]): PrefValue[K] | undefined {
     return this.preferences?.getPref(key) ?? defaultValue
   }
 
+  setLocalValue<K extends LocalPrefKey>(key: K, value: LocalPrefValue[K]): void {
+    this.localPreferences[key] = value
+
+    this.storage.setValue(StorageKey.LocalPreferences, this.localPreferences)
+
+    void this.notifyEvent(PreferencesServiceEvent.LocalPreferencesChanged)
+  }
+
   async setValue<K extends PrefKey>(key: K, value: PrefValue[K]): Promise<void> {
     await this.setValueDetached(key, value)