Explore bulk actions (#15307)

* use id instead of index for object details and scrolling

* long press package and hook

* fix long press in review

* search action group

* multi select in explore

* add bulk deletion to backend api

* clean up

* mimic behavior of review

* don't open dialog on left click when mutli selecting

* context menu on container ref

* revert long press code

* clean up

web/src/components/card/SearchThumbnail.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from "react";
+import { useMemo } from "react";
 import { useApiHost } from "@/api";
 import { getIconForLabel } from "@/utils/iconUtil";
 import useSWR from "swr";
@@ -12,10 +12,11 @@ import { capitalizeFirstLetter } from "@/utils/stringUtil";
 import { SearchResult } from "@/types/search";
 import { cn } from "@/lib/utils";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
+import useContextMenu from "@/hooks/use-contextmenu";
 
 type SearchThumbnailProps = {
   searchResult: SearchResult;
-  onClick: (searchResult: SearchResult) => void;
+  onClick: (searchResult: SearchResult, ctrl: boolean, detail: boolean) => void;
 };
 
 export default function SearchThumbnail({
@@ -28,9 +29,9 @@ export default function SearchThumbnail({
 
   // interactions
 
-  const handleOnClick = useCallback(() => {
-    onClick(searchResult);
-  }, [searchResult, onClick]);
+  useContextMenu(imgRef, () => {
+    onClick(searchResult, true, false);
+  });
 
   const objectLabel = useMemo(() => {
     if (
@@ -45,7 +46,10 @@ export default function SearchThumbnail({
   }, [config, searchResult]);
 
   return (
-    <div className="relative size-full cursor-pointer" onClick={handleOnClick}>
+    <div
+      className="relative size-full cursor-pointer"
+      onClick={() => onClick(searchResult, false, true)}
+    >
       <ImageLoadingIndicator
         className="absolute inset-0"
         imgLoaded={imgLoaded}
@@ -79,7 +83,7 @@ export default function SearchThumbnail({
                 <div className="mx-3 pb-1 text-sm text-white">
                   <Chip
                     className={`z-0 flex items-center justify-between gap-1 space-x-1 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500 text-xs`}
-                    onClick={() => onClick(searchResult)}
+                    onClick={() => onClick(searchResult, false, true)}
                   >
                     {getIconForLabel(objectLabel, "size-3 text-white")}
                     {Math.round(