feat: Centralize Auth Modal and require auth for actions

src/components/auth/AuthButtons.tsx

@@ -7,18 +7,15 @@ import { User, Settings, LogOut } from 'lucide-react';
 import { useAuth } from '@/hooks/useAuth';
 import { useProfile } from '@/hooks/useProfile';
 import { useToast } from '@/hooks/use-toast';
-import { AuthModal } from './AuthModal';
+import { useAuthModal } from '@/hooks/useAuthModal';
 
 export function AuthButtons() {
   const { user, loading: authLoading, signOut } = useAuth();
   const { data: profile, isLoading: profileLoading } = useProfile(user?.id);
   const navigate = useNavigate();
-  const {
-    toast
-  } = useToast();
+  const { toast } = useToast();
+  const { openAuthModal } = useAuthModal();
   const [loggingOut, setLoggingOut] = useState(false);
-  const [authModalOpen, setAuthModalOpen] = useState(false);
-  const [authModalTab, setAuthModalTab] = useState<'signin' | 'signup'>('signin');
   const handleSignOut = async () => {
     setLoggingOut(true);
     try {
@@ -52,31 +49,20 @@ export function AuthButtons() {
   if (!user) {
     return (
       <>
-      <Button
-        variant="ghost" 
-        size="sm" 
-        onClick={() => {
-          setAuthModalTab('signin');
-          setAuthModalOpen(true);
-        }}
-      >
-        Sign In
-      </Button>
+        <Button
+          variant="ghost" 
+          size="sm" 
+          onClick={() => openAuthModal('signin')}
+        >
+          Sign In
+        </Button>
         <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);
-          }}
+          onClick={() => openAuthModal('signup')}
         >
           Join ThrillWiki
         </Button>
-        <AuthModal 
-          open={authModalOpen} 
-          onOpenChange={setAuthModalOpen}
-          defaultTab={authModalTab}
-        />
       </>
     );
   }