Fix search bar focus issue by using render functions

frontend/src/App.jsx

@@ -332,7 +332,7 @@ export default function App() {
     }
   };
 
-  const Header = () => (
+  const renderHeader = () => (
     <header className="hero">
       <div>
         <h1>ChatSmith</h1>
@@ -349,7 +349,7 @@ export default function App() {
     </header>
   );
 
-  const LoginCard = () => (
+  const renderLoginCard = () => (
     <Panel title="Login" subtitle="AI-powered chatbot generator for any website.">
       <input
         placeholder="Email"
@@ -374,7 +374,7 @@ export default function App() {
     </Panel>
   );
 
-  const SignupCard = () => (
+  const renderSignupCard = () => (
     <Panel title="Sign Up" subtitle="Create your account and start building.">
       <input
         placeholder="First name"
@@ -391,7 +391,7 @@ export default function App() {
     </Panel>
   );
 
-  const ResetCard = () => (
+  const renderResetCard = () => (
     <Panel title="Reset Password" subtitle="Securely recover access with OTP.">
       {!resetSent && (
         <>
@@ -438,7 +438,7 @@ export default function App() {
     </Panel>
   );
 
-  const OtpCard = () => (
+  const renderOtpCard = () => (
     <Panel title="Enter OTP" subtitle="Check your inbox for the 6-digit code.">
       <div className="muted small">OTP sent to: {otpEmail || "your email"}</div>
       <input placeholder="OTP code" ref={otpCodeRef} defaultValue="" />
@@ -449,7 +449,7 @@ export default function App() {
     </Panel>
   );
 
-  const AppCards = () => (
+  const renderAppCards = () => (
     <div className="grid single-column">
       <Panel title="Generate Chatbot" subtitle="Paste a URL and generate a chatbot instantly.">
         <label className="label">Website URL</label>
@@ -552,7 +552,7 @@ export default function App() {
 
   return (
     <div className="app-shell">
-      <Header />
+      {renderHeader()}
 
       {isSessionChecking ? (
         <div className="auth-page">
@@ -572,7 +572,7 @@ export default function App() {
             <div className="auth-page">
               <div className="auth-stage">
                 <div className="auth-card-wrap">
-                  <LoginCard />
+                  {renderLoginCard()}
                 </div>
               </div>
             </div>
@@ -582,7 +582,7 @@ export default function App() {
             <div className="auth-page">
               <div className="auth-stage">
                 <div className="auth-card-wrap">
-                  <SignupCard />
+                  {renderSignupCard()}
                 </div>
               </div>
             </div>
@@ -592,7 +592,7 @@ export default function App() {
             <div className="auth-page">
               <div className="auth-stage">
                 <div className="auth-card-wrap">
-                  <ResetCard />
+                  {renderResetCard()}
                 </div>
               </div>
             </div>
@@ -602,7 +602,7 @@ export default function App() {
             <div className="auth-page">
               <div className="auth-stage">
                 <div className="auth-card-wrap">
-                  <OtpCard />
+                  {renderOtpCard()}
                 </div>
               </div>
             </div>
@@ -611,7 +611,7 @@ export default function App() {
           {view === "app" && (
             <div className="main-page">
               <div className="main-card-wrap">
-                <AppCards />
+                {renderAppCards()}
               </div>
             </div>
           )}