app/components/Login.tsx

@@ -11,7 +11,7 @@ const Login: React.FC = () => {
   // Credentials state
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const [accountName, setAccountName] = useState('');
+  const [accountName, setAccountName] = useState(''); // Set the account name
   const [newAccountEmail, setNewAccountEmail] = useState('');
   const [newAccountPassword, setNewAccountPassword] = useState('');
   const [newAccountName, setNewAccountName] = useState('');
@@ -27,7 +27,7 @@ const Login: React.FC = () => {
   // Function to toggle the sign-up popup
   const toggleSignUpPopup = () => {
     setShowSignUpPopup(!showSignUpPopup);
-    setShowLoginPopup(false);
+    setShowLoginPopup(false); // Hide login popup when opening the sign-up popup
   };
 
   // Function to handle login
@@ -40,11 +40,6 @@ const Login: React.FC = () => {
     }
   };
 
-  const handleLogout = () => {
-    setIsLoggedIn(false);
-    setShowSettingsPopup(false); // Optionally close settings popup on logout
-  };
-
   // Function to handle account creation
   const handleCreateAccount = () => {
     console.log('New Account Created:', newAccountEmail, newAccountPassword);
@@ -58,6 +53,7 @@ const Login: React.FC = () => {
   return (
     <div>
       {/* Login or Settings Button */}
+
       <button className='header-login-button' onClick={isLoggedIn ? toggleSettingsPopup : toggleLoginPopup}>
         {isLoggedIn ? 'Settings' : 'Log In'}
       </button>
@@ -128,13 +124,13 @@ const Login: React.FC = () => {
               />
             </div>
 
-            {/* New Account Name Input */}
+             {/* New Account Name Input */}
-            <div>
+             <div>
               <input
                 type="text"
                 placeholder="Name"
                 value={newAccountName}
-                onChange={(e) => setNewAccountName(e.target.value)}
+                onChange={(e) => setAccountName(e.target.value)}
               />
             </div>
 
@@ -157,12 +153,12 @@ const Login: React.FC = () => {
             <button className="close-popup" onClick={toggleSignUpPopup} aria-label="Close popup">
               Close
             </button>
-          </div>
+          </div>  
         </div>
       )}
 
       {/* Conditional rendering of the Settings Popup */}
-      {showSettingsPopup && <Settings closeSettings={toggleSettingsPopup} accountName={accountName}/>}
+      {showSettingsPopup && <Settings closeSettings={toggleSettingsPopup} accountName={accountName} />}
     </div>
   );
 };

app/components/Settings.tsx

@@ -19,12 +19,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
       return false; // Default to false if item is null or empty
     };
 
-    interface SettingsProps {
-      closeSettings: () => void;
-      accountName: string;
-      handleLogout: () => void; // Add this line to accept handleLogout as a prop
-    }
-
     // Active section
     const [activeSection, setActiveSection] = useState(() => localStorage.getItem('activeSection') || 'general');
 
@@ -848,16 +842,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                 onChange={(e) => setNewPassword(e.target.value)}
               />
             </div>
-            <div className="settings-option">
-              <button
-                onClick={() => {
-                  closeSettings(); // Optionally close settings after logout
-                }}
-                className="logout-button"
-              >
-                Logout
-              </button>
-            </div>
           </div>
         );
 

app/components/settingUtils.ts

@@ -19,5 +19,4 @@ export const exportSettings = (settings: any) => {
     };
     reader.readAsText(file);
   };
-
   

app/layout.tsx

@@ -1,19 +1,18 @@
-import { ReactNode } from 'react';
+import Header from "./components/Header";
+
 
 export const metadata = {
   title: 'AI Assistant | Interstellar Development',
   description: 'A little AI chat that is able to assist you in little tasks',
-};
+}
 
-export default function RootLayout({ children }: { children: ReactNode }) {
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
   return (
     <html lang="en">
-      <head>
-        <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" />
-      </head>
       <body>
         <main>{children}</main>
       </body>

app/page.tsx

@@ -7,7 +7,6 @@ import Documentation from './components/Documentation'; // Ensure the import pat
 import History from './components/History';
 import Models from './components/Models';
 import Credits from './components/Credits';
-import Head from 'next/head';
 import './styles/master.css';
 
 const LandingPage: React.FC = () => {
@@ -52,31 +51,29 @@ const LandingPage: React.FC = () => {
   };
 
   return (
-    <>
+    <div className="container">
-      <div className="container">
+      <Header
-        <Header
+        toggleDivs={toggleDivs}
-          toggleDivs={toggleDivs}
+        showDivs={showDivs}
-          showDivs={showDivs}
+        onViewChange={handleViewChange}
-          onViewChange={handleViewChange}
+        showHistoryModelsToggle={true}
-          showHistoryModelsToggle={true}
+        showToggle={view === 'AI'} // Pass the condition here
-          showToggle={view === 'AI'} // Pass the condition here
+      />
-          />
+      <div className={`left-panel ${showDivs ? 'visible' : 'hidden'}`}>
-        <div className={`left-panel ${showDivs ? 'visible' : 'hidden'}`}>
+        {showDivs && (
-          {showDivs && (
+          <div className="history-models">
-            <div className="history-models">
+            <History />
-              <History />
+            <Models />
-              <Models />
+          </div>
-            </div>
+        )}
-          )}
-        </div>
-        <div className={`conversation-container ${showDivs ? 'collapsed' : 'expanded'}`} ref={conversationRef}>
-          {view === 'AI' && <AI />}
-          {view === 'FAQ' && <FAQ />}
-          {view === 'Documentation' && <Documentation />}
-          {view === 'Credits' && <Credits />} {/* Now Credits will render properly */}
-        </div>
       </div>
-    </>
+      <div className={`conversation-container ${showDivs ? 'collapsed' : 'expanded'}`} ref={conversationRef}>
+        {view === 'AI' && <AI />}
+        {view === 'FAQ' && <FAQ />}
+        {view === 'Documentation' && <Documentation />}
+        {view === 'Credits' && <Credits />} {/* Now Credits will render properly */}
+      </div>
+    </div>
   );
 };