Enhance new cipher menu button behavior and accessibility. Implement dynamic button label based on creation permissions, allowing direct collection creation when applicable. Update button trigger logic to improve user experience.

libs/vault/src/components/new-cipher-menu/new-cipher-menu.component.html

@@ -4,12 +4,13 @@
       bitButton
       buttonType="primary"
       type="button"
-      [bitMenuTriggerFor]="addOptions"
+      [bitMenuTriggerFor]="isOnlyCollectionCreation() ? null : addOptions"
+      (click)="handleButtonClick()"
       id="newItemDropdown"
-      [appA11yTitle]="'new' | i18n"
+      [appA11yTitle]="getButtonLabel() | i18n"
     >
       <i class="bwi bwi-plus tw-me-2" aria-hidden="true"></i>
-      {{ "new" | i18n }}
+      {{ getButtonLabel() | i18n }}
     </button>
     <bit-menu #addOptions aria-labelledby="newItemDropdown">
       @for (item of cipherMenuItems$ | async; track item.type) {

libs/vault/src/components/new-cipher-menu/new-cipher-menu.component.ts

@@ -58,4 +58,40 @@ export class NewCipherMenuComponent {
     }),
     shareReplay({ bufferSize: 1, refCount: true }),
   );
+
+  /**
+   * Returns the appropriate button label based on what can be created.
+   * If only collections can be created (no ciphers or folders), show "New Collection".
+   * Otherwise, show "New".
+   */
+  protected getButtonLabel(): string {
+    const canCreateCipher = this.canCreateCipher();
+    const canCreateFolder = this.canCreateFolder();
+    const canCreateCollection = this.canCreateCollection();
+
+    // If only collections can be created, be specific
+    if (!canCreateCipher && !canCreateFolder && canCreateCollection) {
+      return "newCollection";
+    }
+
+    return "new";
+  }
+
+  /**
+   * Returns true if only collections can be created (no other options).
+   * When this is true, the button should directly create a collection instead of showing a dropdown.
+   */
+  protected isOnlyCollectionCreation(): boolean {
+    return !this.canCreateCipher() && !this.canCreateFolder() && this.canCreateCollection();
+  }
+
+  /**
+   * Handles the button click. If only collections can be created, directly emit the collection event.
+   * Otherwise, the menu trigger will handle opening the dropdown.
+   */
+  protected handleButtonClick(): void {
+    if (this.isOnlyCollectionCreation()) {
+      this.collectionAdded.emit();
+    }
+  }
 }