- added prettier config file

- improved sound state to remove pooling

- increased size of naviagtion arrows and fixed navigation onClick

-  decreased width of nav bar

- fixed button to reveal passwords in some password fields

src/hooks/useSightingFeed.ts

@@ -1,15 +1,12 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
+import { Query, useQuery } from "@tanstack/react-query";
 import type { SightingType } from "../types/types";
 import { useSoundOnChange } from "react-sounds";
 import { useSoundContext } from "../context/SoundContext";
 import { getSoundFileURL } from "../utils/utils";
 import switchSound from "../assets/sounds/ui/switch.mp3";
 
-async function fetchSighting(
-  url: string | undefined,
-  ref: number
-): Promise<SightingType> {
+async function fetchSighting(url: string | undefined, ref: number): Promise<SightingType> {
   const res = await fetch(`${url}${ref}`, {
     signal: AbortSignal.timeout(5000),
   });
@@ -18,86 +15,77 @@ async function fetchSighting(
 }
 
 export function useSightingFeed(url: string | undefined) {
-  const { state } = useSoundContext();
+  const { state, audioArmed } = useSoundContext();
   const [sightings, setSightings] = useState<SightingType[]>([]);
   const [selectedRef, setSelectedRef] = useState<number | null>(null);
   const [sessionStarted, setSessionStarted] = useState(false);
+  const [selectedSighting, setSelectedSighting] = useState<SightingType | null>(null);
+
   const mostRecent = sightings[0] ?? null;
   const latestRef = mostRecent?.ref ?? null;
-  const [selectedSighting, setSelectedSighting] = useState<SightingType | null>(
-    null
-  );
+
   const first = useRef(true);
+  const lastSoundAt = useRef(0);
+  const COOLDOWN_MS = 1500;
+  const currentRef = useRef<number>(-1);
+  const lastValidTimestamp = useRef<number>(Date.now());
 
   const trigger = useMemo(() => {
-    if (latestRef == null) return null;
+    if (latestRef == null || !audioArmed) return null;
     if (first.current) {
       first.current = false;
       return Symbol("skip");
     }
+    const now = Date.now();
+    if (now - lastSoundAt.current < COOLDOWN_MS) return Symbol("skip");
+    lastSoundAt.current = now;
     return latestRef;
-  }, [latestRef]);
+  }, [audioArmed, latestRef]);
+
   const soundSrc = useMemo(() => {
     return getSoundFileURL(state?.sightingSound) ?? switchSound;
   }, [state.sightingSound]);
 
-  //use latestref instead of trigger to revert back
-  useSoundOnChange(soundSrc, trigger, {
-    volume: 1,
-  });
+  function refetchInterval(query: Query<SightingType, Error, SightingType, (string | undefined)[]>) {
+    if (!query) return;
+    const data = query.state.data as SightingType | undefined;
+    const now = Date.now();
 
-  const currentRef = useRef<number>(-1);
-  const lastValidTimestamp = useRef<number>(Date.now());
+    if (data && data.ref !== -1) {
+      lastValidTimestamp.current = now;
+      return 100;
+    }
+
+    if (now - lastValidTimestamp.current > 60_000) {
+      currentRef.current = -1;
+      lastValidTimestamp.current = now;
+    }
+    return 400;
+  }
 
   const query = useQuery({
     queryKey: ["sighting-feed", url],
     enabled: !!url,
     queryFn: () => fetchSighting(url, currentRef.current),
-
-    refetchInterval: (q) => {
-      const data = q.state.data as SightingType | undefined;
-      const now = Date.now();
-
-      if (data && data.ref !== -1) {
-        lastValidTimestamp.current = now;
-        return 100;
-      }
-
-      if (now - lastValidTimestamp.current > 60_000) {
-        currentRef.current = -1;
-        lastValidTimestamp.current = now;
-      }
-      return 400;
-    },
+    refetchInterval: (q) => refetchInterval(q),
     refetchIntervalInBackground: true,
     refetchOnWindowFocus: false,
     retry: false,
     staleTime: 0,
   });
 
+  //use latestref instead of trigger to revert back
+  useSoundOnChange(soundSrc, trigger, {
+    volume: 1,
+    initial: false,
+  });
+
   useEffect(() => {
     const data = query.data;
-    if (!data) return;
+    if (!data || data.ref === -1) return;
 
     const now = Date.now();
 
-    if (data.ref === -1) {
-      // setSightings((prev) => {
-      //   if (prev[0]?.ref === data.ref) return prev;
-      //   const dedupPrev = prev.filter((s) => s.ref !== data.ref);
-      //   return [data, ...dedupPrev].slice(0, 7);
-      // });
-
-      return;
-    }
-
-    // if (Notification.permission === "granted") {
-    //   new Notification("New Sighting!", {
-    //     body: `Ref: ${data.ref}`,
-    //     icon: "/MAV-blue.svg",
-    //   });
-    // }
-
     currentRef.current = data.ref;
     lastValidTimestamp.current = now;
 
@@ -110,11 +98,6 @@ export function useSightingFeed(url: string | undefined) {
     setSelectedRef(data.ref);
   }, [query.data]);
 
-  useEffect(() => {
-    if (query.error) {
-      // console.error("Sighting feed error:", query.error);
-    }
-  }, [query.error]);
   return {
     sightings,
     selectedRef,