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/hooks/use-date-utils.ts

@@ -43,3 +43,53 @@ export function useTimezone(config: FrigateConfig | undefined) {
     );
   }, [config]);
 }
+
+function use24HourTime(config: FrigateConfig | undefined) {
+  const localeUses24HourTime = useMemo(
+    () =>
+      new Intl.DateTimeFormat(undefined, {
+        hour: "numeric",
+      })
+        ?.formatToParts(new Date(2020, 0, 1, 13))
+        ?.find((part) => part.type === "hour")?.value?.length === 2,
+    [],
+  );
+
+  return useMemo(() => {
+    if (!config) {
+      return false;
+    }
+
+    if (config.ui.time_format != "browser") {
+      return config.ui.time_format == "24hour";
+    }
+
+    return localeUses24HourTime;
+  }, [config, localeUses24HourTime]);
+}
+
+export function useFormattedHour(
+  config: FrigateConfig | undefined,
+  time: string, // hour is assumed to be in 24 hour format per the Date object
+) {
+  const hour24 = use24HourTime(config);
+
+  return useMemo(() => {
+    if (hour24) {
+      return time;
+    }
+
+    const [hour, minute] = time.includes(":") ? time.split(":") : [time, "00"];
+    const hourNum = parseInt(hour);
+
+    if (hourNum < 12) {
+      if (hourNum == 0) {
+        return `12:${minute} AM`;
+      }
+
+      return `${hourNum}:${minute} AM`;
+    } else {
+      return `${hourNum - 12}:${minute} PM`;
+    }
+  }, [hour24, time]);
+}

web/src/hooks/use-suggestions.ts

@@ -48,8 +48,6 @@ export default function useSuggestions(
         setSuggestions([
           ...(searchHistory?.map((search) => search.name) ?? []),
           ...availableFilters,
-          "before",
-          "after",
         ]);
       }
     },