added settings persistance

src/modules/settings/hooks/usePersistSettings.ts

@@ -0,0 +1,40 @@
+import { useCallback, useState } from "react";
+import { defaultSettings } from "../context/SettingsContext";
+import {
+  Theme,
+  defaultDarkTheme,
+  defaultLightTheme,
+} from "~/modules/theme/constants/theme";
+import { useDetectTheme } from "~/modules/theme/hooks/useDetectTheme";
+import { SettingsValue } from "~/modules/settings/context/SettingsContext";
+
+const getLocalStorageSettings = (defaultValue: SettingsValue) => {
+  try {
+    const raw = localStorage.getItem("settings");
+    const parsed = JSON.parse(raw ?? "");
+
+    return parsed ? { ...defaultValue, ...parsed } : defaultValue;
+  } catch (error) {
+    return defaultValue;
+  }
+};
+
+export const usePersistSettings = () => {
+  const theme = useDetectTheme();
+  const defaultColors =
+    theme === Theme.Dark ? defaultDarkTheme : defaultLightTheme;
+
+  const [settings, setSettings] = useState<SettingsValue>(
+    getLocalStorageSettings({ ...defaultSettings, ...defaultColors })
+  );
+
+  const update = useCallback((val: Partial<SettingsValue>) => {
+    setSettings((v) => {
+      const updatedValue = { ...v, ...val };
+      localStorage.setItem("settings", JSON.stringify(updatedValue));
+      return updatedValue;
+    });
+  }, []);
+
+  return { settings, update };
+};

src/modules/settings/providers/SettingsProvider/index.tsx

@@ -1,40 +1,22 @@
 import { FC, PropsWithChildren, useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "~/components/buttons/Button";
+import { ModalPage } from "~/modules/modal/components/ModalPage";
 import { Modal } from "~/modules/modal/containers/Modal";
 import { SettingsContainer } from "../../containers/SettingsContainer";
-import {
+import { SettingsContext } from "../../context/SettingsContext";
-  SettingsContext,
+import { usePersistSettings } from "../../hooks/usePersistSettings";
-  SettingsValue,
-  defaultSettings,
-} from "../../context/SettingsContext";
-import { ModalPage } from "~/modules/modal/components/ModalPage";
-import { useDetectTheme } from "~/modules/theme/hooks/useDetectTheme";
-import {
-  Theme,
-  defaultDarkTheme,
-  defaultLightTheme,
-} from "~/modules/theme/constants/theme";
-import { Button } from "~/components/buttons/Button";
-import { useTranslation } from "react-i18next";
 import styles from "./styles.module.scss";
 
 const SettingsProvider: FC<PropsWithChildren> = ({ children }) => {
   const { t } = useTranslation();
-  const theme = useDetectTheme();
-  const defaultColors =
-    theme === Theme.Dark ? defaultDarkTheme : defaultLightTheme;
 
-  const [settings, setSettings] = useState({
+  const { settings, update } = usePersistSettings();
-    ...defaultSettings,
+
-    ...defaultColors,
-  });
   const [settingsModalVisible, setSettingsModalVisible] = useState(false);
 
   const show = useCallback(() => setSettingsModalVisible(true), []);
   const hide = useCallback(() => setSettingsModalVisible(false), []);
-  const update = useCallback(
-    (val: Partial<SettingsValue>) => setSettings((v) => ({ ...v, ...val })),
-    []
-  );
 
   return (
     <SettingsContext.Provider value={{ settings, update, show, hide }}>