Add feedback carousel and auth roles

Author: TripleU613

firestore.rules

@@ -15,13 +15,8 @@ service cloud.firestore {
         && request.auth.token.email == "tripleuworld@gmail.com";
     }
 
-    match /users/{emailKey} {
-      function normalizedEmail(email) {
-        return email != null ? lower(email) : '';
-      }
-
-      allow read, write: if request.auth != null
-        && normalizedEmail(request.auth.token.email) == emailKey;
+    match /users/{userId} {
+      allow read, write: if request.auth != null && request.auth.uid == userId;
     }
   }
 }

src/components/Header.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useLocation, useNavigate } from 'react-router-dom';
 import { AnimatePresence, motion } from 'framer-motion';
 import { signOut } from 'firebase/auth';
 import { auth } from '../lib/firebase';
@@ -21,6 +21,8 @@ export default function Header() {
   const [open, setOpen] = useState(false);
   const [profileOpen, setProfileOpen] = useState(false);
   const { user } = useAuth();
+  const navigate = useNavigate();
+  const location = useLocation();
 
   useEffect(() => {
     setProfileOpen(false);
@@ -51,6 +53,18 @@ export default function Header() {
     setOpen(false);
   };
 
+  const handleFeedbackShortcut = () => {
+    setProfileOpen(false);
+    setOpen(false);
+    const trigger = () => window.dispatchEvent(new CustomEvent('openFeedbackModal'));
+    if (location.pathname !== '/') {
+      navigate('/');
+      setTimeout(trigger, 150);
+    } else {
+      trigger();
+    }
+  };
+
   return (
     <header className="sticky top-0 z-40 border-b border-white/5 bg-slate-950/80 backdrop-blur-xl">
       <nav className="mx-auto flex max-w-6xl items-center justify-between px-6 py-5">
@@ -110,6 +124,13 @@ export default function Header() {
                       >
                         Apps dashboard
                       </NavLink>
+                      <button
+                        type="button"
+                        className="mt-2 w-full rounded-full border border-sky-500/40 px-3 py-2 font-semibold text-sky-300 hover:border-sky-300"
+                        onClick={handleFeedbackShortcut}
+                      >
+                        Share feedback
+                      </button>
                       <button
                         type="button"
                         className="mt-2 w-full rounded-full bg-slate-800 px-3 py-2 font-semibold hover:bg-slate-700"

src/context/AuthContext.jsx

@@ -3,63 +3,76 @@ import { onAuthStateChanged, signOut } from 'firebase/auth';
 import { doc, getDoc, setDoc } from 'firebase/firestore';
 import { auth, firestore } from '../lib/firebase';
 
-const AuthContext = createContext({ user: null, loading: true });
+const AuthContext = createContext({ user: null, loading: true, profile: null });
 
 export function AuthProvider({ children }) {
   const [user, setUser] = useState(null);
   const [loading, setLoading] = useState(true);
+  const [profile, setProfile] = useState(null);
 
   useEffect(() => {
-    const unsubscribe = onAuthStateChanged(auth, async (firebaseUser) => {
-      if (firebaseUser?.email) {
+    let cancelled = false;
+
+    const unsubscribe = onAuthStateChanged(auth, (firebaseUser) => {
+      if (!firebaseUser) {
+        setUser(null);
+        setProfile(null);
+        setLoading(false);
+        return;
+      }
+
+      const hydrateProfile = async () => {
         try {
-          const emailKey = firebaseUser.email.toLowerCase();
-          const userRef = doc(firestore, 'users', emailKey);
+          const userRef = doc(firestore, 'users', firebaseUser.uid);
           const snapshot = await getDoc(userRef);
-          if (snapshot.exists() && snapshot.data()?.banned) {
+          let data;
+          if (snapshot.exists()) {
+            data = snapshot.data();
+          } else {
+            data = {
+              email: firebaseUser.email || '',
+              displayName: firebaseUser.displayName || '',
+              banned: false,
+              isAdmin: false,
+            };
+            await setDoc(userRef, data, { merge: true });
+          }
+
+          if (data?.banned) {
             await signOut(auth);
-            setUser(null);
-            setLoading(false);
+            if (!cancelled) {
+              setUser(null);
+              setProfile(null);
+              setLoading(false);
+            }
             return;
           }
+
+          if (!cancelled) {
+            setUser(firebaseUser);
+            setProfile(data);
+            setLoading(false);
+          }
         } catch (error) {
           console.error('Auth guard failed', error);
+          if (!cancelled) {
+            setUser(firebaseUser);
+            setProfile(null);
+            setLoading(false);
+          }
         }
-      }
-      setUser(firebaseUser);
-      setLoading(false);
-    });
-    return unsubscribe;
-  }, []);
-
-  useEffect(() => {
-    if (!user?.email) return undefined;
-    let cancelled = false;
+      };
 
-    const syncUserDoc = async () => {
-      try {
-        const emailKey = user.email.toLowerCase();
-        const userRef = doc(firestore, 'users', emailKey);
-        const snapshot = await getDoc(userRef);
-        if (!snapshot.exists() && !cancelled) {
-          await setDoc(userRef, {
-            email: user.email,
-            banned: false,
-            isAdmin: false,
-          });
-        }
-      } catch (error) {
-        console.error('Unable to sync user record', error);
-      }
-    };
+      hydrateProfile();
+    });
 
-    syncUserDoc();
     return () => {
       cancelled = true;
+      unsubscribe();
     };
-  }, [user?.email]);
+  }, []);
 
-  return <AuthContext.Provider value={{ user, loading }}>{children}</AuthContext.Provider>;
+  return <AuthContext.Provider value={{ user, loading, profile }}>{children}</AuthContext.Provider>;
 }
 
 export const useAuth = () => useContext(AuthContext);

src/pages/Apps.jsx

@@ -28,7 +28,7 @@ const initialForm = {
 };
 
 export default function Apps() {
-  const { user, loading } = useAuth();
+  const { user, loading, profile } = useAuth();
   const [approvedApps, setApprovedApps] = useState([]);
   const [pendingApps, setPendingApps] = useState([]);
   const [formValues, setFormValues] = useState(initialForm);
@@ -41,6 +41,8 @@ export default function Apps() {
   const [catalogReady, setCatalogReady] = useState(false);
   const [catalogLoading, setCatalogLoading] = useState(true);
 
+  const isAdmin = Boolean(profile?.isAdmin || user?.email === ADMIN_EMAIL);
+
   useEffect(() => {
     setCatalogReady(false);
     setCatalogLoading(true);
@@ -52,7 +54,7 @@ export default function Apps() {
     });
 
     let unsubPending = () => {};
-    if (user?.email === ADMIN_EMAIL) {
+    if (isAdmin) {
       const pendingQuery = query(appsRef, where('status', '==', 'pending'), orderBy('createdAt', 'asc'));
       unsubPending = onSnapshot(pendingQuery, (snapshot) => {
         setPendingApps(snapshot.docs.map((docSnap) => ({ id: docSnap.id, ...docSnap.data() })));
@@ -65,7 +67,7 @@ export default function Apps() {
       unsubApproved();
       unsubPending();
     };
-  }, [user?.email]);
+  }, [user?.email, isAdmin]);
 
   const approvedAppCards = useMemo(
     () =>