added sound effects, updated svgs and cleaned up bugs

src/components/HistoryList/AlertItem.tsx

@@ -12,7 +12,6 @@ type AlertItemProps = {
 const AlertItem = ({ item }: AlertItemProps) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const motionAway = (item?.motion ?? "").toUpperCase() === "AWAY";
-  const isNPEDHit = item?.metadata?.npedJSON?.status_code === 404;
   const isHotListHit = item?.metadata?.hotlistMatches?.Hotlist0 === true;
 
   const handleClick = () => {
@@ -36,13 +35,7 @@ const AlertItem = ({ item }: AlertItemProps) => {
             className="h-20 object-contain rounded-md"
           />
         )}
-        {isNPEDHit && (
-          <img
-            src={HotListImg}
-            alt="hotlistHit"
-            className="h-20 object-contain rounded-md"
-          />
-        )}
+
         <div className="flex flex-col">
           <small>MAKE: {item.make}</small>
           <small>MODEL: {item.model}</small>

src/components/SightingModal/SightingModal.tsx

@@ -25,7 +25,7 @@ const SightingModal = ({
 
   const handleAcknowledgeButton = () => {
     if (!sighting) {
-      toast.error("Cannot add sigthing to alert list");
+      toast.error("Cannot add sighting to alert list");
       handleClose();
       return;
     }
@@ -39,7 +39,6 @@ const SightingModal = ({
   const isNPEDHitA = sighting?.metadata?.npedJSON?.["NPED CATEGORY"] === "A";
   const isNPEDHitB = sighting?.metadata?.npedJSON?.["NPED CATEGORY"] === "B";
   const isNPEDHitC = sighting?.metadata?.npedJSON?.["NPED CATEGORY"] === "C";
-  const isNPEDHitD = sighting?.metadata?.npedJSON?.["NPED CATEGORY"] === "D";
 
   return (
     <>
@@ -88,13 +87,6 @@ const SightingModal = ({
                 className="h-20 object-contain rounded-md"
               />
             )}
-            {isNPEDHitD && (
-              <img
-                src={NPED_CAT_A}
-                alt="hotlistHit"
-                className="h-20 object-contain rounded-md"
-              />
-            )}
           </div>
           <div className="flex flex-col md:flex-row items-center gap-3">
             <img

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>