From d057d4ab5861fc429072e66ed51a1a1b3f1d228f Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 24 Oct 2025 09:31:08 -0500
Subject: [PATCH] remove footer on explore images and move to overlay

---
 .../components/card/SearchThumbnailFooter.tsx |  4 +-
 .../components/menu/SearchResultActions.tsx   | 28 ++++++---
 web/src/views/search/SearchView.tsx           | 58 +++++++++----------
 3 files changed, 50 insertions(+), 40 deletions(-)

diff --git a/web/src/components/card/SearchThumbnailFooter.tsx b/web/src/components/card/SearchThumbnailFooter.tsx
index e23d1c3f6..9a6f4e6ee 100644
--- a/web/src/components/card/SearchThumbnailFooter.tsx
+++ b/web/src/components/card/SearchThumbnailFooter.tsx
@@ -42,11 +42,11 @@ export default function SearchThumbnailFooter({
   return (
     <div
       className={cn(
-        "flex w-full flex-row items-center justify-between gap-2",
+        "flex w-full flex-row items-center justify-between gap-2 text-white",
         columns > 4 && "items-start sm:flex-col lg:flex-row lg:items-center",
       )}
     >
-      <div className="flex flex-col items-start text-xs text-primary-variant">
+      <div className="flex flex-col items-start text-xs text-white/90 drop-shadow-lg">
         {searchResult.end_time ? (
           <TimeAgo time={searchResult.start_time * 1000} dense />
         ) : (
diff --git a/web/src/components/menu/SearchResultActions.tsx b/web/src/components/menu/SearchResultActions.tsx
index 2c928becf..99d9e4881 100644
--- a/web/src/components/menu/SearchResultActions.tsx
+++ b/web/src/components/menu/SearchResultActions.tsx
@@ -214,10 +214,14 @@ export default function SearchResultActions({
             searchResult.data.type == "object" && (
               <Tooltip>
                 <TooltipTrigger>
-                  <MdImageSearch
-                    className="size-5 cursor-pointer text-primary-variant hover:text-primary"
-                    onClick={findSimilar}
-                  />
+                  <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>
                 <TooltipContent>
                   {t("itemMenu.findSimilar.label")}
@@ -233,10 +237,13 @@ export default function SearchResultActions({
             !searchResult.plus_id && (
               <Tooltip>
                 <TooltipTrigger>
-                  <FrigatePlusIcon
-                    className="size-5 cursor-pointer text-primary-variant hover:text-primary"
-                    onClick={showSnapshot}
-                  />
+                  <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>
                 <TooltipContent>
                   {t("itemMenu.submitToPlus.label")}
@@ -246,7 +253,10 @@ export default function SearchResultActions({
 
           <DropdownMenu>
             <DropdownMenuTrigger>
-              <FiMoreVertical className="size-5 cursor-pointer text-primary-variant hover:text-primary" />
+              <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>
             <DropdownMenuContent align="end">{menuItems}</DropdownMenuContent>
           </DropdownMenu>
diff --git a/web/src/views/search/SearchView.tsx b/web/src/views/search/SearchView.tsx
index 5cd36beab..f60478b57 100644
--- a/web/src/views/search/SearchView.tsx
+++ b/web/src/views/search/SearchView.tsx
@@ -577,7 +577,7 @@ export default function SearchView({
                   >
                     <div
                       className={cn(
-                        "aspect-square w-full overflow-hidden rounded-t-lg border",
+                        "relative aspect-square w-full overflow-hidden rounded-lg",
                       )}
                     >
                       <SearchThumbnail
@@ -634,38 +634,38 @@ export default function SearchView({
                           </Tooltip>
                         </div>
                       )}
+                      <div className="absolute bottom-0 left-0 right-0 z-30 bg-gradient-to-t from-black/70 to-transparent p-2">
+                        <SearchThumbnailFooter
+                          searchResult={value}
+                          columns={columns}
+                          findSimilar={() => {
+                            if (config?.semantic_search.enabled) {
+                              setSimilaritySearch(value);
+                            }
+                          }}
+                          refreshResults={refresh}
+                          showObjectLifecycle={() =>
+                            onSelectSearch(value, false, "object_lifecycle")
+                          }
+                          showSnapshot={() =>
+                            onSelectSearch(value, false, "snapshot")
+                          }
+                          addTrigger={() => {
+                            if (
+                              config?.semantic_search.enabled &&
+                              value.data.type == "object"
+                            ) {
+                              navigate(
+                                `/settings?page=triggers&camera=${value.camera}&event_id=${value.id}`,
+                              );
+                            }
+                          }}
+                        />
+                      </div>
                     </div>
                     <div
                       className={`review-item-ring pointer-events-none absolute inset-0 z-10 size-full rounded-lg outline outline-[3px] -outline-offset-[2.8px] ${selected ? `shadow-selected outline-selected` : "outline-transparent duration-500"}`}
                     />
-                    <div className="flex w-full grow items-center justify-between rounded-b-lg border border-t-0 bg-card p-3 text-card-foreground">
-                      <SearchThumbnailFooter
-                        searchResult={value}
-                        columns={columns}
-                        findSimilar={() => {
-                          if (config?.semantic_search.enabled) {
-                            setSimilaritySearch(value);
-                          }
-                        }}
-                        refreshResults={refresh}
-                        showObjectLifecycle={() =>
-                          onSelectSearch(value, false, "object_lifecycle")
-                        }
-                        showSnapshot={() =>
-                          onSelectSearch(value, false, "snapshot")
-                        }
-                        addTrigger={() => {
-                          if (
-                            config?.semantic_search.enabled &&
-                            value.data.type == "object"
-                          ) {
-                            navigate(
-                              `/settings?page=triggers&camera=${value.camera}&event_id=${value.id}`,
-                            );
-                          }
-                        }}
-                      />
-                    </div>
                   </div>
                 );
               })}