Add support for filtering history page and add support for creating timeline entries for audio / custom events (#9034)

* Add filter popover

* Add api filter hook and use UI with filtering

* Get history filtering working for cameras and labels

* Allow filtering on detail level

* Save timeline entries for api events

* reset

* fix width

web/src/hooks/use-api-filter.ts

@@ -0,0 +1,42 @@
+import { useMemo, useState } from "react";
+
+type useApiFilterReturn<F extends FilterType> = [
+  filter: F | undefined,
+  setFilter: (filter: F) => void,
+  searchParams:
+    | {
+        [key: string]: any;
+      }
+    | undefined,
+];
+
+export default function useApiFilter<
+  F extends FilterType,
+>(): useApiFilterReturn<F> {
+  const [filter, setFilter] = useState<F | undefined>(undefined);
+  const searchParams = useMemo(() => {
+    if (filter == undefined) {
+      return undefined;
+    }
+
+    const search: { [key: string]: string } = {};
+
+    Object.entries(filter).forEach(([key, value]) => {
+      if (Array.isArray(value)) {
+        if (value.length == 0) {
+          // empty array means all so ignore
+        } else {
+          search[key] = value.join(",");
+        }
+      } else {
+        if (value != undefined) {
+          search[key] = `${value}`;
+        }
+      }
+    });
+
+    return search;
+  }, [filter]);
+
+  return [filter, setFilter, searchParams];
+}