feat: add @ prefix to profile URLs and make usernames clickable

- Updated all profile links to use /@username format
- Made usernames clickable in chat messages
- Added URL parameter sanitization to strip @ when fetching user data
- Ensures consistent profile URL format across the application

frontend/src/components/chat/ChatMessage.jsx

@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom';
 import Avatar from '../common/Avatar';
 
 // Helper function to convert country name to flag emoji
@@ -117,7 +118,12 @@ const ChatMessage = ({ message, user, participant, isOwn, formatTime }) => {
                   {countryFlag}
                 </span>
               )}
-              <span>{user.username}</span>
+              <Link
+                to={`/@${user.username}`}
+                className="hover:underline hover:text-primary-600"
+              >
+                {user.username}
+              </Link>
               {participant?.competitorNumber && (
                 <span className="text-xs font-normal text-gray-600">
                   #{participant.competitorNumber}

frontend/src/components/dashboard/DashboardMatchCard.jsx

@@ -57,7 +57,7 @@ const DashboardMatchCard = ({ match }) => {
     <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 hover:shadow-md transition-shadow">
       <div className="flex items-start gap-4">
         {/* Avatar */}
-        <Link to={`/${partner.username}`} className="flex-shrink-0 relative">
+        <Link to={`/@${partner.username}`} className="flex-shrink-0 relative">
           <img
             src={partner.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${partner.username}`}
             alt={partner.username}
@@ -74,7 +74,7 @@ const DashboardMatchCard = ({ match }) => {
         <div className="flex-1 min-w-0">
           <div className="flex items-start justify-between">
             <div>
-              <Link to={`/${partner.username}`}>
+              <Link to={`/@${partner.username}`}>
                 <h3 className="font-semibold text-gray-900 hover:text-primary-600 transition-colors">
                   {partner.firstName && partner.lastName
                     ? `${partner.firstName} ${partner.lastName}`

frontend/src/components/dashboard/MatchRequestCards.jsx

@@ -11,7 +11,7 @@ export const IncomingRequestCard = ({ request, onAccept, onReject, processing })
   return (
     <div className="bg-white rounded-lg shadow-sm border border-amber-200 p-4">
       <div className="flex items-start gap-4">
-        <Link to={`/${requester.username}`} className="flex-shrink-0">
+        <Link to={`/@${requester.username}`} className="flex-shrink-0">
           <img
             src={requester.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${requester.username}`}
             alt={requester.username}
@@ -20,7 +20,7 @@ export const IncomingRequestCard = ({ request, onAccept, onReject, processing })
         </Link>
 
         <div className="flex-1 min-w-0">
-          <Link to={`/${requester.username}`}>
+          <Link to={`/@${requester.username}`}>
             <h4 className="font-medium text-gray-900 hover:text-primary-600 transition-colors">
               {requester.firstName && requester.lastName
                 ? `${requester.firstName} ${requester.lastName}`
@@ -69,7 +69,7 @@ export const OutgoingRequestCard = ({ request, onCancel, processing }) => {
   return (
     <div className="bg-white rounded-lg shadow-sm border border-blue-200 p-4">
       <div className="flex items-start gap-4">
-        <Link to={`/${recipient.username}`} className="flex-shrink-0">
+        <Link to={`/@${recipient.username}`} className="flex-shrink-0">
           <img
             src={recipient.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${recipient.username}`}
             alt={recipient.username}
@@ -78,7 +78,7 @@ export const OutgoingRequestCard = ({ request, onCancel, processing }) => {
         </Link>
 
         <div className="flex-1 min-w-0">
-          <Link to={`/${recipient.username}`}>
+          <Link to={`/@${recipient.username}`}>
             <h4 className="font-medium text-gray-900 hover:text-primary-600 transition-colors">
               {recipient.firstName && recipient.lastName
                 ? `${recipient.firstName} ${recipient.lastName}`

frontend/src/components/matches/MatchCard.jsx

@@ -16,7 +16,7 @@ const MatchCard = ({ match, onAccept, onReject, onOpenChat, processing }) => {
       <div className="flex items-start justify-between">
         <div className="flex-1">
           <div className="flex items-center gap-3 mb-2">
-            <Link to={`/${match.partner.username}`} className="flex-shrink-0">
+            <Link to={`/@${match.partner.username}`} className="flex-shrink-0">
               <img
                 src={match.partner.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${match.partner.username}`}
                 alt={match.partner.username}
@@ -24,7 +24,7 @@ const MatchCard = ({ match, onAccept, onReject, onOpenChat, processing }) => {
               />
             </Link>
             <div>
-              <Link to={`/${match.partner.username}`}>
+              <Link to={`/@${match.partner.username}`}>
                 <h3 className="font-semibold text-gray-900 hover:text-primary-600 transition-colors">
                   {match.partner.firstName && match.partner.lastName
                     ? `${match.partner.firstName} ${match.partner.lastName}`

frontend/src/components/users/UserListItem.jsx

@@ -46,7 +46,7 @@ const UserListItem = ({
 
   const usernameContent = linkToProfile ? (
     <Link
-      to={`/profile/${user.username}`}
+      to={`/@${user.username}`}
       className={`${usernameClasses} hover:text-primary-600`}
     >
       {user.username}

frontend/src/pages/MatchChatPage.jsx

@@ -219,7 +219,7 @@ const MatchChatPage = () => {
         <div className="bg-primary-600 text-white p-4">
             <div className="flex items-center justify-between">
               <div className="flex items-center space-x-4">
-                <Link to={`/${partner.username}`} className="flex-shrink-0">
+                <Link to={`/@${partner.username}`} className="flex-shrink-0">
                   <Avatar
                     src={partner.avatar}
                     username={partner.username}
@@ -229,7 +229,7 @@ const MatchChatPage = () => {
                   />
                 </Link>
                 <div>
-                  <Link to={`/${partner.username}`}>
+                  <Link to={`/@${partner.username}`}>
                     <h2 className="text-xl font-bold hover:text-primary-100 transition-colors">
                       {partner.firstName && partner.lastName
                         ? `${partner.firstName} ${partner.lastName}`

frontend/src/pages/PublicProfilePage.jsx

@@ -6,7 +6,9 @@ import { User, MapPin, Globe, Hash, Youtube, Instagram, Facebook, Award, Users,
 import Avatar from '../components/common/Avatar';
 
 const PublicProfilePage = () => {
-  const { username } = useParams();
+  const { username: rawUsername } = useParams();
+  // Strip @ from username if present (for /@username URLs)
+  const username = rawUsername?.startsWith('@') ? rawUsername.slice(1) : rawUsername;
   const [profile, setProfile] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
@@ -265,7 +267,7 @@ const PublicProfilePage = () => {
                     <div key={rating.id} className="border-b pb-4 last:border-b-0">
                       <div className="flex items-start gap-4">
                         {/* Rater Info */}
-                        <Link to={`/${rating.rater.username}`} className="flex-shrink-0">
+                        <Link to={`/@${rating.rater.username}`} className="flex-shrink-0">
                           <Avatar
                             src={rating.rater.avatar}
                             username={rating.rater.username}
@@ -280,7 +282,7 @@ const PublicProfilePage = () => {
                           <div className="flex items-start justify-between mb-2">
                             <div>
                               <Link
-                                to={`/${rating.rater.username}`}
+                                to={`/@${rating.rater.username}`}
                                 className="font-semibold text-gray-900 hover:text-primary-600"
                               >
                                 {rating.rater.firstName && rating.rater.lastName