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>
   );
 }