Merge branch 'revert'

2024-10-03 16:58:52 +02:00 · 2024-10-03 16:58:52 +02:00 · 51899a554e
commit 51899a554e
parent c56c3c802d c018829f8f
2 changed files with 215 additions and 139 deletions
--- a/app/components/settings/Settings.tsx
+++ b/app/components/settings/Settings.tsx
@ -59,7 +59,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
  const [selectedOption, setSelectedOption] = useState(() => {
    // Check if openSourceMode exists in localStorage
    const openSourceMode = localStorage.getItem("openSourceMode");
-    
+
    // If it exists and is "true", set selectedOption to None (Foss), otherwise set it to None
    return openSourceMode === "true" ? "None (FOSS)" : "None";
  });
@ -112,13 +112,12 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
  const [closeButtonHoverColor, setCloseButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--close-button-hover-color').trim());
  const [applyButtonColor, setApplyButtonColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-color').trim());
  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 [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#c061cb");
  const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#9141ac");
  const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#813d9c");
-  const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe"); 
+  const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe");

  // Theme selection
  const [selectedTheme, setSelectedTheme] = useState<string>('');
@ -128,7 +127,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
  const [openai, setOpenai] = useState(localStorage.getItem('openai') || "");
  const [anthropic, setAnthropic] = useState(localStorage.getItem('anthropic') || "");
  const [google, setGoogle] = useState(localStorage.getItem('google') || "");
-  const [myBoolean, setMyBoolean] =useState<boolean | any>(() => getItemFromLocalStorage('myBoolean'));
+  const [myBoolean, setMyBoolean] = useState<boolean | any>(() => getItemFromLocalStorage('myBoolean'));

  const settings = {
    userPreferences: {
@ -137,7 +136,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
      preferredCurrency,
      preferredMeasurement,
      dateFormat,
-      timeFormat, 
+      timeFormat,
      timeZone,
      selectedOption,
      disableChatHistory,
@ -224,7 +223,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
    { name: "Apply Button Color", value: applyButtonColor, setValue: setApplyButtonColor, cssVariable: "--apply-button-color" },
    { name: "Apply Button Hover Color", value: applyButtonHoverColor, setValue: setApplyButtonHoverColor, cssVariable: "--apply-button-hover-color" },
    { name: "Burger Menu Background Color", value: burgerMenuBackgroundColor, setValue: setBurgerMenuBackgroundColor, cssVariable: "--burger-menu-background-color" },
-];
+  ];


  const timeZoneOptions = [
@ -338,15 +337,13 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
  useEffect(() => {
    const savedOption = localStorage.getItem('radioSelection');
    if (savedOption) {
-      handleRadioChange(savedOption); // Set saved selection
+      savedOption.replace(" (FOSS)", "");
+      setSelectedOption(savedOption); // Set saved selection
    }
  }, []);

  const handleRadioChange = (newValue: string) => {
    setSelectedOption(newValue);  // Update the state with the selected option
-    if (openSourceMode) {
-      newValue += " (FOSS)"
-    }
    localStorage.setItem('radioSelection', newValue);  // Save the selection for persistence
  };

@ -479,85 +476,85 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
        );


-          case 'theme':
-            return (
-              <div className="settings-section">
-                <h2>Theme Settings</h2>
-          
-                <ThemeDropdown
-                  selectedTheme={selectedTheme}
-                  setSelectedTheme={setSelectedTheme}
+      case 'theme':
+        return (
+          <div className="settings-section">
+            <h2>Theme Settings</h2>
+
+            <ThemeDropdown
+              selectedTheme={selectedTheme}
+              setSelectedTheme={setSelectedTheme}
+            />
+
+            {selectedTheme === 'BASIC-CUSTOM' && (
+              <>
+                <h3>Basic Colors</h3>
+                {/* Basic Color Inputs using ColorSetting Component */}
+                <ColorSetting
+                  name="Primary Color"
+                  value={primaryColor}
+                  setValue={setPrimaryColor}
+                  cssVariable=""
                />
-          
-                {selectedTheme === 'BASIC-CUSTOM' && (
-                  <>
-                    <h3>Basic Colors</h3>
-                    {/* Basic Color Inputs using ColorSetting Component */}
-                    <ColorSetting
-                      name="Primary Color"
-                      value={primaryColor}
-                      setValue={setPrimaryColor}
-                      cssVariable=""
-                    />
-                    <ColorSetting
-                      name="Secondary Color"
-                      value={secondaryColor}
-                      setValue={setSecondaryColor}
-                      cssVariable=""
-                    />
-                    <ColorSetting
-                      name="Accent Color"
-                      value={accentColor}
-                      setValue={setAccentColor}
-                      cssVariable=""
-                    />
-                    <ColorSetting
-                      name="Background Color"
-                      value={basicBackgroundColor}
-                      setValue={setBasicBackgroundColor}
-                      cssVariable=""
-                    />
-                    <ColorSetting
-                      name="Text Color"
-                      value={basicTextColor}
-                      setValue={setBasicTextColor}
-                      cssVariable=""
-                    />
-                  </>
-                )}
-                
-                {selectedTheme === 'CUSTOM' && (
-                  <>
-                    <h3>Additional Settings</h3>
-                    {/* Additional Font Size Setting */}
-                    <FontSizeSetting
-                      fontSize={fontSize}
-                      setFontSize={setFontSize}
-                    />
-          
-                    {colorSettings.map((setting) => (
-                      <ColorSetting
-                        key={setting.cssVariable}
-                        name={setting.name}
-                        value={setting.value}
-                        setValue={setting.setValue}
-                        cssVariable={setting.cssVariable}
-                      />
-                    ))}
-          
-                    <DropdownSetting
-                      label="Font Family"
-                      value={fontFamily}
-                      setValue={(newFont) => {
-                        setFontFamily(newFont);
-                        document.documentElement.style.setProperty('--font-family', newFont);
-                      }}
-                      options={fontOptions}
-                    />
-                  </>
-                )}
-              </div>
-            );       
+                <ColorSetting
+                  name="Secondary Color"
+                  value={secondaryColor}
+                  setValue={setSecondaryColor}
+                  cssVariable=""
+                />
+                <ColorSetting
+                  name="Accent Color"
+                  value={accentColor}
+                  setValue={setAccentColor}
+                  cssVariable=""
+                />
+                <ColorSetting
+                  name="Background Color"
+                  value={basicBackgroundColor}
+                  setValue={setBasicBackgroundColor}
+                  cssVariable=""
+                />
+                <ColorSetting
+                  name="Text Color"
+                  value={basicTextColor}
+                  setValue={setBasicTextColor}
+                  cssVariable=""
+                />
+              </>
+            )}
+
+            {selectedTheme === 'CUSTOM' && (
+              <>
+                <h3>Additional Settings</h3>
+                {/* Additional Font Size Setting */}
+                <FontSizeSetting
+                  fontSize={fontSize}
+                  setFontSize={setFontSize}
+                />
+
+                {colorSettings.map((setting) => (
+                  <ColorSetting
+                    key={setting.cssVariable}
+                    name={setting.name}
+                    value={setting.value}
+                    setValue={setting.setValue}
+                    cssVariable={setting.cssVariable}
+                  />
+                ))}
+
+                <DropdownSetting
+                  label="Font Family"
+                  value={fontFamily}
+                  setValue={(newFont) => {
+                    setFontFamily(newFont);
+                    document.documentElement.style.setProperty('--font-family', newFont);
+                  }}
+                  options={fontOptions}
+                />
+              </>
+            )}
+          </div>
+        );

      case 'foss':
        return (
@ -580,14 +577,13 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
              label="New Name"
              value={newName}
              setValue={setNewName}
-              type="text"
              placeholder={localStorage.getItem("accountName") || "Current Name"} // Show current name or a default
            />
            <TextSettings
              label="New Email"
              value={newEmail}
              setValue={setNewEmail}
-              type="email"
+              type="email" // Input type is email
              placeholder={localStorage.getItem("accountEmail") || "Current Email"} // Show current email or a default
            />
            <TextSettings
@ -652,24 +648,24 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
      case 'im/export':
        return (
          <div className="settings-section">
-          <h2>Import & Export</h2>
-          <div className="settings-option">
-            <h3>Export the settings</h3>
-            <button onClick={handleExport} className="export-button">
-              Export Settings
-            </button>
+            <h2>Import & Export</h2>
+            <div className="settings-option">
+              <h3>Export the settings</h3>
+              <button onClick={handleExport} className="export-button">
+                Export Settings
+              </button>
+            </div>
+            <div className="settings-option">
+              <h3>Import the settings</h3>
+              <input
+                type="file"
+                onChange={handleImport}
+                accept=".json"
+                className="import-file"
+              />
+            </div>
          </div>
-          <div className="settings-option">
-            <h3>Import the settings</h3>
-            <input
-              type="file"
-              onChange={handleImport}
-              accept=".json"
-              className="import-file"
-            />
-          </div>
-        </div>
-      );
+        );
      default:
        return null;
    }
@ -703,36 +699,36 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
  };

  return (
-      <div className="popup-overlay">
-        <div className="settings-content">
-          <div className="settings-container">
-            <div className="sidebar">
-              <ul>
-                <li onClick={() => setActiveSection('general')}>General</li>
-                <li onClick={() => setActiveSection('privacy')}>Privacy</li>
-                <li onClick={() => setActiveSection('theme')}>Theme</li>
-                <li onClick={() => setActiveSection('foss')}>FOSS</li>
-                <li onClick={() => setActiveSection('account')}>Account</li>
-                <li onClick={() => setActiveSection('api')}>API Keys</li>
-                <li onClick={() => setActiveSection('im/export')}>Import/Export</li>
-              </ul>
-            </div>
-            <div className="settings-main">
-              <h2>Settings for {accountName}</h2>
-              {renderSettingsContent()}
-              <button className="close-popup" onClick={closeSettings}>Close</button>
-              <button className="apply" onClick={async () => {
-                getAllLocalStorageItems();
-                closeSettings();
-                await changeData(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ????
-                window.location.reload();
-              }}>
-                Apply
-              </button>
-            </div>
+    <div className="popup-overlay">
+      <div className="settings-content">
+        <div className="settings-container">
+          <div className="sidebar">
+            <ul>
+              <li onClick={() => setActiveSection('general')}>General</li>
+              <li onClick={() => setActiveSection('privacy')}>Privacy</li>
+              <li onClick={() => setActiveSection('theme')}>Theme</li>
+              <li onClick={() => setActiveSection('foss')}>FOSS</li>
+              <li onClick={() => setActiveSection('account')}>Account</li>
+              <li onClick={() => setActiveSection('api')}>API Keys</li>
+              <li onClick={() => setActiveSection('im/export')}>Import/Export</li>
+            </ul>
+          </div>
+          <div className="settings-main">
+            <h2>Settings for {accountName}</h2>
+            {renderSettingsContent()}
+            <button className="close-popup" onClick={closeSettings}>Close</button>
+            <button className="apply" onClick={async () => {
+              getAllLocalStorageItems();
+              closeSettings();
+              await changeData(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ????
+              window.location.reload();
+            }}>
+              Apply
+            </button>
          </div>
        </div>
      </div>
+    </div>
  );
 };