Merge pull request 'main' (#59) from sageTheDm/interstellar_ai:main into main

Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/59

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}
-                onChange={(e) => setEmail(e.target.value)}
+                value={email || accountName} // Display whichever is set
+                onChange={(e) => {
+                  const input = e.target.value;
+                  setEmail(input); // Update both email and accountName states
+                  setAccountName(input);
+                }}
               />
             </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,16 +54,22 @@ 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);

app/layout.tsx

@@ -12,7 +12,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
         <title>{metadata.title}</title>
         <meta name="description" content={metadata.description} />
         {/* Tried adding the favicon here */}
-        <link rel="icon" href="./public/favicon.ico" type="image/x-icon" />
+        <link rel="icon" href="./favicon.ico" type="image/x-icon" />
       </head>
       <body>
         <main>{children}</main>