From 2b6a00cc1ade7671ab0ed04affeb2c7fd4bc9346 Mon Sep 17 00:00:00 2001
From: Troy <troy4560@gmail.com>
Date: Wed, 6 Nov 2024 21:29:10 -0500
Subject: [PATCH] Update VZSettings.tsx

Toggle state
---
 src/client/VZSettings.tsx | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/client/VZSettings.tsx b/src/client/VZSettings.tsx
index 9cc214f9..54fb2b74 100644
--- a/src/client/VZSettings.tsx
+++ b/src/client/VZSettings.tsx
@@ -48,6 +48,10 @@ export const VZSettings = ({
   const [selectedFontSize, setSelectedFontSize] =
     useState('16px');
 
+  // Initialize rainbowBrackets setting from localStorage or default to 'on'
+  const [rainbowBrackets, setRainbowBrackets] =
+    useState('on');
+
   useEffect(() => {
     // If we're in the browser,
     if (typeof window !== 'undefined') {
@@ -60,6 +64,12 @@ export const VZSettings = ({
         'vzcodeSelectedFontSize',
       );
 
+      const rainbowBracketsFromLocalStorage:
+        | string
+        | null = window.localStorage.getItem(
+        'vzcodeRainbowBrackets',
+      );
+
       if (selectedFontFromLocalStorage !== null) {
         setSelectedFont(selectedFontFromLocalStorage);
       }
@@ -68,6 +78,9 @@ export const VZSettings = ({
           selectedFontSizeFromLocalStorage,
         );
       }
+      if (rainbowBracketsFromLocalStorage !== null) {
+        setRainbowBrackets(rainbowBracketsFromLocalStorage);
+      }
     } else {
       // If we're not in the browser, use the default initial width.
     }
@@ -96,6 +109,16 @@ export const VZSettings = ({
     [],
   );
 
+  // Called when the user changes the Rainbow Brackets setting
+  const handleRainbowBracketsChange = useCallback(
+    (event: React.ChangeEvent<HTMLSelectElement>) => {
+      const newSetting = event.target.value;
+      localStorage.setItem('vzcodeRainbowBrackets', newSetting);
+      setRainbowBrackets(newSetting);
+    },
+    [],
+  );
+
   useEffect(() => {
     document.body.style.setProperty(
       '--vzcode-font-family',
@@ -223,7 +246,11 @@ export const VZSettings = ({
         
         <Form.Group className="mb-3" controlId="formFork">
           <Form.Label>Rainbow Brackets</Form.Label>
-          <select className="form-select">
+          <select
+            className="form-select"
+            onChange={handleRainbowBracketsChange}
+            value={rainbowBrackets}
+          >
             <option value="on">On</option>
             <option value="off">Off</option>
           </select>