Update client/src/App.jsx

client/src/App.jsx

@@ -8,8 +8,8 @@ const SUPABASE_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBh
 const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
 
 const AI_MODELS = [
-  { id: 'openai/dall-e-3',           name: 'DALL-E 3 (Best)' },
-  { id: 'google/imagen-4.0-preview', name: 'Imagen 4 (Real)' },
+  { id: 'openai/dall-e-3',           name: 'DALL-E 3' },
+  { id: 'google/imagen-4.0-preview', name: 'Imagen 4' },
   { id: 'gemini-2.5-flash-image',    name: 'Nano Banana' },
 ];
 
@@ -26,17 +26,54 @@ function App() {
   const [selectedRatio, setSelectedRatio] = useState(ASPECT_RATIOS[0].id);
   const [generating, setGenerating] = useState(false);
   const [imageSrc, setImageSrc] = useState(null);
-  
   const [inputImage, setInputImage] = useState(null); 
   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);
+
   useEffect(() => {
     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 (already installed) mode
+    const isIn standaloneMode = window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true;
+
+    if (isIosDevice && !isInStandaloneMode) {
+      setIsIOS(true);
+      // Show iOS hint after a short delay so it doesn't overlap login immediately
+      setTimeout(() => setShowInstallBanner(true), 3000);
+    }
+
+    window.addEventListener('beforeinstallprompt', (e) => {
+      // Prevent Chrome 67 and earlier from automatically showing the prompt
+      e.preventDefault();
+      // Stash the event so it can be triggered later.
+      setDeferredPrompt(e);
+      // Update UI to notify the user they can add to home screen
+      if (!isInStandaloneMode) {
+          setShowInstallBanner(true);
+      }
+    });
+
     return () => subscription.unsubscribe();
   }, []);
 
+  const handleInstallClick = async () => {
+    if (deferredPrompt) {
+      deferredPrompt.prompt();
+      const { outcome } = await deferredPrompt.userChoice;
+      console.log(`User response to install prompt: ${outcome}`);
+      setDeferredPrompt(null);
+      setShowInstallBanner(false);
+    }
+  };
+
   const handleLogin = async () => {
     const { error } = await supabase.auth.signInAnonymously();
     if (error) alert("Login failed: " + error.message);
@@ -77,10 +114,7 @@ function App() {
 
   if (!session) {
     return (
-      <div style={{
-        height: '100vh', display: 'flex', flexDirection: 'column', 
-        alignItems: 'center', justifyContent: 'center', textAlign: 'center'
-      }}>
+      <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>
@@ -92,52 +126,85 @@ function App() {
   return (
     <div style={{
       minHeight: '100vh', display: 'flex', flexDirection: 'column',
-      maxWidth: '100%', margin: '0 auto', paddingBottom: '140px'
+      // Added padding bottom to offset the fixed bottom dock and center image visually
+      paddingBottom: '150px', 
+      boxSizing: 'border-box'
     }}>
       
-      {/* HEADER */}
+      {/* HEADER with professional spacing */}
       <div style={{
         padding: '15px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
-        position: 'sticky', top: 0, zIndex: 10
+        position: 'sticky', top: 0, zIndex: 10,
+        gap: '20px' // Crucial gap to prevent overlapping
       }}>
-        {/* EXPANDING LOGO */}
         <div className="logo-expand-container">
            <span className="logo-main">TEK</span>
            <span className="logo-hidden">BUILD</span>
         </div>
         
-        <div style={{display: 'flex', gap: '8px'}}>
+        <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>
-          <select className="glass-pill" value={selectedModel} onChange={(e) => setSelectedModel(e.target.value)} style={{maxWidth:'140px'}}>
+          <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>
         </div>
       </div>
 
-      {/* VIEWPORT */}
-      <div style={{flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px', flexDirection: 'column'}}>
+      {/* VIEWPORT - Perfectly Centered */}
+      <div style={{
+          flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', 
+          padding: '20px', flexDirection: 'column',
+          // Ensures it takes available space but doesn't push out of bounds
+          minHeight: 0 
+      }}>
         {generating ? (
           <div className="glass-panel" style={{padding: '20px', borderRadius:'50%'}}>
              <div style={{fontSize:'40px', animation:'spin 2s infinite'}}>⏳</div>
           </div>
         ) : imageSrc ? (
-          <div className="glass-panel" style={{padding: '10px', maxWidth: '100%'}}>
-            <img src={imageSrc} alt="Generated" style={{maxWidth: '100%', maxHeight: '60vh', borderRadius: '16px', display:'block'}} />
+          <div className="glass-panel" style={{padding: '10px', maxWidth: '100%', maxHeight: '100%', display:'flex'}}>
+            {/* Image constrained to viewport height minus header/footer space */}
+            <img src={imageSrc} alt="Generated" style={{maxWidth: '100%', maxHeight: '65vh', borderRadius: '16px', objectFit:'contain'}} />
           </div>
         ) : (
-          // Center is now clean. The "Ready" text moved down.
           <div style={{opacity: 0.1, transform:'scale(0.8)'}}>❖</div> 
         )}
       </div>
 
+      {/* PWA INSTALL BANNER */}
+      {showInstallBanner && (
+        <div className="pwa-banner">
+          {isIOS ? (
+            // iOS Instructions
+            <div style={{display:'flex', alignItems:'center', gap:'10px'}}>
+               <span style={{fontSize:'24px'}}>📲</span>
+               <div style={{textAlign:'left', fontSize:'14px'}}>
+                 Tap <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master Emojis/Objects/Share%20Icon.png" alt="share" width="18" style={{verticalAlign:'middle'}}/> then "Add to Home Screen" for full screen experience.
+               </div>
+               <button onClick={() => setShowInstallBanner(false)} style={{background:'none', border:'none', color:'#aaa', fontSize:'20px', padding:'0 10px'}}>×</button>
+            </div>
+          ) : (
+            // Android Install Button
+            <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', width:'100%'}}>
+               <span style={{fontSize:'14px', fontWeight:'500'}}>Install App for best experience?</span>
+               <div style={{display:'flex', gap:'10px'}}>
+                 <button onClick={() => setShowInstallBanner(false)} className="glass-pill" style={{padding:'6px 12px', background:'transparent'}}>Later</button>
+                 <button onClick={handleInstallClick} className="run-btn" style={{borderRadius:'20px', padding:'6px 15px', height:'auto', width:'auto', fontSize:'14px'}}>Install</button>
+               </div>
+            </div>
+          )}
+        </div>
+      )}
+
       {/* INPUT DOCK */}
       <div style={{
         position: 'fixed', bottom: 0, left: 0, right: 0,
-        padding: '10px 20px 30px 20px', zIndex: 20
+        padding: '10px 20px 30px 20px', zIndex: 20,
+        // Ensure bottom padding respects iPhone home swipe bar
+        paddingBottom: 'calc(30px + env(safe-area-inset-bottom))' 
       }}>
-        {/* 3. RELOCATED STATUS TEXT */}
         <div style={{
            textAlign: 'center', fontSize: '12px', color: 'rgba(255,255,255,0.6)', 
            marginBottom: '10px', letterSpacing: '1px', textTransform: 'uppercase'
@@ -145,12 +212,11 @@ function App() {
            {generating ? "Dreaming..." : (imageSrc ? "Done" : "Ready to dream")}
         </div>
 
-        {/* Upload Preview */}
         {previewUrl && (
           <div style={{position: 'absolute', bottom: '110px', left: '20px'}}>
-             <div className="holo-box">
-                <img src={previewUrl} style={{height: '60px', borderRadius: '8px'}} />
-                <button onClick={() => {setPreviewUrl(null); setInputImage(null);}} style={{position: 'absolute', top: -10, right: -10, borderRadius:'50%', width:'24px', height:'24px', border:'none', background:'red', color:'white'}}>×</button>
+             <div className="holo-box" style={{padding:'5px', marginBottom:0, display:'inline-block'}}>
+                <img src={previewUrl} style={{height: '60px', borderRadius: '4px'}} />
+                <button onClick={() => {setPreviewUrl(null); setInputImage(null);}} style={{position: 'absolute', top: -8, right: -8, borderRadius:'50%', width:'20px', height:'20px', border:'none', background:'red', color:'white', fontSize:'12px', display:'flex', alignItems:'center', justifyContent:'center'}}>×</button>
              </div>
           </div>
         )}