feat: Implement seamless auth modal

src/components/auth/AuthButtons.tsx

@@ -3,9 +3,11 @@ import { useNavigate } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
-import { User, Settings, LogOut, Trophy } from 'lucide-react';
+import { User, Settings, LogOut } from 'lucide-react';
 import { useAuth } from '@/hooks/useAuth';
 import { useToast } from '@/hooks/use-toast';
+import { AuthModal } from './AuthModal';
+
 export function AuthButtons() {
   const {
     user,
@@ -17,6 +19,8 @@ export function AuthButtons() {
     toast
   } = useToast();
   const [loggingOut, setLoggingOut] = useState(false);
+  const [authModalOpen, setAuthModalOpen] = useState(false);
+  const [authModalTab, setAuthModalTab] = useState<'signin' | 'signup'>('signin');
   const handleSignOut = async () => {
     setLoggingOut(true);
     try {
@@ -37,14 +41,36 @@ export function AuthButtons() {
     }
   };
   if (!user) {
-    return <>
-        <Button variant="ghost" size="sm" className="hidden sm:flex" onClick={() => navigate('/auth?tab=signin')}>
+    return (
+      <>
+        <Button 
+          variant="ghost" 
+          size="sm" 
+          className="hidden sm:flex" 
+          onClick={() => {
+            setAuthModalTab('signin');
+            setAuthModalOpen(true);
+          }}
+        >
           Sign In
         </Button>
-        <Button size="sm" className="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90" onClick={() => navigate('/auth?tab=signup')}>
+        <Button 
+          size="sm" 
+          className="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90" 
+          onClick={() => {
+            setAuthModalTab('signup');
+            setAuthModalOpen(true);
+          }}
+        >
           Join ThrillWiki
         </Button>
-      </>;
+        <AuthModal 
+          open={authModalOpen} 
+          onOpenChange={setAuthModalOpen}
+          defaultTab={authModalTab}
+        />
+      </>
+    );
   }
   return <DropdownMenu>
       <DropdownMenuTrigger asChild>