Create client/src/App.jsx

client/src/App.jsx

@@ -0,0 +1,99 @@
+import React, { useState, useEffect } from 'react';
+import { createClient } from '@supabase/supabase-js';
+
+const supabase = createClient(
+  import.meta.env.VITE_SUPABASE_URL, 
+  import.meta.env.VITE_SUPABASE_ANON_KEY
+);
+
+function App() {
+  const [session, setSession] = useState(null);
+  const [driveConnected, setDriveConnected] = useState(false);
+  const [prompt, setPrompt] = useState("");
+  const [generating, setGenerating] = useState(false);
+
+  useEffect(() => {
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      setSession(session);
+      if (session) checkDrive(session.user.id);
+    });
+    // Puter check
+    if (window.puter) {
+      // Puter loaded
+    }
+  }, []);
+
+  const checkDrive = async (userId) => {
+    const { data } = await supabase.from('drive_accounts').select('id').eq('user_id', userId).single();
+    if (data) setDriveConnected(true);
+  };
+
+  const handleGenerate = async () => {
+    setGenerating(true);
+    try {
+      if (!window.puter.auth.isSignedIn()) await window.puter.auth.signIn();
+      const imgElement = await window.puter.ai.txt2img(prompt);
+      
+      const res = await fetch(imgElement.src);
+      const blob = await res.blob();
+
+      if (driveConnected) {
+        const formData = new FormData();
+        formData.append('image', blob);
+        formData.append('prompt', prompt);
+        const { data: { session } } = await supabase.auth.getSession();
+        
+        await fetch('/api/drive/upload', {
+          method: 'POST',
+          headers: { 'Authorization': `Bearer ${session.access_token}` },
+          body: formData
+        });
+        alert("Saved to Google Drive!");
+      } else {
+        alert("Generated! (Not saved - connect Drive first)");
+      }
+    } catch (e) {
+      alert("Error: " + e.message);
+    } finally {
+      setGenerating(false);
+    }
+  };
+
+  if (!session) return (
+    <div style={{height:'100vh', display:'flex', alignItems:'center', justifyContent:'center', background:'#111', color:'white'}}>
+      <button onClick={() => supabase.auth.signInWithOAuth({ provider: 'google' })} style={{padding:'15px', fontSize:'18px', cursor:'pointer'}}>
+        Log in with Google
+      </button>
+    </div>
+  );
+
+  return (
+    <div style={{padding: '20px', background: '#111', color: '#fff', minHeight: '100vh', fontFamily: 'sans-serif'}}>
+      <h1>FluxGen + Drive</h1>
+      {!driveConnected && (
+        <button 
+          onClick={() => window.location.href=`/api/drive/connect?user_id=${session.user.id}`}
+          style={{width:'100%', padding:'10px', background:'#d97706', color:'white', border:'none', borderRadius:'5px', cursor:'pointer', marginBottom:'20px'}}
+        >
+          Connect Google Drive
+        </button>
+      )}
+      
+      <textarea 
+        value={prompt} 
+        onChange={e => setPrompt(e.target.value)} 
+        placeholder="Describe your image..." 
+        style={{width:'100%', padding: '10px', height:'100px', borderRadius:'5px', border:'1px solid #333', background:'#222', color:'white'}} 
+      />
+      
+      <button 
+        onClick={handleGenerate} 
+        disabled={generating}
+        style={{width:'100%', padding:'15px', marginTop:'20px', background: generating ? '#555' : '#7c3aed', color:'white', border:'none', borderRadius:'5px', cursor:'pointer', fontSize:'16px'}}
+      >
+        {generating ? "Generating..." : "Generate Image"}
+      </button>
+    </div>
+  );
+}
+export default App;