Merge pull request #24 from LAKSHYA9941/main

Error Fix and Profile

Author: 0-harshit-0

webapp_front/package-lock.json

@@ -21,6 +21,7 @@
     "react-icons": "^5.5.0",
     "react-router": "^7.2.0",
     "react-router-dom": "^7.2.0",
+    "swiper": "^11.2.10",
     "tailwind-merge": "^3.0.2",
     "zustand": "^5.0.3"
   },
@@ -38,6 +39,6 @@
     "tailwindcss": "^4.0.17",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.24.1",
-    "vite": "^6.3.3"
+    "vite": "^6.3.5"
   }
 }

webapp_front/package.json

@@ -0,0 +1,25 @@
+import { useAuthDataStore } from "../_stores/user_auth_data";
+
+const Profile = () => {
+    const user = useAuthDataStore((state) => state.signInData?.user);
+
+    if (!user) return null;
+
+    // Extract initials
+    const initials = user.displayName
+        ?.split(" ")
+        .map((n) => n[0])
+        .join("")
+        .toUpperCase();
+
+    return (
+        <div className="flex items-center gap-3 bg-white px-4 py-2 rounded-xl shadow-sm">
+            <div className="w-10 h-10 bg-accent text-secondary font-bold rounded-full flex items-center justify-center text-sm">
+                {initials}
+            </div>
+            <span className="text-md font-bold text-primary">{user.displayName}</span>
+        </div>
+    );
+};
+
+export default Profile;

webapp_front/src/_components/Profile.tsx

@@ -1,6 +1,6 @@
 const Goodbye = () => {
   return (
-    <div className="min-h-screen flex flex-col justify-center items-center text-center text-6xl font-bold text-primary pb-[10%]">
+    <div className="min-h-screen flex flex-col justify-center items-center text-center text-4xl font-bold text-primary pb-[10%]">
       👋 Thanks for checking out!
       <p className="text-3xl mt-4">See you next time!</p>
     </div>

webapp_front/src/_components/goodbye.tsx

@@ -102,7 +102,7 @@ const Home = ({
       ))}
 
       {/* Hero text */}
-      <em className="text-3xl text-primary text-center z-10 home-page-text" >
+      <em className="text-3xl text-primary text-center z-10 home-page-text font-bold" >
         {
           punchLines[Math.floor(punchLines.length*Math.random())]
         }

webapp_front/src/_components/home.tsx

@@ -3,6 +3,7 @@ import { twMerge } from "tailwind-merge";
 import { signOut } from "firebase/auth";
 import { Menu as MenuIcon, Globe, Gamepad, QrCode, LogOut } from "lucide-react"; //User
 import { useState, useRef, useEffect } from "react";
+import Profile from "../_components/Profile";
 
 import { auth } from "../_libs/firebase";
 
@@ -40,7 +41,7 @@ const Navbar = () => {
   const items = [
     // { id: "profile", icon: User, to: "/socialize/profile", color: 'text-primary' },
     { id: "explore", icon: Globe, to: "/socialize/explore", color: 'text-primary' },
-    { id: "games",   icon: Gamepad, to: "/socialize/games", color: 'text-primary' },
+    { id: "games", icon: Gamepad, to: "/socialize/games", color: 'text-primary' },
     {
       id: "qr",
       icon: QrCode,
@@ -53,7 +54,7 @@ const Navbar = () => {
   ];
 
   return (
-    <nav className="relative flex justify-between items-center w-full h-[10%] p-3 px-6 max-w-[1440px] mx-auto text-primary">
+    <nav className="relative flex justify-between items-center w-full h-[10%] p-3 px-6 mx-auto text-primary shadow-md bg-white/80 z-50">
       <h1 className={twMerge("navs", "text-3xl")}>
         <Link to="/" className="flex items-center">
           {/* <img src={ChaiLogo} className="w-[3%]" /> */}
@@ -77,7 +78,10 @@ const Navbar = () => {
           </Link>
         </section>
       ) : (
-        <div className="relative" ref={menuRef}>
+        <div className="flex items-center gap-4" ref={menuRef}>
+          {/* Profile */}
+          {signInData && <Profile />}
+
           {/* Hamburger */}
           <button
             onClick={() => setMenuOpen((o) => !o)}
@@ -88,7 +92,7 @@ const Navbar = () => {
           </button>
 
           {/* Icon‐only menu */}
-          <div className="absolute flex flex-col items-center space-y-6 translate-x-half left-1/2 top-[270%] z-10">
+          <div className="absolute right-0 top-full m-3 p-2 flex flex-col items-end space-y-3 z-10">
             {items.map((item, idx) => {
               const Icon = item.icon;
               const delayMs = idx * 80;

webapp_front/src/_components/navbar.tsx

@@ -1,13 +1,14 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-
 import { signInWithGoogle, storeEmailOnly } from "../../_libs/firebase";
+import { useAuthDataStore } from "../../_stores/user_auth_data";
 
 
 const Auth = () => {
   // Setup navigation (to move to different pages like /home)
   const navigate = useNavigate();
-  
+  const useAuthStore = useAuthDataStore();
+
 
   // State variables
 
@@ -43,10 +44,9 @@ const Auth = () => {
 
     if (success) {
       console.log("✅ Email saved:", email);
+      useAuthStore.setSignInData({ email }); // Set pseudo-auth state for email-only users
       setFormSubmitted(true); // Trigger form animation
-      setTimeout(() => {
-        navigate("explore"); // Navigate after short delay for animation
-      }, 500); // 0.5 second delay
+      navigate("explore"); //navigating to /socialize/explore
     } else {
       console.error("❌ Failed to save email");
     }
@@ -56,7 +56,7 @@ const Auth = () => {
     <div className="flex flex-col items-center h-screen gap-6 text-3xl py-[20vh]">
 
       {/* Heading Text */}
-      <p className="text-3xl text-primary">
+      <p className="text-3xl text-primary text-center px-2">
         Share and explore moments over a cup of chai. ☕
       </p>