From 6388a72220b89b4382dc308e03beeda41d5f2888 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 18 Mar 2025 07:52:19 -0600
Subject: [PATCH] Add right click as well

---
 web/src/pages/FaceLibrary.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/FaceLibrary.tsx b/web/src/pages/FaceLibrary.tsx
index 9d4ac3857..3ad8c71b9 100644
--- a/web/src/pages/FaceLibrary.tsx
+++ b/web/src/pages/FaceLibrary.tsx
@@ -20,6 +20,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import useContextMenu from "@/hooks/use-contextmenu";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
 import useOptimisticState from "@/hooks/use-optimistic-state";
 import { cn } from "@/lib/utils";
@@ -374,6 +375,16 @@ function FaceAttempt({
     };
   }, [image]);
 
+  // interaction
+
+  const imgRef = useRef<HTMLImageElement | null>(null);
+
+  useContextMenu(imgRef, () => {
+    onClick(true);
+  });
+
+  // api calls
+
   const onTrainAttempt = useCallback(
     (trainName: string) => {
       axios
@@ -429,10 +440,14 @@ function FaceAttempt({
           ? "shadow-selected outline-selected"
           : "outline-transparent duration-500",
       )}
-      onClick={(e) => onClick(e.metaKey || e.ctrlKey)}
     >
       <div className="relative w-full overflow-hidden rounded-t-lg border border-t-0 *:text-card-foreground">
-        <img className="size-44" src={`${baseUrl}clips/faces/train/${image}`} />
+        <img
+          ref={imgRef}
+          className="size-44"
+          src={`${baseUrl}clips/faces/train/${image}`}
+          onClick={(e) => onClick(e.metaKey || e.ctrlKey)}
+        />
         <div className="absolute bottom-1 right-1 z-10 rounded-lg bg-black/50 px-2 py-1 text-xs text-white">
           <TimeAgo className="text-white" time={data.timestamp * 1000} dense />
         </div>