added sound effects, updated svgs and cleaned up bugs

src/components/SightingsWidget/SightingWidget.tsx

@@ -13,6 +13,7 @@ import HotListImg from "/Hotlist_Hit.svg";
 import NPED_CAT_A from "/NPED_Cat_A.svg";
 import NPED_CAT_B from "/NPED_Cat_B.svg";
 import NPED_CAT_C from "/NPED_Cat_C.svg";
+import { useSound } from "react-sounds";
 
 function useNow(tickMs = 1000) {
   const [, setNow] = useState(() => Date.now());
@@ -32,14 +33,12 @@ type SightingHistoryProps = {
   className: string;
 };
 
-// /type SightingHistoryWidgetProps = React.HTMLAttributes<HTMLDivElement>;
-
 export default function SightingHistoryWidget({
   className,
   title,
 }: SightingHistoryProps) {
   useNow(1000);
-
+  const { play } = useSound("notification/notification");
   const {
     sightings,
     setSelectedSighting,
@@ -73,18 +72,18 @@ export default function SightingHistoryWidget({
       const isNPEDHitC = obj?.metadata?.npedJSON?.["NPED CATEGORY"] === "C";
 
       if (isNPEDHitA || isNPEDHitB || isNPEDHitC) {
+        play();
         dispatch({
           type: "ADD",
           payload: obj,
         });
       }
     });
-  }, [rows, dispatch]);
+  }, [rows, dispatch, play]);
 
   useEffect(() => {
     if (hasAutoOpenedRef.current) return;
     const firstHot = rows?.find((r) => {
-      // const hotlistHit = r?.metadata?.hotlistMatches?.Hotlist0 === true;
       const isNPEDHitA = r?.metadata?.npedJSON?.["NPED CATEGORY"] === "A";
       const isNPEDHitB = r?.metadata?.npedJSON?.["NPED CATEGORY"] === "B";
       const isNPEDHitC = r?.metadata?.npedJSON?.["NPED CATEGORY"] === "C";
@@ -92,10 +91,11 @@ export default function SightingHistoryWidget({
     });
     if (firstHot) {
       setSelectedSighting(firstHot);
+      play();
       setSightingModalOpen(true);
       hasAutoOpenedRef.current = true;
     }
-  }, [rows, setSelectedSighting, setSightingModalOpen]);
+  }, [play, rows, setSelectedSighting, setSightingModalOpen]);
 
   const handleClose = () => {
     setSightingModalOpen(false);
@@ -174,7 +174,6 @@ export default function SightingHistoryWidget({
                         className="h-20 object-contain rounded-md"
                       />
                     )}
-
                     <NumberPlate motion={motionAway} vrm={obj?.vrm} />
                   </div>
                 </div>