From d6995cdbf9114a157253ba06837426f060ea48b3 Mon Sep 17 00:00:00 2001
From: Robyn MacCallum <robyntmaccallum@gmail.com>
Date: Wed, 13 Apr 2022 15:13:36 -0400
Subject: [PATCH] draft for filters work

---
 bitwarden_license/src/app/app.module.ts       |   2 +
 package-lock.json                             |  15 ++
 .../vault/groupings.component.ts              |  65 ------
 .../vault-filter/vault-filter.component.ts    |  18 ++
 .../organizations/vault/vault.component.html  |  26 ++-
 .../organizations/vault/vault.component.ts    | 140 ++++++-------
 src/app/oss.module.ts                         |   6 +-
 src/app/settings/user-billing.component.ts    |   4 +-
 src/app/vault/groupings.component.html        | 173 ----------------
 src/app/vault/groupings.component.ts          |  29 ---
 .../collection-filter.component.html          |  55 +++++
 .../components/collection-filter.component.ts |   9 +
 .../components/folder-filter.component.html   |  71 +++++++
 .../components/folder-filter.component.ts     |   9 +
 .../organization-filter.component.html        | 175 ++++++++++++++++
 .../organization-filter.component.ts          |  11 +
 .../organization-options.component.html       |  41 ++++
 .../organization-options.component.ts         | 180 +++++++++++++++++
 .../components/status-filter.component.html   |  19 ++
 .../components/status-filter.component.ts     |   9 +
 .../components/type-filter.component.html     |  38 ++++
 .../components/type-filter.component.ts       |   9 +
 .../vault-filter/vault-filter.component.html  |  73 +++++++
 .../vault-filter/vault-filter.component.ts    |  27 +++
 .../vault/vault-filter/vault-filter.module.ts |  50 +++++
 .../vault-filter/vault-filter.service.ts      |   3 +
 src/app/vault/vault.component.html            |  26 +--
 src/app/vault/vault.component.ts              | 190 +++++++++---------
 src/locales/en/messages.json                  |   3 +
 src/scss/cards.scss                           |   4 +
 src/scss/pages.scss                           |  42 ++++
 31 files changed, 1050 insertions(+), 472 deletions(-)
 delete mode 100644 src/app/organizations/vault/groupings.component.ts
 create mode 100644 src/app/organizations/vault/vault-filter/vault-filter.component.ts
 delete mode 100644 src/app/vault/groupings.component.html
 delete mode 100644 src/app/vault/groupings.component.ts
 create mode 100644 src/app/vault/vault-filter/components/collection-filter.component.html
 create mode 100644 src/app/vault/vault-filter/components/collection-filter.component.ts
 create mode 100644 src/app/vault/vault-filter/components/folder-filter.component.html
 create mode 100644 src/app/vault/vault-filter/components/folder-filter.component.ts
 create mode 100644 src/app/vault/vault-filter/components/organization-filter.component.html
 create mode 100644 src/app/vault/vault-filter/components/organization-filter.component.ts
 create mode 100644 src/app/vault/vault-filter/components/organization-options.component.html
 create mode 100644 src/app/vault/vault-filter/components/organization-options.component.ts
 create mode 100644 src/app/vault/vault-filter/components/status-filter.component.html
 create mode 100644 src/app/vault/vault-filter/components/status-filter.component.ts
 create mode 100644 src/app/vault/vault-filter/components/type-filter.component.html
 create mode 100644 src/app/vault/vault-filter/components/type-filter.component.ts
 create mode 100644 src/app/vault/vault-filter/vault-filter.component.html
 create mode 100644 src/app/vault/vault-filter/vault-filter.component.ts
 create mode 100644 src/app/vault/vault-filter/vault-filter.module.ts
 create mode 100644 src/app/vault/vault-filter/vault-filter.service.ts

diff --git a/bitwarden_license/src/app/app.module.ts b/bitwarden_license/src/app/app.module.ts
index 781e3f45..f9e59bda 100644
--- a/bitwarden_license/src/app/app.module.ts
+++ b/bitwarden_license/src/app/app.module.ts
@@ -9,6 +9,7 @@ import { JslibModule } from "jslib-angular/jslib.module";
 
 import { OssRoutingModule } from "src/app/oss-routing.module";
 import { ServicesModule } from "src/app/services/services.module";
+import { VaultFilterModule } from "src/app/vault/vault-filter/vault-filter.module";
 import { WildcardRoutingModule } from "src/app/wildcard-routing.module";
 
 import { AppRoutingModule } from "./app-routing.module";
@@ -20,6 +21,7 @@ import { MaximumVaultTimeoutPolicyComponent } from "./policies/maximum-vault-tim
 @NgModule({
   imports: [
     JslibModule,
+    VaultFilterModule,
     BrowserAnimationsModule,
     FormsModule,
     ReactiveFormsModule,
diff --git a/package-lock.json b/package-lock.json
index c978d8c0..73f638e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -139,6 +139,14 @@
         "typescript": "4.3.5"
       }
     },
+    "jslib/common/node_modules/node-forge": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
+      "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==",
+      "engines": {
+        "node": ">= 6.13.0"
+      }
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz",
@@ -9657,6 +9665,13 @@
         "tldjs": "^2.3.1",
         "typescript": "4.3.5",
         "zxcvbn": "^4.4.2"
+      },
+      "dependencies": {
+        "node-forge": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
+          "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA=="
+        }
       }
     },
     "@braintree/asset-loader": {
diff --git a/src/app/organizations/vault/groupings.component.ts b/src/app/organizations/vault/groupings.component.ts
deleted file mode 100644
index b39f5e9a..00000000
--- a/src/app/organizations/vault/groupings.component.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Component } from "@angular/core";
-
-import { ApiService } from "jslib-common/abstractions/api.service";
-import { CollectionService } from "jslib-common/abstractions/collection.service";
-import { FolderService } from "jslib-common/abstractions/folder.service";
-import { I18nService } from "jslib-common/abstractions/i18n.service";
-import { StateService } from "jslib-common/abstractions/state.service";
-import { CollectionData } from "jslib-common/models/data/collectionData";
-import { Collection } from "jslib-common/models/domain/collection";
-import { Organization } from "jslib-common/models/domain/organization";
-import { CollectionDetailsResponse } from "jslib-common/models/response/collectionResponse";
-import { CollectionView } from "jslib-common/models/view/collectionView";
-
-import { GroupingsComponent as BaseGroupingsComponent } from "../../vault/groupings.component";
-
-@Component({
-  selector: "app-org-vault-groupings",
-  templateUrl: "../../vault/groupings.component.html",
-})
-export class GroupingsComponent extends BaseGroupingsComponent {
-  organization: Organization;
-
-  constructor(
-    collectionService: CollectionService,
-    folderService: FolderService,
-    stateService: StateService,
-    private apiService: ApiService,
-    private i18nService: I18nService
-  ) {
-    super(collectionService, folderService, stateService);
-  }
-
-  async loadCollections() {
-    if (!this.organization.canEditAnyCollection) {
-      await super.loadCollections(this.organization.id);
-      return;
-    }
-
-    const collections = await this.apiService.getCollections(this.organization.id);
-    if (collections != null && collections.data != null && collections.data.length) {
-      const collectionDomains = collections.data.map(
-        (r) => new Collection(new CollectionData(r as CollectionDetailsResponse))
-      );
-      this.collections = await this.collectionService.decryptMany(collectionDomains);
-    } else {
-      this.collections = [];
-    }
-
-    const unassignedCollection = new CollectionView();
-    unassignedCollection.name = this.i18nService.t("unassigned");
-    unassignedCollection.id = "unassigned";
-    unassignedCollection.organizationId = this.organization.id;
-    unassignedCollection.readOnly = true;
-    this.collections.push(unassignedCollection);
-    this.nestedCollections = await this.collectionService.getAllNested(this.collections);
-  }
-
-  async collapse(grouping: CollectionView) {
-    await super.collapse(grouping, "org_");
-  }
-
-  isCollapsed(grouping: CollectionView) {
-    return super.isCollapsed(grouping, "org_");
-  }
-}
diff --git a/src/app/organizations/vault/vault-filter/vault-filter.component.ts b/src/app/organizations/vault/vault-filter/vault-filter.component.ts
new file mode 100644
index 00000000..87012759
--- /dev/null
+++ b/src/app/organizations/vault/vault-filter/vault-filter.component.ts
@@ -0,0 +1,18 @@
+import { Component } from "@angular/core";
+
+import { VaultFilterService } from "jslib-angular/modules/vault-filter/vault-filter.service";
+import { Organization } from "jslib-common/models/domain/organization";
+
+import { VaultFilterComponent as BaseVaultFilterComponent } from "../../../vault/vault-filter/vault-filter.component";
+
+@Component({
+  selector: "app-org-vault-filter",
+  templateUrl: "../../../vault/vault-filter/vault-filter.component.html",
+})
+export class VaultFilterComponent extends BaseVaultFilterComponent {
+  organization: Organization;
+
+  constructor(vaultFilterService: VaultFilterService) {
+    super(vaultFilterService);
+  }
+}
diff --git a/src/app/organizations/vault/vault.component.html b/src/app/organizations/vault/vault.component.html
index d2db40ce..a187d3ba 100644
--- a/src/app/organizations/vault/vault.component.html
+++ b/src/app/organizations/vault/vault.component.html
@@ -1,17 +1,21 @@
 <div class="container page-content">
   <div class="row">
     <div class="col-3">
-      <app-org-vault-groupings
-        [showFolders]="false"
-        [showFavorites]="false"
-        [showTrash]="true"
-        (onAllClicked)="clearGroupingFilters()"
-        (onCipherTypeClicked)="filterCipherType($event)"
-        (onCollectionClicked)="filterCollection($event.id)"
-        (onSearchTextChanged)="filterSearchText($event)"
-        (onTrashClicked)="filterDeleted()"
-      >
-      </app-org-vault-groupings>
+      <div class="groupings">
+        <div class="content">
+          <div class="inner-content">
+            <app-vault-filter
+              #vaultFilter
+              [showFolders]="false"
+              [showFavorites]="false"
+              [activeFilter]="activeFilter"
+              [showOrgFilter]="false"
+              (onFilterChange)="applyVaultFilter($event)"
+              (onSearchTextChanged)="filterSearchText($event)"
+            ></app-vault-filter>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="col-9">
       <div class="page-header d-flex">
diff --git a/src/app/organizations/vault/vault.component.ts b/src/app/organizations/vault/vault.component.ts
index ea7d683e..92398b58 100644
--- a/src/app/organizations/vault/vault.component.ts
+++ b/src/app/organizations/vault/vault.component.ts
@@ -10,6 +10,7 @@ import {
 import { ActivatedRoute, Router } from "@angular/router";
 import { first } from "rxjs/operators";
 
+import { VaultFilter } from "jslib-angular/modules/vault-filter/models/vault-filter.model";
 import { ModalService } from "jslib-angular/services/modal.service";
 import { BroadcasterService } from "jslib-common/abstractions/broadcaster.service";
 import { I18nService } from "jslib-common/abstractions/i18n.service";
@@ -27,7 +28,7 @@ import { AddEditComponent } from "./add-edit.component";
 import { AttachmentsComponent } from "./attachments.component";
 import { CiphersComponent } from "./ciphers.component";
 import { CollectionsComponent } from "./collections.component";
-import { GroupingsComponent } from "./groupings.component";
+import { VaultFilterComponent } from "./vault-filter/vault-filter.component";
 
 const BroadcasterSubscriptionId = "OrgVaultComponent";
 
@@ -36,7 +37,7 @@ const BroadcasterSubscriptionId = "OrgVaultComponent";
   templateUrl: "vault.component.html",
 })
 export class VaultComponent implements OnInit, OnDestroy {
-  @ViewChild(GroupingsComponent, { static: true }) groupingsComponent: GroupingsComponent;
+  @ViewChild("vaultFilter", { static: true }) vaultFilterComponent: VaultFilterComponent;
   @ViewChild(CiphersComponent, { static: true }) ciphersComponent: CiphersComponent;
   @ViewChild("attachments", { read: ViewContainerRef, static: true })
   attachmentsModalRef: ViewContainerRef;
@@ -52,6 +53,7 @@ export class VaultComponent implements OnInit, OnDestroy {
   type: CipherType = null;
   deleted = false;
   trashCleanupWarning: string = null;
+  activeFilter: VaultFilter = new VaultFilter();
 
   constructor(
     private route: ActivatedRoute,
@@ -75,11 +77,11 @@ export class VaultComponent implements OnInit, OnDestroy {
     );
     this.route.parent.params.pipe(first()).subscribe(async (params) => {
       this.organization = await this.organizationService.get(params.organizationId);
-      this.groupingsComponent.organization = this.organization;
+      this.vaultFilterComponent.organization = this.organization;
       this.ciphersComponent.organization = this.organization;
 
       this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
-        this.ciphersComponent.searchText = this.groupingsComponent.searchText = qParams.search;
+        // this.ciphersComponent.searchText = this.vaultFilterComponent.search = qParams.search;
         if (!this.organization.canViewAllCollections) {
           await this.syncService.fullSync(false);
           this.broadcasterService.subscribe(BroadcasterSubscriptionId, (message: any) => {
@@ -88,7 +90,11 @@ export class VaultComponent implements OnInit, OnDestroy {
                 case "syncCompleted":
                   if (message.successfully) {
                     await Promise.all([
-                      this.groupingsComponent.load(),
+                      this.vaultFilterComponent.reloadCollectionsAndFolders(
+                        new VaultFilter({
+                          selectedOrganizationId: this.organization.id,
+                        } as Partial<VaultFilter>)
+                      ),
                       this.ciphersComponent.refresh(),
                     ]);
                     this.changeDetectorRef.detectChanges();
@@ -98,27 +104,10 @@ export class VaultComponent implements OnInit, OnDestroy {
             });
           });
         }
-        await this.groupingsComponent.load();
-
-        if (qParams == null) {
-          this.groupingsComponent.selectedAll = true;
-          await this.ciphersComponent.reload();
-        } else {
-          if (qParams.deleted) {
-            this.groupingsComponent.selectedTrash = true;
-            await this.filterDeleted(true);
-          } else if (qParams.type) {
-            const t = parseInt(qParams.type, null);
-            this.groupingsComponent.selectedType = t;
-            await this.filterCipherType(t, true);
-          } else if (qParams.collectionId) {
-            this.groupingsComponent.selectedCollectionId = qParams.collectionId;
-            await this.filterCollection(qParams.collectionId, true);
-          } else {
-            this.groupingsComponent.selectedAll = true;
-            await this.ciphersComponent.reload();
-          }
-        }
+        await this.vaultFilterComponent.reloadCollectionsAndFolders(
+          new VaultFilter({ selectedOrganizationId: this.organization.id } as Partial<VaultFilter>)
+        );
+        await this.ciphersComponent.reload();
 
         if (qParams.viewEvents != null) {
           const cipher = this.ciphersComponent.ciphers.filter((c) => c.id === qParams.viewEvents);
@@ -134,63 +123,46 @@ export class VaultComponent implements OnInit, OnDestroy {
     this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
   }
 
-  async clearGroupingFilters() {
-    this.ciphersComponent.showAddNew = true;
-    this.ciphersComponent.deleted = false;
-    this.groupingsComponent.searchPlaceholder = this.i18nService.t("searchVault");
-    await this.ciphersComponent.applyFilter();
-    this.clearFilters();
+  async applyVaultFilter(vaultFilter: VaultFilter) {
+    this.ciphersComponent.showAddNew = vaultFilter.status !== "trash";
+    this.activeFilter = vaultFilter;
+    await this.ciphersComponent.reload(this.buildFilter(), vaultFilter.status === "trash");
+    this.go();
     this.go();
   }
 
-  async filterCipherType(type: CipherType, load = false) {
-    this.ciphersComponent.showAddNew = true;
-    this.ciphersComponent.deleted = false;
-    this.groupingsComponent.searchPlaceholder = this.i18nService.t("searchType");
-    const filter = (c: CipherView) => c.type === type;
-    if (load) {
-      await this.ciphersComponent.reload(filter);
-    } else {
-      await this.ciphersComponent.applyFilter(filter);
-    }
-    this.clearFilters();
-    this.type = type;
-    this.go();
-  }
-
-  async filterCollection(collectionId: string, load = false) {
-    this.ciphersComponent.showAddNew = true;
-    this.ciphersComponent.deleted = false;
-    this.groupingsComponent.searchPlaceholder = this.i18nService.t("searchCollection");
-    const filter = (c: CipherView) => {
-      if (collectionId === "unassigned") {
-        return c.collectionIds == null || c.collectionIds.length === 0;
-      } else {
-        return c.collectionIds != null && c.collectionIds.indexOf(collectionId) > -1;
+  private buildFilter(): (cipher: CipherView) => boolean {
+    return (cipher) => {
+      let cipherPassesFilter = true;
+      if (this.activeFilter.status === "favorites" && cipherPassesFilter) {
+        cipherPassesFilter = cipher.favorite;
       }
+      if (this.activeFilter.status === "trash" && cipherPassesFilter) {
+        cipherPassesFilter = cipher.isDeleted;
+      }
+      if (this.activeFilter.cipherType != null && cipherPassesFilter) {
+        cipherPassesFilter = cipher.type === this.activeFilter.cipherType;
+      }
+      if (
+        this.activeFilter.selectedFolderId != null &&
+        this.activeFilter.selectedFolderId != "none" &&
+        cipherPassesFilter
+      ) {
+        cipherPassesFilter = cipher.folderId === this.activeFilter.selectedFolderId;
+      }
+      if (this.activeFilter.selectedCollectionId != null && cipherPassesFilter) {
+        cipherPassesFilter =
+          cipher.collectionIds != null &&
+          cipher.collectionIds.indexOf(this.activeFilter.selectedCollectionId) > -1;
+      }
+      if (this.activeFilter.selectedOrganizationId != null && cipherPassesFilter) {
+        cipherPassesFilter = cipher.organizationId === this.activeFilter.selectedOrganizationId;
+      }
+      if (this.activeFilter.myVaultOnly && cipherPassesFilter) {
+        cipherPassesFilter = cipher.organizationId === null;
+      }
+      return cipherPassesFilter;
     };
-    if (load) {
-      await this.ciphersComponent.reload(filter);
-    } else {
-      await this.ciphersComponent.applyFilter(filter);
-    }
-    this.clearFilters();
-    this.collectionId = collectionId;
-    this.go();
-  }
-
-  async filterDeleted(load = false) {
-    this.ciphersComponent.showAddNew = false;
-    this.ciphersComponent.deleted = true;
-    this.groupingsComponent.searchPlaceholder = this.i18nService.t("searchTrash");
-    if (load) {
-      await this.ciphersComponent.reload(null, true);
-    } else {
-      await this.ciphersComponent.applyFilter(null);
-    }
-    this.clearFilters();
-    this.deleted = true;
-    this.go();
   }
 
   filterSearchText(searchText: string) {
@@ -232,7 +204,9 @@ export class VaultComponent implements OnInit, OnDestroy {
       (comp) => {
         if (this.organization.canEditAnyCollection) {
           comp.collectionIds = cipher.collectionIds;
-          comp.collections = this.groupingsComponent.collections.filter((c) => !c.readOnly);
+          comp.collections = this.vaultFilterComponent.collections.fullList.filter(
+            (c) => !c.readOnly
+          );
         }
         comp.organization = this.organization;
         comp.cipherId = cipher.id;
@@ -249,7 +223,9 @@ export class VaultComponent implements OnInit, OnDestroy {
     component.organizationId = this.organization.id;
     component.type = this.type;
     if (this.organization.canEditAnyCollection) {
-      component.collections = this.groupingsComponent.collections.filter((c) => !c.readOnly);
+      component.collections = this.vaultFilterComponent.collections.fullList.filter(
+        (c) => !c.readOnly
+      );
     }
     if (this.collectionId != null) {
       component.collectionIds = [this.collectionId];
@@ -286,7 +262,9 @@ export class VaultComponent implements OnInit, OnDestroy {
     component.cloneMode = true;
     component.organizationId = this.organization.id;
     if (this.organization.canEditAnyCollection) {
-      component.collections = this.groupingsComponent.collections.filter((c) => !c.readOnly);
+      component.collections = this.vaultFilterComponent.collections.fullList.filter(
+        (c) => !c.readOnly
+      );
     }
     // Regardless of Admin state, the collection Ids need to passed manually as they are not assigned value
     // in the add-edit componenet
diff --git a/src/app/oss.module.ts b/src/app/oss.module.ts
index fa3d9ae1..00c13580 100644
--- a/src/app/oss.module.ts
+++ b/src/app/oss.module.ts
@@ -135,7 +135,7 @@ import { AddEditComponent as OrgAddEditComponent } from "./organizations/vault/a
 import { AttachmentsComponent as OrgAttachmentsComponent } from "./organizations/vault/attachments.component";
 import { CiphersComponent as OrgCiphersComponent } from "./organizations/vault/ciphers.component";
 import { CollectionsComponent as OrgCollectionsComponent } from "./organizations/vault/collections.component";
-import { GroupingsComponent as OrgGroupingsComponent } from "./organizations/vault/groupings.component";
+import { VaultFilterComponent as OrgGroupingsComponent } from "./organizations/vault/vault-filter/vault-filter.component";
 import { VaultComponent as OrgVaultComponent } from "./organizations/vault/vault.component";
 import { ProvidersComponent } from "./providers/providers.component";
 import { BreachReportComponent } from "./reports/breach-report.component";
@@ -214,8 +214,8 @@ import { BulkShareComponent } from "./vault/bulk-share.component";
 import { CiphersComponent } from "./vault/ciphers.component";
 import { CollectionsComponent } from "./vault/collections.component";
 import { FolderAddEditComponent } from "./vault/folder-add-edit.component";
-import { GroupingsComponent } from "./vault/groupings.component";
 import { ShareComponent } from "./vault/share.component";
+import { VaultFilterModule } from "./vault/vault-filter/vault-filter.module";
 import { VaultComponent } from "./vault/vault.component";
 
 registerLocaleData(localeAf, "af");
@@ -275,6 +275,7 @@ registerLocaleData(localeZhTw, "zh-TW");
     DragDropModule,
     FormsModule,
     InfiniteScrollModule,
+    VaultFilterModule,
     JslibModule,
     ReactiveFormsModule,
     RouterModule,
@@ -332,7 +333,6 @@ registerLocaleData(localeZhTw, "zh-TW");
     FolderAddEditComponent,
     FooterComponent,
     FrontendLayoutComponent,
-    GroupingsComponent,
     HintComponent,
     ImportComponent,
     InactiveTwoFactorReportComponent,
diff --git a/src/app/settings/user-billing.component.ts b/src/app/settings/user-billing.component.ts
index ff9b03d2..970a05a5 100644
--- a/src/app/settings/user-billing.component.ts
+++ b/src/app/settings/user-billing.component.ts
@@ -47,7 +47,9 @@ export class UserBillingComponent implements OnInit {
     if (this.organizationId != null) {
       this.billing = await this.apiService.getOrganizationBilling(this.organizationId);
     } else {
-      this.billing = await this.apiService.getUserBilling();
+      // let history = await this.apiService.getUserBillingHistory();
+      // let payment = await this.apiService.getUserBillingPayment();
+      this.billing = new BillingResponse(null);
     }
     this.loading = false;
   }
diff --git a/src/app/vault/groupings.component.html b/src/app/vault/groupings.component.html
deleted file mode 100644
index 6bfdb35b..00000000
--- a/src/app/vault/groupings.component.html
+++ /dev/null
@@ -1,173 +0,0 @@
-<div class="card vault-filters">
-  <div class="card-header d-flex">
-    {{ "filters" | i18n }}
-    <a
-      class="ml-auto"
-      href="https://bitwarden.com/help/searching-vault/"
-      target="_blank"
-      rel="noopener"
-      appA11yTitle="{{ 'learnMore' | i18n }}"
-    >
-      <i class="bwi bwi-question-circle" aria-hidden="true"></i>
-    </a>
-  </div>
-  <div class="card-body">
-    <input
-      type="search"
-      placeholder="{{ searchPlaceholder || ('searchVault' | i18n) }}"
-      id="search"
-      class="form-control"
-      [(ngModel)]="searchText"
-      (input)="searchTextChanged()"
-      autocomplete="off"
-      appAutofocus
-    />
-    <ul class="bwi-ul card-ul">
-      <li [ngClass]="{ active: selectedAll }">
-        <a href="#" appStopClick (click)="selectAll()">
-          <i class="bwi bwi-li bwi-fw bwi-filter"></i>{{ "allItems" | i18n }}
-        </a>
-      </li>
-      <li [ngClass]="{ active: selectedFavorites }" *ngIf="showFavorites">
-        <a href="#" appStopClick (click)="selectFavorites()">
-          <i class="bwi bwi-li bwi-fw bwi-star"></i>{{ "favorites" | i18n }}
-        </a>
-      </li>
-      <li [ngClass]="{ active: selectedTrash }" *ngIf="showTrash">
-        <a href="#" appStopClick (click)="selectTrash()">
-          <i class="bwi bwi-li bwi-fw bwi-trash"></i>{{ "trash" | i18n }}
-        </a>
-      </li>
-    </ul>
-    <h3>{{ "types" | i18n }}</h3>
-    <ul class="bwi-ul card-ul">
-      <li [ngClass]="{ active: selectedType === cipherType.Login }">
-        <a href="#" appStopClick (click)="selectType(cipherType.Login)">
-          <i class="bwi bwi-li bwi-fw bwi-globe"></i>{{ "typeLogin" | i18n }}
-        </a>
-      </li>
-      <li [ngClass]="{ active: selectedType === cipherType.Card }">
-        <a href="#" appStopClick (click)="selectType(cipherType.Card)">
-          <i class="bwi bwi-li bwi-fw bwi-credit-card"></i>{{ "typeCard" | i18n }}
-        </a>
-      </li>
-      <li [ngClass]="{ active: selectedType === cipherType.Identity }">
-        <a href="#" appStopClick (click)="selectType(cipherType.Identity)">
-          <i class="bwi bwi-li bwi-fw bwi-id-card"></i>{{ "typeIdentity" | i18n }}
-        </a>
-      </li>
-      <li [ngClass]="{ active: selectedType === cipherType.SecureNote }">
-        <a href="#" appStopClick (click)="selectType(cipherType.SecureNote)">
-          <i class="bwi bwi-li bwi-fw bwi-sticky-note"></i>{{ "typeSecureNote" | i18n }}
-        </a>
-      </li>
-    </ul>
-    <p *ngIf="!loaded" class="text-muted">
-      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-      <span class="sr-only">{{ "loading" | i18n }}</span>
-    </p>
-    <ng-container *ngIf="loaded">
-      <ng-container *ngIf="showFolders">
-        <h3 class="d-flex">
-          {{ "folders" | i18n }}
-          <a
-            href="#"
-            class="text-muted ml-auto"
-            appStopClick
-            (click)="addFolder()"
-            appA11yTitle="{{ 'addFolder' | i18n }}"
-          >
-            <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
-          </a>
-        </h3>
-        <ul class="bwi-ul card-ul">
-          <ng-template #recursiveFolders let-folders>
-            <li
-              *ngFor="let f of folders"
-              [ngClass]="{ active: selectedFolder && f.node.id === selectedFolderId }"
-            >
-              <div class="d-flex">
-                <i
-                  *ngIf="f.children.length"
-                  class="bwi-li bwi"
-                  title="{{ 'toggleCollapse' | i18n }}"
-                  [ngClass]="{
-                    'bwi-angle-right': isCollapsed(f.node),
-                    'bwi-angle-down': !isCollapsed(f.node)
-                  }"
-                  (click)="collapse(f.node)"
-                ></i>
-                <a href="#" class="text-break" appStopClick (click)="selectFolder(f.node)">
-                  <i
-                    *ngIf="f.children.length === 0"
-                    class="bwi bwi-li bwi-folder"
-                    aria-hidden="true"
-                  ></i
-                  >{{ f.node.name }}
-                </a>
-                <a
-                  href="#"
-                  class="text-muted ml-auto show-active"
-                  appStopClick
-                  (click)="editFolder(f.node)"
-                  appA11yTitle="{{ 'editFolder' | i18n }}"
-                  *ngIf="f.node.id"
-                >
-                  <i class="bwi bwi-pencil bwi-fw" aria-hidden="true"></i>
-                </a>
-              </div>
-              <ul class="bwi-ul card-ul carets" *ngIf="f.children.length && !isCollapsed(f.node)">
-                <ng-container
-                  *ngTemplateOutlet="recursiveFolders; context: { $implicit: f.children }"
-                >
-                </ng-container>
-              </ul>
-            </li>
-          </ng-template>
-          <ng-container *ngTemplateOutlet="recursiveFolders; context: { $implicit: nestedFolders }">
-          </ng-container>
-        </ul>
-      </ng-container>
-      <ng-container *ngIf="showCollections && collections && collections.length">
-        <h3>{{ "collections" | i18n }}</h3>
-        <ul class="bwi-ul card-ul">
-          <ng-template #recursiveCollections let-collections>
-            <li
-              *ngFor="let c of collections"
-              [ngClass]="{ active: c.node.id === selectedCollectionId }"
-            >
-              <i
-                *ngIf="c.children.length"
-                class="bwi-li bwi"
-                title="{{ 'toggleCollapse' | i18n }}"
-                [ngClass]="{
-                  'bwi-angle-right': isCollapsed(c.node),
-                  'bwi-angle-down': !isCollapsed(c.node)
-                }"
-                (click)="collapse(c.node)"
-              ></i>
-              <a href="#" class="text-break" appStopClick (click)="selectCollection(c.node)">
-                <i
-                  *ngIf="c.children.length === 0"
-                  class="bwi bwi-li bwi-collection"
-                  aria-hidden="true"
-                ></i
-                >{{ c.node.name }}
-              </a>
-              <ul class="bwi-ul card-ul carets" *ngIf="c.children.length && !isCollapsed(c.node)">
-                <ng-container
-                  *ngTemplateOutlet="recursiveCollections; context: { $implicit: c.children }"
-                >
-                </ng-container>
-              </ul>
-            </li>
-          </ng-template>
-          <ng-container
-            *ngTemplateOutlet="recursiveCollections; context: { $implicit: nestedCollections }"
-          >
-          </ng-container>
-        </ul>
-      </ng-container>
-    </ng-container>
-  </div>
-</div>
diff --git a/src/app/vault/groupings.component.ts b/src/app/vault/groupings.component.ts
deleted file mode 100644
index 2914df05..00000000
--- a/src/app/vault/groupings.component.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Component, EventEmitter, Output } from "@angular/core";
-
-import { GroupingsComponent as BaseGroupingsComponent } from "jslib-angular/components/groupings.component";
-import { CollectionService } from "jslib-common/abstractions/collection.service";
-import { FolderService } from "jslib-common/abstractions/folder.service";
-import { StateService } from "jslib-common/abstractions/state.service";
-
-@Component({
-  selector: "app-vault-groupings",
-  templateUrl: "groupings.component.html",
-})
-export class GroupingsComponent extends BaseGroupingsComponent {
-  @Output() onSearchTextChanged = new EventEmitter<string>();
-
-  searchText = "";
-  searchPlaceholder: string = null;
-
-  constructor(
-    collectionService: CollectionService,
-    folderService: FolderService,
-    stateService: StateService
-  ) {
-    super(collectionService, folderService, stateService);
-  }
-
-  searchTextChanged() {
-    this.onSearchTextChanged.emit(this.searchText);
-  }
-}
diff --git a/src/app/vault/vault-filter/components/collection-filter.component.html b/src/app/vault/vault-filter/components/collection-filter.component.html
new file mode 100644
index 00000000..fa4561ed
--- /dev/null
+++ b/src/app/vault/vault-filter/components/collection-filter.component.html
@@ -0,0 +1,55 @@
+<ng-container *ngIf="show">
+  <div class="collapsable-row">
+    <i
+      class="bwi"
+      title="{{ 'toggleCollapse' | i18n }}"
+      aria-hidden="true"
+      [ngClass]="{
+        'bwi-angle-right': isCollapsed(collectionsGrouping),
+        'bwi-angle-down': !isCollapsed(collectionsGrouping)
+      }"
+      (click)="toggleCollapse(collectionsGrouping)"
+      appStopProp
+    ></i>
+    <h3>&nbsp;{{ collectionsGrouping.name | i18n }}</h3>
+  </div>
+  <ul *ngIf="!isCollapsed(collectionsGrouping)" class="bwi-ul card-ul">
+    <ng-template #recursiveCollections let-collections>
+      <li
+        *ngFor="let c of collections"
+        [ngClass]="{
+          active: c.node.id === activeFilter.selectedCollectionId
+        }"
+      >
+        <i
+          *ngIf="c.children.length"
+          class="bwi-li bwi"
+          title="{{ 'toggleCollapse' | i18n }}"
+          [ngClass]="{
+            'bwi-angle-right': isCollapsed(c.node),
+            'bwi-angle-down': !isCollapsed(c.node)
+          }"
+          (click)="collapse(c.node)"
+        ></i>
+        <a href="#" class="text-break" appStopClick (click)="applyFilter(c.node)">
+          <i
+            *ngIf="c.children.length === 0"
+            class="bwi bwi-li bwi-collection"
+            aria-hidden="true"
+          ></i
+          >{{ c.node.name }}
+        </a>
+        <ul class="bwi-ul card-ul carets" *ngIf="c.children.length && !isCollapsed(c.node)">
+          <ng-container
+            *ngTemplateOutlet="recursiveCollections; context: { $implicit: c.children }"
+          >
+          </ng-container>
+        </ul>
+      </li>
+    </ng-template>
+    <ng-container
+      *ngTemplateOutlet="recursiveCollections; context: { $implicit: nestedCollections }"
+    >
+    </ng-container>
+  </ul>
+</ng-container>
diff --git a/src/app/vault/vault-filter/components/collection-filter.component.ts b/src/app/vault/vault-filter/components/collection-filter.component.ts
new file mode 100644
index 00000000..e08c724a
--- /dev/null
+++ b/src/app/vault/vault-filter/components/collection-filter.component.ts
@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+import { CollectionFilterComponent as BaseCollectionFilterComponent } from "jslib-angular/modules/vault-filter/components/collection-filter.component";
+
+@Component({
+  selector: "app-collection-filter",
+  templateUrl: "collection-filter.component.html",
+})
+export class CollectionFilterComponent extends BaseCollectionFilterComponent {}
diff --git a/src/app/vault/vault-filter/components/folder-filter.component.html b/src/app/vault/vault-filter/components/folder-filter.component.html
new file mode 100644
index 00000000..4b0a6940
--- /dev/null
+++ b/src/app/vault/vault-filter/components/folder-filter.component.html
@@ -0,0 +1,71 @@
+<ng-container *ngIf="!hide && !activeFilter.selectedOrganizationId">
+  <div class="collapsable-row">
+    <i
+      class="bwi bwi-fw"
+      title="{{ 'toggleCollapse' | i18n }}"
+      aria-hidden="true"
+      [ngClass]="{
+        'bwi-angle-right': isCollapsed(foldersGrouping),
+        'bwi-angle-down': !isCollapsed(foldersGrouping)
+      }"
+      (click)="toggleCollapse(foldersGrouping)"
+      appStopProp
+    ></i>
+    <h3 class="filter-title">
+      {{ "folders" | i18n }}
+    </h3>
+    <a
+      href="#"
+      class="text-muted ml-auto"
+      appStopClick
+      (click)="addFolder()"
+      appA11yTitle="{{ 'addFolder' | i18n }}"
+    >
+      <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+    </a>
+  </div>
+  <ul *ngIf="!isCollapsed(foldersGrouping)" class="bwi-ul card-ul">
+    <ng-template #recursiveFolders let-folders>
+      <li
+        *ngFor="let f of folders"
+        [ngClass]="{
+          active: f.node.id === activeFilter.selectedFolderId && activeFilter.selectedFolder
+        }"
+      >
+        <div class="d-flex">
+          <i
+            *ngIf="f.children.length"
+            class="bwi-li bwi"
+            title="{{ 'toggleCollapse' | i18n }}"
+            [ngClass]="{
+              'bwi-angle-right': isCollapsed(f.node),
+              'bwi-angle-down': !isCollapsed(f.node)
+            }"
+            (click)="collapse(f.node)"
+          ></i>
+          <a href="#" class="text-break" appStopClick (click)="applyFilter(f.node)">
+            <i *ngIf="f.children.length === 0" class="bwi bwi-li bwi-folder" aria-hidden="true"></i
+            >{{ f.node.name }}
+          </a>
+          <a
+            href="#"
+            class="text-muted ml-auto show-active"
+            appStopClick
+            (click)="editFolder(f.node)"
+            appA11yTitle="{{ 'editFolder' | i18n }}"
+            *ngIf="f.node.id"
+          >
+            <i class="bwi bwi-pencil bwi-fw" aria-hidden="true"></i>
+          </a>
+        </div>
+        <ul class="bwi-ul" *ngIf="f.children.length && !isCollapsed(f.node)">
+          <ng-container *ngTemplateOutlet="recursiveFolders; context: { $implicit: f.children }">
+          </ng-container>
+        </ul>
+      </li>
+    </ng-template>
+    <ng-container
+      *ngTemplateOutlet="recursiveFolders; context: { $implicit: nestedFolders }"
+    ></ng-container>
+  </ul>
+</ng-container>
diff --git a/src/app/vault/vault-filter/components/folder-filter.component.ts b/src/app/vault/vault-filter/components/folder-filter.component.ts
new file mode 100644
index 00000000..6205239f
--- /dev/null
+++ b/src/app/vault/vault-filter/components/folder-filter.component.ts
@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+import { FolderFilterComponent as BaseFolderFilterComponent } from "jslib-angular/modules/vault-filter/components/folder-filter.component";
+
+@Component({
+  selector: "app-folder-filter",
+  templateUrl: "folder-filter.component.html",
+})
+export class FolderFilterComponent extends BaseFolderFilterComponent {}
diff --git a/src/app/vault/vault-filter/components/organization-filter.component.html b/src/app/vault/vault-filter/components/organization-filter.component.html
new file mode 100644
index 00000000..492ba1f6
--- /dev/null
+++ b/src/app/vault/vault-filter/components/organization-filter.component.html
@@ -0,0 +1,175 @@
+<ng-container *ngIf="!hide">
+  <ng-container [ngSwitch]="displayMode">
+    <ng-container *ngSwitchCase="'noOrganizations'">
+      <div class="vault-filter-option active">
+        <span>
+          <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
+          &nbsp;{{ "myVault" | i18n }}
+        </span>
+      </div>
+      <a
+        href="#"
+        routerLink="/settings/create-organization"
+        class="text-muted ml-auto"
+        appStopClick
+        appA11yTitle="{{ 'addOrganization' | i18n }}"
+      >
+        <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+        <span>{{ "newOrganization" | i18n }}</span>
+      </a>
+    </ng-container>
+    <ng-container *ngSwitchCase="'personalOwnershipPolicy'">
+      <div class="collapsable-row" [ngClass]="{ active: !hasActiveFilter }">
+        <i
+          class="bwi bwi-fw"
+          title="{{ 'toggleCollapse' | i18n }}"
+          aria-hidden="true"
+          [ngClass]="{
+            'bwi-angle-right': isCollapsed,
+            'bwi-angle-down': !isCollapsed
+          }"
+          (click)="toggleCollapse()"
+          appStopProp
+        ></i>
+        <a href="#" (click)="clearFilter()">
+          <span class="org-filter-heading" [ngClass]="{ active: !hasActiveFilter }"
+            >&nbsp;{{ organizationGrouping.name | i18n }}</span
+          >
+        </a>
+        <a
+          href="#"
+          routerLink="/settings/create-organization"
+          class="text-muted ml-auto"
+          appStopClick
+          appA11yTitle="{{ 'addOrganization' | i18n }}"
+        >
+          <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+        </a>
+      </div>
+      <ul *ngIf="!isCollapsed" class="bwi-ul card-ul">
+        <li
+          class="vault-filter-option"
+          *ngFor="let organization of organizations"
+          [ngClass]="{ active: organization.id === activeFilter.selectedOrganizationId }"
+        >
+          <div class="d-flex">
+            <a href="#" appStopClick appBlurClick (click)="applyOrganizationFilter(organization)">
+              <i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
+              &nbsp;{{ organization.name }}
+            </a>
+            <!-- TODO: Remove once jslib is updated and has new menu component -->
+            <a
+              href="#"
+              class="text-muted ml-auto show-active"
+              appStopClick
+              appA11yTitle="{{ 'addFolder' | i18n }}"
+              href="#"
+              id="nav-profile"
+              data-toggle="dropdown"
+              aria-haspopup="true"
+              aria-expanded="false"
+            >
+              <div class="dropdown-menu dropdown-menu-left" aria-labelledby="nav-profile">
+                <app-organization-options [organization]="organization"></app-organization-options>
+              </div>
+              <i class="bwi bwi-ellipsis-v bwi-fw" aria-hidden="true" *ngIf="organization.id"></i>
+            </a>
+
+            <!-- Using new dropdow menu component from component library -->
+            <!-- <button [bitMenuTriggerFor]="orgMenu" class="text-muted ml-auto show-active">
+              <i class="bwi bwi-ellipsis-v" aria-hidden="true"></i>
+            </button>
+            <bit-menu class="dropdown-menu" #orgMenu>
+              <app-organization-options [organization]="organization"></app-organization-options>
+            </bit-menu> -->
+          </div>
+        </li>
+      </ul>
+    </ng-container>
+    <ng-container *ngSwitchCase="'singleOrganizationAndPersonalOwnershipPolicies'">
+      <ul class="bwi-ul card-ul">
+        <li class="vault-filter-option active">
+          <a href="#">
+            <i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
+            &nbsp;{{ organizations[0].name }}
+          </a>
+        </li>
+      </ul>
+    </ng-container>
+    <ng-container *ngSwitchCase="'organizationMember'">
+      <div class="collapsable-row" [ngClass]="{ active: !hasActiveFilter }">
+        <i
+          class="bwi bwi-fw"
+          title="{{ 'toggleCollapse' | i18n }}"
+          aria-hidden="true"
+          [ngClass]="{
+            'bwi-angle-right': isCollapsed,
+            'bwi-angle-down': !isCollapsed
+          }"
+          (click)="toggleCollapse()"
+          appStopProp
+        ></i>
+        <a href="#" (click)="clearFilter()">
+          <span class="org-filter-heading" [ngClass]="{ active: !hasActiveFilter }"
+            >&nbsp;{{ organizationGrouping.name | i18n }}</span
+          >
+        </a>
+        <a
+          href="#"
+          routerLink="/settings/create-organization"
+          class="text-muted ml-auto"
+          appStopClick
+          appA11yTitle="{{ 'addOrganization' | i18n }}"
+        >
+          <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+        </a>
+      </div>
+      <ul *ngIf="!isCollapsed" class="bwi-ul card-ul no-margin">
+        <li class="vault-filter-option" [ngClass]="{ active: activeFilter.myVaultOnly }">
+          <a href="#" (click)="applyMyVaultFilter()">
+            <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
+            &nbsp;{{ "myVault" | i18n }}
+          </a>
+        </li>
+        <li
+          class="vault-filter-option"
+          *ngFor="let organization of organizations"
+          [ngClass]="{ active: organization.id === activeFilter.selectedOrganizationId }"
+        >
+          <div class="d-flex">
+            <a href="#" appStopClick appBlurClick (click)="applyOrganizationFilter(organization)">
+              <i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
+              &nbsp;{{ organization.name }}
+            </a>
+            <!-- TODO: Remove once jslib is updated and has new menu component -->
+            <a
+              href="#"
+              class="text-muted ml-auto show-active"
+              appStopClick
+              appA11yTitle="{{ 'addFolder' | i18n }}"
+              href="#"
+              id="nav-profile"
+              data-toggle="dropdown"
+              aria-haspopup="true"
+              aria-expanded="false"
+            >
+              <div class="dropdown-menu dropdown-menu-left" aria-labelledby="nav-profile">
+                <app-organization-options [organization]="organization"></app-organization-options>
+              </div>
+              <i class="bwi bwi-ellipsis-v bwi-fw" aria-hidden="true" *ngIf="organization.id"></i>
+            </a>
+
+            <!-- Using new dropdow menu component from component library -->
+            <!-- <button [bitMenuTriggerFor]="orgMenu" class="org-options ml-auto show-active">
+              <i class="bwi bwi-ellipsis-v" aria-hidden="true"></i>
+            </button>
+            <bit-menu class="dropdown-menu" #orgMenu>
+              <app-organization-options [organization]="organization"></app-organization-options>
+            </bit-menu> -->
+          </div>
+        </li>
+      </ul>
+    </ng-container>
+  </ng-container>
+  <hr />
+</ng-container>
diff --git a/src/app/vault/vault-filter/components/organization-filter.component.ts b/src/app/vault/vault-filter/components/organization-filter.component.ts
new file mode 100644
index 00000000..30241acd
--- /dev/null
+++ b/src/app/vault/vault-filter/components/organization-filter.component.ts
@@ -0,0 +1,11 @@
+import { Component } from "@angular/core";
+
+import { OrganizationFilterComponent as BaseOrganizationFilterComponent } from "jslib-angular/modules/vault-filter/components/organization-filter.component";
+
+@Component({
+  selector: "app-organization-filter",
+  templateUrl: "organization-filter.component.html",
+})
+export class OrganizationFilterComponent extends BaseOrganizationFilterComponent {
+  displayText = "allVaults";
+}
diff --git a/src/app/vault/vault-filter/components/organization-options.component.html b/src/app/vault/vault-filter/components/organization-options.component.html
new file mode 100644
index 00000000..abbaf25e
--- /dev/null
+++ b/src/app/vault/vault-filter/components/organization-options.component.html
@@ -0,0 +1,41 @@
+<div class="tw-max-w-[300px] tw-min-w-[200px] tw-flex tw-flex-col">
+  <a
+    *ngIf="allowEnrollmentChanges(organization) && !organization.resetPasswordEnrolled"
+    class="dropdown-item"
+    href="#"
+    appStopClick
+    (click)="toggleResetPasswordEnrollment(organization)"
+  >
+    <i class="bwi bwi-fw bwi-key" aria-hidden="true"></i>
+    {{ "enrollPasswordReset" | i18n }}
+  </a>
+  <a
+    *ngIf="allowEnrollmentChanges(organization) && organization.resetPasswordEnrolled"
+    class="dropdown-item"
+    href="#"
+    appStopClick
+    (click)="toggleResetPasswordEnrollment(organization)"
+  >
+    <i class="bwi bwi-fw bwi-undo" aria-hidden="true"></i>
+    {{ "withdrawPasswordReset" | i18n }}
+  </a>
+  <ng-container *ngIf="organization.useSso && organization.identifier">
+    <a
+      *ngIf="organization.ssoBound; else linkSso"
+      class="dropdown-item"
+      href="#"
+      appStopClick
+      (click)="unlinkSso(organization)"
+    >
+      <i class="bwi bwi-fw bwi-chain-broken" aria-hidden="true"></i>
+      {{ "unlinkSso" | i18n }}
+    </a>
+    <ng-template #linkSso>
+      <app-link-sso [organization]="organization"> </app-link-sso>
+    </ng-template>
+  </ng-container>
+  <a class="dropdown-item text-danger" href="#" appStopClick (click)="leave(organization)">
+    <i class="bwi bwi-fw bwi-sign-out" aria-hidden="true"></i>
+    {{ "leave" | i18n }}
+  </a>
+</div>
diff --git a/src/app/vault/vault-filter/components/organization-options.component.ts b/src/app/vault/vault-filter/components/organization-options.component.ts
new file mode 100644
index 00000000..b75ef54a
--- /dev/null
+++ b/src/app/vault/vault-filter/components/organization-options.component.ts
@@ -0,0 +1,180 @@
+import { Component, Input } from "@angular/core";
+
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { CryptoService } from "jslib-common/abstractions/crypto.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { PolicyService } from "jslib-common/abstractions/policy.service";
+import { SyncService } from "jslib-common/abstractions/sync.service";
+import { PolicyType } from "jslib-common/enums/policyType";
+import { Utils } from "jslib-common/misc/utils";
+import { Organization } from "jslib-common/models/domain/organization";
+import { Policy } from "jslib-common/models/domain/policy";
+import { OrganizationUserResetPasswordEnrollmentRequest } from "jslib-common/models/request/organizationUserResetPasswordEnrollmentRequest";
+
+@Component({
+  selector: "app-organization-options",
+  templateUrl: "organization-options.component.html",
+})
+export class OrganizationOptionsComponent {
+  actionPromise: Promise<any>;
+  policies: Policy[];
+  loaded = false;
+
+  @Input() organization: Organization;
+
+  constructor(
+    private platformUtilsService: PlatformUtilsService,
+    private i18nService: I18nService,
+    private apiService: ApiService,
+    private syncService: SyncService,
+    private cryptoService: CryptoService,
+    private policyService: PolicyService,
+    private logService: LogService
+  ) {}
+
+  async ngOnInit() {
+    await this.syncService.fullSync(true);
+    await this.load();
+  }
+
+  async load() {
+    this.policies = await this.policyService.getAll(PolicyType.ResetPassword);
+    this.loaded = true;
+  }
+
+  allowEnrollmentChanges(org: Organization): boolean {
+    if (org.usePolicies && org.useResetPassword && org.hasPublicAndPrivateKeys) {
+      const policy = this.policies.find((p) => p.organizationId === org.id);
+      if (policy != null && policy.enabled) {
+        return org.resetPasswordEnrolled && policy.data.autoEnrollEnabled ? false : true;
+      }
+    }
+
+    return false;
+  }
+
+  showEnrolledStatus(org: Organization): boolean {
+    return (
+      org.useResetPassword &&
+      org.resetPasswordEnrolled &&
+      this.policies.some((p) => p.organizationId === org.id && p.enabled)
+    );
+  }
+
+  async unlinkSso(org: Organization) {
+    const confirmed = await this.platformUtilsService.showDialog(
+      this.i18nService.t("unlinkSsoConfirmation"),
+      org.name,
+      this.i18nService.t("yes"),
+      this.i18nService.t("no"),
+      "warning"
+    );
+    if (!confirmed) {
+      return false;
+    }
+
+    try {
+      this.actionPromise = this.apiService.deleteSsoUser(org.id).then(() => {
+        return this.syncService.fullSync(true);
+      });
+      await this.actionPromise;
+      this.platformUtilsService.showToast("success", null, "Unlinked SSO");
+      await this.load();
+    } catch (e) {
+      this.logService.error(e);
+    }
+  }
+
+  async leave(org: Organization) {
+    const confirmed = await this.platformUtilsService.showDialog(
+      this.i18nService.t("leaveOrganizationConfirmation"),
+      org.name,
+      this.i18nService.t("yes"),
+      this.i18nService.t("no"),
+      "warning"
+    );
+    if (!confirmed) {
+      return false;
+    }
+
+    try {
+      this.actionPromise = this.apiService.postLeaveOrganization(org.id).then(() => {
+        return this.syncService.fullSync(true);
+      });
+      await this.actionPromise;
+      this.platformUtilsService.showToast("success", null, this.i18nService.t("leftOrganization"));
+      await this.load();
+    } catch (e) {
+      this.logService.error(e);
+    }
+  }
+
+  async toggleResetPasswordEnrollment(org: Organization) {
+    // Set variables
+    let keyString: string = null;
+    let toastStringRef = "withdrawPasswordResetSuccess";
+
+    // Enrolling
+    if (!org.resetPasswordEnrolled) {
+      // Alert user about enrollment
+      const confirmed = await this.platformUtilsService.showDialog(
+        this.i18nService.t("resetPasswordEnrollmentWarning"),
+        null,
+        this.i18nService.t("yes"),
+        this.i18nService.t("no"),
+        "warning"
+      );
+      if (!confirmed) {
+        return;
+      }
+
+      // Retrieve Public Key
+      this.actionPromise = this.apiService
+        .getOrganizationKeys(org.id)
+        .then(async (response) => {
+          if (response == null) {
+            throw new Error(this.i18nService.t("resetPasswordOrgKeysError"));
+          }
+
+          const publicKey = Utils.fromB64ToArray(response.publicKey);
+
+          // RSA Encrypt user's encKey.key with organization public key
+          const encKey = await this.cryptoService.getEncKey();
+          const encryptedKey = await this.cryptoService.rsaEncrypt(encKey.key, publicKey.buffer);
+          keyString = encryptedKey.encryptedString;
+          toastStringRef = "enrollPasswordResetSuccess";
+
+          // Create request and execute enrollment
+          const request = new OrganizationUserResetPasswordEnrollmentRequest();
+          request.resetPasswordKey = keyString;
+          return this.apiService.putOrganizationUserResetPasswordEnrollment(
+            org.id,
+            org.userId,
+            request
+          );
+        })
+        .then(() => {
+          return this.syncService.fullSync(true);
+        });
+    } else {
+      // Withdrawal
+      const request = new OrganizationUserResetPasswordEnrollmentRequest();
+      request.resetPasswordKey = keyString;
+      this.actionPromise = this.apiService
+        .putOrganizationUserResetPasswordEnrollment(org.id, org.userId, request)
+        .then(() => {
+          return this.syncService.fullSync(true);
+        });
+    }
+
+    try {
+      await this.actionPromise;
+      this.platformUtilsService.showToast("success", null, this.i18nService.t(toastStringRef));
+      await this.load();
+    } catch (e) {
+      this.logService.error(e);
+    }
+  }
+}
diff --git a/src/app/vault/vault-filter/components/status-filter.component.html b/src/app/vault/vault-filter/components/status-filter.component.html
new file mode 100644
index 00000000..f226d3f8
--- /dev/null
+++ b/src/app/vault/vault-filter/components/status-filter.component.html
@@ -0,0 +1,19 @@
+<ng-container *ngIf="show">
+  <ul ul class="bwi-ul card-ul">
+    <li [ngClass]="{ active: activeFilter.status === 'all' }">
+      <a href="#" appStopClick appBlurClick (click)="applyFilter('all')">
+        <i class="bwi bwi-li bwi-fw bwi-filter" aria-hidden="true"></i>&nbsp;{{ "allItems" | i18n }}
+      </a>
+    </li>
+    <li *ngIf="!hideFavorites" [ngClass]="{ active: activeFilter.status === 'favorites' }">
+      <a href="#" appStopClick appBlurClick (click)="applyFilter('favorites')">
+        <i class="bwi bwi-li bwi-fw bwi-star" aria-hidden="true"></i>&nbsp;{{ "favorites" | i18n }}
+      </a>
+    </li>
+    <li *ngIf="!hideTrash" [ngClass]="{ active: activeFilter.status === 'trash' }">
+      <a href="#" appStopClick appBlurClick (click)="applyFilter('trash')">
+        <i class="bwi bwi-li bwi-fw bwi-trash" aria-hidden="true"></i>&nbsp;{{ "trash" | i18n }}
+      </a>
+    </li>
+  </ul>
+</ng-container>
diff --git a/src/app/vault/vault-filter/components/status-filter.component.ts b/src/app/vault/vault-filter/components/status-filter.component.ts
new file mode 100644
index 00000000..c7c38aa6
--- /dev/null
+++ b/src/app/vault/vault-filter/components/status-filter.component.ts
@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+import { StatusFilterComponent as BaseStatusFilterComponent } from "jslib-angular/modules/vault-filter/components/status-filter.component";
+
+@Component({
+  selector: "app-status-filter",
+  templateUrl: "status-filter.component.html",
+})
+export class StatusFilterComponent extends BaseStatusFilterComponent {}
diff --git a/src/app/vault/vault-filter/components/type-filter.component.html b/src/app/vault/vault-filter/components/type-filter.component.html
new file mode 100644
index 00000000..b3199f45
--- /dev/null
+++ b/src/app/vault/vault-filter/components/type-filter.component.html
@@ -0,0 +1,38 @@
+<div class="collapsable-row">
+  <i
+    class="bwi bwi-fw"
+    title="{{ 'toggleCollapse' | i18n }}"
+    aria-hidden="true"
+    [ngClass]="{
+      'bwi-angle-right': isCollapsed,
+      'bwi-angle-down': !isCollapsed
+    }"
+    (click)="toggleCollapse()"
+    appStopProp
+  ></i>
+  <h3 class="filter-title">
+    {{ "types" | i18n }}
+  </h3>
+</div>
+<ul *ngIf="!isCollapsed" class="bwi-ul card-ul">
+  <li [ngClass]="{ active: activeFilter.cipherType === cipherTypeEnum.Login }">
+    <a href="#" appStopClick (click)="applyFilter(cipherTypeEnum.Login)">
+      <i class="bwi bwi-li bwi-fw bwi-globe"></i>{{ "typeLogin" | i18n }}
+    </a>
+  </li>
+  <li [ngClass]="{ active: activeFilter.cipherType === cipherTypeEnum.Card }">
+    <a href="#" appStopClick (click)="applyFilter(cipherTypeEnum.Card)">
+      <i class="bwi bwi-li bwi-fw bwi-credit-card"></i>{{ "typeCard" | i18n }}
+    </a>
+  </li>
+  <li [ngClass]="{ active: activeFilter.cipherType === cipherTypeEnum.Identity }">
+    <a href="#" appStopClick (click)="applyFilter(cipherTypeEnum.Identity)">
+      <i class="bwi bwi-li bwi-fw bwi-id-card"></i>{{ "typeIdentity" | i18n }}
+    </a>
+  </li>
+  <li [ngClass]="{ active: activeFilter.cipherType === cipherTypeEnum.SecureNote }">
+    <a href="#" appStopClick (click)="applyFilter(cipherTypeEnum.SecureNote)">
+      <i class="bwi bwi-li bwi-fw bwi-sticky-note"></i>{{ "typeSecureNote" | i18n }}
+    </a>
+  </li>
+</ul>
diff --git a/src/app/vault/vault-filter/components/type-filter.component.ts b/src/app/vault/vault-filter/components/type-filter.component.ts
new file mode 100644
index 00000000..794fc497
--- /dev/null
+++ b/src/app/vault/vault-filter/components/type-filter.component.ts
@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+import { TypeFilterComponent as BaseTypeFilterComponent } from "jslib-angular/modules/vault-filter/components/type-filter.component";
+
+@Component({
+  selector: "app-type-filter",
+  templateUrl: "type-filter.component.html",
+})
+export class TypeFilterComponent extends BaseTypeFilterComponent {}
diff --git a/src/app/vault/vault-filter/vault-filter.component.html b/src/app/vault/vault-filter/vault-filter.component.html
new file mode 100644
index 00000000..b2221baa
--- /dev/null
+++ b/src/app/vault/vault-filter/vault-filter.component.html
@@ -0,0 +1,73 @@
+<div class="card vault-filters">
+  <div class="container loading-spinner" *ngIf="!isLoaded">
+    <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
+  </div>
+  <div *ngIf="isLoaded">
+    <div class="card-header d-flex">
+      {{ "filters" | i18n }}
+      <a
+        class="ml-auto"
+        href="https://bitwarden.com/help/searching-vault/"
+        target="_blank"
+        rel="noopener"
+        appA11yTitle="{{ 'learnMore' | i18n }}"
+      >
+        <i class="bwi bwi-question-circle" aria-hidden="true"></i>
+      </a>
+    </div>
+    <div class="card-body">
+      <input
+        type="search"
+        placeholder="{{ (searchPlaceholder | i18n) || ('searchVault' | i18n) }}"
+        id="search"
+        class="form-control"
+        [(ngModel)]="searchText"
+        (input)="searchTextChanged()"
+        autocomplete="off"
+        appAutofocus
+      />
+      <app-organization-filter
+        *ngIf="showOrgFilter"
+        class="filter"
+        [hide]="hideOrganizations"
+        [activeFilter]="activeFilter"
+        [collapsedFilterNodes]="collapsedFilterNodes"
+        [organizations]="organizations"
+        [activePersonalOwnershipPolicy]="activePersonalOwnershipPolicy"
+        [activeSingleOrganizationPolicy]="activeSingleOrganizationPolicy"
+        (onNodeCollapseStateChange)="toggleFilterNodeCollapseState($event)"
+        (onFilterChange)="applyFilter($event)"
+      ></app-organization-filter>
+      <app-status-filter
+        [hideFavorites]="!showFavorites"
+        [hideTrash]="hideTrash"
+        [activeFilter]="activeFilter"
+        (onFilterChange)="applyFilter($event)"
+      ></app-status-filter>
+      <app-type-filter
+        [activeFilter]="activeFilter"
+        [collapsedFilterNodes]="collapsedFilterNodes"
+        (onNodeCollapseStateChange)="toggleFilterNodeCollapseState($event)"
+        (onFilterChange)="applyFilter($event)"
+      ></app-type-filter>
+      <app-folder-filter
+        [hide]="!showFolders"
+        [activeFilter]="activeFilter"
+        [collapsedFilterNodes]="collapsedFilterNodes"
+        [folderNodes]="folders"
+        (onNodeCollapseStateChange)="toggleFilterNodeCollapseState($event)"
+        (onFilterChange)="applyFilter($event)"
+        (onAddFolder)="addFolder()"
+        (onEditFolder)="editFolder($event)"
+      ></app-folder-filter>
+      <app-collection-filter
+        [hide]="hideCollections"
+        [activeFilter]="activeFilter"
+        [collapsedFilterNodes]="collapsedFilterNodes"
+        [collectionNodes]="collections"
+        (onNodeCollapseStateChange)="toggleFilterNodeCollapseState($event)"
+        (onFilterChange)="applyFilter($event)"
+      ></app-collection-filter>
+    </div>
+  </div>
+</div>
diff --git a/src/app/vault/vault-filter/vault-filter.component.ts b/src/app/vault/vault-filter/vault-filter.component.ts
new file mode 100644
index 00000000..6f38809b
--- /dev/null
+++ b/src/app/vault/vault-filter/vault-filter.component.ts
@@ -0,0 +1,27 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+
+import { VaultFilterComponent as BaseVaultFilterComponent } from "jslib-angular/modules/vault-filter/vault-filter.component";
+import { VaultFilterService } from "jslib-angular/modules/vault-filter/vault-filter.service";
+
+@Component({
+  selector: "app-vault-filter",
+  templateUrl: "vault-filter.component.html",
+})
+export class VaultFilterComponent extends BaseVaultFilterComponent {
+  @Input() showOrgFilter = true;
+  @Input() showFolders = true;
+  @Input() showFavorites = true;
+
+  @Output() onSearchTextChanged = new EventEmitter<string>();
+
+  searchPlaceholder: string;
+  searchText = "";
+
+  constructor(vaultFilterService: VaultFilterService) {
+    super(vaultFilterService);
+  }
+
+  searchTextChanged() {
+    this.onSearchTextChanged.emit(this.searchText);
+  }
+}
diff --git a/src/app/vault/vault-filter/vault-filter.module.ts b/src/app/vault/vault-filter/vault-filter.module.ts
new file mode 100644
index 00000000..533db0a3
--- /dev/null
+++ b/src/app/vault/vault-filter/vault-filter.module.ts
@@ -0,0 +1,50 @@
+import { NgModule } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { BrowserModule } from "@angular/platform-browser";
+import { RouterModule } from "@angular/router";
+
+import { JslibModule } from "jslib-angular/jslib.module";
+import { VaultFilterService } from "jslib-angular/modules/vault-filter/vault-filter.service";
+import { CipherService } from "jslib-common/abstractions/cipher.service";
+import { CollectionService } from "jslib-common/abstractions/collection.service";
+import { FolderService } from "jslib-common/abstractions/folder.service";
+import { OrganizationService } from "jslib-common/abstractions/organization.service";
+import { PolicyService } from "jslib-common/abstractions/policy.service";
+import { StateService } from "jslib-common/abstractions/state.service";
+
+import { CollectionFilterComponent } from "./components/collection-filter.component";
+import { FolderFilterComponent } from "./components/folder-filter.component";
+import { OrganizationFilterComponent } from "./components/organization-filter.component";
+import { OrganizationOptionsComponent } from "./components/organization-options.component";
+import { StatusFilterComponent } from "./components/status-filter.component";
+import { TypeFilterComponent } from "./components/type-filter.component";
+import { VaultFilterComponent } from "./vault-filter.component";
+
+@NgModule({
+  imports: [BrowserModule, JslibModule, RouterModule, FormsModule],
+  declarations: [
+    VaultFilterComponent,
+    CollectionFilterComponent,
+    FolderFilterComponent,
+    OrganizationFilterComponent,
+    OrganizationOptionsComponent,
+    StatusFilterComponent,
+    TypeFilterComponent,
+  ],
+  exports: [VaultFilterComponent],
+  providers: [
+    {
+      provide: VaultFilterService,
+      useClass: VaultFilterService,
+      deps: [
+        StateService,
+        OrganizationService,
+        FolderService,
+        CipherService,
+        CollectionService,
+        PolicyService,
+      ],
+    },
+  ],
+})
+export class VaultFilterModule {}
diff --git a/src/app/vault/vault-filter/vault-filter.service.ts b/src/app/vault/vault-filter/vault-filter.service.ts
new file mode 100644
index 00000000..01b9d50b
--- /dev/null
+++ b/src/app/vault/vault-filter/vault-filter.service.ts
@@ -0,0 +1,3 @@
+import { VaultFilterService as BaseVaultFilterService } from "jslib-angular/modules/vault-filter/vault-filter.service";
+
+export class VaultFilterService extends BaseVaultFilterService {}
diff --git a/src/app/vault/vault.component.html b/src/app/vault/vault.component.html
index c4e7a84c..16969d24 100644
--- a/src/app/vault/vault.component.html
+++ b/src/app/vault/vault.component.html
@@ -1,18 +1,20 @@
 <div class="container page-content">
   <div class="row">
     <div class="col-3">
-      <app-vault-groupings
-        (onAllClicked)="clearGroupingFilters()"
-        (onFavoritesClicked)="filterFavorites()"
-        (onCipherTypeClicked)="filterCipherType($event)"
-        (onFolderClicked)="filterFolder($event.id)"
-        (onAddFolder)="addFolder()"
-        (onEditFolder)="editFolder($event.id)"
-        (onCollectionClicked)="filterCollection($event.id)"
-        (onSearchTextChanged)="filterSearchText($event)"
-        (onTrashClicked)="filterDeleted()"
-      >
-      </app-vault-groupings>
+      <div class="groupings">
+        <div class="content">
+          <div class="inner-content">
+            <app-vault-filter
+              #vaultFilter
+              [activeFilter]="activeFilter"
+              (onFilterChange)="applyVaultFilter($event)"
+              (onAddFolder)="addFolder()"
+              (onEditFolder)="editFolder($event.id)"
+              (onSearchTextChanged)="filterSearchText($event)"
+            ></app-vault-filter>
+          </div>
+        </div>
+      </div>
     </div>
     <div [ngClass]="{ 'col-6': isShowingCards, 'col-9': !isShowingCards }">
       <div class="page-header d-flex">
diff --git a/src/app/vault/vault.component.ts b/src/app/vault/vault.component.ts
index ba44db85..7cbbf390 100644
--- a/src/app/vault/vault.component.ts
+++ b/src/app/vault/vault.component.ts
@@ -10,6 +10,7 @@ import {
 import { ActivatedRoute, Router } from "@angular/router";
 import { first } from "rxjs/operators";
 
+import { VaultFilter } from "jslib-angular/modules/vault-filter/models/vault-filter.model";
 import { ModalService } from "jslib-angular/services/modal.service";
 import { BroadcasterService } from "jslib-common/abstractions/broadcaster.service";
 import { CryptoService } from "jslib-common/abstractions/crypto.service";
@@ -30,8 +31,8 @@ import { AttachmentsComponent } from "./attachments.component";
 import { CiphersComponent } from "./ciphers.component";
 import { CollectionsComponent } from "./collections.component";
 import { FolderAddEditComponent } from "./folder-add-edit.component";
-import { GroupingsComponent } from "./groupings.component";
 import { ShareComponent } from "./share.component";
+import { VaultFilterComponent } from "./vault-filter/vault-filter.component";
 
 const BroadcasterSubscriptionId = "VaultComponent";
 
@@ -40,7 +41,7 @@ const BroadcasterSubscriptionId = "VaultComponent";
   templateUrl: "vault.component.html",
 })
 export class VaultComponent implements OnInit, OnDestroy {
-  @ViewChild(GroupingsComponent, { static: true }) groupingsComponent: GroupingsComponent;
+  @ViewChild("vaultFilter", { static: true }) filterComponent: VaultFilterComponent;
   @ViewChild(CiphersComponent, { static: true }) ciphersComponent: CiphersComponent;
   @ViewChild("attachments", { read: ViewContainerRef, static: true })
   attachmentsModalRef: ViewContainerRef;
@@ -58,12 +59,15 @@ export class VaultComponent implements OnInit, OnDestroy {
   type: CipherType = null;
   folderId: string = null;
   collectionId: string = null;
+  organizationId: string = null;
+  myVaultOnly = false;
   showVerifyEmail = false;
   showBrowserOutdated = false;
   showUpdateKey = false;
   showPremiumCallout = false;
   deleted = false;
   trashCleanupWarning: string = null;
+  activeFilter: VaultFilter = new VaultFilter();
 
   constructor(
     private syncService: SyncService,
@@ -93,40 +97,23 @@ export class VaultComponent implements OnInit, OnDestroy {
 
     this.route.queryParams.pipe(first()).subscribe(async (params) => {
       await this.syncService.fullSync(false);
-
       const canAccessPremium = await this.stateService.getCanAccessPremium();
       this.showPremiumCallout =
         !this.showVerifyEmail && !canAccessPremium && !this.platformUtilsService.isSelfHost();
 
-      await this.groupingsComponent.load();
+      this.filterComponent.reloadCollectionsAndFolders(this.activeFilter);
       this.showUpdateKey = !(await this.cryptoService.hasEncKey());
 
-      if (params == null) {
-        this.groupingsComponent.selectedAll = true;
-        await this.ciphersComponent.reload();
-      } else {
-        if (params.deleted) {
-          this.groupingsComponent.selectedTrash = true;
-          await this.filterDeleted();
-        } else if (params.favorites) {
-          this.groupingsComponent.selectedFavorites = true;
-          await this.filterFavorites();
-        } else if (params.type) {
-          const t = parseInt(params.type, null);
-          this.groupingsComponent.selectedType = t;
-          await this.filterCipherType(t);
-        } else if (params.folderId) {
-          this.groupingsComponent.selectedFolder = true;
-          this.groupingsComponent.selectedFolderId = params.folderId;
-          await this.filterFolder(params.folderId);
-        } else if (params.collectionId) {
-          this.groupingsComponent.selectedCollectionId = params.collectionId;
-          await this.filterCollection(params.collectionId);
-        } else {
-          this.groupingsComponent.selectedAll = true;
-          await this.ciphersComponent.reload();
+      if (params.cipherId) {
+        const cipherView = new CipherView();
+        cipherView.id = params.cipherId;
+        if (params.action === "clone") {
+          await this.cloneCipher(cipherView);
+        } else if (params.action === "edit") {
+          await this.editCipher(cipherView);
         }
       }
+      await this.ciphersComponent.reload();
 
       this.broadcasterService.subscribe(BroadcasterSubscriptionId, (message: any) => {
         this.ngZone.run(async () => {
@@ -134,7 +121,7 @@ export class VaultComponent implements OnInit, OnDestroy {
             case "syncCompleted":
               if (message.successfully) {
                 await Promise.all([
-                  this.groupingsComponent.load(),
+                  this.filterComponent.reloadCollectionsAndFolders(this.activeFilter),
                   this.ciphersComponent.load(this.ciphersComponent.filter),
                 ]);
                 this.changeDetectorRef.detectChanges();
@@ -159,60 +146,13 @@ export class VaultComponent implements OnInit, OnDestroy {
     this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
   }
 
-  async clearGroupingFilters() {
-    this.ciphersComponent.showAddNew = true;
-    this.groupingsComponent.searchPlaceholder = this.i18nService.t("searchVault");
-    await this.ciphersComponent.reload();
-    this.clearFilters();
-    this.go();
-  }
-
-  async filterFavorites() {
-    this.ciphersComponent.showAddNew = true;
-    this.groupingsComponent.searchPlaceholder = this.i18nService.t("searchFavorites");
-    await this.ciphersComponent.reload((c) => c.favorite);
-    this.clearFilters();
-    this.favorites = true;
-    this.go();
-  }
-
-  async filterDeleted() {
-    this.ciphersComponent.showAddNew = false;
-    this.ciphersComponent.deleted = true;
-    this.groupingsComponent.searchPlaceholder = this.i18nService.t("searchTrash");
-    await this.ciphersComponent.reload(null, true);
-    this.clearFilters();
-    this.deleted = true;
-    this.go();
-  }
-
-  async filterCipherType(type: CipherType) {
-    this.ciphersComponent.showAddNew = true;
-    this.groupingsComponent.searchPlaceholder = this.i18nService.t("searchType");
-    await this.ciphersComponent.reload((c) => c.type === type);
-    this.clearFilters();
-    this.type = type;
-    this.go();
-  }
-
-  async filterFolder(folderId: string) {
-    this.ciphersComponent.showAddNew = true;
-    folderId = folderId === "none" ? null : folderId;
-    this.groupingsComponent.searchPlaceholder = this.i18nService.t("searchFolder");
-    await this.ciphersComponent.reload((c) => c.folderId === folderId);
-    this.clearFilters();
-    this.folderId = folderId == null ? "none" : folderId;
-    this.go();
-  }
-
-  async filterCollection(collectionId: string) {
-    this.ciphersComponent.showAddNew = true;
-    this.groupingsComponent.searchPlaceholder = this.i18nService.t("searchCollection");
-    await this.ciphersComponent.reload(
-      (c) => c.collectionIds != null && c.collectionIds.indexOf(collectionId) > -1
+  async applyVaultFilter(vaultFilter: VaultFilter) {
+    this.ciphersComponent.showAddNew = vaultFilter.status !== "trash";
+    this.activeFilter = vaultFilter;
+    await this.ciphersComponent.reload(this.buildFilter(), vaultFilter.status === "trash");
+    this.filterComponent.searchPlaceholder = this.calculateSearchBarLocalizationString(
+      this.activeFilter
     );
-    this.clearFilters();
-    this.collectionId = collectionId;
     this.go();
   }
 
@@ -221,6 +161,40 @@ export class VaultComponent implements OnInit, OnDestroy {
     this.ciphersComponent.search(200);
   }
 
+  private buildFilter(): (cipher: CipherView) => boolean {
+    return (cipher) => {
+      let cipherPassesFilter = true;
+      if (this.activeFilter.status === "favorites" && cipherPassesFilter) {
+        cipherPassesFilter = cipher.favorite;
+      }
+      if (this.activeFilter.status === "trash" && cipherPassesFilter) {
+        cipherPassesFilter = cipher.isDeleted;
+      }
+      if (this.activeFilter.cipherType != null && cipherPassesFilter) {
+        cipherPassesFilter = cipher.type === this.activeFilter.cipherType;
+      }
+      if (
+        this.activeFilter.selectedFolderId != null &&
+        this.activeFilter.selectedFolderId != "none" &&
+        cipherPassesFilter
+      ) {
+        cipherPassesFilter = cipher.folderId === this.activeFilter.selectedFolderId;
+      }
+      if (this.activeFilter.selectedCollectionId != null && cipherPassesFilter) {
+        cipherPassesFilter =
+          cipher.collectionIds != null &&
+          cipher.collectionIds.indexOf(this.activeFilter.selectedCollectionId) > -1;
+      }
+      if (this.activeFilter.selectedOrganizationId != null && cipherPassesFilter) {
+        cipherPassesFilter = cipher.organizationId === this.activeFilter.selectedOrganizationId;
+      }
+      if (this.activeFilter.myVaultOnly && cipherPassesFilter) {
+        cipherPassesFilter = cipher.organizationId === null;
+      }
+      return cipherPassesFilter;
+    };
+  }
+
   async editCipherAttachments(cipher: CipherView) {
     const canAccessPremium = await this.stateService.getCanAccessPremium();
     if (cipher.organizationId == null && !canAccessPremium) {
@@ -292,7 +266,7 @@ export class VaultComponent implements OnInit, OnDestroy {
         comp.folderId = null;
         comp.onSavedFolder.subscribe(async () => {
           modal.close();
-          await this.groupingsComponent.loadFolders();
+          await this.filterComponent.reloadCollectionsAndFolders(this.activeFilter);
         });
       }
     );
@@ -306,13 +280,11 @@ export class VaultComponent implements OnInit, OnDestroy {
         comp.folderId = folderId;
         comp.onSavedFolder.subscribe(async () => {
           modal.close();
-          await this.groupingsComponent.loadFolders();
+          await this.filterComponent.reloadCollectionsAndFolders(this.activeFilter);
         });
         comp.onDeletedFolder.subscribe(async () => {
           modal.close();
-          await this.groupingsComponent.loadFolders();
-          await this.filterFolder("none");
-          this.groupingsComponent.selectedFolderId = null;
+          await this.filterComponent.reloadCollectionsAndFolders(this.activeFilter);
         });
       }
     );
@@ -322,15 +294,21 @@ export class VaultComponent implements OnInit, OnDestroy {
     const component = await this.editCipher(null);
     component.type = this.type;
     component.folderId = this.folderId === "none" ? null : this.folderId;
-    if (this.collectionId != null) {
-      const collection = this.groupingsComponent.collections.filter(
-        (c) => c.id === this.collectionId
+    if (this.activeFilter.selectedCollectionId != null) {
+      const collection = this.filterComponent.collections.fullList.filter(
+        (c) => c.id === this.activeFilter.selectedCollectionId
       );
       if (collection.length > 0) {
         component.organizationId = collection[0].organizationId;
-        component.collectionIds = [this.collectionId];
+        component.collectionIds = [this.activeFilter.selectedCollectionId];
       }
     }
+    if (this.activeFilter.selectedFolderId && this.activeFilter.selectedFolder) {
+      component.folderId = this.activeFilter.selectedFolderId;
+    }
+    if (this.activeFilter.selectedOrganizationId) {
+      component.organizationId = this.activeFilter.selectedOrganizationId;
+    }
   }
 
   async editCipher(cipher: CipherView) {
@@ -366,12 +344,30 @@ export class VaultComponent implements OnInit, OnDestroy {
     await this.modalService.openViewRef(UpdateKeyComponent, this.updateKeyModalRef);
   }
 
-  private clearFilters() {
-    this.folderId = null;
-    this.collectionId = null;
-    this.favorites = false;
-    this.type = null;
-    this.deleted = false;
+  private calculateSearchBarLocalizationString(vaultFilter: VaultFilter): string {
+    if (vaultFilter.status === "favorites") {
+      return "searchFavorites";
+    }
+    if (vaultFilter.status === "trash") {
+      return "searchTrash";
+    }
+    if (vaultFilter.cipherType != null) {
+      return "searchType";
+    }
+    if (vaultFilter.selectedFolderId != null && vaultFilter.selectedFolderId != "none") {
+      return "searchFolder";
+    }
+    if (vaultFilter.selectedCollectionId != null) {
+      return "searchCollection";
+    }
+    if (vaultFilter.selectedOrganizationId != null) {
+      return "searchOrganization";
+    }
+    if (vaultFilter.myVaultOnly) {
+      return "searchMyVault";
+    }
+
+    return "searchVault";
   }
 
   private go(queryParams: any = null) {
diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json
index a00fa801..76d47fa9 100644
--- a/src/locales/en/messages.json
+++ b/src/locales/en/messages.json
@@ -424,6 +424,9 @@
   "myVault": {
     "message": "My Vault"
   },
+  "allVaults": {
+    "message": "All Vaults"
+  },
   "vault": {
     "message": "Vault"
   },
diff --git a/src/scss/cards.scss b/src/scss/cards.scss
index 146d0403..b57687fb 100644
--- a/src/scss/cards.scss
+++ b/src/scss/cards.scss
@@ -71,6 +71,10 @@
       margin-left: 0.85em;
     }
   }
+
+  &.no-margin {
+    margin-left: 0;
+  }
 }
 
 .card-org-plans {
diff --git a/src/scss/pages.scss b/src/scss/pages.scss
index 7888beaa..798aeb63 100644
--- a/src/scss/pages.scss
+++ b/src/scss/pages.scss
@@ -260,3 +260,45 @@ app-sponsored-families {
     }
   }
 }
+
+.collapsable-row {
+  display: flex;
+  padding-top: 15px;
+  i {
+    margin-top: 3px;
+  }
+  .filter-title {
+    padding-left: 5px;
+  }
+  &.active {
+    @include themify($themes) {
+      color: themed("primary");
+    }
+  }
+}
+
+.vault-filter-option {
+  padding-bottom: 3px;
+  &.active {
+    @include themify($themes) {
+      color: themed("primary");
+      font-weight: bold;
+    }
+  }
+  button.org-options {
+    background: none;
+    border: none;
+  }
+}
+
+.org-filter-heading {
+  @include themify($themes) {
+    color: themed("textColor");
+  }
+  &.active {
+    @include themify($themes) {
+      color: themed("primary");
+      font-weight: bold;
+    }
+  }
+}