From d76228ac3c4ea2b8a946445b089c17e71334073e Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 15 Oct 2024 16:45:45 -0500
Subject: [PATCH] use two columns on mobile view

---
 .../components/card/SearchThumbnailFooter.tsx | 45 +++++++++----------
 web/src/views/search/SearchView.tsx           | 17 ++++---
 web/src/views/settings/SearchSettingsView.tsx |  2 +-
 3 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/web/src/components/card/SearchThumbnailFooter.tsx b/web/src/components/card/SearchThumbnailFooter.tsx
index 9037fcf25..78841159b 100644
--- a/web/src/components/card/SearchThumbnailFooter.tsx
+++ b/web/src/components/card/SearchThumbnailFooter.tsx
@@ -10,8 +10,6 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import {
@@ -24,13 +22,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "../ui/alert-dialog";
-import {
-  LuCamera,
-  LuCheck,
-  LuDownload,
-  LuMoreVertical,
-  LuTrash2,
-} from "react-icons/lu";
+import { LuCamera, LuDownload, LuMoreVertical, LuTrash2 } from "react-icons/lu";
 import FrigatePlusIcon from "@/components/icons/FrigatePlusIcon";
 import { FrigatePlusDialog } from "../overlay/dialog/FrigatePlusDialog";
 import { Event } from "@/types/event";
@@ -39,6 +31,7 @@ import { baseUrl } from "@/api/baseUrl";
 import axios from "axios";
 import { toast } from "sonner";
 import { MdImageSearch } from "react-icons/md";
+import { isMobileOnly } from "react-device-detect";
 
 type SearchThumbnailProps = {
   searchResult: SearchResult;
@@ -130,18 +123,12 @@ export default function SearchThumbnailFooter({
         )}
         {formattedDate}
       </div>
-      <div className="flex flex-row items-center justify-end gap-8 md:gap-4">
-        {config?.plus?.enabled &&
+      <div className="flex flex-row items-center justify-end gap-6 md:gap-4">
+        {!isMobileOnly &&
+          config?.plus?.enabled &&
           searchResult.has_snapshot &&
           searchResult.end_time &&
-          (searchResult.plus_id ? (
-            <Tooltip>
-              <TooltipTrigger>
-                <LuCheck className="size-5 cursor-pointer text-primary text-success" />
-              </TooltipTrigger>
-              <TooltipContent>Submitted to Frigate+</TooltipContent>
-            </Tooltip>
-          ) : (
+          !searchResult.plus_id && (
             <Tooltip>
               <TooltipTrigger>
                 <FrigatePlusIcon
@@ -151,7 +138,7 @@ export default function SearchThumbnailFooter({
               </TooltipTrigger>
               <TooltipContent>Submit to Frigate+</TooltipContent>
             </Tooltip>
-          ))}
+          )}
 
         {config?.semantic_search?.enabled && (
           <Tooltip>
@@ -170,10 +157,6 @@ export default function SearchThumbnailFooter({
             <LuMoreVertical className="size-5 cursor-pointer text-primary" />
           </DropdownMenuTrigger>
           <DropdownMenuContent align={"end"}>
-            <DropdownMenuLabel className="mt-0.5">
-              Tracked Object Actions
-            </DropdownMenuLabel>
-            <DropdownMenuSeparator className="mt-1" />
             {searchResult.has_clip && (
               <DropdownMenuItem>
                 <a
@@ -205,6 +188,20 @@ export default function SearchThumbnailFooter({
               <FaArrowsRotate className="mr-2 size-4" />
               <span>View object lifecycle</span>
             </DropdownMenuItem>
+
+            {isMobileOnly &&
+              config?.plus?.enabled &&
+              searchResult.has_snapshot &&
+              searchResult.end_time &&
+              !searchResult.plus_id && (
+                <DropdownMenuItem
+                  className="cursor-pointer"
+                  onClick={() => setShowFrigatePlus(true)}
+                >
+                  <FrigatePlusIcon className="mr-1 size-5 cursor-pointer text-primary" />
+                  <span>Submit to Frigate+</span>
+                </DropdownMenuItem>
+              )}
             <DropdownMenuItem
               className="cursor-pointer"
               onClick={() => setDeleteDialogOpen(true)}
diff --git a/web/src/views/search/SearchView.tsx b/web/src/views/search/SearchView.tsx
index bc4f5b54d..5d18e53d4 100644
--- a/web/src/views/search/SearchView.tsx
+++ b/web/src/views/search/SearchView.tsx
@@ -73,13 +73,16 @@ export default function SearchView({
   const [columnCount, setColumnCount] = usePersistence("exploreGridColumns", 4);
   const effectiveColumnCount = useMemo(() => columnCount ?? 4, [columnCount]);
 
-  const gridClassName = cn("grid w-full gap-2 px-1 gap-2 lg:gap-4 md:mx-2", {
-    "sm:grid-cols-2": effectiveColumnCount <= 2,
-    "sm:grid-cols-3": effectiveColumnCount === 3,
-    "sm:grid-cols-4": effectiveColumnCount === 4,
-    "sm:grid-cols-5": effectiveColumnCount === 5,
-    "sm:grid-cols-6": effectiveColumnCount === 6,
-  });
+  const gridClassName = cn(
+    "grid w-full gap-2 px-1 gap-2 lg:gap-4 md:mx-2 grid-cols-2",
+    {
+      "sm:grid-cols-2": effectiveColumnCount <= 2,
+      "sm:grid-cols-3": effectiveColumnCount === 3,
+      "sm:grid-cols-4": effectiveColumnCount === 4,
+      "sm:grid-cols-5": effectiveColumnCount === 5,
+      "sm:grid-cols-6": effectiveColumnCount === 6,
+    },
+  );
 
   // suggestions values
 
diff --git a/web/src/views/settings/SearchSettingsView.tsx b/web/src/views/settings/SearchSettingsView.tsx
index 0bbb8a15a..904eb980c 100644
--- a/web/src/views/settings/SearchSettingsView.tsx
+++ b/web/src/views/settings/SearchSettingsView.tsx
@@ -169,7 +169,7 @@ export default function SearchSettingsView({
               rel="noopener noreferrer"
               className="inline"
             >
-              Read the semantic search docs
+              Read the documentation
               <LuExternalLink className="ml-2 inline-flex size-3" />
             </Link>
           </div>