Reclassification (#22603)

* add ability to reclassify images

* add ability to reclassify faces

* work around radix pointer events issue again

web/src/components/overlay/FaceSelectionDialog.tsx

@@ -30,17 +30,29 @@ import { Button } from "../ui/button";
 type FaceSelectionDialogProps = {
   className?: string;
   faceNames: string[];
+  excludeName?: string;
+  dialogLabel?: string;
+  tooltipLabel?: string;
   onTrainAttempt: (name: string) => void;
   children: ReactNode;
 };
 export default function FaceSelectionDialog({
   className,
   faceNames,
+  excludeName,
+  dialogLabel,
+  tooltipLabel,
   onTrainAttempt,
   children,
 }: FaceSelectionDialogProps) {
   const { t } = useTranslation(["views/faceLibrary"]);
 
+  const filteredNames = useMemo(
+    () =>
+      excludeName ? faceNames.filter((n) => n !== excludeName) : faceNames,
+    [faceNames, excludeName],
+  );
+
   const isChildButton = useMemo(
     () => React.isValidElement(children) && children.type === Button,
     [children],
@@ -79,6 +91,7 @@ export default function FaceSelectionDialog({
           </SelectorTrigger>
           <SelectorContent
             className={cn("", isMobile && "mx-1 gap-2 rounded-t-2xl px-4")}
+            onCloseAutoFocus={(e) => e.preventDefault()}
           >
             {isMobile && (
               <DrawerHeader className="sr-only">
@@ -86,14 +99,16 @@ export default function FaceSelectionDialog({
                 <DrawerDescription>Details</DrawerDescription>
               </DrawerHeader>
             )}
-            <DropdownMenuLabel>{t("trainFaceAs")}</DropdownMenuLabel>
+            <DropdownMenuLabel>
+              {dialogLabel ?? t("trainFaceAs")}
+            </DropdownMenuLabel>
             <div
               className={cn(
                 "flex max-h-[40dvh] flex-col overflow-y-auto overflow-x-hidden",
                 isMobile && "gap-2 pb-4",
               )}
             >
-              {faceNames.sort().map((faceName) => (
+              {filteredNames.sort().map((faceName) => (
                 <SelectorItem
                   key={faceName}
                   className="flex cursor-pointer gap-2 smart-capitalize"
@@ -112,7 +127,7 @@ export default function FaceSelectionDialog({
             </div>
           </SelectorContent>
         </Selector>
-        <TooltipContent>{t("trainFace")}</TooltipContent>
+        <TooltipContent>{tooltipLabel ?? t("trainFace")}</TooltipContent>
       </Tooltip>
     </div>
   );