merge: resolve conflicts and integrate rocket transition into main

Author: Ema

.github/workflows/deploy.yml

@@ -28,6 +28,8 @@ jobs:
 
       - run: npm ci
       - run: npm run build
+        env:
+          VITE_GEMINI_API_KEY: ${{ secrets.VITE_GEMINI_API_KEY }}
 
       - uses: actions/configure-pages@v5
 

package-lock.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "framer-motion": "^12.38.0",
     "lucide-react": "^1.8.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",

package.json

@@ -4,6 +4,7 @@ import Preferences from './pages/Preferences';
 import Home from './pages/home/Home';
 import Explore from './pages/Explore';
 import Chat from './pages/Chat';
+import { RocketTransition } from './components/RocketTransition';
 
 function App() {
   const location = useLocation();
@@ -29,6 +30,8 @@ function App() {
           <Route path="/chat/:id" element={<Chat />} />
         </Routes>
       </main>
+
+      <RocketTransition />
     </div>
   );
 }

src/App.tsx

@@ -1,23 +1,23 @@
 import { useEffect } from 'react';
 import type { AlienProfile } from '../data/mockAliens';
-import { useNavigate } from 'react-router';
 import { Heart } from 'lucide-react';
+import { useRocketNav } from '../context/TransitionContext';
 
 interface MatchOverlayProps {
   alien: AlienProfile;
   userName: string;
 }
 
 export default function MatchOverlay({ alien, userName }: MatchOverlayProps) {
-  const navigate = useNavigate();
+  const triggerRocketNav = useRocketNav();
 
   useEffect(() => {
-    // Automatically redirect to chat after 3 seconds
+    // Trigger rocket navigation after 2 seconds (giving time to see the match)
     const timer = setTimeout(() => {
-      navigate(`/chat/${alien.id}`);
-    }, 3000);
+      triggerRocketNav(`/chat/${alien.id}`);
+    }, 2000);
     return () => clearTimeout(timer);
-  }, [navigate, alien.id]);
+  }, [triggerRocketNav, alien.id]);
 
   return (
     <div style={{

src/components/MatchOverlay.tsx

@@ -3,13 +3,13 @@ import { mockAliens } from '../data/mockAliens';
 import type { AlienProfile } from '../data/mockAliens';
 import { useAppContext } from '../context/AppContext';
 import ProfileModal from './ProfileModal';
-import MatchOverlay from './MatchOverlay';
 import { getCompatibility } from '../utils/compatibility';
+import { useRocketNav } from '../context/TransitionContext';
 
 export default function OrbitSystem() {
   const { preferences, addMatch, matches } = useAppContext();
+  const triggerRocketNav = useRocketNav();
   const [selectedAlien, setSelectedAlien] = useState<AlienProfile | null>(null);
-  const [matchedAlien, setMatchedAlien] = useState<AlienProfile | null>(null);
   const [dismissedIds, setDismissedIds] = useState<Set<string>>(new Set());
 
   // Keep exactly 5 slots for the 5 orbit tracks
@@ -60,7 +60,7 @@ export default function OrbitSystem() {
   const handleMatch = (alien: AlienProfile) => {
     addMatch(alien);
     setSelectedAlien(null);
-    setMatchedAlien(alien);
+    triggerRocketNav(`/chat/${alien.id}`, { alienImg: alien.profilePic });
   };
 
   const handleDismiss = (alien: AlienProfile) => {
@@ -213,12 +213,6 @@ export default function OrbitSystem() {
         />
       )}
 
-      {matchedAlien && (
-        <MatchOverlay 
-          alien={matchedAlien} 
-          userName={preferences.name || 'User'} 
-        />
-      )}
     </>
   );
 }