Update client/src/App.jsx

client/src/App.jsx

@@ -7,9 +7,6 @@ const SUPABASE_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBh
 
 const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
 
-// --- TEK BRANDED MODEL LIST ---
-// The 'id' must remain the original Puter ID for functionality.
-// The 'name' is what displays in the UI dropdown.
 const AI_MODELS = [
   { id: 'openai/dall-e-3',           name: 'TEK 3 (Best)' },
   { id: 'google/imagen-4.0-preview', name: 'TEK 4 HD (Real)' },
@@ -33,7 +30,6 @@ function App() {
   const [previewUrl, setPreviewUrl] = useState(null); 
   const fileInputRef = useRef(null);
 
-  // PWA State
   const [deferredPrompt, setDeferredPrompt] = useState(null);
   const [showInstallBanner, setShowInstallBanner] = useState(false);
   const [isIOS, setIsIOS] = useState(false);
@@ -42,10 +38,7 @@ function App() {
     supabase.auth.getSession().then(({ data: { session } }) => setSession(session));
     const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => setSession(session));
 
-    // PWA Detection Logic
     const isIosDevice = /ipad|iphone|ipod/.test(navigator.userAgent.toLowerCase()) && !window.MSStream;
-    
-    // Check if running in standalone mode
     const isInStandaloneMode = window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true;
 
     if (isIosDevice && !isInStandaloneMode) {
@@ -56,9 +49,7 @@ function App() {
     window.addEventListener('beforeinstallprompt', (e) => {
       e.preventDefault();
       setDeferredPrompt(e);
-      if (!isInStandaloneMode) {
-          setShowInstallBanner(true);
-      }
+      if (!isInStandaloneMode) setShowInstallBanner(true);
     });
 
     return () => subscription.unsubscribe();
@@ -67,8 +58,6 @@ function App() {
   const handleInstallClick = async () => {
     if (deferredPrompt) {
       deferredPrompt.prompt();
-      const { outcome } = await deferredPrompt.userChoice;
-      console.log(`Outcome: ${outcome}`);
       setDeferredPrompt(null);
       setShowInstallBanner(false);
     }
@@ -91,14 +80,12 @@ function App() {
     if (!prompt) return;
     setGenerating(true);
     setImageSrc(null); 
-    
     try {
       if (!window.puter.auth.isSignedIn()) await window.puter.auth.signIn();
       const ratioText = selectedRatio === '1:1' ? '' : ` --ar ${selectedRatio}`;
       const finalPrompt = prompt + ratioText;
       
       let imgElement;
-      // DALL-E 3 doesn't support img2img via this API, so we skip image param for it
       if (inputImage && !selectedModel.includes('dall-e')) {
         imgElement = await window.puter.ai.txt2img(finalPrompt, { model: selectedModel, image: inputImage });
       } else {
@@ -113,40 +100,47 @@ function App() {
     }
   };
 
+  // --- NEW START SCREEN (TEK DREAMS) ---
   if (!session) {
     return (
-      <div style={{height: '100vh', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center'}}>
-        <div className="glass-panel" style={{padding: '40px', maxWidth: '350px'}}>
-          <h1 style={{fontSize:'2rem', margin:'0 0 10px 0', fontWeight:'200'}}>Liquid AI</h1>
-          <button onClick={handleLogin} className="glass-pill" style={{fontSize:'1.1rem', padding:'12px 30px'}}>Enter</button>
+      <div style={{
+        height: '100vh', display: 'flex', flexDirection: 'column', 
+        alignItems: 'center', justifyContent: 'center'
+      }}>
+        {/* The Outer Glass Box */}
+        <div className="dream-stack-outer">
+          {/* The Inner Glass Box */}
+          <div className="dream-stack-middle">
+            <div className="dream-title">TEK DREAMS</div>
+            <button onClick={handleLogin} className="dream-btn">
+              Enter
+            </button>
+          </div>
         </div>
       </div>
     );
   }
 
+  // --- MAIN APP ---
   return (
     <div style={{
       minHeight: '100vh', display: 'flex', flexDirection: 'column',
-      paddingBottom: '150px', 
-      boxSizing: 'border-box'
+      paddingBottom: '150px', boxSizing: 'border-box'
     }}>
       
       {/* HEADER */}
       <div style={{
         padding: '15px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
-        position: 'sticky', top: 0, zIndex: 10,
-        gap: '20px'
+        position: 'sticky', top: 0, zIndex: 10, gap: '20px'
       }}>
         <div className="logo-expand-container">
            <span className="logo-main">TEK</span>
            <span className="logo-hidden">BUILD</span>
         </div>
-        
         <div style={{display: 'flex', gap: '8px', flexShrink: 0}}>
           <select className="glass-pill" value={selectedRatio} onChange={(e) => setSelectedRatio(e.target.value)}>
             {ASPECT_RATIOS.map(r => <option key={r.id} value={r.id}>{r.name}</option>)}
           </select>
-          {/* The dropdown now shows your custom names */}
           <select className="glass-pill" value={selectedModel} onChange={(e) => setSelectedModel(e.target.value)} style={{maxWidth:'130px'}}>
             {AI_MODELS.map(m => <option key={m.id} value={m.id}>{m.name}</option>)}
           </select>
@@ -156,8 +150,7 @@ function App() {
       {/* VIEWPORT */}
       <div style={{
           flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', 
-          padding: '20px', flexDirection: 'column',
-          minHeight: 0 
+          padding: '20px', flexDirection: 'column', minHeight: 0 
       }}>
         {generating ? (
           <div className="glass-panel" style={{padding: '20px', borderRadius:'50%'}}>
@@ -172,16 +165,14 @@ function App() {
         )}
       </div>
 
-      {/* PWA INSTALL BANNER */}
+      {/* PWA BANNER */}
       {showInstallBanner && (
         <div className="pwa-banner">
           {isIOS ? (
             <div style={{display:'flex', alignItems:'center', gap:'10px'}}>
                <span style={{fontSize:'24px'}}>📲</span>
-               <div style={{textAlign:'left', fontSize:'14px'}}>
-                 Tap Share then "Add to Home Screen"
-               </div>
-               <button onClick={() => setShowInstallBanner(false)} style={{background:'none', border:'none', color:'#aaa', fontSize:'20px', padding:'0 10px'}}>×</button>
+               <div style={{textAlign:'left', fontSize:'14px'}}>Tap Share then "Add to Home Screen"</div>
+               <button onClick={() => setShowInstallBanner(false)} style={{background:'none', border:'none', color:'#aaa', fontSize:'20px'}}>×</button>
             </div>
           ) : (
             <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', width:'100%'}}>