Move Sign Out button to profile page

- Remove Sign Out button from UserProfile component in header
- Add Sign Out button to UserProfilePage next to Edit Profile
- Sign Out button only visible on user's own profile page
- Styled with red background to indicate destructive action

src/components/auth/UserProfile.tsx

@@ -1,4 +1,4 @@
-import { useUser, useClerk } from '@clerk/clerk-react';
+import { useUser } from '@clerk/clerk-react';
 import { useNavigate } from 'react-router-dom';
 
 /**
@@ -6,14 +6,8 @@ import { useNavigate } from 'react-router-dom';
  */
 export function UserProfile() {
   const { user, isLoaded } = useUser();
-  const { signOut } = useClerk();
   const navigate = useNavigate();
 
-  const handleSignOut = async () => {
-    await signOut();
-    navigate('/');
-  };
-
   const handleViewProfile = () => {
     if (user?.id) {
       navigate(`/profile/${user.id}`);
@@ -35,33 +29,25 @@ export function UserProfile() {
   }
 
   return (
-    <div className="flex items-center space-x-4">
-      <button
-        onClick={handleViewProfile}
-        className="flex items-center space-x-3 hover:opacity-80 transition-opacity"
-      >
-        {user.imageUrl && (
-          <img
-            src={user.imageUrl}
-            alt={user.fullName || user.username || 'User'}
-            className="h-10 w-10 rounded-full object-cover border-2 border-gray-200"
-          />
-        )}
-        <div className="hidden md:block text-left">
-          <p className="text-sm font-medium text-gray-900">
-            {user.fullName || user.username || 'User'}
-          </p>
-          <p className="text-xs text-gray-500">
-            {user.primaryEmailAddress?.emailAddress}
-          </p>
-        </div>
-      </button>
-      <button
-        onClick={handleSignOut}
-        className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-      >
-        Sign Out
-      </button>
-    </div>
+    <button
+      onClick={handleViewProfile}
+      className="flex items-center space-x-3 hover:opacity-80 transition-opacity"
+    >
+      {user.imageUrl && (
+        <img
+          src={user.imageUrl}
+          alt={user.fullName || user.username || 'User'}
+          className="h-10 w-10 rounded-full object-cover border-2 border-gray-200"
+        />
+      )}
+      <div className="hidden md:block text-left">
+        <p className="text-sm font-medium text-gray-900">
+          {user.fullName || user.username || 'User'}
+        </p>
+        <p className="text-xs text-gray-500">
+          {user.primaryEmailAddress?.emailAddress}
+        </p>
+      </div>
+    </button>
   );
 }

src/pages/UserProfilePage.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useAuth } from '@/hooks/useAuth';
+import { useClerk } from '@clerk/clerk-react';
 import { userService, type UserProfile, type UserActivity } from '@/services/userService';
 import type { Report, CleanupEvent } from '@/types';
 import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
@@ -23,6 +24,7 @@ L.Icon.Default.mergeOptions({
 export function UserProfilePage() {
   const { userId } = useParams<{ userId: string }>();
   const { user: currentUser } = useAuth();
+  const { signOut } = useClerk();
   const navigate = useNavigate();
   
   const [profile, setProfile] = useState<UserProfile | null>(null);
@@ -264,12 +266,23 @@ export function UserProfilePage() {
                     </button>
                   </>
                 ) : (
-                  <button
-                    onClick={handleEditProfile}
-                    className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
-                  >
-                    Edit Profile
-                  </button>
+                  <>
+                    <button
+                      onClick={handleEditProfile}
+                      className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+                    >
+                      Edit Profile
+                    </button>
+                    <button
+                      onClick={async () => {
+                        await signOut();
+                        navigate('/');
+                      }}
+                      className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700"
+                    >
+                      Sign Out
+                    </button>
+                  </>
                 )}
               </div>
             )}