[PM-5189] Merging work done for pm-8518

2026-01-06 10:33:57 +00:00 · 2024-06-04 10:00:25 -05:00
parent d159d97bed 66873dee95
commit d774bc96d9
148 changed files with 6775 additions and 1001 deletions
--- a/apps/browser/package.json
+++ b/apps/browser/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@bitwarden/browser",
-  "version": "2024.5.2",
+  "version": "2024.6.0",
  "scripts": {
    "build": "cross-env MANIFEST_VERSION=3 webpack",
    "build:mv2": "webpack",
--- a/apps/browser/src/_locales/az/messages.json
+++ b/apps/browser/src/_locales/az/messages.json
@@ -763,7 +763,7 @@
    "message": "Kilidi aç"
  },
  "additionalOptions": {
-    "message": "Additional options"
+    "message": "Əlavə seçimlər"
  },
  "enableContextMenuItem": {
    "message": "Konteks menyu seçimlərini göstər"
@@ -803,7 +803,7 @@
    "description": "'Solarized' is a noun and the name of a color scheme. It should not be translated."
  },
  "exportFrom": {
-    "message": "Export from"
+    "message": "Buradan xaricə köçür"
  },
  "exportVault": {
    "message": "Anbarı xaricə köçür"
@@ -812,28 +812,28 @@
    "message": "Fayl formatı"
  },
  "fileEncryptedExportWarningDesc": {
-    "message": "This file export will be password protected and require the file password to decrypt."
+    "message": "Bu faylın xaricə köçürülməsi, parolla qorunacaq və şifrəsini açmaq üçün fayl parolu tələb olunacaq."
  },
  "filePassword": {
-    "message": "File password"
+    "message": "Fayl parolu"
  },
  "exportPasswordDescription": {
-    "message": "This password will be used to export and import this file"
+    "message": "Bu parol, bu faylı daxilə və xaricə köçürmək üçün istifadə olunacaq"
  },
  "accountRestrictedOptionDescription": {
-    "message": "Use your account encryption key, derived from your account's username and Master Password, to encrypt the export and restrict import to only the current Bitwarden account."
+    "message": "Xaricə köçürməni şifrələmək və daxilə köçürməni yalnız mövcud Bitwarden hesabı ilə məhdudlaşdırmaq üçün hesabınızın istifadəçi adı və Ana Parolundan əldə edilən hesab şifrələmə açarınızı istifadə edin."
  },
  "passwordProtectedOptionDescription": {
-    "message": "Set a file password to encrypt the export and import it to any Bitwarden account using the password for decryption."
+    "message": "Xaricə köçürməni şifrələmək üçün bir fayl parolu təyin edin və şifrəni açma parolunu istifadə edərək bunu istənilən Bitwarden hesabına köçürün."
  },
  "exportTypeHeading": {
-    "message": "Export type"
+    "message": "Xaricə köçürmə növü"
  },
  "accountRestricted": {
-    "message": "Account restricted"
+    "message": "Hesab məhdudlaşdırıldı"
  },
  "filePasswordAndConfirmFilePasswordDoNotMatch": {
-    "message": "“File password”  and “Confirm file password“ do not match."
+    "message": "\"Fayl parolu\" və \"Fayl parolunu təsdiqlə\" uyuşmur."
  },
  "warning": {
    "message": "XƏBƏRDARLIQ",
@@ -2213,10 +2213,10 @@
    }
  },
  "exportingOrganizationVaultTitle": {
-    "message": "Exporting organization vault"
+    "message": "Təşkilat anbarını xaricə köçürmə"
  },
  "exportingOrganizationVaultDesc": {
-    "message": "Only the organization vault associated with $ORGANIZATION$ will be exported. Items in individual vaults or other organizations will not be included.",
+    "message": "Yalnız $ORGANIZATION$ ilə əlaqələndirilmiş təşkilat anbarı ixrac ediləcək. Fərdi anbardakı və digər təşkilat elementlər daxil edilmir.",
    "placeholders": {
      "organization": {
        "content": "$1",
--- a/apps/browser/src/_locales/de/messages.json
+++ b/apps/browser/src/_locales/de/messages.json
@@ -821,7 +821,7 @@
    "message": "Dieses Passwort wird zum Exportieren und Importieren dieser Datei verwendet"
  },
  "accountRestrictedOptionDescription": {
-    "message": "Verwende den Verschlüsselungscode deines Kontos, abgeleitet vom Benutzernamen und Master-Passwort, um den Export zu verschlüsseln und den Import auf das aktuelle Bitwarden-Konto zu beschränken."
+    "message": "Verwende den Verschlüsselungsschlüssel deines Kontos, abgeleitet vom Benutzernamen und Master-Passwort, um den Export zu verschlüsseln und den Import auf das aktuelle Bitwarden-Konto zu beschränken."
  },
  "passwordProtectedOptionDescription": {
    "message": "Lege ein Dateipasswort fest, um den Export zu verschlüsseln und importiere ihn in ein beliebiges Bitwarden-Konto, wobei das Passwort zum Entschlüsseln genutzt wird."
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -224,7 +224,7 @@
  },
  "continueToAuthenticatorPageDesc": {
    "message": "Bitwarden Authenticator allows you to store authenticator keys and generate TOTP codes for 2-step verification flows. Learn more on the bitwarden.com website"
-  },  
+  },
  "bitwardenSecretsManager": {
    "message": "Bitwarden Secrets Manager"
  },
@@ -599,6 +599,9 @@
  "loggedOut": {
    "message": "Logged out"
  },
+  "loggedOutDesc": {
+    "message": "You have been logged out of your account."
+  },
  "loginExpired": {
    "message": "Your login session has expired."
  },
@@ -1107,6 +1110,15 @@
  "selfHostedEnvironmentFooter": {
    "message": "Specify the base URL of your on-premises hosted Bitwarden installation."
  },
+  "selfHostedBaseUrlHint": {
+    "message": "Specify the base URL of your on-premises hosted Bitwarden installation. Example: https://bitwarden.company.com"
+  },
+  "selfHostedCustomEnvHeader" :{
+    "message": "For advanced configuration, you can specify the base URL of each service independently."
+  },
+  "selfHostedEnvFormInvalid" :{
+    "message": "You must add either the base Server URL or at least one custom environment."
+  },
  "customEnvironment": {
    "message": "Custom environment"
  },
@@ -1744,6 +1756,12 @@
  "ok": {
    "message": "Ok"
  },
+  "errorRefreshingAccessToken":{
+    "message": "Access Token Refresh Error"
+  },
+  "errorRefreshingAccessTokenDesc":{
+    "message": "No refresh token or API keys found. Please try logging out and logging back in."
+  },
  "desktopSyncVerificationTitle": {
    "message": "Desktop sync verification"
  },
@@ -3333,5 +3351,14 @@
        "example": "Work"
      }
    }
+  },
+  "itemsWithNoFolder": {
+    "message": "Items with no folder"
+  },
+  "organizationIsDeactivated": {
+    "message": "Organization is deactivated"
+  },
+  "contactYourOrgAdmin": {
+    "message": "Items in deactivated organizations cannot be accessed. Contact your organization owner for assistance."
  }
 }
--- a/apps/browser/src/_locales/lt/messages.json
+++ b/apps/browser/src/_locales/lt/messages.json
@@ -423,7 +423,7 @@
    "message": "Kita"
  },
  "unlockMethods": {
-    "message": "Unlock options"
+    "message": "Atrakinti parinktis"
  },
  "unlockMethodNeededToChangeTimeoutActionDesc": {
    "message": "Nustatyk atrakinimo būdą, kad pakeistum saugyklos laiko limito veiksmą."
@@ -432,10 +432,10 @@
    "message": "Nustatykite nustatymuose atrakinimo metodą"
  },
  "sessionTimeoutHeader": {
-    "message": "Session timeout"
+    "message": "Baigėsi seanso laikas"
  },
  "otherOptions": {
-    "message": "Other options"
+    "message": "Kitos parinktys"
  },
  "rateExtension": {
    "message": "Įvertinkite šį plėtinį"
@@ -2274,7 +2274,7 @@
    "message": "Sugeneruoti el. pašto slapyvardį su išorine persiuntimo paslauga."
  },
  "forwarderError": {
-    "message": "$SERVICENAME$ error: $ERRORMESSAGE$",
+    "message": "„$SERVICENAME$“ klaida: $ERRORMESSAGE$.",
    "description": "Reports an error returned by a forwarding service to the user.",
    "placeholders": {
      "servicename": {
@@ -2288,11 +2288,11 @@
    }
  },
  "forwarderGeneratedBy": {
-    "message": "Generated by Bitwarden.",
+    "message": "Sugeneravo „Bitwarden“.",
    "description": "Displayed with the address on the forwarding service's configuration screen."
  },
  "forwarderGeneratedByWithWebsite": {
-    "message": "Website: $WEBSITE$. Generated by Bitwarden.",
+    "message": "Svetainė: $WEBSITE$. Sugeneravo „Bitwarden“.",
    "description": "Displayed with the address on the forwarding service's configuration screen.",
    "placeholders": {
      "WEBSITE": {
@@ -2302,7 +2302,7 @@
    }
  },
  "forwaderInvalidToken": {
-    "message": "Invalid $SERVICENAME$ API token",
+    "message": "Netinkamas „$SERVICENAME$“ API prieigos raktas.",
    "description": "Displayed when the user's API token is empty or rejected by the forwarding service.",
    "placeholders": {
      "servicename": {
@@ -2312,7 +2312,7 @@
    }
  },
  "forwaderInvalidTokenWithMessage": {
-    "message": "Invalid $SERVICENAME$ API token: $ERRORMESSAGE$",
+    "message": "Netinkamas „$SERVICENAME$“ API prieigos raktas: $ERRORMESSAGE$.",
    "description": "Displayed when the user's API token is rejected by the forwarding service with an error message.",
    "placeholders": {
      "servicename": {
@@ -2326,7 +2326,7 @@
    }
  },
  "forwarderNoAccountId": {
-    "message": "Unable to obtain $SERVICENAME$ masked email account ID.",
+    "message": "Nepavyksta gauti „$SERVICENAME$“ užmaskuoto el. pašto paskyros ID.",
    "description": "Displayed when the forwarding service fails to return an account ID.",
    "placeholders": {
      "servicename": {
@@ -2336,7 +2336,7 @@
    }
  },
  "forwarderNoDomain": {
-    "message": "Invalid $SERVICENAME$ domain.",
+    "message": "Netinkamas „$SERVICENAME$“ domenas.",
    "description": "Displayed when the domain is empty or domain authorization failed at the forwarding service.",
    "placeholders": {
      "servicename": {
@@ -2346,7 +2346,7 @@
    }
  },
  "forwarderNoUrl": {
-    "message": "Invalid $SERVICENAME$ url.",
+    "message": "Netinkamas „$SERVICENAME$“ URL.",
    "description": "Displayed when the url of the forwarding service wasn't supplied.",
    "placeholders": {
      "servicename": {
@@ -2356,7 +2356,7 @@
    }
  },
  "forwarderUnknownError": {
-    "message": "Unknown $SERVICENAME$ error occurred.",
+    "message": "Įvyko nežinoma „$SERVICENAME$“ klaida.",
    "description": "Displayed when the forwarding service failed due to an unknown error.",
    "placeholders": {
      "servicename": {
@@ -2366,7 +2366,7 @@
    }
  },
  "forwarderUnknownForwarder": {
-    "message": "Unknown forwarder: '$SERVICENAME$'.",
+    "message": "Nežinomas persiuntėjas: „$SERVICENAME$“.",
    "description": "Displayed when the forwarding service is not supported.",
    "placeholders": {
      "servicename": {
@@ -3287,13 +3287,13 @@
    "message": "Administratoriaus konsolės"
  },
  "accountSecurity": {
-    "message": "Account security"
+    "message": "Paskyros saugumas"
  },
  "notifications": {
-    "message": "Notifications"
+    "message": "Pranešimai"
  },
  "appearance": {
-    "message": "Appearance"
+    "message": "Išvaizda"
  },
  "errorAssigningTargetCollection": {
    "message": "Klaida priskiriant tikslinę kolekciją."
--- a/apps/browser/src/_locales/sv/messages.json
+++ b/apps/browser/src/_locales/sv/messages.json
@@ -763,7 +763,7 @@
    "message": "Lås upp"
  },
  "additionalOptions": {
-    "message": "Additional options"
+    "message": "Ytterligare alternativ"
  },
  "enableContextMenuItem": {
    "message": "Visa alternativ för snabbmenyn"
@@ -803,7 +803,7 @@
    "description": "'Solarized' is a noun and the name of a color scheme. It should not be translated."
  },
  "exportFrom": {
-    "message": "Export from"
+    "message": "Exportera från"
  },
  "exportVault": {
    "message": "Exportera valv"
@@ -815,7 +815,7 @@
    "message": "This file export will be password protected and require the file password to decrypt."
  },
  "filePassword": {
-    "message": "File password"
+    "message": "Fillösenord"
  },
  "exportPasswordDescription": {
    "message": "This password will be used to export and import this file"
@@ -827,7 +827,7 @@
    "message": "Set a file password to encrypt the export and import it to any Bitwarden account using the password for decryption."
  },
  "exportTypeHeading": {
-    "message": "Export type"
+    "message": "Exporttyp"
  },
  "accountRestricted": {
    "message": "Account restricted"
--- a/apps/browser/src/_locales/uk/messages.json
+++ b/apps/browser/src/_locales/uk/messages.json
@@ -763,7 +763,7 @@
    "message": "Розблокувати"
  },
  "additionalOptions": {
-    "message": "Additional options"
+    "message": "Додаткові налаштування"
  },
  "enableContextMenuItem": {
    "message": "Показувати в контекстному меню"
@@ -803,7 +803,7 @@
    "description": "'Solarized' is a noun and the name of a color scheme. It should not be translated."
  },
  "exportFrom": {
-    "message": "Export from"
+    "message": "Експортувати з"
  },
  "exportVault": {
    "message": "Експортувати сховище"
@@ -812,28 +812,28 @@
    "message": "Формат файлу"
  },
  "fileEncryptedExportWarningDesc": {
-    "message": "This file export will be password protected and require the file password to decrypt."
+    "message": "Цей експортований файл буде захищений паролем, який необхідно ввести для його розшифрування."
  },
  "filePassword": {
-    "message": "File password"
+    "message": "Пароль файлу"
  },
  "exportPasswordDescription": {
-    "message": "This password will be used to export and import this file"
+    "message": "Цей пароль буде використано для експортування та імпортування цього файлу"
  },
  "accountRestrictedOptionDescription": {
-    "message": "Use your account encryption key, derived from your account's username and Master Password, to encrypt the export and restrict import to only the current Bitwarden account."
+    "message": "Використовуйте ключ шифрування свого облікового запису, створений на основі імені користувача й головного пароля, щоб зашифрувати експортовані дані та обмежити можливість імпортування лише до поточного облікового запису Bitwarden."
  },
  "passwordProtectedOptionDescription": {
-    "message": "Set a file password to encrypt the export and import it to any Bitwarden account using the password for decryption."
+    "message": "Встановіть пароль файлу, щоб зашифрувати експортовані дані та імпортувати до будь-якого облікового запису Bitwarden за допомогою цього пароля."
  },
  "exportTypeHeading": {
-    "message": "Export type"
+    "message": "Тип експорту"
  },
  "accountRestricted": {
-    "message": "Account restricted"
+    "message": "Обмежено обліковим записом"
  },
  "filePasswordAndConfirmFilePasswordDoNotMatch": {
-    "message": "“File password”  and “Confirm file password“ do not match."
+    "message": "Пароль файлу та підтвердження пароля відрізняються."
  },
  "warning": {
    "message": "ПОПЕРЕДЖЕННЯ",
@@ -2213,10 +2213,10 @@
    }
  },
  "exportingOrganizationVaultTitle": {
-    "message": "Exporting organization vault"
+    "message": "Експортування сховища організації"
  },
  "exportingOrganizationVaultDesc": {
-    "message": "Only the organization vault associated with $ORGANIZATION$ will be exported. Items in individual vaults or other organizations will not be included.",
+    "message": "Буде експортовано лише сховище організації, пов'язане з $ORGANIZATION$. Елементи особистих сховищ або інших організацій не будуть включені.",
    "placeholders": {
      "organization": {
        "content": "$1",
--- a/apps/browser/src/_locales/zh_CN/messages.json
+++ b/apps/browser/src/_locales/zh_CN/messages.json
@@ -821,10 +821,10 @@
    "message": "此密码将用于导出和导入此文件"
  },
  "accountRestrictedOptionDescription": {
-    "message": "使用衍生自您账户的用户名和主密码的加密密钥，以加密此导出并限制只能导入到当前的 Bitwarden 账户。"
+    "message": "使用衍生自您账户的用户名和主密码的账户加密密钥，以加密此导出并限制只能导入到当前的 Bitwarden 账户。"
  },
  "passwordProtectedOptionDescription": {
-    "message": "设置一个密码用来加密导出的数据，并使用此密码解密以导入到任意 Bitwarden 账户。"
+    "message": "设置一个文件密码用来加密此导出，并使用此密码解密以导入到任意 Bitwarden 账户。"
  },
  "exportTypeHeading": {
    "message": "导出类型"
--- a/apps/browser/src/autofill/content/autofill-init.spec.ts
+++ b/apps/browser/src/autofill/content/autofill-init.spec.ts
@@ -144,7 +144,7 @@ describe("AutofillInit", () => {
        .mockResolvedValue(pageDetails);

      const response = await autofillInit["handleExtensionMessage"](message, sender, sendResponse);
-      await Promise.resolve(response);
+      await flushPromises();

      expect(response).toBe(true);
      expect(sendResponse).toHaveBeenCalledWith(pageDetails);
--- a/apps/browser/src/autofill/utils/index.spec.ts
+++ b/apps/browser/src/autofill/utils/index.spec.ts
@@ -37,14 +37,29 @@ describe("generateRandomCustomElementName", () => {
 });

 describe("sendExtensionMessage", () => {
-  it("sends a message to the extention", () => {
-    const extensionMessageResponse = sendExtensionMessage("updateAutofillInlineMenuHidden", {
+  it("sends a message to the extension", async () => {
+    const extensionMessagePromise = sendExtensionMessage("updateAutofillInlineMenuHidden", {
      display: "none",
    });
-    jest.spyOn(chrome.runtime, "sendMessage");

-    expect(chrome.runtime.sendMessage).toHaveBeenCalled();
-    expect(extensionMessageResponse).toEqual(Promise.resolve({}));
+    // Jest doesn't give anyway to select the typed overload of "sendMessage",
+    // a cast is needed to get the correct spy type.
+    const sendMessageSpy = jest.spyOn(chrome.runtime, "sendMessage") as unknown as jest.SpyInstance<
+      void,
+      [message: string, responseCallback: (response: string) => void],
+      unknown
+    >;
+
+    expect(sendMessageSpy).toHaveBeenCalled();
+
+    const [latestCall] = sendMessageSpy.mock.calls;
+    const responseCallback = latestCall[1];
+
+    responseCallback("sendMessageResponse");
+
+    const response = await extensionMessagePromise;
+
+    expect(response).toEqual("sendMessageResponse");
  });
 });

--- a/apps/browser/src/background/main.background.ts
+++ b/apps/browser/src/background/main.background.ts
@@ -9,6 +9,7 @@ import {
  AuthRequestService,
  LoginEmailServiceAbstraction,
  LoginEmailService,
+  LogoutReason,
 } from "@bitwarden/auth/common";
 import { ApiService as ApiServiceAbstraction } from "@bitwarden/common/abstractions/api.service";
 import { AuditService as AuditServiceAbstraction } from "@bitwarden/common/abstractions/audit.service";
@@ -375,8 +376,17 @@ export default class MainBackground {
      }
    };

-    const logoutCallback = async (expired: boolean, userId?: UserId) =>
-      await this.logout(expired, userId);
+    const logoutCallback = async (logoutReason: LogoutReason, userId?: UserId) =>
+      await this.logout(logoutReason, userId);
+
+    const refreshAccessTokenErrorCallback = () => {
+      // Send toast to popup
+      this.messagingService.send("showToast", {
+        type: "error",
+        title: this.i18nService.t("errorRefreshingAccessToken"),
+        message: this.i18nService.t("errorRefreshingAccessTokenDesc"),
+      });
+    };

    const isDev = process.env.ENV === "development";
    this.logService = new ConsoleLogService(isDev);
@@ -523,6 +533,7 @@ export default class MainBackground {
      this.keyGenerationService,
      this.encryptService,
      this.logService,
+      logoutCallback,
    );

    const migrationRunner = new MigrationRunner(
@@ -608,9 +619,12 @@ export default class MainBackground {
      this.platformUtilsService,
      this.environmentService,
      this.appIdService,
+      refreshAccessTokenErrorCallback,
+      this.logService,
+      (logoutReason: LogoutReason, userId?: UserId) => this.logout(logoutReason, userId),
      this.vaultTimeoutSettingsService,
-      (expired: boolean) => this.logout(expired),
    );
+
    this.domainSettingsService = new DefaultDomainSettingsService(this.stateProvider);
    this.fileUploadService = new FileUploadService(this.logService);
    this.cipherFileUploadService = new CipherFileUploadService(
@@ -1284,7 +1298,7 @@ export default class MainBackground {
    }
  }

-  async logout(expired: boolean, userId?: UserId) {
+  async logout(logoutReason: LogoutReason, userId?: UserId) {
    const activeUserId = await firstValueFrom(
      this.accountService.activeAccount$.pipe(
        map((a) => a?.id),
@@ -1350,7 +1364,7 @@ export default class MainBackground {
    await logoutPromise;

    this.messagingService.send("doneLoggingOut", {
-      expired: expired,
+      logoutReason: logoutReason,
      userId: userBeingLoggedOut,
    });

--- a/apps/browser/src/manifest.json
+++ b/apps/browser/src/manifest.json
@@ -2,7 +2,7 @@
  "manifest_version": 2,
  "name": "__MSG_extName__",
  "short_name": "__MSG_appName__",
-  "version": "2024.5.2",
+  "version": "2024.6.0",
  "description": "__MSG_extDesc__",
  "default_locale": "en",
  "author": "Bitwarden Inc.",
--- a/apps/browser/src/manifest.v3.json
+++ b/apps/browser/src/manifest.v3.json
@@ -3,7 +3,7 @@
  "minimum_chrome_version": "102.0",
  "name": "__MSG_extName__",
  "short_name": "__MSG_appName__",
-  "version": "2024.5.2",
+  "version": "2024.6.0",
  "description": "__MSG_extDesc__",
  "default_locale": "en",
  "author": "Bitwarden Inc.",
--- a/apps/browser/src/popup/app.component.ts
+++ b/apps/browser/src/popup/app.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectorRef, Component, NgZone, OnDestroy, OnInit } from "@angula
 import { NavigationEnd, Router, RouterOutlet } from "@angular/router";
 import { Subject, takeUntil, firstValueFrom, concatMap, filter, tap } from "rxjs";

+import { LogoutReason } from "@bitwarden/auth/common";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service";
 import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
@@ -10,7 +11,12 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { MessageListener } from "@bitwarden/common/platform/messaging";
 import { UserId } from "@bitwarden/common/types/guid";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
-import { DialogService, SimpleDialogOptions, ToastService } from "@bitwarden/components";
+import {
+  DialogService,
+  SimpleDialogOptions,
+  ToastOptions,
+  ToastService,
+} from "@bitwarden/components";

 import { BrowserApi } from "../platform/browser/browser-api";
 import { BrowserStateService } from "../platform/services/abstractions/browser-state.service";
@@ -83,13 +89,10 @@ export class AppComponent implements OnInit, OnDestroy {
      .pipe(
        tap((msg: any) => {
          if (msg.command === "doneLoggingOut") {
+            // TODO: PM-8544 - why do we call logout in the popup after receiving the doneLoggingOut message? Hasn't this already completeted logout?
            this.authService.logOut(async () => {
-              if (msg.expired) {
-                this.toastService.showToast({
-                  variant: "warning",
-                  title: this.i18nService.t("loggedOut"),
-                  message: this.i18nService.t("loginExpired"),
-                });
+              if (msg.logoutReason) {
+                await this.displayLogoutReason(msg.logoutReason);
              }
            });
            this.changeDetectorRef.detectChanges();
@@ -233,4 +236,23 @@ export class AppComponent implements OnInit, OnDestroy {
      this.browserSendStateService.setBrowserSendTypeComponentState(null),
    ]);
  }
+
+  // Displaying toasts isn't super useful on the popup due to the reloads we do.
+  // However, it is visible for a moment on the FF sidebar logout.
+  private async displayLogoutReason(logoutReason: LogoutReason) {
+    let toastOptions: ToastOptions;
+    switch (logoutReason) {
+      case "invalidSecurityStamp":
+      case "sessionExpired": {
+        toastOptions = {
+          variant: "warning",
+          title: this.i18nService.t("loggedOut"),
+          message: this.i18nService.t("loginExpired"),
+        };
+        break;
+      }
+    }
+
+    this.toastService.showToast(toastOptions);
+  }
 }
--- a/apps/browser/src/vault/fido2/content/page-script.webauthn-supported.spec.ts
+++ b/apps/browser/src/vault/fido2/content/page-script.webauthn-supported.spec.ts
@@ -53,7 +53,9 @@ describe("Fido2 page script with native WebAuthn support", () => {
  const mockCredentialAssertResult = createAssertCredentialResultMock();
  setupMockedWebAuthnSupport();

-  require("./page-script");
+  beforeAll(() => {
+    require("./page-script");
+  });

  afterEach(() => {
    jest.resetModules();
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-list-filters/vault-list-filters.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-list-filters/vault-list-filters.component.html
@@ -0,0 +1,39 @@
+<form [formGroup]="filterForm" class="tw-flex tw-flex-wrap tw-gap-2 tw-mb-6 tw-mt-2">
+  <ng-container *ngIf="organizations$ | async as organizations">
+    <bit-chip-select
+      *ngIf="organizations.length"
+      formControlName="organization"
+      placeholderIcon="bwi-vault"
+      [placeholderText]="'vault' | i18n"
+      [options]="organizations"
+    >
+    </bit-chip-select>
+  </ng-container>
+  <ng-container *ngIf="collections$ | async as collections">
+    <bit-chip-select
+      *ngIf="collections.length"
+      formControlName="collection"
+      placeholderIcon="bwi-collection"
+      [placeholderText]="'collections' | i18n"
+      [options]="collections"
+    >
+    </bit-chip-select>
+  </ng-container>
+  <ng-container *ngIf="folders$ | async as folders">
+    <bit-chip-select
+      *ngIf="folders.length"
+      placeholderIcon="bwi-folder"
+      formControlName="folder"
+      [placeholderText]="'folder' | i18n"
+      [options]="folders"
+    >
+    </bit-chip-select>
+  </ng-container>
+  <bit-chip-select
+    formControlName="cipherType"
+    placeholderIcon="bwi-list"
+    [placeholderText]="'types' | i18n"
+    [options]="cipherTypes"
+  >
+  </bit-chip-select>
+</form>
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-list-filters/vault-list-filters.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-list-filters/vault-list-filters.component.ts
@@ -0,0 +1,28 @@
+import { CommonModule } from "@angular/common";
+import { Component, OnDestroy } from "@angular/core";
+import { ReactiveFormsModule } from "@angular/forms";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { ChipSelectComponent } from "@bitwarden/components";
+
+import { VaultPopupListFiltersService } from "../../../services/vault-popup-list-filters.service";
+
+@Component({
+  standalone: true,
+  selector: "app-vault-list-filters",
+  templateUrl: "./vault-list-filters.component.html",
+  imports: [CommonModule, JslibModule, ChipSelectComponent, ReactiveFormsModule],
+})
+export class VaultListFiltersComponent implements OnDestroy {
+  protected filterForm = this.vaultPopupListFiltersService.filterForm;
+  protected organizations$ = this.vaultPopupListFiltersService.organizations$;
+  protected collections$ = this.vaultPopupListFiltersService.collections$;
+  protected folders$ = this.vaultPopupListFiltersService.folders$;
+  protected cipherTypes = this.vaultPopupListFiltersService.cipherTypes;
+
+  constructor(private vaultPopupListFiltersService: VaultPopupListFiltersService) {}
+
+  ngOnDestroy(): void {
+    this.vaultPopupListFiltersService.resetFilterForm();
+  }
+}
--- a/apps/browser/src/vault/popup/components/vault/vault-v2.component.html
+++ b/apps/browser/src/vault/popup/components/vault/vault-v2.component.html
@@ -22,13 +22,13 @@
  </div>

  <ng-container *ngIf="!(showEmptyState$ | async)">
-    <!-- TODO: Filter/search Section in PM-6824 and PM-6826.-->
-
    <app-vault-v2-search (searchTextChanged)="handleSearchTextChange($event)">
    </app-vault-v2-search>

+    <app-vault-list-filters></app-vault-list-filters>
+
    <div
-      *ngIf="showNoResultsState$ | async"
+      *ngIf="(showNoResultsState$ | async) && !(showDeactivatedOrg$ | async)"
      class="tw-flex tw-flex-col tw-h-full tw-justify-center"
    >
      <bit-no-items>
@@ -37,7 +37,17 @@
      </bit-no-items>
    </div>

-    <ng-container *ngIf="!(showNoResultsState$ | async)">
+    <div
+      *ngIf="showDeactivatedOrg$ | async"
+      class="tw-flex tw-flex-col tw-h-full tw-justify-center"
+    >
+      <bit-no-items [icon]="deactivatedIcon">
+        <ng-container slot="title">{{ "organizationIsDeactivated" | i18n }}</ng-container>
+        <ng-container slot="description">{{ "contactYourOrgAdmin" | i18n }}</ng-container>
+      </bit-no-items>
+    </div>
+
+    <ng-container *ngIf="!(showNoResultsState$ | async) && !(showDeactivatedOrg$ | async)">
      <app-autofill-vault-list-items></app-autofill-vault-list-items>
      <app-vault-list-items-container
        [title]="'favorites' | i18n"
--- a/apps/browser/src/vault/popup/components/vault/vault-v2.component.ts
+++ b/apps/browser/src/vault/popup/components/vault/vault-v2.component.ts
@@ -11,6 +11,7 @@ import { PopupHeaderComponent } from "../../../../platform/popup/layout/popup-he
 import { PopupPageComponent } from "../../../../platform/popup/layout/popup-page.component";
 import { VaultPopupItemsService } from "../../services/vault-popup-items.service";
 import { AutofillVaultListItemsComponent, VaultListItemsContainerComponent } from "../vault-v2";
+import { VaultListFiltersComponent } from "../vault-v2/vault-list-filters/vault-list-filters.component";
 import { VaultV2SearchComponent } from "../vault-v2/vault-search/vault-v2-search.component";

@Component({
@@ -27,6 +28,7 @@ import { VaultV2SearchComponent } from "../vault-v2/vault-search/vault-v2-search
    CommonModule,
    AutofillVaultListItemsComponent,
    VaultListItemsContainerComponent,
+    VaultListFiltersComponent,
    ButtonModule,
    RouterLink,
    VaultV2SearchComponent,
@@ -38,8 +40,10 @@ export class VaultV2Component implements OnInit, OnDestroy {

  protected showEmptyState$ = this.vaultPopupItemsService.emptyVault$;
  protected showNoResultsState$ = this.vaultPopupItemsService.noFilteredResults$;
+  protected showDeactivatedOrg$ = this.vaultPopupItemsService.showDeactivatedOrg$;

  protected vaultIcon = Icons.Vault;
+  protected deactivatedIcon = Icons.DeactivatedOrg;

  constructor(
    private vaultPopupItemsService: VaultPopupItemsService,
--- a/apps/browser/src/vault/popup/services/vault-popup-items.service.spec.ts
+++ b/apps/browser/src/vault/popup/services/vault-popup-items.service.spec.ts
@@ -2,6 +2,7 @@ import { mock } from "jest-mock-extended";
 import { BehaviorSubject } from "rxjs";

 import { SearchService } from "@bitwarden/common/abstractions/search.service";
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { CipherId } from "@bitwarden/common/types/guid";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { VaultSettingsService } from "@bitwarden/common/vault/abstractions/vault-settings/vault-settings.service";
@@ -12,6 +13,7 @@ import { BrowserApi } from "../../../platform/browser/browser-api";
 import BrowserPopupUtils from "../../../platform/popup/browser-popup-utils";

 import { VaultPopupItemsService } from "./vault-popup-items.service";
+import { VaultPopupListFiltersService } from "./vault-popup-list-filters.service";

 describe("VaultPopupItemsService", () => {
  let service: VaultPopupItemsService;
@@ -20,6 +22,8 @@ describe("VaultPopupItemsService", () => {

  const cipherServiceMock = mock<CipherService>();
  const vaultSettingsServiceMock = mock<VaultSettingsService>();
+  const organizationServiceMock = mock<OrganizationService>();
+  const vaultPopupListFiltersServiceMock = mock<VaultPopupListFiltersService>();
  const searchService = mock<SearchService>();

  beforeEach(() => {
@@ -40,6 +44,18 @@ describe("VaultPopupItemsService", () => {
    cipherServiceMock.filterCiphersForUrl.mockImplementation(async () => autoFillCiphers);
    vaultSettingsServiceMock.showCardsCurrentTab$ = new BehaviorSubject(false).asObservable();
    vaultSettingsServiceMock.showIdentitiesCurrentTab$ = new BehaviorSubject(false).asObservable();
+
+    vaultPopupListFiltersServiceMock.filters$ = new BehaviorSubject({
+      organization: null,
+      collection: null,
+      cipherType: null,
+      folder: null,
+    });
+    // Return all ciphers, `filterFunction$` will be tested in `VaultPopupListFiltersService`
+    vaultPopupListFiltersServiceMock.filterFunction$ = new BehaviorSubject(
+      (ciphers: CipherView[]) => ciphers,
+    );
+
    jest.spyOn(BrowserPopupUtils, "inPopout").mockReturnValue(false);
    jest
      .spyOn(BrowserApi, "getTabFromCurrentWindow")
@@ -47,6 +63,8 @@ describe("VaultPopupItemsService", () => {
    service = new VaultPopupItemsService(
      cipherServiceMock,
      vaultSettingsServiceMock,
+      vaultPopupListFiltersServiceMock,
+      organizationServiceMock,
      searchService,
    );
  });
@@ -55,6 +73,8 @@ describe("VaultPopupItemsService", () => {
    service = new VaultPopupItemsService(
      cipherServiceMock,
      vaultSettingsServiceMock,
+      vaultPopupListFiltersServiceMock,
+      organizationServiceMock,
      searchService,
    );
    expect(service).toBeTruthy();
@@ -87,6 +107,8 @@ describe("VaultPopupItemsService", () => {
      service = new VaultPopupItemsService(
        cipherServiceMock,
        vaultSettingsServiceMock,
+        vaultPopupListFiltersServiceMock,
+        organizationServiceMock,
        searchService,
      );

@@ -117,6 +139,8 @@ describe("VaultPopupItemsService", () => {
      service = new VaultPopupItemsService(
        cipherServiceMock,
        vaultSettingsServiceMock,
+        vaultPopupListFiltersServiceMock,
+        organizationServiceMock,
        searchService,
      );

@@ -228,6 +252,8 @@ describe("VaultPopupItemsService", () => {
      service = new VaultPopupItemsService(
        cipherServiceMock,
        vaultSettingsServiceMock,
+        vaultPopupListFiltersServiceMock,
+        organizationServiceMock,
        searchService,
      );
      service.emptyVault$.subscribe((empty) => {
--- a/apps/browser/src/vault/popup/services/vault-popup-items.service.ts
+++ b/apps/browser/src/vault/popup/services/vault-popup-items.service.ts
@@ -2,6 +2,8 @@ import { Injectable } from "@angular/core";
 import {
  BehaviorSubject,
  combineLatest,
+  distinctUntilKeyChanged,
+  from,
  map,
  Observable,
  of,
@@ -12,6 +14,7 @@ import {
 } from "rxjs";

 import { SearchService } from "@bitwarden/common/abstractions/search.service";
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { VaultSettingsService } from "@bitwarden/common/vault/abstractions/vault-settings/vault-settings.service";
 import { CipherType } from "@bitwarden/common/vault/enums";
@@ -20,6 +23,8 @@ import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { BrowserApi } from "../../../platform/browser/browser-api";
 import BrowserPopupUtils from "../../../platform/popup/browser-popup-utils";

+import { MY_VAULT_ID, VaultPopupListFiltersService } from "./vault-popup-list-filters.service";
+
 /**
 * Service for managing the various item lists on the new Vault tab in the browser popup.
 */
@@ -72,7 +77,15 @@ export class VaultPopupItemsService {
    shareReplay({ refCount: false, bufferSize: 1 }),
  );

-  private _filteredCipherList$ = combineLatest([this._cipherList$, this.searchText$]).pipe(
+  private _filteredCipherList$: Observable<CipherView[]> = combineLatest([
+    this._cipherList$,
+    this.searchText$,
+    this.vaultPopupListFiltersService.filterFunction$,
+  ]).pipe(
+    map(([ciphers, searchText, filterFunction]): [CipherView[], string] => [
+      filterFunction(ciphers),
+      searchText,
+    ]),
    switchMap(([ciphers, searchText]) =>
      this.searchService.searchCiphers(searchText, null, ciphers),
    ),
@@ -137,10 +150,19 @@ export class VaultPopupItemsService {

  /**
   * Observable that indicates whether a filter is currently applied to the ciphers.
-   * @todo Implement filter/search functionality in PM-6824 and PM-6826.
   */
-  hasFilterApplied$: Observable<boolean> = this.searchText$.pipe(
-    switchMap((text) => this.searchService.isSearchable(text)),
+  hasFilterApplied$ = combineLatest([
+    this.searchText$,
+    this.vaultPopupListFiltersService.filters$,
+  ]).pipe(
+    switchMap(([searchText, filters]) => {
+      return from(this.searchService.isSearchable(searchText)).pipe(
+        map(
+          (isSearchable) =>
+            isSearchable || Object.values(filters).some((filter) => filter !== null),
+        ),
+      );
+    }),
  );

  /**
@@ -156,15 +178,31 @@ export class VaultPopupItemsService {

  /**
   * Observable that indicates whether there are no ciphers to show with the current filter.
-   * @todo Implement filter/search functionality in PM-6824 and PM-6826.
   */
  noFilteredResults$: Observable<boolean> = this._filteredCipherList$.pipe(
    map((ciphers) => !ciphers.length),
  );

+  /** Observable that indicates when the user should see the deactivated org state */
+  showDeactivatedOrg$: Observable<boolean> = combineLatest([
+    this.vaultPopupListFiltersService.filters$.pipe(distinctUntilKeyChanged("organization")),
+    this.organizationService.organizations$,
+  ]).pipe(
+    map(([filters, orgs]) => {
+      if (!filters.organization || filters.organization.id === MY_VAULT_ID) {
+        return false;
+      }
+
+      const org = orgs.find((o) => o.id === filters.organization.id);
+      return org ? !org.enabled : false;
+    }),
+  );
+
  constructor(
    private cipherService: CipherService,
    private vaultSettingsService: VaultSettingsService,
+    private vaultPopupListFiltersService: VaultPopupListFiltersService,
+    private organizationService: OrganizationService,
    private searchService: SearchService,
  ) {}

--- a/apps/browser/src/vault/popup/services/vault-popup-list-filters.service.spec.ts
+++ b/apps/browser/src/vault/popup/services/vault-popup-list-filters.service.spec.ts
@@ -0,0 +1,298 @@
+import { TestBed } from "@angular/core/testing";
+import { FormBuilder } from "@angular/forms";
+import { BehaviorSubject, skipWhile } from "rxjs";
+
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
+import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
+import { CollectionService } from "@bitwarden/common/vault/abstractions/collection.service";
+import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
+import { CipherType } from "@bitwarden/common/vault/enums";
+import { Collection } from "@bitwarden/common/vault/models/domain/collection";
+import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { CollectionView } from "@bitwarden/common/vault/models/view/collection.view";
+import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
+
+import { MY_VAULT_ID, VaultPopupListFiltersService } from "./vault-popup-list-filters.service";
+
+describe("VaultPopupListFiltersService", () => {
+  let service: VaultPopupListFiltersService;
+  const memberOrganizations$ = new BehaviorSubject<{ name: string; id: string }[]>([]);
+  const folderViews$ = new BehaviorSubject([]);
+  const cipherViews$ = new BehaviorSubject({});
+  const decryptedCollections$ = new BehaviorSubject<CollectionView[]>([]);
+
+  const collectionService = {
+    decryptedCollections$,
+    getAllNested: () => Promise.resolve([]),
+  } as unknown as CollectionService;
+
+  const folderService = {
+    folderViews$,
+  } as unknown as FolderService;
+
+  const cipherService = {
+    cipherViews$,
+  } as unknown as CipherService;
+
+  const organizationService = {
+    memberOrganizations$,
+  } as unknown as OrganizationService;
+
+  const i18nService = {
+    t: (key: string) => key,
+  } as I18nService;
+
+  beforeEach(() => {
+    memberOrganizations$.next([]);
+    decryptedCollections$.next([]);
+
+    collectionService.getAllNested = () => Promise.resolve([]);
+    TestBed.configureTestingModule({
+      providers: [
+        {
+          provide: FolderService,
+          useValue: folderService,
+        },
+        {
+          provide: CipherService,
+          useValue: cipherService,
+        },
+        {
+          provide: OrganizationService,
+          useValue: organizationService,
+        },
+        {
+          provide: I18nService,
+          useValue: i18nService,
+        },
+        {
+          provide: CollectionService,
+          useValue: collectionService,
+        },
+        { provide: FormBuilder, useClass: FormBuilder },
+      ],
+    });
+
+    service = TestBed.inject(VaultPopupListFiltersService);
+  });
+
+  describe("cipherTypes", () => {
+    it("returns all cipher types", () => {
+      expect(service.cipherTypes.map((c) => c.value)).toEqual([
+        CipherType.Login,
+        CipherType.Card,
+        CipherType.Identity,
+        CipherType.SecureNote,
+      ]);
+    });
+  });
+
+  describe("organizations$", () => {
+    it('does not add "myVault" to the list of organizations when there are no organizations', (done) => {
+      memberOrganizations$.next([]);
+
+      service.organizations$.subscribe((organizations) => {
+        expect(organizations.map((o) => o.label)).toEqual([]);
+        done();
+      });
+    });
+
+    it('adds "myVault" to the list of organizations when there are other organizations', (done) => {
+      memberOrganizations$.next([{ name: "bobby's org", id: "1234-3323-23223" }]);
+
+      service.organizations$.subscribe((organizations) => {
+        expect(organizations.map((o) => o.label)).toEqual(["myVault", "bobby's org"]);
+        done();
+      });
+    });
+
+    it("sorts organizations by name", (done) => {
+      memberOrganizations$.next([
+        { name: "bobby's org", id: "1234-3323-23223" },
+        { name: "alice's org", id: "2223-4343-99888" },
+      ]);
+
+      service.organizations$.subscribe((organizations) => {
+        expect(organizations.map((o) => o.label)).toEqual([
+          "myVault",
+          "alice's org",
+          "bobby's org",
+        ]);
+        done();
+      });
+    });
+  });
+
+  describe("collections$", () => {
+    const testCollection = {
+      id: "14cbf8e9-7a2a-4105-9bf6-b15c01203cef",
+      name: "Test collection",
+      organizationId: "3f860945-b237-40bc-a51e-b15c01203ccf",
+    } as CollectionView;
+
+    const testCollection2 = {
+      id: "b15c0120-7a2a-4105-9bf6-b15c01203ceg",
+      name: "Test collection 2",
+      organizationId: "1203ccf-2432-123-acdd-b15c01203ccf",
+    } as CollectionView;
+
+    const testCollections = [testCollection, testCollection2];
+
+    beforeEach(() => {
+      decryptedCollections$.next(testCollections);
+
+      collectionService.getAllNested = () =>
+        Promise.resolve(
+          testCollections.map((c) => ({
+            children: [],
+            node: c,
+            parent: null,
+          })),
+        );
+    });
+
+    it("returns all collections", (done) => {
+      service.collections$.subscribe((collections) => {
+        expect(collections.map((c) => c.label)).toEqual(["Test collection", "Test collection 2"]);
+        done();
+      });
+    });
+
+    it("filters out collections that do not belong to an organization", () => {
+      service.filterForm.patchValue({
+        organization: { id: testCollection2.organizationId } as Organization,
+      });
+
+      service.collections$.subscribe((collections) => {
+        expect(collections.map((c) => c.label)).toEqual(["Test collection 2"]);
+      });
+    });
+  });
+
+  describe("folders$", () => {
+    it('returns no folders when "No Folder" is the only option', (done) => {
+      folderViews$.next([{ id: null, name: "No Folder" }]);
+
+      service.folders$.subscribe((folders) => {
+        expect(folders).toEqual([]);
+        done();
+      });
+    });
+
+    it('moves "No Folder" to the end of the list', (done) => {
+      folderViews$.next([
+        { id: null, name: "No Folder" },
+        { id: "2345", name: "Folder 2" },
+        { id: "1234", name: "Folder 1" },
+      ]);
+
+      service.folders$.subscribe((folders) => {
+        expect(folders.map((f) => f.label)).toEqual(["Folder 1", "Folder 2", "itemsWithNoFolder"]);
+        done();
+      });
+    });
+
+    it("returns all folders when MyVault is selected", (done) => {
+      service.filterForm.patchValue({
+        organization: { id: MY_VAULT_ID } as Organization,
+      });
+
+      folderViews$.next([
+        { id: "1234", name: "Folder 1" },
+        { id: "2345", name: "Folder 2" },
+      ]);
+
+      service.folders$.subscribe((folders) => {
+        expect(folders.map((f) => f.label)).toEqual(["Folder 1", "Folder 2"]);
+        done();
+      });
+    });
+
+    it("returns folders that have ciphers within the selected organization", (done) => {
+      service.folders$.pipe(skipWhile((folders) => folders.length === 2)).subscribe((folders) => {
+        expect(folders.map((f) => f.label)).toEqual(["Folder 1"]);
+        done();
+      });
+
+      service.filterForm.patchValue({
+        organization: { id: "1234" } as Organization,
+      });
+
+      folderViews$.next([
+        { id: "1234", name: "Folder 1" },
+        { id: "2345", name: "Folder 2" },
+      ]);
+
+      cipherViews$.next({
+        "1": { folderId: "1234", organizationId: "1234" },
+        "2": { folderId: "2345", organizationId: "56789" },
+      });
+    });
+  });
+
+  describe("filterFunction$", () => {
+    const ciphers = [
+      { type: CipherType.Login, collectionIds: [], organizationId: null },
+      { type: CipherType.Card, collectionIds: ["1234"], organizationId: "8978" },
+      { type: CipherType.Identity, collectionIds: [], folderId: "5432", organizationId: null },
+      { type: CipherType.SecureNote, collectionIds: [], organizationId: null },
+    ] as CipherView[];
+
+    it("filters by cipherType", (done) => {
+      service.filterFunction$.subscribe((filterFunction) => {
+        expect(filterFunction(ciphers)).toEqual([ciphers[0]]);
+        done();
+      });
+
+      service.filterForm.patchValue({ cipherType: CipherType.Login });
+    });
+
+    it("filters by collection", (done) => {
+      const collection = { id: "1234" } as Collection;
+
+      service.filterFunction$.subscribe((filterFunction) => {
+        expect(filterFunction(ciphers)).toEqual([ciphers[1]]);
+        done();
+      });
+
+      service.filterForm.patchValue({ collection });
+    });
+
+    it("filters by folder", (done) => {
+      const folder = { id: "5432" } as FolderView;
+
+      service.filterFunction$.subscribe((filterFunction) => {
+        expect(filterFunction(ciphers)).toEqual([ciphers[2]]);
+        done();
+      });
+
+      service.filterForm.patchValue({ folder });
+    });
+
+    describe("organizationId", () => {
+      it("filters out ciphers that belong to an organization when MyVault is selected", (done) => {
+        const organization = { id: MY_VAULT_ID } as Organization;
+
+        service.filterFunction$.subscribe((filterFunction) => {
+          expect(filterFunction(ciphers)).toEqual([ciphers[0], ciphers[2], ciphers[3]]);
+          done();
+        });
+
+        service.filterForm.patchValue({ organization });
+      });
+
+      it("filters out ciphers that do not belong to the selected organization", (done) => {
+        const organization = { id: "8978" } as Organization;
+
+        service.filterFunction$.subscribe((filterFunction) => {
+          expect(filterFunction(ciphers)).toEqual([ciphers[1]]);
+          done();
+        });
+
+        service.filterForm.patchValue({ organization });
+      });
+    });
+  });
+});
--- a/apps/browser/src/vault/popup/services/vault-popup-list-filters.service.ts
+++ b/apps/browser/src/vault/popup/services/vault-popup-list-filters.service.ts
@@ -0,0 +1,371 @@
+import { Injectable } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { FormBuilder } from "@angular/forms";
+import {
+  Observable,
+  combineLatest,
+  distinctUntilChanged,
+  map,
+  startWith,
+  switchMap,
+  tap,
+} from "rxjs";
+
+import { DynamicTreeNode } from "@bitwarden/angular/vault/vault-filter/models/dynamic-tree-node.model";
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
+import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+import { ProductType } from "@bitwarden/common/enums";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { Utils } from "@bitwarden/common/platform/misc/utils";
+import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
+import { CollectionService } from "@bitwarden/common/vault/abstractions/collection.service";
+import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
+import { CipherType } from "@bitwarden/common/vault/enums";
+import { Collection } from "@bitwarden/common/vault/models/domain/collection";
+import { ITreeNodeObject, TreeNode } from "@bitwarden/common/vault/models/domain/tree-node";
+import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { CollectionView } from "@bitwarden/common/vault/models/view/collection.view";
+import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
+import { ServiceUtils } from "@bitwarden/common/vault/service-utils";
+import { ChipSelectOption } from "@bitwarden/components";
+
+/** All available cipher filters */
+export type PopupListFilter = {
+  organization: Organization | null;
+  collection: Collection | null;
+  folder: FolderView | null;
+  cipherType: CipherType | null;
+};
+
+/** Delimiter that denotes a level of nesting  */
+const NESTING_DELIMITER = "/";
+
+/** Id assigned to the "My vault" organization */
+export const MY_VAULT_ID = "MyVault";
+
+const INITIAL_FILTERS: PopupListFilter = {
+  organization: null,
+  collection: null,
+  folder: null,
+  cipherType: null,
+};
+
+@Injectable({
+  providedIn: "root",
+})
+export class VaultPopupListFiltersService {
+  /**
+   * UI form for all filters
+   */
+  filterForm = this.formBuilder.group<PopupListFilter>(INITIAL_FILTERS);
+
+  /**
+   * Observable for `filterForm` value
+   */
+  filters$ = this.filterForm.valueChanges.pipe(
+    startWith(INITIAL_FILTERS),
+  ) as Observable<PopupListFilter>;
+
+  /**
+   * Static list of ciphers views used in synchronous context
+   */
+  private cipherViews: CipherView[] = [];
+
+  /**
+   * Observable of cipher views
+   */
+  private cipherViews$: Observable<CipherView[]> = this.cipherService.cipherViews$.pipe(
+    tap((cipherViews) => {
+      this.cipherViews = Object.values(cipherViews);
+    }),
+    map((ciphers) => Object.values(ciphers)),
+  );
+
+  constructor(
+    private folderService: FolderService,
+    private cipherService: CipherService,
+    private organizationService: OrganizationService,
+    private i18nService: I18nService,
+    private collectionService: CollectionService,
+    private formBuilder: FormBuilder,
+  ) {
+    this.filterForm.controls.organization.valueChanges
+      .pipe(takeUntilDestroyed())
+      .subscribe(this.validateOrganizationChange.bind(this));
+  }
+
+  /**
+   * Observable whose value is a function that filters an array of `CipherView` objects based on the current filters
+   */
+  filterFunction$: Observable<(ciphers: CipherView[]) => CipherView[]> = this.filters$.pipe(
+    map(
+      (filters) => (ciphers: CipherView[]) =>
+        ciphers.filter((cipher) => {
+          if (filters.cipherType !== null && cipher.type !== filters.cipherType) {
+            return false;
+          }
+
+          if (
+            filters.collection !== null &&
+            !cipher.collectionIds.includes(filters.collection.id)
+          ) {
+            return false;
+          }
+
+          if (filters.folder !== null && cipher.folderId !== filters.folder.id) {
+            return false;
+          }
+
+          const isMyVault = filters.organization?.id === MY_VAULT_ID;
+
+          if (isMyVault) {
+            if (cipher.organizationId !== null) {
+              return false;
+            }
+          } else if (filters.organization !== null) {
+            if (cipher.organizationId !== filters.organization.id) {
+              return false;
+            }
+          }
+
+          return true;
+        }),
+    ),
+  );
+
+  /**
+   * All available cipher types
+   */
+  readonly cipherTypes: ChipSelectOption<CipherType>[] = [
+    {
+      value: CipherType.Login,
+      label: this.i18nService.t("logins"),
+      icon: "bwi-globe",
+    },
+    {
+      value: CipherType.Card,
+      label: this.i18nService.t("cards"),
+      icon: "bwi-credit-card",
+    },
+    {
+      value: CipherType.Identity,
+      label: this.i18nService.t("identities"),
+      icon: "bwi-id-card",
+    },
+    {
+      value: CipherType.SecureNote,
+      label: this.i18nService.t("notes"),
+      icon: "bwi-sticky-note",
+    },
+  ];
+
+  /** Resets `filterForm` to the original state */
+  resetFilterForm(): void {
+    this.filterForm.reset(INITIAL_FILTERS);
+  }
+
+  /**
+   * Organization array structured to be directly passed to `ChipSelectComponent`
+   */
+  organizations$: Observable<ChipSelectOption<Organization>[]> =
+    this.organizationService.memberOrganizations$.pipe(
+      map((orgs) => orgs.sort(Utils.getSortFunction(this.i18nService, "name"))),
+      map((orgs) => {
+        if (!orgs.length) {
+          return [];
+        }
+
+        return [
+          // When the user is a member of an organization, make  the "My Vault" option available
+          {
+            value: { id: MY_VAULT_ID } as Organization,
+            label: this.i18nService.t("myVault"),
+            icon: "bwi-user",
+          },
+          ...orgs.map((org) => {
+            let icon = "bwi-business";
+
+            if (!org.enabled) {
+              // Show a warning icon if the organization is deactivated
+              icon = "bwi-exclamation-triangle tw-text-danger";
+            } else if (org.planProductType === ProductType.Families) {
+              // Show a family icon if the organization is a family org
+              icon = "bwi-family";
+            }
+
+            return {
+              value: org,
+              label: org.name,
+              icon,
+            };
+          }),
+        ];
+      }),
+    );
+
+  /**
+   * Folder array structured to be directly passed to `ChipSelectComponent`
+   */
+  folders$: Observable<ChipSelectOption<string>[]> = combineLatest([
+    this.filters$.pipe(
+      distinctUntilChanged(
+        (previousFilter, currentFilter) =>
+          // Only update the collections when the organizationId filter changes
+          previousFilter.organization?.id === currentFilter.organization?.id,
+      ),
+    ),
+    this.folderService.folderViews$,
+    this.cipherViews$,
+  ]).pipe(
+    map(([filters, folders, cipherViews]): [PopupListFilter, FolderView[], CipherView[]] => {
+      if (folders.length === 1 && folders[0].id === null) {
+        // Do not display folder selections when only the "no folder" option is available.
+        return [filters, [], cipherViews];
+      }
+
+      // Sort folders by alphabetic name
+      folders.sort(Utils.getSortFunction(this.i18nService, "name"));
+      let arrangedFolders = folders;
+
+      const noFolder = folders.find((f) => f.id === null);
+
+      if (noFolder) {
+        // Update `name` of the "no folder" option to "Items with no folder"
+        noFolder.name = this.i18nService.t("itemsWithNoFolder");
+
+        // Move the "no folder" option to the end of the list
+        arrangedFolders = [...folders.filter((f) => f.id !== null), noFolder];
+      }
+      return [filters, arrangedFolders, cipherViews];
+    }),
+    map(([filters, folders, cipherViews]) => {
+      const organizationId = filters.organization?.id ?? null;
+
+      // When no org or "My vault" is selected, return all folders
+      if (organizationId === null || organizationId === MY_VAULT_ID) {
+        return folders;
+      }
+
+      const orgCiphers = cipherViews.filter((c) => c.organizationId === organizationId);
+
+      // Return only the folders that have ciphers within the filtered organization
+      return folders.filter((f) => orgCiphers.some((oc) => oc.folderId === f.id));
+    }),
+    map((folders) => {
+      const nestedFolders = this.getAllFoldersNested(folders);
+      return new DynamicTreeNode<FolderView>({
+        fullList: folders,
+        nestedList: nestedFolders,
+      });
+    }),
+    map((folders) => folders.nestedList.map(this.convertToChipSelectOption.bind(this))),
+  );
+
+  /**
+   * Collection array structured to be directly passed to `ChipSelectComponent`
+   */
+  collections$: Observable<ChipSelectOption<string>[]> = combineLatest([
+    this.filters$.pipe(
+      distinctUntilChanged(
+        (previousFilter, currentFilter) =>
+          // Only update the collections when the organizationId filter changes
+          previousFilter.organization?.id === currentFilter.organization?.id,
+      ),
+    ),
+    this.collectionService.decryptedCollections$,
+  ]).pipe(
+    map(([filters, allCollections]) => {
+      const organizationId = filters.organization?.id ?? null;
+      // When the organization filter is selected, filter out collections that do not belong to the selected organization
+      const collections =
+        organizationId === null
+          ? allCollections
+          : allCollections.filter((c) => c.organizationId === organizationId);
+
+      return collections;
+    }),
+    switchMap(async (collections) => {
+      const nestedCollections = await this.collectionService.getAllNested(collections);
+
+      return new DynamicTreeNode<CollectionView>({
+        fullList: collections,
+        nestedList: nestedCollections,
+      });
+    }),
+    map((collections) => collections.nestedList.map(this.convertToChipSelectOption.bind(this))),
+  );
+
+  /**
+   * Converts the given item into the `ChipSelectOption` structure
+   */
+  private convertToChipSelectOption<T extends ITreeNodeObject>(
+    item: TreeNode<T>,
+  ): ChipSelectOption<T> {
+    return {
+      value: item.node,
+      label: item.node.name,
+      icon: "bwi-folder", // Organization & Folder icons are the same
+      children: item.children
+        ? item.children.map(this.convertToChipSelectOption.bind(this))
+        : undefined,
+    };
+  }
+
+  /**
+   * Returns a nested folder structure based on the input FolderView array
+   */
+  private getAllFoldersNested(folders: FolderView[]): TreeNode<FolderView>[] {
+    const nodes: TreeNode<FolderView>[] = [];
+
+    folders.forEach((f) => {
+      const folderCopy = new FolderView();
+      folderCopy.id = f.id;
+      folderCopy.revisionDate = f.revisionDate;
+
+      // Remove "/" from beginning and end of the folder name
+      // then split the folder name by the delimiter
+      const parts = f.name != null ? f.name.replace(/^\/+|\/+$/g, "").split(NESTING_DELIMITER) : [];
+      ServiceUtils.nestedTraverse(nodes, 0, parts, folderCopy, null, NESTING_DELIMITER);
+    });
+
+    return nodes;
+  }
+
+  /**
+   * Validate collection & folder filters when the organization filter changes
+   */
+  private validateOrganizationChange(organization: Organization | null): void {
+    if (!organization) {
+      return;
+    }
+
+    const currentFilters = this.filterForm.getRawValue();
+
+    // When the organization filter changes and a collection is already selected,
+    // reset the collection filter if the collection does not belong to the new organization filter
+    if (currentFilters.collection && currentFilters.collection.organizationId !== organization.id) {
+      this.filterForm.get("collection").setValue(null);
+    }
+
+    // When the organization filter changes and a folder is already selected,
+    // reset the folder filter if the folder does not belong to the new organization filter
+    if (
+      currentFilters.folder &&
+      currentFilters.folder.id !== null &&
+      organization.id !== MY_VAULT_ID
+    ) {
+      // Get all ciphers that belong to the new organization
+      const orgCiphers = this.cipherViews.filter((c) => c.organizationId === organization.id);
+
+      // Find any ciphers within the organization that belong to the current folder
+      const newOrgContainsFolder = orgCiphers.some(
+        (oc) => oc.folderId === currentFilters.folder.id,
+      );
+
+      // If the new organization does not contain the current folder, reset the folder filter
+      if (!newOrgContainsFolder) {
+        this.filterForm.get("folder").setValue(null);
+      }
+    }
+  }
+}
--- a/apps/browser/test.setup.ts
+++ b/apps/browser/test.setup.ts
@@ -1,3 +1,5 @@
+import "jest-preset-angular/setup-jest";
+
 // Add chrome storage api
 const QUOTA_BYTES = 10;
 const storage = {