From 0126960d795c50296a4b3d7bac2adf2c4f507d07 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 2 Oct 2024 07:59:53 -0500
Subject: [PATCH] UI improvements and fixes (#14116)

* Add slider to adjust number of columns in search view

* Work around safari bug with alert thumbnails

* adjust gap
---
 web/src/components/card/AnimatedEventCard.tsx |  4 +-
 web/src/views/search/SearchView.tsx           | 69 ++++++++++++++++++-
 2 files changed, 68 insertions(+), 5 deletions(-)

diff --git a/web/src/components/card/AnimatedEventCard.tsx b/web/src/components/card/AnimatedEventCard.tsx
index 021f38f2b..73c6af3b5 100644
--- a/web/src/components/card/AnimatedEventCard.tsx
+++ b/web/src/components/card/AnimatedEventCard.tsx
@@ -107,7 +107,7 @@ export function AnimatedEventCard({
     <Tooltip>
       <TooltipTrigger asChild>
         <div
-          className="relative h-24 flex-shrink-0 4k:h-32"
+          className="relative h-24 flex-shrink-0 overflow-hidden rounded md:rounded-lg 4k:h-32"
           style={{
             aspectRatio: alertVideos ? aspectRatio : undefined,
           }}
@@ -133,7 +133,7 @@ export function AnimatedEventCard({
           )}
           {previews != undefined && (
             <div
-              className="size-full cursor-pointer overflow-hidden rounded md:rounded-lg"
+              className="size-full cursor-pointer"
               onClick={onOpenReview}
               onAuxClick={(e) => {
                 if (e.button === 1) {
diff --git a/web/src/views/search/SearchView.tsx b/web/src/views/search/SearchView.tsx
index 3f6d59161..866170655 100644
--- a/web/src/views/search/SearchView.tsx
+++ b/web/src/views/search/SearchView.tsx
@@ -13,8 +13,8 @@ import { cn } from "@/lib/utils";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { SearchFilter, SearchResult, SearchSource } from "@/types/search";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { isMobileOnly } from "react-device-detect";
-import { LuImage, LuSearchX, LuText } from "react-icons/lu";
+import { isDesktop, isMobileOnly } from "react-device-detect";
+import { LuColumns, LuImage, LuSearchX, LuText } from "react-icons/lu";
 import useSWR from "swr";
 import ExploreView from "../explore/ExploreView";
 import useKeyboardListener, {
@@ -26,6 +26,13 @@ import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { isEqual } from "lodash";
 import { formatDateToLocaleString } from "@/utils/dateUtil";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
+import { Slider } from "@/components/ui/slider";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { usePersistence } from "@/hooks/use-persistence";
 
 type SearchViewProps = {
   search: string;
@@ -57,6 +64,21 @@ export default function SearchView({
     revalidateOnFocus: false,
   });
 
+  // grid
+
+  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,
+    "sm:grid-cols-7": effectiveColumnCount === 7,
+    "sm:grid-cols-8": effectiveColumnCount >= 8,
+  });
+
   // suggestions values
 
   const allLabels = useMemo<string[]>(() => {
@@ -340,7 +362,7 @@ export default function SearchView({
           )}
 
         {uniqueResults && (
-          <div className="grid w-full gap-2 px-1 sm:grid-cols-2 md:mx-2 md:grid-cols-4 md:gap-4 3xl:grid-cols-6">
+          <div className={gridClassName}>
             {uniqueResults &&
               uniqueResults.map((value, index) => {
                 const selected = selectedIndex === index;
@@ -409,6 +431,47 @@ export default function SearchView({
             <div className="flex h-12 w-full justify-center">
               {hasMore && isLoading && <ActivityIndicator />}
             </div>
+
+            {isDesktop && columnCount && (
+              <div
+                className={cn(
+                  "fixed bottom-12 right-3 z-50 flex flex-row gap-2 lg:bottom-9",
+                )}
+              >
+                <Popover>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <PopoverTrigger asChild>
+                        <div className="cursor-pointer rounded-lg bg-secondary text-secondary-foreground opacity-75 transition-all duration-300 hover:bg-muted hover:opacity-100">
+                          <LuColumns className="size-5 md:m-[6px]" />
+                        </div>
+                      </PopoverTrigger>
+                    </TooltipTrigger>
+                    <TooltipContent>Adjust Grid Columns</TooltipContent>
+                  </Tooltip>
+                  <PopoverContent className="mr-2 w-80">
+                    <div className="space-y-4">
+                      <div className="font-medium leading-none">
+                        Grid Columns
+                      </div>
+                      <div className="flex items-center space-x-4">
+                        <Slider
+                          value={[effectiveColumnCount]}
+                          onValueChange={([value]) => setColumnCount(value)}
+                          max={8}
+                          min={2}
+                          step={1}
+                          className="flex-grow"
+                        />
+                        <span className="w-9 text-center text-sm font-medium">
+                          {effectiveColumnCount}
+                        </span>
+                      </div>
+                    </div>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            )}
           </>
         )}
       </div>