added sounds, updated nped config and tweaks + code quality improvements

src/hooks/useSightingFeed.ts

@@ -1,6 +1,8 @@
 import { useEffect, useRef, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import type { SightingType } from "../types/types";
+import { useSoundOnChange } from "react-sounds";
+import click from "../assets/sounds/ui/computer-mouse-click.mp3";
 
 async function fetchSighting(url: string, ref: number): Promise<SightingType> {
   const res = await fetch(`${url}${ref}`);
@@ -8,14 +10,19 @@ async function fetchSighting(url: string, ref: number): Promise<SightingType> {
   return res.json();
 }
 
-export function useSightingFeed(url: string) {
+export function useSightingFeed(url: string, side: string) {
   const [sightings, setSightings] = useState<SightingType[]>([]);
   const [selectedRef, setSelectedRef] = useState<number | null>(null);
   const mostRecent = sightings[0] ?? null;
+  const latestRef = mostRecent?.ref ?? null;
   const [selectedSighting, setSelectedSighting] = useState<SightingType | null>(
     null
   );
 
+  useSoundOnChange(click, latestRef, {
+    volume: side === "Rear" ? 0 : 1,
+  });
+
   const currentRef = useRef<number>(-1);
   const lastValidTimestamp = useRef<number>(Date.now());
 
@@ -61,6 +68,13 @@ export function useSightingFeed(url: string) {
       return;
     }
 
+    // if (Notification.permission === "granted") {
+    //   new Notification("New Sighting!", {
+    //     body: `Ref: ${data.ref}`,
+    //     icon: "/MAV-blue.svg",
+    //   });
+    // }
+
     currentRef.current = data.ref;
     lastValidTimestamp.current = now;
 
@@ -75,7 +89,6 @@ export function useSightingFeed(url: string) {
 
   useEffect(() => {
     if (query.error) {
-      // you can add logging/telemetry here
       // console.error("Sighting feed error:", query.error);
     }
   }, [query.error]);