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/types/filter.ts

@@ -0,0 +1 @@
+type FilterType = { [searchKey: string]: any };

web/src/types/history.ts

@@ -1,40 +1,57 @@
 type CardsData = {
+  [key: string]: {
     [key: string]: {
-        [key: string]: {
-            [key: string]: Card
-        }
-    }
-}
+      [key: string]: Card;
+    };
+  };
+};
 
 type Card = {
-    camera: string,
-    time: number,
-    entries: Timeline[],
-    uniqueKeys: string[],
-}
+  camera: string;
+  time: number;
+  entries: Timeline[];
+  uniqueKeys: string[];
+};
 
 type Preview = {
-    camera: string,
-    src: string,
-    type: string,
-    start: number,
-    end: number,
-}
+  camera: string;
+  src: string;
+  type: string;
+  start: number;
+  end: number;
+};
 
 type Timeline = {
-    camera: string,
-    timestamp: number,
-    data: {
-        [key: string]: any
-    },
-    class_type: string,
-    source_id: string,
-    source: string,
-}
+  camera: string;
+  timestamp: number;
+  data: {
+    [key: string]: any;
+  };
+  class_type:
+    | "visible"
+    | "gone"
+    | "sub_label"
+    | "entered_zone"
+    | "attribute"
+    | "active"
+    | "stationary"
+    | "heard"
+    | "external";
+  source_id: string;
+  source: string;
+};
 
 type HourlyTimeline = {
-    start: number,
-    end: number,
-    count: number,
-    hours: { [key: string]: Timeline[] };
-}
+  start: number;
+  end: number;
+  count: number;
+  hours: { [key: string]: Timeline[] };
+};
+
+interface HistoryFilter extends FilterType {
+  cameras: string[];
+  labels: string[];
+  before: number | undefined;
+  after: number | undefined;
+  detailLevel: "normal" | "extra" | "full";
+}