[Feature] End User Vault Refresh (#2545)

* Initial org filter work * update jslib * Move filter to below cipher length check * don't show vault filter in personal or org folder * Use family icon for families org * jslib and auth guard updates * lint fixes * rename GroupingsComponent to VaultFilterComponent * fix no folder showing all items * Add checks for PersonalOwnership policy * update css class names * lint fixes * cleanup * Some final cleanup * import order lint fix * remove unused import * Use smaller icon for chevron * Update src/popup/vault/organization-filter.component.ts Co-authored-by: Addison Beck <addisonbeck1@gmail.com> * Update src/popup/vault/organization-filter.component.ts Co-authored-by: Addison Beck <addisonbeck1@gmail.com> * fix lint error * remove extra localizations * rename orgFilter -> vaultSelect * Rename orgFilterService to VaultSelectService * lint fixes * combine vault select service with vault filter service * Use base vault filter service methods * Use VaultFilter model and other small fixes * lint fixes * Final restructuring pass * Update jslib and remove extra function * Remove extra imports * remove space * Remove vaultFilterService from background services * Update jslib to latest on feature branch * merge fix * update jslib * [feat] Implement EUVR for desktop Should contain only https://github.com/bitwarden/desktop/pull/1487, with merge resolutions and style fixes * [fix] Delete unused GroupingsComponentTemplate * [dep] Update jslib Co-authored-by: Addison Beck <addisonbeck1@gmail.com>
2025-12-28 14:13:22 +00:00 · 2022-05-09 08:19:18 -04:00
parent fd434dfed8
commit 8c12ba20cb
51 changed files with 1654 additions and 910 deletions
--- a/apps/browser/jslib
+++ b/apps/browser/jslib
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -55,6 +55,9 @@
  "myVault": {
    "message": "My Vault"
  },
+  "allVaults": {
+    "message": "All Vaults"
+  },
  "tools": {
    "message": "Tools"
  },
--- a/apps/browser/src/background/main.background.ts
+++ b/apps/browser/src/background/main.background.ts
@@ -85,6 +85,7 @@ import BrowserPlatformUtilsService from "../services/browserPlatformUtils.servic
 import BrowserStorageService from "../services/browserStorage.service";
 import I18nService from "../services/i18n.service";
 import { StateService } from "../services/state.service";
+import { VaultFilterService } from "../services/vaultFilter.service";
 import VaultTimeoutService from "../services/vaultTimeout.service";

 import CommandsBackground from "./commands.background";
@@ -138,6 +139,7 @@ export default class MainBackground {
  keyConnectorService: KeyConnectorServiceAbstraction;
  userVerificationService: UserVerificationServiceAbstraction;
  twoFactorService: TwoFactorServiceAbstraction;
+  vaultFilterService: VaultFilterService;
  usernameGenerationService: UsernameGenerationServiceAbstraction;

  onUpdatedRan: boolean;
@@ -267,6 +269,14 @@ export default class MainBackground {
      this.organizationService,
      this.cryptoFunctionService
    );
+    this.vaultFilterService = new VaultFilterService(
+      this.stateService,
+      this.organizationService,
+      this.folderService,
+      this.cipherService,
+      this.collectionService,
+      this.policyService
+    );

    this.twoFactorService = new TwoFactorService(this.i18nService, this.platformUtilsService);

@@ -589,6 +599,7 @@ export default class MainBackground {
      this.passwordGenerationService.clear(userId),
      this.vaultTimeoutService.clear(userId),
      this.keyConnectorService.clear(),
+      this.vaultFilterService.clear(),
    ]);

    await this.stateService.clean({ userId: userId });
--- a/apps/browser/src/popup/app-routing.module.ts
+++ b/apps/browser/src/popup/app-routing.module.ts
@@ -1,9 +1,9 @@
 import { Injectable, NgModule } from "@angular/core";
 import { ActivatedRouteSnapshot, RouteReuseStrategy, RouterModule, Routes } from "@angular/router";

-import { AuthGuardService } from "jslib-angular/services/auth-guard.service";
-import { LockGuardService } from "jslib-angular/services/lock-guard.service";
-import { UnauthGuardService } from "jslib-angular/services/unauth-guard.service";
+import { AuthGuard } from "jslib-angular/guards/auth.guard";
+import { LockGuard } from "jslib-angular/guards/lock.guard";
+import { UnauthGuard } from "jslib-angular/guards/unauth.guard";

 import { EnvironmentComponent } from "./accounts/environment.component";
 import { HintComponent } from "./accounts/hint.component";
@@ -37,9 +37,9 @@ import { AttachmentsComponent } from "./vault/attachments.component";
 import { CiphersComponent } from "./vault/ciphers.component";
 import { CollectionsComponent } from "./vault/collections.component";
 import { CurrentTabComponent } from "./vault/current-tab.component";
-import { GroupingsComponent } from "./vault/groupings.component";
 import { PasswordHistoryComponent } from "./vault/password-history.component";
 import { ShareComponent } from "./vault/share.component";
+import { VaultFilterComponent } from "./vault/vault-filter.component";
 import { ViewComponent } from "./vault/view.component";

 const routes: Routes = [
@@ -56,37 +56,37 @@ const routes: Routes = [
  {
    path: "home",
    component: HomeComponent,
-    canActivate: [UnauthGuardService],
+    canActivate: [UnauthGuard],
    data: { state: "home" },
  },
  {
    path: "login",
    component: LoginComponent,
-    canActivate: [UnauthGuardService],
+    canActivate: [UnauthGuard],
    data: { state: "login" },
  },
  {
    path: "lock",
    component: LockComponent,
-    canActivate: [LockGuardService],
+    canActivate: [LockGuard],
    data: { state: "lock" },
  },
  {
    path: "2fa",
    component: TwoFactorComponent,
-    canActivate: [UnauthGuardService],
+    canActivate: [UnauthGuard],
    data: { state: "2fa" },
  },
  {
    path: "2fa-options",
    component: TwoFactorOptionsComponent,
-    canActivate: [UnauthGuardService],
+    canActivate: [UnauthGuard],
    data: { state: "2fa-options" },
  },
  {
    path: "sso",
    component: SsoComponent,
-    canActivate: [UnauthGuardService],
+    canActivate: [UnauthGuard],
    data: { state: "sso" },
  },
  {
@@ -97,165 +97,165 @@ const routes: Routes = [
  {
    path: "remove-password",
    component: RemovePasswordComponent,
-    canActivate: [AuthGuardService],
+    canActivate: [AuthGuard],
    data: { state: "remove-password" },
  },
  {
    path: "register",
    component: RegisterComponent,
-    canActivate: [UnauthGuardService],
+    canActivate: [UnauthGuard],
    data: { state: "register" },
  },
  {
    path: "hint",
    component: HintComponent,
-    canActivate: [UnauthGuardService],
+    canActivate: [UnauthGuard],
    data: { state: "hint" },
  },
  {
    path: "environment",
    component: EnvironmentComponent,
-    canActivate: [UnauthGuardService],
+    canActivate: [UnauthGuard],
    data: { state: "environment" },
  },
  {
    path: "ciphers",
    component: CiphersComponent,
-    canActivate: [AuthGuardService],
+    canActivate: [AuthGuard],
    data: { state: "ciphers" },
  },
  {
    path: "view-cipher",
    component: ViewComponent,
-    canActivate: [AuthGuardService],
+    canActivate: [AuthGuard],
    data: { state: "view-cipher" },
  },
  {
    path: "cipher-password-history",
    component: PasswordHistoryComponent,
-    canActivate: [AuthGuardService],
+    canActivate: [AuthGuard],
    data: { state: "cipher-password-history" },
  },
  {
    path: "add-cipher",
    component: AddEditComponent,
-    canActivate: [AuthGuardService, DebounceNavigationService],
+    canActivate: [AuthGuard, DebounceNavigationService],
    data: { state: "add-cipher" },
    runGuardsAndResolvers: "always",
  },
  {
    path: "edit-cipher",
    component: AddEditComponent,
-    canActivate: [AuthGuardService, DebounceNavigationService],
+    canActivate: [AuthGuard, DebounceNavigationService],
    data: { state: "edit-cipher" },
    runGuardsAndResolvers: "always",
  },
  {
    path: "share-cipher",
    component: ShareComponent,
-    canActivate: [AuthGuardService],
+    canActivate: [AuthGuard],
    data: { state: "share-cipher" },
  },
  {
    path: "collections",
    component: CollectionsComponent,
-    canActivate: [AuthGuardService],
+    canActivate: [AuthGuard],
    data: { state: "collections" },
  },
  {
    path: "attachments",
    component: AttachmentsComponent,
-    canActivate: [AuthGuardService],
+    canActivate: [AuthGuard],
    data: { state: "attachments" },
  },
  {
    path: "generator",
    component: GeneratorComponent,
-    canActivate: [AuthGuardService],
+    canActivate: [AuthGuard],
    data: { state: "generator" },
  },
  {
    path: "generator-history",
    component: PasswordGeneratorHistoryComponent,
-    canActivate: [AuthGuardService],
+    canActivate: [AuthGuard],
    data: { state: "generator-history" },
  },
  {
    path: "export",
    component: ExportComponent,
-    canActivate: [AuthGuardService],
+    canActivate: [AuthGuard],
    data: { state: "export" },
  },
  {
    path: "folders",
    component: FoldersComponent,
-    canActivate: [AuthGuardService],
+    canActivate: [AuthGuard],
    data: { state: "folders" },
  },
  {
    path: "add-folder",
    component: FolderAddEditComponent,
-    canActivate: [AuthGuardService],
+    canActivate: [AuthGuard],
    data: { state: "add-folder" },
  },
  {
    path: "edit-folder",
    component: FolderAddEditComponent,
-    canActivate: [AuthGuardService],
+    canActivate: [AuthGuard],
    data: { state: "edit-folder" },
  },
  {
    path: "sync",
    component: SyncComponent,
-    canActivate: [AuthGuardService],
+    canActivate: [AuthGuard],
    data: { state: "sync" },
  },
  {
    path: "excluded-domains",
    component: ExcludedDomainsComponent,
-    canActivate: [AuthGuardService],
+    canActivate: [AuthGuard],
    data: { state: "excluded-domains" },
  },
  {
    path: "premium",
    component: PremiumComponent,
-    canActivate: [AuthGuardService],
+    canActivate: [AuthGuard],
    data: { state: "premium" },
  },
  {
    path: "options",
    component: OptionsComponent,
-    canActivate: [AuthGuardService],
+    canActivate: [AuthGuard],
    data: { state: "options" },
  },
  {
    path: "clone-cipher",
    component: AddEditComponent,
-    canActivate: [AuthGuardService],
+    canActivate: [AuthGuard],
    data: { state: "clone-cipher" },
  },
  {
    path: "send-type",
    component: SendTypeComponent,
-    canActivate: [AuthGuardService],
+    canActivate: [AuthGuard],
    data: { state: "send-type" },
  },
  {
    path: "add-send",
    component: SendAddEditComponent,
-    canActivate: [AuthGuardService],
+    canActivate: [AuthGuard],
    data: { state: "add-send" },
  },
  {
    path: "edit-send",
    component: SendAddEditComponent,
-    canActivate: [AuthGuardService],
+    canActivate: [AuthGuard],
    data: { state: "edit-send" },
  },
  {
    path: "update-temp-password",
    component: UpdateTempPasswordComponent,
-    canActivate: [AuthGuardService],
+    canActivate: [AuthGuard],
    data: { state: "update-temp-password" },
  },
  {
@@ -271,32 +271,32 @@ const routes: Routes = [
      {
        path: "current",
        component: CurrentTabComponent,
-        canActivate: [AuthGuardService],
+        canActivate: [AuthGuard],
        data: { state: "tabs_current" },
        runGuardsAndResolvers: "always",
      },
      {
        path: "vault",
-        component: GroupingsComponent,
-        canActivate: [AuthGuardService],
+        component: VaultFilterComponent,
+        canActivate: [AuthGuard],
        data: { state: "tabs_vault" },
      },
      {
        path: "generator",
        component: GeneratorComponent,
-        canActivate: [AuthGuardService],
+        canActivate: [AuthGuard],
        data: { state: "tabs_generator" },
      },
      {
        path: "settings",
        component: SettingsComponent,
-        canActivate: [AuthGuardService],
+        canActivate: [AuthGuard],
        data: { state: "tabs_settings" },
      },
      {
        path: "send",
        component: SendGroupingsComponent,
-        canActivate: [AuthGuardService],
+        canActivate: [AuthGuard],
        data: { state: "tabs_send" },
      },
    ],
--- a/apps/browser/src/popup/app.module.ts
+++ b/apps/browser/src/popup/app.module.ts
@@ -1,5 +1,6 @@
 import { A11yModule } from "@angular/cdk/a11y";
 import { DragDropModule } from "@angular/cdk/drag-drop";
+import { OverlayModule } from "@angular/cdk/overlay";
 import { ScrollingModule } from "@angular/cdk/scrolling";
 import { CurrencyPipe, DatePipe, registerLocaleData } from "@angular/common";
 import localeAz from "@angular/common/locales/az";
@@ -106,9 +107,10 @@ import { AttachmentsComponent } from "./vault/attachments.component";
 import { CiphersComponent } from "./vault/ciphers.component";
 import { CollectionsComponent } from "./vault/collections.component";
 import { CurrentTabComponent } from "./vault/current-tab.component";
-import { GroupingsComponent } from "./vault/groupings.component";
 import { PasswordHistoryComponent } from "./vault/password-history.component";
 import { ShareComponent } from "./vault/share.component";
+import { VaultFilterComponent } from "./vault/vault-filter.component";
+import { VaultSelectComponent } from "./vault/vault-select.component";
 import { ViewCustomFieldsComponent } from "./vault/view-custom-fields.component";
 import { ViewComponent } from "./vault/view.component";

@@ -179,6 +181,7 @@ registerLocaleData(localeZhTw, "zh-TW");
    DragDropModule,
    FormsModule,
    JslibModule,
+    OverlayModule,
    ReactiveFormsModule,
    ScrollingModule,
    ServicesModule,
@@ -198,7 +201,7 @@ registerLocaleData(localeZhTw, "zh-TW");
    ExportComponent,
    FolderAddEditComponent,
    FoldersComponent,
-    GroupingsComponent,
+    VaultFilterComponent,
    HintComponent,
    HomeComponent,
    LockComponent,
@@ -232,6 +235,7 @@ registerLocaleData(localeZhTw, "zh-TW");
    ViewComponent,
    ViewCustomFieldsComponent,
    RemovePasswordComponent,
+    VaultSelectComponent,
  ],
  entryComponents: [],
  providers: [CurrencyPipe, DatePipe],
--- a/apps/browser/src/popup/scss/base.scss
+++ b/apps/browser/src/popup/scss/base.scss
@@ -465,3 +465,59 @@ main {
 .cdk-virtual-scroll-content-wrapper {
  width: 100%;
 }
+
+.org-filter-content {
+  padding-bottom: 5px;
+  padding-left: 7px;
+  .org-filter {
+    @include themify($themes) {
+      background-color: themed("backgroundColor");
+    }
+    border: 1px solid;
+    padding: 7px;
+    border-radius: $border-radius;
+  }
+}
+.vault-select {
+  @include themify($themes) {
+    background-color: themed("boxBackgroundColor");
+  }
+  margin-right: 5px;
+  margin-top: 1px;
+  width: 160px;
+  @include themify($themes) {
+    border: 1px solid themed("borderColor");
+  }
+  border-radius: $border-radius;
+  button {
+    border: none;
+    background: transparent;
+    width: 100%;
+    padding: 5px 10px;
+    text-align: start;
+    @include themify($themes) {
+      color: themed("textColor");
+    }
+
+    a {
+      @include themify($themes) {
+        color: themed("textColor");
+      }
+    }
+
+    &:hover {
+      @include themify($themes) {
+        background-color: themed("boxBackgroundHoverColor");
+      }
+    }
+  }
+  .border {
+    @include themify($themes) {
+      background: themed("borderColor");
+    }
+    left: 10px;
+    width: calc(100% - 20px);
+    height: 1px;
+    position: relative;
+  }
+}
--- a/apps/browser/src/popup/scss/popup.scss
+++ b/apps/browser/src/popup/scss/popup.scss
@@ -11,3 +11,4 @@
@import "plugins.scss";
@import "environment.scss";
@import "pages.scss";
+@import "~@angular/cdk/overlay-prebuilt.css";
--- a/apps/browser/src/popup/services/lock-guard.service.ts
+++ b/apps/browser/src/popup/services/lock-guard.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from "@angular/core";

-import { LockGuardService as BaseLockGuardService } from "jslib-angular/services/lock-guard.service";
+import { LockGuard as BaseLockGuardService } from "jslib-angular/guards/lock.guard";

@Injectable()
 export class LockGuardService extends BaseLockGuardService {
--- a/apps/browser/src/popup/services/services.module.ts
+++ b/apps/browser/src/popup/services/services.module.ts
@@ -1,8 +1,8 @@
 import { APP_INITIALIZER, LOCALE_ID, NgModule } from "@angular/core";

+import { LockGuard as BaseLockGuardService } from "jslib-angular/guards/lock.guard";
+import { UnauthGuard as BaseUnauthGuardService } from "jslib-angular/guards/unauth.guard";
 import { JslibServicesModule, SECURE_STORAGE } from "jslib-angular/services/jslib-services.module";
-import { LockGuardService as BaseLockGuardService } from "jslib-angular/services/lock-guard.service";
-import { UnauthGuardService as BaseUnauthGuardService } from "jslib-angular/services/unauth-guard.service";
 import { ApiService } from "jslib-common/abstractions/api.service";
 import { AppIdService } from "jslib-common/abstractions/appId.service";
 import { AuditService } from "jslib-common/abstractions/audit.service";
@@ -49,6 +49,7 @@ import { AutofillService } from "../../services/abstractions/autofill.service";
 import { StateService as StateServiceAbstraction } from "../../services/abstractions/state.service";
 import BrowserMessagingService from "../../services/browserMessaging.service";
 import BrowserMessagingPrivateModePopupService from "../../services/browserMessagingPrivateModePopup.service";
+import { VaultFilterService } from "../../services/vaultFilter.service";

 import { DebounceNavigationService } from "./debounceNavigationService";
 import { InitService } from "./init.service";
@@ -224,6 +225,20 @@ function getBgService<T>(service: keyof MainBackground) {
      useFactory: getBgService<OrganizationService>("organizationService"),
      deps: [],
    },
+    {
+      provide: VaultFilterService,
+      useFactory: () => {
+        return new VaultFilterService(
+          getBgService<StateServiceAbstraction>("stateService")(),
+          getBgService<OrganizationService>("organizationService")(),
+          getBgService<FolderService>("folderService")(),
+          getBgService<CipherService>("cipherService")(),
+          getBgService<CollectionService>("collectionService")(),
+          getBgService<PolicyService>("policyService")()
+        );
+      },
+      deps: [],
+    },
    {
      provide: ProviderService,
      useFactory: getBgService<ProviderService>("providerService"),
--- a/apps/browser/src/popup/services/unauth-guard.service.ts
+++ b/apps/browser/src/popup/services/unauth-guard.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from "@angular/core";

-import { UnauthGuardService as BaseUnauthGuardService } from "jslib-angular/services/unauth-guard.service";
+import { UnauthGuard as BaseUnauthGuardService } from "jslib-angular/guards/unauth.guard";

@Injectable()
 export class UnauthGuardService extends BaseUnauthGuardService {
--- a/apps/browser/src/popup/vault/ciphers.component.html
+++ b/apps/browser/src/popup/vault/ciphers.component.html
@@ -26,6 +26,10 @@
 </header>
 <main tabindex="-1" [ngClass]="{ 'stacked-boxes': showGroupings() }">
  <ng-container *ngIf="showGroupings()">
+    <app-vault-select
+      *ngIf="showVaultFilter"
+      (onVaultSelectionChanged)="changeVaultSelection()"
+    ></app-vault-select>
    <div class="box list" *ngIf="nestedFolders && nestedFolders.length">
      <h2 class="box-header">
        {{ "folders" | i18n }}
@@ -89,7 +93,10 @@
      maxBufferPx="600"
      *ngIf="ciphers.length"
      #virtualScrollViewport
-    >
+      ><app-vault-select
+        *ngIf="showVaultFilter && !showGroupings()"
+        (onVaultSelectionChanged)="changeVaultSelection()"
+      ></app-vault-select>
      <div class="box list only-list">
        <h2 class="box-header">
          {{ groupingTitle }}
--- a/apps/browser/src/popup/vault/ciphers.component.ts
+++ b/apps/browser/src/popup/vault/ciphers.component.ts
@@ -4,11 +4,13 @@ import { ActivatedRoute, Router } from "@angular/router";
 import { first } from "rxjs/operators";

 import { CiphersComponent as BaseCiphersComponent } from "jslib-angular/components/ciphers.component";
+import { VaultFilter } from "jslib-angular/modules/vault-filter/models/vault-filter.model";
 import { BroadcasterService } from "jslib-common/abstractions/broadcaster.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 { I18nService } from "jslib-common/abstractions/i18n.service";
+import { OrganizationService } from "jslib-common/abstractions/organization.service";
 import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 import { SearchService } from "jslib-common/abstractions/search.service";
 import { CipherType } from "jslib-common/enums/cipherType";
@@ -21,6 +23,7 @@ import { BrowserComponentState } from "src/models/browserComponentState";

 import { BrowserApi } from "../../browser/browserApi";
 import { StateService } from "../../services/abstractions/state.service";
+import { VaultFilterService } from "../../services/vaultFilter.service";
 import { PopupUtilsService } from "../services/popup-utils.service";

 const ComponentId = "CiphersComponent";
@@ -38,6 +41,11 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
  nestedFolders: TreeNode<FolderView>[];
  nestedCollections: TreeNode<CollectionView>[];
  searchTypeSearch = false;
+  showOrganizations = false;
+  vaultFilter: VaultFilter;
+  deleted = true;
+  noneFolder = false;
+  showVaultFilter = false;

  private selectedTimeout: number;
  private preventSelected = false;
@@ -46,6 +54,7 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On

  constructor(
    searchService: SearchService,
+    private organizationService: OrganizationService,
    private route: ActivatedRoute,
    private router: Router,
    private location: Location,
@@ -58,7 +67,8 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
    private folderService: FolderService,
    private collectionService: CollectionService,
    private platformUtilsService: PlatformUtilsService,
-    private cipherService: CipherService
+    private cipherService: CipherService,
+    private vaultFilterService: VaultFilterService
  ) {
    super(searchService);
    this.applySavedState =
@@ -68,6 +78,8 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On

  async ngOnInit() {
    this.searchTypeSearch = !this.platformUtilsService.isSafari();
+    this.showOrganizations = await this.organizationService.hasOrganizations();
+    this.vaultFilter = this.vaultFilterService.getVaultFilter();
    this.route.queryParams.pipe(first()).subscribe(async (params) => {
      if (this.applySavedState) {
        this.state = await this.stateService.getBrowserCipherComponentState();
@@ -77,10 +89,12 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
      }

      if (params.deleted) {
+        this.showVaultFilter = true;
        this.groupingTitle = this.i18nService.t("trash");
        this.searchPlaceholder = this.i18nService.t("searchTrash");
-        await this.load(null, true);
+        await this.load(this.buildFilter(), true);
      } else if (params.type) {
+        this.showVaultFilter = true;
        this.searchPlaceholder = this.i18nService.t("searchType");
        this.type = parseInt(params.type, null);
        switch (this.type) {
@@ -99,11 +113,13 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
          default:
            break;
        }
-        await this.load((c) => c.type === this.type);
+        await this.load(this.buildFilter());
      } else if (params.folderId) {
+        this.showVaultFilter = false;
        this.folderId = params.folderId === "none" ? null : params.folderId;
        this.searchPlaceholder = this.i18nService.t("searchFolder");
        if (this.folderId != null) {
+          this.showOrganizations = false;
          const folderNode = await this.folderService.getNested(this.folderId);
          if (folderNode != null && folderNode.node != null) {
            this.groupingTitle = folderNode.node.name;
@@ -113,10 +129,12 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
                : null;
          }
        } else {
+          this.noneFolder = true;
          this.groupingTitle = this.i18nService.t("noneFolder");
        }
-        await this.load((c) => c.folderId === this.folderId);
+        await this.load(this.buildFilter());
      } else if (params.collectionId) {
+        this.showVaultFilter = false;
        this.collectionId = params.collectionId;
        this.searchPlaceholder = this.i18nService.t("searchCollection");
        const collectionNode = await this.collectionService.getNested(this.collectionId);
@@ -131,8 +149,9 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
          (c) => c.collectionIds != null && c.collectionIds.indexOf(this.collectionId) > -1
        );
      } else {
+        this.showVaultFilter = true;
        this.groupingTitle = this.i18nService.t("allItems");
-        await this.load();
+        await this.load(this.buildFilter());
      }

      if (this.applySavedState && this.state != null) {
@@ -232,6 +251,40 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
    );
  }

+  async changeVaultSelection() {
+    this.vaultFilter = this.vaultFilterService.getVaultFilter();
+    await this.load(this.buildFilter(), this.deleted);
+  }
+
+  private buildFilter(): (cipher: CipherView) => boolean {
+    return (cipher) => {
+      let cipherPassesFilter = true;
+      if (this.deleted && cipherPassesFilter) {
+        cipherPassesFilter = cipher.isDeleted;
+      }
+      if (this.type != null && cipherPassesFilter) {
+        cipherPassesFilter = cipher.type === this.type;
+      }
+      if (this.folderId != null && this.folderId != "none" && cipherPassesFilter) {
+        cipherPassesFilter = cipher.folderId === this.folderId;
+      }
+      if (this.noneFolder) {
+        cipherPassesFilter = cipher.folderId == null;
+      }
+      if (this.collectionId != null && cipherPassesFilter) {
+        cipherPassesFilter =
+          cipher.collectionIds != null && cipher.collectionIds.indexOf(this.collectionId) > -1;
+      }
+      if (this.vaultFilter.selectedOrganizationId != null && cipherPassesFilter) {
+        cipherPassesFilter = cipher.organizationId === this.vaultFilter.selectedOrganizationId;
+      }
+      if (this.vaultFilter.myVaultOnly && cipherPassesFilter) {
+        cipherPassesFilter = cipher.organizationId === null;
+      }
+      return cipherPassesFilter;
+    };
+  }
+
  private async saveState() {
    this.state = {
      scrollY: this.popupUtils.getContentScrollY(window, this.scrollingContainer),
--- a/apps/browser/src/popup/vault/current-tab.component.html
+++ b/apps/browser/src/popup/vault/current-tab.component.html
@@ -35,6 +35,7 @@
    <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
  </div>
  <ng-container *ngIf="loaded">
+    <app-vault-select (onVaultSelectionChanged)="load()"></app-vault-select>
    <div class="box list" *ngIf="loginCiphers">
      <h2 class="box-header">
        {{ "typeLogins" | i18n }}
--- a/apps/browser/src/popup/vault/current-tab.component.ts
+++ b/apps/browser/src/popup/vault/current-tab.component.ts
@@ -4,6 +4,7 @@ import { Router } from "@angular/router";
 import { BroadcasterService } from "jslib-common/abstractions/broadcaster.service";
 import { CipherService } from "jslib-common/abstractions/cipher.service";
 import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { OrganizationService } from "jslib-common/abstractions/organization.service";
 import { PasswordRepromptService } from "jslib-common/abstractions/passwordReprompt.service";
 import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 import { SearchService } from "jslib-common/abstractions/search.service";
@@ -16,6 +17,7 @@ import { CipherView } from "jslib-common/models/view/cipherView";

 import { BrowserApi } from "../../browser/browserApi";
 import { AutofillService } from "../../services/abstractions/autofill.service";
+import { VaultFilterService } from "../../services/vaultFilter.service";
 import { PopupUtilsService } from "../services/popup-utils.service";

 const BroadcasterSubscriptionId = "CurrentTabComponent";
@@ -35,6 +37,7 @@ export class CurrentTabComponent implements OnInit, OnDestroy {
  inSidebar = false;
  searchTypeSearch = false;
  loaded = false;
+  showOrganizations = false;

  private totpCode: string;
  private totpTimeout: number;
@@ -54,7 +57,9 @@ export class CurrentTabComponent implements OnInit, OnDestroy {
    private syncService: SyncService,
    private searchService: SearchService,
    private stateService: StateService,
-    private passwordRepromptService: PasswordRepromptService
+    private passwordRepromptService: PasswordRepromptService,
+    private organizationService: OrganizationService,
+    private vaultFilterService: VaultFilterService
  ) {}

  async ngOnInit() {
@@ -184,6 +189,7 @@ export class CurrentTabComponent implements OnInit, OnDestroy {
  }

  private async load() {
+    this.loaded = false;
    const tab = await BrowserApi.getTabFromCurrentWindow();
    if (tab != null) {
      this.url = tab.url;
@@ -204,6 +210,7 @@ export class CurrentTabComponent implements OnInit, OnDestroy {
    const otherTypes: CipherType[] = [];
    const dontShowCards = await this.stateService.getDontShowCardsCurrentTab();
    const dontShowIdentities = await this.stateService.getDontShowIdentitiesCurrentTab();
+    this.showOrganizations = await this.organizationService.hasOrganizations();
    if (!dontShowCards) {
      otherTypes.push(CipherType.Card);
    }
@@ -221,18 +228,20 @@ export class CurrentTabComponent implements OnInit, OnDestroy {
    this.identityCiphers = [];

    ciphers.forEach((c) => {
-      switch (c.type) {
-        case CipherType.Login:
-          this.loginCiphers.push(c);
-          break;
-        case CipherType.Card:
-          this.cardCiphers.push(c);
-          break;
-        case CipherType.Identity:
-          this.identityCiphers.push(c);
-          break;
-        default:
-          break;
+      if (!this.vaultFilterService.filterCipherForSelectedVault(c)) {
+        switch (c.type) {
+          case CipherType.Login:
+            this.loginCiphers.push(c);
+            break;
+          case CipherType.Card:
+            this.cardCiphers.push(c);
+            break;
+          case CipherType.Identity:
+            this.identityCiphers.push(c);
+            break;
+          default:
+            break;
+        }
      }
    });

--- a/apps/browser/src/popup/vault/vault-filter.component.html
+++ b/apps/browser/src/popup/vault/vault-filter.component.html
@@ -33,6 +33,7 @@
      </button>
    </ng-container>
  </div>
+  <app-vault-select (onVaultSelectionChanged)="vaultFilterChanged()"></app-vault-select>
  <ng-container *ngIf="ciphers && ciphers.length && !showSearching()">
    <div class="box list" *ngIf="favoriteCiphers">
      <h2 class="box-header">
@@ -114,7 +115,7 @@
        </button>
      </div>
    </div>
-    <div class="box list" *ngIf="nestedFolders?.length">
+    <div class="box list" *ngIf="!selectedOrganization && nestedFolders?.length">
      <h2 class="box-header">
        {{ "folders" | i18n }}
        <span class="flex-right">{{ folderCount }}</span>
@@ -139,7 +140,7 @@
        </button>
      </div>
    </div>
-    <div class="box list" *ngIf="nestedCollections && nestedCollections.length">
+    <div class="box list" *ngIf="showCollections && nestedCollections && nestedCollections.length">
      <h2 class="box-header">
        {{ "collections" | i18n }}
        <span class="flex-right">{{ nestedCollections.length }}</span>
--- a/apps/browser/src/popup/vault/vault-filter.component.ts
+++ b/apps/browser/src/popup/vault/vault-filter.component.ts
@@ -3,15 +3,14 @@ import { ChangeDetectorRef, Component, NgZone, OnDestroy, OnInit } from "@angula
 import { ActivatedRoute, Router } from "@angular/router";
 import { first } from "rxjs/operators";

-import { GroupingsComponent as BaseGroupingsComponent } from "jslib-angular/components/groupings.component";
+import { VaultFilter } from "jslib-angular/modules/vault-filter/models/vault-filter.model";
 import { BroadcasterService } from "jslib-common/abstractions/broadcaster.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 { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 import { SearchService } from "jslib-common/abstractions/search.service";
 import { SyncService } from "jslib-common/abstractions/sync.service";
 import { CipherType } from "jslib-common/enums/cipherType";
+import { TreeNode } from "jslib-common/models/domain/treeNode";
 import { CipherView } from "jslib-common/models/view/cipherView";
 import { CollectionView } from "jslib-common/models/view/collectionView";
 import { FolderView } from "jslib-common/models/view/folderView";
@@ -20,15 +19,16 @@ import { BrowserGroupingsComponentState } from "src/models/browserGroupingsCompo

 import { BrowserApi } from "../../browser/browserApi";
 import { StateService } from "../../services/abstractions/state.service";
+import { VaultFilterService } from "../../services/vaultFilter.service";
 import { PopupUtilsService } from "../services/popup-utils.service";

-const ComponentId = "GroupingsComponent";
+const ComponentId = "VaultComponent";

@Component({
-  selector: "app-vault-groupings",
-  templateUrl: "groupings.component.html",
+  selector: "app-vault-filter",
+  templateUrl: "vault-filter.component.html",
 })
-export class GroupingsComponent extends BaseGroupingsComponent implements OnInit, OnDestroy {
+export class VaultFilterComponent implements OnInit, OnDestroy {
  get showNoFolderCiphers(): boolean {
    return (
      this.noFolderCiphers != null &&
@@ -40,6 +40,12 @@ export class GroupingsComponent extends BaseGroupingsComponent implements OnInit
  get folderCount(): number {
    return this.nestedFolders.length - (this.showNoFolderCiphers ? 0 : 1);
  }
+  folders: FolderView[];
+  nestedFolders: TreeNode<FolderView>[];
+  collections: CollectionView[];
+  nestedCollections: TreeNode<CollectionView>[];
+  loaded = false;
+  cipherType = CipherType;
  ciphers: CipherView[];
  favoriteCiphers: CipherView[];
  noFolderCiphers: CipherView[];
@@ -52,6 +58,9 @@ export class GroupingsComponent extends BaseGroupingsComponent implements OnInit
  searchPending = false;
  searchTypeSearch = false;
  deletedCount = 0;
+  vaultFilter: VaultFilter;
+  selectedOrganization: string = null;
+  showCollections = true;

  private loadedTimeout: number;
  private selectedTimeout: number;
@@ -63,8 +72,6 @@ export class GroupingsComponent extends BaseGroupingsComponent implements OnInit
  private allCiphers: CipherView[] = null;

  constructor(
-    collectionService: CollectionService,
-    folderService: FolderService,
    private cipherService: CipherService,
    private router: Router,
    private ngZone: NgZone,
@@ -76,9 +83,9 @@ export class GroupingsComponent extends BaseGroupingsComponent implements OnInit
    private platformUtilsService: PlatformUtilsService,
    private searchService: SearchService,
    private location: Location,
-    private browserStateService: StateService
+    private browserStateService: StateService,
+    private vaultFilterService: VaultFilterService
  ) {
-    super(collectionService, folderService, browserStateService);
    this.noFolderListSize = 100;
  }

@@ -143,14 +150,18 @@ export class GroupingsComponent extends BaseGroupingsComponent implements OnInit
  }

  async load() {
-    await super.load(false);
+    this.vaultFilter = this.vaultFilterService.getVaultFilter();
+
+    this.updateSelectedOrg();
+    await this.loadCollectionsAndFolders();
    await this.loadCiphers();
+
    if (this.showNoFolderCiphers && this.nestedFolders.length > 0) {
      // Remove "No Folder" from folder listing
      this.nestedFolders = this.nestedFolders.slice(0, this.nestedFolders.length - 1);
    }

-    super.loaded = true;
+    this.loaded = true;
  }

  async loadCiphers() {
@@ -158,60 +169,20 @@ export class GroupingsComponent extends BaseGroupingsComponent implements OnInit
    if (!this.hasLoadedAllCiphers) {
      this.hasLoadedAllCiphers = !this.searchService.isSearchable(this.searchText);
    }
-    this.deletedCount = this.allCiphers.filter((c) => c.isDeleted).length;
    await this.search(null);
-    let favoriteCiphers: CipherView[] = null;
-    let noFolderCiphers: CipherView[] = null;
-    const folderCounts = new Map<string, number>();
-    const collectionCounts = new Map<string, number>();
-    const typeCounts = new Map<CipherType, number>();
+    this.getCounts();
+  }

-    this.ciphers.forEach((c) => {
-      if (c.isDeleted) {
-        return;
-      }
-      if (c.favorite) {
-        if (favoriteCiphers == null) {
-          favoriteCiphers = [];
-        }
-        favoriteCiphers.push(c);
-      }
+  async loadCollections() {
+    const allCollections = await this.vaultFilterService.buildCollections();
+    this.collections = allCollections.fullList;
+    this.nestedCollections = allCollections.nestedList;
+  }

-      if (c.folderId == null) {
-        if (noFolderCiphers == null) {
-          noFolderCiphers = [];
-        }
-        noFolderCiphers.push(c);
-      }
-
-      if (typeCounts.has(c.type)) {
-        typeCounts.set(c.type, typeCounts.get(c.type) + 1);
-      } else {
-        typeCounts.set(c.type, 1);
-      }
-
-      if (folderCounts.has(c.folderId)) {
-        folderCounts.set(c.folderId, folderCounts.get(c.folderId) + 1);
-      } else {
-        folderCounts.set(c.folderId, 1);
-      }
-
-      if (c.collectionIds != null) {
-        c.collectionIds.forEach((colId) => {
-          if (collectionCounts.has(colId)) {
-            collectionCounts.set(colId, collectionCounts.get(colId) + 1);
-          } else {
-            collectionCounts.set(colId, 1);
-          }
-        });
-      }
-    });
-
-    this.favoriteCiphers = favoriteCiphers;
-    this.noFolderCiphers = noFolderCiphers;
-    this.typeCounts = typeCounts;
-    this.folderCounts = folderCounts;
-    this.collectionCounts = collectionCounts;
+  async loadFolders() {
+    const allFolders = await this.vaultFilterService.buildFolders(this.selectedOrganization);
+    this.folders = allFolders.fullList;
+    this.nestedFolders = await allFolders.nestedList;
  }

  async search(timeout: number = null) {
@@ -227,6 +198,9 @@ export class GroupingsComponent extends BaseGroupingsComponent implements OnInit
        filterDeleted,
        this.allCiphers
      );
+      this.ciphers = this.ciphers.filter(
+        (c) => !this.vaultFilterService.filterCipherForSelectedVault(c)
+      );
      return;
    }
    this.searchPending = true;
@@ -241,27 +215,26 @@ export class GroupingsComponent extends BaseGroupingsComponent implements OnInit
          this.allCiphers
        );
      }
+      this.ciphers = this.ciphers.filter(
+        (c) => !this.vaultFilterService.filterCipherForSelectedVault(c)
+      );
      this.searchPending = false;
    }, timeout);
  }

  async selectType(type: CipherType) {
-    super.selectType(type);
    this.router.navigate(["/ciphers"], { queryParams: { type: type } });
  }

  async selectFolder(folder: FolderView) {
-    super.selectFolder(folder);
    this.router.navigate(["/ciphers"], { queryParams: { folderId: folder.id || "none" } });
  }

  async selectCollection(collection: CollectionView) {
-    super.selectCollection(collection);
    this.router.navigate(["/ciphers"], { queryParams: { collectionId: collection.id } });
  }

  async selectTrash() {
-    super.selectTrash();
    this.router.navigate(["/ciphers"], { queryParams: { deleted: true } });
  }

@@ -294,6 +267,85 @@ export class GroupingsComponent extends BaseGroupingsComponent implements OnInit
    this.router.navigate(["/add-cipher"]);
  }

+  async vaultFilterChanged() {
+    if (this.showSearching) {
+      await this.search();
+    }
+    this.updateSelectedOrg();
+    await this.loadCollectionsAndFolders();
+    this.getCounts();
+  }
+
+  updateSelectedOrg() {
+    this.vaultFilter = this.vaultFilterService.getVaultFilter();
+    if (this.vaultFilter.selectedOrganizationId != null) {
+      this.selectedOrganization = this.vaultFilter.selectedOrganizationId;
+    } else {
+      this.selectedOrganization = null;
+    }
+  }
+
+  getCounts() {
+    let favoriteCiphers: CipherView[] = null;
+    let noFolderCiphers: CipherView[] = null;
+    const folderCounts = new Map<string, number>();
+    const collectionCounts = new Map<string, number>();
+    const typeCounts = new Map<CipherType, number>();
+
+    this.deletedCount = this.allCiphers.filter(
+      (c) => c.isDeleted && !this.vaultFilterService.filterCipherForSelectedVault(c)
+    ).length;
+
+    this.ciphers?.forEach((c) => {
+      if (!this.vaultFilterService.filterCipherForSelectedVault(c)) {
+        if (c.isDeleted) {
+          return;
+        }
+        if (c.favorite) {
+          if (favoriteCiphers == null) {
+            favoriteCiphers = [];
+          }
+          favoriteCiphers.push(c);
+        }
+
+        if (c.folderId == null) {
+          if (noFolderCiphers == null) {
+            noFolderCiphers = [];
+          }
+          noFolderCiphers.push(c);
+        }
+
+        if (typeCounts.has(c.type)) {
+          typeCounts.set(c.type, typeCounts.get(c.type) + 1);
+        } else {
+          typeCounts.set(c.type, 1);
+        }
+
+        if (folderCounts.has(c.folderId)) {
+          folderCounts.set(c.folderId, folderCounts.get(c.folderId) + 1);
+        } else {
+          folderCounts.set(c.folderId, 1);
+        }
+
+        if (c.collectionIds != null) {
+          c.collectionIds.forEach((colId) => {
+            if (collectionCounts.has(colId)) {
+              collectionCounts.set(colId, collectionCounts.get(colId) + 1);
+            } else {
+              collectionCounts.set(colId, 1);
+            }
+          });
+        }
+      }
+    });
+
+    this.favoriteCiphers = favoriteCiphers;
+    this.noFolderCiphers = noFolderCiphers;
+    this.typeCounts = typeCounts;
+    this.folderCounts = folderCounts;
+    this.collectionCounts = collectionCounts;
+  }
+
  showSearching() {
    return (
      this.hasSearched || (!this.searchPending && this.searchService.isSearchable(this.searchText))
@@ -307,6 +359,12 @@ export class GroupingsComponent extends BaseGroupingsComponent implements OnInit
    }
  }

+  private async loadCollectionsAndFolders() {
+    this.showCollections = !this.vaultFilter.myVaultOnly;
+    await this.loadFolders();
+    await this.loadCollections();
+  }
+
  private async saveState() {
    this.state = {
      scrollY: this.popupUtils.getContentScrollY(window),
--- a/apps/browser/src/popup/vault/vault-select.component.html
+++ b/apps/browser/src/popup/vault/vault-select.component.html
@@ -0,0 +1,74 @@
+<div class="content org-filter-content" *ngIf="loaded && showOrganizations">
+  <button
+    class="org-filter"
+    (click)="toggle()"
+    cdkOverlayOrigin
+    #trigger="cdkOverlayOrigin"
+    aria-haspopup="menu"
+    aria-controls="cdk-overlay-container"
+    [attr.aria-expanded]="isOpen"
+  >
+    <span>{{ vaultFilterDisplay }}&nbsp;</span>
+    <i
+      class="bwi bwi-sm"
+      aria-hidden="true"
+      [ngClass]="{ 'bwi-angle-down': !isOpen, 'bwi-chevron-up': isOpen }"
+    ></i>
+  </button>
+  <ng-template
+    cdkConnectedOverlay
+    [cdkConnectedOverlayOrigin]="trigger"
+    [cdkConnectedOverlayHasBackdrop]="true"
+    [cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
+    [cdkConnectedOverlayOpen]="isOpen"
+    [cdkConnectedOverlayPositions]="overlayPostition"
+    (backdropClick)="close()"
+    (detach)="close()"
+  >
+    <div
+      class="vault-select"
+      [@transformPanel]="'open'"
+      cdkTrapFocus
+      cdkTrapFocusAutoCapture
+      role="dialog"
+      aria-modal="true"
+    >
+      <button
+        appStopClick
+        appBlurClick
+        (click)="selectAllVaults()"
+        [ngClass]="{ active: !myVaultOnly && !selectOrganizationId }"
+      >
+        <i class="bwi bwi-fw bwi-filter" aria-hidden="true"></i>
+        &nbsp;{{ "allVaults" | i18n }}
+      </button>
+      <button
+        *ngIf="!enforcePersonalOwnwership"
+        appStopClick
+        appBlurClick
+        (click)="selectMyVault()"
+      >
+        <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
+        &nbsp;{{ "myVault" | i18n }}
+      </button>
+      <button
+        *ngFor="let organization of organizations"
+        appStopClick
+        appBlurClick
+        (click)="selectOrganization(organization)"
+      >
+        <i
+          *ngIf="organization.planProductType !== 1"
+          class="bwi bwi-fw bwi-business"
+          aria-hidden="true"
+        ></i>
+        <i
+          *ngIf="organization.planProductType === 1"
+          class="bwi bwi-fw bwi-family"
+          aria-hidden="true"
+        ></i>
+        <span>&nbsp;{{ organization.name | ellipsis: 23:true }}</span>
+      </button>
+    </div>
+  </ng-template>
+</div>
--- a/apps/browser/src/popup/vault/vault-select.component.ts
+++ b/apps/browser/src/popup/vault/vault-select.component.ts
@@ -0,0 +1,113 @@
+import { animate, state, style, transition, trigger } from "@angular/animations";
+import { ConnectedPosition } from "@angular/cdk/overlay";
+import { Component, EventEmitter, OnInit, Output } from "@angular/core";
+
+import { VaultFilter } from "jslib-angular/modules/vault-filter/models/vault-filter.model";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { Organization } from "jslib-common/models/domain/organization";
+
+import { VaultFilterService } from "../../services/vaultFilter.service";
+
+@Component({
+  selector: "app-vault-select",
+  templateUrl: "vault-select.component.html",
+  animations: [
+    trigger("transformPanel", [
+      state(
+        "void",
+        style({
+          opacity: 0,
+        })
+      ),
+      transition(
+        "void => open",
+        animate(
+          "100ms linear",
+          style({
+            opacity: 1,
+          })
+        )
+      ),
+      transition("* => void", animate("100ms linear", style({ opacity: 0 }))),
+    ]),
+  ],
+})
+export class VaultSelectComponent implements OnInit {
+  @Output() onVaultSelectionChanged = new EventEmitter();
+
+  isOpen = false;
+  loaded = false;
+  showOrganizations = false;
+  organizations: Organization[];
+  vaultFilter: VaultFilter = new VaultFilter();
+  vaultFilterDisplay = "";
+  enforcePersonalOwnwership = false;
+  overlayPostition: ConnectedPosition[] = [
+    {
+      originX: "start",
+      originY: "bottom",
+      overlayX: "start",
+      overlayY: "top",
+    },
+  ];
+
+  constructor(private vaultFilterService: VaultFilterService, private i18nService: I18nService) {}
+
+  async ngOnInit() {
+    this.vaultFilter = this.vaultFilterService.getVaultFilter();
+    this.organizations = await this.vaultFilterService.buildOrganizations();
+    this.enforcePersonalOwnwership =
+      await this.vaultFilterService.checkForPersonalOwnershipPolicy();
+
+    if (
+      (!this.enforcePersonalOwnwership && this.organizations.length > 0) ||
+      (this.enforcePersonalOwnwership && this.organizations.length > 1)
+    ) {
+      this.showOrganizations = true;
+
+      if (this.enforcePersonalOwnwership && !this.vaultFilter.myVaultOnly) {
+        this.vaultFilterService.setVaultFilter(this.organizations[0].id);
+        this.vaultFilter.selectedOrganizationId = this.organizations[0].id;
+        this.vaultFilterDisplay = this.organizations.find(
+          (o) => o.id === this.vaultFilter.selectedOrganizationId
+        ).name;
+      } else if (this.vaultFilter.myVaultOnly) {
+        this.vaultFilterDisplay = this.i18nService.t(this.vaultFilterService.myVault);
+      } else if (this.vaultFilter.selectedOrganizationId != null) {
+        this.vaultFilterDisplay = this.organizations.find(
+          (o) => o.id === this.vaultFilter.selectedOrganizationId
+        ).name;
+      } else {
+        this.vaultFilterDisplay = this.i18nService.t(this.vaultFilterService.allVaults);
+      }
+    }
+    this.loaded = true;
+  }
+
+  toggle() {
+    this.isOpen = !this.isOpen;
+  }
+
+  close() {
+    this.isOpen = false;
+  }
+
+  selectOrganization(organization: Organization) {
+    this.vaultFilterDisplay = organization.name;
+    this.vaultFilterService.setVaultFilter(organization.id);
+    this.onVaultSelectionChanged.emit();
+    this.close();
+  }
+  selectAllVaults() {
+    this.vaultFilterDisplay = this.i18nService.t(this.vaultFilterService.allVaults);
+    this.vaultFilterService.setVaultFilter(this.vaultFilterService.allVaults);
+    this.onVaultSelectionChanged.emit();
+    this.close();
+  }
+  selectMyVault() {
+    this.vaultFilterDisplay = this.i18nService.t(this.vaultFilterService.myVault);
+    this.vaultFilterService.setVaultFilter(this.vaultFilterService.myVault);
+    this.onVaultSelectionChanged.emit();
+    this.close();
+  }
+}
--- a/apps/browser/src/services/vaultFilter.service.ts
+++ b/apps/browser/src/services/vaultFilter.service.ts
@@ -0,0 +1,73 @@
+import { VaultFilter } from "jslib-angular/modules/vault-filter/models/vault-filter.model";
+import { VaultFilterService as BaseVaultFilterService } 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 { CipherView } from "jslib-common/models/view/cipherView";
+
+export class VaultFilterService extends BaseVaultFilterService {
+  vaultFilter: VaultFilter = new VaultFilter();
+
+  allVaults = "allVaults";
+  myVault = "myVault";
+
+  constructor(
+    stateService: StateService,
+    organizationService: OrganizationService,
+    folderService: FolderService,
+    cipherService: CipherService,
+    collectionService: CollectionService,
+    policyService: PolicyService
+  ) {
+    super(
+      stateService,
+      organizationService,
+      folderService,
+      cipherService,
+      collectionService,
+      policyService
+    );
+    this.vaultFilter.myVaultOnly = false;
+    this.vaultFilter.selectedOrganizationId = null;
+  }
+
+  getVaultFilter() {
+    return this.vaultFilter;
+  }
+
+  setVaultFilter(filter: string) {
+    if (filter === this.allVaults) {
+      this.vaultFilter.myVaultOnly = false;
+      this.vaultFilter.selectedOrganizationId = null;
+    } else if (filter === this.myVault) {
+      this.vaultFilter.myVaultOnly = true;
+      this.vaultFilter.selectedOrganizationId = null;
+    } else {
+      this.vaultFilter.myVaultOnly = false;
+      this.vaultFilter.selectedOrganizationId = filter;
+    }
+  }
+
+  clear() {
+    this.setVaultFilter(this.allVaults);
+  }
+
+  filterCipherForSelectedVault(cipher: CipherView) {
+    if (!this.vaultFilter.selectedOrganizationId && !this.vaultFilter.myVaultOnly) {
+      return false;
+    }
+    if (this.vaultFilter.selectedOrganizationId) {
+      if (cipher.organizationId === this.vaultFilter.selectedOrganizationId) {
+        return false;
+      }
+    } else if (this.vaultFilter.myVaultOnly) {
+      if (!cipher.organizationId) {
+        return false;
+      }
+    }
+    return true;
+  }
+}