From 2d20ee9d246a145f5bca3061ad499185e7ffd651 Mon Sep 17 00:00:00 2001
From: 17ColinMiPerry <17colinmiperry@gmail.com>
Date: Thu, 8 May 2025 21:31:10 -0700
Subject: [PATCH 1/3] Implemented spellcheck toggle in Settings

---
 .../Actions/EditMessage/index.jsx             | 12 ++++
 .../ChatContainer/PromptInput/index.jsx       | 11 ++++
 frontend/src/locales/ar/common.js             |  4 ++
 frontend/src/locales/da/common.js             |  4 ++
 frontend/src/locales/de/common.js             |  4 ++
 frontend/src/locales/en/common.js             |  4 ++
 frontend/src/locales/es/common.js             |  4 ++
 frontend/src/locales/fa/common.js             |  4 ++
 frontend/src/locales/fr/common.js             |  4 ++
 frontend/src/locales/he/common.js             |  4 ++
 frontend/src/locales/it/common.js             |  4 ++
 frontend/src/locales/ja/common.js             |  4 ++
 frontend/src/locales/ko/common.js             |  4 ++
 frontend/src/locales/nl/common.js             |  4 ++
 frontend/src/locales/pt_BR/common.js          |  4 ++
 frontend/src/locales/ru/common.js             |  4 ++
 frontend/src/locales/tr/common.js             |  4 ++
 frontend/src/locales/vn/common.js             |  4 ++
 frontend/src/locales/zh/common.js             |  4 ++
 frontend/src/locales/zh_TW/common.js          |  4 ++
 frontend/src/models/appearance.js             |  1 +
 .../GeneralSettings/Settings/Chat/index.jsx   |  2 +
 .../Settings/components/SpellCheck/index.jsx  | 56 +++++++++++++++++++
 23 files changed, 154 insertions(+)
 create mode 100644 frontend/src/pages/GeneralSettings/Settings/components/SpellCheck/index.jsx

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx
index 3c1fd16a180..ba23854b365 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx
@@ -1,5 +1,6 @@
 import { Pencil } from "@phosphor-icons/react";
 import { useState, useEffect, useRef } from "react";
+import Appearance from "@/models/appearance";
 
 const EDIT_EVENT = "toggle-message-edit";
 
@@ -70,6 +71,16 @@ export function EditMessageForm({
   saveChanges,
 }) {
   const formRef = useRef(null);
+  const [enableSpellCheck, setEnableSpellCheck] = useState(false);
+
+  useEffect(() => {
+    function fetchSettings() {
+      const settings = Appearance.getSettings();
+      setEnableSpellCheck(settings.enableSpellCheck ?? true);
+    }
+    fetchSettings();
+  }, []);
+
   function handleSaveMessage(e) {
     e.preventDefault();
     const form = new FormData(e.target);
@@ -98,6 +109,7 @@ export function EditMessageForm({
       <textarea
         ref={formRef}
         name="editedMessage"
+        spellCheck={enableSpellCheck}
         className="text-white w-full rounded bg-theme-bg-secondary border border-white/20 active:outline-none focus:outline-none focus:ring-0 pr-16 pl-1.5 pt-1.5 resize-y"
         defaultValue={message}
         onChange={adjustTextArea}
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
index d490a794b1b..9eee1e5f9d0 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
@@ -18,6 +18,7 @@ import AttachItem from "./AttachItem";
 import { PASTE_ATTACHMENT_EVENT } from "../DnDWrapper";
 import useTextSize from "@/hooks/useTextSize";
 import { useTranslation } from "react-i18next";
+import Appearance from "@/models/appearance";
 
 export const PROMPT_INPUT_EVENT = "set_prompt_input";
 const MAX_EDIT_STACK_SIZE = 100;
@@ -39,6 +40,15 @@ export default function PromptInput({
   const undoStack = useRef([]);
   const redoStack = useRef([]);
   const { textSizeClass } = useTextSize();
+  const [enableSpellCheck, setEnableSpellCheck] = useState(false);
+
+  useEffect(() => {
+    function fetchSettings() {
+      const settings = Appearance.getSettings();
+      setEnableSpellCheck(settings.enableSpellCheck ?? true);
+    }
+    fetchSettings();
+  }, []);
 
   /**
    * To prevent too many re-renders we remotely listen for updates from the parent
@@ -268,6 +278,7 @@ export default function PromptInput({
                   adjustTextArea(e);
                 }}
                 value={promptInput}
+                spellCheck={enableSpellCheck}
                 className={`border-none cursor-text max-h-[50vh] md:max-h-[350px] md:min-h-[40px] mx-2 md:mx-0 pt-[12px] w-full leading-5 md:text-md text-white bg-transparent placeholder:text-white/60 light:placeholder:text-theme-text-primary resize-none active:outline-none focus:outline-none flex-grow ${textSizeClass}`}
                 placeholder={t("chat_window.send_message")}
               />
diff --git a/frontend/src/locales/ar/common.js b/frontend/src/locales/ar/common.js
index 26af0974436..54012309164 100644
--- a/frontend/src/locales/ar/common.js
+++ b/frontend/src/locales/ar/common.js
@@ -680,6 +680,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/da/common.js b/frontend/src/locales/da/common.js
index e6b421b1097..b5a92676549 100644
--- a/frontend/src/locales/da/common.js
+++ b/frontend/src/locales/da/common.js
@@ -719,6 +719,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/de/common.js b/frontend/src/locales/de/common.js
index a7cae3d3679..fe51dcccea2 100644
--- a/frontend/src/locales/de/common.js
+++ b/frontend/src/locales/de/common.js
@@ -717,6 +717,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/en/common.js b/frontend/src/locales/en/common.js
index ba1fea0d3a3..1aaa6cd3b7f 100644
--- a/frontend/src/locales/en/common.js
+++ b/frontend/src/locales/en/common.js
@@ -472,6 +472,10 @@ const TRANSLATIONS = {
         title: "Auto-Speak Responses",
         description: "Automatically speak responses from the AI",
       },
+      spellcheck: {
+        title: "Enable Spellcheck",
+        description: "Enable or disable spellcheck in the chat input field",
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/es/common.js b/frontend/src/locales/es/common.js
index 14a03c3fc1b..e261bd6318b 100644
--- a/frontend/src/locales/es/common.js
+++ b/frontend/src/locales/es/common.js
@@ -679,6 +679,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/fa/common.js b/frontend/src/locales/fa/common.js
index d1c9a70775c..50853e14fbb 100644
--- a/frontend/src/locales/fa/common.js
+++ b/frontend/src/locales/fa/common.js
@@ -672,6 +672,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/fr/common.js b/frontend/src/locales/fr/common.js
index 4023b0001c8..8d3a2b67edb 100644
--- a/frontend/src/locales/fr/common.js
+++ b/frontend/src/locales/fr/common.js
@@ -680,6 +680,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/he/common.js b/frontend/src/locales/he/common.js
index 2d741444a58..ccfcc94fa9d 100644
--- a/frontend/src/locales/he/common.js
+++ b/frontend/src/locales/he/common.js
@@ -665,6 +665,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/it/common.js b/frontend/src/locales/it/common.js
index 94c4d2ad548..e6346766759 100644
--- a/frontend/src/locales/it/common.js
+++ b/frontend/src/locales/it/common.js
@@ -678,6 +678,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/ja/common.js b/frontend/src/locales/ja/common.js
index 09a3bf6ff43..5584fd00afe 100644
--- a/frontend/src/locales/ja/common.js
+++ b/frontend/src/locales/ja/common.js
@@ -711,6 +711,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/ko/common.js b/frontend/src/locales/ko/common.js
index 947bc196c04..f3078bb24d9 100644
--- a/frontend/src/locales/ko/common.js
+++ b/frontend/src/locales/ko/common.js
@@ -665,6 +665,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/nl/common.js b/frontend/src/locales/nl/common.js
index 8d05f90e9fe..7847ac9ff2a 100644
--- a/frontend/src/locales/nl/common.js
+++ b/frontend/src/locales/nl/common.js
@@ -675,6 +675,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/pt_BR/common.js b/frontend/src/locales/pt_BR/common.js
index 1e9bf3b6f2a..a51fb27fba0 100644
--- a/frontend/src/locales/pt_BR/common.js
+++ b/frontend/src/locales/pt_BR/common.js
@@ -684,6 +684,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/ru/common.js b/frontend/src/locales/ru/common.js
index 429b7c3d4ac..c6b79ce801f 100644
--- a/frontend/src/locales/ru/common.js
+++ b/frontend/src/locales/ru/common.js
@@ -720,6 +720,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/tr/common.js b/frontend/src/locales/tr/common.js
index 72f473d4824..0db541a5a1d 100644
--- a/frontend/src/locales/tr/common.js
+++ b/frontend/src/locales/tr/common.js
@@ -675,6 +675,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/vn/common.js b/frontend/src/locales/vn/common.js
index 5c35353564b..08ec9cdb914 100644
--- a/frontend/src/locales/vn/common.js
+++ b/frontend/src/locales/vn/common.js
@@ -674,6 +674,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/zh/common.js b/frontend/src/locales/zh/common.js
index 5d3dcdad77d..0f9d365cc30 100644
--- a/frontend/src/locales/zh/common.js
+++ b/frontend/src/locales/zh/common.js
@@ -674,6 +674,10 @@ const TRANSLATIONS = {
         title: "自动语音回复",
         description: "自动朗读 AI 的回复内容",
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/zh_TW/common.js b/frontend/src/locales/zh_TW/common.js
index 6b6bdfeeefe..a3bdfba0960 100644
--- a/frontend/src/locales/zh_TW/common.js
+++ b/frontend/src/locales/zh_TW/common.js
@@ -677,6 +677,10 @@ const TRANSLATIONS = {
         title: "自動語音回應",
         description: "自動朗讀 AI 的回應內容",
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/models/appearance.js b/frontend/src/models/appearance.js
index a066bdfed69..2d28ab048c2 100644
--- a/frontend/src/models/appearance.js
+++ b/frontend/src/models/appearance.js
@@ -5,6 +5,7 @@ const Appearance = {
     showScrollbar: false,
     autoSubmitSttInput: true,
     autoPlayAssistantTtsResponse: false,
+    enableSpellCheck: true,
   },
 
   /**
diff --git a/frontend/src/pages/GeneralSettings/Settings/Chat/index.jsx b/frontend/src/pages/GeneralSettings/Settings/Chat/index.jsx
index 1e3a056236f..b82b864f6e1 100644
--- a/frontend/src/pages/GeneralSettings/Settings/Chat/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Settings/Chat/index.jsx
@@ -3,6 +3,7 @@ import { isMobile } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 import AutoSubmit from "../components/AutoSubmit";
 import AutoSpeak from "../components/AutoSpeak";
+import SpellCheck from "../components/SpellCheck";
 
 export default function ChatSettings() {
   const { t } = useTranslation();
@@ -27,6 +28,7 @@ export default function ChatSettings() {
           </div>
           <AutoSubmit />
           <AutoSpeak />
+          <SpellCheck />
         </div>
       </div>
     </div>
diff --git a/frontend/src/pages/GeneralSettings/Settings/components/SpellCheck/index.jsx b/frontend/src/pages/GeneralSettings/Settings/components/SpellCheck/index.jsx
new file mode 100644
index 00000000000..8745fe98e09
--- /dev/null
+++ b/frontend/src/pages/GeneralSettings/Settings/components/SpellCheck/index.jsx
@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from "react";
+import Appearance from "@/models/appearance";
+import { useTranslation } from "react-i18next";
+
+export default function SpellCheck() {
+  const [saving, setSaving] = useState(false);
+  const [enableSpellCheck, setEnableSpellCheck] = useState(false);
+  const { t } = useTranslation();
+
+  const handleChange = async (e) => {
+    const newValue = e.target.checked;
+    setEnableSpellCheck(newValue);
+    setSaving(true);
+    try {
+      Appearance.updateSettings({ enableSpellCheck: newValue });
+    } catch (error) {
+      console.error("Failed to update appearance settings:", error);
+      setEnableSpellCheck(!newValue);
+    }
+    setSaving(false);
+  };
+
+  useEffect(() => {
+    function fetchSettings() {
+      const settings = Appearance.getSettings();
+      setEnableSpellCheck(settings.enableSpellCheck ?? true);
+    }
+    fetchSettings();
+  }, []);
+
+  return (
+    <div className="flex flex-col gap-y-0.5 my-4">
+      <p className="text-sm leading-6 font-semibold text-white">
+        {t("customization.chat.spellcheck.title")}
+      </p>
+      <p className="text-xs text-white/60">
+        {t("customization.chat.spellcheck.description")}
+      </p>
+      <div className="flex items-center gap-x-4">
+        <label className="relative inline-flex cursor-pointer items-center">
+          <input
+            id="spellcheck"
+            type="checkbox"
+            name="spellcheck"
+            value="yes"
+            checked={enableSpellCheck}
+            onChange={handleChange}
+            disabled={saving}
+            className="peer sr-only"
+          />
+          <div className="pointer-events-none peer h-6 w-11 rounded-full bg-[#CFCFD0] after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border-none after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-[#32D583] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-transparent"></div>
+        </label>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file

From 3b4cd0452239afb734a551386aef58fc53d9e7ec Mon Sep 17 00:00:00 2001
From: 17ColinMiPerry <17colinmiperry@gmail.com>
Date: Thu, 8 May 2025 21:33:42 -0700
Subject: [PATCH 2/3] ran yarn lint

---
 .../GeneralSettings/Settings/components/SpellCheck/index.jsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/GeneralSettings/Settings/components/SpellCheck/index.jsx b/frontend/src/pages/GeneralSettings/Settings/components/SpellCheck/index.jsx
index 8745fe98e09..984cc0ff65b 100644
--- a/frontend/src/pages/GeneralSettings/Settings/components/SpellCheck/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Settings/components/SpellCheck/index.jsx
@@ -53,4 +53,4 @@ export default function SpellCheck() {
       </div>
     </div>
   );
-} 
\ No newline at end of file
+}

From bf10764fd8488f5119dddbec3da50593f5657fd1 Mon Sep 17 00:00:00 2001
From: timothycarambat <rambat1010@gmail.com>
Date: Fri, 9 May 2025 09:46:26 -0700
Subject: [PATCH 3/3] reduce read complexity for appearance spellcheck lint

---
 .../Actions/EditMessage/index.jsx                | 12 +-----------
 .../ChatContainer/PromptInput/index.jsx          | 11 +----------
 frontend/src/models/appearance.js                | 14 +++++++++++---
 .../Settings/components/SpellCheck/index.jsx     | 16 +++++-----------
 4 files changed, 18 insertions(+), 35 deletions(-)

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx
index ba23854b365..6967f120b8c 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx
@@ -71,16 +71,6 @@ export function EditMessageForm({
   saveChanges,
 }) {
   const formRef = useRef(null);
-  const [enableSpellCheck, setEnableSpellCheck] = useState(false);
-
-  useEffect(() => {
-    function fetchSettings() {
-      const settings = Appearance.getSettings();
-      setEnableSpellCheck(settings.enableSpellCheck ?? true);
-    }
-    fetchSettings();
-  }, []);
-
   function handleSaveMessage(e) {
     e.preventDefault();
     const form = new FormData(e.target);
@@ -109,7 +99,7 @@ export function EditMessageForm({
       <textarea
         ref={formRef}
         name="editedMessage"
-        spellCheck={enableSpellCheck}
+        spellCheck={Appearance.get("enableSpellCheck")}
         className="text-white w-full rounded bg-theme-bg-secondary border border-white/20 active:outline-none focus:outline-none focus:ring-0 pr-16 pl-1.5 pt-1.5 resize-y"
         defaultValue={message}
         onChange={adjustTextArea}
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
index 9eee1e5f9d0..795ad13349c 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
@@ -40,15 +40,6 @@ export default function PromptInput({
   const undoStack = useRef([]);
   const redoStack = useRef([]);
   const { textSizeClass } = useTextSize();
-  const [enableSpellCheck, setEnableSpellCheck] = useState(false);
-
-  useEffect(() => {
-    function fetchSettings() {
-      const settings = Appearance.getSettings();
-      setEnableSpellCheck(settings.enableSpellCheck ?? true);
-    }
-    fetchSettings();
-  }, []);
 
   /**
    * To prevent too many re-renders we remotely listen for updates from the parent
@@ -278,7 +269,7 @@ export default function PromptInput({
                   adjustTextArea(e);
                 }}
                 value={promptInput}
-                spellCheck={enableSpellCheck}
+                spellCheck={Appearance.get("enableSpellCheck")}
                 className={`border-none cursor-text max-h-[50vh] md:max-h-[350px] md:min-h-[40px] mx-2 md:mx-0 pt-[12px] w-full leading-5 md:text-md text-white bg-transparent placeholder:text-white/60 light:placeholder:text-theme-text-primary resize-none active:outline-none focus:outline-none flex-grow ${textSizeClass}`}
                 placeholder={t("chat_window.send_message")}
               />
diff --git a/frontend/src/models/appearance.js b/frontend/src/models/appearance.js
index 2d28ab048c2..e1e45b454ea 100644
--- a/frontend/src/models/appearance.js
+++ b/frontend/src/models/appearance.js
@@ -1,5 +1,13 @@
 import { APPEARANCE_SETTINGS } from "@/utils/constants";
 
+/**
+ * @typedef { 'showScrollbar' |
+ * 'autoSubmitSttInput' |
+ * 'autoPlayAssistantTtsResponse' |
+ * 'enableSpellCheck'
+ * } AvailableSettings - The supported settings for the appearance model.
+ */
+
 const Appearance = {
   defaultSettings: {
     showScrollbar: false,
@@ -23,8 +31,8 @@ const Appearance = {
 
   /**
    * Fetches a specific setting from the user's settings
-   * @param {string} key - The key of the setting to fetch
-   * @returns {any} - a default value if the setting is not found or the current value
+   * @param {AvailableSettings} key - The key of the setting to fetch
+   * @returns {boolean} - a default value if the setting is not found or the current value
    */
   get: (key) => {
     const settings = Appearance.getSettings();
@@ -35,7 +43,7 @@ const Appearance = {
 
   /**
    * Updates a specific setting from the user's settings
-   * @param {string} key - The key of the setting to update
+   * @param {AvailableSettings} key - The key of the setting to update
    * @param {any} value - The value to update the setting to
    * @returns {object}
    */
diff --git a/frontend/src/pages/GeneralSettings/Settings/components/SpellCheck/index.jsx b/frontend/src/pages/GeneralSettings/Settings/components/SpellCheck/index.jsx
index 984cc0ff65b..933c4800e6a 100644
--- a/frontend/src/pages/GeneralSettings/Settings/components/SpellCheck/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Settings/components/SpellCheck/index.jsx
@@ -3,16 +3,18 @@ import Appearance from "@/models/appearance";
 import { useTranslation } from "react-i18next";
 
 export default function SpellCheck() {
-  const [saving, setSaving] = useState(false);
-  const [enableSpellCheck, setEnableSpellCheck] = useState(false);
   const { t } = useTranslation();
+  const [saving, setSaving] = useState(false);
+  const [enableSpellCheck, setEnableSpellCheck] = useState(
+    Appearance.get("enableSpellCheck")
+  );
 
   const handleChange = async (e) => {
     const newValue = e.target.checked;
     setEnableSpellCheck(newValue);
     setSaving(true);
     try {
-      Appearance.updateSettings({ enableSpellCheck: newValue });
+      Appearance.set("enableSpellCheck", newValue);
     } catch (error) {
       console.error("Failed to update appearance settings:", error);
       setEnableSpellCheck(!newValue);
@@ -20,14 +22,6 @@ export default function SpellCheck() {
     setSaving(false);
   };
 
-  useEffect(() => {
-    function fetchSettings() {
-      const settings = Appearance.getSettings();
-      setEnableSpellCheck(settings.enableSpellCheck ?? true);
-    }
-    fetchSettings();
-  }, []);
-
   return (
     <div className="flex flex-col gap-y-0.5 my-4">
       <p className="text-sm leading-6 font-semibold text-white">