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/utils/timelineUtil.tsx

@@ -1,4 +1,11 @@
-import { LuCircle, LuPlay, LuPlayCircle, LuTruck } from "react-icons/lu";
+import {
+  LuCircle,
+  LuCircleDot,
+  LuEar,
+  LuPlay,
+  LuPlayCircle,
+  LuTruck,
+} from "react-icons/lu";
 import { IoMdExit } from "react-icons/io";
 import {
   MdFaceUnlock,
@@ -33,7 +40,13 @@ export function getTimelineIcon(timelineItem: Timeline) {
           return <MdFaceUnlock className="w-4 mr-1" />;
         case "car":
           return <MdOutlinePictureInPictureAlt className="w-4 mr-1" />;
+        default:
+          return <LuCircleDot className="w-4 mr-1" />;
       }
+    case "heard":
+      return <LuEar className="w-4 mr-1" />;
+    case "external":
+      return <LuCircleDot className="w-4 mr-1" />;
   }
 }
 
@@ -76,5 +89,9 @@ export function getTimelineItemDescription(timelineItem: Timeline) {
       return `${timelineItem.data.label} recognized as ${timelineItem.data.sub_label}`;
     case "gone":
       return `${label} left`;
+    case "heard":
+      return `${label} heard`;
+    case "external":
+      return `${label} detected`;
   }
 }