chore: switch to multiple vault display if exclusively shown vault is deleted [skip e2e]

packages/ui-services/src/Abstract/AbstractUIService.ts

@@ -2,11 +2,12 @@ import { AbstractService, InternalEventBusInterface, ApplicationEvent } from '@s
 import { AbstractUIServiceInterface } from './AbstractUIServiceInterface'
 import { WebApplicationInterface } from '../WebApplication/WebApplicationInterface'
 
-export class AbstractUIServicee<EventName = string, EventData = unknown>
+export class AbstractUIService<EventName = string, EventData = unknown>
   extends AbstractService<EventName, EventData>
   implements AbstractUIServiceInterface<EventName, EventData>
 {
   private unsubApp!: () => void
+  private observers = new Set<() => void>()
 
   constructor(
     protected application: WebApplicationInterface,
@@ -43,8 +44,13 @@ export class AbstractUIServicee<EventName = string, EventData = unknown>
     })
   }
 
+  addObserver(observer: () => void): void {
+    this.observers.add(observer)
+  }
+
   override deinit() {
     ;(this.application as unknown) = undefined
+    this.observers.forEach((unsubObserver) => unsubObserver())
     this.unsubApp()
     ;(this.unsubApp as unknown) = undefined
     super.deinit()

packages/ui-services/src/Theme/ThemeManager.ts

@@ -18,7 +18,7 @@ import {
 } from '@standardnotes/services'
 import { NativeFeatureIdentifier, FindNativeTheme, ThemeFeatureDescription } from '@standardnotes/features'
 import { WebApplicationInterface } from '../WebApplication/WebApplicationInterface'
-import { AbstractUIServicee } from '../Abstract/AbstractUIService'
+import { AbstractUIService } from '../Abstract/AbstractUIService'
 import { GetAllThemesUseCase } from './GetAllThemesUseCase'
 import { Uuid } from '@standardnotes/domain-core'
 import { ActiveThemeList } from './ActiveThemeList'
@@ -28,7 +28,7 @@ const CachedThemesKey = 'cachedThemes'
 const TimeBeforeApplyingColorScheme = 5
 const DefaultThemeIdentifier = 'Default'
 
-export class ThemeManager extends AbstractUIServicee {
+export class ThemeManager extends AbstractUIService {
   private themesActiveInTheUI: ActiveThemeList
   private lastUseDeviceThemeSettings = false
 

packages/ui-services/src/Vaults/VaultDisplayService.ts

@@ -15,13 +15,14 @@ import {
 } from '@standardnotes/services'
 import { VaultDisplayOptions, VaultDisplayOptionsPersistable, VaultListingInterface } from '@standardnotes/models'
 import { VaultDisplayServiceEvent } from './VaultDisplayServiceEvent'
-import { AbstractUIServicee } from '../Abstract/AbstractUIService'
+import { AbstractUIService } from '../Abstract/AbstractUIService'
 import { WebApplicationInterface } from '../WebApplication/WebApplicationInterface'
 import { VaultDisplayServiceInterface } from './VaultDisplayServiceInterface'
 import { action, makeObservable, observable } from 'mobx'
+import { ContentType } from '@standardnotes/domain-core'
 
 export class VaultDisplayService
-  extends AbstractUIServicee<VaultDisplayServiceEvent>
+  extends AbstractUIService<VaultDisplayServiceEvent>
   implements VaultDisplayServiceInterface, InternalEventHandlerInterface
 {
   options: VaultDisplayOptions
@@ -48,6 +49,14 @@ export class VaultDisplayService
     internalEventBus.addEventHandler(this, VaultLockServiceEvent.VaultLocked)
     internalEventBus.addEventHandler(this, VaultLockServiceEvent.VaultUnlocked)
     internalEventBus.addEventHandler(this, ApplicationEvent.ApplicationStageChanged)
+
+    this.addObserver(
+      application.items.streamItems(ContentType.TYPES.VaultListing, ({ removed }) => {
+        if (removed.some((vault) => vault.uuid === this.exclusivelyShownVault?.uuid)) {
+          this.changeToMultipleVaultDisplayMode()
+        }
+      }),
+    )
   }
 
   async handleEvent(event: InternalEventInterface): Promise<void> {