Have fun vroo

Author: fuzziecoder

App.tsx

@@ -19,6 +19,7 @@ import HistoryPage from "./pages/HistoryPage";
 import NotificationsPage from "./pages/NotificationsPage";
 import ProfilePage from "./pages/ProfilePage";
 import ChatPage from "./pages/ChatPage";
+import DrinksPage from "./pages/DrinksPage";
 
 import DashboardLayout from "./components/layout/DashboardLayout";
 import ProtectedRoute from "./components/auth/ProtectedRoute";
@@ -45,6 +46,7 @@ const App: React.FC = () => {
                   <Route index element={<Navigate to="home" replace />} />
                   <Route path="home" element={<HomePage />} />
                   <Route path="payment" element={<PaymentPage />} />
+                  <Route path="drinks" element={<DrinksPage />} />
                   <Route path="history" element={<HistoryPage />} />
                   <Route path="notifications" element={<NotificationsPage />} />
                   <Route path="chat" element={<ChatPage />} />

components/layout/DashboardLayout.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 // FIX: Use namespace import for react-router-dom to address potential module resolution issues.
 import * as ReactRouterDOM from 'react-router-dom';
-import { Home, CreditCard, History, Bell, User, Zap, ChevronsUpDown, LogOut, MessageSquare } from 'lucide-react';
+import { Home, CreditCard, History, Bell, User, Zap, ChevronsUpDown, LogOut, MessageSquare, Wine } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { useAuth } from '../../hooks/useAuth';
 import { useNotifications } from '../../contexts/NotificationsContext';
@@ -11,6 +11,7 @@ import { useChat } from '../../contexts/ChatContext';
 const navItems = [
   { path: '/dashboard/home', icon: Home, label: 'Home' },
   { path: '/dashboard/payment', icon: CreditCard, label: 'Payment' },
+  { path: '/dashboard/drinks', icon: Wine, label: 'Drinks' },
   { path: '/dashboard/history', icon: History, label: 'History' },
   { path: '/dashboard/notifications', icon: Bell, label: 'Notifications' },
   { path: '/dashboard/chat', icon: MessageSquare, label: 'Chat' },

contexts/AuthContext.tsx

@@ -136,10 +136,40 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
   const updateProfile = async (updates: Partial<UserProfile>) => {
     if (!user) throw new Error("No user logged in");
 
-    const updatedProfile = await mockApi.updateProfile(user.id, updates);
+    try {
+      // First try to update in Supabase
+      let userId = user.id;
+      
+      // If user.id is not a UUID, try to find it in database
+      if (!userId.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i)) {
+        const { data: dbProfile } = await supabase
+          .from('profiles')
+          .select('id')
+          .or(`email.eq.${profile?.email || ''},phone.eq.${profile?.phone || ''},username.eq.${profile?.username || ''}`)
+          .single();
+        
+        if (dbProfile) {
+          userId = dbProfile.id;
+        }
+      }
 
-    setProfile(updatedProfile);
-    localStorage.setItem(PROFILE_KEY, JSON.stringify(updatedProfile));
+      // Update in database
+      const updatedProfile = await profileService.updateProfile(userId, updates);
+      
+      setProfile(updatedProfile);
+      localStorage.setItem(PROFILE_KEY, JSON.stringify(updatedProfile));
+    } catch (error) {
+      console.error('Error updating profile in database, trying mockApi fallback:', error);
+      // Fallback to mockApi for development
+      try {
+        const updatedProfile = await mockApi.updateProfile(user.id, updates);
+        setProfile(updatedProfile);
+        localStorage.setItem(PROFILE_KEY, JSON.stringify(updatedProfile));
+      } catch (mockError) {
+        console.error('Failed to update profile:', mockError);
+        throw mockError;
+      }
+    }
   };
 
   const value: AuthContextType = {

index.html

@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes" />
     <meta name="theme-color" content="#000000" />
     <title>BroCode - Spot Meetup App</title>
-    <link rel="icon" type="image/png" href="/favicon.png" />
-    <link rel="apple-touch-icon" href="/favicon.png" />
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⚡</text></svg>" />
+    <link rel="apple-touch-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⚡</text></svg>" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

pages/ChatPage.tsx

@@ -2,7 +2,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { useAuth } from '../hooks/useAuth';
 import { ChatMessage } from '../types';
-import { ArrowLeft, Video, Plus, Send, X, Smile, Trash2, Loader2, MoreVertical } from 'lucide-react';
+import { ArrowLeft, Video, Plus, Send, X, Smile, Trash2, Loader2, MoreVertical, Image as ImageIcon } from 'lucide-react';
 import { format } from 'date-fns';
 import { motion, AnimatePresence } from 'framer-motion';
 import * as ReactRouterDOM from 'react-router-dom';
@@ -55,9 +55,33 @@ const ChatPage: React.FC = () => {
     const [newMessage, setNewMessage] = useState('');
     const [imagePreviews, setImagePreviews] = useState<string[]>([]);
     const [reactingTo, setReactingTo] = useState<string | null>(null);
+    const [showStickerPicker, setShowStickerPicker] = useState(false);
     const messagesEndRef = useRef<HTMLDivElement>(null);
     const fileInputRef = useRef<HTMLInputElement>(null);
 
+    // Popular emojis/stickers (can be extended)
+    const stickers = [
+        '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇',
+        '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗', '😙', '😚',
+        '😋', '😛', '😝', '😜', '🤪', '🤨', '🧐', '🤓', '😎', '🤩',
+        '🥳', '😏', '😒', '😞', '😔', '😟', '😕', '🙁', '😣', '😖',
+        '😫', '😩', '🥺', '😢', '😭', '😤', '😠', '😡', '🤬', '🤯',
+        '😳', '🥵', '🥶', '😱', '😨', '😰', '😥', '😓', '🤗', '🤔',
+        '🤭', '🤫', '🤥', '😶', '😐', '😑', '😬', '🙄', '😯', '😦',
+        '😧', '😮', '😲', '🥱', '😴', '🤤', '😪', '😵', '🤐', '🥴',
+        '🤢', '🤮', '🤧', '😷', '🤒', '🤕', '🤑', '🤠', '😈', '👿',
+        '👹', '👺', '🤡', '💩', '👻', '💀', '☠️', '👽', '👾', '🤖',
+        '🎃', '😺', '😸', '😹', '😻', '😼', '😽', '🙀', '😿', '😾',
+        '👋', '🤚', '🖐', '✋', '🖖', '👌', '🤏', '✌️', '🤞', '🤟',
+        '🤘', '🤙', '👈', '👉', '👆', '🖕', '👇', '☝️', '👍', '👎',
+        '✊', '👊', '🤛', '🤜', '👏', '🙌', '👐', '🤲', '🤝', '🙏',
+        '✍️', '💪', '🦾', '🦿', '🦵', '🦶', '👂', '🦻', '👃', '🧠',
+        '🦷', '🦴', '👀', '👁️', '👅', '👄', '💋', '💘', '💝', '💖',
+        '💗', '💓', '💞', '💕', '💟', '❣️', '💔', '❤️', '🧡', '💛',
+        '💚', '💙', '💜', '🖤', '🤍', '🤎', '💯', '💢', '💥', '💫',
+        '💦', '💨', '🕳️', '💣', '💬', '👁️‍🗨️', '🗨️', '🗯️', '💭', '💤',
+    ];
+
     useEffect(() => { 
         setChatActive(true); 
         return () => setChatActive(false); 
@@ -97,6 +121,18 @@ const ChatPage: React.FC = () => {
         }
     };
 
+    const handleStickerSelect = async (sticker: string) => {
+        setShowStickerPicker(false);
+        try {
+            await sendMessage({ 
+                content_text: sticker
+            });
+        } catch (error) {
+            console.error("Failed to send sticker:", error);
+            alert("Failed to send sticker. Please try again.");
+        }
+    };
+
     return (
         <div className="h-[calc(100vh-140px)] md:h-[calc(100vh-64px)] flex flex-col bg-black text-white relative overflow-hidden rounded-3xl border border-white/5">
             <header className="flex items-center justify-between p-4 border-b border-zinc-800 bg-black/80 backdrop-blur-md sticky top-0 z-20">
@@ -263,7 +299,7 @@ const ChatPage: React.FC = () => {
                     )}
                 </AnimatePresence>
 
-                <form onSubmit={handleSend} className="flex items-center gap-3">
+                <form onSubmit={handleSend} className="flex items-center gap-3 relative">
                     <button 
                         type="button" 
                         onClick={() => fileInputRef.current?.click()}
@@ -280,13 +316,46 @@ const ChatPage: React.FC = () => {
                         onChange={handleFileChange} 
                     />
 
+                    <button
+                        type="button"
+                        onClick={() => setShowStickerPicker(!showStickerPicker)}
+                        className={`p-3 rounded-2xl text-zinc-400 hover:text-white transition-all border border-white/5 ${
+                            showStickerPicker ? 'bg-indigo-600 text-white' : 'bg-zinc-900 hover:bg-zinc-800'
+                        }`}
+                    >
+                        <Smile size={20}/>
+                    </button>
+
+                    {/* Sticker Picker */}
+                    {showStickerPicker && (
+                        <motion.div
+                            initial={{ opacity: 0, y: 10 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            exit={{ opacity: 0, y: 10 }}
+                            className="absolute bottom-full left-0 mb-2 w-80 h-64 bg-[#1A1A1A] border border-white/10 rounded-2xl p-4 overflow-y-auto shadow-2xl z-50"
+                        >
+                            <div className="grid grid-cols-8 gap-2">
+                                {stickers.map((sticker, index) => (
+                                    <button
+                                        key={index}
+                                        onClick={() => handleStickerSelect(sticker)}
+                                        className="p-2 hover:bg-zinc-800 rounded-lg text-2xl transition-colors"
+                                    >
+                                        {sticker}
+                                    </button>
+                                ))}
+                            </div>
+                        </motion.div>
+                    )}
+                    
                     <div className="flex-1 relative">
                         <input
                             type="text"
                             value={newMessage}
                             onChange={(e) => setNewMessage(e.target.value)}
                             placeholder="Send a secure message..."
                             className="w-full py-4 pl-5 pr-12 bg-zinc-900/50 border border-white/5 rounded-2xl focus:outline-none focus:border-indigo-500/50 transition-all text-sm placeholder-zinc-600"
+                            onFocus={() => setShowStickerPicker(false)}
                         />
                         <button 
                             type="submit"