From 681d00accd5476a73315f1f3d18cb2e19b278634 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 27 Oct 2025 07:28:27 -0500
Subject: [PATCH] apply component to explore, face, and classification views

---
 .../components/menu/SearchResultActions.tsx   | 41 +++++++++----------
 web/src/pages/FaceLibrary.tsx                 | 20 ++++-----
 .../classification/ModelTrainingView.tsx      | 15 ++++---
 3 files changed, 34 insertions(+), 42 deletions(-)

diff --git a/web/src/components/menu/SearchResultActions.tsx b/web/src/components/menu/SearchResultActions.tsx
index 45e9a55d8..28644d3a7 100644
--- a/web/src/components/menu/SearchResultActions.tsx
+++ b/web/src/components/menu/SearchResultActions.tsx
@@ -42,6 +42,7 @@ import useSWR from "swr";
 
 import { Trans, useTranslation } from "react-i18next";
 import { BsFillLightningFill } from "react-icons/bs";
+import BlurredIconButton from "../button/BlurredIconButton";
 
 type SearchResultActionsProps = {
   searchResult: SearchResult;
@@ -213,15 +214,13 @@ export default function SearchResultActions({
           {config?.semantic_search?.enabled &&
             searchResult.data.type == "object" && (
               <Tooltip>
-                <TooltipTrigger>
-                  <div className="group relative inline-flex items-center justify-center">
-                    {/* blurred circular hover background */}
-                    <div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" />
-                    <MdImageSearch
-                      className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white"
-                      onClick={findSimilar}
-                    />
-                  </div>
+                <TooltipTrigger asChild>
+                  <BlurredIconButton
+                    onClick={findSimilar}
+                    aria-label={t("itemMenu.findSimilar.aria")}
+                  >
+                    <MdImageSearch className="size-5" />
+                  </BlurredIconButton>
                 </TooltipTrigger>
                 <TooltipContent>
                   {t("itemMenu.findSimilar.label")}
@@ -236,14 +235,13 @@ export default function SearchResultActions({
             searchResult.data.type == "object" &&
             !searchResult.plus_id && (
               <Tooltip>
-                <TooltipTrigger>
-                  <div className="group relative inline-flex items-center justify-center">
-                    <div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" />
-                    <FrigatePlusIcon
-                      className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white"
-                      onClick={showSnapshot}
-                    />
-                  </div>
+                <TooltipTrigger asChild>
+                  <BlurredIconButton
+                    onClick={showSnapshot}
+                    aria-label={t("itemMenu.submitToPlus.aria")}
+                  >
+                    <FrigatePlusIcon className="size-5" />
+                  </BlurredIconButton>
                 </TooltipTrigger>
                 <TooltipContent>
                   {t("itemMenu.submitToPlus.label")}
@@ -252,11 +250,10 @@ export default function SearchResultActions({
             )}
 
           <DropdownMenu>
-            <DropdownMenuTrigger>
-              <div className="group relative inline-flex items-center justify-center">
-                <div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" />
-                <FiMoreVertical className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white" />
-              </div>
+            <DropdownMenuTrigger asChild>
+              <BlurredIconButton aria-label={t("itemMenu.more.aria")}>
+                <FiMoreVertical className="size-5" />
+              </BlurredIconButton>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">{menuItems}</DropdownMenuContent>
           </DropdownMenu>
diff --git a/web/src/pages/FaceLibrary.tsx b/web/src/pages/FaceLibrary.tsx
index c01a0875a..e308727c3 100644
--- a/web/src/pages/FaceLibrary.tsx
+++ b/web/src/pages/FaceLibrary.tsx
@@ -5,6 +5,7 @@ import TextEntryDialog from "@/components/overlay/dialog/TextEntryDialog";
 import UploadImageDialog from "@/components/overlay/dialog/UploadImageDialog";
 import FaceSelectionDialog from "@/components/overlay/FaceSelectionDialog";
 import { Button, buttonVariants } from "@/components/ui/button";
+import BlurredIconButton from "@/components/button/BlurredIconButton";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -858,20 +859,15 @@ function FaceAttemptGroup({
             faceNames={faceNames}
             onTrainAttempt={(name) => onTrainAttempt(data, name)}
           >
-            <div className="group relative inline-flex items-center justify-center">
-              <div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" />
-              <AddFaceIcon className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white" />
-            </div>
+            <BlurredIconButton>
+              <AddFaceIcon className="size-5" />
+            </BlurredIconButton>
           </FaceSelectionDialog>
           <Tooltip>
-            <TooltipTrigger>
-              <div className="group relative inline-flex items-center justify-center">
-                <div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" />
-                <LuRefreshCw
-                  className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white"
-                  onClick={() => onReprocess(data)}
-                />
-              </div>
+            <TooltipTrigger asChild>
+              <BlurredIconButton onClick={() => onReprocess(data)}>
+                <LuRefreshCw className="size-5" />
+              </BlurredIconButton>
             </TooltipTrigger>
             <TooltipContent>{t("button.reprocessFace")}</TooltipContent>
           </Tooltip>
diff --git a/web/src/views/classification/ModelTrainingView.tsx b/web/src/views/classification/ModelTrainingView.tsx
index ed96406e6..5c7a649c3 100644
--- a/web/src/views/classification/ModelTrainingView.tsx
+++ b/web/src/views/classification/ModelTrainingView.tsx
@@ -51,6 +51,7 @@ import { toast } from "sonner";
 import useSWR from "swr";
 import ClassificationSelectionDialog from "@/components/overlay/ClassificationSelectionDialog";
 import { TbCategoryPlus } from "react-icons/tb";
+import BlurredIconButton from "@/components/button/BlurredIconButton";
 import { useModelState } from "@/api/ws";
 import { ModelState } from "@/types/ws";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
@@ -811,10 +812,9 @@ function StateTrainGrid({
               image={data.filename}
               onRefresh={onRefresh}
             >
-              <div className="group relative inline-flex items-center justify-center">
-                <div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" />
-                <TbCategoryPlus className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white" />
-              </div>
+              <BlurredIconButton>
+                <TbCategoryPlus className="size-5" />
+              </BlurredIconButton>
             </ClassificationSelectionDialog>
           </ClassificationCard>
         </div>
@@ -961,10 +961,9 @@ function ObjectTrainGrid({
                       image={data.filename}
                       onRefresh={onRefresh}
                     >
-                      <div className="group relative inline-flex items-center justify-center">
-                        <div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" />
-                        <TbCategoryPlus className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white" />
-                      </div>
+                      <BlurredIconButton>
+                        <TbCategoryPlus className="size-5" />
+                      </BlurredIconButton>
                     </ClassificationSelectionDialog>
                   </>
                 )}