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}