Move buttons and menu to thumbnail footer

web/src/components/card/SearchThumbnail.tsx

@@ -1,35 +1,17 @@
 import { useCallback, useMemo, useState } from "react";
 import { useApiHost } from "@/api";
 import { getIconForLabel } from "@/utils/iconUtil";
-import TimeAgo from "../dynamic/TimeAgo";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { isIOS, isSafari } from "react-device-detect";
 import Chip from "@/components/indicators/Chip";
-import { useFormattedTimestamp } from "@/hooks/use-date-utils";
 import useImageLoaded from "@/hooks/use-image-loaded";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import ImageLoadingIndicator from "../indicators/ImageLoadingIndicator";
-import ActivityIndicator from "../indicators/activity-indicator";
 import { capitalizeFirstLetter } from "@/utils/stringUtil";
 import { SearchResult } from "@/types/search";
 import { cn } from "@/lib/utils";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  LuActivity,
-  LuCamera,
-  LuDownload,
-  LuMoreVertical,
-  LuSearch,
-  LuTrash2,
-} from "react-icons/lu";
-import FrigatePlusIcon from "@/components/icons/FrigatePlusIcon";
 import { FrigatePlusDialog } from "../overlay/dialog/FrigatePlusDialog";
 import { Event } from "@/types/event";
 
@@ -74,14 +56,6 @@ export default function SearchThumbnail({
     return `${searchResult.label}-verified`;
   }, [config, searchResult]);
 
-  // date
-
-  const formattedDate = useFormattedTimestamp(
-    searchResult.start_time,
-    config?.ui.time_format == "24hour" ? "%b %-d, %H:%M" : "%b %-d, %I:%M %p",
-    config?.ui.timezone,
-  );
-
   return (
     <div className="relative size-full cursor-pointer" onClick={handleOnClick}>
       <FrigatePlusDialog
@@ -147,64 +121,7 @@ export default function SearchThumbnail({
           </Tooltip>
         </div>
         <div className="rounded-t-l pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full bg-gradient-to-b from-black/60 to-transparent"></div>
-        <div className="rounded-b-l pointer-events-none absolute inset-x-0 bottom-0 z-10 flex h-[20%] items-end bg-gradient-to-t from-black/60 to-transparent">
-          <div className="flex w-full items-center justify-between bg-black/50 px-2 py-2 text-sm text-white">
-            <div className="flex flex-col items-start">
-              {searchResult.end_time ? (
-                <TimeAgo time={searchResult.start_time * 1000} dense />
-              ) : (
-                <div>
-                  <ActivityIndicator size={24} />
-                </div>
-              )}
-              {formattedDate}
-            </div>
-            <div className="flex flex-row items-center justify-end gap-4">
-              {config?.plus?.enabled && searchResult.end_time && (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <FrigatePlusIcon
-                      className="size-5 cursor-pointer text-white"
-                      onClick={() => setShowFrigatePlus(true)}
-                    />
-                  </TooltipTrigger>
-                  <TooltipContent>Submit to Frigate+</TooltipContent>
-                </Tooltip>
-              )}
-
-              <Tooltip>
-                <TooltipTrigger>
-                  <LuSearch className="size-5 cursor-pointer text-white" />
-                </TooltipTrigger>
-                <TooltipContent>Find similar</TooltipContent>
-              </Tooltip>
-
-              <DropdownMenu>
-                <DropdownMenuTrigger>
-                  <LuMoreVertical className="size-5 cursor-pointer text-white" />
-                </DropdownMenuTrigger>
-                <DropdownMenuContent>
-                  <DropdownMenuItem>
-                    <LuDownload className="mr-2 size-4" />
-                    <span>Download video</span>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <LuCamera className="mr-2 size-4" />
-                    <span>Download snapshot</span>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <LuActivity className="mr-2 size-4" />
-                    <span>View object lifecycle</span>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <LuTrash2 className="mr-2 size-4" />
-                    <span>Delete</span>
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </div>
-          </div>
-        </div>
+        <div className="rounded-b-l pointer-events-none absolute inset-x-0 bottom-0 z-10 flex h-[20%] items-end bg-gradient-to-t from-black/60 to-transparent"></div>
       </div>
     </div>
   );

web/src/components/card/SearchThumbnailFooter.tsx

@@ -0,0 +1,116 @@
+import { useState } from "react";
+import TimeAgo from "../dynamic/TimeAgo";
+import useSWR from "swr";
+import { FrigateConfig } from "@/types/frigateConfig";
+import { useFormattedTimestamp } from "@/hooks/use-date-utils";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import ActivityIndicator from "../indicators/activity-indicator";
+import { SearchResult } from "@/types/search";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  LuActivity,
+  LuCamera,
+  LuDownload,
+  LuMoreVertical,
+  LuSearch,
+  LuTrash2,
+} from "react-icons/lu";
+import FrigatePlusIcon from "@/components/icons/FrigatePlusIcon";
+import { FrigatePlusDialog } from "../overlay/dialog/FrigatePlusDialog";
+import { Event } from "@/types/event";
+
+type SearchThumbnailProps = {
+  searchResult: SearchResult;
+};
+
+export default function SearchThumbnailFooter({
+  searchResult,
+}: SearchThumbnailProps) {
+  const { data: config } = useSWR<FrigateConfig>("config");
+
+  // interactions
+
+  const [showFrigatePlus, setShowFrigatePlus] = useState(false);
+
+  // date
+
+  const formattedDate = useFormattedTimestamp(
+    searchResult.start_time,
+    config?.ui.time_format == "24hour" ? "%b %-d, %H:%M" : "%b %-d, %I:%M %p",
+    config?.ui.timezone,
+  );
+
+  return (
+    <>
+      <FrigatePlusDialog
+        upload={
+          showFrigatePlus ? (searchResult as unknown as Event) : undefined
+        }
+        onClose={() => setShowFrigatePlus(false)}
+        onEventUploaded={() => {}}
+      />
+
+      <div className="flex flex-col items-start">
+        {searchResult.end_time ? (
+          <TimeAgo time={searchResult.start_time * 1000} dense />
+        ) : (
+          <div>
+            <ActivityIndicator size={24} />
+          </div>
+        )}
+        {formattedDate}
+      </div>
+      <div className="flex flex-row items-center justify-end gap-4">
+        {config?.plus?.enabled &&
+          searchResult.has_snapshot &&
+          searchResult.end_time && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <FrigatePlusIcon
+                  className="size-5 cursor-pointer text-white"
+                  onClick={() => setShowFrigatePlus(true)}
+                />
+              </TooltipTrigger>
+              <TooltipContent>Submit to Frigate+</TooltipContent>
+            </Tooltip>
+          )}
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <LuSearch className="size-5 cursor-pointer text-white" />
+          </TooltipTrigger>
+          <TooltipContent>Find similar</TooltipContent>
+        </Tooltip>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger>
+            <LuMoreVertical className="size-5 cursor-pointer text-white" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>
+              <LuDownload className="mr-2 size-4" />
+              <span>Download video</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <LuCamera className="mr-2 size-4" />
+              <span>Download snapshot</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <LuActivity className="mr-2 size-4" />
+              <span>View object lifecycle</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <LuTrash2 className="mr-2 size-4" />
+              <span>Delete</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </>
+  );
+}

web/src/views/search/SearchView.tsx

@@ -33,6 +33,7 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { usePersistence } from "@/hooks/use-persistence";
+import SearchThumbnailFooter from "@/components/card/SearchThumbnailFooter";
 
 type SearchViewProps = {
   search: string;
@@ -76,8 +77,6 @@ export default function SearchView({
     "sm:grid-cols-4": effectiveColumnCount === 4,
     "sm:grid-cols-5": effectiveColumnCount === 5,
     "sm:grid-cols-6": effectiveColumnCount === 6,
-    "sm:grid-cols-7": effectiveColumnCount === 7,
-    "sm:grid-cols-8": effectiveColumnCount >= 8,
   });
 
   // suggestions values
@@ -392,7 +391,7 @@ export default function SearchView({
                   >
                     <div
                       className={cn(
-                        "aspect-square size-full overflow-hidden rounded-lg",
+                        "aspect-square w-full overflow-hidden rounded-t-lg border",
                       )}
                     >
                       <SearchThumbnail
@@ -428,6 +427,9 @@ export default function SearchView({
                     <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 items-center justify-between rounded-b-lg border border-t-0 bg-card p-3 text-card-foreground">
+                      <SearchThumbnailFooter searchResult={value} />
+                    </div>
                   </div>
                 );
               })}
@@ -466,7 +468,7 @@ export default function SearchView({
                         <Slider
                           value={[effectiveColumnCount]}
                           onValueChange={([value]) => setColumnCount(value)}
-                          max={8}
+                          max={6}
                           min={2}
                           step={1}
                           className="flex-grow"