[PM-10128] [BEEEP] Add Right-Click Menu Options to Vault (#10954)

* Added right click functionality on cipher row

* Updated menu directive to position menu option on mouse event location

* Updated menu directive to reopen menu option on new mouse event location and close previously opened menu-option

* removed preventdefault call

* Added new events for favorite and edit cipher

* Added new menu options favorite, edit cipher

Added new copy options for the other cipher types

Simplified the copy by using the copy cipher field directive

* Listen to new events

* Refactored parameter to be MouseEvent

* Added locales

* Remove the backdrop from `MenuTriggerForDirective`

* Handle the Angular overlay's outside pointer events

* Cleaned up cipher row component as copy functions and disable menu functions would not be needed anymore

* Fixed bug with right clicking on a row

* Add right click to collections

* Disable backdrop on right click

* Fixed bug where dvivided didn't show for secure notes

* Added comments to enable to disable context menu

* Removed conditionals

* Removed preferences setting to enable to disable setting

* Removed setting from right click listener

* improve context menu positioning to prevent viewport clipping

* Keep icon consisten when favorite or not

* fixed prettier issues

* removed duplicate translation keys

* Fix favorite status not persisting by toggling in handleFavoriteEvent

* Addressed claude comments

* Added comment to variable

---------

Co-authored-by: Addison Beck <github@addisonbeck.com>

libs/components/src/menu/menu-trigger-for.directive.ts

@@ -1,5 +1,5 @@
 import { hasModifierKey } from "@angular/cdk/keycodes";
-import { Overlay, OverlayConfig, OverlayRef } from "@angular/cdk/overlay";
+import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from "@angular/cdk/overlay";
 import { TemplatePortal } from "@angular/cdk/portal";
 import {
   Directive,
@@ -10,11 +10,46 @@ import {
   ViewContainerRef,
   input,
 } from "@angular/core";
-import { Observable, Subscription } from "rxjs";
-import { filter, mergeWith } from "rxjs/operators";
+import { merge, Subscription } from "rxjs";
+import { filter, skip, takeUntil } from "rxjs/operators";
 
 import { MenuComponent } from "./menu.component";
 
+/**
+ * Position strategies for context menus.
+ * Tries positions in order: below-right, above-right, below-left, above-left
+ */
+const CONTEXT_MENU_POSITIONS: ConnectedPosition[] = [
+  // below-right
+  {
+    originX: "start",
+    originY: "top",
+    overlayX: "start",
+    overlayY: "top",
+  },
+  // above-right
+  {
+    originX: "start",
+    originY: "bottom",
+    overlayX: "start",
+    overlayY: "bottom",
+  },
+  // below-left
+  {
+    originX: "end",
+    originY: "top",
+    overlayX: "end",
+    overlayY: "top",
+  },
+  // above-left
+  {
+    originX: "end",
+    originY: "bottom",
+    overlayX: "end",
+    overlayY: "bottom",
+  },
+];
+
 @Directive({
   selector: "[bitMenuTriggerFor]",
   exportAs: "menuTrigger",
@@ -52,6 +87,7 @@ export class MenuTriggerForDirective implements OnDestroy {
   };
   private closedEventsSub: Subscription | null = null;
   private keyDownEventsSub: Subscription | null = null;
+  private menuCloseListenerSub: Subscription | null = null;
 
   constructor(
     private elementRef: ElementRef<HTMLElement>,
@@ -63,37 +99,49 @@ export class MenuTriggerForDirective implements OnDestroy {
     this.isOpen ? this.destroyMenu() : this.openMenu();
   }
 
+  /**
+   * Toggles the menu on right click event.
+   * If the menu is already open, it updates the menu position.
+   * @param event The MouseEvent from the right-click interaction
+   */
+  toggleMenuOnRightClick(event: MouseEvent) {
+    event.preventDefault(); // Prevent default context menu
+    this.isOpen ? this.updateMenuPosition(event) : this.openMenu(event);
+  }
+
   ngOnDestroy() {
     this.disposeAll();
   }
 
-  private openMenu() {
+  private openMenu(event?: MouseEvent) {
     const menu = this.menu();
     if (menu == null) {
       throw new Error("Cannot find bit-menu element");
     }
 
     this.isOpen = true;
-    this.overlayRef = this.overlay.create(this.defaultMenuConfig);
+
+    const positionStrategy = event
+      ? this.overlay
+          .position()
+          .flexibleConnectedTo({ x: event.clientX, y: event.clientY })
+          .withPositions(CONTEXT_MENU_POSITIONS)
+          .withLockedPosition(false)
+          .withFlexibleDimensions(false)
+          .withPush(true)
+      : this.defaultMenuConfig.positionStrategy;
+
+    const config = { ...this.defaultMenuConfig, positionStrategy, hasBackdrop: !event };
+
+    this.overlayRef = this.overlay.create(config);
 
     const templatePortal = new TemplatePortal(menu.templateRef(), this.viewContainerRef);
     this.overlayRef.attach(templatePortal);
 
-    this.closedEventsSub =
-      this.getClosedEvents()?.subscribe((event: KeyboardEvent | undefined) => {
-        // Closing the menu is handled in this.destroyMenu, so we want to prevent the escape key
-        // from doing its normal default action, which would otherwise cause a parent component
-        // (like a dialog) or extension window to close
-        if (event?.key === "Escape" && !hasModifierKey(event)) {
-          event.preventDefault();
-        }
-
-        if (event?.key && ["Tab", "Escape"].includes(event.key)) {
-          // Required to ensure tab order resumes correctly
-          this.elementRef.nativeElement.focus();
-        }
-        this.destroyMenu();
-      }) ?? null;
+    // Context menus are opened with a MouseEvent
+    const isContextMenu = !!event;
+    this.setupClosingActions(isContextMenu);
+    this.setupMenuCloseListener();
 
     if (menu.keyManager) {
       menu.keyManager.setFirstItemActive();
@@ -103,6 +151,32 @@ export class MenuTriggerForDirective implements OnDestroy {
     }
   }
 
+  /**
+   * Updates the position of the menu overlay based on the mouse event coordinates.
+   * This is typically called when the menu is already open and the user right-clicks again,
+   * allowing the menu to reposition itself to the new cursor location.
+   * @param event The MouseEvent containing the new clientX and clientY coordinates
+   */
+  private updateMenuPosition(event: MouseEvent) {
+    if (this.overlayRef == null) {
+      return;
+    }
+
+    const positionStrategy = this.overlay
+      .position()
+      .flexibleConnectedTo({ x: event.clientX, y: event.clientY })
+      .withPositions([
+        {
+          originX: "start",
+          originY: "top",
+          overlayX: "start",
+          overlayY: "top",
+        },
+      ]);
+
+    this.overlayRef.updatePositionStrategy(positionStrategy);
+  }
+
   private destroyMenu() {
     if (this.overlayRef == null || !this.isOpen) {
       return;
@@ -113,26 +187,63 @@ export class MenuTriggerForDirective implements OnDestroy {
     this.menu().closed.emit();
   }
 
-  private getClosedEvents(): Observable<any> | null {
+  private setupClosingActions(isContextMenu: boolean) {
     if (!this.overlayRef) {
-      return null;
+      return;
     }
-    const detachments = this.overlayRef.detachments();
+
     const escKey = this.overlayRef.keydownEvents().pipe(
       filter((event: KeyboardEvent) => {
         const keys = this.menu().ariaRole() === "menu" ? ["Escape", "Tab"] : ["Escape"];
         return keys.includes(event.key);
       }),
     );
-    const backdrop = this.overlayRef.backdropClick();
     const menuClosed = this.menu().closed;
+    const detachments = this.overlayRef.detachments();
 
-    return detachments.pipe(mergeWith(escKey, backdrop, menuClosed));
+    const closeEvents = isContextMenu
+      ? merge(detachments, escKey, menuClosed)
+      : merge(detachments, escKey, this.overlayRef.backdropClick(), menuClosed);
+
+    this.closedEventsSub = closeEvents
+      .pipe(takeUntil(this.overlayRef.detachments()))
+      .subscribe((event) => {
+        // Closing the menu is handled in this.destroyMenu, so we want to prevent the escape key
+        // from doing its normal default action, which would otherwise cause a parent component
+        // (like a dialog) or extension window to close
+        if (event instanceof KeyboardEvent && event.key === "Escape" && !hasModifierKey(event)) {
+          event.preventDefault();
+        }
+
+        if (event instanceof KeyboardEvent && (event.key === "Tab" || event.key === "Escape")) {
+          this.elementRef.nativeElement.focus();
+        }
+        this.destroyMenu();
+      });
+  }
+
+  /**
+   * Sets up a listener for clicks outside the menu overlay.
+   * We skip(1) because the initial right-click event that opens the menu is also
+   * considered an outside click event, which would immediately close the menu
+   */
+  private setupMenuCloseListener() {
+    if (!this.overlayRef) {
+      return;
+    }
+
+    this.menuCloseListenerSub = this.overlayRef
+      .outsidePointerEvents()
+      .pipe(skip(1), takeUntil(this.overlayRef.detachments()))
+      .subscribe((_) => {
+        this.destroyMenu();
+      });
   }
 
   private disposeAll() {
     this.closedEventsSub?.unsubscribe();
-    this.overlayRef?.dispose();
     this.keyDownEventsSub?.unsubscribe();
+    this.menuCloseListenerSub?.unsubscribe();
+    this.overlayRef?.dispose();
   }
 }