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,7 +29,6 @@ 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"
@@ -56,12 +49,5 @@ export function UserProfile() {
         </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>
   );
 }

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={async () => {
+                        await signOut();
+                        navigate('/');
+                      }}
+                      className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700"
+                    >
+                      Sign Out
+                    </button>
+                  </>
                 )}
               </div>
             )}