- added state to set sound set settings for sightings and NPED hits

- added function to save mute settings

src/components/SettingForms/Sound/SoundSettingsFields.tsx

@@ -2,15 +2,14 @@ import { Field, FieldArray, Form, Formik } from "formik";
 import FormGroup from "../components/FormGroup";
 import type { FormValues, Hotlist } from "../../../types/types";
 import { useSoundContext } from "../../../context/SoundContext";
+import { useCameraBlackboard } from "../../../hooks/useCameraBlackboard";
 import { toast } from "sonner";
 
 const SoundSettingsFields = () => {
   const { state, dispatch } = useSoundContext();
-  const hotlists: Hotlist[] = [
-    { name: "hotlist0", sound: "" },
-    { name: "hotlist1", sound: "" },
-    { name: "hotlist2", sound: "" },
-  ];
+  const { mutation } = useCameraBlackboard();
+
+  const hotlists: Hotlist[] = state.hotlists;
 
   const soundOptions = state?.soundOptions?.map((soundOption) => ({
     value: soundOption?.name,
@@ -23,9 +22,18 @@ const SoundSettingsFields = () => {
     hotlists,
   };
 
-  const handleSubmit = (values: FormValues) => {
+  const handleSubmit = async (values: FormValues) => {
     dispatch({ type: "UPDATE", payload: values });
-    toast.success("Sound settings updated");
+    const result = await mutation.mutateAsync({
+      operation: "INSERT",
+      path: "soundSettings",
+      value: values,
+    });
+    if (result.reason !== "OK") {
+      toast.error("Cannot update sound settings");
+    } else {
+      toast.success("Sound Settings successfully updated");
+    }
   };
   return (
     <Formik initialValues={initialValues} onSubmit={handleSubmit}>
@@ -68,8 +76,8 @@ const SoundSettingsFields = () => {
                 name="hotlists"
                 render={() => (
                   <div className="w-full m-2">
-                    {values.hotlists.length > 0 ? (
-                      values.hotlists.map((hotlist, index) => (
+                    {values?.hotlists?.length > 0 ? (
+                      values?.hotlists?.map((hotlist, index) => (
                         <div
                           key={hotlist.name}
                           className="flex items-center m-2 w-full justify-between"