Refactor code structure and remove redundant changes

components/auth/UserNav.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+/**
+ * User Navigation Component
+ * 
+ * Displays login/register buttons when logged out
+ * Displays user menu with logout when logged in
+ */
+
+import { useAuth } from '@/lib/contexts/AuthContext';
+import { Button } from '@/components/ui/button';
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { AuthModal } from './AuthModal';
+
+export function UserNav() {
+  const { user, isAuthenticated, isLoading, logout } = useAuth();
+  const router = useRouter();
+  const [showAuthModal, setShowAuthModal] = useState(false);
+  const [authMode, setAuthMode] = useState<'login' | 'register'>('login');
+
+  const handleLogout = async () => {
+    await logout();
+    router.push('/');
+  };
+
+  const handleLogin = () => {
+    setAuthMode('login');
+    setShowAuthModal(true);
+  };
+
+  const handleRegister = () => {
+    setAuthMode('register');
+    setShowAuthModal(true);
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center gap-2">
+        <div className="h-9 w-20 animate-pulse bg-gray-200 rounded-md"></div>
+      </div>
+    );
+  }
+
+  if (isAuthenticated && user) {
+    return (
+      <div className="flex items-center gap-4">
+        <div className="flex items-center gap-2">
+          <div className="flex flex-col items-end">
+            <span className="text-sm font-medium">{user.username}</span>
+            <span className="text-xs text-gray-500">{user.email}</span>
+          </div>
+          <div className="h-9 w-9 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-semibold">
+            {user.username.charAt(0).toUpperCase()}
+          </div>
+        </div>
+        <Button
+          onClick={handleLogout}
+          variant="outline"
+          size="sm"
+        >
+          Logout
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="flex items-center gap-2">
+        <Button
+          onClick={handleLogin}
+          variant="outline"
+          size="sm"
+        >
+          Login
+        </Button>
+        <Button
+          onClick={handleRegister}
+          size="sm"
+        >
+          Sign Up
+        </Button>
+      </div>
+
+      <AuthModal
+        isOpen={showAuthModal}
+        onClose={() => setShowAuthModal(false)}
+        defaultMode={authMode}
+      />
+    </>
+  );
+}