page comments

app/page.tsx

@@ -7,21 +7,30 @@ 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 { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme, applyBasicCustomTheme } from './components/settings/theme';
+import { 
+  applyIOMarketTheme, 
+  applyWhiteTheme, 
+  applyBlackTheme, 
+  applyCustomTheme, 
+  applyBasicCustomTheme 
+} from './components/settings/theme';
 import './styles/master.css';
 
 const LandingPage: React.FC = () => {
+  // State to control visibility of the left panels
   const [showDivs, setShowDivs] = useState(true);
+  // State to track which view is currently displayed
   const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI');
   const conversationRef = useRef<HTMLDivElement>(null);
 
+  // State for theme colors
   const [primaryColor, setPrimaryColor] = useState("#fefefe");
   const [secondaryColor, setSecondaryColor] = useState("#fefefe");
   const [accentColor, setAccentColor] = useState("#fefefe");
   const [basicBackgroundColor, setBasicBackgroundColor] = useState("#fefefe");
   const [basicTextColor, setBasicTextColor] = useState("#fefefe");
 
-  // Synchronize state with local storage on mount
+  // Synchronize theme colors with local storage on component mount
   useEffect(() => {
     if (typeof localStorage !== 'undefined') {
       setPrimaryColor(localStorage.getItem("primaryColor") || "#fefefe");
@@ -32,18 +41,21 @@ const LandingPage: React.FC = () => {
     }
   }, [primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor]);
 
+  // Toggle visibility of the left panels
   const toggleDivs = () => {
     setShowDivs(prevState => !prevState);
   };
 
+  // Change the current view based on user selection
   const handleViewChange = (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => {
     setView(view);
+    // Hide left panels if the selected view is not 'AI'
     if (view !== 'AI') {
       setShowDivs(false);
     }
   };
 
-  // Apply theme based on selectedTheme and color settings
+  // Apply the selected theme and color settings based on local storage
   useEffect(() => {
     if (typeof localStorage !== 'undefined') {
       const savedTheme = localStorage.getItem('selectedTheme');
@@ -71,15 +83,16 @@ const LandingPage: React.FC = () => {
             );
             break;
           default:
-            applyIOMarketTheme();
+            applyIOMarketTheme(); // Fallback theme
             break;
         }
       }
     }
-  }, [primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor]); // Watch color states and apply themes accordingly
+  }, [primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor]); // Apply themes whenever color states change
 
   return (
     <>
+      {/* Header component with props for toggling and view change */}
       <Header
         toggleDivs={toggleDivs}
         showDivs={showDivs}
@@ -91,12 +104,14 @@ const LandingPage: React.FC = () => {
         <div className={`left-panel ${showDivs ? 'visible' : 'hidden'}`}>
           {showDivs && (
             <div className="history-models">
+              {/* Show History and Models components if left panels are visible */}
               <History />
               <Models />
             </div>
           )}
         </div>
         <div className={`conversation-container ${showDivs ? 'collapsed' : 'expanded'}`} ref={conversationRef}>
+          {/* Render the selected view based on the current state */}
           {view === 'AI' && <AI />}
           {view === 'FAQ' && <FAQ />}
           {view === 'Documentation' && <Documentation />}