- created 'All vaults' group nav item to reset 'My vault' and 'Organization's

- changed 'All items' to a group nav item
- fixed issue where 'My vault' items were disappearing on page reload

apps/desktop/src/vault/app/vault-v3/vault-filter/filters/organization-filter.component.html

@@ -1,21 +1,30 @@
 @if (show()) {
-  @for (organization of organizations().children ?? []; track organization.node.id) {
-    <bit-nav-item
-      [icon]="organization.node.icon"
-      [forceActiveStyles]="organization.node.id === activeFilter()?.organizationId"
-      [text]="organization.node.name"
-      variant="tree"
-      [appA11yTitle]="organization.node.name"
-      (click)="applyFilter(organization)"
-    />
-    @if (!organization.node.enabled) {
-      <span class="tw-ml-auto">
-        <i
-          class="bwi bwi-fw bwi-exclamation-triangle text-danger mr-auto"
-          [attr.aria-label]="'organizationIsDisabled' | i18n"
-          [appA11yTitle]="'organizationIsDisabled' | i18n"
-        ></i>
-      </span>
+  <bit-nav-group
+    icon="bwi-filter"
+    (click)="applyAllVaultsFilter()"
+    [text]="'allVaults' | i18n"
+    [attr.aria-pressed]="activeFilter()?.organizationId === null"
+    [appA11yTitle]="'allVaults' | i18n"
+    variant="tree"
+    [open]="true"
+  >
+    @for (organization of organizations().children ?? []; track organization.node.id) {
+      <bit-nav-item
+        [icon]="organization.node.icon"
+        [forceActiveStyles]="organization.node.id === activeFilter()?.organizationId"
+        [text]="organization.node.name"
+        [appA11yTitle]="organization.node.name"
+        (click)="applyFilter($event, organization)"
+      />
+      @if (!organization.node.enabled) {
+        <span class="tw-ml-auto">
+          <i
+            class="bwi bwi-fw bwi-exclamation-triangle text-danger mr-auto"
+            [attr.aria-label]="'organizationIsDisabled' | i18n"
+            [appA11yTitle]="'organizationIsDisabled' | i18n"
+          ></i>
+        </span>
+      }
     }
-  }
+  </bit-nav-group>
 }

apps/desktop/src/vault/app/vault-v3/vault-filter/filters/organization-filter.component.ts

@@ -51,7 +51,8 @@ export class OrganizationFilterComponent {
     return displayMode;
   });
 
-  protected applyFilter(organization: TreeNode<OrganizationFilter>) {
+  protected applyFilter(event: Event, organization: TreeNode<OrganizationFilter>) {
+    event.stopPropagation();
     if (!organization.node.enabled) {
       this.toastService.showToast({
         variant: "error",
@@ -68,4 +69,13 @@ export class OrganizationFilterComponent {
       filter.selectedOrganizationNode = organization;
     }
   }
+
+  protected applyAllVaultsFilter() {
+    this.vaultFilterService.clearOrganizationFilter();
+    const filter = this.activeFilter();
+
+    if (filter) {
+      filter.selectedOrganizationNode = null;
+    }
+  }
 }

apps/desktop/src/vault/app/vault-v3/vault-filter/filters/type-filter.component.html

@@ -1,18 +1,24 @@
-<bit-nav-item
+<bit-nav-group
   icon="bwi-filter"
-  [forceActiveStyles]="activeFilter()?.selectedCipherTypeNode?.node?.id === 'AllItems'"
-  (click)="applyAllItemsFilter()"
+  (click)="applyAllItemsFilter($event)"
   [text]="'allItems' | i18n"
   [attr.aria-pressed]="activeFilter()?.selectedCipherTypeNode?.node?.id === 'AllItems'"
   [appA11yTitle]="'allItems' | i18n"
-/>
-@for (typeFilter of typeFilters$ | async; track typeFilter) {
-  <bit-nav-item
-    [icon]="typeFilter.node.icon"
-    [forceActiveStyles]="activeFilter()?.selectedCipherTypeNode.node.type === typeFilter.node.type"
-    (click)="applyTypeFilter(typeFilter)"
-    [text]="typeFilter.node.name"
-    [attr.aria-pressed]="activeFilter()?.selectedCipherTypeNode.node.type === typeFilter.node.type"
-    [appA11yTitle]="typeFilter.node.name"
-  />
-}
+  variant="tree"
+  [open]="true"
+>
+  @for (typeFilter of typeFilters$ | async; track typeFilter) {
+    <bit-nav-item
+      [icon]="typeFilter.node.icon"
+      [forceActiveStyles]="
+        activeFilter()?.selectedCipherTypeNode.node.type === typeFilter.node.type
+      "
+      (click)="applyTypeFilter($event, typeFilter)"
+      [text]="typeFilter.node.name"
+      [attr.aria-pressed]="
+        activeFilter()?.selectedCipherTypeNode.node.type === typeFilter.node.type
+      "
+      [appA11yTitle]="typeFilter.node.name"
+    />
+  }
+</bit-nav-group>

apps/desktop/src/vault/app/vault-v3/vault-filter/filters/type-filter.component.ts

@@ -23,7 +23,8 @@ export class TypeFilterComponent {
   protected readonly cipherTypes = input<TreeNode<CipherTypeFilter>>();
   protected readonly activeFilter = input<VaultFilter>();
 
-  protected applyTypeFilter(cipherType: TreeNode<CipherTypeFilter>) {
+  protected applyTypeFilter(event: Event, cipherType: TreeNode<CipherTypeFilter>) {
+    event.stopPropagation();
     const filter = this.activeFilter();
 
     if (filter) {
@@ -31,7 +32,7 @@ export class TypeFilterComponent {
     }
   }
 
-  protected applyAllItemsFilter() {
+  protected applyAllItemsFilter(event: Event) {
     const filter = this.activeFilter();
 
     if (filter) {

apps/desktop/src/vault/app/vault-v3/vault-filter/vault-filter.component.ts

@@ -111,7 +111,6 @@ export class VaultFilterComponent implements OnInit {
       this.cipherArchiveService.hasArchiveFlagEnabled$,
     );
 
-    // Subscribe to the active filter from the bridge service
     this.routedVaultFilterBridgeService.activeFilter$
       .pipe(takeUntil(this.componentIsDestroyed$))
       .subscribe((filter) => {

apps/desktop/src/vault/app/vault-v3/vault.component.ts

@@ -273,8 +273,7 @@ export class VaultComponent implements OnInit, OnDestroy, CopyClickListener {
                 break;
               case "syncCompleted":
                 if (this.vaultItemsComponent) {
-                  const filter = this.activeFilter.buildFilter();
-                  await this.vaultItemsComponent.reload(filter).catch(() => {});
+                  await this.vaultItemsComponent.refresh().catch(() => {});
                 }
                 break;
               case "modalShown":