Serialize Browser Accounts

apps/browser/src/models/account.ts

@@ -1,3 +1,5 @@
+import { Jsonify } from "type-fest";
+
 import {
   Account as BaseAccount,
   AccountSettings as BaseAccountSettings,
@@ -9,6 +11,14 @@ import { BrowserSendComponentState } from "./browserSendComponentState";
 
 export class AccountSettings extends BaseAccountSettings {
   vaultTimeout = -1; // On Restart
+
+  static fromJSON(json: Jsonify<AccountSettings>): AccountSettings {
+    if (json == null) {
+      return null;
+    }
+
+    return Object.assign(new AccountSettings(), json, super.fromJSON(json));
+  }
 }
 
 export class Account extends BaseAccount {
@@ -29,4 +39,18 @@ export class Account extends BaseAccount {
     this.ciphers = init?.ciphers ?? new BrowserComponentState();
     this.sendType = init?.sendType ?? new BrowserComponentState();
   }
+
+  static fromJSON(json: Jsonify<Account>): Account {
+    if (json == null) {
+      return null;
+    }
+
+    return Object.assign(new Account({}), json, super.fromJSON(json), {
+      settings: AccountSettings.fromJSON(json.settings),
+      groupings: BrowserGroupingsComponentState.fromJSON(json.groupings),
+      send: BrowserSendComponentState.fromJSON(json.send),
+      ciphers: BrowserComponentState.fromJSON(json.ciphers),
+      sendType: BrowserComponentState.fromJSON(json.sendType),
+    });
+  }
 }

apps/browser/src/models/browserComponentState.ts

@@ -1,4 +1,14 @@
+import { Jsonify } from "type-fest";
+
 export class BrowserComponentState {
   scrollY: number;
   searchText: string;
+
+  static fromJSON(json: Jsonify<BrowserComponentState>) {
+    if (json == null) {
+      return null;
+    }
+
+    return Object.assign(new BrowserComponentState(), json);
+  }
 }

apps/browser/src/models/browserGroupingsComponentState.ts

@@ -1,7 +1,9 @@
 import { CipherType } from "@bitwarden/common/enums/cipherType";
+import { Utils } from "@bitwarden/common/misc/utils";
 import { CipherView } from "@bitwarden/common/models/view/cipher.view";
 import { CollectionView } from "@bitwarden/common/models/view/collection.view";
 import { FolderView } from "@bitwarden/common/models/view/folder.view";
+import { DeepJsonify } from "@bitwarden/common/types/deep-jsonify";
 
 import { BrowserComponentState } from "./browserComponentState";
 
@@ -15,4 +17,28 @@ export class BrowserGroupingsComponentState extends BrowserComponentState {
   folders: FolderView[];
   collections: CollectionView[];
   deletedCount: number;
+
+  toJSON() {
+    return Utils.merge(this, {
+      collectionCounts: Utils.mapToRecord(this.collectionCounts),
+      folderCounts: Utils.mapToRecord(this.folderCounts),
+      typeCounts: Utils.mapToRecord(this.typeCounts),
+    });
+  }
+
+  static fromJSON(json: DeepJsonify<BrowserGroupingsComponentState>) {
+    if (json == null) {
+      return null;
+    }
+
+    return Object.assign(new BrowserGroupingsComponentState(), json, {
+      favoriteCiphers: json.favoriteCiphers?.map((c) => CipherView.fromJSON(c)),
+      noFolderCiphers: json.noFolderCiphers?.map((c) => CipherView.fromJSON(c)),
+      ciphers: json.ciphers?.map((c) => CipherView.fromJSON(c)),
+      collectionCounts: Utils.recordToMap(json.collectionCounts),
+      folderCounts: Utils.recordToMap(json.folderCounts),
+      typeCounts: Utils.recordToMap(json.typeCounts),
+      folders: json.folders?.map((f) => FolderView.fromJSON(f)),
+    });
+  }
 }

apps/browser/src/models/browserSendComponentState.ts

@@ -1,9 +1,28 @@
 import { SendType } from "@bitwarden/common/enums/sendType";
+import { Utils } from "@bitwarden/common/misc/utils";
 import { SendView } from "@bitwarden/common/models/view/send.view";
+import { DeepJsonify } from "@bitwarden/common/types/deep-jsonify";
 
 import { BrowserComponentState } from "./browserComponentState";
 
 export class BrowserSendComponentState extends BrowserComponentState {
   sends: SendView[];
   typeCounts: Map<SendType, number>;
+
+  toJSON() {
+    return Utils.merge(this, {
+      typeCounts: Utils.mapToRecord(this.typeCounts),
+    });
+  }
+
+  static fromJSON(json: DeepJsonify<BrowserSendComponentState>) {
+    if (json == null) {
+      return null;
+    }
+
+    return Object.assign(new BrowserSendComponentState(), json, {
+      sends: json.sends?.map((s) => SendView.fromJSON(s)),
+      typeCounts: Utils.recordToMap(json.typeCounts),
+    });
+  }
 }

apps/browser/src/popup/send/send-groupings.component.ts

@@ -165,12 +165,12 @@ export class SendGroupingsComponent extends BaseSendComponent {
   }
 
   private async saveState() {
-    this.state = {
+    this.state = Object.assign(new BrowserSendComponentState(), {
       scrollY: this.popupUtils.getContentScrollY(window),
       searchText: this.searchText,
       sends: this.sends,
       typeCounts: this.typeCounts,
-    };
+    });
     await this.stateService.setBrowserSendComponentState(this.state);
   }
 

apps/browser/src/popup/vault/vault-filter.component.ts

@@ -373,7 +373,7 @@ export class VaultFilterComponent implements OnInit, OnDestroy {
   }
 
   private async saveState() {
-    this.state = {
+    this.state = Object.assign(new BrowserGroupingsComponentState(), {
       scrollY: this.popupUtils.getContentScrollY(window),
       searchText: this.searchText,
       favoriteCiphers: this.favoriteCiphers,
@@ -385,7 +385,7 @@ export class VaultFilterComponent implements OnInit, OnDestroy {
       folders: this.folders,
       collections: this.collections,
       deletedCount: this.deletedCount,
-    };
+    });
     await this.browserStateService.setBrowserGroupingComponentState(this.state);
   }