added 'edit folder' button and functionality to folders

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

@@ -7,6 +7,18 @@
     [appA11yTitle]="displayName()"
     (click)="applyFilter($event)"
   >
+    @if (folder()?.node.id) {
+      <button
+        type="button"
+        slot="end"
+        class="edit-button"
+        [bitIconButton]="'bwi-pencil'"
+        [buttonType]="'nav-contrast'"
+        size="small"
+        label="'editFolder' | i18n"
+        (click)="editFolder(folder().node)"
+      ></button>
+    }
     @for (childFolder of folder().children; track childFolder.node.id) {
       <app-folder-filter [folder]="childFolder" [activeFilter]="activeFilter()" />
     }
@@ -19,5 +31,18 @@
     [variant]="'tree'"
     [appA11yTitle]="displayName()"
     (click)="applyFilter($event)"
-  />
+  >
+    @if (folder()?.node.id) {
+      <button
+        type="button"
+        slot="end"
+        class="edit-button"
+        [bitIconButton]="'bwi-pencil'"
+        [buttonType]="'nav-contrast'"
+        size="small"
+        label="'editFolder' | i18n"
+        (click)="editFolder(folder().node)"
+      ></button>
+    }
+  </bit-nav-item>
 }

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

@@ -1,6 +1,7 @@
-import { Component, input, computed } from "@angular/core";
+import { Component, input, computed, output } from "@angular/core";
 
 import { TreeNode } from "@bitwarden/common/vault/models/domain/tree-node";
+import { IconButtonModule } from "@bitwarden/components";
 import { VaultFilter, FolderFilter } from "@bitwarden/vault";
 
 import { VAULT_FILTER_IMPORTS } from "../shared-filter-imports";
@@ -11,11 +12,12 @@ import { VAULT_FILTER_IMPORTS } from "../shared-filter-imports";
   selector: "app-folder-filter",
   templateUrl: "folder-filter.component.html",
   standalone: true,
-  imports: [...VAULT_FILTER_IMPORTS],
+  imports: [...VAULT_FILTER_IMPORTS, IconButtonModule],
 })
 export class FolderFilterComponent {
   protected readonly folder = input<TreeNode<FolderFilter>>();
   protected readonly activeFilter = input<VaultFilter>();
+  protected onEditFolder = output<FolderFilter>();
 
   protected readonly displayName = computed<string>(() => {
     return this.folder().node.name;
@@ -36,4 +38,8 @@ export class FolderFilterComponent {
       filter.selectedFolderNode = this.folder();
     }
   }
+
+  protected editFolder(folder: FolderFilter) {
+    this.onEditFolder.emit(folder);
+  }
 }

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

@@ -22,7 +22,11 @@
     @if (!hideFolders()) {
       <bit-nav-group [icon]="'bwi-folder'" [text]="'folders' | i18n" [variant]="'tree'">
         @for (folder of (folders$ | async)?.children ?? []; track folder.node.id) {
-          <app-folder-filter [activeFilter]="activeFilter" [folder]="folder" />
+          <app-folder-filter
+            [activeFilter]="activeFilter"
+            [folder]="folder"
+            (onEditFolder)="editFolder($event)"
+          />
         }
       </bit-nav-group>
     }

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

@@ -8,8 +8,9 @@ import { AccountService } from "@bitwarden/common/auth/abstractions/account.serv
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { UserId } from "@bitwarden/common/types/guid";
 import { CipherArchiveService } from "@bitwarden/common/vault/abstractions/cipher-archive.service";
+import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
 import { TreeNode } from "@bitwarden/common/vault/models/domain/tree-node";
-import { NavigationModule } from "@bitwarden/components";
+import { NavigationModule, DialogService } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 import {
   OrganizationFilter,
@@ -19,6 +20,7 @@ import {
   VaultFilter,
   VaultFilterServiceAbstraction as VaultFilterService,
   RoutedVaultFilterBridgeService,
+  AddEditFolderDialogComponent,
 } from "@bitwarden/vault";
 
 import { FolderFilterComponent } from "./filters/folder-filter.component";
@@ -47,7 +49,9 @@ export class VaultFilterComponent implements OnInit {
   private vaultFilterService: VaultFilterService = inject(VaultFilterService);
   private accountService: AccountService = inject(AccountService);
   private cipherArchiveService: CipherArchiveService = inject(CipherArchiveService);
+  private folderService: FolderService = inject(FolderService);
   private policyService: PolicyService = inject(PolicyService);
+  private dialogService: DialogService = inject(DialogService);
   private componentIsDestroyed$ = new Subject<boolean>();
 
   protected activeFilter: VaultFilter;
@@ -106,4 +110,25 @@ export class VaultFilterComponent implements OnInit {
 
     this.isLoaded = true;
   }
+
+  protected async editFolder(folder: FolderFilter) {
+    if (!this.activeUserId) {
+      return;
+    }
+    const folderView = await firstValueFrom(
+      this.folderService.getDecrypted$(folder.id, this.activeUserId),
+    );
+
+    if (!folderView) {
+      return;
+    }
+
+    AddEditFolderDialogComponent.open(this.dialogService, {
+      editFolderConfig: {
+        folder: {
+          ...folderView,
+        },
+      },
+    });
+  }
 }