Merge branch 'main' into main

app/components/Login.tsx

@@ -47,10 +47,13 @@ const Login: React.FC = () => {
     const savedAccountPassword = localStorage.getItem('accountPassword');
     const savedAccountName = localStorage.getItem('accountName');
 
-    if ((email === savedAccountEmail || accountName === savedAccountName) && password === savedAccountPassword) {
+    if (
+      (email === savedAccountEmail || accountName === savedAccountName) &&
+      password === savedAccountPassword
+    ) {
       setIsLoggedIn(true); // Successful login
       setShowLoginPopup(false); // Close the login popup
-      // Save credentials to localStorage
+      // Save credentials to localStorage (optional in case of changes)
       localStorage.setItem('accountName', savedAccountName || accountName);
       localStorage.setItem('accountEmail', savedAccountEmail || email);
       localStorage.setItem('accountPassword', savedAccountPassword || password);
@@ -75,7 +78,7 @@ const Login: React.FC = () => {
     <div>
       {/* Login or Settings Button */}
       <button className='header-login-button' onClick={isLoggedIn ? toggleSettingsPopup : toggleLoginPopup}>
-        {isLoggedIn ? 'Settings' : 'Log In'}
+        {isLoggedIn ? <img src="" alt="Settings" /> : 'Log In'}
       </button>
 
       {/* Conditional rendering of the Login Popup */}
@@ -94,8 +97,12 @@ const Login: React.FC = () => {
               <input
                 type="text"
                 placeholder="Name or Email"
-                value={email}
+                value={email || accountName} // Display whichever is set
-                onChange={(e) => setEmail(e.target.value)}
+                onChange={(e) => {
+                  const input = e.target.value;
+                  setEmail(input); // Update both email and accountName states
+                  setAccountName(input);
+                }}
               />
             </div>
 
@@ -178,7 +185,7 @@ const Login: React.FC = () => {
       )}
 
       {/* Conditional rendering of the Settings Popup */}
-      {showSettingsPopup && <Settings closeSettings={toggleSettingsPopup} accountName={accountName}/>}
+      {showSettingsPopup && <Settings closeSettings={toggleSettingsPopup} accountName={accountName} />}
     </div>
   );
 };

app/components/Models.tsx

@@ -35,7 +35,7 @@ const Models: React.FC = () => {
     const handleStorageChange = () => {
       setRadioSelection(localStorage.getItem('radioSelection') || '');
     };
-    handleStorageChange()
+    handleStorageChange();
 
     // Update dropdown immediately when localStorage changes internally or externally
     window.addEventListener('storage', handleStorageChange);
@@ -54,52 +54,58 @@ const Models: React.FC = () => {
 
   // Determine the filtered models based on current radioSelection
   const filteredModels = (() => {
+    let models = [];
     switch (radioSelection) {
       case 'Offline':
-        return modelDropdown.offlineModels; // Show only offline models
+        models = modelDropdown.offlineModels; // Show only offline models
+        break;
       case 'AI Online':
-        return modelDropdown.onlineModels; // Show only online models
+        models = modelDropdown.onlineModels; // Show only online models
+        break;
       case 'FOSS':
-        return modelDropdown.fossModels; // Show only FOSS models
+        models = modelDropdown.fossModels; // Show only FOSS models
+        break;
       default:
-        return [...modelDropdown.offlineModels, ...modelDropdown.onlineModels, ...modelDropdown.fossModels]; // Show all models if nothing matches
+        models = [...modelDropdown.offlineModels, ...modelDropdown.onlineModels, ...modelDropdown.fossModels]; // Show all models if nothing matches
+        break;
     }
+    return Array.from(new Set(models)); // Remove duplicates using Set
   })();
 
   const isOfflineModel = (model: string) => modelDropdown.offlineModels.includes(model);
 
   return (
     <div className="model-background">
-    <div className="models">
+      <div className="models">
-      <div className="title">
+        <div className="title">
-        <h3>Different AI Models</h3>
+          <h3>Different AI Models</h3>
-      </div>
+        </div>
 
-      {/* Model Selection Dropdown */}
+        {/* Model Selection Dropdown */}
-      <div className="model-dropdown">
+        <div className="model-dropdown">
-        <label htmlFor="model-select">Select AI Model:</label>
+          <label htmlFor="model-select">Select AI Model:</label>
-        <select id="model-select" value={radioSelection} onChange={handleModelChange}>
+          <select id="model-select" value={radioSelection} onChange={handleModelChange}>
-          {filteredModels.map((model) => (
+            {filteredModels.map((model) => (
-            <option key={model} value={model}>
+              <option key={model} value={model}>
-              {model}
+                {model}
-            </option>
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {/* Model Grid with Cards */}
+        <div className="grid">
+          {['Code', 'Math', 'Language', 'Character', 'Finance', 'Weather', 'Time', 'Image', 'Custom1', 'Custom2'].map((category) => (
+            <button key={category} className={`${category.toLowerCase()}-model model-box`}>
+              <div className="overlay">
+                <h3>{category}</h3>
+                {isOfflineModel(radioSelection) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+              </div>
+            </button>
           ))}
-        </select>
+        </div>
-      </div>
-
-      {/* Model Grid with Cards */}
-      <div className="grid">
-        {['Code', 'Math', 'Language', 'Character', 'Finance', 'Weather', 'Time', 'Image', 'Custom1', 'Custom2'].map((category) => (
-          <button key={category} className={`${category.toLowerCase()}-model model-box`}>
-            <div className="overlay">
-              <h3>{category}</h3>
-              {isOfflineModel(radioSelection) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-            </div>
-          </button>
-        ))}
       </div>
     </div>
-  </div> 
   );
 };