Add ability to filter search by time range (#13946)

* Add ability to filter by time range

* Cleanup

* Handle input with tags

* fix input for time_range filter

* fix before and after filters

* clean up

* Ensure the default value works as expected

* Handle time range in am/pm based on browser

* Fix arrow

* Fix text

* Handle midnight case

* fix width

* Fix bg

* Fix bg

* Fix mobile spacing

* y spacing

* remove left padding

---------

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

web/src/pages/Explore.tsx

@@ -1,9 +1,12 @@
 import { useEventUpdate } from "@/api/ws";
 import { useApiFilterArgs } from "@/hooks/use-api-filter";
+import { useTimezone } from "@/hooks/use-date-utils";
+import { FrigateConfig } from "@/types/frigateConfig";
 import { SearchFilter, SearchQuery, SearchResult } from "@/types/search";
 import SearchView from "@/views/search/SearchView";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { TbExclamationCircle } from "react-icons/tb";
+import useSWR from "swr";
 import useSWRInfinite from "swr/infinite";
 
 const API_LIMIT = 25;
@@ -11,6 +14,12 @@ const API_LIMIT = 25;
 export default function Explore() {
   // search field handler
 
+  const { data: config } = useSWR<FrigateConfig>("config", {
+    revalidateOnFocus: false,
+  });
+
+  const timezone = useTimezone(config);
+
   const [search, setSearch] = useState("");
 
   const [searchFilter, setSearchFilter, searchSearchParams] =
@@ -61,13 +70,15 @@ export default function Explore() {
         {
           cameras: searchSearchParams["cameras"],
           labels: searchSearchParams["labels"],
-          sub_labels: searchSearchParams["subLabels"],
+          sub_labels: searchSearchParams["sub_labels"],
           zones: searchSearchParams["zones"],
           before: searchSearchParams["before"],
           after: searchSearchParams["after"],
+          time_range: searchSearchParams["time_range"],
           search_type: searchSearchParams["search_type"],
           limit:
             Object.keys(searchSearchParams).length == 0 ? API_LIMIT : undefined,
+          timezone,
           in_progress: 0,
           include_thumbnails: 0,
         },
@@ -85,16 +96,17 @@ export default function Explore() {
         query: similaritySearch ? undefined : searchTerm,
         cameras: searchSearchParams["cameras"],
         labels: searchSearchParams["labels"],
-        sub_labels: searchSearchParams["subLabels"],
+        sub_labels: searchSearchParams["sub_labels"],
         zones: searchSearchParams["zones"],
         before: searchSearchParams["before"],
         after: searchSearchParams["after"],
+        time_range: searchSearchParams["time_range"],
         search_type: searchSearchParams["search_type"],
         event_id: searchSearchParams["event_id"],
         include_thumbnails: 0,
       },
     ];
-  }, [searchTerm, searchSearchParams, similaritySearch]);
+  }, [searchTerm, searchSearchParams, similaritySearch, timezone]);
 
   // paging