- 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/context/providers/SoundContextProvider.tsx

@@ -1,4 +1,11 @@
-import { useEffect, useMemo, useReducer, type ReactNode } from "react";
+import {
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
 import { SoundContext } from "../SoundContext";
 import { initialState, reducer } from "../reducers/SoundContextReducer";
 import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
@@ -8,6 +15,9 @@ type SoundContextProviderProps = {
 };
 
 const SoundContextProvider = ({ children }: SoundContextProviderProps) => {
+  const audioReady = useRef(false);
+  const [audioArmed, setAudioArmed] = useState(false);
+  const audioCtxRef = useRef<AudioContext | null>(null);
   const [state, dispatch] = useReducer(reducer, initialState);
   const { mutation } = useCameraBlackboard();
 
@@ -23,7 +33,40 @@ const SoundContextProvider = ({ children }: SoundContextProviderProps) => {
     fetchSound();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  const value = useMemo(() => ({ state, dispatch }), [state, dispatch]);
+
+  useEffect(() => {
+    const unlock = async () => {
+      if (!audioCtxRef.current) audioCtxRef.current = new AudioContext();
+      if (audioCtxRef.current.state !== "running") {
+        try {
+          await audioCtxRef.current.resume();
+        } catch {
+          /* empty */
+        }
+      }
+      const armed = audioCtxRef.current.state === "running";
+      audioReady.current = audioCtxRef.current.state === "running";
+      setAudioArmed(armed);
+      if (audioReady.current) {
+        window.removeEventListener("pointerdown", unlock);
+        window.removeEventListener("keydown", unlock);
+        window.removeEventListener("touchstart", unlock);
+      }
+    };
+    window.addEventListener("pointerdown", unlock, { once: false });
+    window.addEventListener("keydown", unlock, { once: false });
+    window.addEventListener("touchstart", unlock, { once: false });
+    return () => {
+      window.removeEventListener("pointerdown", unlock);
+      window.removeEventListener("keydown", unlock);
+      window.removeEventListener("touchstart", unlock);
+    };
+  }, []);
+
+  const value = useMemo(
+    () => ({ state, dispatch, audioArmed }),
+    [state, audioArmed]
+  );
   return (
     <SoundContext.Provider value={value}>{children}</SoundContext.Provider>
   );