app/components/settings/Settings.tsx

@@ -19,8 +19,12 @@ import ThemeDropdown from './DropDownTheme';
 
 const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
 
+  //#region initialize Variables
+  let item:string|null;
   const getItemFromLocalStorage = (key: string) => {
-    const item = localStorage.getItem(key);
+    if (typeof localStorage !== 'undefined') { 
+      item = localStorage.getItem(key)
+    }
 
     if (item) {
       try {
@@ -35,32 +39,48 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   };
 
   // Active section
-  const [activeSection, setActiveSection] = useState(() => localStorage.getItem('activeSection') || 'general');
+  const [activeSection, setActiveSection] = useState('general');
 
   // Language setting
-  const [preferredLanguage, setPreferredLanguage] = useState(() => localStorage.getItem('preferredLanguage') || 'en');
+  const [preferredLanguage, setPreferredLanguage] = useState("en");
 
   // Currency setting
-  const [preferredCurrency, setPreferredCurrency] = useState(() => localStorage.getItem('preferredCurrency') || 'usd');
+  const [preferredCurrency, setPreferredCurrency] = useState('usd');
 
   // Date and time format settings
-  const [dateFormat, setDateFormat] = useState(() => localStorage.getItem('dateFormat') || 'mm/dd/yyyy');
+  const [dateFormat, setDateFormat] = useState('mm/dd/yyyy');
-  const [timeFormat, setTimeFormat] = useState(() => localStorage.getItem('timeFormat') || '12-hour');
+  const [timeFormat, setTimeFormat] = useState('12-hour');
-  const [timeZone, setTimeZone] = useState(() => localStorage.getItem('timeZone') || 'GMT');
+  const [timeZone, setTimeZone] = useState('GMT');
 
   // Online AI and chat history settings
   const [selectedOption, setSelectedOption] = useState('Offline'); // Default to 'Offline'
-  const [disableChatHistory, setDisableChatHistory] = useState(() => getItemFromLocalStorage('disableChatHistory'));
+  const [disableChatHistory, setDisableChatHistory] = useState<boolean>(false);
-  const [disableAIMemory, setDisableAIMemory] = useState(() => getItemFromLocalStorage('disableAIMemory'));
+  const [disableAIMemory, setDisableAIMemory] = useState<boolean>(false);
-  const [openSourceMode, setOpenSourceMode] = useState(() => getItemFromLocalStorage('openSourceMode'));
+  const [openSourceMode, setOpenSourceMode] = useState<boolean>(false);
 
   // User credentials
-  const [newName, setNewName] = useState(() => localStorage.getItem('newName') || '');
+  const [newName, setNewName] = useState('');
-  const [newEmail, setNewEmail] = useState(() => localStorage.getItem('newEmail') || '');
+  const [newEmail, setNewEmail] = useState('');
-  const [newPassword, setNewPassword] = useState(() => localStorage.getItem('newPassword') || '');
+  const [newPassword, setNewPassword] = useState('');
 
   // Measurement setting
-  const [preferredMeasurement, setPreferredMeasurement] = useState(() => localStorage.getItem('preferredMeasurement') || 'Metric');
+  const [preferredMeasurement, setPreferredMeasurement] = useState('Metric');
+
+  useEffect(() => {
+    setActiveSection(getItemFromLocalStorage("activeSection") || "general")
+    setPreferredLanguage(getItemFromLocalStorage("preferredLanguage") || 'en')
+    setPreferredCurrency(getItemFromLocalStorage("preferredCurrency") || "usd")
+    setDateFormat(getItemFromLocalStorage("dateFormat") || "mm/dd/yyyy")
+    setTimeFormat(getItemFromLocalStorage("timeFormat") || "12-hour")
+    setTimeZone(getItemFromLocalStorage("timeZone") || "GMT")
+    setDisableChatHistory(getItemFromLocalStorage('disableChatHistory').toLowerCase()==="true") //#TODO Idk if it works
+    setDisableAIMemory(getItemFromLocalStorage('disableAIMemory').toLowerCase()==="true")
+    setOpenSourceMode(getItemFromLocalStorage('openSourceMode').toLowerCase() === "true")
+    setNewName(getItemFromLocalStorage("newName") || "")
+    setNewEmail(getItemFromLocalStorage("newEmail") || "")
+    setNewPassword(getItemFromLocalStorage("newPassword") || "")
+    setPreferredMeasurement(getItemFromLocalStorage("preferredMeasurement") || "Metric")
+  },[])
 
   // Theme settings
   const [backgroundColor, setBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim());
@@ -99,22 +119,40 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   const [applyButtonHoverColor, setApplyButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-hover-color').trim());
 
   // Per default a purple color gradient
-  const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#dc8add");
+  const [primaryColor, setPrimaryColor] = useState("#dc8add");
-  const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#c061cb");
+  const [secondaryColor, setSecondaryColor] = useState("#c061cb");
-  const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#9141ac");
+  const [accentColor, setAccentColor] = useState("#9141ac");
-  const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#813d9c");
+  const [basicBackgroundColor, setBasicBackgroundColor] = useState("#813d9c");
-  const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe");
+  const [basicTextColor, setBasicTextColor] = useState("#fefefe");
+
+  useEffect(() => {
+    setPrimaryColor(getItemFromLocalStorage("primaryColor"))
+    setSecondaryColor(getItemFromLocalStorage("secondaryColor"))
+    setAccentColor(getItemFromLocalStorage("accentColor"))
+    setBasicBackgroundColor(getItemFromLocalStorage("basicBackgroundColor"))
+    setBasicTextColor(getItemFromLocalStorage("basicTextColor"))
+  },[])
 
   // Theme selection
   const [selectedTheme, setSelectedTheme] = useState<string>('');
 
   // API Keys
 
-  const [mistral, setMistral] = useState(localStorage.getItem('mistral') || "");
+  const [mistral, setMistral] = useState<string>("");
-  const [openai, setOpenai] = useState(localStorage.getItem('openai') || "");
+  const [openai, setOpenai] = useState<string>("");
-  const [anthropic, setAnthropic] = useState(localStorage.getItem('anthropic') || "");
+  const [anthropic, setAnthropic] = useState<string>("");
-  const [google, setGoogle] = useState(localStorage.getItem('google') || "");
+  const [google, setGoogle] = useState<string>("");
-  const [myBoolean, setMyBoolean] = useState<boolean>(() => getItemFromLocalStorage('myBoolean'));
+  const [myBoolean, setMyBoolean] = useState<boolean>(false);
+
+  useEffect(() => {
+    setMistral(getItemFromLocalStorage("mistral") || "")
+    setOpenai(getItemFromLocalStorage("openai") || "")
+    setAnthropic(getItemFromLocalStorage("anthropic") || "")
+    setGoogle(getItemFromLocalStorage("google") || "")
+    setMyBoolean(getItemFromLocalStorage("myBoolean").toLowerCase() === "true")
+  },[])
+
+  //#region set Settings
 
   const settings = {
     userPreferences: {
@@ -287,18 +325,24 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     { value: "'Zilla Slab Highlight', serif", label: 'Zilla Slab Highlight' },
   ];
 
+  //#region functions for changing Settings
+
   const handleLogout = () => {
+    if (typeof window !!== "undefined" && typeof localStorage !== 'undefined') {
       localStorage.clear();
       alert('Successfully logged out!');
       window.location.reload();
+    }
   };
 
   useEffect(() => {
+    if (typeof localStorage !== 'undefined') {
       const savedTheme = localStorage.getItem('selectedTheme');
       if (savedTheme) {
         setSelectedTheme(savedTheme);
         applyTheme(savedTheme, primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor);
       }
+    }
   }, []); // Runs only once when the component mounts
 
   // Effect hooks to update localStorage whenever any state changes
@@ -311,9 +355,11 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
       ...settings.generalSettings,
     };
     // Update localStorage for all settings
+    if (typeof localStorage !== 'undefined') {
       for (const [key, value] of Object.entries(flattenedSettings)) {
         localStorage.setItem(key, typeof value === 'boolean' ? JSON.stringify(value) : value);
       }
+    }
   }, [
     ...Object.values(settings.userPreferences),
     ...Object.values(settings.theme),
@@ -322,20 +368,26 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   ]);
 
   useEffect(() => {
+    if (typeof localStorage !== 'undefined') {
       const savedOption = localStorage.getItem('radioSelection');
       if (savedOption) {
         savedOption.replace(" (FOSS)", "");
         setSelectedOption(savedOption); // Set saved selection
       }
+    }
   }, []);
 
   const handleRadioChange = (newValue: string) => {
+    if (typeof localStorage !== 'undefined') {
       setSelectedOption(newValue);  // Update the state with the selected option
       localStorage.setItem('radioSelection', newValue);  // Save the selection for persistence
+    }
   };
 
   // Function to handle updating all credentials
   const handleUpdateCredentials = async () => {
+    if (typeof localStorage !== 'undefined') {
+      
       let useName = localStorage.getItem("accountName")
       let useEmail = localStorage.getItem("accountEmail")
       let usePassword = localStorage.getItem("accountPassword")
@@ -352,6 +404,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
 
         if (await createAccount(useName, useEmail, usePassword)) {
           if (await changeData(useName, usePassword, settings)) {
+            if (typeof window !== 'undefined') {
               localStorage.setItem("currentName", useName)
               localStorage.setItem("currentPassword", usePassword)
               localStorage.setItem("currentEmail", useEmail)
@@ -360,15 +413,19 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
             }
           }
         }
+      }
+    }
   };
 
   // Function to handle account deletion
   const handleDeleteAccount = async () => {
+    if (typeof localStorage !== 'undefined') {
+      
       const useName = localStorage.getItem("accountName")
       const usePassword = localStorage.getItem("accountPassword")
       if (useName && usePassword) {
         const success = await deleteAccount(useName, usePassword);
-      if (success) {
+        if (success && typeof window !== 'undefined' ) {
           localStorage.clear();
           alert('Account deleted successfully!');
           window.location.reload()
@@ -377,9 +434,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
           alert('Account deletion failed. Please check your password.');
         }
       }
+    }
   };
 
-
+  //#region rendering
   // Render settings content based on the active section
   const renderSettingsContent = () => {
     switch (activeSection) {
@@ -508,6 +566,19 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                   setValue={setBasicTextColor}
                   cssVariable=""
                 />
+                <FontSizeSetting
+                  fontSize={fontSize}
+                  setFontSize={setFontSize}
+                />
+                <DropdownSetting
+                  label="Font Family"
+                  value={fontFamily}
+                  setValue={(newFont) => {
+                    setFontFamily(newFont);
+                    document.documentElement.style.setProperty('--font-family', newFont);
+                  }}
+                  options={fontOptions}
+                />
               </>
             )}
 
@@ -558,6 +629,8 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
 
 
       case 'account':
+        const namePlaceholder = getItemFromLocalStorage("accountName") || "Current Name"
+        const emailPlaceholder = getItemFromLocalStorage("accountEmail") || "Current Email"
         return (
           <div className="settings-section">
             <h2>Account Settings</h2>
@@ -566,14 +639,14 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               value={newName}
               type='text'
               setValue={setNewName}
-              placeholder={localStorage.getItem("accountName") || "Current Name"} // Show current name or a default
+              placeholder={namePlaceholder} // Show current name or a default
             />
             <TextSettings
               label="New Email"
               value={newEmail}
               setValue={setNewEmail}
               type="email" // Input type is email
-              placeholder={localStorage.getItem("accountEmail") || "Current Email"} // Show current email or a default
+              placeholder={emailPlaceholder} // Show current email or a default
             />
             <TextSettings
               label="New Password"
@@ -601,6 +674,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
         );
 
       case 'api':
+        const mistral_APIKey_PlaceHolder = getItemFromLocalStorage("mistral") || "Enter the API key"
+        const openai_APIKey_PlaceHolder = getItemFromLocalStorage("openai") || "Enter the API key"
+        const anthropic_APIKey_PlaceHolder = getItemFromLocalStorage("anthropic") || "Enter the API key"
+        const google_APIKey_PlaceHolder = getItemFromLocalStorage("google") || "Enter the API key"
         return (
           <div className="settings-section">
             <TextSettings
@@ -608,7 +685,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               value={mistral} // State variable for the input
               setValue={setMistral} // State updater function
               type="text" // Input type
-              placeholder={localStorage.getItem('mistral') || "Enter the API key"}
+              placeholder={mistral_APIKey_PlaceHolder}
             />
             <div className="settings-option">
               <a href="https://console.mistral.ai/api-keys/" target="_blank" rel="noopener noreferrer">
@@ -620,7 +697,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               value={openai} // State variable for the input
               setValue={setOpenai} // State updater function
               type="text" // Input type
-              placeholder={localStorage.getItem('openai') || "Enter the API key"}
+              placeholder={openai_APIKey_PlaceHolder}
             />
             <div className="settings-option">
               <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer">
@@ -632,7 +709,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               value={anthropic} // State variable for the input
               setValue={setAnthropic} // State updater function
               type="text" // Input type
-              placeholder={localStorage.getItem('anthropic') || "Enter the API key"}
+              placeholder={anthropic_APIKey_PlaceHolder}
             />
             <div className="settings-option">
               <a href="https://console.anthropic.com/settings/keys" target="_blank" rel="noopener noreferrer">
@@ -644,7 +721,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               value={google} // State variable for the input
               setValue={setGoogle} // State updater function
               type="text" // Input type
-              placeholder={localStorage.getItem('google') || "Enter the API key"}
+              placeholder={google_APIKey_PlaceHolder}
             />
             <div className="settings-option">
               <a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noopener noreferrer">
@@ -729,8 +806,12 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
             <button className="apply" onClick={async () => {
               getAllLocalStorageItems();
               closeSettings();
+              if (typeof localStorage !== 'undefined') {
                 await changeData(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ????
+              }
+              if (typeof window !== 'undefined') {
                 window.location.reload();
+              }
             }}>
               Apply
             </button>